Standardize web terminology.

.github/workflows/ci.yml

@@ -213,25 +213,25 @@ jobs:
           command: test
           args: --manifest-path=docs/book_examples/Cargo.toml --no-run --target wasm32-unknown-unknown
 
-      # Clippy and build the special druid-wasm-examples package.
-      - name: cargo clippy druid-wasm-examples
+      # Clippy and build the special druid-web-examples package.
+      - name: cargo clippy druid-web-examples
         uses: actions-rs/cargo@v1
         with:
           command: clippy
-          args: --manifest-path=druid/examples/wasm/Cargo.toml --target wasm32-unknown-unknown -- -D warnings
+          args: --manifest-path=druid/examples/web/Cargo.toml --target wasm32-unknown-unknown -- -D warnings
 
       - name: wasm-pack build examples
-        run: wasm-pack build --dev --target web druid/examples/wasm
+        run: wasm-pack build --dev --target web druid/examples/web
 
-      # Clippy and build the hello_wasm_web example
-      - name: cargo clippy hello_wasm_web example
+      # Clippy and build the hello_web example
+      - name: cargo clippy hello_web example
         uses: actions-rs/cargo@v1
         with:
           command: clippy
-          args: --manifest-path=druid/examples/hello_wasm_web/Cargo.toml --target wasm32-unknown-unknown -- -D warnings
+          args: --manifest-path=druid/examples/hello_web/Cargo.toml --target wasm32-unknown-unknown -- -D warnings
 
-      - name: wasm-pack build hello_wasm_web example
-        run: wasm-pack build --target web druid/examples/hello_wasm_web
+      - name: wasm-pack build hello_web example
+        run: wasm-pack build --dev --target web druid/examples/hello_web
 
   test-nightly:
     runs-on: ${{ matrix.os }}

CHANGELOG.md

@@ -29,6 +29,8 @@ You can find its changes [documented below](#060---2020-06-01).
 
 ### Maintenance
 
+- Standardized web targeting terminology. ([#1013] by [@xStrom])
+
 ### Outside News
 
 ## [0.6.0] - 2020-06-01
@@ -313,6 +315,7 @@ Last release without a changelog :(
 [#1003]: https://github.com/xi-editor/druid/pull/1003
 [#1007]: https://github.com/xi-editor/druid/pull/1007
 [#1008]: https://github.com/xi-editor/druid/pull/1008
+[#1013]: https://github.com/xi-editor/druid/pull/1013
 
 [Unreleased]: https://github.com/xi-editor/druid/compare/v0.6.0...master
 [0.6.0]: https://github.com/xi-editor/druid/compare/v0.5.0...v0.6.0

Cargo.toml

@@ -4,6 +4,11 @@ members = [
     "druid-shell",
     "druid-derive",
     "docs/book_examples",
-    "druid/examples/wasm",
-    "druid/examples/hello_wasm_web",
+    "druid/examples/web",
+    "druid/examples/hello_web",
+]
+default-members = [
+    "druid",
+    "druid-shell",
+    "druid-derive",
 ]

README.md

@@ -91,7 +91,7 @@ alternatives that can offer those capabilities:
 - Use the the platform-native widgets or mimic them. ([Relm])
 - Embed easily into custom render pipelines. ([Conrod])
 - Adhere to a specific architectural style such as Elm. ([Iced], [Relm])
-- Support rendering to HTML when compiling for WASM. ([Iced], [Moxie])
+- Support rendering to HTML when targeting the web. ([Iced], [Moxie])
 
 Druid is just one of many ongoing [Rust-native GUI experiments]. If it
 doesn't suit your use case, perhaps one of the others will!

druid/examples/hello_wasm_web/Cargo.toml → druid/examples/hello_web/Cargo.toml

@@ -1,8 +1,8 @@
 [package]
-name = "hello-wasm-web"
+name = "hello-web"
 version = "0.1.0"
 license = "Apache-2.0"
-description = "Minimal wasm example for web"
+description = "Minimal web example"
 repository = "https://github.com/xi-editor/druid"
 edition = "2018"
 publish = false
@@ -12,5 +12,6 @@ crate-type = ["cdylib", "rlib"]
 
 [dependencies]
 druid = { path="../.." }
+
 wasm-bindgen = "0.2.63"
 console_error_panic_hook = "0.1.6"

druid/examples/hello_wasm_web/README.md → druid/examples/hello_web/README.md

@@ -1,6 +1,7 @@
-# druid WASM hello world
+# Druid web hello world
 
-This is a minimal example of building a single druid application for the web. To build all the druid examples as wasm, check out the main wasm example.
+This is a minimal example of building a single druid application for the web.
+To build all the druid examples for the web, check out the `web` example directory.
 
 ## Building
 
@@ -13,17 +14,20 @@ First build with.
 > wasm-pack build --target web --dev
 ```
 
-This generates a JavaScript module that exports the `wasm_main` function that's been annotated with the `#[wasm_bindgen]` macro. Leave off the `--dev` flag if you're doing a release build.
+This generates a JavaScript module that exports the `wasm_main` function that's
+been annotated with the `#[wasm_bindgen]` macro. Leave off the `--dev` flag
+if you're doing a release build.
 
 Now run
 
 ```
 > http
 ```
 
-which should start serving this folder.
+which should start serving this directory.
 
 Finally, point your browser to the appropriate localhost url (usually http://localhost:8000) and you
 should see your app.
 
-When you make changes to the project, re-run `wasm-pack build --target web --dev` and you can see the changes in your browser when you refresh -- no need to restart `http`.
+When you make changes to the project, re-run `wasm-pack build --target web --dev` and you can
+see the changes in your browser when you refresh -- no need to restart `http`.

druid/examples/hello_web/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Druid web example</title>
+        <style>
+            html,
+            body,
+            canvas {
+                margin: 0px;
+                padding: 0px;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+        </style>
+    </head>
+    <body>
+        <noscript>This page contains WebAssembly and JavaScript content, please enable JavaScript in your
+            browser.</noscript>
+        <canvas id="canvas"></canvas>
+        <script type="module" src="./index.js" type="application/javascript"></script>
+    </body>
+</html>

druid/examples/hello_wasm_web/index.js → druid/examples/hello_web/index.js

@@ -1,4 +1,4 @@
-import init, { wasm_main } from "./pkg/hello_wasm_web.js";
+import init, { wasm_main } from "./pkg/hello_web.js";
 
 async function run() {
   await init();

druid/examples/hello_wasm_web/src/lib.rs → druid/examples/hello_web/src/lib.rs

@@ -29,7 +29,7 @@ struct HelloState {
 // hello.rs example.
 #[wasm_bindgen]
 pub fn wasm_main() {
-    // This hook is necessary to get panic messages on wasm32
+    // This hook is necessary to get panic messages in the console
     std::panic::set_hook(Box::new(console_error_panic_hook::hook));
     main()
 }

druid/examples/wasm/Cargo.toml → druid/examples/web/Cargo.toml

@@ -1,8 +1,8 @@
 [package]
-name = "druid-wasm-examples"
+name = "druid-web-examples"
 version = "0.1.0"
 license = "Apache-2.0"
-description = "Wasm scaffolding for druid examples"
+description = "Scaffolding for druid web examples"
 repository = "https://github.com/xi-editor/druid"
 edition = "2018"
 publish = false
@@ -12,6 +12,7 @@ crate-type = ["cdylib", "rlib"]
 
 [dependencies]
 druid = { path="../.." }
+
 wasm-bindgen = "0.2.63"
 console_error_panic_hook = "0.1.6"
 log = "0.4.8"

druid/examples/web/README.md

@@ -0,0 +1,43 @@
+# Druid web examples
+
+This crate generates and builds all the necessary files for deploying `druid` examples to the web.
+
+## Building
+
+You will need `cargo` and `wasm-pack` for building the code and a simple
+server like [`http`](https://crates.io/crates/https) for serving the web pages.
+
+First build with
+
+```
+> wasm-pack build --target web --dev
+```
+
+This step has two main functions:
+
+    1. It generates an HTML document for each of the `druid` examples with a script that
+       calls the appropriate function in the JavaScript module exposing the raw Wasm.
+    2. It builds the Wasm binary which exposes all functions annotated with `#[wasm_bindgen]`.
+    3. It builds the JavaScript module that loads the Wasm binary and binds all the exposed
+       functions to JavaScript functions so they can be called directly from JavaScript.
+
+To preview the build in a web browser, run
+
+```
+> http
+```
+
+which should start serving the crate root folder containing `index.html`.
+
+Finally, point your browser to the appropriate localhost url (usually http://localhost:8000) and you
+should see a list of HTML documents -- one for each example.
+
+When you make changes to the project, re-run `wasm-pack build --target web --dev` and you can
+see the changes in your browser when you refresh -- no need to restart `http`.
+
+## New Examples
+
+New examples that can be built against the web target should have an associated
+`impl_example!(<example_name>)` entry added to `lib.rs`. Examples that don't
+support the web target should be specified in the `EXCEPTIONS` list defined
+at the top of the `build.rs` script.

druid/examples/wasm/build.rs → druid/examples/web/build.rs

@@ -16,11 +16,12 @@ use std::io::{ErrorKind, Result};
 use std::path::{Path, PathBuf};
 use std::{env, fs};
 
-/// Examples known to not work with WASM are skipped. Ideally this list will eventually be empty.
+/// Examples known to not work with the web backend are skipped.
+/// Ideally this list will eventually be empty.
 const EXCEPTIONS: &[&str] = &[
-    "svg",               // usvg doesn't currently build with WASM.
-    "ext_event",         // WASM doesn't currently support spawning threads.
-    "blocking_function", // WASM doesn't currently support spawning threads.
+    "svg",               // usvg doesn't currently build as Wasm.
+    "ext_event",         // the web backend doesn't currently support spawning threads.
+    "blocking_function", // the web backend doesn't currently support spawning threads.
 ];
 
 /// Create a platform specific link from `src` to the `dst` directory.
@@ -96,15 +97,14 @@ mod examples {
 "#
     .to_string();
 
-    let mut index_html = r#"
-<!DOCTYPE html>
+    let mut index_html = r#"<!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="utf-8">
-        <title>Druid WASM examples - index</title>
+        <title>Druid web examples</title>
     </head>
     <body>
-        <h1>Druid WASM examples</h1>
+        <h1>Druid web examples</h1>
         <ul>
 "#
     .to_string();
@@ -122,22 +122,14 @@ mod examples {
         if let Some(example) = path.file_stem() {
             let example_str = example.to_string_lossy();
 
-            // Skip examples that are known to not work with wasm.
+            // Skip examples that are known to not work.
             if EXCEPTIONS.contains(&example_str.as_ref()) {
                 continue;
             }
 
             // Record the valid example module we found to add to the generated examples.in
             examples_in.push_str(&format!("    pub mod {};\n", example_str));
 
-            // The "switch" example name would conflict with JavaScript's switch statement. So we
-            // rename it here to switch_demo.
-            let js_entry_fn_name = if &example_str == "switch" {
-                "switch_demo".to_string()
-            } else {
-                example_str.to_string()
-            };
-
             // Add an entry to the index.html file.
             let index_entry = format!(
                 "<li><a href=\"./html/{name}.html\">{name}</a></li>",
@@ -153,7 +145,7 @@ mod examples {
 <html lang="en">
     <head>
         <meta charset="utf-8">
-        <title>Druid WASM examples - {name}</title>
+        <title>Druid web examples - {name}</title>
         <style>
             html, body, canvas {{
                 margin: 0px;
@@ -165,10 +157,10 @@ mod examples {
         </style>
     </head>
     <body>
-        <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
+        <noscript>This page contains WebAssembly and JavaScript content, please enable JavaScript in your browser.</noscript>
         <canvas id="canvas"></canvas>
         <script type="module">
-            import init, {{ {name} }} from '../pkg/druid_wasm_examples.js';
+            import init, {{ {name} }} from '../pkg/druid_web_examples.js';
 
             async function run() {{
                 await init();
@@ -179,7 +171,7 @@ mod examples {
         </script>
     </body>
 </html>"#,
-                name = js_entry_fn_name
+                name = example_str.to_string()
             );
 
             // Write out the html file into a designated html directory located in crate root.