feat(rspack): migrate builtins to new plugin interface

release-npm

README.md

@@ -100,6 +100,7 @@ a `papua` property to your `package.json` with the following options available:
     entry: { main: './index.js', separate: ['./chunk.js', 'second.js'] },
     // Public path where the files are served from, default '.'.
     publicPath: '/app',
+    publicPath: '/', // Enables SPA rewrites to index.html for local development.
     // App title used in the template.
     title: 'My papua App',
     // Configure html file to be generated.

configuration/rspack-builtins.ts → configuration/rspack-plugins.ts

@@ -1,7 +1,16 @@
 import { basename, join, relative } from 'path'
 import { cpSync, existsSync } from 'fs'
 import { deepmerge } from 'deepmerge-ts'
-import { RspackOptions } from '@rspack/core'
+import {
+  RspackOptions,
+  Plugins,
+  RspackPluginInstance,
+  DefinePlugin,
+  HtmlRspackPlugin,
+  CopyRspackPlugin,
+} from '@rspack/core'
+import TypeScriptWebpackPlugin from 'fork-ts-checker-webpack-plugin'
+import { InjectManifestPlugin } from 'inject-manifest-plugin'
 import { options } from '../utility/options'
 import { getPluginBasePath, getProjectBasePath } from '../utility/path'
 import type { HtmlOptions, CopyOptions } from '../types'
@@ -28,7 +37,7 @@ const faviconPath = (icon: boolean | string) => {
       if (!customIconPath.includes(getProjectBasePath())) {
         log(
           `icon "${icon}" is located outside the project "${getProjectBasePath()}" and will be copied to the root.`,
-          'warning'
+          'warning',
         )
 
         const iconFileName = basename(customIconPath)
@@ -49,6 +58,16 @@ const faviconPath = (icon: boolean | string) => {
   return path && relative(getProjectBasePath(), path)
 }
 
+const getCopyPlugin = () => {
+  const result: CopyOptions = { patterns: [] }
+
+  if (existsSync(join(process.cwd(), 'public'))) {
+    result.patterns.push({ from: 'public', globOptions: { ignore: ['**/.DS_Store'] } })
+  }
+
+  return result
+}
+
 export const htmlPlugin = (development: boolean, inputs?: boolean | HtmlOptions) => {
   const { html, icon, title, publicPath } = options()
   let template = join(getPluginBasePath(), 'configuration/template.html')
@@ -84,29 +103,43 @@ export const htmlPlugin = (development: boolean, inputs?: boolean | HtmlOptions)
   return htmlOptions
 }
 
-const getCopyPlugin = () => {
-  const result: CopyOptions = { patterns: [] }
+export const getPlugins = (development: boolean, publicPath: string): RspackOptions['plugins'] => {
+  const plugins: Plugins = []
+  const pluginOptions = options()
 
-  if (existsSync(join(process.cwd(), 'public'))) {
-    result.patterns.push({ from: 'public', globOptions: { ignore: ['**/.DS_Store'] } })
+  if (!development && pluginOptions.typescript) {
+    plugins.push(new TypeScriptWebpackPlugin() as unknown as RspackPluginInstance)
   }
 
-  return result
-}
+  plugins.push(
+    new DefinePlugin({
+      'process.env.PUBLIC_URL': JSON.stringify(publicPath),
+      'process.env.NODE_ENV': development ? '"development"' : '"production"',
+    }),
+  )
+
+  plugins.push(new CopyRspackPlugin(getCopyPlugin()))
 
-export const getBuiltins = (
-  development: boolean,
-  publicPath: string
-): RspackOptions['builtins'] => ({
-  define: {
-    'process.env.PUBLIC_URL': JSON.stringify(publicPath),
-    'process.env.NODE_ENV': development ? '"development"' : '"production"',
-  },
-  html: options().html ? [htmlPlugin(development, options().html)] : [],
-  copy: getCopyPlugin(),
-  presetEnv: {
-    mode: 'entry',
-    targets:
-      options().esVersion !== 'browserslist' ? ['last 3 versions', '> 1%', 'not dead'] : undefined,
-  },
-})
+  if (pluginOptions.html) {
+    plugins.push(new HtmlRspackPlugin(htmlPlugin(development, options().html)))
+  }
+
+  if (!development && pluginOptions.injectManifest) {
+    const serviceWorkerFileName =
+      pluginOptions.injectManifest.file ??
+      `./service-worker.${pluginOptions.typescript ? 'ts' : 'js'}`
+    const serviceWorkerSourcePath = join(getProjectBasePath(), serviceWorkerFileName)
+
+    if (existsSync(serviceWorkerSourcePath)) {
+      plugins.push(
+        new InjectManifestPlugin({
+          file: serviceWorkerFileName,
+          removeHash: true,
+          ...pluginOptions.injectManifest,
+        }),
+      )
+    }
+  }
+
+  return plugins
+}

configuration/rspack.ts

@@ -1,43 +1,12 @@
-import { existsSync } from 'fs'
 import { resolve, join } from 'path'
-import { RspackOptions, Plugins, RspackPluginInstance } from '@rspack/core'
+import { RspackOptions } from '@rspack/core'
 import urlJoin from 'url-join'
-import TypeScriptWebpackPlugin from 'fork-ts-checker-webpack-plugin'
-import { InjectManifestPlugin } from 'inject-manifest-plugin'
 import { options } from '../utility/options'
 import { getProjectBasePath } from '../utility/path'
-import { getBuiltins } from './rspack-builtins'
+import { getPlugins } from './rspack-plugins'
 
 const root = (folder: string) => resolve(process.cwd(), folder)
 
-const getPlugins = (development: boolean) => {
-  const plugins: Plugins = []
-  const pluginOptions = options()
-
-  if (!development && pluginOptions.typescript) {
-    plugins.push(new TypeScriptWebpackPlugin() as unknown as RspackPluginInstance)
-  }
-
-  if (!development && pluginOptions.injectManifest) {
-    const serviceWorkerFileName =
-      pluginOptions.injectManifest.file ??
-      `./service-worker.${pluginOptions.typescript ? 'ts' : 'js'}`
-    const serviceWorkerSourcePath = join(getProjectBasePath(), serviceWorkerFileName)
-
-    if (existsSync(serviceWorkerSourcePath)) {
-      plugins.push(
-        new InjectManifestPlugin({
-          file: serviceWorkerFileName,
-          removeHash: true,
-          ...pluginOptions.injectManifest,
-        })
-      )
-    }
-  }
-
-  return plugins
-}
-
 const getRoots = () => {
   const paths = []
 
@@ -105,7 +74,7 @@ export default (development: boolean): RspackOptions => ({
       development || !options().hash ? '[path][name][ext][query]' : '[hash][ext][query]',
   },
   devtool: getSourceMap(development),
-  plugins: getPlugins(development),
+  plugins: getPlugins(development, getPublicPath()),
   resolve: {
     modules: getRoots(),
   },
@@ -132,5 +101,13 @@ export default (development: boolean): RspackOptions => ({
       },
     ],
   },
-  builtins: getBuiltins(development, getPublicPath()),
+  builtins: {
+    presetEnv: {
+      mode: 'entry',
+      targets:
+        options().esVersion !== 'browserslist'
+          ? ['last 3 versions', '> 1%', 'not dead']
+          : undefined,
+    },
+  },
 })

package.json

@@ -29,43 +29,43 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/eslint-parser": "^7.22.15",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
+    "@babel/core": "^7.23.3",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
     "@manypkg/find-root": "^2.2.1",
     "@npmcli/map-workspaces": "^3.0.4",
-    "@rspack/core": "^0.3.6",
-    "@rspack/dev-server": "^0.3.6",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
+    "@rspack/core": "^0.3.11",
+    "@rspack/dev-server": "^0.3.11",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
     "ajv": "^8.12.0",
     "chalk": "^5.3.0",
     "commander": "^11.1.0",
     "css-loader": "^6.8.1",
     "deepmerge-ts": "^5.1.0",
     "ejs": "^3.1.9",
-    "eslint": "^8.51.0",
+    "eslint": "^8.53.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-chai-friendly": "^0.7.2",
     "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unused-imports": "^3.0.0",
-    "fast-glob": "^3.3.1",
+    "fast-glob": "^3.3.2",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^9.0.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
     "get-port": "^7.0.0",
     "global-dirs": "^3.0.1",
-    "inject-manifest-plugin": "^0.3.3",
+    "inject-manifest-plugin": "^0.3.4",
     "lodash.isplainobject": "^4.0.6",
     "logua": "^3.0.2",
-    "node-html-parser": "^6.1.10",
+    "node-html-parser": "^6.1.11",
     "open": "^9.1.0",
     "p-each-series": "^3.0.0",
     "pakag": "^3.1.1",
@@ -79,15 +79,15 @@
     "serve-handler": "^6.1.5",
     "skip-local-postinstall": "^2.0.4",
     "style-loader": "^3.3.3",
-    "stylelint": "^15.10.3",
+    "stylelint": "^15.11.0",
     "stylelint-config-recommended": "^13.0.0",
     "typescript": "^5.2.2",
     "url-join": "^5.0.0"
   },
   "devDependencies": {
-    "@types/node": "^20.8.6",
-    "@types/serve-handler": "^6.1.2",
-    "cypress": "^13.3.1",
+    "@types/node": "^20.9.0",
+    "@types/serve-handler": "^6.1.4",
+    "cypress": "^13.5.0",
     "jest-fixture": "^4.1.0",
     "padua": "^2.0.6",
     "react": "^18.2.0",

template/default/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
     "papua": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

template/pwa/package.json

@@ -4,12 +4,12 @@
     "title": "Progressive Web App"
   },
   "dependencies": {
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@types/url-join": "^4.0.1",
-    "mobx": "^6.10.2",
-    "mobx-react-lite": "^4.0.4",
-    "papua": "^5.6.2",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@types/url-join": "^4.0.3",
+    "mobx": "^6.11.0",
+    "mobx-react-lite": "^4.0.5",
+    "papua": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "url-join": "^5.0.0",

template/serverless/package.json

@@ -13,6 +13,6 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "vercel": "^32.2.0"
+    "vercel": "^32.5.3"
   }
 }

template/website/package.json

@@ -1,10 +1,10 @@
 {
   "dependencies": {
     "@stitches/react": "^1.2.8",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "mobx": "^6.10.2",
-    "mobx-react-lite": "^4.0.4",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "mobx": "^6.11.0",
+    "mobx-react-lite": "^4.0.5",
     "papua": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"