fix: better cleaning for function signatures

theKashey · Jun 24, 2020 · ae37c4c · ae37c4c
1 parent dd7bcbf
commit ae37c4c
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 9 deletions.
diff --git a/.size-limit.js b/.size-limit.js
@@ -2,12 +2,12 @@ module.exports = [
   {
     path: ['dist/es2015/entrypoints/index.js', 'dist/es2015/entrypoints/boot.js'],
     ignore: ['tslib'],
-    limit: '3.4 KB',
+    limit: '3.6 KB',
   },
   {
     path: 'dist/es2015/entrypoints/index.js',
     ignore: ['tslib'],
-    limit: '3.2 KB',
+    limit: '3.3 KB',
   },
   {
     path: 'dist/es2015/entrypoints/boot.js',

diff --git a/.size.json b/.size.json
@@ -2,16 +2,16 @@
   {
     "name": "dist/es2015/entrypoints/index.js, dist/es2015/entrypoints/boot.js",
     "passed": true,
-    "size": 3461
+    "size": 3601
   },
   {
     "name": "dist/es2015/entrypoints/index.js",
     "passed": true,
-    "size": 3177
+    "size": 3311
   },
   {
     "name": "dist/es2015/entrypoints/boot.js",
     "passed": true,
-    "size": 1763
+    "size": 1775
   }
 ]
diff --git a/__tests__/signatures.spec.ts b/__tests__/signatures.spec.ts
@@ -88,11 +88,25 @@ describe('importMatch', () => {
 
   it('maps function signatures', () => {
     expect(getFunctionSignature(`import('file')`)).toEqual(getFunctionSignature(`import(/* */'file')`));
+
+    expect(getFunctionSignature(`import('file')`)).toEqual('import(`file`)');
   });
 
   it('maps function signatures after terser pass', () => {
     expect(getFunctionSignature('()=>$(`imported_-f5674t_component`,n.e(3).then(n.bind(null,`xxx`,7)))')).toEqual(
       getFunctionSignature('()=>$(`imported_-f5674t_component`,x.e(3).then(x.bind(null,`xxx`,7)))')
     );
+    expect(getFunctionSignature('()=>$(`imported_-f5674t_component`,n.e(3).then(n.bind(null,`xxx`,7)))')).toEqual(
+      '()=>$(`imported_-f5674t_component`,-we(3).-wbind(null,`xxx`,7)))'
+    );
+  });
+
+  it('maps function with different wrappers', () => {
+    expect(getFunctionSignature('()=>P("imported_-is59m_component",t.e(41).then(t.bind(null,"./Promo.jsx")))')).toEqual(
+      getFunctionSignature('()=>s("imported_-is59m_component",n.e(41).then(n.bind(null,"./Promo.jsx")))')
+    );
+    expect(getFunctionSignature('()=>P("imported_-is59m_component",t.e(41).then(t.bind(null,"./Promo.jsx")))')).toEqual(
+      '()=>$(`imported_-is59m_component`,-we(41).-wbind(null,`./Promo.jsx`)))'
+    );
   });
 });
diff --git a/src/loadable/loadable.ts b/src/loadable/loadable.ts
@@ -56,6 +56,10 @@ export function toLoadable<T>(firstImportFunction: Promised<T>, autoImport = tru
       importFunction = newImportFunction;
     },
 
+    get importer() {
+      return importFunction;
+    },
+
     then(cb, err) {
       if (this.promise) {
         return this.promise.then(cb, err);
@@ -247,6 +251,24 @@ export function getLoadable<T>(importFunction: DefaultImport<T> | Loadable<T>):
     return loadable as any;
   }
 
+  const ownMark = importMatch(functionSignature).join('|');
+  if (ownMark) {
+    LOADABLE_SIGNATURE.forEach(({ mark, importer }) => {
+      if (mark.join('|') === ownMark) {
+        // tslint:disable-next-line:no-console
+        console.warn(
+          'Another loadable found for an existing mark. That\'s possible, signatures must match (https://github.com/theKashey/react-imported-component/issues/192):',
+          {
+            mark,
+            knownImporter: importer,
+            currentSignature: String(importFunction),
+            knownSignature: String(importer),
+          }
+        );
+      }
+    });
+  }
+
   const loadable = toLoadable(importFunction as any);
   LOADABLE_WEAK_SIGNATURE.set(importFunction, loadable);
 

diff --git a/src/types.ts b/src/types.ts
@@ -46,6 +46,7 @@ export interface Loadable<T> {
   mark: Mark;
 
   resolution: Promise<void>;
+  importer: any;
 
   isLoading(): boolean;
 
@@ -106,7 +107,10 @@ export type ModuleFC<T> = (props: ImportModuleProps<T>) => ReactElement | null;
 
 export type HOCModuleType<T> = ModuleFC<T> & AdditionalHOC;
 
-export type HOC = <P, K = P>(loader: DefaultComponentImport<P>, options?: Partial<ComponentOptions<P, K>> & HOCOptions) => HOCType<P, K>;
+export type HOC = <P, K = P>(
+  loader: DefaultComponentImport<P>,
+  options?: Partial<ComponentOptions<P, K>> & HOCOptions
+) => HOCType<P, K>;
 
 export interface ImportedComponents {
   [index: number]: () => Promise<DefaultComponent<any>>;

diff --git a/src/utils/signatures.ts b/src/utils/signatures.ts
@@ -7,6 +7,11 @@ export const importMatch = (functionString: string): Mark => {
   return markMatches.map(match => match && trimImport((match.match(/`imported_(.*?)_component`/i) || [])[1]));
 };
 
+/**
+ * the intention of this function is to "clear some (minification) noise from the function
+ * basically from file to file different "short" names could be used
+ * @param fn
+ */
 export const getFunctionSignature = (fn: AnyFunction | string) =>
   String(fn)
     // quotes
@@ -16,9 +21,9 @@ export const getFunctionSignature = (fn: AnyFunction | string) =>
     .replace(/\/\*([^\*]*)\*\//gi, '')
 
     // webpack specific
-    .replace(/\w+.e\(/, 'we(')
-    .replace(/\w+.t.bind\(/, 'wbind(')
-    .replace(/\w+.bind\(/, 'wbind(')
+    .replace(/\w+.e\(/, '-we(')
+    .replace(/\w+.\w.bind\(/, '-wbind(')
+    .replace(/\w+.bind\(/, '-wbind(')
 
     // prefix imported
     .replace(/([A-z0-9_]+)\(`imported_/g, '$(`imported_');