fix: apply loadable transformations before any other, fixes #466

gregberge · Jan 2, 2020 · ac5ba45 · ac5ba45
1 parent cee8992
commit ac5ba45
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 42 deletions.
diff --git a/examples/server-side-rendering/babel.config.js b/examples/server-side-rendering/babel.config.js
@@ -23,9 +23,6 @@ module.exports = api => {
         },
       ],
     ],
-    plugins: [
-      '@babel/plugin-syntax-dynamic-import',
-      '@loadable/babel-plugin'
-    ],
+    plugins: ['@babel/plugin-syntax-dynamic-import', '@loadable/babel-plugin'],
   }
 }
diff --git a/examples/server-side-rendering/src/server/main.js b/examples/server-side-rendering/src/server/main.js
@@ -38,19 +38,17 @@ const webStats = path.resolve(
   '../../public/dist/web/loadable-stats.json',
 )
 
-app.get(
-  '*',
-  (req, res) => {
-    const nodeExtractor = new ChunkExtractor({ statsFile: nodeStats })
-    const { default: App } = nodeExtractor.requireEntrypoint()
+app.get('*', (req, res) => {
+  const nodeExtractor = new ChunkExtractor({ statsFile: nodeStats })
+  const { default: App } = nodeExtractor.requireEntrypoint()
 
-    const webExtractor = new ChunkExtractor({ statsFile: webStats })
-    const jsx = webExtractor.collectChunks(<App />)
+  const webExtractor = new ChunkExtractor({ statsFile: webStats })
+  const jsx = webExtractor.collectChunks(<App />)
 
-    const html = renderToString(jsx)
+  const html = renderToString(jsx)
 
-    res.set('content-type', 'text/html')
-    res.send(`
+  res.set('content-type', 'text/html')
+  res.send(`
       <!DOCTYPE html>
       <html>
         <head>
@@ -63,8 +61,7 @@ app.get(
         </body>
       </html>
     `)
-  },
-)
+})
 
 // eslint-disable-next-line no-console
 app.listen(9000, () => console.log('Server started http://localhost:9000'))
diff --git a/packages/babel-plugin/src/index.js b/packages/babel-plugin/src/index.js
@@ -5,7 +5,7 @@ import importAsyncProperty from './properties/importAsync'
 import requireAsyncProperty from './properties/requireAsync'
 import requireSyncProperty from './properties/requireSync'
 import resolveProperty from './properties/resolve'
-import stateProperty from './properties/state';
+import stateProperty from './properties/state'
 
 const properties = [
   stateProperty,
@@ -109,13 +109,19 @@ const loadablePlugin = api => {
   return {
     inherits: syntaxDynamicImport,
     visitor: {
-      CallExpression(path) {
-        if (!isValidIdentifier(path)) return
-        transformImport(path)
-      },
-      'ArrowFunctionExpression|FunctionExpression|ObjectMethod': path => {
-        if (!hasLoadableComment(path)) return
-        transformImport(path)
+      Program: {
+        enter(programPath) {
+          programPath.traverse({
+            CallExpression(path) {
+              if (!isValidIdentifier(path)) return
+              transformImport(path)
+            },
+            'ArrowFunctionExpression|FunctionExpression|ObjectMethod': path => {
+              if (!hasLoadableComment(path)) return
+              transformImport(path)
+            },
+          })
+        },
       },
     },
   }

diff --git a/packages/babel-plugin/src/properties/requireAsync.js b/packages/babel-plugin/src/properties/requireAsync.js
@@ -1,13 +1,12 @@
-export default function requireAsyncProperty({types: t, template}) {
-
+export default function requireAsyncProperty({ types: t, template }) {
   const tracking = template.ast(`
     const key = this.resolve(props)
     this.resolved[key] = false
     return this.importAsync(props).then(resolved => {
      this.resolved[key] = true
      return resolved;
     });        
-  `);
+  `)
 
   return () =>
     t.objectMethod(

diff --git a/packages/babel-plugin/src/properties/state.js b/packages/babel-plugin/src/properties/state.js
@@ -1,8 +1,4 @@
-export default function requireAsyncProperty({types: t}) {
-
+export default function requireAsyncProperty({ types: t }) {
   return () =>
-    t.objectProperty(
-      t.identifier('resolved'),
-      t.objectExpression([])
-    )
+    t.objectProperty(t.identifier('resolved'), t.objectExpression([]))
 }
diff --git a/packages/component/.size-snapshot.json b/packages/component/.size-snapshot.json
@@ -1,13 +1,13 @@
 {
   "dist/loadable.cjs.js": {
-    "bundled": 12683,
-    "minified": 6125,
-    "gzipped": 2203
+    "bundled": 12664,
+    "minified": 6110,
+    "gzipped": 2195
   },
   "dist/loadable.esm.js": {
-    "bundled": 12300,
-    "minified": 5816,
-    "gzipped": 2135,
+    "bundled": 12281,
+    "minified": 5801,
+    "gzipped": 2126,
     "treeshaked": {
       "rollup": {
         "code": 259,

diff --git a/packages/component/src/resolvers.js b/packages/component/src/resolvers.js
@@ -2,7 +2,9 @@ import hoistNonReactStatics from 'hoist-non-react-statics'
 
 export function resolveComponent(loadedModule, { Loadable }) {
   // eslint-disable-next-line no-underscore-dangle
-  const Component = loadedModule.__esModule ? loadedModule.default : (loadedModule.default || loadedModule)
+  const Component = loadedModule.__esModule
+    ? loadedModule.default
+    : loadedModule.default || loadedModule
   hoistNonReactStatics(Loadable, Component, {
     preload: true,
   })

diff --git a/packages/server/src/ChunkExtractor.js b/packages/server/src/ChunkExtractor.js
@@ -43,7 +43,10 @@ function getSriHtmlAttributes(asset) {
 function assetToScriptTag(asset, extraProps) {
   return `<script async data-chunk="${asset.chunk}" src="${
     asset.url
-  }"${getSriHtmlAttributes(asset)}${extraPropsToString(asset, extraProps)}></script>`
+  }"${getSriHtmlAttributes(asset)}${extraPropsToString(
+    asset,
+    extraProps,
+  )}></script>`
 }
 
 function assetToScriptElement(asset, extraProps) {
@@ -135,7 +138,10 @@ function assetToLinkTag(asset, extraProps) {
   const hint = LINK_ASSET_HINTS[asset.type]
   return `<link ${hint}="${asset.chunk}" rel="${asset.linkType}" as="${
     asset.scriptType
-  }" href="${asset.url}"${getSriHtmlAttributes(asset)}${extraPropsToString(asset, extraProps)}>`
+  }" href="${asset.url}"${getSriHtmlAttributes(asset)}${extraPropsToString(
+    asset,
+    extraProps,
+  )}>`
 }
 
 function assetToLinkElement(asset, extraProps) {