Get wasm loading in extension

Cargo.toml

@@ -74,7 +74,7 @@ slab = "0.4.2"
 futures-channel = "0.3.21"
 futures-util = { version = "0.3", default-features = false }
 rustc-hash = "1.1.0"
-wasm-bindgen = "0.2.79"
+wasm-bindgen = "0.2.87"
 html_parser = "0.7.0"
 
 # This is a "virtual package"

packages/extension/.vscode/launch.json

@@ -1,7 +1,34 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": []
-}
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": [
+				"${workspaceFolder}/out/**/*.js"
+			]
+			// "preLaunchTask": "${defaultBuildTask}"
+		},
+		{
+			"name": "Extension Tests",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}",
+				"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
+			],
+			"outFiles": [
+				"${workspaceFolder}/out/test/**/*.js"
+			],
+			"preLaunchTask": "${defaultBuildTask}"
+		}
+	]
+}

packages/extension/.vscode/tasks.json

@@ -0,0 +1,20 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "watch",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never"
+			},
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			}
+		}
+	]
+}

packages/extension/package.json

@@ -18,12 +18,13 @@
         "Programming Languages"
     ],
     "activationEvents": [
+        "*",
         "onCommand:extension.htmlToDioxusRsx",
         "onCommand:extension.htmlToDioxusComponent",
         "onCommand:extension.formatRsx",
         "onCommand:extension.formatRsxDocument"
     ],
-    "main": "./out/main",
+    "main": "./out/main.js",
     "extensionKind": [
         "ui",
         "workspace"
@@ -76,10 +77,17 @@
     },
     "scripts": {
         "vscode:prepublish": "npm run build-base -- --minify",
-        "package": "vsce package -o rust-analyzer.vsix",
-        "build-base": "node src/build.js",
-        "build": "npm run build-base -- --sourcemap",
-        "watch": "npm run build-base -- --sourcemap --watch",
+        "// package": "vsce package -o rust-analyzer.vsix",
+        "// build-base": "node src/build.js",
+        "build-wasm": "cargo build --target wasm32-unknown-unknown --release && cp ../../target/wasm32-unknown-unknown/release/dioxus_ext.wasm pkg/",
+        "bind-wasm": "wasm-bindgen --out-dir=pkg --target=web --omit-default-module-path --omit-imports pkg/dioxus_ext.wasm",
+        "build-base": "npm run build-wasm && npm run bind-wasm && webpack",
+        "webpack": "webpack --mode development",
+        "webpack-dev": "webpack --mode development --watch",
+        "package": "webpack --mode production --devtool hidden-source-map",
+        "test-compile": "tsc -p ./",
+        "build": "npm run build-base -- --devtool hidden-source-map",
+        "watch": "npm run build-base -- --devtool hidden-source-map --watch",
         "lint": "prettier --check . && eslint -c .eslintrc.js --ext ts ./src ./tests",
         "fix": "prettier --write . && eslint -c .eslintrc.js --ext ts ./src ./tests --fix",
         "pretest": "tsc && npm run build",
@@ -91,15 +99,16 @@
         "@typescript-eslint/eslint-plugin": "^5.30.5",
         "@typescript-eslint/parser": "^5.30.5",
         "cross-env": "^7.0.3",
-        "esbuild": "^0.14.27",
-        "esbuild-plugin-wasm": "^1.1.0",
         "eslint": "^8.19.0",
         "eslint-config-prettier": "^8.5.0",
         "ovsx": "^0.5.1",
         "prettier": "^2.6.2",
+        "ts-loader": "^9.4.4",
         "tslib": "^2.3.0",
         "typescript": "^4.7.4",
-        "vsce": "^2.7.0"
+        "vsce": "^2.7.0",
+        "webpack": "^5.88.1",
+        "webpack-cli": "^5.1.4"
     },
     "dependencies": {
         "dioxus-ext": "./pkg",

packages/extension/pkg/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "dioxus-ext",
+  "version": "0.1.0",
+  "files": [
+    "dioxus_ext_bg.wasm",
+    "dioxus_ext.js",
+    "dioxus_ext.d.ts",
+    "dioxus_ext_bg.js",
+    "dioxus_ext_bg.d.ts",
+    "dioxus_ext_bg.wasm.d.ts"
+  ],
+  "main": "dioxus_ext.js",
+  "types": "dioxus_ext.d.ts"
+}

packages/extension/src/build.js

@@ -1,23 +0,0 @@
-// build.ts
-import('esbuild').then((esbuild) => {
-  import('esbuild-plugin-wasm').then((wasmLoader) => {
-    // "build-base": "esbuild ./src/main.ts --bundle --outfile=out/main.js --external:vscode --format=cjs --platform=node --target=node16",
-    esbuild.build({
-      entryPoints: ['src/main.ts'],
-      outfile: 'out/main.js',
-      bundle: true,
-      platform: 'node',
-      target: 'node16',
-      format: 'esm',
-      external: ['vscode'],
-      plugins: [
-        wasmLoader.wasmLoader({
-          mode: 'embedded'
-        })
-      ]
-    });
-  });
-});
-
-
-

packages/extension/src/lib.rs

@@ -25,10 +25,3 @@ pub fn translate_rsx(contents: String, component: bool) -> String {
 
     out
 }
-
-// rsx! {
-//     div {}
-//     div {}
-//     div {}
-//     div {} div {}
-// }

packages/extension/src/main.ts

@@ -1,9 +1,9 @@
 import * as vscode from 'vscode';
-import { translate_rsx } from 'dioxus-ext';
-
+import init, { translate_rsx } from 'dioxus-ext';
 
 export async function activate(context: vscode.ExtensionContext) {
-
+	const wasmSourceCode = await vscode.workspace.fs.readFile(vscode.Uri.joinPath(context.extensionUri, "./pkg/dioxus_ext_bg.wasm"));
+	const wasmPromise = await init(wasmSourceCode);
 
 	context.subscriptions.push(
 		vscode.commands.registerCommand('extension.htmlToDioxusRsx', () => translate(false)),
@@ -15,6 +15,7 @@ export async function activate(context: vscode.ExtensionContext) {
 }
 
 function translate(component: boolean) {
+
 	const editor = vscode.window.activeTextEditor;
 
 	if (!editor) return;
@@ -32,23 +33,6 @@ function translate(component: boolean) {
 	} else {
 		vscode.window.showWarningMessage(`Errors occurred while translating, make sure this block of HTML is valid`);
 	}
-
-	// const params = ["translate"];
-	// if (component) params.push("--component");
-	// params.push("--raw", html);
-
-	// const child_proc = spawn(serverPath, params);
-
-	// let result = '';
-	// child_proc.stdout?.on('data', data => result += data);
-
-	// child_proc.on('close', () => {
-	// 	if (result.length > 0) editor.edit(editBuilder => editBuilder.replace(editor.selection, result));
-	// });
-
-	// child_proc.on('error', (err) => {
-	// 	vscode.window.showWarningMessage(`Errors occurred while translating. Make sure you have the most recent Dioxus-CLI installed! \n${err}`);
-	// });
 }
 
 

packages/extension/tsconfig.json

@@ -12,7 +12,7 @@
 	},
 	"exclude": [
 		"node_modules",
-		".vscode-test"
-		// "src/pkg"
+		".vscode-test",
+		"out"
 	]
 }

packages/extension/webpack.config.js

@@ -0,0 +1,66 @@
+//@ts-check
+
+'use strict';
+
+const path = require('path');
+const webpack = require('webpack');
+
+/**@type {import('webpack').Configuration}*/
+const config = {
+  target: 'webworker', // vscode extensions run in webworker context for VS Code web 📖 -> https://webpack.js.org/configuration/target/#target
+  experiments: {
+
+      asyncWebAssembly: true,
+      layers: true,
+
+
+    // asyncWebAssembly: true,
+    // syncWebAssembly: true,
+  },
+  entry: './src/main.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
+  output: {
+    // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
+    path: path.resolve(__dirname, 'out'),
+    filename: 'main.js',
+    libraryTarget: 'commonjs2',
+    devtoolModuleFilenameTemplate: '../[resource-path]',
+    publicPath: '',
+  },
+  devtool: 'source-map',
+  externals: {
+    vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
+  },
+  resolve: {
+    // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
+    mainFields: ['browser', 'module', 'main'], // look for `browser` entry point in imported node modules
+    extensions: ['.ts', '.js'],
+    alias: {
+      // provides alternate implementation for node module and source files
+    },
+    fallback: {
+      // Webpack 5 no longer polyfills Node.js core modules automatically.
+      // see https://webpack.js.org/configuration/resolve/#resolvefallback
+      // for the list of Node.js core module polyfills.
+      // "util": require.resolve("util/")
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'ts-loader'
+          }
+        ]
+      }
+      // {
+      //   test: /\.wasm$/,
+      //   type: "asset/inline",
+      // }
+    ]
+  },
+
+};
+module.exports = config;