Use wrapper in example

.vscode/settings.json

@@ -3,5 +3,6 @@
         "**/snapshots": true, // cargo-insta outputs
         "pkg": true, // wasm-pack build directory
         "target": true, // rust build directory
+        "**/node_modules": true, // node.js dependencies
     }
 }

examples/website/.gitignore

@@ -1,3 +0,0 @@
-reconcile.js
-reconcile_bg.wasm
-

examples/website/script.js

@@ -1,4 +1,4 @@
-import init, { mergeTextWithHistory } from "./reconcile.js";
+import { init, reconcileWithHistory } from "./dist/index.js";
 
 const originalTextArea = document.getElementById("original");
 const leftTextArea = document.getElementById("left");
@@ -37,16 +37,15 @@ function updateMergedText() {
     const left = leftTextArea.value;
     const right = rightTextArea.value;
 
-    const results = mergeTextWithHistory(original, left, right);
+    const results = reconcileWithHistory(original, left, right);
 
     mergedTextArea.innerHTML = "";
 
-    for (const result of results) {
+    for (const {text, history} of results.history) {
         const span = document.createElement("span");
-        span.className = result.history();
+        span.className = history;
-        span.textContent = result.text();
+        span.textContent = text;
         mergedTextArea.appendChild(span);
-        result.free();
     }
 }
 

reconcile-js/tsconfig.json

@@ -4,9 +4,14 @@
 		"target": "ESNext",
 		"strict": true,
 		"allowSyntheticDefaultImports": true,
+    	"esModuleInterop": true,
 		"moduleResolution": "bundler",
 		"declaration": true,
-		"declarationDir": "./dist/types"
+		"declarationDir": "./dist/types",
+		"outDir": "./dist",
+		"rootDir": "./src",
+		"skipLibCheck": true,
+		"inlineSourceMap": true
 	},
 	"exclude": [
 		"./dist"

reconcile-js/webpack.config.js

@@ -1,33 +1,37 @@
 const path = require("path");
-const webpack = require("webpack");
-const packageJson = require("./package.json");
 
 
 module.exports = {
-	entry: "./src/index.ts",
+    entry: "./src/index.ts",
-	module: {
+    module: {
-		rules: [
+        rules: [
-			{
+            {
-				test: /\.ts$/,
+                test: /\.ts$/,
-				use: ["ts-loader"]
+                use: ["ts-loader"]
-			},
+            },
-			{
+            {
-				test: /\.wasm$/,
+                test: /\.wasm$/,
-				type: "asset/inline"
+                type: "asset/inline"
-			}
+            }
-		]
+        ]
-	},
+    },
-	resolve: {
+    optimization: {
-		extensions: [".ts"],
+        // the consuming project should take care of minification
-		alias: {
+        minimize: false
-			root: __dirname,
+    },
-			src: path.resolve(__dirname, "src")
+    resolve: {
-		}
+        extensions: [".ts"],
-	},
+        alias: {
+            root: __dirname,
+            src: path.resolve(__dirname, "src")
+        }
+    },
     output: {
         path: path.resolve(__dirname, "dist"),
         filename: "index.js",
-        libraryTarget: "commonjs2"
+        libraryTarget: "module"
+    },
+    experiments: {
+        outputModule: true
     },
 };
- 

scripts/dev-website.sh

@@ -2,13 +2,11 @@
 
 set -e
 
-rm -rf pkg
-
 wasm-pack build --target web --features wasm
+cd reconcile-js
+npm run build
+cp -R dist ../examples/website
 
-cp -R pkg/reconcile.js examples/website/
+cd ../examples/website
-cp -R pkg/reconcile_bg.wasm examples/website/
-
-cd examples/website/
 
 python3 -m http.server $1 --bind 0.0.0.0