Migrate to rspack

.eslintignore

@@ -43,4 +43,19 @@ __tests__
 **/copyStylelintConfig.js
 **/content.tsx
 **/content.tsx
-programs/create/templates/**
+programs/create/templates/**
+packages/webpack-target-webextension/tests
+programs/develop/integration-configs/stylelint.config.js
+**/tailwind.config.js
+programs/cli/jest.config.js
+programs/create/copyTemplates.js
+packages/webpack-target-webextension/*
+packages/run-firefox-addon/fixtures/*
+packages/run-firefox-addon/copyExtensions.js
+packages/run-chrome-extension/fixtures/*
+packages/run-chrome-extension/copyExtensions.js
+packages/run-edge-extension/fixtures/*
+packages/run-edge-extension/copyExtensions.js
+/**/jest.config.js
+**/manager-extension/*
+**/reload-extension/*

CONTRIBUTING.md

@@ -3,7 +3,7 @@
 `Extension.js` is a monorepo consisting of multiple programs and packages.
 
 - Programs: Each CLI command (including the CLI itself) is a program.
-- Packages: Helper libraries and built-in webpack plugins.
+- Packages: Helper libraries and built-in rspack plugins.
 
 ## Monorepo Packages
 
@@ -30,12 +30,12 @@
 
 Extension.js includes several command line programs, each serving a specific purpose in the extension development lifecycle:
 
-| Program   | Description                                                                                  |
-| --------- | -------------------------------------------------------------------------------------------- |
-| `cli`     | The Command Line Interface that executes the Extension.js programs.                          |
-| `create`  | Create extensions from built-in templates.                                                   |
-| `develop` | Wrapper around the webpack config that consists of the `dev`, `start`, and `build` commands. |
-| `publish` | This is empty for now.                                                                       |
+| Program   | Description                                                                                 |
+| --------- | ------------------------------------------------------------------------------------------- |
+| `cli`     | The Command Line Interface that executes the Extension.js programs.                         |
+| `create`  | Create extensions from built-in templates.                                                  |
+| `develop` | Wrapper around the rspack config that consists of the `dev`, `start`, and `build` commands. |
+| `publish` | This is empty for now.                                                                      |
 
 ## Installation
 

packages/browser-extension-manifest-fields/helpers/getHtmlFileResources.ts

@@ -99,7 +99,7 @@ export default function getHtmlResources(htmlFilePath: string) {
     return {
       // Assets from HTML pages to copy to the outputFilePath path
       css: [...headAssets.css, ...bodyAssets.css],
-      // Assets frorm HTML pages to use as webpack entries
+      // Assets frorm HTML pages to use as rspack entries
       js: [...headAssets.js, ...bodyAssets.js],
       // Assets frorm HTML pages to copy to the outputFilePath path
       static: [...headAssets.static, ...bodyAssets.static],

packages/common-errors-plugin/module.ts

@@ -1,4 +1,4 @@
-import type webpack from 'webpack'
+import {Compiler} from '@rspack/core'
 import {
   handleMultipleAssetsError,
   handleTopLevelAwaitError,
@@ -13,7 +13,7 @@ export default class CommonErrorsPlugin {
     this.manifestPath = options.manifestPath
   }
 
-  apply(compiler: webpack.Compiler) {
+  apply(compiler: Compiler) {
     compiler.hooks.compilation.tap(
       'CommonErrorsPlugin (module)',
       (compilation) => {

packages/common-errors-plugin/package.json

@@ -9,7 +9,7 @@
   },
   "name": "webpack-browser-extension-common-errors",
   "version": "1.1.2",
-  "description": "webpack plugin to handle common errors from browser extensions",
+  "description": "rspack plugin to handle common errors from browser extensions",
   "main": "./dist/module.js",
   "types": "./dist/module.d.ts",
   "files": [
@@ -28,7 +28,7 @@
     "test": "echo \"Note: no test specified\" && exit 0"
   },
   "keywords": [
-    "webpack",
+    "@rspack/core",
     "plugin",
     "browser",
     "web",
@@ -38,7 +38,7 @@
     "manifest.json"
   ],
   "peerDependencies": {
-    "webpack": "~5.92.0"
+    "@rspack/core": "0.7.5"
   },
   "dependencies": {
     "@colors/colors": "^1.6.0",
@@ -50,7 +50,7 @@
     "eslint-config-extension-create": "*",
     "tsconfig": "*",
     "tsup": "^8.0.1",
-    "webpack": "~5.92.0",
+    "@rspack/core": "0.7.5",
     "webpack-cli": "^5.1.4"
   }
 }

packages/common-errors-plugin/steps/compilationErrorHandlers.ts

@@ -1,10 +1,10 @@
-import webpack from 'webpack'
+import rspack from '@rspack/core'
 import {bold, red, underline, blue} from '@colors/colors/safe'
 
 export function handleMultipleAssetsError(
   manifestPath: string,
-  error: webpack.WebpackError
-): webpack.WebpackError | null {
+  error: rspack.StatsError
+): rspack.StatsError | null {
   const manifest = require(manifestPath)
   const actualMsg =
     'Conflict: Multiple assets emit different content to the same filename '
@@ -14,16 +14,16 @@ export function handleMultipleAssetsError(
     const errorMsg = `[${manifest.name}'s content_scripts] One of your \`${extFilename}\` file imports is also defined as a content_script in manifest.json. Remove the duplicate entry and try again.`
 
     if (filename.startsWith('content_scripts')) {
-      return new webpack.WebpackError(errorMsg)
+      return new rspack.WebpackError(errorMsg)
     }
   }
   return null
 }
 
 export function handleCantResolveError(
   manifestPath: string,
-  error: webpack.WebpackError
-): webpack.WebpackError | null {
+  error: rspack.StatsError
+): rspack.StatsError | null {
   const manifest = require(manifestPath)
   const cantResolveMsg = 'Module not found: Error:'
 
@@ -40,16 +40,16 @@ export function handleCantResolveError(
       )} folder. ` +
       `Read more about ${'special folders'} ${underline(blue(link))}.`
 
-    return new webpack.WebpackError(bold(customMessage))
+    return new rspack.WebpackError(bold(customMessage))
   }
 
   return null
 }
 
 export function handleTopLevelAwaitError(
   manifestPath: string,
-  error: webpack.WebpackError
-): webpack.WebpackError | null {
+  error: rspack.StatsError
+): rspack.StatsError | null {
   const manifest = require(manifestPath)
   const topLevelAwaitMsg =
     'Top-level-await is only supported in EcmaScript Modules'
@@ -62,7 +62,7 @@ export function handleTopLevelAwaitError(
       bold(topLevelAwaitMsg + '.\n' + additionalInfo)
     )}`
 
-    return new webpack.WebpackError(customMessage)
+    return new rspack.WebpackError(customMessage)
   }
 
   return null

packages/html-plugin/__tests__/module.spec.ts

@@ -23,12 +23,12 @@ const findStringInFile = async (filePath: string, string: string) => {
 
 describe('HtmlPlugin (default behavior)', () => {
   const fixturesPath = getFixturesPath('sandbox')
-  const webpackConfigPath = path.join(fixturesPath, 'webpack.config.js')
+  const rspackConfigPath = path.join(fixturesPath, 'rspack.config.js')
   const outputPath = path.resolve(fixturesPath, 'dist')
 
   beforeAll((done) => {
     exec(
-      `npx webpack --config ${webpackConfigPath}`,
+      `npx rspack --config ${rspackConfigPath}`,
       {cwd: fixturesPath},
       (error, stdout, stderr) => {
         if (error) {
@@ -184,12 +184,12 @@ describe('HtmlPlugin (default behavior)', () => {
 
 describe('HtmlPlugin (edge cases)', () => {
   const fixturesPath = getFixturesPath('sandbox-nojs')
-  const webpackConfigPath = path.join(fixturesPath, 'webpack.config.js')
+  const rspackConfigPath = path.join(fixturesPath, 'rspack.config.js')
   const outputPath = path.resolve(fixturesPath, 'dist')
 
   beforeAll((done) => {
     exec(
-      `npx webpack --config ${webpackConfigPath}`,
+      `npx rspack --config ${rspackConfigPath}`,
       {cwd: fixturesPath},
       (error, stdout, stderr) => {
         if (error) {

packages/html-plugin/helpers/errors.ts

@@ -1,5 +1,5 @@
 import fs from 'fs'
-import webpack from 'webpack'
+import rspack, {Compilation} from '@rspack/core'
 import {
   fileError,
   manifestFieldError,
@@ -9,48 +9,49 @@ import {
 import manifestFields from 'browser-extension-manifest-fields'
 import getAssetsFromHtml from '../lib/getAssetsFromHtml'
 import {type IncludeList} from '../types'
+import {StatsError} from '@rspack/core'
 
-function manifestNotFoundError(compilation: webpack.Compilation) {
+function manifestNotFoundError(compilation: Compilation) {
   const errorMessage = manifestMissingError()
 
-  compilation.errors.push(new webpack.WebpackError(errorMessage))
+  compilation.errors.push(new rspack.WebpackError(errorMessage))
 }
 
 function entryNotFoundWarn(
-  compilation: webpack.Compilation,
+  compilation: Compilation,
   feature: string,
   htmlFilePath: string
 ) {
   const errorMessage = manifestFieldError(feature, htmlFilePath)
 
-  compilation.warnings.push(new webpack.WebpackError(errorMessage))
+  compilation.warnings.push(new rspack.WebpackError(errorMessage))
 }
 
 function fileNotFoundWarn(
-  compilation: webpack.Compilation,
+  compilation: Compilation,
   manifestPath: string,
   htmlFilePath: string,
   filePath: string
 ) {
   const errorMessage = fileError(manifestPath, htmlFilePath, filePath)
 
-  compilation.warnings.push(new webpack.WebpackError(errorMessage))
+  compilation.warnings.push(new rspack.WebpackError(errorMessage))
 }
 
 function serverStartRequiredError(
-  compilation: webpack.Compilation,
+  compilation: Compilation,
   projectDir: string,
   changedFile: string
 ) {
   const errorMessage = serverRestartRequired(projectDir, changedFile)
 
-  compilation.errors.push(new webpack.WebpackError(errorMessage))
+  compilation.errors.push(new rspack.WebpackError(errorMessage))
 }
 
 function handleCantResolveError(
   manifestPath: string,
   includeList: IncludeList,
-  error: webpack.WebpackError
+  error: StatsError
 ) {
   const cantResolveMsg = "Module not found: Error: Can't resolve "
   const customError = error.message.replace(cantResolveMsg, '')
@@ -82,7 +83,7 @@ function handleCantResolveError(
             resource?.html,
             wrongFilename
           )
-          return new webpack.WebpackError(errorMsg)
+          return new rspack.WebpackError(errorMsg)
         }
       }
     }

packages/html-plugin/helpers/utils.ts

@@ -1,6 +1,6 @@
 import path from 'path'
 import fs from 'fs'
-import {type Compilation} from 'webpack'
+import {type Compilation} from '@rspack/core'
 import {type IncludeList, type Manifest} from '../types'
 
 function isUsingReact(projectDir: string) {

packages/html-plugin/lib/getAssetsFromHtml.ts

@@ -67,7 +67,7 @@ export default function getAssetsFromHtml(
     return {
       // Assets from HTML pages to copy to the outputFilePath path
       css: assets.css,
-      // Assets frorm HTML pages to use as webpack entries
+      // Assets frorm HTML pages to use as rspack entries
       js: assets.js,
       // Assets frorm HTML pages to copy to the outputFilePath path
       static: assets.static

packages/html-plugin/lib/patchHtml.ts

@@ -1,6 +1,6 @@
 import fs from 'fs'
 import path from 'path'
-import {type Compilation} from 'webpack'
+import {type Compilation} from '@rspack/core'
 // @ts-ignore
 import parse5utils from 'parse5-utils'
 

packages/html-plugin/loaders/InjectHmrAcceptLoader.ts

@@ -2,7 +2,7 @@ import path from 'path'
 import fs from 'fs'
 import {urlToRequest} from 'loader-utils'
 import {validate} from 'schema-utils'
-import {type LoaderContext} from 'webpack'
+import {type LoaderContext} from '@rspack/core'
 import {type Schema} from 'schema-utils/declarations/validate'
 
 // Manifest fields

packages/html-plugin/minimum-script-file.ts

@@ -1,4 +1,4 @@
-// webpack uses JavaScript entries to enable HMR
+// rspack uses JavaScript entries to enable HMR
 // but sometimes the user HTML file might not have a script tag
 // declared. So we ensure HTML entries have at least one script,
 // and that script is HMR enabled.

packages/html-plugin/module.ts

@@ -1,5 +1,5 @@
 import path from 'path'
-import type webpack from 'webpack'
+import {type Compiler} from '@rspack/core'
 
 import {type IncludeList, type HtmlPluginInterface} from './types'
 import EmitHtmlFile from './steps/EmitHtmlFile'
@@ -16,7 +16,7 @@ import getAssetsFromHtml from './lib/getAssetsFromHtml'
  * HtmlPlugin is responsible for handling the HTML file
  * defined in the manifest.json. Static assets and CSS files
  * within the HTML file are added to the compilation. JS files
- * are added as webpack entrypoints. It also supports ecxtra
+ * are added as rspack entrypoints. It also supports ecxtra
  * html files defined via this.include option. These extra
  * html files are added to the compilation and are also HMR
  * enabled. They are useful for adding extra pages to the
@@ -63,7 +63,7 @@ export default class HtmlPlugin {
     }, {})
   }
 
-  public apply(compiler: webpack.Compiler): void {
+  public apply(compiler: Compiler): void {
     const includeList = this.parseIncludes(this.include || [])
 
     // 1 - Gets the original HTML file and add the HTML file to the compilation.

packages/html-plugin/package.json

@@ -9,7 +9,7 @@
   },
   "name": "webpack-browser-extension-html",
   "version": "1.1.1",
-  "description": "webpack plugin to handle HTML assets from browser extensions",
+  "description": "rspack plugin to handle HTML assets from browser extensions",
   "main": "./dist/module.js",
   "types": "./dist/module.d.ts",
   "files": [
@@ -31,7 +31,7 @@
     "test": "jest"
   },
   "keywords": [
-    "webpack",
+    "@rspack/core",
     "plugin",
     "browser",
     "web",
@@ -45,7 +45,7 @@
     "manifest.json"
   ],
   "peerDependencies": {
-    "webpack": "~5.92.0"
+    "@rspack/core": "0.7.5"
   },
   "dependencies": {
     "browser-extension-manifest-fields": "*",
@@ -67,7 +67,7 @@
     "ts-jest": "^29.1.2",
     "tsconfig": "*",
     "tsup": "^8.0.1",
-    "webpack": "~5.92.0",
+    "@rspack/core": "0.7.5",
     "webpack-cli": "^5.1.4",
     "webpack-target-webextension": "^1.1.0"
   }

packages/html-plugin/steps/AddAssetsToCompilation.ts

@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
-import type webpack from 'webpack'
-import {sources, Compilation} from 'webpack'
+import {type Compiler} from '@rspack/core'
+import {sources, Compilation} from '@rspack/core'
 
 import {type IncludeList, type StepPluginInterface} from '../types'
 
@@ -24,7 +24,7 @@ export default class AddAssetsToCompilation {
     this.exclude = options.exclude
   }
 
-  public apply(compiler: webpack.Compiler): void {
+  public apply(compiler: Compiler): void {
     compiler.hooks.thisCompilation.tap(
       'HtmlPlugin (AddAssetsToCompilation)',
       (compilation) => {