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/components/demos/5_list_scrollable_demo.html ADDED Viewed

@@ -0,0 +1,153 @@
+<!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>Scrollable List Demo</title>
+  </head>
+  <body>
+    <div id="root" style="position: relative"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState, useRef } from "preact/hooks";
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        const [items, setItems] = useState(() =>
+          Array.from({ length: 100 }, (_, i) => ({
+            id: i,
+            text: `Item ${i} - Lorem ipsum dolor sit amet consectetur adipisicing elit`,
+          })),
+        );
+        const [renderKey, setRenderKey] = useState(0);
+        const listRef = useRef();
+        const addItem = () => {
+          setItems((prev) => [
+            ...prev,
+            {
+              id: Date.now(),
+              text: `New Item ${Date.now()} - Added dynamically with some long text`,
+            },
+          ]);
+        };
+        const removeLastItem = () => {
+          setItems((prev) => prev.slice(0, -1));
+        };
+        const forceReRender = () => {
+          setRenderKey((prev) => prev + 1);
+          // Force a re-render by updating items with new objects
+          setItems((prev) => prev.map((item) => ({ ...item })));
+        };
+        const scrollToMiddleAndReRender = () => {
+          if (listRef.current) {
+            const scrollHeight = listRef.current.scrollHeight;
+            const clientHeight = listRef.current.clientHeight;
+            const scrollTop = (scrollHeight - clientHeight) / 2;
+            listRef.current.scrollTop = scrollTop;
+            // Force re-render after scrolling
+            setTimeout(() => {
+              setRenderKey((prev) => prev + 1);
+              // Force a re-render by updating items with new objects
+              setItems((prev) => prev.map((item) => ({ ...item })));
+            }, 100);
+          }
+        };
+        return (
+          <div style="padding: 20px; font-family: Arial, sans-serif;">
+            <h1>Scrollable List Re-render Test</h1>
+            <div style="margin-bottom: 20px; display: flex; gap: 10px; flex-wrap: wrap;">
+              <button onClick={addItem} style="padding: 8px 16px;">
+                Add Item
+              </button>
+              <button onClick={removeLastItem} style="padding: 8px 16px;">
+                Remove Last Item
+              </button>
+              <button
+                onClick={forceReRender}
+                style="padding: 8px 16px; background: orange; color: white;"
+              >
+                Force Re-render
+              </button>
+              <button
+                onClick={scrollToMiddleAndReRender}
+                style="padding: 8px 16px; background: purple; color: white;"
+              >
+                Scroll to Middle + Re-render
+              </button>
+            </div>
+            <div style="margin-bottom: 10px;">
+              <strong>Total items: {items.length}</strong> |
+              <strong>Render key: {renderKey}</strong>
+            </div>
+            <ul
+              ref={listRef}
+              style="
+                height: 400px;
+                overflow-y: auto;
+                border: 2px solid #ccc;
+                margin: 0;
+                padding: 0;
+                list-style: none;
+                background: #f9f9f9;
+              "
+            >
+              {items.map((item, index) => (
+                <li
+                  key={item.id}
+                  style="
+                    padding: 12px 16px;
+                    border-bottom: 1px solid #ddd;
+                    background: white;
+                    margin-bottom: 2px;
+                  "
+                >
+                  <div style="font-weight: bold; color: #333;">
+                    #{index + 1} (ID: {item.id})
+                  </div>
+                  <div style="color: #666; margin-top: 4px;">{item.text}</div>
+                </li>
+              ))}
+            </ul>
+            <div style="margin-top: 20px; padding: 10px; background: #e8f4f8; border-radius: 4px;">
+              <h3>Test Instructions:</h3>
+              <ul>
+                <li>
+                  <strong>Add/Remove Items:</strong> Test how list changes
+                  affect scroll position
+                </li>
+                <li>
+                  <strong>Force Re-render:</strong> Test pure re-rendering
+                  without data changes
+                </li>
+                <li>
+                  <strong>Scroll + Re-render:</strong> Test scroll position
+                  preservation during re-render
+                </li>
+              </ul>
+              <p>
+                <em>
+                  Watch the scroll position and see how it behaves during
+                  different operations.
+                </em>
+              </p>
+            </div>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>

package/src/components/demos/action/0_button_demo.html ADDED Viewed

@@ -0,0 +1,204 @@
+<!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>Button demo</title>
+  </head>
+  <body>
+    <div id="root" style="position: relative"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState } from "preact/hooks";
+      import {
+        // eslint-disable-next-line no-unused-vars
+        Input,
+        // eslint-disable-next-line no-unused-vars
+        Button,
+        // eslint-disable-next-line no-unused-vars
+        Form,
+      } from "@jsenv/navi";
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        return (
+          <div>
+            <div style="display: flex; flex-direction: row; gap: 30px">
+              <div>
+                <p>
+                  <strong>Default</strong>
+                </p>
+                <Button>A</Button>
+              </div>
+              <div>
+                <p>
+                  <strong>Big content</strong>
+                </p>
+                <Button>
+                  <div style="width: 50px; height: 50px;">B</div>
+                </Button>
+              </div>
+              <div>
+                <p>
+                  <strong>Border radius</strong>
+                </p>
+                <Button style={{ borderRadius: "20px" }}>C</Button>
+              </div>
+            </div>
+            <div style="display: flex; flex-direction: row; gap: 30px">
+              <div>
+                <p>
+                  <strong>Violet border</strong>
+                </p>
+                <Button style={{ borderColor: "violet" }}>D</Button>
+              </div>
+              <div>
+                <p>
+                  <strong>Border width</strong>
+                </p>
+                <Button style={{ borderWidth: "10px" }}>D</Button>
+              </div>
+              <div>
+                <p>
+                  <strong>Outline width</strong>
+                </p>
+                <Button style={{ borderWidth: "5px", outlineWidth: "5px" }}>
+                  D
+                </Button>
+              </div>
+            </div>
+            <div style="display: flex; flex-direction: row; gap: 30px">
+              <div>
+                <p>
+                  <strong>Outside form</strong>
+                </p>
+                <OutsideForm />
+              </div>
+            </div>
+            <div style="display: flex; flex-direction: row; gap: 30px">
+              <div>
+                <p>
+                  <strong>Inside form</strong>
+                </p>
+                <InsideForm />
+              </div>
+              <div>
+                <p>
+                  <strong>Inside form (allow concurrent)</strong>
+                </p>
+                <InsideForm allowConcurrentActions />
+              </div>
+            </div>
+          </div>
+        );
+      };
+      const TIME_TO_WAIT = 1_000;
+      // eslint-disable-next-line no-unused-vars
+      const OutsideForm = () => {
+        const [count, setCount] = useState(0);
+        return (
+          <div>
+            <span>
+              Count: {count}{" "}
+              <button
+                onClick={() => {
+                  setCount((count) => count + 1);
+                }}
+              >
+                +
+              </button>
+              <button
+                onClick={() => {
+                  setCount((count) => count - 1);
+                }}
+              >
+                -
+              </button>
+            </span>
+            <div>
+              <Button
+                action={async () => {
+                  setTimeout(() => {
+                    setCount((count) => count + 1);
+                  }, 200);
+                  await new Promise((resolve) =>
+                    setTimeout(resolve, TIME_TO_WAIT),
+                  );
+                  throw new Error(`test: ${count}`);
+                }}
+              >
+                Hello
+              </Button>
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const InsideForm = (props) => {
+        const [count, setCount] = useState(0);
+        return (
+          <div>
+            <p>
+              <i>
+                This input is outside the form (it is not expected to become
+                readonly), it can be used to force re-render
+              </i>
+            </p>
+            <Input
+              type="number"
+              min="5"
+              name="count"
+              value={count}
+              onInput={(e) => {
+                setCount(e.target.valueAsNumber);
+              }}
+            />
+            <Form
+              action={async ({ name }) => {
+                await new Promise((resolve) =>
+                  setTimeout(resolve, TIME_TO_WAIT),
+                );
+                console.log(`form action: { count: ${count}, name: ${name} }`);
+              }}
+              {...props}
+            >
+              <Input type="hidden" name="name" value="dam" />
+              <Button
+                action={async ({ name }) => {
+                  await new Promise((resolve) =>
+                    setTimeout(resolve, TIME_TO_WAIT),
+                  );
+                  throw new Error(
+                    `button action: { count: ${count}, name: ${name} }`,
+                  );
+                }}
+              >
+                Hello
+              </Button>
+              <Button type="submit">Submit</Button>
+            </Form>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>

package/src/components/demos/action/10_shortcuts_demo.html ADDED Viewed

@@ -0,0 +1,189 @@
+<!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>Keyboard Shortcuts Demo</title>
+    <style>
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 40px 20px;
+        line-height: 1.6;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        color: #333;
+      }
+      .demo-container {
+        background: white;
+        border-radius: 12px;
+        padding: 40px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+      }
+      .demo-title {
+        font-size: 2rem;
+        font-weight: 700;
+        margin: 0 0 30px 0;
+        color: #2d3748;
+        text-align: center;
+      }
+      .demo-description {
+        background: #f7fafc;
+        border-left: 4px solid #4299e1;
+        padding: 20px;
+        margin: 0 0 30px 0;
+        border-radius: 0 8px 8px 0;
+      }
+      .demo-description h3 {
+        margin: 0 0 15px 0;
+        color: #2d3748;
+        font-size: 1.2rem;
+      }
+      .shortcut-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+      .shortcut-item {
+        display: flex;
+        align-items: center;
+        margin: 10px 0;
+        padding: 8px 0;
+      }
+      .shortcut-key {
+        background: #2d3748;
+        color: white;
+        padding: 4px 12px;
+        border-radius: 6px;
+        font-family: "Monaco", "Menlo", monospace;
+        font-size: 0.85rem;
+        font-weight: 600;
+        margin-right: 15px;
+        min-width: 60px;
+        text-align: center;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+      .shortcut-description {
+        color: #4a5568;
+        flex: 1;
+      }
+      .demo-link-container {
+        text-align: center;
+        margin: 40px 0;
+        padding: 30px;
+        background: #f8f9fa;
+        border: 2px solid #e9ecef;
+        border-radius: 12px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+      .instructions {
+        background: #fff5f5;
+        border: 1px solid #fed7d7;
+        border-radius: 8px;
+        padding: 20px;
+        margin-top: 30px;
+      }
+      .instructions h4 {
+        color: #c53030;
+        margin: 0 0 10px 0;
+        font-size: 1rem;
+      }
+      .instructions p {
+        margin: 0;
+        color: #744210;
+        font-size: 0.9rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import {
+        // eslint-disable-next-line no-unused-vars
+        Link,
+      } from "@jsenv/navi";
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        return (
+          <div className="demo-container">
+            <h1 className="demo-title">⌨️ Keyboard Shortcuts Demo</h1>
+            <div className="demo-description">
+              <h3>How to test:</h3>
+              <ul className="shortcut-list">
+                <li className="shortcut-item">
+                  <span className="shortcut-key">Enter</span>
+                  <span className="shortcut-description">
+                    Shows loading (0.5s), then displays alert
+                  </span>
+                </li>
+                <li className="shortcut-item">
+                  <span className="shortcut-key">Space</span>
+                  <span className="shortcut-description">
+                    Shows loading (1.5s), then throws error
+                  </span>
+                </li>
+              </ul>
+            </div>
+            <div className="demo-link-container">
+              <Link
+                href="#"
+                shortcuts={[
+                  {
+                    key: "enter",
+                    action: async () => {
+                      await new Promise((resolve) => setTimeout(resolve, 500));
+                      // eslint-disable-next-line no-alert
+                      window.alert("✅ Enter key pressed successfully!");
+                    },
+                  },
+                  {
+                    key: "space",
+                    action: async () => {
+                      await new Promise((resolve) => setTimeout(resolve, 1500));
+                      throw new Error(
+                        "💥 Space key triggered an error (this is expected)",
+                      );
+                    },
+                  },
+                ]}
+              >
+                🎯 Click or Focus Me and Try Shortcuts
+              </Link>
+            </div>
+            <div className="instructions">
+              <h4>📋 Instructions</h4>
+              <p>
+                Click on the link above or press Tab to focus it, then try the
+                keyboard shortcuts. You'll see loading states and different
+                outcomes for each key.
+              </p>
+            </div>
+          </div>
+        );
+      };
+      render(<App />, document.getElementById("root"));
+    </script>
+  </body>
+</html>