chore: worklet example

web-infra-dev · Sep 23, 2023 · 164e10b · 164e10b
1 parent 25b34ba
commit 164e10b
Show file tree

Hide file tree

Showing 11 changed files with 381 additions and 0 deletions.
diff --git a/examples/worklet/index.html b/examples/worklet/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/examples/worklet/loader/worklet-loader.js b/examples/worklet/loader/worklet-loader.js
@@ -0,0 +1,10 @@
+const esbuild = require("esbuild");
+module.exports = function workletLoader(source) {
+	const result = esbuild.buildSync({
+		entryPoints: [this.resource],
+		write: false,
+		bundle: true
+	});
+	const content = result.outputFiles[0].text;
+	return content;
+};
diff --git a/examples/worklet/package.json b/examples/worklet/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "example-basic",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "private": true,
+  "scripts": {
+    "dev": "rspack serve",
+    "build": "rspack build"
+  },
+  "devDependencies": {
+    "esbuild": "0.19.3",
+    "@rspack/cli": "workspace:*"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "",
+  "license": "MIT"
+}
diff --git a/examples/worklet/rspack.config.js b/examples/worklet/rspack.config.js
@@ -0,0 +1,41 @@
+/** @type {import('@rspack/cli').Configuration} */
+const config = {
+	context: __dirname,
+	mode: "development",
+	entry: {
+		main: "./src/index.js"
+	},
+	devServer: {
+		devMiddleware: {
+			writeToDisk: true
+		}
+	},
+	module: {
+		rules: [
+			{
+				resourceQuery: /url/,
+				type: "asset"
+			},
+			{
+				test: /complex\.worklet/,
+				use: [
+					{
+						loader: "./loader/worklet-loader.js"
+					}
+				],
+				type: "asset"
+			}
+		]
+	},
+	builtins: {
+		html: [
+			{
+				template: "./index.html"
+			}
+		],
+		react: {
+			refresh: false
+		}
+	}
+};
+module.exports = config;
diff --git a/examples/worklet/src/answer.js b/examples/worklet/src/answer.js
@@ -0,0 +1 @@
+export const answer = 42;
diff --git a/examples/worklet/src/index.js b/examples/worklet/src/index.js
@@ -0,0 +1,23 @@
+import simpleWorklet from "./worklet/simple.worklet?url";
+import complexWorklet from "./worklet/complex.worklet";
+let context = new AudioContext();
+
+context.audioWorklet.addModule(simpleWorklet).then(() => {
+	let node = new AudioWorkletNode(context, "port-processor");
+	node.port.onmessage = event => {
+		// Handling data from the processor.
+		console.log(event.data);
+	};
+
+	node.port.postMessage("Hello!");
+});
+
+context.audioWorklet.addModule(complexWorklet).then(() => {
+	let node = new AudioWorkletNode(context, "complex-processor");
+	node.port.onmessage = event => {
+		// Handling data from the processor.
+		console.log(event.data);
+	};
+
+	node.port.postMessage("Hello!");
+});
diff --git a/examples/worklet/src/lib.js b/examples/worklet/src/lib.js
@@ -0,0 +1 @@
+export const a = 3;
diff --git a/examples/worklet/src/worklet/answer.ts b/examples/worklet/src/worklet/answer.ts
@@ -0,0 +1 @@
+export const answer = 42;
diff --git a/examples/worklet/src/worklet/complex.worklet.js b/examples/worklet/src/worklet/complex.worklet.js
@@ -0,0 +1,19 @@
+import { answer } from "./answer";
+class PortProcessor extends AudioWorkletProcessor {
+	constructor() {
+		super();
+		this.port.onmessage = event => {
+			// Handling data from the node.
+			console.log(event.data);
+		};
+
+		this.port.postMessage("Hi!" + answer);
+	}
+
+	process(inputs, outputs, parameters) {
+		// Do nothing, producing silent output.
+		return true;
+	}
+}
+
+registerProcessor("complex-processor", PortProcessor);
diff --git a/examples/worklet/src/worklet/simple.worklet.js b/examples/worklet/src/worklet/simple.worklet.js
@@ -0,0 +1,18 @@
+class PortProcessor extends AudioWorkletProcessor {
+	constructor() {
+		super();
+		this.port.onmessage = event => {
+			// Handling data from the node.
+			console.log(event.data);
+		};
+
+		this.port.postMessage("Hi!");
+	}
+
+	process(inputs, outputs, parameters) {
+		// Do nothing, producing silent output.
+		return true;
+	}
+}
+
+registerProcessor("port-processor", PortProcessor);