@startupjs/bundler 0.60.0-canary.1 → 0.60.0-canary.17

package/lib/eliminatorLoader.js

@@ -1,6 +1,6 @@
 // TODO: add support for source maps
 const babel = require('@babel/core')
-const { isStartupjsPluginEcosystemFile, CONFIG_FILENAME_REGEX } = require('./utils')
+const { isStartupjsPluginEcosystemFile, CONFIG_FILENAME_REGEX } = require('babel-preset-startupjs/utils')
 
 const PLUGIN_KEYS = ['name', 'for', 'order', 'enabled']
 const PROJECT_KEYS = ['plugins', 'modules']
@@ -20,7 +20,7 @@ module.exports = function eliminatorLoader (source) {
   if (!(
     isStartupjsPluginEcosystemFile(filename) ||
     (clientModel && isModelFile(filename, source))
-  )) return source
+  )) return source // source inside Program is state.file.code
 
   const envs = this.query.envs
   if (!envs) throw Error("eliminatorLoader: envs not provided (for example ['features', 'isomorphic', 'client'])")

package/lib/mdxLoader.js

@@ -0,0 +1,18 @@
+const remarkGfm = require('remark-gfm').default
+const { compileSync } = require('@mdx-js/mdx')
+
+module.exports = function getMDXLoader (source) {
+  try {
+    source = compileSync(source, {
+      providerImportSource: '@startupjs/mdx/useMDXComponents',
+      remarkPlugins: [remarkGfm],
+      jsx: true
+    }).value
+  } catch (err) {
+    if (err) {
+      console.log('>> mdx compile error', err)
+      throw err
+    }
+  }
+  return source
+}

package/lib/startupjsLoader.js

@@ -15,7 +15,10 @@ module.exports = function startupjsLoader (source) {
     configFile: false,
     presets: [
       [require('babel-preset-startupjs'), {
+        // in Program: state.file.opts.caller.platform when used in metro
+        // when used in metro - state.file.opts.caller.bundler === 'metro'
         platform,
+        // in Program: state.file.opts.envName when used in metro
         env
       }],
       [require('cssxjs/babel'), { platform }]

package/metro-babel-transformer.js

@@ -1,11 +1,9 @@
 const stylusToCssLoader = require('cssxjs/loaders/stylusToCssLoader')
 const cssToReactNativeLoader = require('cssxjs/loaders/cssToReactNativeLoader')
 const mdxExamplesLoader = require('./lib/mdxExamplesLoader')
-const getMDXLoader = require('./lib/getMDXLoader')
-const eliminatorLoader = require('./lib/eliminatorLoader')
+const mdxLoader = require('./lib/mdxLoader')
 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 } = {}
@@ -22,23 +20,10 @@ module.exports.transform = async function startupjsMetroBabelTransform ({
   } 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: ['features', 'isomorphic', 'client'],
-      useRequireContext: true,
-      clientModel: true
-    })
-  }
-  if ((/\.mdx?$/.test(filename) || /\.[mc]?[jt]sx?$/.test(filename)) && /['"](?:startupjs)['"]/.test(src)) {
-    src = callLoader(startupjsLoader, src, filename, { platform })
-  }
-
   return upstreamTransformer.transform({ src, filename, options })
 }
 

package/metro-config.js

@@ -5,11 +5,15 @@ const { join, resolve } = require('path')
 
 // To pass existing config for modification, pass it as 'upstreamConfig' in options:
 //   config = getDefaultConfig(__dirname, { upstreamConfig })
-exports.getDefaultConfig = function getDefaultConfig (projectRoot, { upstreamConfig } = {}) {
+exports.getDefaultConfig = function getDefaultConfig (projectRoot, {
+  upstreamConfig,
+  checkStartupjsBabel = true
+} = {}) {
   let packageJson = {}
   try {
     packageJson = JSON.parse(readFileSync(join(projectRoot, 'package.json'), 'utf8'))
   } catch (err) {}
+  if (checkStartupjsBabel) _checkStartupjsBabel(projectRoot)
   const features = getFeatures(projectRoot)
   upstreamConfig ??= getUpstreamConfig(projectRoot)
   const isExpo = checkIfExpo(upstreamConfig)
@@ -44,7 +48,12 @@ exports.getDefaultConfig = function getDefaultConfig (projectRoot, { upstreamCon
 }
 
 function isBuild () {
-  return process.env.IS_BUILD || process.env.CI || process.env.EAS_BUILD
+  return (
+    process.env.IS_BUILD ||
+    process.env.CI ||
+    process.env.EAS_BUILD ||
+    (process.env.NODE_ENV === 'production' && !process.env.FORCE_SERVER)
+  )
 }
 
 function addServer (config) {
@@ -143,3 +152,36 @@ function getMonorepoRootPackageJson (projectRoot) {
     } catch (err) {}
   }
 }
+
+function _checkStartupjsBabel (projectRoot) {
+  const babelConfigPath = join(projectRoot, 'babel.config.cjs')
+  if (!existsSync(babelConfigPath)) {
+    console.error('ERROR:', ERRORS.missingBabelConfig)
+    throw Error(ERRORS.missingBabelConfig)
+  }
+  const babelConfig = readFileSync(join(projectRoot, 'babel.config.cjs'), 'utf8')
+  if (!babelConfig.includes('startupjs/babel')) {
+    console.error('ERROR:', ERRORS.noStartupjsBabelPreset)
+    throw Error(ERRORS.noStartupjsBabelPreset)
+  }
+}
+
+const ERRORS = {
+  missingBabelConfig: `
+    Missing babel.config.cjs with 'startupjs/babel' preset.
+    Please create babel.config.cjs following the instructions from Expo (or pure React Native) documentation,
+    and add 'startupjs/babel' as the LAST item in the 'presets' array.
+
+    To ignore this error (if you want to use a custom babel preset to transform startupjs code),
+    you can pass the option 'checkStartupjsBabel: false'
+    when calling 'getDefaultConfig(projectRoot, options)' from 'metro.config.cjs'.
+  `,
+  noStartupjsBabelPreset: `
+    Your babel.config.cjs is missing 'startupjs/babel' preset.
+    Please add 'startupjs/babel' as the LAST item in the 'presets' array of your babel.config.cjs.
+
+    To ignore this error (if you want to use a custom babel preset to transform startupjs code),
+    you can pass the option 'checkStartupjsBabel: false'
+    when calling 'getDefaultConfig(projectRoot, options)' from 'metro.config.cjs'.
+  `
+}

package/nodeLoader.mjs

@@ -1,9 +1,9 @@
 import { readFile } from 'node:fs/promises'
 import { fileURLToPath } from 'node:url'
+import { isStartupjsPluginEcosystemFile } from 'babel-preset-startupjs/utils'
 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs/bundler",
-  "version": "0.60.0-canary.1",
+  "version": "0.60.0-canary.17",
   "description": "Opinionated scripts and configs to develop a react-native-web project",
   "main": "index.js",
   "publishConfig": {
@@ -17,21 +17,21 @@
   "dependencies": {
     "@babel/core": "^7.9.0",
     "@babel/plugin-syntax-jsx": "^7.0.0",
-    "@mdx-js/mdx": "^2.3.0",
-    "@startupjs/babel-plugin-eliminator": "^0.60.0-canary.0",
-    "@startupjs/babel-plugin-startupjs-plugins": "^0.60.0-canary.1",
-    "@startupjs/server": "^0.60.0-canary.0",
+    "@mdx-js/mdx": "^3.0.0",
+    "@startupjs/babel-plugin-eliminator": "^0.60.0-canary.7",
+    "@startupjs/babel-plugin-startupjs-plugins": "^0.60.0-canary.7",
+    "@startupjs/server": "^0.60.0-canary.7",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
-    "babel-preset-startupjs": "^0.60.0-canary.0",
+    "babel-preset-startupjs": "^0.60.0-canary.17",
     "connect": "^3.7.0",
     "lodash": "^4.17.20",
-    "remark-gfm": "^1.0.0"
+    "remark-gfm": "4.0.1"
   },
   "peerDependencies": {
     "cssxjs": "*",
     "react-native-svg": "*"
   },
-  "gitHead": "302e7e8004b435ddf4310611d3b59247e4e3b89e"
+  "gitHead": "e4a20c7cab8953592198ab0f5157778b7bd06e35"
 }

package/lib/getMDXLoader.js

@@ -1,23 +0,0 @@
-const DEFAULT_MDX_RENDERER = `
-import { mdx } from '@mdx-js/react'
-`
-const remarkGfm = require('remark-gfm')
-
-module.exports = async function getMDXLoader () {
-  const mdx = await import('@mdx-js/mdx')
-
-  return (source) => {
-    source = mdx.compileSync(source, {
-      providerImportSource: '@startupjs/mdx/client/MDXProvider/index.js',
-      remarkPlugins: [remarkGfm]
-    })
-    source = DEFAULT_MDX_RENDERER + '\n' + source
-    // To make mdx works, we should remove somehow the \n character child
-    // from the children of MDXContent in the output source.
-    // MDX v2 has made some changes in how it handles newlines and whitespace
-    // compared to MDX v1. In MDX v1 newline are not inclided in the output,
-    // but in MDX v2 it included.
-    // console.log(source)
-    return source
-  }
-}

package/lib/replaceObserverLoader.js

@@ -1,128 +0,0 @@
-const OBSERVER_REGEX = /(^|\W)observer\(/
-const OBSERVER_REPLACE = 'observer.__wrapObserverMeta(observer.__makeObserver('
-const OPTIONS_ANCHORS = ['forwardRef:', 'suspenseProps:']
-
-// INFO:
-//
-// The problem seems to be with observer() creating an additional
-// wrapper react component to host Suspense and ContextMeta.
-// While it also makes the target Component observable at the
-// same time.
-//
-// Creation of an additional wrapper component with only one
-// function observer() seems to confuse Fast Refresh and it loses state
-// of such components.
-//
-// The temporary solution for this (until it is fixed in react-native)
-// is to separate observer() into 2 functions:
-//   1. observer.__wrapObserverMeta() -- wraps component into an
-//      additional component with Suspense and ContextMeta
-//   2. observer.__makeObserver() -- modifies component to become
-//      observable
-//
-// So the following transformation transforms code the following way:
-//   observer(App)
-//     V V V
-//   observer.__wrapObserverMeta(observer.__makeObserver(App))
-//
-// It's important to make this transformation as a separate step before
-// the usual babel transformation fires. Otherwise, if you put it
-// into a generic babel.config.js list of plugins, Fast Refresh
-// will still not properly work.
-//
-// It makes sense to only do this in development
-
-module.exports = function replaceObserverLoader (source) {
-  const match = source.match(OBSERVER_REGEX)
-  if (!match) return source
-  const matchIndex = match.index
-  const matchStr = match[0]
-  const matchLength = matchStr.length
-  let openBr = 1 // Count opened brackets, we start from one already opened
-  let lastCloseCurlyBrIndex
-  let lastOpenCurlyBrIndex
-
-  // TODO: Improve figuring out that we are actually in a comment.
-  //       It will bug out when someone is specifying 'http://'
-  //       and other places inside strings.
-
-  // // Track when we are inside a comment
-  // let inBlockComment = false
-  // let inLineComment = false
-
-  for (let i = matchIndex + matchLength; i < source.length; i++) {
-    const char = source.charAt(i)
-
-    // TODO: Improve comments. See comment above for details.
-
-    // // Handle comments (ignore any chars inside them)
-
-    // const prevChar = (i > 0 ? source.charAt(i - 1) : '')
-    // const lastTwoChars = `${prevChar}${char}`
-
-    // // - exit comment
-
-    // if (inBlockComment) {
-    //   if (lastTwoChars === '*/') inBlockComment = false
-    //   continue
-    // }
-
-    // if (inLineComment) {
-    //   if (char === '\n') inLineComment = false
-    //   continue
-    // }
-
-    // // - enter comment
-
-    // if (lastTwoChars === '/*') {
-    //   inBlockComment = true
-    //   continue
-    // }
-
-    // if (lastTwoChars === '//') {
-    //   inLineComment = true
-    //   continue
-    // }
-
-    // Brackets counting logic
-
-    switch (char) {
-      case ')':
-        --openBr
-        break
-      case '(':
-        ++openBr
-        break
-      case '{':
-        lastOpenCurlyBrIndex = i
-        break
-      case '}':
-        lastCloseCurlyBrIndex = i
-        break
-    }
-
-    if (openBr <= 0) {
-      let options = ''
-
-      if (lastOpenCurlyBrIndex && lastCloseCurlyBrIndex) {
-        const sourceBetweenCurlyBrackets =
-          source.slice(lastOpenCurlyBrIndex, lastCloseCurlyBrIndex + 1)
-
-        for (const anchor of OPTIONS_ANCHORS) {
-          if (sourceBetweenCurlyBrackets.includes(anchor)) {
-            options = sourceBetweenCurlyBrackets
-            break
-          }
-        }
-      }
-
-      if (options) options = ', ' + options
-
-      source = source.slice(0, i) + ')' + options + source.slice(i)
-      break
-    }
-  }
-
-  source = source.replace(OBSERVER_REGEX, '$1' + OBSERVER_REPLACE)
-  return replaceObserverLoader(source)
-}

package/lib/utils.js

@@ -1,12 +0,0 @@
-// 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)
-  )
-}