zz

web/package.json

@@ -25,8 +25,10 @@
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
+    "@kcl-lang/wasm-lib": "^0.10.0-rc.1",
     "escape-html": "^1.0.3",
     "i": "^0.3.7",
-    "lz-string": "^1.4.4"
+    "lz-string": "^1.4.4",
+    "path-browserify": "^1.0.1"
   }
 }

web/src/index.html

@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <meta name="format-detection" content="telephone=no,address=no,email=no">
   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
-  <script src="pluto.js"></script>
   <title>KCL Programming Language Playground</title>
   <style>
     body, html {

web/src/js/editor/index.js

@@ -7,7 +7,12 @@ import './format';
 import { snippet } from './snippet';
 import './share';
 import './codemirror-kcl';
+import { load, invokeKCLRun, invokeKCLFmt } from "@kcl-lang/wasm-lib";
 
+const response = await fetch("kcl.wasm");
+const inst = await load({
+  data: await response.arrayBuffer(),
+});
 const source = document.getElementById('source');
 const run = document.getElementById('run');
 const outputContainer = document.getElementById('output-container');
@@ -48,27 +53,18 @@ export const Command = {
   },
 
   run: () => {
-    var data = { "body": Command.getValue() };
-    fetch(getBackendUrl() + playgroundOptions.compileURL, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(data)
-    })
-    .then(response => response.json())
-    .then(data => {
-      if (data.error) {
-        Command.clear();
-        Command.print(data.error);
-      } else {
-        Command.clear();
-        Command.print(data.body);
-      }
-    })
-    .catch(error => {
-      console.error('Error:', error);
+    const code = Command.getValue()
+    const result = invokeKCLRun(inst, {
+      filename: "test.k",
+      source: code,
     });
+    if (result.startsWith("ERROR:")) {
+      Command.clear();
+      Command.print(result.replace(/^ERROR:\s*/, ''));
+    } else {
+      Command.clear();
+      Command.print(result);
+    }
   },
 
   getValue: () => editor.getValue(),
@@ -94,26 +90,17 @@ export const Command = {
   },
 
   format: () => {
-    var data = { "body": Command.getValue() };
-    fetch(getBackendUrl() + playgroundOptions.fmtURL, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(data)
-    })
-    .then(response => response.json())
-    .then(data => {
-      if (data.error) {
-        Command.clear();
-        Command.print(data.error);
-      } else {
-        Command.setValue(data.body);
-      }
-    })
-    .catch(error => {
-      console.error('Error:', error);
+    const code = Command.getValue()
+    const result = invokeKCLFmt(inst, {
+      source: code,
     });
+    if (result.startsWith("ERROR:")) {
+      Command.clear();
+      Command.print(result.replace(/^ERROR:\s*/, ''));
+    } else {
+      Command.clear();
+      Command.print(result);
+    }
   },
 };
 

web/webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const webpack = require("webpack");
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
@@ -11,6 +12,7 @@ module.exports = {
   mode: IS_PRODUCTION ? 'production' : 'development',
 
   entry: path.resolve(__dirname, 'src/js/index.js'),
+  target: "web",
 
   output: {
     path: DIST_PATH,
@@ -23,6 +25,21 @@ module.exports = {
         test: /\.css$/,
         use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
       },
+      {
+        test: /\.m?js$/,
+        resourceQuery: { not: [/(raw|wasm)/] },
+      },
+      {
+        resourceQuery: /raw/,
+        type: "asset/source",
+      },
+      {
+        resourceQuery: /wasm/,
+        type: "asset/resource",
+        generator: {
+          filename: "wasm/[name][ext]",
+        },
+      },
     ],
   },
 
@@ -46,5 +63,20 @@ module.exports = {
         },
       ],
     }),
+    // needed by @wasmer/wasi
+    new webpack.ProvidePlugin({
+      Buffer: ["buffer", "Buffer"],
+    }),
   ],
+  externals: {
+    // needed by @wasmer/wasi
+    "wasmer_wasi_js_bg.wasm": true,
+  },
+  resolve: {
+    fallback: {
+      // needed by @wasmer/wasi
+      buffer: require.resolve("buffer/"),
+      path: require.resolve("path-browserify"),
+    },
+  },
 };