Compile wasm into plugin

plugin/esbuild.config.mjs

@@ -1,8 +1,9 @@
 import esbuild from "esbuild";
 import process from "process";
 import builtins from "builtin-modules";
-import fs from "fs";
+import path from "node:path";
-import path from "path";
+import fs from "node:fs";
+import { wasmPack } from "esbuild-plugin-wasm-pack";
 
 const banner = `/*
 THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
@@ -12,64 +13,6 @@ if you want to view the source, please visit the github repository of this plugi
 
 const prod = process.argv[2] === "production";
 
-const context = await esbuild.context({
-	banner: {
-		js: banner,
-	},
-	entryPoints: ["main.ts"],
-	bundle: true,
-	external: [
-		"obsidian",
-		"electron",
-		"@codemirror/autocomplete",
-		"@codemirror/collab",
-		"@codemirror/commands",
-		"@codemirror/language",
-		"@codemirror/lint",
-		"@codemirror/search",
-		"@codemirror/state",
-		"@codemirror/view",
-		"@lezer/common",
-		"@lezer/highlight",
-		"@lezer/lr",
-		...builtins,
-	],
-	format: "cjs",
-	target: "es2018",
-	logLevel: "info",
-	sourcemap: prod ? false : "inline",
-	treeShaking: true,
-	outfile: "build/main.js",
-	minify: prod,
-	plugins: [
-		{
-			name: "post-compile",
-			setup(build) {
-				build.onEnd((result) => {
-					if (result.errors.length === 0) {
-						copyFiles(
-							["manifest.json", "versions.json", ".hotreload"],
-							"/mnt/c/Users/Andras/Desktop/test/test/.obsidian/plugins/my-plugin"
-						);
-
-						copyFiles(
-							"build",
-							"/mnt/c/Users/Andras/Desktop/test/test/.obsidian/plugins/my-plugin"
-						);
-					}
-				});
-			},
-		},
-	],
-});
-
-if (prod) {
-	await context.rebuild();
-	process.exit(0);
-} else {
-	await context.watch();
-}
-
 async function copyFiles(sourceDir, destinationDir) {
 	try {
 		await fs.promises.mkdir(destinationDir, { recursive: true });
@@ -102,3 +45,95 @@ async function copyFiles(sourceDir, destinationDir) {
 		console.error("Error copying files:", err);
 	}
 }
+
+let wasmPlugin = {
+	name: "wasm",
+	setup(build) {
+		// Resolve ".wasm" files to a path with a namespace
+		build.onResolve({ filter: /\.wasm$/ }, (args) => {
+			if (args.resolveDir === "") {
+				return; // Ignore unresolvable paths
+			}
+			return {
+				path: path.isAbsolute(args.path)
+					? args.path
+					: path.join(args.resolveDir, args.path),
+				namespace: "wasm-binary",
+			};
+		});
+
+		// Virtual modules in the "wasm-binary" namespace contain the
+		// actual bytes of the WebAssembly file. This uses esbuild's
+		// built-in "binary" loader instead of manually embedding the
+		// binary data inside JavaScript code ourselves.
+		build.onLoad(
+			{ filter: /.*/, namespace: "wasm-binary" },
+			async (args) => ({
+				contents: await fs.promises.readFile(args.path),
+				loader: "binary",
+			})
+		);
+	},
+};
+const context = await esbuild.context({
+	banner: {
+		js: banner,
+	},
+	entryPoints: ["main.ts"],
+	bundle: true,
+	external: [
+		"obsidian",
+		"electron",
+		"@codemirror/autocomplete",
+		"@codemirror/collab",
+		"@codemirror/commands",
+		"@codemirror/language",
+		"@codemirror/lint",
+		"@codemirror/search",
+		"@codemirror/state",
+		"@codemirror/view",
+		"@lezer/common",
+		"@lezer/highlight",
+		"@lezer/lr",
+		...builtins,
+	],
+	format: "cjs",
+	target: "es2020",
+	logLevel: "info",
+	sourcemap: prod ? false : "inline",
+	treeShaking: false,
+	outfile: "build/main.js",
+	minify: prod,
+	plugins: [
+		wasmPlugin,
+		wasmPack({
+			target: "web",
+			path: "../backend/sync_wasm",
+		}),
+		{
+			name: "post-compile",
+			setup(build) {
+				build.onEnd((result) => {
+					if (result.errors.length === 0) {
+						copyFiles(
+							["manifest.json", "versions.json", ".hotreload"],
+							"/mnt/c/Users/Andras/Desktop/test/test/.obsidian/plugins/my-plugin"
+						);
+
+						copyFiles(
+							"build",
+							"/mnt/c/Users/Andras/Desktop/test/test/.obsidian/plugins/my-plugin"
+						);
+					}
+				});
+			},
+		},
+	],
+});
+
+if (prod) {
+	await context.rebuild();
+	process.exit(0);
+} else {
+	await context.watch();
+}

plugin/main.ts

@@ -9,7 +9,8 @@ import {
 	Setting,
 } from "obsidian";
 
-// Remember to rename these classes and interfaces!
+import * as plugin from "../backend/sync_wasm/pkg/sync_wasm.js";
+import * as wasmBin from "../backend/sync_wasm/pkg/sync_wasm_bg.wasm";
 
 interface MyPluginSettings {
 	mySetting: string;
@@ -26,6 +27,8 @@ export default class MyPlugin extends Plugin {
 		console.info('Starting plugin "Sample Plugin"');
 		await this.loadSettings();
 
+		await plugin.default(Promise.resolve(wasmBin.default));
+
 		// This creates an icon in the left ribbon.
 		const ribbonIconEl = this.addRibbonIcon(
 			"dice",
@@ -86,7 +89,7 @@ export default class MyPlugin extends Plugin {
 		// If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
 		// Using this function will automatically remove the event listener when this plugin is disabled.
 		this.registerDomEvent(document, "click", (evt: MouseEvent) => {
-			console.log("click", evt);
+			console.log("click", evt, plugin.greet());
 		});
 
 		// When registering intervals, this function will automatically clear the interval when the plugin is disabled.

plugin/package-lock.json

@@ -8,6 +8,9 @@
 			"name": "obsidian-sample-plugin",
 			"version": "1.0.0",
 			"license": "MIT",
+			"dependencies": {
+				"esbuild-plugin-wasm-pack": "^1.1.0"
+			},
 			"devDependencies": {
 				"@types/node": "^16.11.6",
 				"@typescript-eslint/eslint-plugin": "5.29.0",
@@ -15,10 +18,16 @@
 				"builtin-modules": "3.3.0",
 				"esbuild": "0.17.3",
 				"obsidian": "latest",
+				"sync-wasm": "file:../backend/sync_wasm/pkg",
 				"tslib": "2.4.0",
 				"typescript": "4.7.4"
 			}
 		},
+		"../backend/sync_wasm/pkg": {
+			"name": "sync-wasm",
+			"version": "0.1.0",
+			"dev": true
+		},
 		"node_modules/@codemirror/state": {
 			"version": "6.4.1",
 			"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz",
@@ -1032,6 +1041,19 @@
 				"@esbuild/win32-x64": "0.17.3"
 			}
 		},
+		"node_modules/esbuild-plugin-wasm-pack": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/esbuild-plugin-wasm-pack/-/esbuild-plugin-wasm-pack-1.1.0.tgz",
+			"integrity": "sha512-iBjr8LVJvS6ygAx3+voRUXT+GEu6UfxhNDBSs72LIyCwekQVAhDmEusuVzS2dw93F4QzFdV3nXoCSLfk4vcylQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.12.0"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://ko-fi.com/tschrock"
+			}
+		},
 		"node_modules/escape-string-regexp": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -2065,6 +2087,10 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/sync-wasm": {
+			"resolved": "../backend/sync_wasm/pkg",
+			"link": true
+		},
 		"node_modules/text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",

plugin/package.json

@@ -19,6 +19,7 @@
 		"esbuild": "0.17.3",
 		"obsidian": "latest",
 		"tslib": "2.4.0",
-		"typescript": "4.7.4"
+		"typescript": "4.7.4",
+		"esbuild-plugin-wasm-pack": "^1.1.0"
 	}
 }