@startupjs/babel-plugin-startupjs 0.61.2 → 0.61.3

package/index.js

@@ -3,47 +3,95 @@ const { join } = require('path')
 
 const MAGIC_MODULE_NAME = 'startupjs-ui'
 
-module.exports = function ({ template, types: t }) {
+module.exports = function ({ template, types: t }, { asyncImports = false } = {}) {
   const buildImport = template('import %%name%% from %%source%%')
   const buildExport = template('export { default as %%name%% } from %%source%%')
+  // when asyncImports is enabled, we replace imports with dynamic imports:
+  // import { Button, Card } from 'startupjs-ui'
+  // -->
+  // const [Button, Card] = await Promise.all([
+  //   import('startupjs-ui/Button').then(m => m.default),
+  //   import('startupjs-ui/Card').then(m => m.default)
+  // ])
+  // Note that this currently does not work in Expo because React Native
+  // does not support top-level await yet.
+  const buildAsyncImport = source => {
+    const importCall = t.callExpression(t.import(), [t.stringLiteral(source)])
+    return t.callExpression(
+      t.memberExpression(importCall, t.identifier('then')),
+      [t.arrowFunctionExpression(
+        [t.identifier('m')],
+        t.memberExpression(t.identifier('m'), t.identifier('default'))
+      )]
+    )
+  }
+  const buildPromiseAll = (names, imports) => t.variableDeclaration('const', [
+    t.variableDeclarator(
+      t.arrayPattern(names),
+      t.awaitExpression(
+        t.callExpression(
+          t.memberExpression(t.identifier('Promise'), t.identifier('all')),
+          [t.arrayExpression(imports)]
+        )
+      )
+    )
+  ])
 
   return {
     name: 'Unwrap imports for tree shaking.',
     visitor: {
       Program ($this) {
         let executed = false
+        const asyncImportNames = []
+        const asyncImportExpressions = []
+        const asyncExportSpecifiers = []
         $this.traverse({
-          ImportDeclaration ($this) {
-            if ($this.get('source').node.value !== MAGIC_MODULE_NAME) return
+          ImportDeclaration ($path) {
+            if ($path.get('source').node.value !== MAGIC_MODULE_NAME) return
             let transformed = false // needed to prevent infinite loops
-            const theImports = $this.get('specifiers')
-              .map($specifier => {
-                // pluck out into a separate import
-                if ($specifier.isImportSpecifier()) {
-                  transformed = true
-                  const originalName = $specifier.get('imported').node.name
-                  if (!checkNamedExportExists(originalName)) {
-                    throw $specifier.buildCodeFrameError(
-                      `Named export "${originalName}" does not exist in "${MAGIC_MODULE_NAME}" "exports" field in package.json`
-                    )
-                  }
-                  const importedName = $specifier.get('local').node.name
-                  return buildImport({
+            const theImports = []
+            $path.get('specifiers').forEach($specifier => {
+              // pluck out into a separate import
+              if ($specifier.isImportSpecifier()) {
+                transformed = true
+                const originalName = $specifier.get('imported').node.name
+                if (!checkNamedExportExists(originalName)) {
+                  throw $specifier.buildCodeFrameError(
+                    `Named export "${originalName}" does not exist in "${MAGIC_MODULE_NAME}" "exports" field in package.json`
+                  )
+                }
+                const importedName = $specifier.get('local').node.name
+                if (asyncImports) {
+                  asyncImportNames.push(t.identifier(importedName))
+                  asyncImportExpressions.push(buildAsyncImport(`${MAGIC_MODULE_NAME}/${originalName}`))
+                } else {
+                  theImports.push(buildImport({
                     name: importedName,
                     source: `${MAGIC_MODULE_NAME}/${originalName}`
-                  })
+                  }))
                 }
-                // pass as is
-                return t.importDeclaration([$specifier.node], t.stringLiteral(MAGIC_MODULE_NAME))
-              })
+                return
+              }
+              // pass as is
+              theImports.push(t.importDeclaration([$specifier.node], t.stringLiteral(MAGIC_MODULE_NAME)))
+            })
             if (!transformed) return
-            $this.replaceWithMultiple(theImports)
+            if (asyncImports) {
+              if (theImports.length > 0) {
+                $path.replaceWithMultiple(theImports)
+              } else {
+                $path.remove()
+              }
+            } else {
+              $path.replaceWithMultiple(theImports)
+            }
             executed = true
           },
-          ExportNamedDeclaration ($this) {
-            if ($this.get('source')?.node?.value !== MAGIC_MODULE_NAME) return
-            const theExports = $this.get('specifiers')
-              .map($specifier => {
+          ExportNamedDeclaration ($path) {
+            if ($path.get('source')?.node?.value !== MAGIC_MODULE_NAME) return
+            const specifiers = $path.get('specifiers')
+            if (asyncImports) {
+              specifiers.forEach($specifier => {
                 const originalName = $specifier.get('local').node.name
                 if (!checkNamedExportExists(originalName)) {
                   throw $specifier.buildCodeFrameError(
@@ -51,15 +99,58 @@ module.exports = function ({ template, types: t }) {
                   )
                 }
                 const exportedName = $specifier.get('exported').node.name
-                return buildExport({
-                  name: exportedName,
-                  source: `${MAGIC_MODULE_NAME}/${originalName}`
-                })
+                const localId = t.identifier(exportedName)
+                asyncImportNames.push(localId)
+                asyncImportExpressions.push(buildAsyncImport(`${MAGIC_MODULE_NAME}/${originalName}`))
+                asyncExportSpecifiers.push(t.exportSpecifier(localId, t.identifier(exportedName)))
+              })
+              if (specifiers.length > 0) {
+                $path.remove()
+                executed = true
+              }
+              return
+            }
+            const theExports = specifiers.map($specifier => {
+              const originalName = $specifier.get('local').node.name
+              if (!checkNamedExportExists(originalName)) {
+                throw $specifier.buildCodeFrameError(
+                  `Named export "${originalName}" does not exist in "${MAGIC_MODULE_NAME}" "exports" field in package.json`
+                )
+              }
+              const exportedName = $specifier.get('exported').node.name
+              return buildExport({
+                name: exportedName,
+                source: `${MAGIC_MODULE_NAME}/${originalName}`
               })
-            $this.replaceWithMultiple(theExports)
+            })
+            $path.replaceWithMultiple(theExports)
             executed = true
           }
         })
+        if (asyncImports && asyncImportNames.length > 0) {
+          const promiseAll = buildPromiseAll(asyncImportNames, asyncImportExpressions)
+          const bodyPaths = $this.get('body')
+          let lastImportPath
+          bodyPaths.forEach($path => {
+            if ($path.isImportDeclaration()) lastImportPath = $path
+          })
+          let promiseAllPath
+          if (lastImportPath) {
+            promiseAllPath = lastImportPath.insertAfter(promiseAll)[0]
+          } else {
+            $this.unshiftContainer('body', promiseAll)
+            promiseAllPath = $this.get('body.0')
+          }
+          if (asyncExportSpecifiers.length > 0) {
+            const exportDeclaration = t.exportNamedDeclaration(null, asyncExportSpecifiers)
+            if (promiseAllPath) {
+              promiseAllPath.insertAfter(exportDeclaration)
+            } else {
+              $this.pushContainer('body', exportDeclaration)
+            }
+          }
+          executed = true
+        }
         // re-crawl to update scope bindings
         if (executed) $this.scope.crawl()
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs/babel-plugin-startupjs",
-  "version": "0.61.2",
+  "version": "0.61.3",
   "publishConfig": {
     "access": "public"
   },
@@ -31,5 +31,5 @@
     "babel-plugin-tester": "^9.1.0",
     "jest": "^29.2.1"
   },
-  "gitHead": "00533aa32f235351daadab676a87ca9db0252cbd"
+  "gitHead": "4d14704ebbbcddd4de51dc8b1f5432f1f855b544"
 }