Add a minimal and plain stdweb example

minimal/.compilerc

@@ -0,0 +1,42 @@
+{
+  "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"
+      }
+    }
+  }
+}

minimal/.eslintrc

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

minimal/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+Cargo.lock
+target/
+dist/

minimal/Cargo.toml

@@ -0,0 +1,30 @@
+[package]
+authors = ["Bradlee Speice"]
+categories = ["wasm"]
+description = "A no-framework WASM Electron app"
+license = "Apache-2.0/MIT"
+name = "rust_webpack"
+readme = "./README.md"
+repository = "https://github.com/rustwasm/rust-webpack-template"
+version = "0.1.0"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+cfg-if = "0.1.5"
+wasm-bindgen = "0.2.19"
+
+# The `console_error_panic_hook` crate provides better debugging of panics by
+# logging them with `console.error`. This is great for development, but requires
+# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
+# code size when deploying.
+console_error_panic_hook = { version = "0.1.5", optional = true }
+
+# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
+# compared to the default allocator's ~10K. It is slower than the default
+# allocator, however.
+wee_alloc = { version = "0.4.2", optional = true }
+
+[features]
+default-features = ["console_error_panic_hook", "wee_alloc"]

minimal/build.sh

@@ -0,0 +1,25 @@
+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/"
+
+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
+
+if [ -z "$(which wasm-bindgen)" ]; then
+    echo "Installing wasm-bindgen-cli"
+    cargo install wasm-bindgen-cli
+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"

minimal/package.json

@@ -0,0 +1,66 @@
+{
+    "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"
+            }
+        }
+    },
+    "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"
+    }
+}

minimal/src/lib.rs

@@ -0,0 +1,58 @@
+#[macro_use]
+extern crate cfg_if;
+
+extern crate wasm_bindgen;
+use wasm_bindgen::prelude::*;
+
+cfg_if! {
+    // When the `console_error_panic_hook` feature is enabled, we can call the
+    // `set_panic_hook` function to get better error messages if we ever panic.
+    if #[cfg(feature = "console_error_panic_hook")] {
+        extern crate console_error_panic_hook;
+        use console_error_panic_hook::set_once as set_panic_hook;
+    }
+}
+
+cfg_if! {
+    // When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
+    // allocator.
+    if #[cfg(feature = "wee_alloc")] {
+        extern crate wee_alloc;
+        #[global_allocator]
+        static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
+    }
+}
+
+// Definitions of the functionality available in JS, which wasm-bindgen will
+// generate shims for today (and eventually these should be near-0 cost!)
+//
+// These definitions need to be hand-written today but the current vision is
+// that we'll use WebIDL to generate this `extern` block into a crate which you
+// can link and import. There's a tracking issue for this at
+// https://github.com/rustwasm/wasm-bindgen/issues/42
+//
+// In the meantime these are written out by hand and correspond to the names and
+// signatures documented on MDN, for example
+#[wasm_bindgen]
+extern "C" {
+    type HTMLDocument;
+    static document: HTMLDocument;
+    #[wasm_bindgen(method)]
+    fn createElement(this: &HTMLDocument, tagName: &str) -> Element;
+    #[wasm_bindgen(method, getter)]
+    fn body(this: &HTMLDocument) -> Element;
+
+    type Element;
+    #[wasm_bindgen(method, setter = innerHTML)]
+    fn set_inner_html(this: &Element, html: &str);
+    #[wasm_bindgen(method, js_name = appendChild)]
+    fn append_child(this: &Element, other: Element);
+}
+
+// Called by our JS entry point to run the example
+#[wasm_bindgen]
+pub fn run() {
+    let val = document.createElement("p");
+    val.set_inner_html("IT IS ALIVE");
+    document.body().append_child(val);
+}

minimal/static/app_loader.js

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

minimal/static/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <body>
+  </body>
+  <script src="./bundle.js"/>
+</html>

minimal/static/index.js

@@ -0,0 +1,52 @@
+import { app, BrowserWindow } from 'electron';
+
+// 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;
+
+const createWindow = () => {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+  });
+
+  // and load the index.html of the app.
+  mainWindow.loadURL(`file://${__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
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow);
+
+// Quit when all windows are closed.
+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();
+  }
+});
+
+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) {
+    createWindow();
+  }
+});
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and import them here.

percy/Cargo.toml

@@ -1,5 +1,5 @@
 [package]
-name = "electron_percy_wasm"
+name = "percy"
 version = "0.1.0"
 authors = ["Bradlee Speice <bradlee@speice.io>"]
 

percy/static/app.js

@@ -1,5 +0,0 @@
-import { main } from "./electron_percy_wasm"
-
-let rootNode = document.getElementById('root')
-rootNode.parentElement.replaceChild(main(), rootNode)
-rootNode = document.getElementById('root')

percy_patched_webpack/Cargo.toml

@@ -1,5 +1,5 @@
 [package]
-name = "electron_percy_wasm"
+name = "percy"
 version = "0.1.0"
 authors = ["Bradlee Speice <bradlee@speice.io>"]
 

percy_patched_webpack/static/app.js

@@ -1,5 +0,0 @@
-import { main } from "./electron_percy_wasm"
-
-let rootNode = document.getElementById('root')
-rootNode.parentElement.replaceChild(main(), rootNode)
-rootNode = document.getElementById('root')

percy_patched_webpack/static/app_loader.js

@@ -1,6 +1,9 @@
-const app = import("./app")
-app.then(() => {
+const app = import("./percy")
+app.then(module => {
     console.log("Finished resolving application bundle")
+    let rootNode = document.getElementById('root')
+    rootNode.parentElement.replaceChild(module.main(), rootNode)
+    rootNode = document.getElementById('root')
 }, (e) => {
     console.log("Unable to resolve application bundle: ")
     console.log(e)

stdweb/.compilerc

@@ -0,0 +1,42 @@
+{
+  "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"
+      }
+    }
+  }
+}

stdweb/.eslintrc

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

stdweb/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+Cargo.lock
+target/
+dist/

stdweb/Cargo.toml

@@ -0,0 +1,16 @@
+[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"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+stdweb = "0.4"
+wasm-bindgen = "0.2"

stdweb/build.sh

@@ -0,0 +1,20 @@
+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/"
+
+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"

stdweb/package.json

@@ -0,0 +1,66 @@
+{
+    "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"
+            }
+        }
+    },
+    "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"
+    }
+}

stdweb/src/lib.rs

@@ -0,0 +1,18 @@
+#![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() {
+    let doc = document();
+    let val = doc.create_element("p").unwrap();
+    val.set_attribute("innerHTML", "IT IS ALIVE").unwrap();
+    doc.body().unwrap().append_child(&val);
+}

stdweb/static/app_loader.js

@@ -0,0 +1,9 @@
+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)
+})

stdweb/static/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <body>
+    <p>Loading...</p>
+  </body>
+  <script src="./bundle.js"/>
+</html>

stdweb/static/index.js

@@ -0,0 +1,52 @@
+import { app, BrowserWindow } from 'electron';
+
+// 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;
+
+const createWindow = () => {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+  });
+
+  // and load the index.html of the app.
+  mainWindow.loadURL(`file://${__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
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow);
+
+// Quit when all windows are closed.
+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();
+  }
+});
+
+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) {
+    createWindow();
+  }
+});
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and import them here.