npm - @jsenv/navi - Versions diffs - 0.0.1 - Mend

@jsenv/navi 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

package/index.js +51 -0
package/package.json +38 -0
package/src/action_private_properties.js +11 -0
package/src/action_proxy_test.html +353 -0
package/src/action_run_states.js +5 -0
package/src/actions.js +1377 -0
package/src/browser_integration/browser_integration.js +191 -0
package/src/browser_integration/document_back_and_forward.js +17 -0
package/src/browser_integration/document_loading_signal.js +100 -0
package/src/browser_integration/document_state_signal.js +9 -0
package/src/browser_integration/document_url_signal.js +9 -0
package/src/browser_integration/use_is_visited.js +19 -0
package/src/browser_integration/via_history.js +199 -0
package/src/browser_integration/via_navigation.js +168 -0
package/src/components/action_execution/form_context.js +8 -0
package/src/components/action_execution/render_actionable_component.jsx +27 -0
package/src/components/action_execution/use_action.js +330 -0
package/src/components/action_execution/use_execute_action.js +161 -0
package/src/components/action_renderer.jsx +136 -0
package/src/components/collect_form_element_values.js +79 -0
package/src/components/demos/0_button_demo.html +155 -0
package/src/components/demos/1_checkbox_demo.html +257 -0
package/src/components/demos/2_input_textual_demo.html +354 -0
package/src/components/demos/3_radio_demo.html +222 -0
package/src/components/demos/4_select_demo.html +104 -0
package/src/components/demos/5_list_scrollable_demo.html +153 -0
package/src/components/demos/action/0_button_demo.html +204 -0
package/src/components/demos/action/10_shortcuts_demo.html +189 -0
package/src/components/demos/action/11_nested_shortcuts_demo.html +401 -0
package/src/components/demos/action/1_input_text_demo.html +461 -0
package/src/components/demos/action/2_form_multiple.html +303 -0
package/src/components/demos/action/3_details_demo.html +172 -0
package/src/components/demos/action/4_input_checkbox_demo.html +611 -0
package/src/components/demos/action/6_checkbox_list_demo.html +109 -0
package/src/components/demos/action/7_radio_list_demo.html +217 -0
package/src/components/demos/action/8_editable_text_demo.html +442 -0
package/src/components/demos/action/9_link_demo.html +172 -0
package/src/components/demos/demo.md +0 -0
package/src/components/demos/route/basic/basic.html +14 -0
package/src/components/demos/route/basic/basic_route_demo.jsx +224 -0
package/src/components/demos/route/multi/multi.html +14 -0
package/src/components/demos/route/multi/multi_route_demo.jsx +277 -0
package/src/components/details/details.jsx +248 -0
package/src/components/details/summary_marker.jsx +141 -0
package/src/components/editable_text/editable_text.jsx +96 -0
package/src/components/error_boundary_context.js +9 -0
package/src/components/form.jsx +144 -0
package/src/components/input/button.jsx +333 -0
package/src/components/input/checkbox_list.jsx +294 -0
package/src/components/input/field.jsx +61 -0
package/src/components/input/field_css.js +118 -0
package/src/components/input/input.jsx +15 -0
package/src/components/input/input_checkbox.jsx +370 -0
package/src/components/input/input_radio.jsx +299 -0
package/src/components/input/input_textual.jsx +338 -0
package/src/components/input/radio_list.jsx +283 -0
package/src/components/input/select.jsx +273 -0
package/src/components/input/use_form_event.js +20 -0
package/src/components/input/use_on_change.js +12 -0
package/src/components/link/link.jsx +291 -0
package/src/components/loader/loader_background.jsx +324 -0
package/src/components/loader/loading_spinner.jsx +68 -0
package/src/components/loader/network_speed.js +83 -0
package/src/components/loader/rectangle_loading.jsx +225 -0
package/src/components/route.jsx +15 -0
package/src/components/selection/selection.js +5 -0
package/src/components/selection/selection_context.jsx +262 -0
package/src/components/shortcut/os.js +9 -0
package/src/components/shortcut/shortcut_context.jsx +390 -0
package/src/components/use_action_events.js +37 -0
package/src/components/use_auto_focus.js +43 -0
package/src/components/use_debounce_true.js +31 -0
package/src/components/use_focus_group.js +19 -0
package/src/components/use_initial_value.js +104 -0
package/src/components/use_is_visited.js +19 -0
package/src/components/use_ref_array.js +38 -0
package/src/components/use_signal_sync.js +50 -0
package/src/components/use_state_array.js +40 -0
package/src/docs/actions.md +228 -0
package/src/docs/demos/resource/action_status.jsx +42 -0
package/src/docs/demos/resource/demo.md +1 -0
package/src/docs/demos/resource/resource_demo_0.html +84 -0
package/src/docs/demos/resource/resource_demo_10_post_gc.html +364 -0
package/src/docs/demos/resource/resource_demo_11_describe_many.html +362 -0
package/src/docs/demos/resource/resource_demo_2.html +173 -0
package/src/docs/demos/resource/resource_demo_3_filtered_users.html +415 -0
package/src/docs/demos/resource/resource_demo_4_details.html +284 -0
package/src/docs/demos/resource/resource_demo_5_renderer_lazy.html +115 -0
package/src/docs/demos/resource/resource_demo_6_gc.html +217 -0
package/src/docs/demos/resource/resource_demo_7_child_gc.html +240 -0
package/src/docs/demos/resource/resource_demo_8_proxy_gc.html +319 -0
package/src/docs/demos/resource/resource_demo_9_describe_one.html +472 -0
package/src/docs/demos/resource/tata.jsx +3 -0
package/src/docs/demos/resource/toto.jsx +3 -0
package/src/docs/demos/user_nav/user_nav.html +12 -0
package/src/docs/demos/user_nav/user_nav.jsx +330 -0
package/src/docs/resource_dependencies.md +103 -0
package/src/docs/resource_with_params.md +80 -0
package/src/notes.md +13 -0
package/src/route/route.js +518 -0
package/src/route/route.test.html +228 -0
package/src/store/array_signal_store.js +537 -0
package/src/store/local_storage_signal.js +17 -0
package/src/store/resource_graph.js +1303 -0
package/src/store/tests/resource_graph_autoreload_demo.html +12 -0
package/src/store/tests/resource_graph_autoreload_demo.jsx +964 -0
package/src/store/tests/resource_graph_dependencies.test.js +95 -0
package/src/store/value_in_local_storage.js +187 -0
package/src/symbol_object_signal.js +1 -0
package/src/use_action_data.js +10 -0
package/src/use_action_status.js +47 -0
package/src/utils/add_many_event_listeners.js +15 -0
package/src/utils/array_add_remove.js +61 -0
package/src/utils/array_signal.js +15 -0
package/src/utils/compare_two_js_values.js +172 -0
package/src/utils/execute_with_cleanup.js +21 -0
package/src/utils/get_caller_info.js +85 -0
package/src/utils/iterable_weak_set.js +62 -0
package/src/utils/js_value_weak_map.js +162 -0
package/src/utils/js_value_weak_map_demo.html +690 -0
package/src/utils/merge_two_js_values.js +53 -0
package/src/utils/stringify_for_display.js +150 -0
package/src/utils/weak_effect.js +48 -0

package/src/docs/demos/resource/resource_demo_5_renderer_lazy.html ADDED Viewed

@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:," />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Action render lazy demo</title>
+  </head>
+  <body>
+    <div id="root" style="position: relative; width: 400px"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import {
+        resource,
+        // eslint-disable-next-line no-unused-vars
+        ActionRenderer,
+      } from "@jsenv/navi";
+      import { render } from "preact";
+      const PAGE = resource("page", {
+        idKey: "name",
+        GET: async ({ name }) => {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+          return {
+            name,
+          };
+        },
+      });
+      PAGE.GET_TOTO = PAGE.GET.bindParams(
+        {
+          name: "toto",
+        },
+        {
+          renderLoadedAsync: async () => {
+            // eslint-disable-next-line no-unused-vars
+            const { Toto } = await import("./toto.jsx");
+            return () => {
+              return <Toto />;
+            };
+          },
+        },
+      );
+      PAGE.GET_TATA = PAGE.GET.bindParams(
+        {
+          name: "tata",
+        },
+        {
+          renderLoadedAsync: async () => {
+            // eslint-disable-next-line no-unused-vars
+            const { Tata } = await import("./tata.jsx");
+            return () => <Tata />;
+          },
+        },
+      );
+      PAGE.GET_IMPORT_ERROR = PAGE.GET.bindParams(
+        {
+          name: "import_error",
+        },
+        {
+          renderLoadedAsync: async () => {
+            // eslint-disable-next-line import-x/no-unresolved
+            await import("./not_found.jsx");
+            return () => "here";
+          },
+        },
+      );
+      const activePageName = localStorage.getItem("active_page_name");
+      if (activePageName) {
+        PAGE.GET.bindParams({ name: activePageName }).load();
+      }
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        return (
+          <div>
+            <button
+              onClick={() => {
+                PAGE.GET_TOTO.reload();
+              }}
+            >
+              TOTO
+            </button>
+            <button
+              onClick={() => {
+                PAGE.GET_TATA.reload();
+              }}
+            >
+              TATA
+            </button>
+            <button
+              onClick={() => {
+                PAGE.GET_IMPORT_ERROR.reload();
+              }}
+            >
+              IMPORT_ERROR
+            </button>
+            <div>
+              TOTO: <ActionRenderer action={PAGE.GET_TOTO} />
+            </div>
+            <div>
+              TATA: <ActionRenderer action={PAGE.GET_TATA} />
+            </div>
+            <div>
+              IMPORT_ERROR: <ActionRenderer action={PAGE.GET_IMPORT_ERROR} />
+            </div>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>

package/src/docs/demos/resource/resource_demo_6_gc.html ADDED Viewed

@@ -0,0 +1,217 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:," />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Demo - Garbage collect</title>
+  </head>
+  <body>
+    <div id="root" style="position: relative; width: 400px"></div>
+    <div id="controls" style="margin-top: 20px">
+      <button id="createBtn">Create Action + UI</button>
+      <button id="destroyBtn" disabled>Destroy Action + UI</button>
+      <button id="gcBtn">Force GC + Check</button>
+    </div>
+    <div id="status" style="margin-top: 10px; font-family: monospace"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState } from "preact/hooks";
+      import { createAction, useActionStatus } from "@jsenv/navi";
+      let currentAction = null;
+      let actionWeakRef = null;
+      let componentWeakRef = null;
+      const updateStatus = () => {
+        const statusDiv = document.getElementById("status");
+        const actionAlive = actionWeakRef?.deref() !== undefined;
+        const componentAlive = componentWeakRef?.deref() !== undefined;
+        statusDiv.innerHTML = `
+          Action alive: ${actionAlive ? "✅ YES" : "❌ NO"}
+          Component alive: ${componentAlive ? "✅ YES" : "❌ NO"}
+          CurrentAction reference: ${currentAction ? "✅ EXISTS" : "❌ NULL"}
+        `;
+      };
+      // eslint-disable-next-line no-unused-vars
+      const UsersList = ({ action }) => {
+        const { matching, data, pending } = useActionStatus(action);
+        return (
+          <div
+            style={{
+              border: "1px solid #ccc",
+              padding: "10px",
+              margin: "10px 0",
+            }}
+          >
+            <h3>Users List Component</h3>
+            <details
+              open={matching}
+              onToggle={(e) => {
+                if (e.target.open) {
+                  action.load();
+                } else {
+                  action.unload();
+                }
+              }}
+            >
+              <summary>Users {pending ? "(loading...)" : ""}</summary>
+              <div>{data || "No data"}</div>
+            </details>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        const [showUsersList] = useState(false);
+        return (
+          <div>
+            <h2>Action GC Test</h2>
+            <p>
+              Status:{" "}
+              {showUsersList ? "Component mounted" : "Component unmounted"}
+            </p>
+            {showUsersList && currentAction && (
+              <UsersList action={currentAction} />
+            )}
+          </div>
+        );
+      };
+      // Fonctions de test
+      const createActionAndUI = () => {
+        console.log("🏗️ Creating action and UI...");
+        // Créer l'action
+        currentAction = createAction(
+          () => {
+            return new Promise((resolve) => {
+              setTimeout(
+                () =>
+                  resolve(`Users loaded at ${new Date().toLocaleTimeString()}`),
+                1000,
+              );
+            });
+          },
+          { name: "loadUsersAction" },
+        );
+        // Créer les WeakRef pour le monitoring
+        actionWeakRef = new WeakRef(currentAction);
+        // eslint-disable-next-line no-unused-vars
+        const AppWithState = () => {
+          const [showUsersList] = useState(true);
+          // eslint-disable-next-line no-unused-vars
+          const UsersListRef = ({ action }) => {
+            const component = <UsersList action={action} />;
+            if (!componentWeakRef) {
+              componentWeakRef = new WeakRef(component);
+            }
+            return component;
+          };
+          return (
+            <div>
+              <h2>Action GC Test</h2>
+              <p>Status: Component mounted</p>
+              {showUsersList && currentAction && (
+                <UsersListRef action={currentAction} />
+              )}
+            </div>
+          );
+        };
+        render(<AppWithState />, document.querySelector("#root"));
+        document.getElementById("createBtn").disabled = true;
+        document.getElementById("destroyBtn").disabled = false;
+        updateStatus();
+      };
+      const destroyActionAndUI = () => {
+        console.log("🗑️ Destroying action and UI...");
+        // Démonter le composant
+        render(
+          <div>
+            <h2>Action GC Test</h2>
+            <p>Status: Component unmounted</p>
+          </div>,
+          document.querySelector("#root"),
+        );
+        // Supprimer la référence forte à l'action
+        currentAction = null;
+        // Nettoyer localStorage si nécessaire
+        localStorage.removeItem("load_users");
+        document.getElementById("createBtn").disabled = false;
+        document.getElementById("destroyBtn").disabled = true;
+        console.log("🧹 References cleared, action should be eligible for GC");
+        updateStatus();
+      };
+      const forceGCAndCheck = async () => {
+        console.log("🔄 Forcing GC...");
+        // Forcer le garbage collection (si disponible)
+        if (window.gc) {
+          window.gc();
+        } else {
+          // Fallback: créer de la pression mémoire
+          const arrays = [];
+          for (let i = 0; i < 100; i++) {
+            arrays.push(new Array(100000).fill(Math.random()));
+          }
+          // Laisser les arrays être collectées
+          arrays.length = 0;
+        }
+        // Attendre un peu pour que le GC ait le temps de s'exécuter
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        updateStatus();
+        // Vérifier le résultat
+        const actionAlive = actionWeakRef?.deref() !== undefined;
+        const componentAlive = componentWeakRef?.deref() !== undefined;
+        if (!actionAlive && !componentAlive) {
+          console.log(
+            "✅ SUCCESS: Action and component were garbage collected!",
+          );
+        } else {
+          console.log("❌ ISSUE: Some objects are still alive");
+          if (actionAlive) console.log("  - Action is still alive");
+          if (componentAlive) console.log("  - Component is still alive");
+        }
+      };
+      // Event listeners
+      document
+        .getElementById("createBtn")
+        .addEventListener("click", createActionAndUI);
+      document
+        .getElementById("destroyBtn")
+        .addEventListener("click", destroyActionAndUI);
+      document
+        .getElementById("gcBtn")
+        .addEventListener("click", forceGCAndCheck);
+      // Initial render
+      render(<App />, document.querySelector("#root"));
+      updateStatus();
+    </script>
+  </body>
+</html>

package/src/docs/demos/resource/resource_demo_7_child_gc.html ADDED Viewed

@@ -0,0 +1,240 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:," />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Demo - Child Action GC</title>
+  </head>
+  <body>
+    <div id="root" style="position: relative; width: 400px"></div>
+    <div id="controls" style="margin-top: 20px">
+      <button id="createBtn">Create Child Action + UI</button>
+      <button id="destroyBtn" disabled>Destroy Child Action + UI</button>
+      <button id="gcBtn">Force GC + Check</button>
+    </div>
+    <div id="status" style="margin-top: 10px; font-family: monospace"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState } from "preact/hooks";
+      import { createAction, useActionStatus } from "@jsenv/navi";
+      // Parent action created outside UI (persistent)
+      const parentAction = createAction(
+        (params) => {
+          return new Promise((resolve) => {
+            setTimeout(
+              () =>
+                resolve(
+                  `User ${params.userId} loaded at ${new Date().toLocaleTimeString()}`,
+                ),
+              1000,
+            );
+          });
+        },
+        { name: "loadUserAction" },
+      );
+      let currentChildAction = null;
+      let childActionWeakRef = null;
+      let componentWeakRef = null;
+      const updateStatus = () => {
+        const statusDiv = document.getElementById("status");
+        const childActionAlive = childActionWeakRef?.deref() !== undefined;
+        const componentAlive = componentWeakRef?.deref() !== undefined;
+        statusDiv.innerHTML = `
+          Parent Action: ✅ EXISTS (persistent)
+          Child Action alive: ${childActionAlive ? "✅ YES" : "❌ NO"}
+          Component alive: ${componentAlive ? "✅ YES" : "❌ NO"}
+          CurrentChildAction reference: ${currentChildAction ? "✅ EXISTS" : "❌ NULL"}
+        `;
+      };
+      // eslint-disable-next-line no-unused-vars
+      const UserProfile = ({ childAction }) => {
+        const { matching, data, pending } = useActionStatus(childAction);
+        return (
+          <div
+            style={{
+              border: "1px solid #ccc",
+              padding: "10px",
+              margin: "10px 0",
+            }}
+          >
+            <h3>User Profile Component</h3>
+            <p>Child Action Name: {childAction.name}</p>
+            <p>User ID: {childAction.params.userId}</p>
+            <details
+              open={matching}
+              onToggle={(e) => {
+                if (e.target.open) {
+                  childAction.load();
+                } else {
+                  childAction.unload();
+                }
+              }}
+            >
+              <summary>User Profile {pending ? "(loading...)" : ""}</summary>
+              <div>{data || "No data"}</div>
+            </details>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        const [showUserProfile] = useState(false);
+        return (
+          <div>
+            <h2>Child Action GC Test</h2>
+            <p>
+              Status:{" "}
+              {showUserProfile ? "Component mounted" : "Component unmounted"}
+            </p>
+            {showUserProfile && currentChildAction && (
+              <UserProfile childAction={currentChildAction} />
+            )}
+          </div>
+        );
+      };
+      // Fonctions de test
+      const createChildActionAndUI = () => {
+        console.log("🏗️ Creating child action and UI...");
+        console.log("Parent action:", parentAction.name);
+        // Créer l'action enfant via bindParams
+        currentChildAction = parentAction.bindParams({ userId: 42 });
+        console.log("Child action created:", currentChildAction.name);
+        // Créer les WeakRef pour le monitoring
+        childActionWeakRef = new WeakRef(currentChildAction);
+        // eslint-disable-next-line no-unused-vars
+        const AppWithState = () => {
+          const [showUserProfile] = useState(true);
+          // eslint-disable-next-line no-unused-vars
+          const UserProfileRef = ({ childAction }) => {
+            const component = <UserProfile childAction={childAction} />;
+            if (!componentWeakRef) {
+              componentWeakRef = new WeakRef(component);
+            }
+            return component;
+          };
+          return (
+            <div>
+              <h2>Child Action GC Test</h2>
+              <p>Status: Component mounted</p>
+              <p>Parent Action: {parentAction.name}</p>
+              <p>Child Action: {currentChildAction.name}</p>
+              {showUserProfile && currentChildAction && (
+                <UserProfileRef childAction={currentChildAction} />
+              )}
+            </div>
+          );
+        };
+        render(<AppWithState />, document.querySelector("#root"));
+        document.getElementById("createBtn").disabled = true;
+        document.getElementById("destroyBtn").disabled = false;
+        updateStatus();
+      };
+      const destroyChildActionAndUI = () => {
+        console.log("🗑️ Destroying child action and UI...");
+        // Démonter le composant
+        render(
+          <div>
+            <h2>Child Action GC Test</h2>
+            <p>Status: Component unmounted</p>
+            <p>Parent Action: {parentAction.name} (still exists)</p>
+          </div>,
+          document.querySelector("#root"),
+        );
+        // Supprimer la référence forte à l'action enfant
+        currentChildAction = null;
+        document.getElementById("createBtn").disabled = false;
+        document.getElementById("destroyBtn").disabled = true;
+        console.log(
+          "🧹 Child action reference cleared, should be eligible for GC",
+        );
+        console.log("Parent action still exists:", parentAction.name);
+        updateStatus();
+      };
+      const forceGCAndCheck = async () => {
+        console.log("🔄 Forcing GC...");
+        // Forcer le garbage collection (si disponible)
+        if (window.gc) {
+          window.gc();
+        } else {
+          // Fallback: créer de la pression mémoire
+          const arrays = [];
+          for (let i = 0; i < 100; i++) {
+            arrays.push(new Array(100000).fill(Math.random()));
+          }
+          // Laisser les arrays être collectées
+          arrays.length = 0;
+        }
+        // Attendre un peu pour que le GC ait le temps de s'exécuter
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        updateStatus();
+        // Vérifier le résultat
+        const childActionAlive = childActionWeakRef?.deref() !== undefined;
+        const componentAlive = componentWeakRef?.deref() !== undefined;
+        console.log("📊 GC Results:");
+        console.log(
+          `  Parent Action: ✅ ALIVE (expected - persistent reference)`,
+        );
+        console.log(
+          `  Child Action: ${childActionAlive ? "❌ ALIVE" : "✅ GC'd"}`,
+        );
+        console.log(`  Component: ${componentAlive ? "❌ ALIVE" : "✅ GC'd"}`);
+        if (!childActionAlive && !componentAlive) {
+          console.log(
+            "✅ SUCCESS: Child action and component were garbage collected!",
+          );
+          console.log("✅ Parent action correctly preserved");
+        } else {
+          console.log("❌ ISSUE: Some objects are still alive");
+          if (childActionAlive) console.log("  - Child action is still alive");
+          if (componentAlive) console.log("  - Component is still alive");
+        }
+      };
+      // Event listeners
+      document
+        .getElementById("createBtn")
+        .addEventListener("click", createChildActionAndUI);
+      document
+        .getElementById("destroyBtn")
+        .addEventListener("click", destroyChildActionAndUI);
+      document
+        .getElementById("gcBtn")
+        .addEventListener("click", forceGCAndCheck);
+      // Initial render
+      render(<App />, document.querySelector("#root"));
+      updateStatus();
+    </script>
+  </body>
+</html>