@crossbind/plugin-webpack-loader 2.0.0-beta.62 → 2.0.0-beta.64

package/README.md

@@ -3,29 +3,28 @@
 A tool for seamless C++ integration with the Webpack bundler.
 
 <a href="https://www.npmjs.com/package/@crossbind/plugin-webpack-loader">
-    <img alt="NPM version" src="https://img.shields.io/npm/v/@crossbind/plugin-webpack-loader?style=for-the-badge" />
+    <img alt="NPM version" src="https://img.shields.io/npm/v/@crossbind/plugin-webpack-loader/beta?style=for-the-badge" />
 </a>
 <a href="https://github.com/crossbind/crossbind/blob/main/LICENSE">
     <img alt="License" src="https://img.shields.io/github/license/crossbind/crossbind?style=for-the-badge" />
 </a>
-<a href="https://crossbind.js.org/docs/guide/integrate-into-existing-project/webpack">
-    <img alt="Docs - React Native" src="https://img.shields.io/badge/Docs_-_Webpack-20B2AA?style=for-the-badge" />
+<a href="https://crossbind.dev/docs/guide/integrate-into-existing-project/webpack">
+    <img alt="Docs - Webpack" src="https://img.shields.io/badge/Docs_-_Webpack-20B2AA?style=for-the-badge" />
 </a>
 
 ## Integration
-To integrate crossbind into your project using Webpack as a bundler, you can utilize the @crossbind/plugin-webpack-loader plugin. Start by installing these package with the following command:
+Install the plugin and its loader:
 
 ```sh
-npm install @crossbind/plugin-webpack @crossbind/plugin-webpack-loader --save-dev
+npm install @crossbind/plugin-webpack@beta @crossbind/plugin-webpack-loader@beta --save-dev
 ```
 
 **Webpack**  
-To enable the plugin, modify the `webpack.config.js` file as shown below.
+Register the plugin, its loader rule and its dev server settings in `webpack.config.js`:
 
 ```diff
-+ const CrossbindWebpackPlugin = require('@crossbind/plugin-webpack');
++ const CrossbindWebpackPlugin = require('@crossbind/plugin-webpack').default;
 + const crossbindWebpackPlugin = new CrossbindWebpackPlugin();
-+ const compiler = crossbindWebpackPlugin.getCompiler();
 
 module.exports = {
   //...
@@ -34,112 +33,32 @@ module.exports = {
   ],
   module: {
     rules: [
-+     {
-+       test: /\.h$/,
-+       loader: '@crossbind/plugin-webpack-loader',
-+       options: { compiler },
-+     }
++     crossbindWebpackPlugin.getRule(),
     ],
   },
++ devServer: crossbindWebpackPlugin.getDevServerConfig(),
 };
 ```
 
 **Rspack**  
-To enable the plugin, modify the `rspack.config.mjs` file as shown below.
+The same plugin works in `rspack.config.mjs`:
 
 ```diff
 + import CrossbindWebpackPlugin from '@crossbind/plugin-webpack';
 
 + const crossbindWebpackPlugin = new CrossbindWebpackPlugin();
-+ const compiler = crossbindWebpackPlugin.getCompiler();
 
 export default defineConfig({
-	module: {
-		rules: [
-+            {
-+                test: /\.h$/,
-+                loader: '@crossbind/plugin-webpack-loader',
-+                options: { compiler },
-+            }
-		]
-	},
-	plugins: [
-+         crossbindWebpackPlugin,
-	].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: '/crossbind.js',
-+                 path: '/crossbind.js',
-+                 middleware: (req, res) => {
-+                     res.sendFile(`${compiler.config.paths.temp}/${compiler.config.general.name}.browser.js`);
-+                 },
-+             });
-+             middlewares.unshift({
-+                 name: '/crossbind.wasm',
-+                 path: '/crossbind.wasm',
-+                 middleware: (req, res) => {
-+                     res.send(fs.readFileSync(`${compiler.config.paths.temp}/${compiler.config.general.name}.wasm`));
-+                 },
-+             });
-+ 
-+             return middlewares;
-+         },
-+     },
+  module: {
+    rules: [
++     crossbindWebpackPlugin.getRule(),
+    ],
+  },
+  plugins: [
++   crossbindWebpackPlugin,
+  ],
++ devServer: crossbindWebpackPlugin.getDevServerConfig(),
 });
 ```
 
-**Craco**  
-To enable the plugin, create the `craco.config.js` file as shown below.
-
-```js
-const fs = require('fs');
-
-module.exports = async function () {
-    const { default: CrossbindWebpackPlugin } = await import('@crossbind/plugin-webpack');
-    const crossbindWebpackPlugin = new CrossbindWebpackPlugin();
-    const compiler = crossbindWebpackPlugin.getCompiler();
-
-    return {
-        webpack: {
-            plugins: {
-                add: [crossbindWebpackPlugin],
-            },
-            configure: (config) => {
-                config.module.rules[1].oneOf = [
-                    {
-                        test: /\.h$/,
-                        loader: '@crossbind/plugin-webpack-loader',
-                        options: { compiler },
-                    },
-                    ...config.module.rules[1].oneOf,
-                ];
-                return config;
-            },
-        },
-        devServer: (devServerConfig) => {
-            devServerConfig.watchFiles = compiler.config.paths.native;
-            devServerConfig.onBeforeSetupMiddleware = (devServer) => {
-                if (!devServer) {
-                  throw new Error('webpack-dev-server is not defined');
-                }
-
-                devServer.app.get('/crossbind.js', function (req, res) {
-                  res.sendFile(`${compiler.config.paths.temp}/${compiler.config.general.name}.browser.js`);
-                });
-
-                devServer.app.get('/crossbind.wasm', function (req, res) {
-                    res.send(fs.readFileSync(`${compiler.config.paths.temp}/${compiler.config.general.name}.wasm`));
-                });
-            };
-
-            return devServerConfig;
-        },
-    };
-};
-```
+`getRule()` sends header and Rust imports to the loader, and `getDevServerConfig()` serves the build with the COOP/COEP headers a multithreaded build needs. To keep a `devServer` of your own, spread `getDevServerConfig()` into it.

package/index.js

@@ -1,6 +1,6 @@
 async function crossbindLoader() {
     const {
-        bridges, createBridgeFile, getCrossbindScript, getRustJsScript, state,
+        bridges, appSourceFiles, createBridgeFile, getCrossbindScript, getRustJsScript, state,
     } = this.getOptions();
     const target = state.targets.find((t) => t.platform === 'wasm');
 
@@ -11,7 +11,10 @@ async function crossbindLoader() {
     }
 
     const bridgeFile = createBridgeFile(this.resourcePath);
-    bridges.push(bridgeFile);
+    // A header loads again after each source edit; a repeated entry would change the bridge lib's fingerprint.
+    if (!bridges.includes(bridgeFile)) bridges.push(bridgeFile);
+    // The names the app imports decide what a header binds, so watch mode loads it again after any source edit.
+    appSourceFiles(state.config.paths.project).forEach((file) => this.addDependency(file));
 
     return getCrossbindScript(target, bridgeFile);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossbind/plugin-webpack-loader",
-  "version": "2.0.0-beta.62",
+  "version": "2.0.0-beta.64",
   "description": "crossbind Webpack loader: A tool for seamless C++ integration with the Webpack bundler.",
   "homepage": "https://github.com/crossbind/crossbind/tree/main/plugins/webpack-loader#readme",
   "repository": {
@@ -10,7 +10,7 @@
   "license": "MIT",
   "main": "index.js",
   "dependencies": {
-    "crossbind": "^2.0.0-beta.62"
+    "crossbind": "^2.0.0-beta.64"
   },
   "peerDependencies": {
     "webpack": ">=5.0.0"