Merge pull request #169 from theKashey/fixes-2019

fix: terser might compress different files differently, fixes #166

.prettierignore

@@ -0,0 +1 @@
+__tests__/__fixtures__

.size-limit.js

@@ -12,6 +12,6 @@ module.exports = [
   {
     path: 'dist/es2015/boot.js',
     ignore: ['tslib'],
-    limit: '1.7 KB',
+    limit: '1.8 KB',
   },
 ];

.size.json

@@ -2,16 +2,16 @@
   {
     "name": "dist/es2015/index.js, dist/es2015/boot.js",
     "passed": true,
-    "size": 3407
+    "size": 3428
   },
   {
     "name": "dist/es2015/index.js",
     "passed": true,
-    "size": 3123
+    "size": 3133
   },
   {
     "name": "dist/es2015/boot.js",
     "passed": true,
-    "size": 1695
+    "size": 1756
   }
 ]

__tests__/__fixtures__/babel/webpack/expected.js

@@ -1,10 +1,4 @@
-var importedWrapper = function (marker, realImport) {
-  if (typeof __deoptimization_sideEffect__ !== 'undefined') {
-    __deoptimization_sideEffect__(marker, realImport);
-  }
-
-  return realImport;
-};
+var importedWrapper = require('react-imported-component/wrapper');
 
 import { lazy, useImported } from "react-imported-component";
 import { assignImportedComponents } from "react-imported-component/boot";

__tests__/__snapshots__/macro.spec.ts.snap

@@ -33,13 +33,7 @@ function _interopRequireWildcard(obj) {
   }
 }
 
-var importedWrapper = function(marker, realImport) {
-  if (typeof __deoptimization_sideEffect__ !== \\"undefined\\") {
-    __deoptimization_sideEffect__(marker, realImport);
-  }
-
-  return realImport;
-};
+var importedWrapper = require(\\"react-imported-component/wrapper\\");
 
 import { lazy } from \\"react-imported-component\\";
 import { assignImportedComponents } from \\"react-imported-component/boot\\";
@@ -92,13 +86,7 @@ function _interopRequireWildcard(obj) {
   }
 }
 
-var importedWrapper = function(marker, realImport) {
-  if (typeof __deoptimization_sideEffect__ !== \\"undefined\\") {
-    __deoptimization_sideEffect__(marker, realImport);
-  }
-
-  return realImport;
-};
+var importedWrapper = require(\\"react-imported-component/wrapper\\");
 
 importedWrapper(
   \\"imported_-1ko6oiq_component\\",
@@ -140,13 +128,7 @@ function _interopRequireWildcard(obj) {
   }
 }
 
-var importedWrapper = function(marker, realImport) {
-  if (typeof __deoptimization_sideEffect__ !== \\"undefined\\") {
-    __deoptimization_sideEffect__(marker, realImport);
-  }
-
-  return realImport;
-};
+var importedWrapper = require(\\"react-imported-component/wrapper\\");
 
 import { lazy } from \\"react-imported-component\\";
 const v = lazy(() =>
@@ -192,13 +174,7 @@ function _interopRequireWildcard(obj) {
   }
 }
 
-var importedWrapper = function(marker, realImport) {
-  if (typeof __deoptimization_sideEffect__ !== \\"undefined\\") {
-    __deoptimization_sideEffect__(marker, realImport);
-  }
-
-  return realImport;
-};
+var importedWrapper = require(\\"react-imported-component/wrapper\\");
 
 import { imported, useImported } from \\"react-imported-component\\";
 const v = imported(() =>
@@ -249,13 +225,7 @@ const x = () => useImported(() => import('./b'));
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-var importedWrapper = function(marker, realImport) {
-  if (typeof __deoptimization_sideEffect__ !== \\"undefined\\") {
-    __deoptimization_sideEffect__(marker, realImport);
-  }
-
-  return realImport;
-};
+var importedWrapper = require(\\"react-imported-component/wrapper\\");
 
 function _interopRequireWildcard(obj) {
   if (obj && obj.__esModule) {
@@ -282,13 +252,7 @@ function _interopRequireWildcard(obj) {
   }
 }
 
-var importedWrapper = function(marker, realImport) {
-  if (typeof __deoptimization_sideEffect__ !== \\"undefined\\") {
-    __deoptimization_sideEffect__(marker, realImport);
-  }
-
-  return realImport;
-};
+var importedWrapper = require(\\"react-imported-component/wrapper\\");
 
 import { imported, useImported } from \\"react-imported-component\\";
 const v = imported(() =>

__tests__/loadable.spec.ts

@@ -1,4 +1,4 @@
-import {getFunctionSignature, getLoadable, importMatch} from "../src/loadable";
+import { getLoadable } from '../src/loadable';
 
 describe('getLoadable', () => {
   const importedWrapper = (_: any, b: any) => b;
@@ -7,61 +7,13 @@ describe('getLoadable', () => {
     const l1 = getLoadable(() => importedWrapper('imported_mark1_component', Promise.resolve(42)));
     const l2 = getLoadable(() => importedWrapper('imported_mark1_component', Promise.resolve(42)));
 
-    expect(l1).toEqual(l2)
+    expect(l1).toEqual(l2);
   });
 
   it('cache test - no mark present', () => {
     const l1 = getLoadable(() => Promise.resolve(42));
     const l2 = getLoadable(() => Promise.resolve(42));
 
-    expect(l1).not.toEqual(l2)
+    expect(l1).not.toEqual(l2);
   });
 });
-
-describe('importMatch', () => {
-  it('standard', () => {
-    expect(
-      importMatch(getFunctionSignature(`() => importedWrapper('imported_mark1_component', Promise.resolve(TargetComponent)), true)`))
-    ).toEqual(['mark1']);
-  });
-
-  it('webpack', () => {
-    expect(
-      importMatch(getFunctionSignature(`() => importedWrapper("imported_mark1_component", __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./components/Another */ "./app/components/Another.tsx")))`))
-    ).toEqual(['mark1']);
-  });
-
-  it('webpack-prod', () => {
-    expect(
-      importMatch(getFunctionSignature(`() => importedWrapper('imported_mark1_component',__webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./components/Another */ "./app/components/Another.tsx")))`))
-    ).toEqual(['mark1']);
-  });
-
-  it('functional', () => {
-    expect(importMatch(getFunctionSignature(`"function loadable() {
-        return importedWrapper('imported_1ubbetg_component', __webpack_require__.e(/*! import() | namedChunk-1 */ "namedChunk-1").then(__webpack_require__.t.bind(null, /*! ./DeferredRender */ "./src/DeferredRender.js", 7)));
-      }"`))).toEqual(['1ubbetg']);
-  });
-
-  it('parcel', () => {
-    expect(importMatch(getFunctionSignature(`function _() {
-        return importedWrapper('imported_mark1_component', require("_bundle_loader")(require.resolve('./HelloWorld3')));
-    }`))).toEqual(['mark1']);
-  });
-
-  it('ie11 uglify', () => {
-    expect(importMatch(getFunctionSignature(`function _() {
-        var t = 'imported_mark1_component';
-    }`))).toEqual(['mark1']);
-  });
-
-  it('multiple imports in one line', () => {
-    expect(importMatch(getFunctionSignature(`function _() {
-        "imported_1pn9k36_component", blablabla- importedWrapper("imported_-1556gns_component")
-    }`))).toEqual(['1pn9k36', '-1556gns']);
-  });
-
-  it('maps function signatures', () => {
-    expect(getFunctionSignature(`import('file')`)).toEqual(getFunctionSignature(`import(/* */'file')`))
-  })
-});

__tests__/signatures.spec.ts

@@ -0,0 +1,92 @@
+import { getFunctionSignature, importMatch } from '../src/signatures';
+
+describe('signatures', () => {
+  const a = (i: any) => i;
+  const b = (i: any) => i;
+
+  it('extract markers from function', () => {
+    expect(importMatch(getFunctionSignature(() => a('imported_XXYY_component')))).toEqual(['XXYY']);
+  });
+
+  it('work similar for similar functions', () => {
+    expect(getFunctionSignature(() => a('imported_XXYY_component'))).toBe(
+      getFunctionSignature(() => b('imported_XXYY_component'))
+    );
+  });
+});
+
+describe('importMatch', () => {
+  it('standard', () => {
+    expect(
+      importMatch(
+        getFunctionSignature(
+          `() => importedWrapper('imported_mark1_component', Promise.resolve(TargetComponent)), true)`
+        )
+      )
+    ).toEqual(['mark1']);
+  });
+
+  it('webpack', () => {
+    expect(
+      importMatch(
+        getFunctionSignature(
+          `() => importedWrapper("imported_mark1_component", __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./components/Another */ "./app/components/Another.tsx")))`
+        )
+      )
+    ).toEqual(['mark1']);
+  });
+
+  it('webpack-prod', () => {
+    expect(
+      importMatch(
+        getFunctionSignature(
+          `() => importedWrapper('imported_mark1_component',__webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./components/Another */ "./app/components/Another.tsx")))`
+        )
+      )
+    ).toEqual(['mark1']);
+  });
+
+  it('functional', () => {
+    expect(
+      importMatch(
+        getFunctionSignature(`"function loadable() {
+        return importedWrapper('imported_1ubbetg_component', __webpack_require__.e(/*! import() | namedChunk-1 */ "namedChunk-1").then(__webpack_require__.t.bind(null, /*! ./DeferredRender */ "./src/DeferredRender.js", 7)));
+      }"`)
+      )
+    ).toEqual(['1ubbetg']);
+  });
+
+  it('parcel', () => {
+    expect(
+      importMatch(
+        getFunctionSignature(`function _() {
+        return importedWrapper('imported_mark1_component', require("_bundle_loader")(require.resolve('./HelloWorld3')));
+    }`)
+      )
+    ).toEqual(['mark1']);
+  });
+
+  it('ie11 uglify', () => {
+    expect(
+      importMatch(
+        getFunctionSignature(`function _() {
+        var t = 'imported_mark1_component';
+    }`)
+      )
+    ).toEqual(['mark1']);
+  });
+
+  it('multiple imports in one line', () => {
+    expect(
+      importMatch(
+        getFunctionSignature(`function _() {
+        "imported_1pn9k36_component", blablabla- importedWrapper("imported_-1556gns_component")
+    }`)
+      )
+    ).toEqual(['1pn9k36', '-1556gns']);
+  });
+
+  it('maps function signatures', () => {
+    expect(getFunctionSignature(`import('file')`)).toEqual(getFunctionSignature(`import(/* */'file')`));
+  });
+});

__tests__/useImported.spec.tsx

@@ -146,7 +146,7 @@ describe('useImported', () => {
 
     expect(wrapper.update().html()).toContain('nothing');
     wrapper.setProps({ loadit: true });
-    expect(wrapper.update().html()).toContain('nothing');
+    expect(wrapper.update().html()).toContain('loading');
 
     await act(async () => {
       await done();
@@ -155,4 +155,32 @@ describe('useImported', () => {
     expect(wrapper.update().html()).toContain('loaded!');
     expect(drainHydrateMarks()).toEqual(['conditional-mark']);
   });
+
+  it('cached import', async () => {
+    // this test is not working as it should (it should be broken)
+    const importer = () => () => <span>loaded!</span>;
+
+    const Comp = () => {
+      const { loading, imported: Component } = useImported(importer as any);
+
+      if (Component) {
+        return <Component />;
+      }
+
+      if (loading) {
+        return <span>loading</span>;
+      }
+      return <span>nothing</span>;
+    };
+
+    const wrapper = mount(<Comp />);
+    expect(wrapper.html()).toContain('loading');
+    expect(wrapper.update().html()).toContain('loading');
+
+    await act(async () => {
+      await done();
+    });
+
+    expect(wrapper.update().html()).toContain('loaded!');
+  });
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-imported-component",
-  "version": "6.2.1",
+  "version": "6.2.4",
   "description": "I will import your component, and help to handle it",
   "main": "dist/es5/index.js",
   "jsnext:main": "dist/es2015/index.js",
@@ -85,7 +85,8 @@
     "boot",
     "server",
     "macro",
-    "babel.js"
+    "babel.js",
+    "wrapper.js"
   ],
   "husky": {
     "hooks": {