@startupjs/bundler 0.40.0 → 0.40.9

package/lib/mdxExamplesLoader.js

@@ -1,5 +1,5 @@
 const REGEX = /(```jsx +example[\s\S]*?\n)([\s\S]*?)(```)/g
-const PURE_REGEX = /(```jsx) +pure-example([\s\S]*?)(```)/g
+const PURE_REGEX = /(```jsx +pure-example[\s\S]*?\n)([\s\S]*?)(```)/g
 
 const EXAMPLE_FLAGS = [
   'noscroll'
@@ -44,11 +44,21 @@ function replacer (match, p1, p2, p3) {
 }
 
 function pureReplacer (match, p1, p2, p3) {
+  const parts = p1.trim().split(' ')
+  const sectionParts = []
+
+  for (const part of parts) {
+    if (EXAMPLE_FLAGS.includes(part)) {
+      sectionParts.push(part)
+      continue
+    }
+  }
+
   p2 = p2.trim().replace(/\n+/g, '\n')
   if (/^</.test(p2)) p2 = 'return (<React.Fragment>' + p2 + '</React.Fragment>)'
 
   return (
-    `<section>
+    `<section ${sectionParts.join(' ')}>
       <React.Fragment>
         {React.createElement(__observer(function Example () {
           ${p2}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs/bundler",
-  "version": "0.40.0",
+  "version": "0.40.9",
   "description": "Opinionated scripts and configs to develop a react-native-web project",
   "main": "index.js",
   "publishConfig": {
@@ -16,43 +16,38 @@
   "license": "MIT",
   "dependencies": {
     "@babel/polyfill": "^7.8.0",
-    "@mdx-js/loader": "^1.5.8",
-    "@mdx-js/mdx": "^1.5.8",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.3.2",
+    "@mdx-js/loader": "^1.6.22",
+    "@mdx-js/mdx": "^1.6.22",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
     "@startupjs/css-to-react-native-transform": "^1.9.0-1",
     "@startupjs/plugin": "^0.40.0",
-    "@svgr/webpack": "5.2.0",
-    "assets-webpack-plugin": "^3.9.10",
-    "autoprefixer": "^9.6.0",
-    "babel-loader": "^8.0.6",
-    "babel-preset-startupjs": "^0.40.0",
-    "css-loader": "^1.0.0",
-    "file-loader": "^2.0.0",
-    "friendly-errors-webpack-plugin": "^1.7.0",
+    "@svgr/webpack": "~5.5.0",
+    "assets-webpack-plugin": "^7.1.1",
+    "autoprefixer": "^10.4.0",
+    "babel-loader": "^8.2.3",
+    "babel-preset-startupjs": "^0.40.9",
+    "css-loader": "^6.5.0",
+    "css-minimizer-webpack-plugin": "^3.1.1",
+    "file-loader": "^6.2.0",
     "generic-names": "^1.0.3",
     "lodash": "^4.17.20",
     "metro-config": "*",
-    "mini-css-extract-plugin": "^0.8.0",
+    "mini-css-extract-plugin": "^2.4.3",
     "moment": "^2.0.0",
     "moment-locales-webpack-plugin": "^1.0.7",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "postcss-loader": "^3.0.0",
-    "progress-bar-webpack-plugin": "^2.1.0",
+    "postcss": "^8.3.11",
+    "postcss-loader": "^6.2.0",
+    "process": "^0.11.10",
     "react-native-svg-transformer": "0.14.3",
-    "style-loader": "^0.21.0",
+    "react-refresh": "^0.10.0",
+    "style-loader": "^3.3.1",
     "stylus": "0.54.7",
-    "stylus-loader": "^3.0.2",
-    "terser-webpack-plugin": "^1.1.0",
-    "webpack-node-externals": "^1.7.2"
+    "stylus-loader": "^6.2.0",
+    "terser-webpack-plugin": "^5.2.4",
+    "webpack-node-externals": "^3.0.0"
   },
   "peerDependencies": {
-    "react-native-svg": ">= 12.1.0",
-    "vite-plugin-startupjs": "*"
+    "react-native-svg": ">= 12.1.0"
   },
-  "peerDependenciesMeta": {
-    "vite-plugin-startupjs": {
-      "optional": true
-    }
-  },
-  "gitHead": "fb84b4d0f93a8fae4c84d3f7d2d4c95772b1fb88"
+  "gitHead": "57cbf2c11608c6a4d022b87e1f78cf9568a4c07f"
 }

package/webpack.server.config.js

@@ -2,7 +2,6 @@ const { getPluginConfigs } = require('@startupjs/plugin/manager.cjs')
 const pickBy = require('lodash/pickBy')
 const path = require('path')
 const nodeExternals = require('webpack-node-externals')
-const ProgressBarPlugin = require('progress-bar-webpack-plugin')
 const PROD = !process.env.WEBPACK_DEV
 const BUILD_DIR = '/build/'
 const BUILD_PATH = path.join(process.cwd(), BUILD_DIR)
@@ -33,10 +32,10 @@ module.exports = function getConfig (env, {
     return new RegExp('^' + moduleName + '($|/)')
   })
   return pickBy({
-    target: 'node', // in order to ignore built-in modules like path, fs, etc.
-    externals: [nodeExternals({
+    externalsPresets: { node: true }, // in order to ignore built-in modules like path, fs, etc.
+    externals: [nodeExternals({ // in order to ignore all modules in node_modules folder
       modulesDir,
-      whitelist: forceCompileModules
+      allowlist: forceCompileModules
     })], // in order to ignore all modules in node_modules folder
     mode: PROD ? 'production' : 'development',
     devtool: 'source-map',
@@ -44,9 +43,9 @@ module.exports = function getConfig (env, {
       server: ['@babel/polyfill', './server.js']
     },
     plugins: [
-      new ProgressBarPlugin({
-        format: '\u001b[1m\u001b[32m:percent\u001b[0m (:elapsed seconds)'
-      })
+      // TODO: Reenable progress plugin if the following issue gets fixed:
+      //       https://github.com/open-cli-tools/concurrently/issues/85
+      // new webpack.ProgressPlugin()
     ],
     output: {
       path: BUILD_PATH,
@@ -56,6 +55,9 @@ module.exports = function getConfig (env, {
       rules: [
         {
           test: /\.[cm]?[jt]sx?$/,
+          resolve: {
+            fullySpecified: false
+          },
           loader: 'babel-loader'
         }
       ]

package/webpack.web.config.js

@@ -4,15 +4,12 @@ const pick = require('lodash/pick')
 const fs = require('fs')
 const path = require('path')
 const AssetsPlugin = require('assets-webpack-plugin')
-const ProgressBarPlugin = require('progress-bar-webpack-plugin')
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin')
-const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 const { LOCAL_IDENT_NAME } = require('babel-preset-startupjs/constants')
 const autoprefixer = require('autoprefixer')
-const VERBOSE = process.env.VERBOSE
 const DEV_PORT = ~~process.env.DEV_PORT || 3010
 const PROD = !process.env.WEBPACK_DEV
 const STYLES_PATH = path.join(process.cwd(), '/styles/index.styl')
@@ -67,14 +64,30 @@ module.exports = function getConfig (env, {
     entry: {
       [BUNDLE_NAME]: DEFAULT_ENTRIES.concat(['./index.web.js'])
     },
+    cache: !PROD && {
+      type: 'filesystem',
+      memoryCacheUnaffected: true,
+      compression: 'brotli'
+    },
+    snapshot: !PROD && {
+      // By default it's ['./node_modules'] which prevents us from updating
+      // node_modules directly. We do it pretty often though, so that's why
+      // we override managedPaths to an empty array here.
+      //
+      // TODO: Think whether it makes more sense to have node_modules
+      //       be ignored by default but provide an additional option
+      //       when you don't want to ignore them.
+      managedPaths: []
+    },
+    experiments: !PROD && {
+      cacheUnaffected: true
+    },
     optimization: (PROD || ASYNC) && pickBy({
       minimizer: PROD && [
         new TerserPlugin({
-          cache: false,
-          parallel: true,
-          sourceMap: false // set to true if you want JS source maps
+          parallel: true
         }),
-        new OptimizeCSSAssetsPlugin({})
+        new CssMinimizerPlugin()
       ],
       splitChunks: ASYNC && {
         maxInitialRequests: Infinity,
@@ -142,7 +155,9 @@ module.exports = function getConfig (env, {
       }
     }, Boolean),
     plugins: [
-      !VERBOSE && !PROD && new FriendlyErrorsWebpackPlugin(),
+      // TODO: Reenable progress plugin if the following issue gets fixed:
+      //       https://github.com/open-cli-tools/concurrently/issues/85
+      // new webpack.ProgressPlugin(),
       new MomentLocalesPlugin(), // strip all locales except 'en'
       !PROD && new ReactRefreshWebpackPlugin({ forceEnable: true, overlay: { sockPort: DEV_PORT } }),
       PROD && new MiniCssExtractPlugin({
@@ -154,11 +169,12 @@ module.exports = function getConfig (env, {
         fullPath: false,
         path: BUILD_PATH
       }),
-      new ProgressBarPlugin({
-        format: '\u001b[1m\u001b[32m:percent\u001b[0m (:elapsed seconds)'
-      }),
       new webpack.DefinePlugin({
-        __DEV__: !PROD
+        __DEV__: !PROD,
+        global: 'window'
+      }),
+      new webpack.ProvidePlugin({
+        process: 'process/browser.js'
       })
     ].filter(Boolean),
     output: {
@@ -170,6 +186,9 @@ module.exports = function getConfig (env, {
       rules: [
         {
           test: getJsxRule().test,
+          resolve: {
+            fullySpecified: false
+          },
           exclude: /node_modules/,
           use: [
             pick(getJsxRule(), ['loader', 'options']),
@@ -180,6 +199,9 @@ module.exports = function getConfig (env, {
         },
         {
           test: getJsxRule().test,
+          resolve: {
+            fullySpecified: false
+          },
           include: new RegExp(`node_modules/(?:react-native-(?!web)|${forceCompileModules.join('|')})`),
           use: [
             pick(getJsxRule(), ['loader', 'options']),
@@ -228,8 +250,9 @@ module.exports = function getConfig (env, {
             {
               loader: 'css-loader',
               options: {
-                modules: true,
-                localIdentName: LOCAL_IDENT_NAME
+                modules: {
+                  localIdentName: LOCAL_IDENT_NAME
+                }
               }
             },
             {
@@ -241,10 +264,12 @@ module.exports = function getConfig (env, {
             {
               loader: 'stylus-loader',
               options: {
-                use: [],
-                import: fs.existsSync(STYLES_PATH) ? [STYLES_PATH] : [],
-                define: {
-                  __WEB__: true
+                stylusOptions: {
+                  use: [],
+                  import: fs.existsSync(STYLES_PATH) ? [STYLES_PATH] : [],
+                  define: {
+                    __WEB__: true
+                  }
                 }
               }
             }
@@ -271,8 +296,9 @@ module.exports = function getConfig (env, {
             {
               loader: 'css-loader',
               options: {
-                modules: true,
-                localIdentName: LOCAL_IDENT_NAME
+                modules: {
+                  localIdentName: LOCAL_IDENT_NAME
+                }
               }
             }
           ] : [
@@ -300,7 +326,8 @@ module.exports = function getConfig (env, {
     resolve: {
       alias: {
         ...DEFAULT_ALIAS,
-        ...alias
+        ...alias,
+        process: 'process/browser.js'
       },
       extensions: EXTENSIONS,
       mainFields: ['jsnext:main', 'browser', 'main']
@@ -312,7 +339,9 @@ module.exports = function getConfig (env, {
       headers: {
         'Access-Control-Allow-Origin': '*'
       },
-      publicPath: '/build/client/'
+      devMiddleware: {
+        publicPath: '/build/client/'
+      }
     }
   }, Boolean)
 }

package/vite.config.js

@@ -1,25 +0,0 @@
-// @ts-check
-const startupjsPlugin = require('vite-plugin-startupjs')
-const reactPlugin = require('vite-plugin-startupjs/react')
-
-/**
- * @type { import('vite').UserConfig }
- */
-const config = {
-  jsx: 'react',
-  https: true,
-  plugins: [startupjsPlugin, reactPlugin],
-  alias: {},
-  optimizeDeps: {
-    include: [
-      ...startupjsPlugin.optimizeDeps.include
-    ],
-    exclude: [
-      ...startupjsPlugin.optimizeDeps.exclude
-    ],
-    link: [
-    ]
-  }
-}
-
-module.exports = config