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_8_proxy_gc.html ADDED Viewed

@@ -0,0 +1,319 @@
+<!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 - Proxy Target GC</title>
+  </head>
+  <body>
+    <div id="root" style="position: relative; width: 400px"></div>
+    <div id="controls" style="margin-top: 20px">
+      <button id="createBtn">Create Proxy + UI</button>
+      <button id="destroyBtn" disabled>Destroy Proxy + 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";
+      import { signal } from "@preact/signals";
+      // Base action created outside UI (persistent)
+      const baseAction = createAction(
+        (params) => {
+          return new Promise((resolve) => {
+            setTimeout(
+              () =>
+                resolve(
+                  `Page ${params.page} loaded at ${new Date().toLocaleTimeString()}`,
+                ),
+              800,
+            );
+          });
+        },
+        { name: "loadPageAction" },
+      );
+      let currentProxy = null;
+      let proxyWeakRef = null;
+      let componentWeakRef = null;
+      let pageSignal = null;
+      let oldTargetWeakRefs = [];
+      const updateStatus = () => {
+        const statusDiv = document.getElementById("status");
+        const proxyAlive = proxyWeakRef?.deref() !== undefined;
+        const componentAlive = componentWeakRef?.deref() !== undefined;
+        const oldTargetsAlive = oldTargetWeakRefs.map(
+          (ref) => ref.deref() !== undefined,
+        );
+        const oldTargetsAliveCount = oldTargetsAlive.filter(Boolean).length;
+        statusDiv.innerHTML = `
+          Base Action: ✅ EXISTS (persistent)
+          Proxy alive: ${proxyAlive ? "✅ YES" : "❌ NO"}
+          Component alive: ${componentAlive ? "✅ YES" : "❌ NO"}
+          CurrentProxy reference: ${currentProxy ? "✅ EXISTS" : "❌ NULL"}
+          Old targets alive: ${oldTargetsAliveCount}/${oldTargetWeakRefs.length}
+        `;
+      };
+      // eslint-disable-next-line no-unused-vars
+      const PageLoader = ({ proxyAction, pageSignal }) => {
+        const [currentPage, setCurrentPage] = useState(1);
+        const { matching, data, pending } = useActionStatus(proxyAction);
+        const changePage = (newPage) => {
+          // Before changing, create a direct reference to the current target
+          // to track if it gets GC'd when we change the signal
+          const currentTarget = baseAction.bindParams({ page: currentPage });
+          oldTargetWeakRefs.push(new WeakRef(currentTarget));
+          console.log(`📄 Changing from page ${currentPage} to ${newPage}`);
+          console.log(`📄 Old target created: ${currentTarget.name}`);
+          console.log(
+            `📄 Total old targets tracked: ${oldTargetWeakRefs.length}`,
+          );
+          setCurrentPage(newPage);
+          pageSignal.value = { page: newPage };
+        };
+        return (
+          <div
+            style={{
+              border: "1px solid #ccc",
+              padding: "10px",
+              margin: "10px 0",
+            }}
+          >
+            <h3>Page Loader Component</h3>
+            <p>Proxy Name: {proxyAction.name}</p>
+            <p>Current Page: {currentPage}</p>
+            <div style={{ margin: "10px 0" }}>
+              <button
+                onClick={() => changePage(1)}
+                disabled={currentPage === 1}
+              >
+                Page 1
+              </button>
+              <button
+                onClick={() => changePage(2)}
+                disabled={currentPage === 2}
+              >
+                Page 2
+              </button>
+              <button
+                onClick={() => changePage(3)}
+                disabled={currentPage === 3}
+              >
+                Page 3
+              </button>
+            </div>
+            <details
+              open={matching}
+              onToggle={(e) => {
+                if (e.target.open) {
+                  proxyAction.load();
+                } else {
+                  proxyAction.unload();
+                }
+              }}
+            >
+              <summary>Page Content {pending ? "(loading...)" : ""}</summary>
+              <div>{data || "No data"}</div>
+            </details>
+            <div style={{ marginTop: "10px", fontSize: "12px", color: "#666" }}>
+              Old targets tracked: {oldTargetWeakRefs.length}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        const [showPageLoader] = useState(false);
+        return (
+          <div>
+            <h2>Proxy Target GC Test</h2>
+            <p>
+              Status:{" "}
+              {showPageLoader ? "Component mounted" : "Component unmounted"}
+            </p>
+            {showPageLoader && currentProxy && pageSignal && (
+              <PageLoader proxyAction={currentProxy} pageSignal={pageSignal} />
+            )}
+          </div>
+        );
+      };
+      // Fonctions de test
+      const createProxyAndUI = () => {
+        console.log("🏗️ Creating proxy and UI...");
+        console.log("Base action:", baseAction.name);
+        // Créer le signal pour les paramètres
+        pageSignal = signal({ page: 1 });
+        // Créer le proxy via bindParams avec le signal
+        currentProxy = baseAction.bindParams(pageSignal);
+        console.log("Proxy created:", currentProxy.name);
+        // Créer les WeakRef pour le monitoring
+        proxyWeakRef = new WeakRef(currentProxy);
+        oldTargetWeakRefs = []; // Reset old targets tracking
+        // eslint-disable-next-line no-unused-vars
+        const AppWithState = () => {
+          const [showPageLoader] = useState(true);
+          // eslint-disable-next-line no-unused-vars
+          const PageLoaderRef = ({ proxyAction, pageSignal }) => {
+            const component = (
+              <PageLoader proxyAction={proxyAction} pageSignal={pageSignal} />
+            );
+            if (!componentWeakRef) {
+              componentWeakRef = new WeakRef(component);
+            }
+            return component;
+          };
+          return (
+            <div>
+              <h2>Proxy Target GC Test</h2>
+              <p>Status: Component mounted</p>
+              <p>Base Action: {baseAction.name}</p>
+              <p>Proxy Action: {currentProxy.name}</p>
+              {showPageLoader && currentProxy && pageSignal && (
+                <PageLoaderRef
+                  proxyAction={currentProxy}
+                  pageSignal={pageSignal}
+                />
+              )}
+            </div>
+          );
+        };
+        render(<AppWithState />, document.querySelector("#root"));
+        document.getElementById("createBtn").disabled = true;
+        document.getElementById("destroyBtn").disabled = false;
+        updateStatus();
+      };
+      const destroyProxyAndUI = () => {
+        console.log("🗑️ Destroying proxy and UI...");
+        // Démonter le composant
+        render(
+          <div>
+            <h2>Proxy Target GC Test</h2>
+            <p>Status: Component unmounted</p>
+            <p>Base Action: {baseAction.name} (still exists)</p>
+          </div>,
+          document.querySelector("#root"),
+        );
+        // Supprimer les références fortes
+        currentProxy = null;
+        pageSignal = null;
+        document.getElementById("createBtn").disabled = false;
+        document.getElementById("destroyBtn").disabled = true;
+        console.log(
+          "🧹 Proxy and signal references cleared, should be eligible for GC",
+        );
+        console.log("Base action still exists:", baseAction.name);
+        console.log(`Old targets to be checked: ${oldTargetWeakRefs.length}`);
+        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 proxyAlive = proxyWeakRef?.deref() !== undefined;
+        const componentAlive = componentWeakRef?.deref() !== undefined;
+        const oldTargetsAlive = oldTargetWeakRefs.map(
+          (ref) => ref.deref() !== undefined,
+        );
+        const oldTargetsAliveCount = oldTargetsAlive.filter(Boolean).length;
+        console.log("📊 GC Results:");
+        console.log(
+          `  Base Action: ✅ ALIVE (expected - persistent reference)`,
+        );
+        if (currentProxy) {
+          console.log(`  Proxy: ✅ ALIVE (expected - as it was not destroyed)`);
+        } else {
+          console.log(`  Proxy: ${proxyAlive ? "❌ ALIVE" : "✅ GC'd"}`);
+          console.log(
+            `  Component: ${componentAlive ? "❌ ALIVE" : "✅ GC'd"}`,
+          );
+        }
+        console.log(
+          `  Old targets: ${oldTargetsAliveCount}/${oldTargetWeakRefs.length} still alive`,
+        );
+        if (oldTargetsAliveCount === 0) {
+          console.log(
+            "✅ SUCCESS: All old proxy targets were garbage collected!",
+          );
+        } else {
+          console.log("❌ ISSUE: Some old proxy targets are still alive");
+          oldTargetsAlive.forEach((alive, index) => {
+            if (alive) {
+              console.log(`  - Old target ${index + 1} is still alive`);
+            }
+          });
+        }
+        if (!proxyAlive && !componentAlive && oldTargetsAliveCount === 0) {
+          console.log(
+            "🎉 PERFECT: Proxy, component, and old targets all GC'd!",
+          );
+          console.log("✅ Base action correctly preserved");
+        }
+      };
+      // Event listeners
+      document
+        .getElementById("createBtn")
+        .addEventListener("click", createProxyAndUI);
+      document
+        .getElementById("destroyBtn")
+        .addEventListener("click", destroyProxyAndUI);
+      document
+        .getElementById("gcBtn")
+        .addEventListener("click", forceGCAndCheck);
+      // Initial render
+      render(<App />, document.querySelector("#root"));
+      updateStatus();
+    </script>
+  </body>
+</html>