Update main yew examples (remove static dir) (#1417)

* remove static directory, move script to run_example.sh * gitignore * server infra * Support --build-only * fix npm_and_rest example * Fix various static index.html's * Fix spacing * newlines at the end * Cleanup * tabs -> spaces * line ending * remove build_examples.sh * Apply suggestions from code review Co-authored-by: Simon <simon@siku2.io> * format file and improve EXIT trap Co-authored-by: Simon <simon@siku2.io>
2025-12-08 21:26:25 +00:00 · 2020-07-22 04:29:55 -07:00 · 2020-07-22 04:29:55 -07:00 · 309dbcba00
commit 309dbcba00
parent 60fe59e901
15 changed files with 187 additions and 68 deletions
--- a/ci/build_examples.sh
+++ b/ci/build_examples.sh
@ -1,23 +0,0 @@
-#!/usr/bin/env bash
-
-# Script to build all examples in yew/examples 
-#
-# Not building yew-router nor yewtil examples
-
-# src: https://gist.github.com/fbucek/f986da3cc3a9bbbd1573bdcb23fed2e1
-set -e # error -> trap -> exit
-function info() { echo -e "[\033[0;34m $@ \033[0m]"; } # blue: [ info message ]
-function fail() { FAIL="true"; echo -e "[\033[0;31mFAIL\033[0m] $@"; } # red: [FAIL]
-trap 'LASTRES=$?; LAST=$BASH_COMMAND; if [[ LASTRES -ne 0 ]]; then fail "Command: \"$LAST\" exited with exit code: $LASTRES"; elif [ "$FAIL" == "true"  ]; then fail finished with error; else echo -e "[\033[0;32m Finished $@ \033[0m]";fi' EXIT
-SRCDIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )" # this source dir
-
-cd $SRCDIR/../examples # switch to examples folder 
-
-for EXAMPLE in *
-do  
-    if [[ $EXAMPLE ==  static ]] || [[ $EXAMPLE ==  server ]] || [[ $EXAMPLE ==  target ]]; then
-        echo -e "Skipping folder: $EXAMPLE"
-    elif [ -d ${EXAMPLE} ]; then
-        ./build.sh ${EXAMPLE} $@
-    fi
-done
--- a/examples/.gitignore
+++ b/examples/.gitignore
@ -0,0 +1,5 @@
+*/static/package.json
+*/static/wasm_bg.wasm
+*/static/wasm_bg.d.ts
+*/static/wasm.d.ts
+*/static/wasm.js
--- a/examples/README.md
+++ b/examples/README.md
@ -16,8 +16,7 @@ Have a look at Yew's [starter templates](https://yew.rs/docs/getting-started/sta
 ```sh
 git clone https://github.com/yewstack/yew.git
 cd yew/examples
-./build.sh minimal # example subfolder
-cd static && python3 -m http.server  # open localhost:8000 in browser
+./run_example.sh minimal # builds and opens the "minimal" example in browser
 ```


--- a/examples/js_callback/static/index.html
+++ b/examples/js_callback/static/index.html
@ -2,10 +2,13 @@
 <html lang="en">
    <head>
        <meta charset="utf-8">
-        <title>(Asynchronous) callback from JavaScript</title>
+        <title>Yew • (Asynchronous) callback from JavaScript</title>
    </head>
    <body>
-        <script src="/js_callback.js"></script>
+        <script type="module">
+            import init from "./wasm.js"
+            init()
+        </script>
        <script src="get-payload-script.js"></script>
    </body>
 </html>
--- a/examples/keyed_list/static/index.html
+++ b/examples/keyed_list/static/index.html
@ -2,10 +2,13 @@
 <html lang="en">
    <head>
        <meta charset="utf-8">
-        <title>Keyed list example</title>
+        <title>Yew • Keyed list</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
-        <script src="/keyed_list.js"></script>
+        <script type="module">
+            import init from "./wasm.js"
+            init()
+        </script>
    </body>
 </html>
--- a/examples/large_table/static/index.html
+++ b/examples/large_table/static/index.html
@ -2,10 +2,13 @@
 <html lang="en">
    <head>
        <meta charset="utf-8">
-        <title>Table100x100 Test</title>
+        <title>Yew • Table 100x100</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
-        <script src="/large_table.js"></script>
+        <script type="module">
+            import init from "./wasm.js"
+            init()
+        </script>
    </body>
 </html>
--- a/examples/multi_thread/static/index.html
+++ b/examples/multi_thread/static/index.html
@ -3,7 +3,11 @@
    <head>
        <meta charset="utf-8">
        <title>Yew • Multi-Thread</title>
-        <script type="module">import init from "./app.js"; init()</script>
    </head>
-    <body></body>
+    <body>
+        <script type="module">
+            import init from "./wasm.js"
+            init()
+        </script>
+    </body>
 </html>
--- a/examples/nested_list/static/index.html
+++ b/examples/nested_list/static/index.html
@ -6,6 +6,9 @@
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
-        <script src="/nested_list.js"></script>
+        <script type="module">
+            import init from "./wasm.js"
+            init()
+        </script>
    </body>
 </html>
--- a/examples/npm_and_rest/static/index.html
+++ b/examples/npm_and_rest/static/index.html
@ -6,6 +6,9 @@
        <script type="text/javascript" src="https://unpkg.com/ccxt"></script>
    </head>
    <body>
-        <script src="/npm_and_rest.js"></script>
+        <script type="module">
+            import init from "./wasm.js"
+            init()
+        </script>
    </body>
 </html>
--- a/examples/run_example.sh
+++ b/examples/run_example.sh
@ -2,15 +2,63 @@

 # The example to build.
 EXAMPLE=${1%\/}
+shift
+
 # Optimization level. Can be either "--debug" or "--release". Defaults to debug.
-PROFILE=${2:---debug}
+PROFILE="--debug"
+
+# Whether to open a browser window after building
+START_BROWSER=1
+
+while (("$#")); do
+    case "$1" in
+    --release)
+        PROFILE="--release"
+        shift
+        ;;
+    --debug)
+        PROFILE="--debug"
+        shift
+        ;;
+    --build-only)
+        START_BROWSER=0
+        shift
+        ;;
+    -*) # unsupported flags
+        echo "Error: Unsupported flag $1" >&2
+        exit 1
+        ;;
+    esac
+done

 # src: https://gist.github.com/fbucek/f986da3cc3a9bbbd1573bdcb23fed2e1
 set -e # error -> trap -> exit
-function info() { echo -e "[\033[0;34m $* \033[0m]"; } # blue: [ info message ]
-function fail() { FAIL="true"; echo -e "[\033[0;31mFAIL\033[0m] $*"; } # red: [FAIL]
-trap 'LASTRES=$?; LAST=$BASH_COMMAND; if [[ LASTRES -ne 0 ]]; then fail "Command: \"$LAST\" exited with exit code: $LASTRES"; elif [ "$FAIL" == "true" ]; then fail finished with error; else echo -e "[\033[0;32m Finished! Run $EXAMPLE by serving the generated files in examples/static/ \033[0m]";fi' EXIT
-SRCDIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )" # this source dir
+
+info() {
+    # blue: [ info message ]
+    echo -e "[\033[0;34m $* \033[0m]"
+}
+fail() {
+    FAIL="true"
+    # red: [FAIL]
+    echo -e "[\033[0;31mFAIL\033[0m] $*"
+}
+
+on_exit() {
+    LASTRES=$?
+    LAST=$BASH_COMMAND
+    if [[ LASTRES -ne 0 ]]; then
+        fail "Command: \"$LAST\" exited with exit code: $LASTRES"
+    elif [ "$FAIL" == "true" ]; then
+        fail finished with error
+    elif [[ $START_BROWSER != 1 ]]; then
+        echo -e "[\033[0;32m Finished! Run $EXAMPLE by serving the generated files in examples/static/ \033[0m]"
+    fi
+}
+
+trap on_exit EXIT
+
+SRCDIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" >/dev/null 2>&1 && pwd)" # this source dir

 cd "$SRCDIR/$EXAMPLE" # "$SRCDIR" ensures that this script can be run from anywhere.

@ -38,23 +86,30 @@ cargo_build() {
 # wasm-pack build
 if [[ $EXAMPLE == *_wp ]]; then
    info "Building: $EXAMPLE using wasm-pack"
-    # wasm-pack overwrites .gitignore -> save -> restore
-    cp "$SRCDIR/static/.gitignore" "$SRCDIR/static/.gitignore.copy"
-    wasm-pack build "$PROFILE" --target web --out-name wasm --out-dir "$SRCDIR/static/"
-    rm "$SRCDIR/static/.gitignore"; mv "$SRCDIR/static/.gitignore.copy" "$SRCDIR/static/.gitignore" # restore .gitignore
+    wasm-pack build "$PROFILE" --target web --out-name wasm --out-dir "$SRCDIR/$EXAMPLE/static/"

 # multi_thread build -> two binary/wasm files
 elif [[ $EXAMPLE == multi_thread ]]; then
    info "Building: $EXAMPLE app using wasm-bindgen"
    cargo_build --bin multi_thread_app
-    wasm-bindgen --target web --no-typescript --out-dir "$SRCDIR/static/" --out-name wasm "$TARGET_DIR/multi_thread_app.wasm"
+    wasm-bindgen --target web --no-typescript --out-dir "$SRCDIR/$EXAMPLE/static/" --out-name wasm "$TARGET_DIR/multi_thread_app.wasm"

    info "Building: $EXAMPLE worker using wasm-bindgen"
    cargo_build --bin multi_thread_worker
-    wasm-bindgen --target no-modules --no-typescript --out-dir "$SRCDIR/static/" --out-name worker "$TARGET_DIR/multi_thread_worker.wasm"
+    wasm-bindgen --target no-modules --no-typescript --out-dir "$SRCDIR/$EXAMPLE/static/" --out-name worker "$TARGET_DIR/multi_thread_worker.wasm"

 else # Default wasm-bindgen build
    info "Building: $EXAMPLE using wasm-bindgen"
    cargo_build
-    wasm-bindgen --target web --no-typescript --out-dir "$SRCDIR/static/" --out-name wasm "$TARGET_DIR/$EXAMPLE.wasm"
+    wasm-bindgen --target web --no-typescript --out-dir "$SRCDIR/$EXAMPLE/static/" --out-name wasm "$TARGET_DIR/$EXAMPLE.wasm"
+fi
+
+cd static
+if [[ $START_BROWSER == 1 ]]; then
+    if ! [ -x "$(command -v python3)" ]; then
+        echo "WARNING: python3 not found! Please manually start a web server for the $SRCDIR/$EXAMPLE/static directory."
+        echo "         Use '--build-only' to suppress this message."
+        exit 1
+    fi
+    python3 ../../start_example_server.py $FLAGS
 fi
--- a/examples/start_example_server.py
+++ b/examples/start_example_server.py
@ -0,0 +1,80 @@
+#!/usr/bin/env python3
+from http.server import BaseHTTPRequestHandler, HTTPServer
+
+import os
+import sys
+import logging
+import webbrowser
+
+PORT = 8080
+STATIC_RESOURCES = { "/wasm.js", "/wasm_bg.wasm", "/favicon.ico" }
+DEFAULT_INDEX_HTML = b"""
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Yew example</title>
+        <script type="module">
+            import init from "./wasm.js"
+            init()
+        </script>
+    </head>
+    <body></body>
+</html>
+"""
+
+class S(BaseHTTPRequestHandler):
+    def _set_response(self, code, mime, charset="utf-8"):
+        self.send_response(code)
+        self.send_header("Content-type", f"{mime}; charset={charset}")
+        self.send_header("Cache-Control", "private, max-age=0, must-revalidate")
+        self.end_headers()
+
+    def do_GET(self):
+        path = self.path
+        if path in ("", "/"):
+            path = "/index.html"
+        relative_path = f".{path}"
+
+        if os.path.isfile(relative_path):
+            logging.info("is a file: %s", relative_path)
+            with open(relative_path, "rb") as f:
+                mime = "text/plain"
+                if relative_path.endswith(".html"):
+                    mime = "text/html"
+                elif relative_path.endswith(".wasm"):
+                    mime = "application/wasm"
+                elif relative_path.endswith(".js"):
+                    mime = "text/javascript"
+                elif relative_path.endswith(".json"):
+                    mime = "application/json"
+                elif relative_path.endswith(".css"):
+                    mime = "text/css"
+                elif relative_path.endswith(".toml"):
+                    mime = "application/toml"
+                self._set_response(200, mime)
+                self.wfile.write(f.read())
+        elif path == "/index.html":
+            self._set_response(200, "text/html")
+            self.wfile.write(DEFAULT_INDEX_HTML)
+        else:
+            self._set_response(404, mime="text/plain")
+            self.wfile.write(b"404 file not found")
+
+def run(server_class=HTTPServer, handler_class=S):
+    logging.basicConfig(level=logging.INFO)
+    server_address = ("", PORT)
+    httpd = server_class(server_address, handler_class)
+    webbrowser.open(f"http://localhost:{PORT}")
+    logging.info("Starting web server...\n")
+    try:
+        httpd.serve_forever()
+    except KeyboardInterrupt:
+        pass
+    httpd.server_close()
+    logging.info("Stopping web server...\n")
+
+if __name__ == "__main__":
+    from sys import argv
+
+    run()
--- a/examples/static/.gitignore
+++ b/examples/static/.gitignore
@ -1,6 +0,0 @@
-*.wasm
-*.js
-*.json
-*.ts
-*.md
-snippets/
--- a/examples/static/index.html
+++ b/examples/static/index.html
@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <title>Yew example</title>
-        <script type="module">
-			import init from "./wasm.js"
-			init()
-		</script>
-    </head>
-    <body></body>
-</html>
--- a/examples/todomvc/static/index.html
+++ b/examples/todomvc/static/index.html
@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
    <head>
-        <meta charset="utf-8" />
+        <meta charset="utf-8">
        <title>Yew • TodoMVC</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/todomvc-common@1.0.5/base.css"/ >
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/todomvc-app-css@2.1.2/index.css" />
--- a/examples/two_apps/static/index.html
+++ b/examples/two_apps/static/index.html
@ -3,11 +3,13 @@
    <head>
        <meta charset="utf-8">
        <title>Yew • Two Apps</title>
-        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="first-app"></div>
        <div class="second-app"></div>
-        <script src="/two_apps.js"></script>
+        <script type="module">
+            import init from "./wasm.js"
+            init()
+        </script>
    </body>
 </html>