Update the stdweb example

This commit is contained in:
Bradlee Speice 2020-07-24 14:37:15 -04:00
parent b9223f39db
commit bbc881c0e1
17 changed files with 2922 additions and 5786 deletions

5
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,5 @@
{
"prettier.proseWrap": "always",
"prettier.printWidth": 100,
"editor.formatOnSave": true
}

View File

@ -2,10 +2,16 @@
It's 2020, and a lot has changed.
- With the advent of Webpack 5, the previous issues with using WASM in Electron have been vanquished. I can only assume some form of sorcery was involved. All examples have been updated to use the new version.
- `wasm32-unknown-unknown` targets are enabled for stable Rust
- The previous [`percy`](https://github.com/chinedufn/percy) example has been removed. While work continues on the project, there haven't been any releases.
- With the advent of Webpack 5, the previous issues with using WASM in Electron have been
vanquished. I can only assume some form of sorcery was involved. All examples have been updated to
use the new version.
- `wasm32-unknown-unknown` targets are enabled for stable Rust, everything updated to 2018 edition
- The previous [`percy`](https://github.com/chinedufn/percy) example has been removed. While work
continues on the project, there haven't been any releases.
- `binaryen` has been removed.
- A new framework [`seed`](https://github.com/seed-rs/seed) as been added as an example.
- The `stdweb` example has been freshened up:
- Use `#[wasm_bindgen(start)]` to remove the app loader script
- Don't use `innerHTML`, just set the text content directly.
Each app is a starter example, and can be run with `yarn install && yarn start`.

View File

@ -1,7 +1,3 @@
#[macro_use]
extern crate cfg_if;
extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;
cfg_if! {

View File

@ -1,42 +0,0 @@
{
"env": {
"development": {
"application/javascript": {
"presets": [
[
"env",
{
"targets": {
"electron": 2
}
}
],
"react"
],
"plugins": [
"transform-async-to-generator"
],
"sourceMaps": "inline"
}
},
"production": {
"application/javascript": {
"presets": [
[
"env",
{
"targets": {
"electron": 2
}
}
],
"react"
],
"plugins": [
"transform-async-to-generator"
],
"sourceMaps": "none"
}
}
}
}

View File

@ -1,9 +0,0 @@
{
"extends": "eslint-config-airbnb",
"rules": {
"import/extensions": 0,
"import/no-extraneous-dependencies": 0,
"import/no-unresolved": [2, { "ignore": ["electron"] }],
"linebreak-style": 0
}
}

94
stdweb/.gitignore vendored
View File

@ -1,4 +1,94 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
.DS_Store
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
Cargo.lock
target/
jspm_packages/
# TypeScript v1 declaration files
typings/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next
# nuxt.js build output
.nuxt
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# Webpack
.webpack/
# Electron-Forge
out/
node_modules/
dist/
target/

258
stdweb/Cargo.lock generated Normal file
View File

@ -0,0 +1,258 @@
# This file is automatically @generated by Cargo.
# It is not intended for manual editing.
[[package]]
name = "base-x"
version = "0.2.6"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1b20b618342cf9891c292c4f5ac2cde7287cc5c87e87e9c769d617793607dec1"
[[package]]
name = "bumpalo"
version = "3.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2e8c087f005730276d1096a652e92a8bacee2e2472bcc9715a74d2bec38b5820"
[[package]]
name = "cfg-if"
version = "0.1.10"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "4785bdd1c96b2a846b2bd7cc02e86b6b3dbf14e7e53446c4f54c92a361040822"
[[package]]
name = "discard"
version = "1.0.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "212d0f5754cb6769937f4501cc0e67f4f4483c8d2c3e1e922ee9edbe4ab4c7c0"
[[package]]
name = "itoa"
version = "0.4.6"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "dc6f3ad7b9d11a0c00842ff8de1b60ee58661048eb8049ed33c73594f359d7e6"
[[package]]
name = "lazy_static"
version = "1.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646"
[[package]]
name = "log"
version = "0.4.11"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "4fabed175da42fed1fa0746b0ea71f412aa9d35e76e95e59b192c64b9dc2bf8b"
dependencies = [
"cfg-if",
]
[[package]]
name = "proc-macro2"
version = "1.0.19"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "04f5f085b5d71e2188cb8271e5da0161ad52c3f227a661a3c135fdf28e258b12"
dependencies = [
"unicode-xid",
]
[[package]]
name = "quote"
version = "1.0.7"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "aa563d17ecb180e500da1cfd2b028310ac758de548efdd203e18f283af693f37"
dependencies = [
"proc-macro2",
]
[[package]]
name = "rustc_version"
version = "0.2.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "138e3e0acb6c9fb258b19b67cb8abd63c00679d2851805ea151465464fe9030a"
dependencies = [
"semver",
]
[[package]]
name = "ryu"
version = "1.0.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "71d301d4193d031abdd79ff7e3dd721168a9572ef3fe51a1517aba235bd8f86e"
[[package]]
name = "semver"
version = "0.9.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1d7eb9ef2c18661902cc47e535f9bc51b78acd254da71d375c2f6720d9a40403"
dependencies = [
"semver-parser",
]
[[package]]
name = "semver-parser"
version = "0.7.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "388a1df253eca08550bef6c72392cfe7c30914bf41df5269b68cbd6ff8f570a3"
[[package]]
name = "serde"
version = "1.0.114"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5317f7588f0a5078ee60ef675ef96735a1442132dc645eb1d12c018620ed8cd3"
[[package]]
name = "serde_derive"
version = "1.0.114"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2a0be94b04690fbaed37cddffc5c134bf537c8e3329d53e982fe04c374978f8e"
dependencies = [
"proc-macro2",
"quote",
"syn",
]
[[package]]
name = "serde_json"
version = "1.0.56"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "3433e879a558dde8b5e8feb2a04899cf34fdde1fafb894687e52105fc1162ac3"
dependencies = [
"itoa",
"ryu",
"serde",
]
[[package]]
name = "sha1"
version = "0.6.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2579985fda508104f7587689507983eadd6a6e84dd35d6d115361f530916fa0d"
[[package]]
name = "stdweb"
version = "0.4.20"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d022496b16281348b52d0e30ae99e01a73d737b2f45d38fed4edf79f9325a1d5"
dependencies = [
"discard",
"rustc_version",
"serde",
"serde_json",
"stdweb-derive",
"stdweb-internal-macros",
"stdweb-internal-runtime",
"wasm-bindgen",
]
[[package]]
name = "stdweb-derive"
version = "0.5.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "c87a60a40fccc84bef0652345bbbbbe20a605bf5d0ce81719fc476f5c03b50ef"
dependencies = [
"proc-macro2",
"quote",
"serde",
"serde_derive",
"syn",
]
[[package]]
name = "stdweb-internal-macros"
version = "0.2.9"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "58fa5ff6ad0d98d1ffa8cb115892b6e69d67799f6763e162a1c9db421dc22e11"
dependencies = [
"base-x",
"proc-macro2",
"quote",
"serde",
"serde_derive",
"serde_json",
"sha1",
"syn",
]
[[package]]
name = "stdweb-internal-runtime"
version = "0.1.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "213701ba3370744dcd1a12960caa4843b3d68b4d1c0a5d575e0d65b2ee9d16c0"
[[package]]
name = "stdweb_electron"
version = "0.1.0"
dependencies = [
"stdweb",
"wasm-bindgen",
]
[[package]]
name = "syn"
version = "1.0.35"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "fb7f4c519df8c117855e19dd8cc851e89eb746fe7a73f0157e0d95fdec5369b0"
dependencies = [
"proc-macro2",
"quote",
"unicode-xid",
]
[[package]]
name = "unicode-xid"
version = "0.2.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f7fe0bb3479651439c9112f72b6c505038574c9fbb575ed1bf3b797fa39dd564"
[[package]]
name = "wasm-bindgen"
version = "0.2.65"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f3edbcc9536ab7eababcc6d2374a0b7bfe13a2b6d562c5e07f370456b1a8f33d"
dependencies = [
"cfg-if",
"wasm-bindgen-macro",
]
[[package]]
name = "wasm-bindgen-backend"
version = "0.2.65"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "89ed2fb8c84bfad20ea66b26a3743f3e7ba8735a69fe7d95118c33ec8fc1244d"
dependencies = [
"bumpalo",
"lazy_static",
"log",
"proc-macro2",
"quote",
"syn",
"wasm-bindgen-shared",
]
[[package]]
name = "wasm-bindgen-macro"
version = "0.2.65"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "eb071268b031a64d92fc6cf691715ca5a40950694d8f683c5bb43db7c730929e"
dependencies = [
"quote",
"wasm-bindgen-macro-support",
]
[[package]]
name = "wasm-bindgen-macro-support"
version = "0.2.65"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "cf592c807080719d1ff2f245a687cbadb3ed28b2077ed7084b47aba8b691f2c6"
dependencies = [
"proc-macro2",
"quote",
"syn",
"wasm-bindgen-backend",
"wasm-bindgen-shared",
]
[[package]]
name = "wasm-bindgen-shared"
version = "0.2.65"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "72b6c0220ded549d63860c78c38f3bcc558d1ca3f4efa74942c536ddbbb55e87"

View File

@ -1,16 +1,12 @@
[package]
authors = ["Bradlee Speice"]
categories = ["wasm"]
description = "A no-framework WASM Electron app"
license = "Apache-2.0/MIT"
name = "stdweb_electron"
readme = "./README.md"
repository = "https://github.com/rustwasm/rust-webpack-template"
version = "0.1.0"
authors = ["Bradlee Speice <bradlee@speice.io>"]
edition = "2018"
[lib]
crate-type = ["cdylib"]
crate-type = ["cdylib", "rlib"]
[dependencies]
stdweb = "0.4"
stdweb = "0.4.20"
wasm-bindgen = "0.2"

View File

@ -1,20 +1,18 @@
DIR="$(dirname $0)"
WASM_DIR="$DIR/target/wasm32-unknown-unknown"
WASM_NAME="$(cat "$DIR/Cargo.toml" | grep name | sed 's/name = "//' | sed 's/"//g')"
APP_DIR="$DIR/dist/"
NAME="$(cat "$DIR/Cargo.toml" | grep name | sed 's/name = "//' | sed 's/"//g')"
APP_DIR="$DIR/dist"
if [ ! -d "$APP_DIR" ]; then
mkdir "$APP_DIR"
fi
cp "$DIR/static/"* "$APP_DIR"
if [ -z "$(which cargo)" ]; then
echo 'Must install `cargo` before proceeding. Please see https://rustup.rs/ for more information.'
exit 1
fi
cargo +nightly build --target=wasm32-unknown-unknown && \
wasm-bindgen "$WASM_DIR/debug/$WASM_NAME.wasm" --out-dir "$APP_DIR" --no-typescript && \
# Have to use --mode=development so we can patch out the call to instantiateStreaming
"$DIR/node_modules/webpack-cli/bin/cli.js" --mode=development "$APP_DIR/app_loader.js" -o "$APP_DIR/bundle.js" && \
sed -i 's/.*instantiateStreaming.*//g' "$APP_DIR/bundle.js"
# Note: We'd normally prefer to use something like `wasm-pack` as a "production-ready" packager.
# However, when `wasm-pack` runs, it uses `wasm-bindgen` (which ultimately uses webpack 4.X) to
# build the Javascript bindings and thus still suffers from webpack/webpack#7918. Because we use
# the webpack CLI directly here, we benefit from changes in 5.X (specifically,
# the `asyncWebAssembly` experiment).
cargo build --target=wasm32-unknown-unknown && \
wasm-bindgen "$WASM_DIR/debug/$NAME.wasm" --out-dir "$APP_DIR" && \
"$DIR/node_modules/webpack-cli/bin/cli.js" "$APP_DIR/$NAME.js" -o "$APP_DIR/bundle.js"

View File

@ -1,66 +1,61 @@
{
"name": "electron_percy_wasm",
"productName": "electron_percy_wasm",
"version": "1.0.0",
"description": "My Electron application description",
"main": "dist/index.js",
"scripts": {
"prestart": "./build.sh",
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"lint": "eslint src"
},
"keywords": [],
"author": "bspeice",
"license": "MIT",
"config": {
"forge": {
"make_targets": {
"win32": [
"squirrel"
],
"darwin": [
"zip"
],
"linux": [
"deb",
"rpm"
]
},
"electronPackagerConfig": {
"packageManager": "yarn"
},
"electronWinstallerConfig": {
"name": "electron_percy_wasm"
},
"electronInstallerDebian": {},
"electronInstallerRedhat": {},
"github_repository": {
"owner": "",
"name": ""
},
"windowsStoreConfig": {
"packageName": "",
"name": "electron_percy_wasm"
}
"name": "seed",
"productName": "seed",
"version": "1.0.0",
"description": "My Electron application description",
"main": "dist/index.js",
"scripts": {
"prestart": "./build.sh",
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "echo \"No linting configured\""
},
"keywords": [],
"author": {
"name": "Bradlee Speice",
"email": "bradlee@speice.io"
},
"license": "MIT",
"config": {
"forge": {
"packagerConfig": {},
"makers": [
{
"name": "@electron-forge/maker-squirrel",
"config": {
"name": "seed"
}
},
{
"name": "@electron-forge/maker-zip",
"platforms": [
"darwin"
]
},
{
"name": "@electron-forge/maker-deb",
"config": {}
},
{
"name": "@electron-forge/maker-rpm",
"config": {}
}
},
"dependencies": {
"electron-compile": "^6.4.3",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
},
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"electron-forge": "^5.2.2",
"electron-prebuilt-compile": "2.0.7",
"eslint": "^3",
"eslint-config-airbnb": "^15",
"eslint-plugin-import": "^2",
"eslint-plugin-jsx-a11y": "^5",
"eslint-plugin-react": "^7"
]
}
},
"dependencies": {
"electron-squirrel-startup": "^1.0.0",
"webpack": "^5.0.0-beta.22",
"webpack-cli": "^3.3.12"
},
"devDependencies": {
"@electron-forge/cli": "6.0.0-beta.52",
"@electron-forge/maker-deb": "6.0.0-beta.52",
"@electron-forge/maker-rpm": "6.0.0-beta.52",
"@electron-forge/maker-squirrel": "6.0.0-beta.52",
"@electron-forge/maker-zip": "6.0.0-beta.52",
"electron": "9.1.1"
}
}

View File

@ -1,18 +1,12 @@
#![feature(custom_attribute)]
extern crate stdweb;
extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;
use stdweb::web::document;
use stdweb::web::INode;
use stdweb::web::IElement;
#[wasm_bindgen]
pub fn run() {
#[wasm_bindgen(start)]
pub fn main() {
let doc = document();
let val = doc.create_element("p").unwrap();
val.set_attribute("innerHTML", "IT IS ALIVE").unwrap();
val.set_text_content("IT IS ALIVE");
doc.body().unwrap().append_child(&val);
}

View File

@ -1,9 +0,0 @@
const app = import("./stdweb_electron")
app.then(module => {
console.log("Finished resolving application bundle")
console.log(module)
module.run()
}, (e) => {
console.log("Unable to resolve application bundle: ")
console.log(e)
})

6
stdweb/static/index.css Normal file
View File

@ -0,0 +1,6 @@
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin: auto;
max-width: 38rem;
padding: 2rem;
}

View File

@ -1,11 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>Loading...</p>
</body>
<script src="./bundle.js"/>
<script src="./bundle.js"></script>
</html>

View File

@ -1,29 +1,23 @@
import { app, BrowserWindow } from 'electron';
const { app, BrowserWindow } = require('electron');
const path = require('path');
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
app.quit();
}
const createWindow = () => {
// Create the browser window.
mainWindow = new BrowserWindow({
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
// and load the index.html of the app.
mainWindow.loadURL(`file://${__dirname}/index.html`);
mainWindow.loadFile(path.join(__dirname, 'index.html'));
// Open the DevTools.
mainWindow.webContents.openDevTools();
// Emitted when the window is closed.
mainWindow.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
};
// This method will be called when Electron has finished
@ -31,10 +25,10 @@ const createWindow = () => {
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
@ -43,7 +37,7 @@ app.on('window-all-closed', () => {
app.on('activate', () => {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});

6
stdweb/webpack.config.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
experiments: {
asyncWebAssembly: true,
importAsync: true,
}
}

File diff suppressed because it is too large Load Diff