evanbacon / link-assets

@bacons/link-assets

Plugin to link assets to a native project so they can be loaded synchronously.

Add the package to your npm dependencies

yarn add @bacons/link-assets

Usage

{
  "plugins": [
    ["@bacons/link-assets", ["./assets/icon.png", "./assets/font.ttf"]]
  ]
}

Then run prebuild to link assets.

link-assets's Issues

Support for adding assets other than fonts and images (strawman code included)

In my case, I want to add a .sqlite3 file to an iOS app, yet don't have any fonts and images.

I performed a very rough-and-ready patch upon the built code just to unblock my use-case and thought I might as well share the code while I was at it.

• As the .sqlite3 extension wasn't recognised by the mime library, I had to identify it manually (though, of note, mime does support defining other extensions) to ensure it got assigned a group name other than empty-string.
• Having assigned it the application group name, I added a call to addResourceFile(application) in the iOS implementation (I've not addressed Android). Ideally, we'd just have an "other" group where we could add any non-image or non-font (i.e. an asset not to be specially handled) regardless of file extension being recognised.
• Lastly, I noticed that it was altering my Info.plist file to add an empty array under the UIAppFonts key, when I hadn't had any fonts in the first place, so I added a guard there, but it's not perfect.

diff --git a/node_modules/@bacons/link-assets/build/groupFiles.js b/node_modules/@bacons/link-assets/build/groupFiles.js
index 91c7f85..84affde 100644
--- a/node_modules/@bacons/link-assets/build/groupFiles.js
+++ b/node_modules/@bacons/link-assets/build/groupFiles.js
@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.groupFilesByType = void 0;
 const mime_1 = __importDefault(require("mime"));
+function getCustomType(type){ return ['sqlite', 'sqlite3', 'db', 'db3', 's3db', 'sl3'].some(extension => type.endsWith(`.${extension}`)) ? 'application/vnd.sqlite3' : '' }
 /**
  * Given an array of files, it groups it by it's type.
  * Type of the file is inferred from it's mimetype based on the extension
@@ -17,7 +18,7 @@ const mime_1 = __importDefault(require("mime"));
  * the returned object will be: {font: ['fonts/a.ttf'], image: ['images/b.jpg']}
  */
 function groupFilesByType(assets) {
-    return groupBy(assets, (type) => (mime_1.default.getType(type) || "").split("/")[0]);
+    return groupBy(assets, (type) => (mime_1.default.getType(type) || getCustomType(type) || "").split("/")[0]);
 }
 exports.groupFilesByType = groupFilesByType;
 function groupBy(arr, block) {
diff --git a/node_modules/@bacons/link-assets/build/index.js b/node_modules/@bacons/link-assets/build/index.js
index d65e664..fd07326 100644
--- a/node_modules/@bacons/link-assets/build/index.js
+++ b/node_modules/@bacons/link-assets/build/index.js
@@ -44,7 +44,7 @@ const withAndroidLinkedAsset = (config, { font }) => {
     ]);
     return config;
 };
-const withIosLinkedAsset = (config, { font, image }) => {
+const withIosLinkedAsset = (config, { font, image, application }) => {
     config = (0, config_plugins_1.withXcodeProject)(config, (config) => {
         const project = config.modResults;
         config_plugins_1.IOSConfig.XcodeUtils.ensureGroupRecursively(project, "Resources");
@@ -62,6 +62,7 @@ const withIosLinkedAsset = (config, { font, image }) => {
         }
         addResourceFile(font);
         addResourceFile(image);
+        addResourceFile(application);
         return config;
     });
     config = (0, config_plugins_1.withInfoPlist)(config, (config) => {
@@ -71,13 +72,17 @@ const withIosLinkedAsset = (config, { font, image }) => {
         const existingFonts = config.modResults.UIAppFonts || [];
         const fontList = (_a = font === null || font === void 0 ? void 0 : font.map((font) => path_1.default.basename(font))) !== null && _a !== void 0 ? _a : [];
         debug("Native iOS Fonts:", fontList);
-        const allFonts = [
+        const allFonts = Array.from(new Set([
             // @ts-expect-error
             ...existingFonts,
             ...fontList,
-        ];
-        // @ts-ignore Type mismatch with the lib
-        config.modResults.UIAppFonts = Array.from(new Set(allFonts));
+        ]));
+        // FIXME: if allFonts was previously populated, but is now empty, remove
+        // the key somehow.
+        if(allFonts.length){
+          // @ts-ignore Type mismatch with the lib
+          config.modResults.UIAppFonts = allFonts;
+        }
         return config;
     });
     return config;

Thanks for the plugin, though, it's really bailed me out. I think React Native and Expo should've had a first-class concept of linking from the beginning, and maybe thanks to CNG this can be formalised.

Edit: I see that there's a formal PR for this: #6. Haven't looked too closely, however.

EAS

just wondering, have you tested this on EAS? expo run:ios works locally and the assets get embedded, but on EAS i'm getting this error:

if this doesn't seem like something obvious, i'll make a repro and make sure the issue is with this plugin

explanation

thank you, I have a couple of questions

• does this mean that if I link an image/icon using thing plugin, it'll load synchronously ?
• why not link all static assets ( icons / images ) using this plugin ?
• would using this lib substitute for using something like expo-font ?