feat: add worker inline example (#254)

9aoy · web-flow · commit 8ac1c72da77a · 2025-03-12T14:42:30.000+08:00
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/rspack/worker-inline/index.html b/rspack/worker-inline/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/rspack/worker-inline/package.json b/rspack/worker-inline/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "example-worker-inline",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "sideEffects": ["**/*.css", "**/*.less", "**/*.scss"],
+  "main": "index.js",
+  "scripts": {
+    "build": "rspack build",
+    "dev": "rspack serve"
+  },
+  "devDependencies": {
+    "@rspack/cli": "1.2.7",
+    "@rspack/core": "1.2.7"
+  },
+  "dependencies": {
+    "worker-rspack-loader": "^3.1.2"
+  }
+}
diff --git a/rspack/worker-inline/rspack.config.mjs b/rspack/worker-inline/rspack.config.mjs
@@ -0,0 +1,23 @@
+// @ts-check
+import { rspack } from "@rspack/core";
+import { defineConfig } from "@rspack/cli";
+
+export default defineConfig({
+  entry: "./src/index.js",
+  plugins: [
+    new rspack.HtmlRspackPlugin({
+      template: "./index.html",
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /worker\.js$/,
+        loader: "worker-rspack-loader",
+        options: {
+          inline: "no-fallback",
+        },
+      },
+    ],
+  },
+});
diff --git a/rspack/worker-inline/src/index.js b/rspack/worker-inline/src/index.js
@@ -0,0 +1,18 @@
+import Worker from './worker.js';
+
+const worker = new Worker();
+
+let result;
+
+worker.onmessage = function (event) {
+  if (!result) {
+    result = document.createElement('div');
+    result.setAttribute('id', 'result');
+
+    document.body.append(result);
+  }
+
+  result.innerText = JSON.stringify(event.data);
+};
+
+worker.postMessage({ postMessage: true });
diff --git a/rspack/worker-inline/src/worker.js b/rspack/worker-inline/src/worker.js
@@ -0,0 +1,7 @@
+onmessage = function (event) {
+  const workerResult = event.data;
+
+  workerResult.onmessage = true;
+
+  postMessage(workerResult);
+};
