a better mark extraction

theKashey · Nov 22, 2018 · c4baf7b · c4baf7b
1 parent 4b6e656
commit c4baf7b
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 6 deletions.
diff --git a/_tests/rehydrate.spec.js b/_tests/rehydrate.spec.js
@@ -40,6 +40,12 @@ describe('SSR Component', () => {
       expect(importMatch(`() => importedWrapper('imported-component', 'mark1', __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./components/Another */ "./app/components/Another.tsx")))`)).to.be.deep.equal(['mark1']);
     })
 
+    it('functional', () => {
+      expect(importMatch(`"function loadable() {
+        return importedWrapper('imported-component', '1ubbetg', __webpack_require__.e(/*! import() | namedChunk-1 */ "namedChunk-1").then(__webpack_require__.t.bind(null, /*! ./DeferredRender */ "./src/DeferredRender.js", 7)));
+      }"`)).to.be.deep.equal(['1ubbetg']);
+    })
+
     it('parcel', () => {
       expect(importMatch(`function _() {
         return importedWrapper('imported-component', 'mark1', require("_bundle_loader")(require.resolve('./HelloWorld3')));

diff --git a/examples/react-hot-loader/src/indirect.js b/examples/react-hot-loader/src/indirect.js
diff --git a/examples/react-hot-loader/src/indirectTarget.js b/examples/react-hot-loader/src/indirectTarget.js
diff --git a/examples/react-hot-loader/src/indirectUsage.js b/examples/react-hot-loader/src/indirectUsage.js
diff --git a/src/Component.js b/src/Component.js
@@ -34,10 +34,12 @@ export class UnconnectedReactImportedComponent extends Component {
     super(props);
     this.state = this.pickPrecached() || {};
 
-    getLoadable(this.props.loadable).load().catch(() => ({}));
+    const loadable = getLoadable(this.props.loadable);
+    loadable.load().catch(() => ({}));
+    this.state.mark = loadable.mark;
 
     if (isNode && settings.SSR && typeof this.props.streamId !== 'undefined') {
-      useMark(this.props.streamId, this.props.loadable.mark);
+      useMark(this.props.streamId, loadable.mark);
       if (this.state.state !== STATE_DONE) {
         this.state.state = STATE_LOADING;
         this.reload();
@@ -47,7 +49,7 @@ export class UnconnectedReactImportedComponent extends Component {
 
   componentDidMount() {
     this.mounted = true;
-    useMark(this.props.streamId, this.props.loadable.mark);
+    useMark(this.props.streamId, this.state.mark);
     if (this.state.state !== STATE_DONE) {
       this.reload();
     }
@@ -60,7 +62,7 @@ export class UnconnectedReactImportedComponent extends Component {
   componentDidUpdate(oldProps) {
     // this.props.loadable would change only on HRM (or direct component usage)
     // just load it, do not use result
-    if (oldProps.loadable!==this.props.loadable) {
+    if (oldProps.loadable !== this.props.loadable) {
       getLoadable(this.props.loadable).load().catch(() => ({}));
     }
   }

diff --git a/src/loadable.js b/src/loadable.js
@@ -8,8 +8,8 @@ const removeFromPending = promise => pending = pending.filter(a => a !== promise
 const trimImport = str => str.replace(/['"]/g, '');
 
 export const importMatch = functionString => {
-  const markMatches = functionString.match(/\(['"]imported-component['"],[ '"](.*),/g) || [];
-  return markMatches.map( match => trimImport(match.match(/\(['"]imported-component['"],[ '"](.*)['"],/i)[1]));
+  const markMatches = functionString.match(/\(['"]imported-component['"],\s['"](.*),/g) || [];
+  return markMatches.map( match => trimImport(match.match(/\(['"]imported-component['"],\s['"]([^'"]*)['"],/i)[1]));
 }
 
 const toLoadable = (importFunction, autoImport = true) => {