Plugin to link assets to a native project so they can be loaded synchronously.
yarn add @bacons/link-assets
{
"plugins": [
["@bacons/link-assets", ["./assets/icon.png", "./assets/font.ttf"]]
]
}
Then run prebuild to link assets.
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.
.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.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.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.
thank you, I have a couple of questions
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.