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.textContent = result.text();
+        span.className = history;
+        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,6 +1,4 @@
 const path = require("path");
-const webpack = require("webpack");
-const packageJson = require("./package.json");
 
 
 module.exports = {
@@ -17,6 +15,10 @@ module.exports = {
             }
         ]
     },
+    optimization: {
+        // the consuming project should take care of minification
+        minimize: false
+    },
     resolve: {
         extensions: [".ts"],
         alias: {
@@ -27,7 +29,9 @@ module.exports = {
     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/
-cp -R pkg/reconcile_bg.wasm examples/website/
-
-cd examples/website/
+cd ../examples/website
 
 python3 -m http.server $1 --bind 0.0.0.0