mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-22 20:23:09 +00:00
Get wasm loading in extension
This commit is contained in:
Jonathan Kelley
parent
f59cacb2a0
commit
b5312732ba
11 changed files with 2080 additions and 604 deletions
|
|
@ -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"
|
||||
|
|
|
|||
31
packages/extension/.vscode/launch.json
vendored
31
packages/extension/.vscode/launch.json
vendored
|
|
@ -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
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": []
|
||||
"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}"
|
||||
}
|
||||
]
|
||||
}
|
||||
20
packages/extension/.vscode/tasks.json
vendored
Normal file
20
packages/extension/.vscode/tasks.json
vendored
Normal file
|
|
@ -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
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
2460
packages/extension/package-lock.json
generated
2460
packages/extension/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -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",
|
||||
|
|
|
|||
14
packages/extension/pkg/package.json
Normal file
14
packages/extension/pkg/package.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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'
|
||||
})
|
||||
]
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
@ -25,10 +25,3 @@ pub fn translate_rsx(contents: String, component: bool) -> String {
|
|||
|
||||
out
|
||||
}
|
||||
|
||||
// rsx! {
|
||||
// div {}
|
||||
// div {}
|
||||
// div {}
|
||||
// div {} div {}
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -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}`);
|
||||
// });
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
".vscode-test"
|
||||
// "src/pkg"
|
||||
".vscode-test",
|
||||
"out"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
66
packages/extension/webpack.config.js
Normal file
66
packages/extension/webpack.config.js
Normal file
|
|
@ -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;
|
||||
Loading…
Reference in a new issue