fix(website): plugin usage according to v2

Author: bugra9

cppjs-plugins/cppjs-plugin-webpack/index.js

@@ -68,4 +68,51 @@ export default class CppjsWebpackPlugin {
             getFilteredBuildTargets
         };
     }
+
+    getRule() {
+        return {
+            test: new RegExp(`\\.(${state.config.ext.header.join('|')})$`),
+            loader: '@cpp.js/plugin-webpack-loader',
+            options: { ...this.getLoaderOptions() },
+        };
+    }
+
+    setDevServerMiddleware(middlewares, devServer) {
+        if (!devServer) {
+            throw new Error('devServer is not defined');
+        }
+
+        middlewares.unshift({
+            name: '/cpp.js',
+            path: '/cpp.js',
+            middleware: (req, res) => {
+                const filePath = `${state.config.paths.build}/${buildTargetDebug.jsName}`;
+                res.setHeader('Content-Type', 'application/javascript');
+                fs.createReadStream(filePath).pipe(res);
+            },
+        });
+
+        middlewares.unshift({
+            name: '/cpp.wasm',
+            path: '/cpp.wasm',
+            middleware: (req, res) => {
+                const filePath = `${state.config.paths.build}/${buildTargetDebug.wasmName}`;
+                res.setHeader('Content-Type', 'application/wasm');
+                fs.createReadStream(filePath).pipe(res);
+            },
+        });
+
+        return middlewares;
+    }
+
+    getDevServerConfig() {
+        return {
+            watchFiles: state.config.paths.native,
+            hot: true,
+            liveReload: true,
+            setupMiddlewares: (middlewares, devServer) => {
+                return this.setDevServerMiddleware(middlewares, devServer);
+            },
+        };
+    }
 }

cppjs-plugins/cppjs-plugin-webpack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cpp.js/plugin-webpack",
-    "version": "2.0.0-beta.12",
+    "version": "2.0.0-beta.13",
     "description": "Cpp.js Webpack plugin: A tool for seamless C++ integration with the Webpack bundler.",
     "homepage": "https://github.com/bugra9/cpp.js/tree/main/packages/cppjs-plugin-rollup#readme",
     "repository": "https://github.com/bugra9/cpp.js.git",

cppjs-samples/cppjs-sample-web-react-rspack/rspack.config.mjs

@@ -35,11 +35,7 @@ export default defineConfig({
     },
     module: {
         rules: [
-            {
-                test: /\.h$/,
-                loader: '@cpp.js/plugin-webpack-loader',
-                options: { ...cppjsLoaderOptions },
-            },
+            cppjsWebpackPlugin.getRule(),
             {
                 test: /\.svg$/,
                 type: 'asset',
@@ -78,41 +74,5 @@ export default defineConfig({
         }),
         isDev && new ReactRefreshRspackPlugin(),
     ],
-    devServer: {
-        watchFiles: {
-            paths: ['src/**/*'],
-            options: {
-                ignored: /node_modules/,
-            },
-        },
-        hot: true,
-        liveReload: true,
-        setupMiddlewares: (middlewares, devServer) => {
-            if (!devServer) {
-                throw new Error('@rspack/dev-server is not defined');
-            }
-
-            middlewares.unshift({
-                name: '/cpp.js',
-                path: '/cpp.js',
-                middleware: (req, res) => {
-                    const filePath = `${state.config.paths.build}/${buildTargetDebug.jsName}`;
-                    res.setHeader('Content-Type', 'application/javascript');
-                    fs.createReadStream(filePath).pipe(res);
-                },
-            });
-
-            middlewares.unshift({
-                name: '/cpp.wasm',
-                path: '/cpp.wasm',
-                middleware: (req, res) => {
-                    const filePath = `${state.config.paths.build}/${buildTargetDebug.wasmName}`;
-                    res.setHeader('Content-Type', 'application/wasm');
-                    fs.createReadStream(filePath).pipe(res);
-                },
-            });
-
-            return middlewares;
-        },
-    },
+    devServer: cppjsWebpackPlugin.getDevServerConfig(),
 });

website/docs/guide/integrate-into-existing-project/cloudflare-worker.md

@@ -6,7 +6,7 @@ You can use cpp.js to compile native code from your project into WebAssembly. To
 {
     "name": "myapp",
     "scripts": {
-+       "build": "cppjs build -p wasm",
++       "build": "cppjs build -p wasm -e edge -r st",
         "dev": "wrangler dev",
         "deploy": "wrangler dev"
     },
@@ -63,17 +63,17 @@ This command will generate myapp.wasm, myapp.browser.js, and myapp.node.js files
 |       └── MySampleClass.h
 |
 ├── dist
-│   └── myapp.wasm
-|   └── myapp.browser.js
-|   └── myapp.node.js
+│   └── myapp-wasm-wasm32-st-release.edge.js
+│   └── myapp-wasm-wasm32-st-release.edge.wasm
+|
 ├── ...
 ```
 
-You can now access your native code by importing **dist/myapp.browser.js** into your JavaScript file. For a minimal setup, create a index.js and add the following content.
+You can now access your native code by importing **dist/myapp-wasm-wasm32-st-release.edge.js** into your JavaScript file. For a minimal setup, create a index.js and add the following content.
 
 ```js title="index.js"
-import initCppJs from './dist/myapp.browser.js';
-import wasmContent from './dist/myapp.wasm';
+import initCppJs from './dist/myapp-wasm-wasm32-st-release.edge.js';
+import wasmContent from './dist/myapp-wasm-wasm32-st-release.edge.wasm';
 
 const { MySampleClass } = await initCppJs({ getWasmFunction: () => wasmContent });
 

website/docs/guide/integrate-into-existing-project/create-react-app.md

@@ -6,7 +6,7 @@ You can use cpp.js to compile native code from your project into WebAssembly. To
 {
     "name": "myapp",
     "scripts": {
-+       "build": "cppjs build -p wasm"
++       "build": "cppjs build -p wasm -e node -r st"
     },
     "devDependencies": {
 +       "cpp.js": "^2.0.0-beta"
@@ -60,16 +60,15 @@ This command will generate myapp.wasm, myapp.browser.js, and myapp.node.js files
 |       └── MySampleClass.h
 |
 ├── dist
-│   └── myapp.wasm
-|   └── myapp.browser.js
-|   └── myapp.node.js
+│   └── myapp-wasm-wasm32-st-release.node.js
+│   └── myapp-wasm-wasm32-st-release.node.wasm
 ├── ...
 ```
 
-You can now access your native code by importing **dist/myapp.node.js** into your JavaScript file. For a minimal setup, create a src/index.js and add the following content.
+You can now access your native code by importing **dist/myapp-wasm-wasm32-st-release.node.js** into your JavaScript file. For a minimal setup, create a src/index.js and add the following content.
 
 ```js title="src/index.js"
-const initCppJs = require('../dist/myapp.node.js');
+const initCppJs = require('../dist/myapp-wasm-wasm32-st-release.node.js');
 
 initCppJs().then(({ MySampleClass }) => {
     console.log(`Response from c++ : ${MySampleClass.sample()}`);
@@ -86,7 +85,7 @@ node ./src/index.js
 For module (ES) usage, create a src/index.mjs and add the following content.
 
 ```js title="src/index.mjs"
-import initCppJs from '../dist/myapp.node.js';
+import initCppJs from '../dist/myapp-wasm-wasm32-st-release.node.js';
 
 initCppJs().then(({ MySampleClass }) => {
     console.log(`Matrix multiplier with c++ => ${MySampleClass.sample()}`);

website/docs/guide/integrate-into-existing-project/nodejs.md

@@ -20,7 +20,6 @@ If you are using a bundler you can continue with its page. If not, you can integ
 | [Rollup](rollup)         |                              |                   |                                        |
 | [Vite](vite)             |                              |                   |                                        |
 | [Rspack](rspack)         |
-| [CRA(Create React App)](create-react-app)         |
 :::warning
 Before proceeding, ensure that you have met all the [prerequisites](/docs/guide/getting-started/prerequisites) for setting up a working development environment.
 :::

website/docs/guide/integrate-into-existing-project/overview.md

@@ -17,41 +17,13 @@ To enable the plugin, modify the `rspack.config.mjs` file as shown below.
 export default defineConfig({
 	module: {
 		rules: [
-+            {
-+                test: /\.h$/,
-+                loader: '@cpp.js/plugin-webpack-loader',
-+                options: { compiler },
-+            }
++           cppjsWebpackPlugin.getRule(),
 		]
 	},
 	plugins: [
 +         cppjsWebpackPlugin,
 	].filter(Boolean),
-+     devServer: {
-+         watchFiles: compiler.config.paths.native,
-+         setupMiddlewares: (middlewares, devServer) => {
-+             if (!devServer) {
-+                 throw new Error('@rspack/dev-server is not defined');
-+             }
-+ 
-+             middlewares.unshift({
-+                 name: '/cpp.js',
-+                 path: '/cpp.js',
-+                 middleware: (req, res) => {
-+                     res.sendFile(`${compiler.config.paths.temp}/${compiler.config.general.name}.browser.js`);
-+                 },
-+             });
-+             middlewares.unshift({
-+                 name: '/cpp.wasm',
-+                 path: '/cpp.wasm',
-+                 middleware: (req, res) => {
-+                     res.send(fs.readFileSync(`${compiler.config.paths.temp}/${compiler.config.general.name}.wasm`));
-+                 },
-+             });
-+ 
-+             return middlewares;
-+         },
-+     },
++   devServer: cppjsWebpackPlugin.getDevServerConfig(),
 });
 ```
 

website/docs/guide/integrate-into-existing-project/rspack.md

@@ -10,7 +10,7 @@ You can use cpp.js to compile native code from your project into WebAssembly. To
 {
     "name": "myapp",
     "scripts": {
-+       "build": "cppjs build -p wasm"
++       "build": "cppjs build -p wasm -a wasm32 -r st -e browser -b release"
     },
     "devDependencies": {
 +       "cpp.js": "^2.0.0-beta"
@@ -56,29 +56,28 @@ Before proceeding, ensure that you have met all the [prerequisites](/docs/guide/
 npm run build
 ```
 
-This command will generate myapp.wasm, myapp.browser.js, and myapp.node.js files inside the dist folder.
+This command will generate myapp-wasm-wasm32-st-release.browser.js and myapp-wasm-wasm32-st-release.browser.wasm files inside the dist folder.
 
 ```
 ├── src
 │   └── native
 |       └── MySampleClass.h
 |
 ├── dist
-│   └── myapp.wasm
-|   └── myapp.browser.js
-|   └── myapp.node.js
+│   └── myapp-wasm-wasm32-st-release.browser.js
+|   └── myapp-wasm-wasm32-st-release.browser.wasm
 ├── ...
 ```
 
-You can now access your native code by importing **dist/myapp.browser.js** into your JavaScript file. For a minimal setup, create a index.html and add the following content.
+You can now access your native code by importing **dist/myapp-wasm-wasm32-st-release.browser.js** into your JavaScript file. For a minimal setup, create a index.html and add the following content.
 
 ```html title="index.html"
 <!DOCTYPE html>
 <html>
    <head>
       <meta charset = "utf-8">
       <title>Cpp.js Vanilla sample</title>
-      <script src="./dist/myapp.browser.js"></script>
+      <script src="./dist/myapp-wasm-wasm32-st-release.browser.js"></script>
       <script>
         initCppJs({ path: './dist' }).then(({ MySampleClass }) => {
             document.querySelector('#cppMessage').innerHTML = MySampleClass.sample();
@@ -103,7 +102,7 @@ To add `serve` as a project dependency, follow these steps:
        "build": "cppjs build -p wasm",
     },
     "devDependencies": {
-+      "serve": "^14.2.3",
++      "serve": "^14.2.6",
        "cpp.js": "^2.0.0-beta"
     }
 }

website/docs/guide/integrate-into-existing-project/standalone.md

@@ -20,13 +20,10 @@ module.exports = {
   ],
   module: {
     rules: [
-+     {
-+       test: /\.h$/,
-+       loader: '@cpp.js/plugin-webpack-loader',
-+       options: { compiler },
-+     }
++     cppjsWebpackPlugin.getRule(),
     ],
   },
++ devServer: cppjsWebpackPlugin.getDevServerConfig(),
 };
 ```