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

@@ -0,0 +1,364 @@
+<!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>Resource GC Test</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        padding: 20px;
+        max-width: 800px;
+      }
+      .controls {
+        margin-bottom: 20px;
+        padding: 15px;
+        border: 1px solid #ccc;
+        background: #f9f9f9;
+        border-radius: 4px;
+      }
+      .stats {
+        margin-bottom: 20px;
+        padding: 15px;
+        border: 1px solid #007acc;
+        background: #e6f3ff;
+        border-radius: 4px;
+      }
+      .stats div {
+        margin-bottom: 5px;
+      }
+      .stats .debug-info {
+        font-size: 12px;
+        color: #666;
+        margin-top: 10px;
+        padding-top: 10px;
+        border-top: 1px solid #ccc;
+      }
+      .numbers {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+        gap: 10px;
+      }
+      .number-item {
+        padding: 20px;
+        text-align: center;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        background: white;
+        font-size: 24px;
+        font-weight: bold;
+      }
+      button {
+        padding: 10px 20px;
+        margin: 5px;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      .primary {
+        background: #007acc;
+        color: white;
+      }
+      .danger {
+        background: #dc3545;
+        color: white;
+      }
+      .secondary {
+        background: #6c757d;
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Resource Garbage Collection Test</h1>
+    <div class="controls">
+      <button class="primary" id="addNumber">Add Random Number</button>
+      <button class="secondary" id="forceGC">Force Garbage Collection</button>
+      <button class="danger" id="clearAll">Clear All Numbers</button>
+    </div>
+    <div class="stats">
+      <div>
+        <strong>Numbers Count:</strong> <span id="numbersCount">0</span>
+      </div>
+      <div>
+        <strong>Alive POST Actions:</strong>
+        <span id="postActionsCount">0</span>
+      </div>
+      <div>
+        <strong>Total Actions in Registry:</strong>
+        <span id="totalActionsCount">0</span>
+      </div>
+      <!-- ✅ Add activation stats display -->
+      <div class="debug-info">
+        <div>
+          <strong>Activation WeakSet:</strong>
+          <span id="activationStats">-</span>
+        </div>
+        <div>
+          <strong>Child Action WeakSet:</strong> <span id="childStats">-</span>
+        </div>
+      </div>
+    </div>
+    <div id="numbers" class="numbers"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState, useEffect } from "preact/hooks";
+      import {
+        createAction,
+        // eslint-disable-next-line no-unused-vars
+        ActionRenderer,
+      } from "@jsenv/navi";
+      import { getActionPrivateProperties } from "../../../action_private_properties.js";
+      // ✅ Test data store
+      const numbersStore = [];
+      let nextId = 1;
+      const numberListAction = createAction(
+        () => {
+          return numbersStore;
+        },
+        { name: "list" },
+      );
+      const postNumberAction = createAction(
+        ({ value }) => {
+          console.log(`Creating number: ${value}`);
+          const newNumber = { id: nextId++, value };
+          numbersStore.push(newNumber);
+          return newNumber;
+        },
+        {
+          name: "post",
+        },
+      );
+      const deleteAllNumbersAction = createAction(
+        () => {
+          console.log("Deleting all numbers");
+          numbersStore.length = 0;
+          const deletedIds = numbersStore.map((num) => num.id);
+          return deletedIds;
+        },
+        {
+          name: "delete",
+        },
+      );
+      numberListAction.reload();
+      // ✅ Helper function to get registry stats
+      const getRegistryStats = () => {
+        const { loadingSet, settledSet } =
+          window.__actions__.getActivationInfo();
+        let alivePostActions = 0;
+        let total = 0;
+        for (const action of new Set([...loadingSet, ...settledSet])) {
+          total++;
+          if (action.name && action.name.includes("post")) {
+            alivePostActions++;
+          }
+        }
+        // ✅ Get activation registry stats
+        const activationStats =
+          window.__actions__.activationWeakSet?.getStats() || {
+            total: 0,
+            alive: 0,
+            dead: 0,
+          };
+        // ✅ Get child action stats
+        const privateProps = getActionPrivateProperties(postNumberAction);
+        const childStats = privateProps.childActionWeakSet.getStats();
+        return {
+          total,
+          alivePostActions,
+          activation: activationStats,
+          child: childStats,
+        };
+      };
+      // ✅ Update stats periodically
+      const updateStats = () => {
+        const stats = getRegistryStats();
+        document.getElementById("numbersCount").textContent =
+          numbersStore.length;
+        document.getElementById("postActionsCount").textContent =
+          stats.alivePostActions;
+        document.getElementById("totalActionsCount").textContent = stats.total;
+        // ✅ Display activation stats
+        const activationStatsEl = document.getElementById("activationStats");
+        if (activationStatsEl) {
+          activationStatsEl.textContent = `Total: ${stats.activation.total}, Alive: ${stats.activation.alive}, Dead: ${stats.activation.dead}`;
+        }
+        // ✅ Display child stats
+        const childStatsEl = document.getElementById("childStats");
+        if (childStatsEl) {
+          if (stats.child.total > 0) {
+            childStatsEl.textContent = `Total: ${stats.child.total}, Alive: ${stats.child.alive}, Dead: ${stats.child.dead}`;
+          } else {
+            childStatsEl.textContent = "No cached child actions";
+          }
+        }
+      };
+      setInterval(() => {
+        updateStats();
+      }, 100);
+      // ✅ Enhanced GC function with force cleanup
+      const forceGCAndCheck = async () => {
+        console.log("🔄 Forcing cleanup and GC...");
+        // ✅ Force cleanup of all weak sets/maps before GC
+        let cleanupStats = {};
+        // Force activation cleanup
+        if (window.__actions__?.activationWeakSet?.forceCleanup) {
+          cleanupStats.activation =
+            window.__actions__.activationWeakSet.forceCleanup();
+        }
+        // Force child action cleanup
+        const privateProps = getActionPrivateProperties(postNumberAction);
+        if (privateProps.childActionWeakSet.forceCleanup) {
+          cleanupStats.child = privateProps.childActionWeakSet.forceCleanup();
+        }
+        // Force browser GC
+        if (window.gc) {
+          window.gc();
+          console.log("🗑️ Browser GC called");
+        } else {
+          // Fallback: créer de la pression mémoire
+          console.log("🗑️ Creating memory pressure...");
+          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));
+        updateStats();
+        // Vérifier le résultat
+        const stats = getRegistryStats();
+        const { alivePostActions } = stats;
+        console.log("📊 Final stats:", {
+          alivePostActions,
+          activation: stats.activation,
+          child: stats.child,
+          cleanup: cleanupStats,
+        });
+        if (alivePostActions === 0) {
+          console.log("✅ SUCCESS: All POST actions were garbage collected!");
+        } else {
+          console.log(
+            `❌ ISSUE: ${alivePostActions} POST actions are still alive`,
+          );
+        }
+      };
+      // eslint-disable-next-line no-unused-vars
+      const TestApp = () => {
+        const [, forceUpdate] = useState({});
+        useEffect(() => {
+          const interval = setInterval(() => {
+            forceUpdate({});
+          }, 100);
+          return () => clearInterval(interval);
+        }, []);
+        return (
+          <ActionRenderer action={numberListAction}>
+            {(numbers) => (
+              <>
+                {numbers.map((num) => (
+                  <div key={num.id} className="number-item">
+                    {num.value}
+                  </div>
+                ))}
+              </>
+            )}
+          </ActionRenderer>
+        );
+      };
+      // ✅ Event listeners
+      document
+        .getElementById("addNumber")
+        .addEventListener("click", async () => {
+          const randomValue = Math.floor(Math.random() * 1000);
+          await postNumberAction.bindParams({ value: randomValue }).reload();
+        });
+      document
+        .getElementById("forceGC")
+        .addEventListener("click", forceGCAndCheck);
+      document
+        .getElementById("clearAll")
+        .addEventListener("click", async () => {
+          await deleteAllNumbersAction.reload();
+        });
+      // ✅ Render the app
+      render(<TestApp />, document.getElementById("numbers"));
+      // ✅ Console helpers for manual testing
+      window.testHelpers = {
+        getRegistryStats,
+        updateStats,
+        numbersStore,
+        actions: {
+          postNumberAction,
+          deleteAllNumbersAction,
+        },
+        // ✅ Add debug helper
+        debugReferences: () => {
+          const stats = getRegistryStats();
+          console.table(stats);
+          return stats;
+        },
+      };
+      console.log("🧪 GC Test loaded!");
+      console.log(
+        "📊 Use window.testHelpers.debugReferences() to check all registry stats",
+      );
+      console.log(
+        "🗑️ Run Chrome with --js-flags='--expose-gc' to enable manual GC",
+      );
+    </script>
+  </body>
+</html>