@startupjs/bundler 0.59.0-canary.9 → 0.60.0-canary.1

package/lib/eliminatorLoader.js

@@ -29,7 +29,7 @@ module.exports = function eliminatorLoader (source) {
 
   let code = source
 
-  // STEP 1: convert pug to jsx and auto-load startupjs plugins
+  // Remove code related to other envs
   code = babel.transformSync(code, {
     filename,
     babelrc: false,
@@ -37,29 +37,16 @@ module.exports = function eliminatorLoader (source) {
     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('@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'
-      }],
+      [require('cssxjs/babel/plugin-react-pug'), { classAttribute: 'styleName' }],
+
+      // auto-load startupjs plugins
       // 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'), { useRequireContext }]
-    ]
-  }).code
+      [require('@startupjs/babel-plugin-startupjs-plugins'), { useRequireContext }],
 
-  // 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)
@@ -109,9 +96,9 @@ module.exports = function eliminatorLoader (source) {
                 functionName: 'aggregation',
                 magicImports: ['startupjs'],
                 requirements: {
+                  argumentsAmount: 1,
                   directNamedExportedAsConst: true
                 },
-                throwIfRequirementsNotMet: true, // TODO: remove this when the next transformation is implemented
                 replaceWith: {
                   newFunctionNameFromSameImport: '__aggregationHeader',
                   newCallArgumentsTemplate: `[
@@ -121,6 +108,37 @@ module.exports = function eliminatorLoader (source) {
                     }
                   ]`
                 }
+              }, {
+                // export default inside of aggregation() within a separate model/*.$$myAggregation.js files
+                // are replaced with aggregationHeader() calls.
+                // Filepath is stripped of the extensions and split into sections (by dots and slashes)
+                // 'name' is the last section.
+                // 'collection' is the section before it.
+                //
+                // Example:
+                //
+                //   // in model/games/$$active.js
+                //   export default aggregation(({ gameId }) => ({ gameId }))
+                //
+                // will be replaced with:
+                //
+                //   __aggregationHeader({ collection: 'games', name: '$$active' })
+                //
+                functionName: 'aggregation',
+                magicImports: ['startupjs'],
+                requirements: {
+                  argumentsAmount: 1,
+                  directDefaultExported: true
+                },
+                replaceWith: {
+                  newFunctionNameFromSameImport: '__aggregationHeader',
+                  newCallArgumentsTemplate: `[
+                    {
+                      collection: %%folderAndFilenameWithoutExtension%%.split(/[\\\\/\\.]/).at(-2),
+                      name: %%folderAndFilenameWithoutExtension%%.split(/[\\\\/\\.]/).at(-1)
+                    }
+                  ]`
+                }
               }, {
                 // TODO: this has to be implemented! It's not actually working yet.
 

package/lib/startupjsLoader.js

@@ -14,10 +14,11 @@ module.exports = function startupjsLoader (source) {
     babelrc: false,
     configFile: false,
     presets: [
-      [require('babel-preset-startupjs/pure'), {
+      [require('babel-preset-startupjs'), {
         platform,
         env
-      }]
+      }],
+      [require('cssxjs/babel'), { platform }]
     ]
   }).code
 }

package/metro-babel-transformer.js

@@ -1,6 +1,5 @@
-const platformSingleton = require('@startupjs/babel-plugin-rn-stylename-inline/platformSingleton')
-const stylusToCssLoader = require('./lib/stylusToCssLoader')
-const cssToReactNativeLoader = require('./lib/cssToReactNativeLoader')
+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')
@@ -13,12 +12,10 @@ module.exports.transform = async function startupjsMetroBabelTransform ({
 }) {
   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(stylusToCssLoader, src, filename, { platform })
     src = callLoader(cssToReactNativeLoader, src, filename)
   } else if (/\.css$/.test(filename)) {
     src = callLoader(cssToReactNativeLoader, src, filename)
@@ -38,7 +35,7 @@ module.exports.transform = async function startupjsMetroBabelTransform ({
       clientModel: true
     })
   }
-  if ((/\.mdx?$/.test(filename) || /\.[mc]?[jt]sx?$/.test(filename)) && /['"](?:startupjs|@env)['"]/.test(src)) {
+  if ((/\.mdx?$/.test(filename) || /\.[mc]?[jt]sx?$/.test(filename)) && /['"](?:startupjs)['"]/.test(src)) {
     src = callLoader(startupjsLoader, src, filename, { platform })
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs/bundler",
-  "version": "0.59.0-canary.9",
+  "version": "0.60.0-canary.1",
   "description": "Opinionated scripts and configs to develop a react-native-web project",
   "main": "index.js",
   "publishConfig": {
@@ -17,47 +17,21 @@
   "dependencies": {
     "@babel/core": "^7.9.0",
     "@babel/plugin-syntax-jsx": "^7.0.0",
-    "@babel/polyfill": "^7.8.0",
-    "@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.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-startupjs-plugins": "^0.59.0-canary.0",
-    "@startupjs/babel-plugin-transform-react-pug": "^7.0.1-0",
-    "@startupjs/css-to-react-native-transform": "^1.9.0-2",
-    "@startupjs/server": "^0.59.0-canary.9",
+    "@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",
     "@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-preset-startupjs": "^0.59.0-canary.9",
+    "babel-preset-startupjs": "^0.60.0-canary.0",
     "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",
-    "mini-css-extract-plugin": "^2.4.3",
-    "moment": "^2.0.0",
-    "moment-locales-webpack-plugin": "^1.0.7",
-    "postcss": "^8.3.11",
-    "postcss-loader": "^7.2.0",
-    "process": "^0.11.10",
-    "react-native-svg-transformer": "0.20.0",
-    "react-refresh": "^0.10.0",
-    "remark-gfm": "^1.0.0",
-    "style-loader": "^3.3.1",
-    "stylus": "0.54.7",
-    "stylus-loader": "^6.2.0",
-    "terser-webpack-plugin": "^5.2.4",
-    "webpack-node-externals": "^3.0.0"
+    "remark-gfm": "^1.0.0"
   },
   "peerDependencies": {
+    "cssxjs": "*",
     "react-native-svg": "*"
   },
-  "gitHead": "cdee72648548b574c838d13ff8cc3d6b0e0d429e"
+  "gitHead": "302e7e8004b435ddf4310611d3b59247e4e3b89e"
 }

package/buildOptions.json

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

package/helpers.js

@@ -1,4 +0,0 @@
-exports.getJsxRule = () => ({
-  test: /\.[mc]?[jt]sx?$/,
-  loader: 'babel-loader'
-})

package/lib/cssToReactNativeLoader.js

@@ -1,86 +0,0 @@
-// ref: https://github.com/kristerkari/react-native-css-transformer
-const css2rn = require('@startupjs/css-to-react-native-transform').default
-
-const EXPORT_REGEX = /:export\s*\{/
-
-module.exports = function cssToReactNative (source) {
-  source = escapeExport(source)
-  const cssObject = css2rn(source, { parseMediaQueries: true, parsePartSelectors: true })
-  for (const key in cssObject.__exportProps || {}) {
-    cssObject[key] = parseStylValue(cssObject.__exportProps[key])
-  }
-  // save hash to use with the caching system of @startupjs/cache
-  cssObject.__hash__ = simpleNumericHash(JSON.stringify(cssObject))
-  return 'module.exports = ' + JSON.stringify(cssObject)
-}
-
-function parseStylValue (value) {
-  if (typeof value !== 'string') return value
-  // strip single quotes (stylus adds it for the topmost value)
-  // and parens (stylus adds them for values in a hash)
-  // Instead of doing a simple regex replace for both beginning and end,
-  // we only find beginning chars and then cut string from both sides.
-  // This is needed to prevent false-replacing the paren at the end of
-  // values like 'rgba(...)'
-  if (/^['"(]/.test(value)) {
-    const wrapsLength = value.match(/^['"(]+/)[0].length
-    value = value.slice(wrapsLength).slice(0, -wrapsLength)
-  }
-  // hash
-  if (value.charAt(0) === '{') {
-    const hash = JSON.parse(value)
-    for (const key in hash) {
-      hash[key] = parseStylValue(hash[key])
-    }
-    return hash
-  } else if (!isNaN(parseFloat(value))) {
-    return parseFloat(value)
-  } else {
-    return value
-  }
-}
-
-// Process :export properties by wrapping their values in quotes
-function escapeExport (source) {
-  const match = source.match(EXPORT_REGEX)
-  if (!match) return source
-
-  // 1. find closing bracket of :export { ... }
-  const matchIndex = match.index
-  const matchStr = match[0]
-  const matchLength = matchStr.length
-  const start = matchIndex + matchLength
-  let openBr = 1 // Count opened brackets, we start from one already opened
-  let end
-
-  for (let i = start; i < source.length; i++) {
-    if (source.charAt(i) === '}') {
-      --openBr
-    } else if (source.charAt(i) === '{') {
-      ++openBr
-    }
-
-    if (openBr <= 0) {
-      end = i
-      break
-    }
-  }
-  if (!end) return source
-
-  // 2. escape all exported values
-  const properties = source
-    .slice(start, end)
-    .split(';')
-    .map(line => line.replace(/(:\s+)([^'"].*[^'"])$/, '$1\'$2\''))
-    .join(';')
-
-  source = source.slice(0, start) + properties + source.slice(end)
-
-  return source
-}
-
-// ref: https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0?permalink_comment_id=2694461#gistcomment-2694461
-function simpleNumericHash (s) {
-  for (var i = 0, h = 0; i < s.length; i++) h = Math.imul(31, h) + s.charCodeAt(i) | 0
-  return h
-}

package/lib/rnTransformer.js

@@ -1,42 +0,0 @@
-const upstreamTransformer = require('metro-react-native-babel-transformer')
-const svgTransformer = require('react-native-svg-transformer')
-const platformSingleton = require(
-  '@startupjs/babel-plugin-rn-stylename-inline/platformSingleton'
-)
-const stylusToCssLoader = require('./stylusToCssLoader')
-const cssToReactNativeLoader = require('./cssToReactNativeLoader')
-const mdxExamplesLoader = require('./mdxExamplesLoader')
-const getMDXLoader = require('./getMDXLoader')
-const eliminatorLoader = require('./eliminatorLoader')
-const callLoader = require('./callLoader')
-
-module.exports.transform = async function ({ src, filename, options = {} }) {
-  const { platform } = options
-  platformSingleton.value = platform
-
-  if (/\.styl$/.test(filename)) {
-    src = callLoader(stylusToCssLoader, src, filename)
-    src = callLoader(cssToReactNativeLoader, src, filename)
-    return upstreamTransformer.transform({ src, filename, options })
-  } else if (/\.css$/.test(filename)) {
-    src = callLoader(cssToReactNativeLoader, src, filename)
-    return upstreamTransformer.transform({ src, filename, options })
-  } else if (/\.svg$/.test(filename)) {
-    return svgTransformer.transform({ src, filename, options })
-  } else if (/(?:[./]plugin\.[mc]?[jt]sx?|startupjs\.config\.js)$/.test(filename)) {
-    src = callLoader(eliminatorLoader, src, filename, { envs: ['client', 'isomorphic'] })
-    return upstreamTransformer.transform({ src, filename, options })
-  } else if (/\.[cm]?jsx?$/.test(filename) && /['"]startupjs['"]/.test(src)) {
-    // TODO: This particular check and transform is probably not needed anymore since default one
-    //       will handle all .js files anyways no matter whether 'startupjs' library
-    //       is used inside or not.
-    return upstreamTransformer.transform({ src, filename, options })
-  } else if (/\.mdx?$/.test(filename)) {
-    const mdxLoader = await getMDXLoader()
-    src = callLoader(mdxExamplesLoader, src, filename)
-    src = callLoader(mdxLoader, src, filename)
-    return upstreamTransformer.transform({ src, filename, options })
-  } else {
-    return upstreamTransformer.transform({ src, filename, options })
-  }
-}

package/lib/stylusToCssLoader.js

@@ -1,70 +0,0 @@
-// 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'
-)
-const { existsSync } = require('fs')
-const { join } = require('path')
-const stylus = require('stylus')
-
-const PROJECT_STYLES_PATH = join(process.cwd(), 'styles/index.styl')
-let UI_STYLES_PATH
-
-function renderToCSS (src, filename) {
-  let compiled
-  const compiler = stylus(src)
-  const platform = platformSingleton.value
-  compiler.set('filename', filename)
-
-  if (platform) {
-    compiler.define('$PLATFORM', platform)
-    compiler.define(`__${platform.toUpperCase()}__`, true)
-  }
-
-  if (checkUiStylesExist()) {
-    compiler.import(UI_STYLES_PATH)
-  }
-
-  // TODO: Make this a setting
-  if (checkProjectStylesExist()) {
-    compiler.import(PROJECT_STYLES_PATH)
-  }
-
-  compiler.render(function (err, res) {
-    if (err) {
-      throw new Error(err)
-    }
-    compiled = res
-  })
-
-  return compiled
-}
-
-module.exports = function stylusToReactNative (source) {
-  return renderToCSS(source, this.resourcePath)
-}
-
-// check if @startupjs/ui is being used to load styles file from it, cache result for 5 seconds
-let uiStylesExist
-let uiStylesLastChecked = 0
-function checkUiStylesExist () {
-  if (uiStylesLastChecked + 5000 > Date.now()) return uiStylesExist
-  uiStylesLastChecked = Date.now()
-  try {
-    UI_STYLES_PATH = join(require.resolve('@startupjs/ui'), '../styles/index.styl')
-    uiStylesExist = existsSync(UI_STYLES_PATH)
-  } catch {
-    uiStylesExist = false
-  }
-  return uiStylesExist
-}
-
-// check if project styles file exist, cache result for 5 seconds
-let projectStylesExist
-let projectStylesLastChecked = 0
-function checkProjectStylesExist () {
-  if (projectStylesLastChecked + 5000 > Date.now()) return projectStylesExist
-  projectStylesLastChecked = Date.now()
-  projectStylesExist = existsSync(PROJECT_STYLES_PATH)
-  return projectStylesExist
-}