react-native-vector-image 0.5.3 → 0.6.0

package/README.md

@@ -8,6 +8,7 @@
 - Faster render – ~5x faster than `react-native-svg`.
 - Smaller JS bundle = faster startup.
 - Native support for dark mode.
+- Web support for Expo.
 
 ## Installation
 
@@ -15,8 +16,6 @@
 yarn add react-native-vector-image
 ```
 
-For expo, see [`@zamplyy/react-native-vector-image-plugin`](https://github.com/zamplyy/react-native-vector-image-plugin).
-
 ### Android
 
 Edit `android/app/build.gradle` to look like this (without the +):
@@ -44,6 +43,44 @@ REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
 
 <img width="1212" alt="" src="https://user-images.githubusercontent.com/378279/115999935-544c0600-a5ee-11eb-9c59-6fb50e434ed0.png">
 
+### Expo
+
+After installing this npm package, add the [config plugin](https://docs.expo.io/guides/config-plugins/) to the [`plugins`](https://docs.expo.io/versions/latest/config/app/#plugins) array of your `app.json` or `app.config.js`:
+
+```json
+{
+  "expo": {
+    "plugins": ["react-native-vector-image"]
+  }
+}
+```
+
+Next, rebuild your app as described in the ["Adding custom native code"](https://docs.expo.io/workflow/customizing/) guide.
+
+#### Options
+
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+        "react-native-vector-image",
+        {
+          // These are default options, change if you want a different value:
+          "stripSvgs": false, // if true, svgs will be removed from bundle. expo-updates package crashes when svgs it expects in the bundle are not there
+          "metroConfigFile": "metro.config.js",
+          "resetCache": false,
+          "bundleWithExpo": true,
+          "entryFile": "index.ts"
+        }
+      ]
+    ]
+  }
+}
+```
+
+Shout out to [zamplyy](https://github.com/zamplyy) for making the first version of the Expo plugin.
+
 ## Usage
 
 Since native vector assets cannot be served over http via metro dev server, they must be generated and compiled into the app bundle.
@@ -62,21 +99,24 @@ To add dark mode to your image, create a new file with an `.dark.svg` extension,
 
 This takes a while as metro has to go through all the code to find the imported SVGs.
 
+_Note: for Expo just use the plugin and `npx expo prebuild`._
+
 ```sh
 yarn react-native-vector-image generate
 ```
 
-| Argument               | Description                                                      | Default                       |
-| ---------------------- | ---------------------------------------------------------------- | ----------------------------- |
-| `--entry-file`         | Path to the app entrypoint file.                                 | `index.js`                    |
-| `--config`             | Path to the metro config file.                                   | `metro.config.js`             |
-| `--reset-cache`        | Reset metro cache before extracting SVG assets.                  | `false`                       |
-| `--ios-output`         | Path to an iOS `.xcassets` folder.                               | `ios/AppName/Images.xcassets` |
-| `--no-ios-output`      | Disable iOS output.                                              | `false`                       |
-| `--android-output`     | Path to an Android `res` folder.                                 | `android/app/src/main/res`    |
-| `--no-android-output`  | Disable Android output.                                          | `false`                       |
-| `--current-color`      | Replace any `currentColor` color references in SVGs.             | `#000000`                     |
-| `--current-color-dark` | Replace any `currentColor` color references in `.dark.svg` SVGs. | `#ffffff`                     |
+| Argument               | Description                                                          | Default                       |
+| ---------------------- | -------------------------------------------------------------------- | ----------------------------- |
+| `--entry-file`         | Path to the app entrypoint file.                                     | `index.js`                    |
+| `--config`             | Path to the metro config file.                                       | `metro.config.js`             |
+| `--reset-cache`        | Reset metro cache before extracting SVG assets.                      | `false`                       |
+| `--bundle-with-expo`   | Whether to bundle the app with Expo presets or using metro directly. | `false`                       |
+| `--ios-output`         | Path to an iOS `.xcassets` folder.                                   | `ios/AppName/Images.xcassets` |
+| `--no-ios-output`      | Disable iOS output.                                                  | `false`                       |
+| `--android-output`     | Path to an Android `res` folder.                                     | `android/app/src/main/res`    |
+| `--no-android-output`  | Disable Android output.                                              | `false`                       |
+| `--current-color`      | Replace any `currentColor` color references in SVGs.                 | `#000000`                     |
+| `--current-color-dark` | Replace any `currentColor` color references in `.dark.svg` SVGs.     | `#ffffff`                     |
 
 ### Step 3: recompile
 

package/app.plugin.js

@@ -0,0 +1 @@
+module.exports = require('./plugin/build/withVectorImage');

package/expo-module.config.json

@@ -0,0 +1,3 @@
+{
+  "platforms": ["apple", "android", "web"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-vector-image",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Native vector images generated from SVG",
   "main": "src/index.js",
   "types": "src/index.d.ts",
@@ -10,7 +10,11 @@
     "url": "git+https://github.com/oblador/react-native-vector-image.git"
   },
   "scripts": {
-    "test": "jest src"
+    "test": "jest src",
+    "build:plugin": "expo-module build plugin",
+    "test:plugin": "expo-module test plugin",
+    "prepare": "expo-module prepare plugin",
+    "prepublishOnly": "expo-module prepublishOnly plugin"
   },
   "bin": {
     "react-native-vector-image": "bin/react-native-vector-image.js"
@@ -18,6 +22,9 @@
   "files": [
     "bin",
     "src",
+    "app.plugin.js",
+    "expo-module.config.json",
+    "plugin/build",
     "strip_svgs.sh",
     "strip_svgs.gradle",
     "!*.spec.js",
@@ -51,7 +58,10 @@
     }
   },
   "devDependencies": {
-    "jest": "^26.6.3",
+    "expo-module-scripts": "^5.0.7",
+    "expo": "^54.0.12",
+    "react-native": "0.81.4",
+    "jest": "^29.6.3",
     "metro": ">=0.83.3",
     "metro-config": ">=0.83.3",
     "prettier": "^2.2.1"

package/plugin/build/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/withVectorImage.ts"],"version":"5.9.3"}

package/plugin/build/withVectorImage.d.ts

@@ -0,0 +1,27 @@
+import { ConfigPlugin, ExportedConfigWithProps, XcodeProject } from 'expo/config-plugins';
+export declare enum GenerateCommands {
+    EntryFile = "--entry-file",
+    Config = "--config",
+    ResetCache = "--reset-cache",
+    BundleWithExpo = "--bundle-with-expo"
+}
+export declare const addStripSvgsImplementation: (projectBuildGradle: string) => string;
+export declare const setPBXShellScriptBuildPhaseStripSvg: (config: ExportedConfigWithProps<XcodeProject>) => Promise<ExportedConfigWithProps<XcodeProject>>;
+export declare const getCommands: (commands?: {
+    command: GenerateCommands;
+    input: string;
+}[]) => string;
+export declare const withGenerateIosAssets: ConfigPlugin<string | void>;
+export declare const withGenerateAndroidAssets: ConfigPlugin<string | void>;
+type VectorImagePlugin = ConfigPlugin<{
+    customMetroConfigFile?: string;
+    resetCache?: boolean;
+    customEntryFile?: string;
+    stripSvgs?: boolean;
+    bundleWithExpo?: boolean;
+} | void>;
+/**
+ * Apply VectorImage configuration for Expo projects.
+ */
+declare const withVectorImage: VectorImagePlugin;
+export default withVectorImage;

package/plugin/build/withVectorImage.js

@@ -0,0 +1,149 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withGenerateAndroidAssets = exports.withGenerateIosAssets = exports.getCommands = exports.setPBXShellScriptBuildPhaseStripSvg = exports.addStripSvgsImplementation = exports.GenerateCommands = void 0;
+const config_plugins_1 = require("expo/config-plugins");
+const node_path_1 = __importDefault(require("node:path"));
+var GenerateCommands;
+(function (GenerateCommands) {
+    GenerateCommands["EntryFile"] = "--entry-file";
+    GenerateCommands["Config"] = "--config";
+    GenerateCommands["ResetCache"] = "--reset-cache";
+    GenerateCommands["BundleWithExpo"] = "--bundle-with-expo";
+})(GenerateCommands || (exports.GenerateCommands = GenerateCommands = {}));
+const DefaultCommands = [
+    {
+        command: GenerateCommands.EntryFile,
+        input: 'index.ts',
+    },
+    {
+        command: GenerateCommands.BundleWithExpo,
+        input: 'true',
+    },
+];
+const addStripSvgsImplementation = (projectBuildGradle) => {
+    const addString = `apply from: new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim(), "../../react-native-vector-image/strip_svgs.gradle")`;
+    const searchString = /"..\/react.gradle"\)\n/gm;
+    if (projectBuildGradle.includes(addString)) {
+        return projectBuildGradle;
+    }
+    return projectBuildGradle.replace(searchString, `"../react.gradle")\n${addString}`);
+};
+exports.addStripSvgsImplementation = addStripSvgsImplementation;
+const withStripSvgsAndroid = (config) => {
+    return (0, config_plugins_1.withAppBuildGradle)(config, ({ modResults, ...config }) => {
+        modResults.contents = (0, exports.addStripSvgsImplementation)(modResults.contents);
+        return { modResults, ...config };
+    });
+};
+const addSlashes = (str) => {
+    return str.replace(/[\\"]/g, '\\$&').replace(/\u0000/g, '\\0');
+};
+const setPBXShellScriptBuildPhaseStripSvg = async (config) => {
+    const xcodeProject = config.modResults;
+    const pbxShellScriptBuildPhases = xcodeProject.hash.project.objects.PBXShellScriptBuildPhase;
+    for (const buildPhase of Object.values(pbxShellScriptBuildPhases)) {
+        if (buildPhase?.name === '"Bundle React Native code and images"' &&
+            !buildPhase?.shellScript.includes('"react-native-vector-image"')) {
+            buildPhase.shellScript =
+                buildPhase.shellScript.substring(0, buildPhase.shellScript.length - 1) +
+                    addSlashes(`\n\`"$NODE_BINARY" --print "require('path').dirname(require.resolve('react-native-vector-image/package.json')) + '/strip_svgs.sh'"\``) +
+                    '"';
+        }
+    }
+    return config;
+};
+exports.setPBXShellScriptBuildPhaseStripSvg = setPBXShellScriptBuildPhaseStripSvg;
+const withStripSvgsIos = (c) => {
+    return (0, config_plugins_1.withXcodeProject)(c, async (config) => {
+        config = await (0, exports.setPBXShellScriptBuildPhaseStripSvg)(config);
+        return config;
+    });
+};
+const getCliPath = () => {
+    return node_path_1.default.join(node_path_1.default.dirname(node_path_1.default.dirname(__dirname)), 'src/cli/index');
+};
+const getCommands = (commands = DefaultCommands) => {
+    const commandsMap = new Map();
+    commands.forEach((c) => commandsMap.set(c.command, c.input));
+    DefaultCommands.forEach((c) => {
+        const exists = commandsMap.has(c.command);
+        if (!exists) {
+            commandsMap.set(c.command, c.input);
+        }
+    });
+    return Array.from(commandsMap)
+        .map((arr) => `${arr[0]} ${arr[1]}`)
+        .join(' ');
+};
+exports.getCommands = getCommands;
+const runCli = (cliCommand) => {
+    const cliPath = getCliPath();
+    const cli = require(cliPath);
+    if (!cli) {
+        throw new Error('Could not find react-native-vector-image cli');
+    }
+    cli(cliCommand);
+};
+const withGenerateIosAssets = (config, commands) => {
+    return (0, config_plugins_1.withDangerousMod)(config, [
+        'ios',
+        (config) => {
+            const appName = config.modRequest.projectName;
+            runCli(`generate --no-android-output --ios-output ios/${appName}/Images.xcassets ${commands}`);
+            return config;
+        },
+    ]);
+};
+exports.withGenerateIosAssets = withGenerateIosAssets;
+const withGenerateAndroidAssets = (config, commands) => {
+    return (0, config_plugins_1.withDangerousMod)(config, [
+        'android',
+        (config) => {
+            runCli(`generate --no-ios-output ${commands}`);
+            return config;
+        },
+    ]);
+};
+exports.withGenerateAndroidAssets = withGenerateAndroidAssets;
+/**
+ * Apply VectorImage configuration for Expo projects.
+ */
+const withVectorImage = (config, props = {}) => {
+    const commands = [];
+    if (props?.customEntryFile) {
+        commands.push({
+            command: GenerateCommands.EntryFile,
+            input: props?.customEntryFile,
+        });
+    }
+    if (props?.customMetroConfigFile) {
+        commands.push({
+            command: GenerateCommands.Config,
+            input: props?.customMetroConfigFile,
+        });
+    }
+    if (props?.resetCache) {
+        commands.push({
+            command: GenerateCommands.ResetCache,
+            input: `${props?.resetCache}`,
+        });
+    }
+    if (props?.bundleWithExpo) {
+        commands.push({
+            command: GenerateCommands.BundleWithExpo,
+            input: `${props?.bundleWithExpo}`,
+        });
+    }
+    const commandsWithDefault = (0, exports.getCommands)(commands);
+    if (props?.stripSvgs) {
+        config = withStripSvgsIos(config);
+        config = withStripSvgsAndroid(config);
+    }
+    config = (0, exports.withGenerateIosAssets)(config, commandsWithDefault);
+    config = (0, exports.withGenerateAndroidAssets)(config, commandsWithDefault);
+    return config;
+};
+exports.default = withVectorImage;

package/src/cli/generateAssets.js

@@ -26,13 +26,17 @@ async function removeGeneratedAssets(directory) {
 async function generateAssets({
   iosOutput,
   androidOutput,
+  bundleWithExpo,
   config,
   entryFile,
   resetCache,
   currentColor,
   currentColorDark,
 }) {
-  const assets = await getAssets({ config, entryFile, resetCache });
+  const assets = await getAssets(
+    { config, entryFile, resetCache },
+    bundleWithExpo
+  );
 
   if (iosOutput) {
     await removeGeneratedAssets(iosOutput);

package/src/cli/getAssets.js

@@ -8,17 +8,15 @@ const getBabelTransformerPath = () => {
     // for RN 73+
     return require.resolve('@react-native/metro-babel-transformer');
   } catch (e) {
-    try {
-      // for Expo
-      return require.resolve('@expo/metro-config/babel-transformer');
-    } catch (e) {
-      // to ensure backwards compatibility with old RN versions (RN < 73)
-      return require.resolve('metro-react-native-babel-transformer');
-    }
+    // to ensure backwards compatibility with old RN versions (RN < 73)
+    return require.resolve('metro-react-native-babel-transformer');
   }
 };
 
-async function getAssets(options) {
+async function createMetroServerAndBundleRequest(
+  options,
+  bundleWithExpo = false
+) {
   const args = {
     entryFile: options.entryFile,
     dev: false,
@@ -26,6 +24,21 @@ async function getAssets(options) {
     platform: 'ios',
   };
 
+  if (bundleWithExpo) {
+    let createMetroServerAndBundleRequestAsync = null;
+    try {
+      createMetroServerAndBundleRequestAsync = require('expo/node_modules/@expo/cli/build/src/export/embed/exportEmbedAsync')
+        .createMetroServerAndBundleRequestAsync;
+    } catch {
+      createMetroServerAndBundleRequestAsync = require('@expo/cli/build/src/export/embed/exportEmbedAsync')
+        .createMetroServerAndBundleRequestAsync;
+    }
+    return await createMetroServerAndBundleRequestAsync(process.cwd(), {
+      ...args,
+      ...options,
+    });
+  }
+
   const config = await loadConfig(
     {
       cwd: process.cwd(),
@@ -46,7 +59,7 @@ async function getAssets(options) {
 
   process.env.NODE_ENV = 'production';
 
-  const requestOpts = {
+  const bundleRequest = {
     entryFile: args.entryFile,
     dev: args.dev,
     minify: false,
@@ -55,12 +68,21 @@ async function getAssets(options) {
   };
   const server = new Server(config);
 
+  return { server, bundleRequest };
+}
+
+async function getAssets(options, bundleWithExpo) {
+  const { server, bundleRequest } = await createMetroServerAndBundleRequest(
+    options,
+    bundleWithExpo
+  );
+
   try {
-    await output.build(server, requestOpts);
+    await output.build(server, bundleRequest);
 
     return await server.getAssets({
       ...Server.DEFAULT_BUNDLE_OPTIONS,
-      ...requestOpts,
+      ...bundleRequest,
       bundleType: 'todo',
     });
   } finally {

package/src/cli/index.js

@@ -27,6 +27,13 @@ function main(argv) {
           demandOption: true,
           type: 'string',
         },
+        'bundle-with-expo': {
+          description:
+            'Whether to bundle the app with Expo presets or using metro directly',
+          default: false,
+          demandOption: true,
+          type: 'boolean',
+        },
         config: {
           description: 'Path to the metro config file',
           type: 'string',
@@ -50,7 +57,8 @@ function main(argv) {
           type: 'string',
         },
         'current-color-dark': {
-          description: 'Replace any `current` color references in `.dark.svg` SVGs.',
+          description:
+            'Replace any `current` color references in `.dark.svg` SVGs.',
           default: '#ffffff',
           type: 'string',
         },

package/src/index.web.js

@@ -0,0 +1 @@
+export { Image as default } from 'react-native';