feat: add LooseModeWebpackPlugin and looseMode config plugin (#673)

Co-Authored-By: Michał Pierzchała <[email protected]>

Author: zamotany

docs/Configuration.md

@@ -106,6 +106,11 @@ The bundle configuration consist of the following properties:
 - `dependsOn?: string[]` (_optional_, **multi-bundle mode only**) - Specify on which DLLs the bundle depends on, which will be automatically linked when building the bundle.
 - `providesModuleNodeModules?: Array<string | { name: string; directory: string }>` - Provide custom modules for Haste.
 - `hasteOptions?: any` - Provide Haste options.
+- `looseMode?: true | Array<string | RegExp> | ((filename: string) => boolean)` - Removes `'use strict';` from:
+  - the whole bundle if `true`
+  - modules matched by absolute filename if array of string is passed (can be mixed with regexes)
+  - modules matched by the the regexes if array of regexes is passed (can be mixed with strings)
+  - modules for which function `(filename: string) => boolean` returns `true`
 - `transform?: WebpackConfigTransform` - Customize the Webpack config after it's been created.
   
   The `transform` function will receive an object with `bundleName`, `env`, `runtime` and Webpack's `config`:

docs/Recipes.md

@@ -215,6 +215,40 @@ Set the environment variable `APP_ENV` to `detox_tests` when running Haul:
 APP_ENV=detox_tests yarn haul
 ```
 
+## Using with Lottie or loose-mode-only-compatible libraries
+
+Some React Native libraries might not work with Haul out of the box. If the library if throw error, it is possible that it's not compatible with strict mode checks.
+
+By default all modules with Haul have `'use strict';` annotation, which makes the code evaluated in strict mode, whereas the default React Native bundler - Metro - generates the code without this annotation. For that reason, some libraries eg `Lottie` need special steps to work.
+
+To enable loose mode, you need to add `looseMode` property to your config set to:
+
+- `true` - removes all `'use strict';` from the whole bundle
+- array for absolute filenames of modules - matched modules will have `'use strict';` removed
+- array of regexes - matched modules will have `'use strict';` removed
+- function that accepts absolute module filename and must return `true` to remove `'use strict';` or `false`
+
+You can mix string and regexes in array.
+
+For example:
+
+```js
+// haul.config.js
+import { makeConfig, withPolyfills } from "@haul-bundler/preset-0.59";
+
+export default makeConfig({
+  bundles: {
+    index: {
+      entry: withPolyfills('./index.ts'),
+      looseMode: [
+        require.resolve('./MyModule.js'),
+        /node_modules\/react-native-lottie/,
+      ],
+    },
+  },
+});
+```
+
 ## Debugging with React Native Tools (`vscode-react-native`)
 
 In order to use React Native Tools extension you must first install the extension:

packages/haul-core/package.json

@@ -52,6 +52,7 @@
     "terser": "^4.1.3",
     "utility-types": "^3.7.0",
     "webpack": "^4.39.1",
+    "webpack-sources": "^1.4.1",
     "wrap-ansi": "^6.0.0",
     "ws": "^6.2.1"
   },

packages/haul-core/src/config/types.ts

@@ -40,6 +40,7 @@ export type BundleConfig = Assign<
       Exclude<keyof MinifyOptions, 'sourceMap'>
     >;
     sourceMap?: boolean | 'inline';
+    looseMode?: true | Array<string | RegExp> | ((filename: string) => boolean);
     dll?: boolean;
     app?: boolean;
     dependsOn?: string[];
@@ -82,6 +83,7 @@ export type NormalizedBundleConfig = Assign<
           DeepNonNullable<ExternalBundleConfig>,
           { manifestPath: ExternalBundleConfig['manifestPath'] }
         >;
+    looseMode: (filename: string) => boolean;
   }
 >;
 

packages/haul-core/src/preset/__tests__/__snapshots__/makeConfigFactory.test.ts.snap

@@ -16,6 +16,7 @@ Object {
       ],
       "external": false,
       "hasteOptions": Object {},
+      "looseMode": [Function],
       "minify": false,
       "minifyOptions": undefined,
       "name": "app",
@@ -38,6 +39,7 @@ Object {
       ],
       "external": false,
       "hasteOptions": Object {},
+      "looseMode": [Function],
       "minify": false,
       "minifyOptions": undefined,
       "name": "base_dll",
@@ -62,6 +64,7 @@ Object {
       ],
       "external": false,
       "hasteOptions": Object {},
+      "looseMode": [Function],
       "minify": false,
       "minifyOptions": undefined,
       "name": "index",
@@ -151,6 +154,9 @@ Object {
           "singleBundleMode": false,
           "sourceMap": true,
         },
+        LooseModeWebpackPlugin {
+          "checkLooseMode": [Function],
+        },
         DllReferencePlugin {
           "options": Object {
             "context": "<<REPLACED>>/packages/haul-core/src/preset/__tests__",
@@ -220,6 +226,9 @@ Object {
           "singleBundleMode": false,
           "sourceMap": true,
         },
+        LooseModeWebpackPlugin {
+          "checkLooseMode": [Function],
+        },
         DllPlugin {
           "options": Object {
             "name": "base_dll",
@@ -282,6 +291,9 @@ Object {
           ],
           "sourceMap": true,
         },
+        LooseModeWebpackPlugin {
+          "checkLooseMode": [Function],
+        },
         DllReferencePlugin {
           "options": Object {
             "context": "<<REPLACED>>/packages/haul-core/src/preset/__tests__",
@@ -312,6 +324,7 @@ Object {
       ],
       "external": false,
       "hasteOptions": Object {},
+      "looseMode": [Function],
       "minify": false,
       "minifyOptions": undefined,
       "name": "app",
@@ -334,6 +347,7 @@ Object {
       ],
       "external": false,
       "hasteOptions": Object {},
+      "looseMode": [Function],
       "minify": false,
       "minifyOptions": undefined,
       "name": "base_dll",
@@ -358,6 +372,7 @@ Object {
       ],
       "external": false,
       "hasteOptions": Object {},
+      "looseMode": [Function],
       "minify": false,
       "minifyOptions": undefined,
       "name": "index",
@@ -441,6 +456,9 @@ Object {
           ],
           "sourceMap": true,
         },
+        LooseModeWebpackPlugin {
+          "checkLooseMode": [Function],
+        },
         DllReferencePlugin {
           "options": Object {
             "context": "<<REPLACED>>/packages/haul-core/src/preset/__tests__",
@@ -504,6 +522,9 @@ Object {
           "preloadBundles": Array [],
           "sourceMap": true,
         },
+        LooseModeWebpackPlugin {
+          "checkLooseMode": [Function],
+        },
         DllPlugin {
           "options": Object {
             "name": "base_dll",
@@ -566,6 +587,9 @@ Object {
           ],
           "sourceMap": true,
         },
+        LooseModeWebpackPlugin {
+          "checkLooseMode": [Function],
+        },
         DllReferencePlugin {
           "options": Object {
             "context": "<<REPLACED>>/packages/haul-core/src/preset/__tests__",
@@ -594,6 +618,7 @@ Object {
       ],
       "external": false,
       "hasteOptions": Object {},
+      "looseMode": [Function],
       "minify": false,
       "minifyOptions": undefined,
       "name": "index",
@@ -673,6 +698,9 @@ Object {
           "preloadBundles": Array [],
           "sourceMap": true,
         },
+        LooseModeWebpackPlugin {
+          "checkLooseMode": [Function],
+        },
       ],
       "target": "webworker",
     },

packages/haul-core/src/preset/__tests__/makeConfigFactory.test.ts

@@ -4,6 +4,7 @@ import makeConfigFactory from '../makeConfigFactory';
 import { Runtime, ProjectConfig, EnvOptions } from '../../';
 // @ts-ignore
 import { replacePathsInObject } from 'jest/helpers'; // eslint-disable-line
+import LooseModeWebpackPlugin from '../../webpack/plugins/LooseModeWebpackPlugin';
 
 const makeConfig = makeConfigFactory(
   (_runtime, env, bundleName, projectConfig) => ({
@@ -354,4 +355,63 @@ describe('makeConfig', () => {
       expect(replacePathsInObject(config)).toMatchSnapshot();
     });
   });
+
+  describe('with looseMode', () => {
+    const baseEnv: EnvOptions = {
+      platform: 'ios',
+      root: __dirname,
+      dev: false,
+      bundleMode: 'single-bundle',
+      bundleTarget: 'file',
+    };
+
+    it('should build all modules in loose mode', () => {
+      const projectConfig: ProjectConfig = {
+        bundles: {
+          index: {
+            entry: './index.js',
+            looseMode: true,
+          },
+        },
+      };
+      const env: EnvOptions = {
+        ...baseEnv,
+        bundleTarget: 'server',
+      };
+      const config = makeConfig(projectConfig)(runtime, env);
+      const looseModePlugin = config.webpackConfigs.index.plugins.find(
+        plugin => {
+          return plugin.constructor.name === 'LooseModeWebpackPlugin';
+        }
+      ) as LooseModeWebpackPlugin;
+      expect(looseModePlugin.checkLooseMode('')).toBe(true);
+    });
+
+    it('should build some modules in loose mode', () => {
+      const moduleFilename = path.join(__dirname, 'someModule.js');
+
+      const projectConfig: ProjectConfig = {
+        bundles: {
+          index: {
+            entry: './index.js',
+            looseMode: [moduleFilename, /haul/],
+          },
+        },
+      };
+      const env: EnvOptions = {
+        ...baseEnv,
+        bundleTarget: 'server',
+      };
+      const config = makeConfig(projectConfig)(runtime, env);
+      const looseModePlugin = config.webpackConfigs.index.plugins.find(
+        plugin => {
+          return plugin.constructor.name === 'LooseModeWebpackPlugin';
+        }
+      ) as LooseModeWebpackPlugin;
+      expect(looseModePlugin.checkLooseMode('')).toBe(false);
+      expect(looseModePlugin.checkLooseMode(moduleFilename)).toBe(true);
+      expect(looseModePlugin.checkLooseMode(__filename)).toBe(true);
+      expect(looseModePlugin.checkLooseMode('path')).toBe(false);
+    });
+  });
 });

packages/haul-core/src/preset/makeConfigFactory.ts

@@ -21,6 +21,7 @@ import {
 import applySingleBundleTweaks from './utils/applySingleBundleTweaks';
 import applyMultiBundleTweaks from './utils/applyMultiBundleTweaks';
 import getBundlePlugin from './utils/getBundlePlugin';
+import LooseModeWebpackPlugin from '../webpack/plugins/LooseModeWebpackPlugin';
 
 type GetDefaultConfig = (
   runtime: Runtime,
@@ -73,6 +74,30 @@ export default function makeConfigFactory(getDefaultConfig: GetDefaultConfig) {
             ? bundleConfigBuilder(env, runtime)
             : bundleConfigBuilder;
 
+        let looseMode: NormalizedBundleConfig['looseMode'] = () => false;
+        if (bundleConfig.looseMode === true) {
+          looseMode = () => true;
+        } else if (Array.isArray(bundleConfig.looseMode)) {
+          looseMode = (filename: string) => {
+            return (bundleConfig.looseMode as Array<string | RegExp>).some(
+              element => {
+                if (typeof element === 'string') {
+                  if (!path.isAbsolute(element)) {
+                    throw new Error(
+                      `${element} in 'looseMode' property must be an absolute path or regex`
+                    );
+                  }
+                  return element === filename;
+                }
+
+                return element.test(filename);
+              }
+            );
+          };
+        } else if (typeof bundleConfig.looseMode === 'function') {
+          looseMode = bundleConfig.looseMode;
+        }
+
         // TODO: use minifyOptions to configure terser for basic bundle
         const dev = bundleConfig.dev || env.dev;
         const root = bundleConfig.root || env.root;
@@ -97,6 +122,7 @@ export default function makeConfigFactory(getDefaultConfig: GetDefaultConfig) {
             typeof bundleConfig.sourceMap !== 'undefined'
               ? bundleConfig.sourceMap
               : true,
+          looseMode,
           app: Boolean(bundleConfig.app),
           dll: Boolean(bundleConfig.dll),
           dependsOn: bundleConfig.dependsOn || [],
@@ -205,6 +231,10 @@ export default function makeConfigFactory(getDefaultConfig: GetDefaultConfig) {
           getBundlePlugin(env, normalizedBundleConfig)
         );
 
+        webpackConfig.plugins.push(
+          new LooseModeWebpackPlugin(normalizedBundleConfig.looseMode)
+        );
+
         if (env.bundleMode === 'single-bundle') {
           applySingleBundleTweaks(
             env,

packages/haul-core/src/webpack/plugins/LooseModeWebpackPlugin.ts

@@ -0,0 +1,35 @@
+import webpack from 'webpack';
+import sources from 'webpack-sources';
+
+export default class LooseModeWebpackPlugin {
+  constructor(public checkLooseMode: (filename: string) => boolean) {}
+
+  apply(compiler: webpack.Compiler) {
+    compiler.hooks.make.tap(
+      'LooseModeWebpackPlugin',
+      (compilation: webpack.compilation.Compilation) => {
+        compilation.moduleTemplates.javascript.hooks.render.tap(
+          'LooseModeWebpackPlugin',
+          (
+            moduleSource: sources.Source,
+            { resource }: { resource: string }
+          ) => {
+            const useLooseMode = this.checkLooseMode(resource);
+            if (!useLooseMode) {
+              return moduleSource;
+            }
+
+            const source = moduleSource.source();
+            const match = source.match(/['"]use strict['"]/);
+            if (!match || match.index === undefined) {
+              return moduleSource;
+            }
+            const replacement = new sources.ReplaceSource(moduleSource);
+            replacement.replace(match.index, match.index + match[0].length, '');
+            return replacement;
+          }
+        );
+      }
+    );
+  }
+}