@startupjs/bundler 0.55.11 → 0.56.0-alpha.1

package/README.md

@@ -4,7 +4,7 @@
 ## Requirements
 
 ```
-react-native-svg: >= 12.1.0
+react-native-svg: >= 14.0.0
 ```
 
 ## Usage

package/lib/asyncSvgLoader.js

@@ -0,0 +1,44 @@
+// Transform .svg files into React components.
+// This is only used in Metro since on webpack we use @svgr/webpack for the same purpose.
+// ref: https://github.com/kristerkari/react-native-svg-transformer/blob/master/index.js
+const { dirname } = require('path')
+const { resolveConfig, transform } = require('@svgr/core')
+
+const defaultSVGRConfig = {
+  native: true,
+  plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
+  svgoConfig: {
+    plugins: [
+      {
+        name: 'preset-default',
+        params: {
+          overrides: {
+            inlineStyles: {
+              onlyMatchedOnce: false
+            },
+            removeViewBox: false,
+            removeUnknownsAndDefaults: false,
+            convertColors: false
+          }
+        }
+      }
+    ]
+  }
+}
+
+module.exports = asyncLoader(async function asyncSvgLoader (source) {
+  const filename = this.resourcePath
+  const config = {
+    ...defaultSVGRConfig,
+    ...await resolveConfig(dirname(filename))
+  }
+  return transform(source, config)
+})
+
+// webpack loader must return undefined, so we can't make the actual loader function async
+function asyncLoader (loader) {
+  return function (...args) {
+    const callback = this.async()
+    loader.call(this, ...args).then(result => callback(null, result), callback)
+  }
+}

package/lib/callLoader.js

@@ -1,4 +1,22 @@
 // Simple mock to be able to call simple webpack loaders with filename substitution.
 module.exports = function callLoader (loader, source, filename, options = {}) {
-  return loader.call({ resourcePath: filename, query: options }, source)
+  let isAsync = false
+  let resolveAsync
+  let rejectAsync
+  const markAsync = () => {
+    isAsync = true
+    return (err, result) => {
+      if (err) return rejectAsync(err)
+      resolveAsync(result)
+    }
+  }
+  const result = loader.call({ resourcePath: filename, query: options, async: markAsync }, source)
+  if (isAsync) {
+    return new Promise((resolve, reject) => {
+      resolveAsync = resolve
+      rejectAsync = reject
+    })
+  } else {
+    return result
+  }
 }

package/lib/eliminatorLoader.js

@@ -1,54 +1,83 @@
+// TODO: add support for source maps
 const babel = require('@babel/core')
+const { isStartupjsPluginEcosystemFile, CONFIG_FILENAME_REGEX } = require('./utils')
 
 const PLUGIN_KEYS = ['name', 'for']
+const PROJECT_KEYS = ['plugins', 'modules']
 const ALL_ENVS = ['client', 'isomorphic', 'server', 'build']
+const MAGIC_IMPORTS = ['startupjs/registry', '@startupjs/registry']
 
 module.exports = function eliminatorLoader (source) {
-  const envs = this.query.envs
-  if (!envs) throw Error("getEliminatorLoader: envs not provided (for example ['client', 'isomorphic'])")
   const filename = this.resourcePath
 
+  // ensure that this loader is only used on plugins, startupjs.config.js and loadStartupjsConfig.js files
+  if (!(isStartupjsPluginEcosystemFile(filename))) return source
+
+  const envs = this.query.envs
+  if (!envs) throw Error("eliminatorLoader: envs not provided (for example ['client', 'isomorphic'])")
+
   let code = source
 
-  // first we need to transform pug to jsx
-  // so that eliminator doesn't think that there are unused variables
+  // STEP 1: convert pug to jsx and auto-load startupjs plugins
   code = babel.transformSync(code, {
     filename,
     babelrc: false,
     configFile: false,
     plugins: [
+      // support JSX syntax
       require('@babel/plugin-syntax-jsx'),
+      // transform pug to jsx. This generates a bunch of new AST nodes
+      // (it's important to do this first before any dead code elimination runs)
       [require('babel-plugin-transform-react-pug'), {
         classAttribute: 'styleName'
       }],
+      // support calling sub-components in pug (like <Modal.Header />)
       [require('@startupjs/babel-plugin-react-pug-classnames'), {
         classAttribute: 'styleName'
       }],
+      // traverse "exports" of package.json and all dependencies to find all startupjs plugins
+      // and automatically import them in the main startupjs.config.js file
       require('@startupjs/babel-plugin-startupjs-plugins')
     ]
   }).code
 
-  // then we run the actual eliminator to remove env-specific stuff
+  // STEP 2: remove code related to other envs
   code = babel.transformSync(code, {
     filename,
     babelrc: false,
     configFile: false,
     plugins: [
+      // support JSX syntax
       require('@babel/plugin-syntax-jsx'),
+      // run eliminator to remove code targeting other envs.
+      // For example, only keep code related to 'client' and 'isomorphic' envs
+      // (in which case any code related to 'server' and 'build' envs will be removed)
       [require('@startupjs/babel-plugin-eliminator'), {
-        keepObjectKeysOfFunction: {
-          createProject: {
-            magicImports: ['startupjs/registry', 'startupjs/registry.js', '@startupjs/registry', '@startupjs/registry.js'],
-            targetObjectJsonPath: '$.plugins.*',
-            ensureOnlyKeys: ['client', 'isomorphic', 'server', 'build'],
-            keepKeys: envs
-          },
-          createPlugin: {
-            magicImports: ['startupjs/registry', 'startupjs/registry.js', '@startupjs/registry', '@startupjs/registry.js'],
-            ensureOnlyKeys: [...PLUGIN_KEYS, ...ALL_ENVS],
-            keepKeys: [...PLUGIN_KEYS, ...envs]
-          }
-        }
+        trimObjects: [{
+          magicFilenameRegex: CONFIG_FILENAME_REGEX,
+          magicExport: 'default',
+          targetObjectJsonPath: '$.modules.*',
+          ensureOnlyKeys: ALL_ENVS,
+          keepKeys: envs
+        }, {
+          magicFilenameRegex: CONFIG_FILENAME_REGEX,
+          magicExport: 'default',
+          targetObjectJsonPath: '$.plugins.*',
+          ensureOnlyKeys: ALL_ENVS,
+          keepKeys: envs
+        }, {
+          magicFilenameRegex: CONFIG_FILENAME_REGEX,
+          magicExport: 'default',
+          targetObjectJsonPath: '$',
+          // envs on the top level are the alias for '$.modules.startupjs'
+          ensureOnlyKeys: [...PROJECT_KEYS, ...ALL_ENVS],
+          keepKeys: [...PROJECT_KEYS, ...envs]
+        }, {
+          functionName: 'createPlugin',
+          magicImports: MAGIC_IMPORTS,
+          ensureOnlyKeys: [...PLUGIN_KEYS, ...ALL_ENVS],
+          keepKeys: [...PLUGIN_KEYS, ...envs]
+        }]
       }]
     ]
   }).code

package/lib/startupjsLoader.js

@@ -0,0 +1,23 @@
+// Only used for React Native
+const babel = require('@babel/core')
+
+module.exports = function startupjsLoader (source) {
+  const filename = this.resourcePath
+  const platform = this.query.platform
+
+  // There is a bug in metro when BABEL_ENV is a string "undefined".
+  // We have to workaround it and use NODE_ENV.
+  const env = (process.env.BABEL_ENV !== 'undefined' && process.env.BABEL_ENV) || process.env.NODE_ENV
+
+  return babel.transformSync(source, {
+    filename,
+    babelrc: false,
+    configFile: false,
+    presets: [
+      [require('babel-preset-startupjs/pure'), {
+        platform,
+        env
+      }]
+    ]
+  }).code
+}

package/lib/stylusToCssLoader.js

@@ -1,4 +1,5 @@
 // ref: https://github.com/kristerkari/react-native-stylus-transformer
+// TODO: Refactor `platform` to be just passed externally as an option in metro and in webpack
 const platformSingleton = require(
   '@startupjs/babel-plugin-rn-stylename-inline/platformSingleton'
 )
@@ -7,6 +8,11 @@ const path = require('path')
 const stylus = require('stylus')
 const STYLES_PATH = path.join(process.cwd(), 'styles/index.styl')
 
+let UI_STYLES_PATH
+try {
+  UI_STYLES_PATH = require.resolve('@startupjs/ui/styles/index.styl')
+} catch (err) {}
+
 function renderToCSS (src, filename) {
   let compiled
   const compiler = stylus(src)
@@ -18,6 +24,10 @@ function renderToCSS (src, filename) {
     compiler.define(`__${platform.toUpperCase()}__`, true)
   }
 
+  if (fs.existsSync(UI_STYLES_PATH)) {
+    compiler.import(UI_STYLES_PATH)
+  }
+
   // TODO: Make this a setting
   if (fs.existsSync(STYLES_PATH)) {
     compiler.import(STYLES_PATH)

package/lib/utils.js

@@ -0,0 +1,12 @@
+// NOTE: startupjs.config.cjs is used by the old bundler. This regex does not include it.
+exports.CONFIG_FILENAME_REGEX = /(?:^|[\\/])startupjs\.config\.m?[jt]sx?$/
+exports.PLUGIN_FILENAME_REGEX = /(?:^|[.\\/])plugin\.[mc]?[jt]sx?$/
+exports.LOAD_CONFIG_FILENAME_REGEX = /(?:^|[\\/])loadStartupjsConfig\.m?[jt]sx?$/
+
+exports.isStartupjsPluginEcosystemFile = filename => {
+  return (
+    exports.PLUGIN_FILENAME_REGEX.test(filename) ||
+    exports.CONFIG_FILENAME_REGEX.test(filename) ||
+    exports.LOAD_CONFIG_FILENAME_REGEX.test(filename)
+  )
+}

package/lib/yamlLoader.js

@@ -1,6 +1,6 @@
 const yaml = require('js-yaml')
 
-module.exports = function mdxExamplesLoader (source) {
+module.exports = function yamlLoader (source) {
   const yamlData = yaml.load(source)
   return `export default ${JSON.stringify(yamlData)};`
 }

package/metro-babel-transformer.js

@@ -0,0 +1,57 @@
+const platformSingleton = require('@startupjs/babel-plugin-rn-stylename-inline/platformSingleton')
+const stylusToCssLoader = require('./lib/stylusToCssLoader')
+const cssToReactNativeLoader = require('./lib/cssToReactNativeLoader')
+const mdxExamplesLoader = require('./lib/mdxExamplesLoader')
+const getMDXLoader = require('./lib/getMDXLoader')
+const eliminatorLoader = require('./lib/eliminatorLoader')
+const callLoader = require('./lib/callLoader')
+const asyncSvgLoader = require('./lib/asyncSvgLoader')
+const startupjsLoader = require('./lib/startupjsLoader')
+
+module.exports.transform = async function startupjsMetroBabelTransform ({
+  src, filename, options: { upstreamTransformer, ...options } = {}
+}) {
+  upstreamTransformer ??= getUpstreamTransformer()
+  const { platform } = options
+  platformSingleton.value = platform
+
+  // from exotic extensions to js
+  if (/\.styl$/.test(filename)) {
+    // TODO: Refactor `platform` to be just passed externally as an option in metro and in webpack
+    src = callLoader(stylusToCssLoader, src, filename)
+    src = callLoader(cssToReactNativeLoader, src, filename)
+  } else if (/\.css$/.test(filename)) {
+    src = callLoader(cssToReactNativeLoader, src, filename)
+  } else if (/\.svg$/.test(filename)) {
+    src = await callLoader(asyncSvgLoader, src, filename)
+  } else if (/\.mdx?$/.test(filename)) {
+    const mdxLoader = await getMDXLoader()
+    src = callLoader(mdxExamplesLoader, src, filename)
+    src = callLoader(mdxLoader, src, filename)
+  }
+
+  // js transformations
+  if (/\.[mc]?[jt]sx?$/.test(filename)) {
+    src = callLoader(eliminatorLoader, src, filename, { envs: ['client', 'isomorphic'] })
+  }
+  if ((/\.mdx?$/.test(filename) || /\.[mc]?[jt]sx?$/.test(filename)) && /['"](?:startupjs|@env)['"]/.test(src)) {
+    src = callLoader(startupjsLoader, src, filename, { platform })
+  }
+
+  return upstreamTransformer.transform({ src, filename, options })
+}
+
+function getUpstreamTransformer () {
+  try {
+    // Expo
+    return require('@expo/metro-config/babel-transformer')
+  } catch (err) {
+    try {
+      // React Native 0.73+
+      return require('@react-native/metro-babel-transformer')
+    } catch (err) {
+      // React Native <0.73
+      return require('metro-react-native-babel-transformer')
+    }
+  }
+}

package/metro-config.js

@@ -0,0 +1,87 @@
+const connect = require('connect')
+
+// To pass existing config for modification, pass it as 'upstreamConfig' in options:
+//   config = getDefaultConfig(__dirname, { upstreamConfig })
+exports.getDefaultConfig = function getDefaultConfig (projectRoot, { upstreamConfig } = {}) {
+  upstreamConfig ??= getUpstreamConfig(projectRoot)
+  const isExpo = checkIfExpo(upstreamConfig)
+  return {
+    ...upstreamConfig,
+    transformer: {
+      ...upstreamConfig.transformer,
+      babelTransformerPath: require.resolve('./metro-babel-transformer.js')
+    },
+    resolver: {
+      ...upstreamConfig.resolver,
+      assetExts: upstreamConfig.resolver.assetExts.filter(ext => ext !== 'svg'),
+      sourceExts: Array.from(new Set([
+        ...(isExpo ? ['expo.ts', 'expo.tsx', 'expo.js', 'expo.jsx', 'expo.mjs', 'expo.cjs'] : []),
+        ...(upstreamConfig.resolver.sourceExts || []),
+        ...['mjs', 'cjs', 'md', 'mdx', 'css', 'styl', 'svg']
+      ]))
+    },
+    server: {
+      ...upstreamConfig.server,
+      // TODO: implement a simple parsing of startupjs.config.js
+      //       to figure out whether we need to load 'server' and 'isomorphic'
+      //       envs or only the 'build' one.
+      //       If $.isomorphic.server is turned off then we don't need the enhanceMiddleware at all
+      enhanceMiddleware: metroMiddleware => {
+        return connect()
+          .use(metroMiddleware)
+          .use(getStartupjsMiddleware())
+      }
+    }
+  }
+}
+
+function getUpstreamConfig (projectRoot) {
+  try {
+    // Expo
+    return require('expo/metro-config').getDefaultConfig(projectRoot, {
+      // startupjs has a custom CSS implementation so we don't need to use Expo's
+      isCSSEnabled: false
+    })
+  } catch (err) {
+    try {
+      // React Native 0.73+
+      return require('@react-native/metro-config').getDefaultConfig(projectRoot)
+    } catch (err) {
+      // React Native <0.73
+      return require('metro-config').getDefaultConfig()
+    }
+  }
+}
+
+function checkIfExpo (upstreamConfig) {
+  if (/[\\/]@expo[\\/]metro-config[\\/]/.test(upstreamConfig?.transformer?.babelTransformerPath)) {
+    return true
+  }
+  try {
+    const path = require.resolve('expo/metro-config')
+    return Boolean(path)
+  } catch (err) {
+    return false
+  }
+}
+
+function getStartupjsMiddleware () {
+  const middlewarePromise = (async () => {
+    await import('./nodeRegister.mjs')
+    await import('@startupjs/registry/loadStartupjsConfig.auto')
+    const { ROOT_MODULE: MODULE } = await import('@startupjs/registry')
+    if (!MODULE.options.server) return
+    const { createMiddleware } = await import('@startupjs/server')
+    return (await createMiddleware()).middleware
+  })()
+  return function startupjsMiddleware (req, res, next) {
+    (async () => {
+      try {
+        const middleware = await middlewarePromise
+        return middleware ? middleware.apply(this, arguments) : next()
+      } catch (err) {
+        return next(err)
+      }
+    })()
+  }
+}

package/metro.config.js

@@ -1,4 +1,29 @@
-const defaultAssetExts = require('metro-config/src/defaults/defaults').assetExts
+// DEPRECATED
+console.warn(`
+Using 'startupjs/bundler/metro.config.cjs' directly is deprecated and will be removed soon.
+Instead please change your metro.config.js to:
+
+  const { getDefaultConfig } = require('startupjs/metro-config')
+  const config = getDefaultConfig(__dirname)
+  // modify config here if needed
+  // ...
+  module.exports = config
+`)
+
+const DEFAULT_ASSET_EXTS = [
+  // Image formats
+  'bmp', 'gif', 'jpg', 'jpeg', 'png', 'psd', 'svg', 'webp',
+  // Video formats
+  'm4v', 'mov', 'mp4', 'mpeg', 'mpg', 'webm',
+  // Audio formats
+  'aac', 'aiff', 'caf', 'm4a', 'mp3', 'wav',
+  // Document formats
+  'html', 'pdf', 'yaml', 'yml',
+  // Font formats
+  'otf', 'ttf',
+  // Archives (virtual files)
+  'zip'
+]
 
 const EXTENSIONS = ['js', 'jsx', 'json', 'mjs', 'cjs', 'ts', 'tsx', 'md', 'mdx', 'css', 'styl', 'svg']
 
@@ -13,7 +38,7 @@ module.exports = {
     babelTransformerPath: require.resolve('./lib/rnTransformer')
   },
   resolver: {
-    assetExts: defaultAssetExts.filter(ext => ext !== 'svg'),
+    assetExts: DEFAULT_ASSET_EXTS.filter(ext => ext !== 'svg'),
     sourceExts: EXTENSIONS
   }
 }

package/nodeLoader.mjs

@@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url'
 import callLoader from './lib/callLoader.js'
 import yamlLoader from './lib/yamlLoader.js'
 import eliminatorLoader from './lib/eliminatorLoader.js'
+import { isStartupjsPluginEcosystemFile } from './lib/utils.js'
 
 export function resolve (specifier, context, nextResolve) {
   const { parentURL = null } = context
@@ -33,7 +34,7 @@ export async function load (url, context, nextLoad) {
   }
 
   // process code elimination of other envs for *.plugin.js and startupjs.config.js
-  if (/(?:[./]plugin\.[mc]?[jt]sx?|startupjs\.config\.js)$/.test(url)) {
+  if (isStartupjsPluginEcosystemFile(url)) {
     const filePath = fileURLToPath(url)
     let source = await readFile(filePath, 'utf8')
     source = callLoader(eliminatorLoader, source, filePath, { envs: ['server', 'isomorphic'] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs/bundler",
-  "version": "0.55.11",
+  "version": "0.56.0-alpha.1",
   "description": "Opinionated scripts and configs to develop a react-native-web project",
   "main": "index.js",
   "publishConfig": {
@@ -21,23 +21,28 @@
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/mdx": "^2.3.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
-    "@startupjs/babel-plugin-eliminator": "^0.55.0",
+    "@startupjs/babel-plugin-eliminator": "^0.56.0-alpha.1",
     "@startupjs/babel-plugin-react-css-modules": "^6.5.4-1",
-    "@startupjs/babel-plugin-react-pug-classnames": "^0.55.8",
-    "@startupjs/babel-plugin-startupjs-plugins": "^0.55.8",
+    "@startupjs/babel-plugin-react-pug-classnames": "^0.56.0-alpha.0",
+    "@startupjs/babel-plugin-startupjs-plugins": "^0.56.0-alpha.1",
     "@startupjs/css-to-react-native-transform": "^1.9.0-2",
-    "@startupjs/plugin": "^0.55.8",
-    "@svgr/webpack": "~7.0.0",
+    "@startupjs/plugin": "^0.56.0-alpha.0",
+    "@startupjs/registry": "^0.56.0-alpha.1",
+    "@startupjs/server": "^0.56.0-alpha.1",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "@svgr/webpack": "^8.1.0",
     "assets-webpack-plugin": "^7.1.1",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^8.2.3",
     "babel-plugin-transform-react-pug": "^7.0.1",
-    "babel-preset-startupjs": "^0.55.11",
+    "babel-preset-startupjs": "^0.56.0-alpha.1",
+    "connect": "^3.7.0",
     "css-loader": "^6.5.0",
     "css-minimizer-webpack-plugin": "^5.0.0",
     "file-loader": "^6.2.0",
     "lodash": "^4.17.20",
-    "metro-config": "*",
     "mini-css-extract-plugin": "^2.4.3",
     "moment": "^2.0.0",
     "moment-locales-webpack-plugin": "^1.0.7",
@@ -56,5 +61,5 @@
   "peerDependencies": {
     "react-native-svg": "*"
   },
-  "gitHead": "253c84e79e50a73a194c33fb3d17a22ddb1af58f"
+  "gitHead": "30b858bb3203dc9dc064a3b16e060e2cc1777a71"
 }