Browse Source

Add a minimal and plain stdweb example

Bradlee Speice 10 months ago
parent
commit
5cb79f2828

+ 42
- 0
minimal/.compilerc View File

@@ -0,0 +1,42 @@
1
+{
2
+  "env": {
3
+    "development": {
4
+      "application/javascript": {
5
+        "presets": [
6
+          [
7
+            "env",
8
+            {
9
+              "targets": {
10
+                "electron": 2
11
+              }
12
+            }
13
+          ],
14
+          "react"
15
+        ],
16
+        "plugins": [
17
+          "transform-async-to-generator"
18
+        ],
19
+        "sourceMaps": "inline"
20
+      }
21
+    },
22
+    "production": {
23
+      "application/javascript": {
24
+        "presets": [
25
+          [
26
+            "env",
27
+            {
28
+              "targets": {
29
+                "electron": 2
30
+              }
31
+            }
32
+          ],
33
+          "react"
34
+        ],
35
+        "plugins": [
36
+          "transform-async-to-generator"
37
+        ],
38
+        "sourceMaps": "none"
39
+      }
40
+    }
41
+  }
42
+}

+ 9
- 0
minimal/.eslintrc View File

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

+ 4
- 0
minimal/.gitignore View File

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

+ 30
- 0
minimal/Cargo.toml View File

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

+ 25
- 0
minimal/build.sh View File

@@ -0,0 +1,25 @@
1
+DIR="$(dirname $0)"
2
+WASM_DIR="$DIR/target/wasm32-unknown-unknown"
3
+WASM_NAME="$(cat "$DIR/Cargo.toml" | grep name | sed 's/name = "//' | sed 's/"//g')"
4
+APP_DIR="$DIR/dist/"
5
+
6
+if [ ! -d "$APP_DIR" ]; then
7
+    mkdir "$APP_DIR"
8
+fi
9
+cp "$DIR/static/"* "$APP_DIR"
10
+
11
+if [ -z "$(which cargo)" ]; then
12
+    echo 'Must install `cargo` before proceeding. Please see https://rustup.rs/ for more information.'
13
+    exit 1
14
+fi
15
+
16
+if [ -z "$(which wasm-bindgen)" ]; then
17
+    echo "Installing wasm-bindgen-cli"
18
+    cargo install wasm-bindgen-cli
19
+fi
20
+
21
+cargo +nightly build --target=wasm32-unknown-unknown && \
22
+    wasm-bindgen "$WASM_DIR/debug/$WASM_NAME.wasm" --out-dir "$APP_DIR" --no-typescript && \
23
+    # Have to use --mode=development so we can patch out the call to instantiateStreaming
24
+    "$DIR/node_modules/webpack-cli/bin/cli.js" --mode=development "$APP_DIR/app_loader.js" -o "$APP_DIR/bundle.js" && \
25
+    sed -i 's/.*instantiateStreaming.*//g' "$APP_DIR/bundle.js"

+ 66
- 0
minimal/package.json View File

@@ -0,0 +1,66 @@
1
+{
2
+    "name": "electron_percy_wasm",
3
+    "productName": "electron_percy_wasm",
4
+    "version": "1.0.0",
5
+    "description": "My Electron application description",
6
+    "main": "dist/index.js",
7
+    "scripts": {
8
+        "prestart": "./build.sh",
9
+        "start": "electron-forge start",
10
+        "package": "electron-forge package",
11
+        "make": "electron-forge make",
12
+        "lint": "eslint src"
13
+    },
14
+    "keywords": [],
15
+    "author": "bspeice",
16
+    "license": "MIT",
17
+    "config": {
18
+        "forge": {
19
+            "make_targets": {
20
+                "win32": [
21
+                    "squirrel"
22
+                ],
23
+                "darwin": [
24
+                    "zip"
25
+                ],
26
+                "linux": [
27
+                    "deb",
28
+                    "rpm"
29
+                ]
30
+            },
31
+            "electronPackagerConfig": {
32
+                "packageManager": "yarn"
33
+            },
34
+            "electronWinstallerConfig": {
35
+                "name": "electron_percy_wasm"
36
+            },
37
+            "electronInstallerDebian": {},
38
+            "electronInstallerRedhat": {},
39
+            "github_repository": {
40
+                "owner": "",
41
+                "name": ""
42
+            },
43
+            "windowsStoreConfig": {
44
+                "packageName": "",
45
+                "name": "electron_percy_wasm"
46
+            }
47
+        }
48
+    },
49
+    "dependencies": {
50
+        "electron-compile": "^6.4.3",
51
+        "webpack": "^4.17.1",
52
+        "webpack-cli": "^3.1.0"
53
+    },
54
+    "devDependencies": {
55
+        "babel-plugin-transform-async-to-generator": "^6.24.1",
56
+        "babel-preset-env": "^1.7.0",
57
+        "babel-preset-react": "^6.24.1",
58
+        "electron-forge": "^5.2.2",
59
+        "electron-prebuilt-compile": "2.0.7",
60
+        "eslint": "^3",
61
+        "eslint-config-airbnb": "^15",
62
+        "eslint-plugin-import": "^2",
63
+        "eslint-plugin-jsx-a11y": "^5",
64
+        "eslint-plugin-react": "^7"
65
+    }
66
+}

+ 58
- 0
minimal/src/lib.rs View File

@@ -0,0 +1,58 @@
1
+#[macro_use]
2
+extern crate cfg_if;
3
+
4
+extern crate wasm_bindgen;
5
+use wasm_bindgen::prelude::*;
6
+
7
+cfg_if! {
8
+    // When the `console_error_panic_hook` feature is enabled, we can call the
9
+    // `set_panic_hook` function to get better error messages if we ever panic.
10
+    if #[cfg(feature = "console_error_panic_hook")] {
11
+        extern crate console_error_panic_hook;
12
+        use console_error_panic_hook::set_once as set_panic_hook;
13
+    }
14
+}
15
+
16
+cfg_if! {
17
+    // When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
18
+    // allocator.
19
+    if #[cfg(feature = "wee_alloc")] {
20
+        extern crate wee_alloc;
21
+        #[global_allocator]
22
+        static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
23
+    }
24
+}
25
+
26
+// Definitions of the functionality available in JS, which wasm-bindgen will
27
+// generate shims for today (and eventually these should be near-0 cost!)
28
+//
29
+// These definitions need to be hand-written today but the current vision is
30
+// that we'll use WebIDL to generate this `extern` block into a crate which you
31
+// can link and import. There's a tracking issue for this at
32
+// https://github.com/rustwasm/wasm-bindgen/issues/42
33
+//
34
+// In the meantime these are written out by hand and correspond to the names and
35
+// signatures documented on MDN, for example
36
+#[wasm_bindgen]
37
+extern "C" {
38
+    type HTMLDocument;
39
+    static document: HTMLDocument;
40
+    #[wasm_bindgen(method)]
41
+    fn createElement(this: &HTMLDocument, tagName: &str) -> Element;
42
+    #[wasm_bindgen(method, getter)]
43
+    fn body(this: &HTMLDocument) -> Element;
44
+
45
+    type Element;
46
+    #[wasm_bindgen(method, setter = innerHTML)]
47
+    fn set_inner_html(this: &Element, html: &str);
48
+    #[wasm_bindgen(method, js_name = appendChild)]
49
+    fn append_child(this: &Element, other: Element);
50
+}
51
+
52
+// Called by our JS entry point to run the example
53
+#[wasm_bindgen]
54
+pub fn run() {
55
+    let val = document.createElement("p");
56
+    val.set_inner_html("IT IS ALIVE");
57
+    document.body().append_child(val);
58
+}

percy/static/app_loader.js → minimal/static/app_loader.js View File

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

+ 10
- 0
minimal/static/index.html View File

@@ -0,0 +1,10 @@
1
+<!DOCTYPE html>
2
+<html>
3
+  <head>
4
+    <meta charset="utf-8">
5
+    <title></title>
6
+  </head>
7
+  <body>
8
+  </body>
9
+  <script src="./bundle.js"/>
10
+</html>

+ 52
- 0
minimal/static/index.js View File

@@ -0,0 +1,52 @@
1
+import { app, BrowserWindow } from 'electron';
2
+
3
+// Keep a global reference of the window object, if you don't, the window will
4
+// be closed automatically when the JavaScript object is garbage collected.
5
+let mainWindow;
6
+
7
+const createWindow = () => {
8
+  // Create the browser window.
9
+  mainWindow = new BrowserWindow({
10
+    width: 800,
11
+    height: 600,
12
+  });
13
+
14
+  // and load the index.html of the app.
15
+  mainWindow.loadURL(`file://${__dirname}/index.html`);
16
+
17
+  // Open the DevTools.
18
+  mainWindow.webContents.openDevTools();
19
+
20
+  // Emitted when the window is closed.
21
+  mainWindow.on('closed', () => {
22
+    // Dereference the window object, usually you would store windows
23
+    // in an array if your app supports multi windows, this is the time
24
+    // when you should delete the corresponding element.
25
+    mainWindow = null;
26
+  });
27
+};
28
+
29
+// This method will be called when Electron has finished
30
+// initialization and is ready to create browser windows.
31
+// Some APIs can only be used after this event occurs.
32
+app.on('ready', createWindow);
33
+
34
+// Quit when all windows are closed.
35
+app.on('window-all-closed', () => {
36
+  // On OS X it is common for applications and their menu bar
37
+  // to stay active until the user quits explicitly with Cmd + Q
38
+  if (process.platform !== 'darwin') {
39
+    app.quit();
40
+  }
41
+});
42
+
43
+app.on('activate', () => {
44
+  // On OS X it's common to re-create a window in the app when the
45
+  // dock icon is clicked and there are no other windows open.
46
+  if (mainWindow === null) {
47
+    createWindow();
48
+  }
49
+});
50
+
51
+// In this file you can include the rest of your app's specific main process
52
+// code. You can also put them in separate files and import them here.

+ 7736
- 0
minimal/yarn.lock
File diff suppressed because it is too large
View File


+ 1
- 1
percy/Cargo.toml View File

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

+ 0
- 5
percy/static/app.js View File

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

+ 2
- 2
percy_patched_webpack/Cargo.toml View File

@@ -1,5 +1,5 @@
1 1
 [package]
2
-name = "electron_percy_wasm"
2
+name = "percy"
3 3
 version = "0.1.0"
4 4
 authors = ["Bradlee Speice <bradlee@speice.io>"]
5 5
 
@@ -9,4 +9,4 @@ crate-type = ["cdylib"]
9 9
 [dependencies]
10 10
 percy-webapis = "0.0.1"
11 11
 virtual-dom-rs = "0.1"
12
-wasm-bindgen = "0.2"
12
+wasm-bindgen = "0.2"

+ 0
- 5
percy_patched_webpack/static/app.js View File

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

+ 5
- 2
percy_patched_webpack/static/app_loader.js View File

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

+ 42
- 0
stdweb/.compilerc View File

@@ -0,0 +1,42 @@
1
+{
2
+  "env": {
3
+    "development": {
4
+      "application/javascript": {
5
+        "presets": [
6
+          [
7
+            "env",
8
+            {
9
+              "targets": {
10
+                "electron": 2
11
+              }
12
+            }
13
+          ],
14
+          "react"
15
+        ],
16
+        "plugins": [
17
+          "transform-async-to-generator"
18
+        ],
19
+        "sourceMaps": "inline"
20
+      }
21
+    },
22
+    "production": {
23
+      "application/javascript": {
24
+        "presets": [
25
+          [
26
+            "env",
27
+            {
28
+              "targets": {
29
+                "electron": 2
30
+              }
31
+            }
32
+          ],
33
+          "react"
34
+        ],
35
+        "plugins": [
36
+          "transform-async-to-generator"
37
+        ],
38
+        "sourceMaps": "none"
39
+      }
40
+    }
41
+  }
42
+}

+ 9
- 0
stdweb/.eslintrc View File

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

+ 4
- 0
stdweb/.gitignore View File

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

+ 16
- 0
stdweb/Cargo.toml View File

@@ -0,0 +1,16 @@
1
+[package]
2
+authors = ["Bradlee Speice"]
3
+categories = ["wasm"]
4
+description = "A no-framework WASM Electron app"
5
+license = "Apache-2.0/MIT"
6
+name = "stdweb_electron"
7
+readme = "./README.md"
8
+repository = "https://github.com/rustwasm/rust-webpack-template"
9
+version = "0.1.0"
10
+
11
+[lib]
12
+crate-type = ["cdylib"]
13
+
14
+[dependencies]
15
+stdweb = "0.4"
16
+wasm-bindgen = "0.2"

+ 20
- 0
stdweb/build.sh View File

@@ -0,0 +1,20 @@
1
+DIR="$(dirname $0)"
2
+WASM_DIR="$DIR/target/wasm32-unknown-unknown"
3
+WASM_NAME="$(cat "$DIR/Cargo.toml" | grep name | sed 's/name = "//' | sed 's/"//g')"
4
+APP_DIR="$DIR/dist/"
5
+
6
+if [ ! -d "$APP_DIR" ]; then
7
+    mkdir "$APP_DIR"
8
+fi
9
+cp "$DIR/static/"* "$APP_DIR"
10
+
11
+if [ -z "$(which cargo)" ]; then
12
+    echo 'Must install `cargo` before proceeding. Please see https://rustup.rs/ for more information.'
13
+    exit 1
14
+fi
15
+
16
+cargo +nightly build --target=wasm32-unknown-unknown && \
17
+    wasm-bindgen "$WASM_DIR/debug/$WASM_NAME.wasm" --out-dir "$APP_DIR" --no-typescript && \
18
+    # Have to use --mode=development so we can patch out the call to instantiateStreaming
19
+    "$DIR/node_modules/webpack-cli/bin/cli.js" --mode=development "$APP_DIR/app_loader.js" -o "$APP_DIR/bundle.js" && \
20
+    sed -i 's/.*instantiateStreaming.*//g' "$APP_DIR/bundle.js"

+ 66
- 0
stdweb/package.json View File

@@ -0,0 +1,66 @@
1
+{
2
+    "name": "electron_percy_wasm",
3
+    "productName": "electron_percy_wasm",
4
+    "version": "1.0.0",
5
+    "description": "My Electron application description",
6
+    "main": "dist/index.js",
7
+    "scripts": {
8
+        "prestart": "./build.sh",
9
+        "start": "electron-forge start",
10
+        "package": "electron-forge package",
11
+        "make": "electron-forge make",
12
+        "lint": "eslint src"
13
+    },
14
+    "keywords": [],
15
+    "author": "bspeice",
16
+    "license": "MIT",
17
+    "config": {
18
+        "forge": {
19
+            "make_targets": {
20
+                "win32": [
21
+                    "squirrel"
22
+                ],
23
+                "darwin": [
24
+                    "zip"
25
+                ],
26
+                "linux": [
27
+                    "deb",
28
+                    "rpm"
29
+                ]
30
+            },
31
+            "electronPackagerConfig": {
32
+                "packageManager": "yarn"
33
+            },
34
+            "electronWinstallerConfig": {
35
+                "name": "electron_percy_wasm"
36
+            },
37
+            "electronInstallerDebian": {},
38
+            "electronInstallerRedhat": {},
39
+            "github_repository": {
40
+                "owner": "",
41
+                "name": ""
42
+            },
43
+            "windowsStoreConfig": {
44
+                "packageName": "",
45
+                "name": "electron_percy_wasm"
46
+            }
47
+        }
48
+    },
49
+    "dependencies": {
50
+        "electron-compile": "^6.4.3",
51
+        "webpack": "^4.17.1",
52
+        "webpack-cli": "^3.1.0"
53
+    },
54
+    "devDependencies": {
55
+        "babel-plugin-transform-async-to-generator": "^6.24.1",
56
+        "babel-preset-env": "^1.7.0",
57
+        "babel-preset-react": "^6.24.1",
58
+        "electron-forge": "^5.2.2",
59
+        "electron-prebuilt-compile": "2.0.7",
60
+        "eslint": "^3",
61
+        "eslint-config-airbnb": "^15",
62
+        "eslint-plugin-import": "^2",
63
+        "eslint-plugin-jsx-a11y": "^5",
64
+        "eslint-plugin-react": "^7"
65
+    }
66
+}

+ 18
- 0
stdweb/src/lib.rs View File

@@ -0,0 +1,18 @@
1
+#![feature(custom_attribute)]
2
+
3
+extern crate stdweb;
4
+extern crate wasm_bindgen;
5
+
6
+use wasm_bindgen::prelude::*;
7
+
8
+use stdweb::web::document;
9
+use stdweb::web::INode;
10
+use stdweb::web::IElement;
11
+
12
+#[wasm_bindgen]
13
+pub fn run() {
14
+    let doc = document();
15
+    let val = doc.create_element("p").unwrap();
16
+    val.set_attribute("innerHTML", "IT IS ALIVE").unwrap();
17
+    doc.body().unwrap().append_child(&val);
18
+}

+ 9
- 0
stdweb/static/app_loader.js View File

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

+ 11
- 0
stdweb/static/index.html View File

@@ -0,0 +1,11 @@
1
+<!DOCTYPE html>
2
+<html>
3
+  <head>
4
+    <meta charset="utf-8">
5
+    <title></title>
6
+  </head>
7
+  <body>
8
+    <p>Loading...</p>
9
+  </body>
10
+  <script src="./bundle.js"/>
11
+</html>

+ 52
- 0
stdweb/static/index.js View File

@@ -0,0 +1,52 @@
1
+import { app, BrowserWindow } from 'electron';
2
+
3
+// Keep a global reference of the window object, if you don't, the window will
4
+// be closed automatically when the JavaScript object is garbage collected.
5
+let mainWindow;
6
+
7
+const createWindow = () => {
8
+  // Create the browser window.
9
+  mainWindow = new BrowserWindow({
10
+    width: 800,
11
+    height: 600,
12
+  });
13
+
14
+  // and load the index.html of the app.
15
+  mainWindow.loadURL(`file://${__dirname}/index.html`);
16
+
17
+  // Open the DevTools.
18
+  mainWindow.webContents.openDevTools();
19
+
20
+  // Emitted when the window is closed.
21
+  mainWindow.on('closed', () => {
22
+    // Dereference the window object, usually you would store windows
23
+    // in an array if your app supports multi windows, this is the time
24
+    // when you should delete the corresponding element.
25
+    mainWindow = null;
26
+  });
27
+};
28
+
29
+// This method will be called when Electron has finished
30
+// initialization and is ready to create browser windows.
31
+// Some APIs can only be used after this event occurs.
32
+app.on('ready', createWindow);
33
+
34
+// Quit when all windows are closed.
35
+app.on('window-all-closed', () => {
36
+  // On OS X it is common for applications and their menu bar
37
+  // to stay active until the user quits explicitly with Cmd + Q
38
+  if (process.platform !== 'darwin') {
39
+    app.quit();
40
+  }
41
+});
42
+
43
+app.on('activate', () => {
44
+  // On OS X it's common to re-create a window in the app when the
45
+  // dock icon is clicked and there are no other windows open.
46
+  if (mainWindow === null) {
47
+    createWindow();
48
+  }
49
+});
50
+
51
+// In this file you can include the rest of your app's specific main process
52
+// code. You can also put them in separate files and import them here.

+ 7736
- 0
stdweb/yarn.lock
File diff suppressed because it is too large
View File


Loading…
Cancel
Save