@crossbind/plugin-webpack 2.0.0-beta.60 → 2.0.0-beta.63

package/README.md

@@ -3,20 +3,20 @@
 A tool for seamless C++ integration with the Webpack bundler.
 
 <a href="https://www.npmjs.com/package/@crossbind/plugin-webpack">
-    <img alt="NPM version" src="https://img.shields.io/npm/v/@crossbind/plugin-webpack?style=for-the-badge" />
+    <img alt="NPM version" src="https://img.shields.io/npm/v/@crossbind/plugin-webpack/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 plugin. Start by installing these package with the following command:
 
 ```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**  

package/index.js

@@ -3,6 +3,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import {
     state, createLib, buildWasm, createBridgeFile, getData, getCrossbindScript, getRustJsScript, getDependFilePath, buildDependencies, getTargetParams, getFilteredBuildTargets, isSourceNewer,
+    appSourceFiles,
 } from 'crossbind';
 
 const targetParams = getTargetParams({ platform: ['wasm'], arch: ['wasm32'], runtime: ['st'], runtimeEnv: ['browser'] }, true);
@@ -19,6 +20,8 @@ if (!buildTargetDebug) {
     buildTargetRelease = buildTargetDebug;
 }
 
+const buildTargetFor = (mode) => (mode === 'development' ? buildTargetDebug : buildTargetRelease);
+
 export default class CrossbindWebpackPlugin {
     static defaultOptions = {};
 
@@ -38,6 +41,12 @@ export default class CrossbindWebpackPlugin {
             const marker = getDependFilePath(resource.request, buildTargetRelease);
             if (marker) resource.request = marker;
         }).apply(compiler);
+        // A dependency's header (`@crossbind/port-zlib/zlib.h`) names the package, not a file: it lives in the
+        // package's prebuilt include directory for the target, as the Vite and Metro plugins resolve it.
+        new compiler.webpack.NormalModuleReplacementPlugin(new RegExp(`\\.(${state.config.ext.header.join('|')})$`), (resource) => {
+            const header = getDependFilePath(resource.request, buildTargetRelease);
+            if (header) resource.request = header;
+        }).apply(compiler);
         // Rust packages ship no JS entry at all (their package.json is just a name), so node
         // resolution can never find them. Each known cargo-type dependency gets an exact-match
         // alias onto its crate root; the loader's .rs branch turns that into the proxy module.
@@ -48,6 +57,12 @@ export default class CrossbindWebpackPlugin {
                 compiler.options.resolve.alias[`${dep.package.name}$`] = libRs;
             }
         }
+        // Before any loader runs: a header's bridge reads the include roots of every dependency, conan's staged
+        // packages included, and a cargo dependency built for another target only is there but lacks this one
+        // until the build makes it.
+        const buildDeps = () => buildDependencies({ targetParams: { ...targetParams, buildType: [buildTargetFor(compiler.options.mode).buildType] } });
+        compiler.hooks.beforeRun.tapPromise(pluginName, buildDeps);
+        compiler.hooks.watchRun.tapPromise(pluginName, buildDeps);
         // tapPromise (not tap) so webpack awaits the native C++/wasm build and a build
         // failure surfaces as a compilation error instead of an unhandled rejection.
         compiler.hooks.done.tapPromise(pluginName, this.onDone.bind(this));
@@ -61,8 +76,7 @@ export default class CrossbindWebpackPlugin {
 
     async onDone({ compilation }) {
         const isDev = compilation.options.mode === 'development';
-        const buildTarget = isDev ? buildTargetDebug : buildTargetRelease;
-        await buildDependencies({ targetParams: { ...targetParams, buildType: [buildTarget.buildType] } });
+        const buildTarget = buildTargetFor(compilation.options.mode);
         const force = isSourceNewer(buildTarget);
         const sourceBuilt = createLib(buildTarget, 'Source', { force, buildSource: true });
         // Bridge cache is keyed on the nativeGlob fingerprint: a changed bridge
@@ -92,6 +106,7 @@ export default class CrossbindWebpackPlugin {
     getLoaderOptions() {
         return {
             bridges: this.bridges,
+            appSourceFiles,
             createBridgeFile,
             getData,
             state,
@@ -116,10 +131,16 @@ export default class CrossbindWebpackPlugin {
             throw new Error('devServer is not defined');
         }
 
+        // The boot code asks under webpack's public path, which need not be the root.
+        const asksFor = (req, name) => req.url.split('?')[0].endsWith(`/${name}`);
+
         middlewares.unshift({
             name: '/crossbind.js',
-            path: '/crossbind.js',
-            middleware: (req, res) => {
+            middleware: (req, res, next) => {
+                if (!asksFor(req, 'crossbind.js')) {
+                    next();
+                    return;
+                }
                 const filePath = `${state.config.paths.build}/${buildTargetDebug.jsName}`;
                 res.setHeader('Content-Type', 'application/javascript');
                 res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
@@ -130,8 +151,11 @@ export default class CrossbindWebpackPlugin {
 
         middlewares.unshift({
             name: '/crossbind.wasm',
-            path: '/crossbind.wasm',
-            middleware: (req, res) => {
+            middleware: (req, res, next) => {
+                if (!asksFor(req, 'crossbind.wasm')) {
+                    next();
+                    return;
+                }
                 const filePath = `${state.config.paths.build}/${buildTargetDebug.wasmName}`;
                 res.setHeader('Content-Type', 'application/wasm');
                 res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
@@ -142,8 +166,11 @@ export default class CrossbindWebpackPlugin {
 
         middlewares.unshift({
             name: '/crossbind.data.txt',
-            path: '/crossbind.data.txt',
-            middleware: (req, res) => {
+            middleware: (req, res, next) => {
+                if (!asksFor(req, 'crossbind.data.txt')) {
+                    next();
+                    return;
+                }
                 const filePath = `${state.config.paths.build}/${buildTargetDebug.dataTxtName}`;
                 res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
                 res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossbind/plugin-webpack",
-  "version": "2.0.0-beta.60",
+  "version": "2.0.0-beta.63",
   "description": "crossbind Webpack plugin: A tool for seamless C++ integration with the Webpack bundler.",
   "homepage": "https://github.com/crossbind/crossbind/tree/main/plugins/webpack#readme",
   "repository": {
@@ -11,8 +11,8 @@
   "type": "module",
   "main": "index.js",
   "dependencies": {
-    "crossbind": "^2.0.0-beta.60",
-    "@crossbind/core-embind-rust": "^2.0.0-beta.60"
+    "crossbind": "^2.0.0-beta.63",
+    "@crossbind/core-embind-rust": "^2.0.0-beta.63"
   },
   "peerDependencies": {
     "webpack": ">=5.0.0"