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/action/4_input_checkbox_demo.html ADDED Viewed

@@ -0,0 +1,611 @@
+<!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>Checkbox Demo</title>
+    <style>
+      body {
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+      .demo-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+        gap: 20px;
+        margin-bottom: 30px;
+      }
+      .demo-card {
+        background: white;
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+      .demo-title {
+        margin: 0 0 15px 0;
+        color: #333;
+        font-size: 16px;
+        font-weight: 600;
+        border-bottom: 2px solid #e0e0e0;
+        padding-bottom: 8px;
+      }
+      .result-display {
+        margin-top: 15px;
+        padding: 12px;
+        background: #f8f9fa;
+        border: 1px solid #dee2e6;
+        border-radius: 4px;
+        min-height: 20px;
+        font-family: monospace;
+        font-size: 14px;
+      }
+      .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;
+      }
+      .button-group {
+        display: flex;
+        gap: 10px;
+        margin-top: 10px;
+      }
+      button {
+        padding: 8px 16px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        background: white;
+        cursor: pointer;
+        font-size: 14px;
+      }
+      button:hover {
+        background: #f8f9fa;
+      }
+      button[type="submit"] {
+        background: #007bff;
+        color: white;
+        border-color: #007bff;
+      }
+      button[type="submit"]:hover {
+        background: #0056b3;
+      }
+      button[type="reset"] {
+        background: #6c757d;
+        color: white;
+        border-color: #6c757d;
+      }
+      button[type="reset"]:hover {
+        background: #545b62;
+      }
+      .control-group {
+        margin-bottom: 15px;
+      }
+      .checkbox-group {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 10px;
+      }
+      .checkbox-group input[type="checkbox"] {
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+      }
+      .checkbox-group label {
+        font-weight: 500;
+        color: #555;
+        cursor: pointer;
+      }
+      .status-indicator {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        margin-right: 8px;
+      }
+      .status-idle {
+        background: #6c757d;
+      }
+      .status-loading {
+        background: #007bff;
+        animation: pulse 1s infinite;
+      }
+      .status-success {
+        background: #28a745;
+      }
+      .status-error {
+        background: #dc3545;
+      }
+      @keyframes pulse {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.5;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Checkbox Demo</h1>
+    <div id="root"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState } from "preact/hooks";
+      import { signal } from "@preact/signals";
+      import {
+        createAction,
+        // eslint-disable-next-line no-unused-vars
+        Field,
+        // eslint-disable-next-line no-unused-vars
+        Form,
+        // eslint-disable-next-line no-unused-vars
+        Input,
+        // eslint-disable-next-line no-unused-vars
+        Button,
+      } from "@jsenv/navi";
+      const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        return (
+          <>
+            <div className="demo-grid">
+              <BasicCheckboxDemo />
+              <CheckboxWithInitialValueDemo />
+              <CheckboxWithExternalControlDemo />
+              <CheckboxWithSignalControlDemo />
+              <CheckboxErrorDemo />
+              <FormCheckboxDemo />
+              <SharedActionDemo />
+            </div>
+          </>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const BasicCheckboxDemo = () => {
+        const [result, setResult] = useState("");
+        const [status, setStatus] = useState("idle");
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Basic Checkbox with Action</h3>
+            <div className="control-group">
+              <div className="checkbox-group">
+                <Input
+                  id="basic-checkbox"
+                  type="checkbox"
+                  name="enabled"
+                  action={async ({ enabled }) => {
+                    setStatus("loading");
+                    setResult("Processing...");
+                    try {
+                      await delay(1000);
+                      const response = `${enabled ? "✅" : "☐"} Checkbox ${enabled ? "checked" : "unchecked"}`;
+                      setResult(response);
+                      setStatus("success");
+                      return response;
+                    } catch (error) {
+                      setResult(`❌ Error: ${error.message}`);
+                      setStatus("error");
+                      throw error;
+                    }
+                  }}
+                />
+                <label htmlFor="basic-checkbox">
+                  <span className={`status-indicator status-${status}`}></span>
+                  Enable feature
+                </label>
+              </div>
+            </div>
+            <div
+              className={`result-display ${status === "loading" ? "result-loading" : status === "success" ? "result-success" : status === "error" ? "result-error" : ""}`}
+            >
+              {result || "Check or uncheck to see action..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const CheckboxWithInitialValueDemo = () => {
+        const [result, setResult] = useState("");
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Checkbox with Initial Value</h3>
+            <div className="control-group">
+              <div className="checkbox-group">
+                <Input
+                  id="initial-checkbox"
+                  type="checkbox"
+                  name="agreed"
+                  checked={true}
+                  action={async ({ agreed }) => {
+                    setResult("Processing...");
+                    await delay(800);
+                    const response = `${agreed ? "✅" : "☐"} Agreement: ${agreed ? "accepted" : "declined"}`;
+                    setResult(response);
+                    return response;
+                  }}
+                />
+                <label htmlFor="initial-checkbox">
+                  I agree to the terms and conditions
+                </label>
+              </div>
+            </div>
+            <div
+              className={`result-display ${result.startsWith("✅") || result.startsWith("☐") ? "result-success" : ""}`}
+            >
+              {result || "Change checkbox to see action..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const CheckboxWithExternalControlDemo = () => {
+        const [isChecked, setIsChecked] = useState(undefined);
+        const [result, setResult] = useState("");
+        // Debug logging
+        console.log(
+          "CheckboxWithExternalControlDemo render - isChecked:",
+          isChecked,
+        );
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Checkbox with External Control</h3>
+            <div className="control-group">
+              <div className="checkbox-group">
+                <Input
+                  id="controlled-checkbox"
+                  type="checkbox"
+                  name="notifications"
+                  checked={isChecked}
+                  action={async ({ notifications }) => {
+                    setResult("Processing...");
+                    await delay(600);
+                    const response = `${notifications ? "✅" : "☐"} Notifications ${notifications ? "enabled" : "disabled"}`;
+                    setResult(response);
+                    return response;
+                  }}
+                />
+                <label htmlFor="controlled-checkbox">
+                  Enable notifications
+                </label>
+              </div>
+            </div>
+            <div className="button-group">
+              <button
+                onClick={() => {
+                  console.log("Setting checkbox to checked");
+                  setIsChecked(true);
+                }}
+              >
+                Enable
+              </button>
+              <button
+                onClick={() => {
+                  console.log("Setting checkbox to unchecked");
+                  setIsChecked(false);
+                }}
+              >
+                Disable
+              </button>
+              <button
+                onClick={() => {
+                  console.log(
+                    "Resetting checkbox, current isChecked:",
+                    isChecked,
+                  );
+                  setIsChecked(undefined);
+                }}
+              >
+                Reset
+              </button>
+            </div>
+            <div
+              className={`result-display ${result.startsWith("✅") || result.startsWith("☐") ? "result-success" : ""}`}
+            >
+              Current state:{" "}
+              {isChecked === undefined
+                ? "undefined"
+                : isChecked
+                  ? "checked"
+                  : "unchecked"}
+              <br />
+              {result ||
+                "Use buttons to control checkbox, then it will trigger action..."}
+            </div>
+          </div>
+        );
+      };
+      // Create an action that's bound to the signal
+      const toggleAction = createAction(async ({ notifications }) => {
+        await delay(600);
+        return `${notifications ? "✅" : "☐"} Notifications ${notifications ? "enabled" : "disabled"}`;
+      });
+      // Create a signal to control the checkbox state
+      const valueSignal = signal(undefined);
+      const toggleActionBound = toggleAction.bindParams({
+        notifications: valueSignal,
+      });
+      // eslint-disable-next-line no-unused-vars
+      const CheckboxWithSignalControlDemo = () => {
+        const [result, setResult] = useState("");
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Checkbox with Signal Control</h3>
+            <div className="control-group">
+              <div className="checkbox-group">
+                <Input
+                  id="signal-controlled-checkbox"
+                  type="checkbox"
+                  name="notifications_signal"
+                  valueSignal={valueSignal}
+                  action={toggleActionBound}
+                  onActionStart={() => {
+                    setResult("Processing...");
+                  }}
+                  onActionEnd={(e) => {
+                    setResult(e.detail.data);
+                  }}
+                />
+                <label htmlFor="signal-controlled-checkbox">
+                  Enable notifications (signal controlled)
+                </label>
+              </div>
+            </div>
+            <div className="button-group">
+              <button
+                onClick={() => {
+                  console.log("Setting signal to true");
+                  valueSignal.value = "on";
+                }}
+              >
+                Enable via Signal
+              </button>
+              <button
+                onClick={() => {
+                  console.log("Setting signal to false");
+                  valueSignal.value = false;
+                }}
+              >
+                Disable via Signal
+              </button>
+              <button
+                onClick={() => {
+                  console.log(
+                    "Toggling signal, current value:",
+                    valueSignal.value,
+                  );
+                  valueSignal.value = valueSignal.value === "on" ? false : "on";
+                }}
+              >
+                Toggle Signal
+              </button>
+            </div>
+            <div
+              className={`result-display ${result.startsWith("✅") || result.startsWith("☐") ? "result-success" : ""}`}
+            >
+              Signal value: {valueSignal.value}
+              <br />
+              {result ||
+                "Use buttons to control checkbox via signal, action will trigger automatically..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const CheckboxErrorDemo = () => {
+        const [result, setResult] = useState("");
+        const [status, setStatus] = useState("idle");
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Checkbox with Error Handling</h3>
+            <div className="control-group">
+              <div className="checkbox-group">
+                <Input
+                  id="error-checkbox"
+                  type="checkbox"
+                  name="dangerous"
+                  action={async ({ dangerous }) => {
+                    setStatus("loading");
+                    setResult("Processing...");
+                    try {
+                      await delay(1500);
+                      throw new Error(
+                        `Action failed for ${dangerous ? "checked" : "unchecked"} state`,
+                      );
+                    } catch (error) {
+                      setResult(`❌ ${error.message}`);
+                      setStatus("error");
+                      throw error;
+                    }
+                  }}
+                />
+                <label htmlFor="error-checkbox">
+                  <span className={`status-indicator status-${status}`}></span>
+                  Dangerous operation (always fails)
+                </label>
+              </div>
+            </div>
+            <div
+              className={`result-display ${status === "loading" ? "result-loading" : status === "error" ? "result-error" : ""}`}
+            >
+              {result || "This checkbox will always trigger an error..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const FormCheckboxDemo = () => {
+        const [result, setResult] = useState("");
+        const [isLoading, setIsLoading] = useState(false);
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Checkboxes inside Form</h3>
+            <Form
+              action={async ({ username, newsletter, updates, marketing }) => {
+                setIsLoading(true);
+                setResult("Submitting preferences...");
+                try {
+                  await delay(1200);
+                  const prefs = [];
+                  if (newsletter) prefs.push("newsletter");
+                  if (updates) prefs.push("updates");
+                  if (marketing) prefs.push("marketing");
+                  const response = `✅ User: ${username}\nSubscriptions: ${prefs.length > 0 ? prefs.join(", ") : "none"}`;
+                  setResult(response);
+                  return response;
+                } catch (error) {
+                  setResult(`❌ Form error: ${error.message}`);
+                  throw error;
+                } finally {
+                  setIsLoading(false);
+                }
+              }}
+            >
+              <input type="hidden" name="username" value="john_doe" />
+              <div className="control-group">
+                <div className="checkbox-group">
+                  <Input
+                    id="form-newsletter"
+                    type="checkbox"
+                    name="newsletter"
+                    checked={true}
+                  />
+                  <label htmlFor="form-newsletter">
+                    Newsletter subscription
+                  </label>
+                </div>
+                <div className="checkbox-group">
+                  <Input id="form-updates" type="checkbox" name="updates" />
+                  <label htmlFor="form-updates">Product updates</label>
+                </div>
+                <div className="checkbox-group">
+                  <Input id="form-marketing" type="checkbox" name="marketing" />
+                  <label htmlFor="form-marketing">Marketing emails</label>
+                </div>
+              </div>
+              <div className="button-group">
+                <Button type="submit">Save Preferences</Button>
+                <Button type="reset">Reset</Button>
+              </div>
+            </Form>
+            <div
+              className={`result-display ${isLoading ? "result-loading" : result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
+            >
+              {result || "Select preferences and submit..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const SharedActionDemo = () => {
+        const [result, setResult] = useState("");
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Shared Action Example</h3>
+            <p
+              style={{
+                margin: "0 0 15px 0",
+                fontSize: "14px",
+                color: "#666",
+                lineHeight: "1.4",
+              }}
+            >
+              <strong>Note:</strong> The checkbox states are not synced here,
+              which is normal. In a real application, both checkboxes would
+              typically be controlled by the same external state to keep them
+              synchronized.
+            </p>
+            <div className="control-group">
+              <div className="checkbox-group">
+                <Input
+                  id="shared-checkbox-1"
+                  type="checkbox"
+                  name="feature1"
+                  action={sharedToggleAction}
+                  onActionStart={() => {
+                    setResult("Processing...");
+                  }}
+                  onActionEnd={(e) => {
+                    setResult(e.detail.data);
+                  }}
+                />
+                <label htmlFor="shared-checkbox-1">
+                  Feature 1 (shared action)
+                </label>
+              </div>
+              <div className="checkbox-group">
+                <Input
+                  id="shared-checkbox-2"
+                  type="checkbox"
+                  name="feature2"
+                  action={sharedToggleAction}
+                  onActionStart={() => {
+                    setResult("Processing...");
+                  }}
+                  onActionEnd={(e) => {
+                    setResult(e.detail.data);
+                  }}
+                />
+                <label htmlFor="shared-checkbox-2">
+                  Feature 2 (same shared action)
+                </label>
+              </div>
+            </div>
+            <div
+              className={`result-display ${result.startsWith("✅") || result.startsWith("☐") ? "result-success" : ""}`}
+            >
+              {result || "Toggle either checkbox to see shared action..."}
+            </div>
+          </div>
+        );
+      };
+      const sharedToggleAction = createAction(async (params) => {
+        await delay(800);
+        const featureName = Object.keys(params).find((key) =>
+          key.startsWith("feature"),
+        );
+        const isEnabled = params[featureName];
+        const response = `${isEnabled ? "✅" : "☐"} ${featureName} ${isEnabled ? "enabled" : "disabled"} (from shared action)`;
+        return response;
+      });
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>