feat: allow import control via configuration file

.size.json

@@ -1,17 +1,17 @@
 [
   {
-    "name": "dist/es2015/index.js, dist/es2015/boot.js",
+    "name": "dist/es2015/entrypoints/index.js, dist/es2015/entrypoints/boot.js",
     "passed": true,
-    "size": 3480
+    "size": 3434
   },
   {
-    "name": "dist/es2015/index.js",
+    "name": "dist/es2015/entrypoints/index.js",
     "passed": true,
-    "size": 3157
+    "size": 3156
   },
   {
-    "name": "dist/es2015/boot.js",
+    "name": "dist/es2015/entrypoints/boot.js",
     "passed": true,
-    "size": 1802
+    "size": 1763
   }
 ]

__tests__/__fixtures__/babel/boot/actual.js

@@ -0,0 +1,13 @@
+/* eslint-disable */
+/* tslint:disable */
+
+// generated by react-imported-component, DO NOT EDIT
+import {assignImportedComponents} from 'react-imported-component/macro';
+
+const PreloadComponent = imported(() => import('./PreloadThis'));
+const PrefetchChunkComponent = imported(() => import('./ChunkThis'));
+
+const applicationImports = assignImportedComponents([
+  [() => import('./should-not-be-transformed'), '', './some-file', false],
+]);
+

__tests__/__fixtures__/babel/boot/expected.js

@@ -0,0 +1,13 @@
+var importedWrapper = require('react-imported-component/wrapper');
+
+import { assignImportedComponents } from "react-imported-component/boot";
+
+/* eslint-disable */
+
+/* tslint:disable */
+// generated by react-imported-component, DO NOT EDIT
+const PreloadComponent = imported(() => importedWrapper("imported_-hbct7n_component", import('./PreloadThis')));
+const PrefetchChunkComponent = imported(() => importedWrapper("imported_fspdct_component", import(
+/* webpackChunkName: "chunked-this" */
+'./ChunkThis')));
+const applicationImports = assignImportedComponents([[() => importedWrapper("imported_12i8gg9_component", import('./should-not-be-transformed')), '', './some-file', false]]);

__tests__/__fixtures__/babel/webpack/actual.js

@@ -1,7 +1,8 @@
-import {assignImportedComponents} from 'react-imported-component/macro';
 import {lazy, useImported} from 'react-imported-component/macro';
 import imported from 'react-imported-component';
 
+const PreloadComponent = imported(() => import('./PreloadThis'));
+const PrefetchChunkComponent = imported(() => import('./ChunkThis'));
 const AsyncComponent0 = imported(() => import(/* webpackChunkName:namedChunk */'./MyComponent'));
 
 const AsyncComponent1 = imported(() => import('./MyComponent'));

__tests__/__fixtures__/babel/webpack/expected.js

@@ -1,8 +1,15 @@
 var importedWrapper = require('react-imported-component/wrapper');
 
 import { lazy, useImported } from "react-imported-component";
-import { assignImportedComponents } from "react-imported-component/boot";
 import imported from 'react-imported-component';
+const PreloadComponent = imported(() => importedWrapper("imported_-hbct7n_component", import(
+/* webpackPreload: true */
+'./PreloadThis')));
+const PrefetchChunkComponent = imported(() => importedWrapper("imported_fspdct_component", import(
+/* webpackChunkName: "chunked-this" */
+
+/* webpackPrefetch: true */
+'./ChunkThis')));
 const AsyncComponent0 = imported(() => importedWrapper("imported_18g2v0c_component", import(
 /* webpackChunkName:namedChunk */
 './MyComponent')));

__tests__/babel.spec.ts

@@ -1,22 +1,37 @@
 import { transform } from '@babel/core';
 import { readFileSync } from 'fs';
 import { join } from 'path';
+import { ImportedConfiguration } from '../src/configuration/configuration';
 
 const FIXTURE_PATH = join(__dirname, '__fixtures__/babel');
 
+const configuration: ImportedConfiguration = {
+  shouldPreload: filename => filename.indexOf('PreloadThis') >= 0,
+  shouldPrefetch: filename => filename.indexOf('ChunkThis') >= 0,
+  chunkName: filename => (filename.indexOf('ChunkThis') >= 0 ? 'chunked-this' : undefined),
+};
+
 const testPlugin = {
-  /*node: (code: string) => {
+  node: (code: string) => {
     const result = transform(code, {
       presets: ['@babel/preset-react'],
-      plugins: [require.resolve('../dist/es5/babel'), 'dynamic-import-node'],
+      plugins: [require.resolve('../dist/es5/entrypoints/babel'), 'dynamic-import-node'],
     });
 
     return result!.code;
-  },*/
+  },
   webpack: (code: string) => {
     const result = transform(code, {
       presets: ['@babel/preset-react'],
-      plugins: [require.resolve('../dist/es5/entrypoints/babel')],
+      plugins: [[require.resolve('../dist/es5/entrypoints/babel'), configuration]],
+    });
+
+    return result!.code;
+  },
+  boot: (code: string) => {
+    const result = transform(code, {
+      presets: ['@babel/preset-react'],
+      plugins: [[require.resolve('../dist/es5/entrypoints/babel'), configuration]],
     });
 
     return result!.code;

__tests__/macro.spec.ts

@@ -1,6 +1,6 @@
-const pluginTester = require("babel-plugin-tester");
-const plugin = require("babel-plugin-macros");
-const prettier = require("prettier");
+const pluginTester = require('babel-plugin-tester');
+const plugin = require('babel-plugin-macros');
+const prettier = require('prettier');
 
 describe('babel macro', () => {
   pluginTester({
@@ -11,24 +11,24 @@ describe('babel macro', () => {
       plugins: ['dynamic-import-node'],
     },
     formatResult(result: string) {
-      return prettier.format(result, {trailingComma: "es5"});
+      return prettier.format(result, { trailingComma: 'es5' });
     },
     tests: {
-      "nothing": "const a = 42;",
-      "no usage": `import {lazy} from "../macro";`,
-      "flat import": `import "../macro";
+      nothing: 'const a = 42;',
+      'no usage': `import {lazy} from "../macro";`,
+      'flat import': `import "../macro";
       import('./a.js')
       `,
-      "boot": `
+      boot: `
       import {assignImportedComponents, lazy} from "../macro";
       assignImportedComponents([() => import('./a')]);
       lazy(() => import('./a'));
       `,
-      "lazy": `
+      lazy: `
         import {lazy} from "../macro";
         const v = lazy(() => import('./a'));
         `,
-      "many": `
+      many: `
         import {imported, useImported} from "../macro";        
         const v = imported(() => import('./a'));
         const x = () => useImported(() => import('./b'));
@@ -46,14 +46,14 @@ describe('babel macro', () => {
       plugins: [require.resolve('../babel'), 'dynamic-import-node'],
     },
     formatResult(result: string) {
-      return prettier.format(result, {trailingComma: "es5"});
+      return prettier.format(result, { trailingComma: 'es5' });
     },
     tests: {
-      "plugin combination": `
+      'plugin combination': `
         import {imported, useImported} from "../macro";        
         const v = imported(() => import('./a'));
         const x = () => useImported(() => import('./b'));
         `,
     },
   });
-});
+});

__tests__/utils.spec.ts

@@ -91,6 +91,29 @@ describe('scanForImports', () => {
     ]);
   });
 
+  it('should override chunk name', () => {
+    const imports = {};
+    remapImports(
+      [
+        {
+          file: 'a',
+          content:
+            'blabla;import(/* webpackChunkName: "chunk-a" */"./a.js"); blabla; import(/* webpackChunkName: "chunk-b" */"./b.js"); import(/* webpackChunkName: "chunk-c" */"./c.js");',
+        },
+      ],
+      root,
+      root,
+      (a, b) => a + b,
+      imports,
+      imported => imported.indexOf('c.js') < 0,
+      (imported, _, givenChunkName) => (imported.indexOf('a.js') > 0 ? `test-${givenChunkName}-test` : 'bundle-b')
+    );
+    expect(Object.values(imports)).toEqual([
+      `[() => import(/* webpackChunkName: \"chunk-a\" */'${rel}/a.js'), 'test-chunk-a-test', '${rel}/a.js', false] /* from .a */`,
+      `[() => import(/* webpackChunkName: \"chunk-b\" */'${rel}/b.js'), 'bundle-b', '${rel}/b.js', false] /* from .a */`,
+    ]);
+  });
+
   it('should match support multiline imports', () => {
     const imports = {};
     remapImports(

src/configuration/configuration.ts

@@ -1,7 +1,7 @@
 /**
  * react-imported-component configuration
  * __TO BE USED AT `imported.js`__
- * @see {@link https://github.com/theKashey/react-imported-component#.imported.js}
+ * @see {@link https://github.com/theKashey/react-imported-component#-imported-js}
  */
 export interface ImportedConfiguration {
   /**
@@ -15,10 +15,11 @@ export interface ImportedConfiguration {
   testFile?: (fileName: string) => boolean;
   /**
    * tests if a given import should be visible to a `imported-component`
+   * This method is equivalent to `client-side` magic comment
    * @param {String} targetFileName - import target
    * @param {String} sourceFileName - source filename
-   * @param {Object} configuration - an import configuration
    * @returns {Boolean} false if import should be ignored by the `imported-components`
+   * @see {@link https://github.com/theKashey/react-imported-component/#server-side-auto-import}
    * @example
    * testImport(filename, source, config) {
    *   return !(
@@ -29,33 +30,22 @@ export interface ImportedConfiguration {
    *  )
    * }
    */
-  testImport?: (targetFileName: string, sourceFileName: string, configuration: object) => boolean;
-  /**
-   * tests if this import should(or could) be executed only on ClientSide
-   * @param targetFileName
-   * @param sourceFileName
-   * @returns {Boolean} true if only client side
-   * @example
-   * clientSideOnly(target) {
-   *   return target.indexOf('polyfill')>0
-   * }
-   */
-  clientSideOnly: (targetFileName: string, sourceFileName: string) => boolean;
+  testImport?: (targetFileName: string, sourceFileName: string) => boolean;
 
   /**
    * marks import with prefetch comment (if possible)
    * @param targetFile
    * @param sourceFile
    * @param sourceConfiguration
    */
-  shouldPrefetch: (targetFile: string, sourceFile: string, sourceConfiguration: object) => boolean;
+  shouldPrefetch?: (targetFile: string, sourceFile: string, sourceConfiguration: object) => boolean;
   /**
    * marks import with preload comment (if possible)
    * @param targetFile
    * @param sourceFile
    * @param sourceConfiguration
    */
-  shouldPreload: (targetFile: string, sourceFile: string, sourceConfiguration: object) => boolean;
+  shouldPreload?: (targetFile: string, sourceFile: string, sourceConfiguration: object) => boolean;
   /**
    * adds custom chunkname to a import (if possible)
    * @param targetFile
@@ -64,13 +54,13 @@ export interface ImportedConfiguration {
    * @returns
    *  {string} - a new chunk name
    *  {undefined} - keep as is
-   *  {null} - remove
+   *  {null} - keep as is (will remove in the future)
    */
-  chunkName: (targetFile: string, sourceFile: string, givenChunkName: string | undefined) => string | null | undefined;
+  chunkName?: (targetFile: string, sourceFile: string, givenChunkName: string | undefined) => string | null | undefined;
 }
 
 /**
  * react-imported-component configuration
  * @param config
  */
-export const configure = (config: ImportedConfiguration):ImportedConfiguration => config;
+export const configure = (config: ImportedConfiguration): ImportedConfiguration => config;

src/configuration/constants.ts

@@ -0,0 +1 @@
+export const CLIENT_SIDE_ONLY = 'client-side';