Use trunk for web

.github/workflows/deploy_web_demo.yml

@@ -1,51 +1,54 @@
-name: Deploy web demo
+name: Github Pages
 
+# By default, runs if you push to main. keeps your deployed app in sync with main branch.
 on:
+  # push:
+  #   branches:
+  #     - main
+# to only run when you do a new github release, comment out above part and uncomment the below trigger.
  release:
    types: ["published"]
 
-
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
-  contents: write # for committing to gh-pages branch
+  contents: read
+  pages: write
+  id-token: write
 
+# Allow one concurrent deployment
 concurrency:
   group: "pages"
-  cancel-in-progress: false
-
-env:
-  RUSTFLAGS: --cfg=web_sys_unstable_apis -D warnings
-  RUSTDOCFLAGS: -D warnings
+  cancel-in-progress: true
 
 jobs:
-  # Single deploy job since we're just deploying
   deploy:
-    name: Deploy web demo
-
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - uses: actions-rs/toolchain@v1
-        with:
-          profile: minimal
-          target: wasm32-unknown-unknown
-          toolchain: 1.76.0
-          override: true
-
-      - uses: Swatinem/rust-cache@v2
-        with:
-          prefix-key: "web-demo-"
-
-      - name: "Install wasmopt / binaryen"
+      - uses: actions/checkout@v4 # repo checkout
+      - name: Setup toolchain for wasm
         run: |
-          sudo apt-get update && sudo apt-get install binaryen
-
-      - run: |
-          scripts/build_web.sh
-
-      - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@v4
+          rustup update stable
+          rustup default stable
+          rustup set profile minimal
+          rustup target add wasm32-unknown-unknown
+      - name: Rust Cache # cache the rust build artefacts
+        uses: Swatinem/rust-cache@v2
+      - name: Download and install Trunk binary
+        run: wget -qO- https://github.com/thedodd/trunk/releases/latest/download/trunk-x86_64-unknown-linux-gnu.tar.gz | tar -xzf-
+      - name: Build # build
+        # Environment $public_url resolves to the github project page.
+        # If using a user/organization page, remove the `${{ github.event.repository.name }}` part.
+        # using --public-url something will allow trunk to modify all the href paths like from favicon.ico to repo_name/favicon.ico .
+        # this is necessary for github pages where the site is deployed to username.github.io/repo_name and all files must be requested
+        # relatively as eframe_template/favicon.ico. if we skip public-url option, the href paths will instead request username.github.io/favicon.ico which
+        # will obviously return error 404 not found.
+        run: ./trunk build --release --public-url $public_url
+        env:
+          public_url: "https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}"
+          #public_url: "./"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
         with:
-          folder: web_demo
-          single-commit: true
+            path: "dist"
+      - name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1,2 +1,3 @@
 /target
-.idea
+.idea
+dist/

Cargo.toml

@@ -26,6 +26,7 @@ serde_json = "1.0.120"
 regex-lite = "0.1.6"
 parking_lot_mpsc = { version = "0.1.5" }
 ehttp = "0.5.0"
+log = "0.4.27"
 
 #[patch."https://github.com/nmeylan/json-parser-flat-format.git"]
 #json-flat-parser = {path = "C:\\dev\\ragnarok\\json-flat-parser"}
@@ -42,4 +43,4 @@ web-sys = { version = "0.3.70", features = ["console"], default-features = false
 opt-level = 2
 
 [features]
-dist = []
+dist = []

README.md

@@ -1,7 +1,7 @@
 # Important
 **Memory usage**: While this tool allow to edit large json file smoothly, it consumes a lot of memory due to technical decision which tradeoff memory in favor of better performance for navigation, edition and serialization. Read below section "Performance and Memory usage" for more details
 
-[Web demo](https://nmeylan.github.io/json-table-editor/web/) 
+[Web demo](https://nmeylan.github.io/json-table-editor/) or launch it with [trunk](https://trunkrs.dev/) using `trunk serve`
 
 # Genesis
 I wanted to edit a [small json file](https://github.com/nmeylan/rust-ro/blob/master/config/skill.json) of 1.5mb, using a table view, javascript based tools like http://json2table.com/# and https://jsongrid.com/json-grid were too slow to edit this file and barely usable, so I decided to attempt to do it myself

Trunk.toml

@@ -0,0 +1,3 @@
+[build]
+target = "app.html"
+html_output = "app.html"

app.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta name="description" content="An online json viewer, visualize big json array as table without lag" />
+        <link rel="canonical" href="https://jsontable.app/app.html" />
+        <link data-trunk rel="copy-dir" href="public" data-target-path="." />
+        <link data-trunk rel="rust" data-wasm-opt="2" />
+        <title>JSON viewer and JSON editor online</title>
+
+        <!-- Disable zooming: -->
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+        <style>
+            /**
+        Credit egui https://raw.githubusercontent.com/emilk/egui/master/web_demo/index.html
+         */
+            html {
+                /* Remove touch delay: */
+                touch-action: manipulation;
+            }
+
+            body {
+                /* Light mode background color for what is not covered by the egui canvas,
+            or where the egui canvas is translucent. */
+                background: #909090;
+            }
+
+            @media (prefers-color-scheme: dark) {
+                body {
+                    /* Dark mode background color for what is not covered by the egui canvas,
+                or where the egui canvas is translucent. */
+                    background: #404040;
+                }
+            }
+
+            /* Allow canvas to fill entire web page: */
+            html,
+            body {
+                overflow: hidden;
+                margin: 0 !important;
+                padding: 0 !important;
+                height: 100%;
+                width: 100%;
+            }
+
+            /* Position canvas in center-top.
+        This is rather arbitrarily chosen.
+        In particular, it seems like both Chromium and Firefox will still align
+        the canvas on the physical pixel grid, which is required to get
+        pixel-perfect (non-blurry) rendering in egui.
+        See https://github.com/emilk/egui/issues/4241 for more */
+            canvas {
+                margin-right: auto;
+                margin-left: auto;
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+            }
+
+            .centered {
+                margin-right: auto;
+                margin-left: auto;
+                display: block;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                color: #f0f0f0;
+                font-size: 24px;
+                font-family: Ubuntu-Light, Helvetica, sans-serif;
+                text-align: center;
+            }
+
+            /* ---------------------------------------------- */
+            /* Loading animation from https://loading.io/css/ */
+            .lds-dual-ring {
+                display: inline-block;
+                width: 24px;
+                height: 24px;
+            }
+
+            .lds-dual-ring:after {
+                content: " ";
+                display: block;
+                width: 24px;
+                height: 24px;
+                margin: 0px;
+                border-radius: 50%;
+                border: 3px solid #fff;
+                border-color: #fff transparent #fff transparent;
+                animation: lds-dual-ring 1.2s linear infinite;
+            }
+
+            @keyframes lds-dual-ring {
+                0% {
+                    transform: rotate(0deg);
+                }
+
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+        </style>
+    </head>
+
+    <body>
+        <!-- The WASM code will resize the canvas dynamically -->
+        <canvas id="the_canvas_id"></canvas>
+        <div class="centered" id="center_text">
+            <p style="font-size: 16px">Loading…</p>
+            <div class="lds-dual-ring"></div>
+        </div>
+
+        <script>
+            // The `--no-modules`-generated JS from `wasm-bindgen` attempts to use
+            // `WebAssembly.instantiateStreaming` to instantiate the wasm module,
+            // but this doesn't work with `file://` urls. This example is frequently
+            // viewed by simply opening `index.html` in a browser (with a `file://`
+            // url), so it would fail if we were to call this function!
+            //
+            // Work around this for now by deleting the function to ensure that the
+            // `no_modules.js` script doesn't have access to it. You won't need this
+            // hack when deploying over HTTP.
+            delete WebAssembly.instantiateStreaming;
+        </script>
+
+        <!-- this is the JS generated by the `wasm-bindgen` CLI tool -->
+        <!-- <script src="json-editor.js"></script> -->
+
+        <script>
+            // We'll defer our execution until the wasm is ready to go.
+            // Here we tell bindgen the path to the wasm file so it can start
+            // initialization and return to us a promise when it's done.
+            console.debug("Loading wasm…");
+            // wasm_bindgen("./json-editor_bg.wasm").then(on_wasm_loaded).catch(on_error);
+
+            function on_wasm_loaded() {
+                console.debug("Wasm loaded. Starting app…");
+
+                let handle = new wasm_bindgen.WebHandle();
+
+                function check_for_panic() {
+                    if (handle.has_panicked()) {
+                        console.error("The egui app has crashed");
+
+                        // The demo app already logs the panic message and callstack, but you
+                        // can access them like this if you want to show them in the html:
+                        // console.error(`${handle.panic_message()}`);
+                        // console.error(`${handle.panic_callstack()}`);
+
+                        document.getElementById("the_canvas_id").remove();
+                        document.getElementById("center_text").innerHTML = `
+                        <p>
+                            The egui app has crashed.
+                        </p>
+                        <p style="font-size:10px" align="left">
+                            ${handle.panic_message()}
+                        </p>
+                        <p style="font-size:14px">
+                            See the console for details.
+                        </p>
+                        <p style="font-size:14px">
+                            Reload the page to try again.
+                        </p>`;
+                    } else {
+                        let delay_ms = 1000;
+                        setTimeout(check_for_panic, delay_ms);
+                    }
+                }
+
+                check_for_panic();
+
+                handle.start(document.getElementById("the_canvas_id")).then(on_app_started).catch(on_error);
+            }
+
+            function on_app_started(handle) {
+                // Call `handle.destroy()` to stop. Uncomment to quick result:
+                // setTimeout(() => { handle.destroy(); handle.free()) }, 2000)
+
+                console.debug("App started.");
+                document.getElementById("center_text").innerHTML = "";
+
+                // Make sure the canvas is focused so it can receive keyboard events right away:
+                document.getElementById("the_canvas_id").focus();
+            }
+
+            function on_error(error) {
+                console.error("Failed to start: " + error);
+                document.getElementById("the_canvas_id").remove();
+                document.getElementById("center_text").innerHTML = `
+                <p>
+                    An error occurred during loading:
+                </p>
+                <p style="font-family:Courier New">
+                    ${error}
+                </p>
+                <p style="font-size:14px">
+                    Make sure you use a modern browser with WebGL and WASM enabled.
+                </p>`;
+            }
+        </script>
+    </body>
+</html>
+
+<!-- Powered by egui: https://github.com/emilk/egui/ -->
+<!-- Credit egui https://raw.githubusercontent.com/emilk/egui/master/web_demo/index.html -->

rust-toolchain

@@ -0,0 +1,10 @@
+# If you see this, run "rustup self update" to get rustup 1.23 or newer.
+
+# NOTE: above comment is for older `rustup` (before TOML support was added),
+# which will treat the first line as the toolchain name, and therefore show it
+# to the user in the error, instead of "error: invalid channel name '[toolchain]'".
+
+[toolchain]
+channel = "1.81"  # Avoid specifying a patch version here; see https://github.com/emilk/eframe_template/issues/145
+components = [ "rustfmt", "clippy" ]
+targets = [ "wasm32-unknown-unknown" ]