Experimental: Migrate to Rspack

CONTRIBUTING.md

@@ -2,13 +2,13 @@
 
 First off, thanks a lot for taking time to read this part. Extension.js' core phiolosophy is to make it very easy to develop browser extensions, and that includes the program that makes it happen as well. Hope this guide makes it very easy for you to contribute ;)
 
-Extension.js runs on top of webpack using custom plugins. The whole Extension.js program consists of three core modules.
+Extension.js runs on top of Rspack using custom plugins. The whole Extension.js program consists of three core modules.
 
 | Program   | Description                                                                                    |
 | --------- | ---------------------------------------------------------------------------------------------- |
 | `cli`     | The Command Line Interface that executes the Extension.js programs.                            |
 | `create`  | Create extensions from built-in templates. This is what runs when `extension create` is fired. |
-| `develop` | Wrapper around the webpack config that consists of the `dev`, `start`, and `build` commands.   |
+| `develop` | Wrapper around the rspack config that consists of the `dev`, `start`, and `build` commands.    |
 
 ## Installation
 

eslint.config.mjs

@@ -16,7 +16,7 @@ export default [
     ignores: [
       '__TEST__',
       '**/dist/',
-      '**/webpack.config.js',
+      '**/rspack.config.js',
       '**/postcss.config.js',
       '**/tailwind.config.js',
       '**/stylelint.config.json'

examples/content-preact/package.json

@@ -15,7 +15,6 @@
     "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.25.2",
     "typescript": "5.3.3"
   }
 }

examples/data.ts

@@ -21,15 +21,6 @@ const JS_TEMPLATES: Template[] = [
     configFiles: undefined
   },
   // {
-  //   name: 'config-babel',
-  //   uiContext: ['newTab'],
-  //   uiFramework: undefined,
-  //   css: 'css',
-  //   hasBackground: false,
-  //   hasEnv: false,
-  //   configFiles: ['babel.config.json']
-  // },
-  // {
   //   name: 'content-extension-config',
   //   uiContext: ['content'],
   //   uiFramework: 'react',

examples/new-preact/package.json

@@ -14,7 +14,6 @@
     "sakura.css": "^1.5.0"
   },
   "devDependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.25.2",
     "typescript": "5.3.3"
   }
 }

examples/types.ts

@@ -3,7 +3,6 @@ export type ConfigFiles =
   | 'postcss.config.js'
   | 'tailwind.config.js'
   | 'tsconfig.json'
-  | 'babel.config.js'
   | 'stylelint.config.json'
   | 'extension.config.js'
 

programs/develop/build.spec.ts

@@ -76,8 +76,8 @@ describe('extension build', () => {
         const postCssConfig = path.join(templatePath, 'postcss.config.js')
 
         // Dynamically mock the postcss.config.js file if it exists.
-        // Since the file is dynamically imported in the webpack config,
-        // we need to mock it before the webpack config is created.
+        // Since the file is dynamically imported in the Rspack config,
+        // we need to mock it before the Rspack config is created.
         if (fs.existsSync(postCssConfig)) {
           jest.mock(postCssConfig, () => jest.fn())
         }

programs/develop/commands/build.ts

@@ -7,9 +7,9 @@
 
 import fs from 'fs'
 import path from 'path'
-import webpack from 'webpack'
+import {rspack} from '@rspack/core'
 import {merge} from 'webpack-merge'
-import webpackConfig from '../webpack/webpack-config'
+import rspackConfig from '../webpack/rspack-config'
 import {getProjectPath} from './commands-lib/get-project-path'
 import * as messages from './commands-lib/messages'
 import {generateZip} from './commands-lib/generate-zip'
@@ -40,7 +40,7 @@ export async function extensionBuild(
 
   try {
     const browser = buildOptions?.browser || 'chrome'
-    const baseConfig = webpackConfig(projectPath, {
+    const baseConfig = rspackConfig(projectPath, {
       ...buildOptions,
       browser,
       mode: 'production'
@@ -60,7 +60,7 @@ export async function extensionBuild(
     })
 
     const compilerConfig = merge(userConfig)
-    const compiler = webpack(compilerConfig)
+    const compiler = rspack(compilerConfig)
 
     await new Promise<void>((resolve, reject) => {
       compiler.run(async (err, stats) => {
@@ -69,7 +69,7 @@ export async function extensionBuild(
           return reject(err)
         }
 
-        console.log(messages.buildWebpack(projectPath, stats, browser))
+        console.log(messages.buildRspack(projectPath, stats, browser))
 
         if (buildOptions?.zip || buildOptions?.zipSource) {
           await generateZip(projectPath, {...buildOptions, browser})

programs/develop/commands/commands-lib/config-types.ts

@@ -1,4 +1,4 @@
-import {Configuration} from 'webpack'
+import {Configuration} from '@rspack/core'
 
 export interface FileConfig {
   config: (config: Configuration) => Configuration

programs/develop/commands/commands-lib/extract-from-zip.ts

@@ -1,4 +1,3 @@
-import fs from 'fs/promises'
 import path from 'path'
 import axios from 'axios'
 import AdmZip from 'adm-zip'

programs/develop/commands/commands-lib/get-extension-config.ts

@@ -1,6 +1,6 @@
 import fs from 'fs'
 import path from 'path'
-import {Configuration} from 'webpack'
+import {Configuration} from '@rspack/core'
 import {FileConfig} from './config-types'
 import * as messages from './messages'
 

programs/develop/commands/commands-lib/messages.ts

@@ -1,6 +1,6 @@
 import path from 'path'
 import fs from 'fs'
-import {StatsAsset} from 'webpack'
+import {StatsAsset} from '@rspack/core'
 import {
   gray,
   red,
@@ -95,11 +95,11 @@ export function previewing(browser: DevOptions['browser']) {
   )} Previewing the extension on ${capitalizedBrowserName(browser)}...`
 }
 
-export function previewWebpack() {
+export function previewRspack() {
   return `${getLoggingPrefix('info')} Previewing the extension package...`
 }
 
-export function buildWebpack(
+export function buildRspack(
   projectDir: string,
   stats: any,
   browser: DevOptions['browser']

programs/develop/commands/preview.ts

@@ -7,9 +7,9 @@
 
 import fs from 'fs'
 import path from 'path'
-import webpack from 'webpack'
+import {rspack} from '@rspack/core'
 import {merge} from 'webpack-merge'
-import webpackConfig from '../webpack/webpack-config'
+import rspackConfig from '../webpack/rspack-config'
 import {getProjectPath} from './commands-lib/get-project-path'
 import * as messages from './commands-lib/messages'
 import {loadExtensionConfig} from './commands-lib/get-extension-config'
@@ -36,7 +36,7 @@ export async function extensionPreview(
 
   try {
     const browser = previewOptions.browser || 'chrome'
-    const baseConfig = webpackConfig(projectPath, {
+    const baseConfig = rspackConfig(projectPath, {
       ...previewOptions,
       browser,
       mode: 'production'
@@ -54,7 +54,7 @@ export async function extensionPreview(
       plugins: onlyBrowserRunners
     })
     const compilerConfig = merge(userConfig)
-    const compiler = webpack(compilerConfig)
+    const compiler = rspack(compilerConfig)
 
     compiler.run(async (err, stats) => {
       if (err) {

programs/develop/commands/start.ts

@@ -7,9 +7,9 @@
 
 import fs from 'fs'
 import path from 'path'
-import webpack from 'webpack'
+import {rspack} from '@rspack/core'
 import {merge} from 'webpack-merge'
-import webpackConfig from '../webpack/webpack-config'
+import rspackConfig from '../webpack/rspack-config'
 import {getProjectPath} from './commands-lib/get-project-path'
 import * as messages from './commands-lib/messages'
 import {loadExtensionConfig} from './commands-lib/get-extension-config'
@@ -40,7 +40,7 @@ export async function extensionStart(
 
   try {
     const browser = startOptions.browser || 'chrome'
-    const baseConfig = webpackConfig(projectPath, {
+    const baseConfig = rspackConfig(projectPath, {
       ...startOptions,
       browser,
       mode: 'production'
@@ -58,7 +58,7 @@ export async function extensionStart(
       plugins: allPluginsButReloader
     })
     const compilerConfig = merge(userConfig)
-    const compiler = webpack(compilerConfig)
+    const compiler = rspack(compilerConfig)
 
     compiler.run((err, stats) => {
       if (err) {