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/2_input_textual_demo.html ADDED Viewed

@@ -0,0 +1,354 @@
+<!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>Input Textual Demo</title>
+    <style>
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        max-width: 1400px;
+        margin: 0 auto;
+        padding: 20px;
+        background-color: #f8f9fa;
+      }
+      h1 {
+        text-align: center;
+        color: #333;
+        margin-bottom: 30px;
+      }
+      .demo-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+        gap: 20px;
+      }
+      .demo-card {
+        background: white;
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        border: 1px solid #e1e8ed;
+      }
+      .demo-title {
+        color: #2c3e50;
+        margin-top: 0;
+        margin-bottom: 15px;
+        font-size: 18px;
+        font-weight: 600;
+        border-bottom: 2px solid #3498db;
+        padding-bottom: 8px;
+      }
+      .native-comparison {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 15px;
+        margin: 15px 0;
+      }
+      .native-demo {
+        background: #f8f9fa;
+        padding: 15px;
+        border-radius: 6px;
+        border: 1px solid #dee2e6;
+      }
+      .native-demo h4 {
+        margin-top: 0;
+        margin-bottom: 10px;
+        color: #495057;
+        font-size: 14px;
+        font-weight: 500;
+      }
+      input[type="text"],
+      input[type="email"],
+      input[type="password"],
+      input[type="number"],
+      input[type="tel"],
+      input[type="url"],
+      input[type="search"],
+      textarea {
+        width: 100%;
+        padding: 8px 12px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        font-size: 14px;
+        box-sizing: border-box;
+      }
+      input:focus,
+      textarea:focus {
+        outline: none;
+        border-color: #3498db;
+        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+      }
+      .control-group {
+        margin-bottom: 15px;
+      }
+      label {
+        display: block;
+        margin-bottom: 5px;
+        font-weight: 500;
+        color: #555;
+      }
+      .result-display {
+        background: #f8f9fa;
+        border: 1px solid #dee2e6;
+        border-radius: 4px;
+        padding: 12px;
+        margin-top: 15px;
+        font-family:
+          "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Fira Mono",
+          "Droid Sans Mono", "Courier New", monospace;
+        font-size: 13px;
+        color: #495057;
+        min-height: 20px;
+        white-space: pre-wrap;
+      }
+      .result-success {
+        background: #d4edda;
+        border-color: #c3e6cb;
+        color: #155724;
+      }
+      .result-error {
+        background: #f8d7da;
+        border-color: #f5c6cb;
+        color: #721c24;
+      }
+      .result-loading {
+        background: #d1ecf1;
+        border-color: #bee5eb;
+        color: #0c5460;
+        animation: pulse 1.5s ease-in-out infinite;
+      }
+      @keyframes pulse {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.7;
+        }
+      }
+      .button-group {
+        display: flex;
+        gap: 8px;
+        margin-top: 12px;
+        flex-wrap: wrap;
+      }
+      button {
+        padding: 6px 12px;
+        border: 1px solid #3498db;
+        background: #3498db;
+        color: white;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 14px;
+        transition: all 0.2s ease;
+        box-sizing: border-box;
+      }
+      button:hover {
+        background: #2980b9;
+        border-color: #2980b9;
+      }
+      button:disabled {
+        background: #95a5a6;
+        border-color: #95a5a6;
+        cursor: not-allowed;
+      }
+      @media (max-width: 768px) {
+        .demo-grid {
+          grid-template-columns: 1fr;
+        }
+        .native-comparison {
+          grid-template-columns: 1fr;
+          gap: 10px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Input Textual Demo</h1>
+    <div id="root"></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
+        Field,
+      } from "@jsenv/navi";
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        const [loading, setLoading] = useState(false);
+        const [loadingB, setLoadingB] = useState(false);
+        const [loadingC, setLoadingC] = useState(false);
+        const [loadingD, setLoadingD] = useState(false);
+        return (
+          <div className="demo-grid">
+            <div className="demo-card">
+              <h3 className="demo-title">💫 Loading State</h3>
+              <div className="control-group">
+                <Field
+                  input={
+                    <Input loading={loading} placeholder="Enter some text..." />
+                  }
+                  label="Basic Input"
+                />
+              </div>
+              <div className="native-comparison">
+                <div className="native-demo">
+                  <h4>@jsenv/navi Input</h4>
+                  <Input loading={loading} placeholder="Enter some text..." />
+                </div>
+                <div className="native-demo">
+                  <h4>Native HTML Input</h4>
+                  <input placeholder="Native comparison" />
+                </div>
+              </div>
+              <div className="button-group">
+                <button onClick={() => setLoading(!loading)}>
+                  {loading ? "Stop Loading" : "Start Loading"}
+                </button>
+              </div>
+            </div>
+            <div className="demo-card">
+              <h3 className="demo-title">⚡ Action Input</h3>
+              <div className="control-group">
+                <Field
+                  input={
+                    <Input
+                      name="action-input"
+                      action={() => {}}
+                      loading={loadingB}
+                      placeholder="Input with action..."
+                    />
+                  }
+                  label="Action Input"
+                />
+              </div>
+              <div className="native-comparison">
+                <div className="native-demo">
+                  <h4>@jsenv/navi Input with Action</h4>
+                  <Input
+                    name="action-input"
+                    action={() => {}}
+                    loading={loadingB}
+                    placeholder="Input with action..."
+                  />
+                </div>
+                <div className="native-demo">
+                  <h4>Native HTML Input</h4>
+                  <input placeholder="Native has no built-in action" />
+                </div>
+              </div>
+              <div className="button-group">
+                <button onClick={() => setLoadingB(!loadingB)}>
+                  {loadingB ? "Stop Loading" : "Start Loading"}
+                </button>
+              </div>
+            </div>
+            <div className="demo-card">
+              <h3 className="demo-title">🔒 Read-only State</h3>
+              <div className="control-group">
+                <Field
+                  input={
+                    <Input
+                      value="This is read-only content"
+                      readonly
+                      loading={loadingC}
+                    />
+                  }
+                  label="Read-only Input"
+                  readonly
+                />
+              </div>
+              <div className="native-comparison">
+                <div className="native-demo">
+                  <h4>@jsenv/navi Read-only</h4>
+                  <Input
+                    value="This is read-only content"
+                    readonly
+                    loading={loadingC}
+                  />
+                </div>
+                <div className="native-demo">
+                  <h4>Native Read-only</h4>
+                  <input readonly value="Native read-only" />
+                </div>
+              </div>
+              <div className="button-group">
+                <button onClick={() => setLoadingC(!loadingC)}>
+                  {loadingC ? "Stop Loading" : "Start Loading"}
+                </button>
+              </div>
+            </div>
+            <div className="demo-card">
+              <h3 className="demo-title">🚫 Disabled State</h3>
+              <div className="control-group">
+                <Field
+                  input={
+                    <Input
+                      disabled
+                      loading={loadingD}
+                      placeholder="Disabled input..."
+                    />
+                  }
+                  label="Disabled Input"
+                />
+              </div>
+              <div className="native-comparison">
+                <div className="native-demo">
+                  <h4>@jsenv/navi Disabled</h4>
+                  <Input
+                    disabled
+                    loading={loadingD}
+                    placeholder="Disabled input..."
+                  />
+                </div>
+                <div className="native-demo">
+                  <h4>Native Disabled</h4>
+                  <input disabled placeholder="Native disabled" />
+                </div>
+              </div>
+              <div className="button-group">
+                <button onClick={() => setLoadingD(!loadingD)}>
+                  {loadingD ? "Stop Loading" : "Start Loading"}
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>

package/src/components/demos/3_radio_demo.html ADDED Viewed

@@ -0,0 +1,222 @@
+<!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>Radio loading 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
+        Field,
+      } from "@jsenv/navi";
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        const [loading, setLoading] = useState(false);
+        const [loadingC, setLoadingC] = useState(false);
+        const [loadingD, setLoadingD] = useState(false);
+        const [loadingE, setLoadingE] = useState(false);
+        const [loadingF, setLoadingF] = useState(false);
+        return (
+          <div>
+            <div style="display: flex; flex-direction: row; gap: 30px">
+              <div>
+                <p>
+                  <strong>Loading</strong>
+                </p>
+                <Field
+                  input={
+                    <Input type="radio" name="loading" loading={loading} />
+                  }
+                  label="Coucou"
+                ></Field>
+                <button>
+                  <span
+                    onClick={() => {
+                      setLoading(!loading);
+                    }}
+                  >
+                    Toggle
+                  </span>
+                </button>
+                <div>
+                  <label>
+                    <input type="radio" name="loading_native" />
+                    Coucou
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div>
+              <div>
+                <p>
+                  <strong>Read only</strong>
+                </p>
+                <Field
+                  input={
+                    <Input
+                      readOnly
+                      type="radio"
+                      name="readonly"
+                      loading={loadingE}
+                    />
+                  }
+                  label="C"
+                />
+                <button>
+                  <span
+                    onClick={() => {
+                      setLoadingC(!loadingC);
+                    }}
+                  >
+                    Toggle
+                  </span>
+                </button>
+                <div>
+                  <label>
+                    <input type="radio" name="readonly_native" readonly />C
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div>
+              <div>
+                <p>
+                  <strong>Read only + checked</strong>
+                </p>
+                <Field
+                  input={
+                    <Input
+                      readOnly
+                      checked
+                      type="radio"
+                      name="readonly_checked"
+                      loading={loadingD}
+                    />
+                  }
+                  label="D"
+                />
+                <button>
+                  <span
+                    onClick={() => {
+                      setLoadingD(!loadingD);
+                    }}
+                  >
+                    Toggle
+                  </span>
+                </button>
+                <div>
+                  <label>
+                    <input type="radio" name="readonly_native" readonly />D
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div>
+              <div>
+                <p>
+                  <strong>Disabled</strong>
+                </p>
+                <Field
+                  input={
+                    <Input
+                      disabled
+                      type="radio"
+                      name="disabled"
+                      loading={loadingE}
+                    />
+                  }
+                  label="E"
+                />
+                <button>
+                  <span
+                    onClick={() => {
+                      setLoadingE(!loadingE);
+                    }}
+                  >
+                    Toggle
+                  </span>
+                </button>
+                <div>
+                  <label>
+                    <input type="radio" name="disabled_native" disabled />E
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div>
+              <div>
+                <p>
+                  <strong>Disabled checked</strong>
+                </p>
+                <Field
+                  input={
+                    <Input
+                      disabled
+                      checked
+                      type="radio"
+                      name="disabled_checked"
+                      loading={loadingF}
+                    />
+                  }
+                  label="F"
+                />
+                <button>
+                  <span
+                    onClick={() => {
+                      setLoadingF(!loadingF);
+                    }}
+                  >
+                    Toggle
+                  </span>
+                </button>
+                <div>
+                  <label>
+                    <input
+                      type="radio"
+                      name="disabled_checked_native"
+                      disabled
+                      checked
+                    />
+                    F
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>

package/src/components/demos/4_select_demo.html ADDED Viewed

@@ -0,0 +1,104 @@
+<!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>Select 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
+        Select,
+        // eslint-disable-next-line no-unused-vars
+        Field,
+      } from "@jsenv/navi";
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        const [loading, setLoading] = useState(false);
+        return (
+          <div>
+            <button>
+              <span
+                onClick={() => {
+                  setLoading(!loading);
+                }}
+              >
+                {loading ? "Stop loading" : "Start loading"}
+              </span>
+            </button>
+            <div style="display: flex; flex-direction: row; gap: 30px">
+              <div>
+                <p>
+                  <strong>Loading</strong>
+                </p>
+                <Field
+                  input={
+                    <Select name="loading" loading={loading}>
+                      {[
+                        { label: "a", value: "a" },
+                        { label: "b", value: "b" },
+                      ]}
+                    </Select>
+                  }
+                  label="Coucou"
+                ></Field>
+                <div>
+                  <label>
+                    <select name="loading_native">
+                      <option value="a">a</option>
+                      <option value="b">b</option>
+                    </select>
+                    Coucou
+                  </label>
+                </div>
+              </div>
+              <div>
+                <p>
+                  <strong>Readonly</strong>
+                </p>
+                <Field
+                  input={
+                    <Select name="loading" loading={loading} value="b" readOnly>
+                      {[
+                        { label: "a", value: "a" },
+                        { label: "b", value: "b" },
+                      ]}
+                    </Select>
+                  }
+                  label="Coucou"
+                ></Field>
+                <div>
+                  <label>
+                    <select name="loading_native" readonly>
+                      <option value="a">a</option>
+                      <option value="b" selected>
+                        b
+                      </option>
+                    </select>
+                    Coucou
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>