babel-preset-startupjs 0.59.0-canary.7 → 0.60.0-canary.0

package/index.js

@@ -1,264 +1,49 @@
-const stylusToCssLoader = require('@startupjs/bundler/lib/stylusToCssLoader.js')
-const { generateScopedNameFactory } = require('@startupjs/babel-plugin-react-css-modules/utils')
-const { LOCAL_IDENT_NAME } = require('./constants')
-const ASYNC = process.env.ASYNC
-const APP_ENV = process.env.APP_ENV
-const DEFAULT_MODE = 'react-native'
-
-const DIRECTORY_ALIASES = {
-  components: './components',
-  helpers: './helpers',
-  clientHelpers: './clientHelpers',
-  model: './model',
-  main: './main',
-  styles: './styles',
-  appConstants: './appConstants'
-}
-
-const basePlugins = ({ alias, observerCache, signals } = {}) => [
-  [require('@startupjs/babel-plugin-startupjs-utils'), {
-    observerCache,
-    signals
-  }],
-  [require('babel-plugin-module-resolver'), {
-    alias: {
-      ...DIRECTORY_ALIASES,
-      ...alias
-    }
-  }],
-  [require('@startupjs/babel-plugin-transform-react-pug'), {
-    classAttribute: 'styleName'
-  }],
-  [require('@startupjs/babel-plugin-react-pug-classnames'), {
-    classAttribute: 'styleName'
-  }],
-  [require('@babel/plugin-proposal-decorators'), { legacy: true }]
-]
-
-const dotenvPlugin = ({ production, mockBaseUrl, envName = APP_ENV } = {}) => {
-  if (!envName) {
-    envName = production ? 'production' : 'local'
-  }
-  const options = {
-    moduleName: '@env',
-    path: ['.env', `.env.${envName}`]
-  }
-  if (mockBaseUrl) {
-    options.override = {
-      BASE_URL: "typeof window !== 'undefined' && window.location && window.location.origin"
-    }
-  }
-  return [require('@startupjs/babel-plugin-dotenv'), options]
-}
-
-const i18nPlugin = (options) => {
-  return [require('@startupjs/babel-plugin-i18n-extract'), options]
-}
-
-const webReactCssModulesPlugin = ({ production } = {}) =>
-  ['@startupjs/babel-plugin-react-css-modules', {
-    handleMissingStyleName: 'ignore',
-    webpackHotModuleReloading: !production,
-    filetypes: {
-      '.styl': {}
-    },
-    transform: (src, filepath) => {
-      if (!/\.styl$/.test(filepath)) return src
-      return stylusToCssLoader.call({ resourcePath: filepath }, src)
-    },
-    generateScopedName
-  }]
-
-const nativeReactCssModulesPlatformExtensionsPlugin = () =>
-  [require('babel-plugin-react-native-platform-specific-extensions'), {
-    extensions: ['styl', 'css']
-  }]
-
-const nativeReactCssModulesPlugins = ({ platform, useImport } = {}) => [
-  [require('@startupjs/babel-plugin-rn-stylename-to-style'), {
-    extensions: ['styl', 'css'],
-    useImport
-  }],
-  [require('@startupjs/babel-plugin-rn-stylename-inline'), {
-    platform
-  }]
-]
-
-// react-native config
-
-const CONFIG_NATIVE_DEVELOPMENT = {
-  presets: [
-    [
-      require('./metroPresetWithTypescript'),
-      { useTransformReactJSXExperimental: true }
-    ]
-  ],
-  plugins: [
-    [require('@startupjs/babel-plugin-startupjs-debug')],
-    dotenvPlugin(),
-    nativeReactCssModulesPlatformExtensionsPlugin(),
-    ...nativeReactCssModulesPlugins({ useImport: false }),
-    i18nPlugin()
-  ]
-}
-
-const CONFIG_NATIVE_PRODUCTION = {
-  presets: [
-    [
-      require('./metroPresetWithTypescript'),
-      { useTransformReactJSXExperimental: true }
-    ]
-  ],
-  plugins: [
-    dotenvPlugin({ production: true }),
-    nativeReactCssModulesPlatformExtensionsPlugin(),
-    ...nativeReactCssModulesPlugins({ useImport: false }),
-    i18nPlugin()
-  ]
-}
-
-// web config for universal web/native project. Uses inline CSS styles, same as in react-native config,
-// therefore only the react-native rules can be used.
-
-const CONFIG_WEB_UNIVERSAL_DEVELOPMENT = {
-  presets: [
-    [require('./esNextPreset'), { debugJsx: true }]
-    // NOTE: If we start to face unknown errors in development or
-    //       want to sync the whole presets/plugins stack with RN,
-    //       just replace the optimized esNext preset above with the
-    //       regular metro preset below:
-    // [require('./metroPresetWithTypescript')]
-  ],
-  plugins: [
-    [require('@startupjs/babel-plugin-startupjs-debug')],
-    [require('react-refresh/babel'), { skipEnvCheck: true }],
-    dotenvPlugin({ mockBaseUrl: true }),
-    ...nativeReactCssModulesPlugins({ platform: 'web' }),
-    i18nPlugin({ collectTranslations: true })
-  ]
-}
-
-const CONFIG_WEB_UNIVERSAL_PRODUCTION = {
-  presets: [
-    [require('./metroPresetWithTypescript'), {
-      disableImportExportTransform: !!ASYNC
-    }]
-  ],
-  plugins: [
-    ASYNC && require('@startupjs/babel-plugin-startupjs'),
-    ASYNC && require('@startupjs/babel-plugin-import-to-react-lazy'),
-    dotenvPlugin({ production: true, mockBaseUrl: true }),
-    ...nativeReactCssModulesPlugins({ platform: 'web' }),
-    i18nPlugin({ collectTranslations: true })
-  ].filter(Boolean)
-}
-
-if (ASYNC) {
-  CONFIG_WEB_UNIVERSAL_PRODUCTION.sourceType = 'unambiguous'
-}
-
-// web config for a pure web project. Uses babel-plugin-react-css-modules for CSS which allows
-// to use the full browser CSS engine.
-
-const CONFIG_WEB_PURE_DEVELOPMENT = {
-  presets: [
-    [require('./esNextPreset'), { debugJsx: true }]
-    // NOTE: If we start to face unknown errors in development or
-    //       want to sync the whole presets/plugins stack with RN,
-    //       just replace the optimized esNext preset above with the
-    //       regular metro preset below:
-    // [require('./metroPresetWithTypescript')]
-  ],
-  plugins: [
-    [require('@startupjs/babel-plugin-startupjs-debug')],
-    [require('react-refresh/babel'), { skipEnvCheck: true }],
-    dotenvPlugin({ mockBaseUrl: true }),
-    webReactCssModulesPlugin(),
-    i18nPlugin({ collectTranslations: true })
-  ]
-}
-
-const CONFIG_WEB_PURE_PRODUCTION = {
-  presets: [
-    [require('./metroPresetWithTypescript'), {
-      disableImportExportTransform: !!ASYNC
+module.exports = (api, { platform, env } = {}) => {
+  return {
+    overrides: [{
+      test: isJsxSource,
+      plugins: [
+        // support JSX syntax
+        require('@babel/plugin-syntax-jsx')
+      ]
+    }, {
+      test: isTypeScriptSource,
+      plugins: [
+        // support TypeScript syntax
+        require('@babel/plugin-syntax-typescript')
+      ]
+    }, {
+      test: isTsxSource,
+      plugins: [
+        // support TypeScript + JSX syntax
+        [require('@babel/plugin-syntax-typescript'), {
+          isTSX: true
+        }]
+      ]
+    }, {
+      plugins: [
+        // debugging features
+        env === 'development' && require('@startupjs/babel-plugin-startupjs-debug'),
+        require('@startupjs/babel-plugin-i18n-extract')
+      ].filter(Boolean)
     }]
-  ],
-  plugins: [
-    dotenvPlugin({ production: true, mockBaseUrl: true }),
-    webReactCssModulesPlugin({ production: true }),
-    i18nPlugin({ collectTranslations: true })
-  ]
-}
-
-if (ASYNC) {
-  CONFIG_WEB_PURE_PRODUCTION.sourceType = 'unambiguous'
-}
-
-// node.js server config
-
-const CONFIG_SERVER = {
-  presets: [
-    require('./esNextPreset')
-    // NOTE: If we start to face unknown errors or
-    //       want to sync the whole presets/plugins stack with RN,
-    //       just replace the optimized esNext preset above with the
-    //       regular metro preset below:
-    // [require('./metroPresetWithTypescript')]
-  ],
-  plugins: []
+  }
 }
 
-module.exports = (api, options) => {
-  api.cache(true)
-
-  const { BABEL_ENV, NODE_ENV, MODE = DEFAULT_MODE } = process.env
-
-  // There is a bug in metro when BABEL_ENV is a string "undefined".
-  // We have to workaround it and use NODE_ENV.
-  const env = (BABEL_ENV !== 'undefined' && BABEL_ENV) || NODE_ENV
-
-  const { presets = [], plugins = [], ...extra } = getConfig(env, MODE)
-
-  return {
-    presets,
-    plugins: basePlugins(options).concat(plugins),
-    ...extra
-  }
+// all files which are not .ts or .tsx are considered to be pure JS with JSX support
+function isJsxSource (fileName) {
+  if (!fileName) return false
+  return !isTypeScriptSource(fileName) && !isTsxSource(fileName)
 }
 
-function getConfig (env, mode) {
-  if (env === 'development') {
-    return CONFIG_NATIVE_DEVELOPMENT
-  } else if (env === 'production') {
-    return CONFIG_NATIVE_PRODUCTION
-  } else if (env === 'server') {
-    return CONFIG_SERVER
-  } else if (env === 'web_development') {
-    if (mode === 'web') {
-      return CONFIG_WEB_PURE_DEVELOPMENT
-    } else {
-      return CONFIG_WEB_UNIVERSAL_DEVELOPMENT
-    }
-  } else if (env === 'web_production') {
-    if (mode === 'web') {
-      return CONFIG_WEB_PURE_PRODUCTION
-    } else {
-      return CONFIG_WEB_UNIVERSAL_PRODUCTION
-    }
-  } else {
-    return {}
-  }
+function isTypeScriptSource (fileName) {
+  if (!fileName) return false
+  return fileName.endsWith('.ts')
 }
 
-function generateScopedName (name, filename/* , css */) {
-  let hashSize = LOCAL_IDENT_NAME.match(/base64:(\d+)]/)
-  if (!hashSize) {
-    throw new Error(
-      'wrong LOCAL_IDENT_NAME. Change generateScopeName() accordingly'
-    )
-  }
-  hashSize = Number(hashSize[1])
-  if (new RegExp(`_.{${hashSize}}_$`).test(name)) return name
-  return generateScopedNameFactory(LOCAL_IDENT_NAME)(name, filename)
+// NOTE: .tsx is the default when fileName is not provided.
+//       This is because we want to support the most overarching syntax by default.
+function isTsxSource (fileName) {
+  if (!fileName) return true
+  return fileName.endsWith('.tsx')
 }

package/package.json

@@ -1,15 +1,10 @@
 {
   "name": "babel-preset-startupjs",
-  "version": "0.59.0-canary.7",
+  "version": "0.60.0-canary.0",
   "description": "Babel preset for compiling StartupJS app on server, web, native",
   "main": "index.js",
   "exports": {
-    ".": "./index.js",
-    "./index.js": "./index.js",
-    "./pure": "./pure.js",
-    "./pure.js": "./pure.js",
-    "./constants": "./constants.json",
-    "./constants.json": "./constants.json"
+    ".": "./index.js"
   },
   "publishConfig": {
     "access": "public"
@@ -17,38 +12,11 @@
   "license": "MIT",
   "dependencies": {
     "@babel/core": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-decorators": "^7.8.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
-    "@babel/plugin-syntax-flow": "^7.2.0",
     "@babel/plugin-syntax-jsx": "^7.0.0",
     "@babel/plugin-syntax-typescript": "^7.23.3",
-    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
-    "@babel/plugin-transform-function-name": "^7.0.0",
-    "@babel/plugin-transform-react-jsx": "^7.0.0",
-    "@babel/plugin-transform-react-jsx-self": "^7.0.0",
-    "@babel/plugin-transform-react-jsx-source": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.0.0",
-    "@babel/plugin-transform-typescript": "^7.5.0",
-    "@babel/runtime": "^7.9.0",
-    "@startupjs/babel-plugin-dotenv": "^0.59.0-canary.0",
-    "@startupjs/babel-plugin-i18n-extract": "^0.59.0-canary.0",
-    "@startupjs/babel-plugin-import-to-react-lazy": "^0.59.0-canary.0",
-    "@startupjs/babel-plugin-react-css-modules": "^6.5.4-1",
-    "@startupjs/babel-plugin-react-pug-classnames": "^0.59.0-canary.0",
-    "@startupjs/babel-plugin-rn-stylename-inline": "^0.59.0-canary.7",
-    "@startupjs/babel-plugin-rn-stylename-to-style": "^0.59.0-canary.0",
-    "@startupjs/babel-plugin-startupjs": "^0.59.0-canary.0",
-    "@startupjs/babel-plugin-startupjs-debug": "^0.59.0-canary.0",
-    "@startupjs/babel-plugin-startupjs-utils": "^0.59.0-canary.0",
-    "@startupjs/babel-plugin-transform-react-pug": "^7.0.1-0",
-    "@startupjs/bundler": "^0.59.0-canary.7",
-    "babel-plugin-module-resolver": "^5.0.0",
-    "babel-plugin-react-native-platform-specific-extensions": "^1.1.1",
-    "babel-plugin-react-native-web-pass-classname": "^0.2.1",
-    "metro-react-native-babel-preset": "^0.76.8",
-    "react-refresh": "^0.10.0"
+    "@startupjs/babel-plugin-i18n-extract": "^0.60.0-canary.0",
+    "@startupjs/babel-plugin-startupjs": "^0.60.0-canary.0",
+    "@startupjs/babel-plugin-startupjs-debug": "^0.60.0-canary.0"
   },
-  "gitHead": "836f06c70539b55aba18dac4b3f19739816d8489"
+  "gitHead": "4c5baa750402d0beb02921a38413620b348bd374"
 }

package/constants.json

@@ -1,3 +0,0 @@
-{
-  "LOCAL_IDENT_NAME": "[local]_[hash:base64:5]_"
-}

package/esNextPreset.js

@@ -1,79 +0,0 @@
-// This is the same preset as metro's, but everything which is supported
-// by Node 14+ and latest Chrome is stripped out.
-
-module.exports = ({ debugJsx }) => {
-  const defaultPlugins = [
-    [require('@babel/plugin-syntax-flow')],
-    [require('@babel/plugin-proposal-nullish-coalescing-operator')],
-    [require('@babel/plugin-proposal-optional-chaining'), { loose: true }],
-    [require('@babel/plugin-proposal-class-properties'), { loose: true }],
-    [require('@babel/plugin-transform-function-name')]
-  ]
-  const extraPlugins = [
-    [require('@babel/plugin-transform-react-jsx')],
-    ...(debugJsx
-      ? [
-          require('@babel/plugin-transform-react-jsx-source'),
-          require('@babel/plugin-transform-react-jsx-self')
-        ]
-      : []),
-    [
-      require('@babel/plugin-transform-runtime'),
-      {
-        helpers: true,
-        regenerator: true
-      }
-    ]
-  ]
-  return {
-    comments: false,
-    compact: true,
-    overrides: [
-      // the flow strip types plugin must go BEFORE class properties!
-      // there'll be a test case that fails if you don't.
-      {
-        plugins: [require('@babel/plugin-transform-flow-strip-types')]
-      },
-      {
-        plugins: defaultPlugins
-      },
-      {
-        test: isTypeScriptSource,
-        plugins: [
-          [
-            require('@babel/plugin-transform-typescript'),
-            {
-              isTSX: false,
-              allowNamespaces: true,
-              onlyRemoveTypeImports: true
-            }
-          ]
-        ]
-      },
-      {
-        test: isTSXSource,
-        plugins: [
-          [
-            require('@babel/plugin-transform-typescript'),
-            {
-              isTSX: true,
-              allowNamespaces: true,
-              onlyRemoveTypeImports: true
-            }
-          ]
-        ]
-      },
-      {
-        plugins: extraPlugins
-      }
-    ]
-  }
-}
-
-function isTypeScriptSource (fileName) {
-  return !!fileName && fileName.endsWith('.ts')
-}
-
-function isTSXSource (fileName) {
-  return !!fileName && fileName.endsWith('.tsx')
-}

package/metroPresetWithTypescript.js

@@ -1,18 +0,0 @@
-// metro has a hardcoded config for typescript babel plugin options.
-// Here we run the default metro preset and then find the typescript plugin and monkeypatch
-// its options to add the required 'onlyRemoveTypeImports: true' option.
-// Without this option pug-related and style imports are gonna get stripped by typescript.
-const metroPreset = require('metro-react-native-babel-preset')
-
-module.exports = (...args) => patchTypescriptOptions(metroPreset(...args))
-
-function patchTypescriptOptions (config) {
-  for (const override of config.overrides || []) {
-    for (const plugin of override.plugins || []) {
-      if (Array.isArray(plugin) && plugin[1] && plugin[1].isTSX != null) {
-        plugin[1].onlyRemoveTypeImports = true
-      }
-    }
-  }
-  return config
-}

package/pure.js

@@ -1,86 +0,0 @@
-module.exports = (api, { platform, env } = {}) => {
-  return {
-    overrides: [{
-      test: isJsxSource,
-      plugins: [
-        // support JSX syntax
-        require('@babel/plugin-syntax-jsx')
-      ]
-    }, {
-      test: isTypeScriptSource,
-      plugins: [
-        // support TypeScript syntax
-        require('@babel/plugin-syntax-typescript')
-      ]
-    }, {
-      test: isTsxSource,
-      plugins: [
-        // support TypeScript + JSX syntax
-        [require('@babel/plugin-syntax-typescript'), {
-          isTSX: true
-        }]
-      ]
-    }, {
-      plugins: [
-        // 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('@startupjs/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'
-        }],
-        // turning on experimental startupjs features
-        [require('@startupjs/babel-plugin-startupjs-utils'), {
-          observerCache: true,
-          signals: true
-        }],
-        // debugging features
-        env === 'development' && require('@startupjs/babel-plugin-startupjs-debug'),
-        // .env files support for client
-        [require('@startupjs/babel-plugin-dotenv'), (() => {
-          const envName = env === 'production' ? 'production' : 'local'
-          const options = {
-            moduleName: '@env',
-            path: ['.env', `.env.${envName}`]
-          }
-          if (platform === 'web') {
-            options.override = {
-              BASE_URL: "typeof window !== 'undefined' && window.location && window.location.origin"
-            }
-          }
-          return options
-        })()],
-        // CSS modules (separate .styl/.css file)
-        [require('@startupjs/babel-plugin-rn-stylename-to-style'), {
-          extensions: ['styl', 'css'],
-          useImport: true
-        }],
-        // inline CSS modules (styl`` in the same JSX file -- similar to how it is in Vue.js)
-        [require('@startupjs/babel-plugin-rn-stylename-inline'), {
-          platform
-        }],
-        require('@startupjs/babel-plugin-i18n-extract')
-      ].filter(Boolean)
-    }]
-  }
-}
-
-// all files which are not .ts or .tsx are considered to be pure JS with JSX support
-function isJsxSource (fileName) {
-  if (!fileName) return false
-  return !isTypeScriptSource(fileName) && !isTsxSource(fileName)
-}
-
-function isTypeScriptSource (fileName) {
-  if (!fileName) return false
-  return fileName.endsWith('.ts')
-}
-
-// NOTE: .tsx is the default when fileName is not provided.
-//       This is because we want to support the most overarching syntax by default.
-function isTsxSource (fileName) {
-  if (!fileName) return true
-  return fileName.endsWith('.tsx')
-}