add chunks tracking

Author: theKashey

__tests__/utils.spec.ts

@@ -2,31 +2,32 @@ import {remapImports} from "../src/scanners/scanForImports";
 import {dirname} from "path";
 
 describe('scanForImports', () => {
-  const rel = '.'+dirname(__dirname);
+  const rel = '.' + dirname(__dirname);
+  const root = '.';
 
   it('should map simple import', () => {
     const imports = {};
     remapImports(
       [{file: 'a', content: 'blabla;import("./a.js"); blabla;'}],
-      '.', '.',
+      root, root,
       (a, b) => a + b,
       imports
     );
     expect(Object.values(imports)).toEqual([
-      `() => import('${rel}/a.js')`
+      `() => [import('${rel}/a.js'), '', '${rel}/a.js']`
     ]);
   });
 
   it('should map simple import with a comment', () => {
     const imports = {};
     remapImports(
       [{file: 'a', content: 'blabla;import(/* comment:42 */"./a.js"); blabla;'}],
-      '.', '.',
+      root, root,
       (a, b) => a + b,
       imports
     );
     expect(Object.values(imports)).toEqual([
-      `() => import(/* comment:42 */'${rel}/a.js')`
+      `() => [import(/* comment:42 */'${rel}/a.js'), '', '${rel}/a.js']`
     ]);
   });
 
@@ -37,15 +38,32 @@ describe('scanForImports', () => {
         file: 'a',
         content: 'blabla;import(/* webpack: "123" */"./a.js"); blabla; import(/* webpack: 123 */ \'./b.js\');'
       }],
-      '.', '.',
+      root, root,
       (a, b) => a + b,
       imports
     );
     expect(Object.values(imports)).toEqual([
-      `() => import(/* webpack: \"123\" */'${rel}/a.js')`,
-      `() => import(/* webpack: 123 */'${rel}/b.js')`,
+      `() => [import(/* webpack: \"123\" */'${rel}/a.js'), '', '${rel}/a.js']`,
+      `() => [import(/* webpack: 123 */'${rel}/b.js'), '', '${rel}/b.js']`,
     ]);
-  })
+  });
+
+  it('should match chunk name', () => {
+    const imports = {};
+    remapImports(
+      [{
+        file: 'a',
+        content: 'blabla;import(/* webpackChunkName: "chunk-a" */"./a.js"); blabla; import(/* webpack: 123 */ \'./b.js\');'
+      }],
+      root, root,
+      (a, b) => a + b,
+      imports
+    );
+    expect(Object.values(imports)).toEqual([
+      `() => [import(/* webpackChunkName: "chunk-a" */'${rel}/a.js'), 'chunk-a', '${rel}/a.js']`,
+      `() => [import(/* webpack: 123 */'${rel}/b.js'), '', '${rel}/b.js']`,
+    ]);
+  });
 
   it('should remove webpackPrefetch and webpackPreload', () => {
     const imports = {};
@@ -54,13 +72,13 @@ describe('scanForImports', () => {
         file: 'a',
         content: 'blabla;import(/* webpackPrefetch: true *//* webpack: "123" */"./a.js"); blabla; import(/* webpackPreload: true */ \'./b.js\');'
       }],
-      '.', '.',
+      root, root,
       (a, b) => a + b,
       imports
     );
     expect(Object.values(imports)).toEqual([
-      `() => import(/*  *//* webpack: \"123\" */'${rel}/a.js')`,
-      `() => import(/*  */'${rel}/b.js')`,
+      `() => [import(/*  *//* webpack: \"123\" */'${rel}/a.js'), '', '${rel}/a.js']`,
+      `() => [import(/*  */'${rel}/b.js'), '', '${rel}/b.js']`,
     ]);
   });
 });

src/index.ts

@@ -12,7 +12,7 @@ import LazyBoundary from './LazyBoundary'
 import {setConfiguration} from './config';
 import {remapImports} from './helpers';
 
-import {useImported, useLoadable, useLazy} from './useImported'
+import {useImported, useLoadable, useLazy} from './useImported';
 
 export {
   printDrainHydrateMarks,

src/loadable.ts

@@ -1,6 +1,6 @@
 import {assingLoadableMark} from './marks';
 import {isBackend} from './detectBackend';
-import {DefaultImport, Loadable, Promised} from './types';
+import {DefaultImport, Loadable, Mark, MarkMeta, Promised} from './types';
 
 type AnyFunction = (x: any) => any;
 
@@ -18,7 +18,7 @@ const addPending = (promise: Promise<any>) => pending.push(promise);
 const removeFromPending = (promise: Promise<any>) => pending = pending.filter(a => a !== promise);
 const trimImport = (str: string) => str.replace(/['"]/g, '');
 
-export const importMatch = (functionString: string) => {
+export const importMatch = (functionString: string): Mark => {
   const markMatches = functionString.match(/`imported_(.*?)_component`/g) || [];
   return markMatches
     .map(match => match && trimImport((match.match(/`imported_(.*?)_component`/i) || [])[1]));
@@ -174,9 +174,21 @@ export const dryRender = (renderFunction: () => void) => {
     .then(done);
 };
 
-export const assignImportedComponents = (set: Array<Promised<any>>) => {
+export const markMeta: MarkMeta[] = [];
+
+const assignMetaData = (mark: Mark, chunkName: string, fileName: string) => {
+  markMeta.push({mark, chunkName, fileName});
+};
+
+type ImportedDefinition = [Promised<any>, string, string]
+
+export const assignImportedComponents = (set: Array<ImportedDefinition>) => {
   const countBefore = LOADABLE_SIGNATURE.size;
-  set.forEach(imported => toLoadable(imported));
+  set.forEach(imported => {
+    const loadable = toLoadable(imported[0]);
+    assignMetaData(loadable.mark, imported[1], imported[2]);
+  });
+
   if (countBefore === LOADABLE_SIGNATURE.size) {
     console.error('react-imported-component: no import-marks found, please check babel plugin')
   }

src/markerMapper.ts

@@ -0,0 +1,15 @@
+import {Mark, MarkMeta} from "./types";
+import {markMeta} from "./loadable";
+import {markerOverlap} from "./marks";
+
+const getMarkedMeta = (marks: Mark, mapping: (meta: MarkMeta) => string) => (
+  (new Set(
+    markMeta
+      .filter(meta => markerOverlap(meta.mark, marks))
+      .map(mapping)
+      .filter(Boolean)
+  )).values()
+);
+
+export const getMarkedChunks = (marks: Mark) => getMarkedMeta(marks, meta => meta.chunkName);
+export const getMarkedFileNames = (marks: Mark) => getMarkedMeta(marks, meta => meta.fileName);

src/marks.ts

@@ -52,7 +52,7 @@ export const drainHydrateMarks = (stream: Stream = defaultStream) => {
 };
 
 
-const allIn = (a1: string[], a2: string[]) => a1.filter(mark => a2.indexOf(mark) >= 0).length === a1.length;
+export const markerOverlap = (a1: string[], a2: string[]) => a1.filter(mark => a2.indexOf(mark) >= 0).length === a1.length;
 
 export const rehydrateMarks = (marks?: string[]) => {
   const rehydratedMarks: string[] = marks || (global as any).___REACT_DEFERRED_COMPONENT_MARKS || [];
@@ -62,7 +62,7 @@ export const rehydrateMarks = (marks?: string[]) => {
 
   LOADABLE_MARKS
     .forEach(({mark, loadable}) => {
-      if (allIn(mark, rehydratedMarks)) {
+      if (markerOverlap(mark, rehydratedMarks)) {
         mark.forEach(m => usedMarks.add(m));
         tasks.push(loadable.load())
       }
@@ -82,7 +82,7 @@ export const waitForMarks = (marks: string[]) => {
 
   LOADABLE_MARKS
     .forEach(({mark, loadable}) => {
-      if (allIn(mark, marks)) {
+      if (markerOverlap(mark, marks)) {
         tasks.push(loadable.resolution)
       }
     });

src/scanners/scanForImports.ts

@@ -14,7 +14,9 @@ const trimImport = (str: string) => str.replace(/['"]/g, '');
 const getImports = getMatchString(`(['"]?[\\w-/.]+['"]?)\\)`, 1);
 const getComment = getMatchString(/\/\*.*\*\// as any, 0);
 
-const clearComment = (str:string) => (
+const getChunkName = getMatchString('webpackChunkName: "([^"]*)"', 1);
+
+const clearComment = (str: string) => (
   str
     .replace("webpackPrefetch: true", '')
     .replace("webpackPreload: true", '')
@@ -64,12 +66,24 @@ const rejectSystemFiles = (file: string, stats: Stats) => (
   stats.isDirectory() && file.match(/node_modules/) || file.match(/(\/\.\w+)/)
 );
 
-export const remapImports = (data: FileContent[], root: string, targetDir: string, getRelative: (a: string, b: string) => string, imports: Record<string, string>) => (
+export const remapImports = (
+  data: FileContent[],
+  root: string,
+  targetDir: string,
+  getRelative: (a: string, b: string) => string,
+  imports: Record<string, string>,
+) => (
   data
     .map(({file, content}) => mapImports(file, getDynamicImports(content)))
-    .forEach(importBlock => importBlock.forEach(({name, comment, doNotTransform}) => {
-      imports[getRelative(root, name)] = `() => import(${comment}'${doNotTransform ? name : getRelative(targetDir, name)}')`
-    }))
+    .forEach(importBlock => (
+      importBlock
+        .forEach(({name, comment, doNotTransform}) => {
+          const rootName = doNotTransform ? name : getRelative(root, name);
+          const fileName = doNotTransform ? name : getRelative(targetDir, name);
+
+          imports[getRelative(root, name)] = `() => [import(${comment}'${fileName}'), '${getChunkName(comment)}', '${rootName}']`
+        })
+    ))
 );
 
 function scanTop(root: string, start: string, target: string) {

src/server.ts

@@ -3,6 +3,7 @@ import {ImportedStream} from './context';
 import {setConfiguration} from './config';
 import {createLoadableTransformer} from './transformers/loadableTransformer';
 import {getLoadableTrackerCallback} from './trackers/globalTracker';
+import {getMarkedChunks, getMarkedFileNames} from './markerMapper';
 
 export {
   printDrainHydrateMarks,
@@ -14,4 +15,7 @@ export {
   createLoadableStream,
   createLoadableTransformer,
   getLoadableTrackerCallback,
+
+  getMarkedChunks,
+  getMarkedFileNames,
 }

src/types.ts

@@ -23,6 +23,11 @@ export type DefaultComponentImport<T> = () => Promise<DefaultComponent<T>>
 export type Defaultable<P> = P | Default<P>;
 export type DefaultImport<T> = () => Promise<Defaultable<T>>
 
+export interface MarkMeta {
+  mark: Mark;
+  chunkName: string;
+  fileName: string;
+}
 
 export type LazyImport<T> = () => Promise<DefaultImportedComponent<T>>