feat(examples): add an example for using hooks

trunk-rs · May 24, 2024 · 0fcf271 · 0fcf271
1 parent 4af4d87
commit 0fcf271
Show file tree

Hide file tree

Showing 14 changed files with 417 additions and 1 deletion.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -145,6 +145,7 @@ jobs:
         os: [ ubuntu-latest, macos-latest, windows-latest ]
         example:
           - cdylib
+          - hooks
           - initializer
           - leptos
           - no-rust

diff --git a/Cargo.lock b/Cargo.lock
diff --git a/examples/hooks/.cargo/config.toml b/examples/hooks/.cargo/config.toml
@@ -0,0 +1,2 @@
+[alias]
+xtask = "run --manifest-path ./xtask/Cargo.toml --"
diff --git a/examples/hooks/Cargo.lock b/examples/hooks/Cargo.lock
diff --git a/examples/hooks/Cargo.toml b/examples/hooks/Cargo.toml
@@ -0,0 +1,23 @@
+[package]
+name = "hooks-examples"
+version = "0.1.0"
+authors = ["Jens Reimann <ctron@dentrassi.de>"]
+edition = "2021"
+
+[dependencies]
+console_error_panic_hook = "0.1"
+wasm-bindgen = "0.2"
+web-sys = { version = "0.3", features = [
+    "console",
+    "Document",
+    "HtmlElement",
+    "Node",
+    "Text",
+    "Window",
+] }
+
+
+[features]
+default = []
+a = []
+
diff --git a/examples/hooks/README.md b/examples/hooks/README.md
@@ -0,0 +1,24 @@
+Trunk | Hooks
+=========================
+An example using different hooks and ideas to run code during the build.
+
+Once you've installed Trunk, simply execute `trunk serve --open` from this example's directory, and you should see the
+web application rendered in your browser and some output on the browser's console.
+
+## Hook
+
+There is one `xtask` based build hook. Check out [`cargo-xtask`](https://github.com/matklad/cargo-xtask) to get better
+understanding of the pattern, as it's not an actual command you install.
+
+The `xtask` is triggered by Trunk's hook system and has access to the `TRUNK_*` environment variables during the hook
+execution.
+
+# `build.rs`
+
+You can also use a simple [`build.rs` build script](https://doc.rust-lang.org/cargo/reference/build-scripts.html). This
+will be executed during the build of the main WASM application. It will be run on the host system though (not using
+`wasm32-unknown-unknown`).
+
+It does not have access to the Trunk env-vars, but does have access to all kind of `cargo` information, like the
+features enabled during compilation. If you run this example with `trunk --features a`, you will see a different output
+on the console.
diff --git a/examples/hooks/Trunk.toml b/examples/hooks/Trunk.toml
@@ -0,0 +1,12 @@
+[watch]
+ignore = [
+    "xtask/target"
+]
+
+# This uses the idea of cargo xtask, writing code in Rust rather than an OS dependent shell.
+#
+# Of course, you can also just use bash.
+[[hooks]]
+stage = "build"
+command = "cargo"
+command_arguments = ["xtask"]
diff --git a/examples/hooks/build.rs b/examples/hooks/build.rs
@@ -0,0 +1,13 @@
+fn main() {
+    let function = if std::env::var_os("CARGO_FEATURE_A").is_some() {
+        r#"function itDepends() {
+    console.log("Feature A is active");
+}"#
+    } else {
+        r#"function itDepends() {
+    console.log("Feature A is not active");
+}"#
+    };
+
+    std::fs::write("dist/.stage/buildGenerated.js", function).expect("must write");
+}
diff --git a/examples/hooks/index.html b/examples/hooks/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>Trunk | Hooks | web-sys</title>
+
+    <link data-trunk rel="scss" href="src/index.scss"/>
+    <base data-trunk-public-url/>
+</head>
+<body>
+    <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="z"/>
+
+    <!-- generated by xtask -->
+    <script src="generated.js"></script>
+    <script>
+        generatedFunction();
+    </script>
+
+    <!-- generated by build.rs -->
+    <script src="buildGenerated.js"></script>
+    <script>
+        itDepends();
+    </script>
+</body>
+
+</html>
diff --git a/examples/hooks/src/index.scss b/examples/hooks/src/index.scss
@@ -0,0 +1,9 @@
+@charset "utf-8";
+
+html {
+    body {
+        font-size: 20pt;
+        color: #111;
+        font-family: sans-serif;
+    }
+}
diff --git a/examples/hooks/src/main.rs b/examples/hooks/src/main.rs
@@ -0,0 +1,17 @@
+use console_error_panic_hook::set_once as set_panic_hook;
+use web_sys::window;
+
+fn start_app() {
+    let document = window()
+        .and_then(|win| win.document())
+        .expect("Could not access document");
+    let body = document.body().expect("Could not access document.body");
+    let text_node = document.create_text_node("Hello, world from Vanilla Rust!");
+    body.append_child(text_node.as_ref())
+        .expect("Failed to append text");
+}
+
+fn main() {
+    set_panic_hook();
+    start_app();
+}