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/1_input_text_demo.html ADDED Viewed

@@ -0,0 +1,461 @@
+<!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 Text Demo</title>
+    <style>
+      body {
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 20px;
+        background: #f5f5f5;
+      }
+      .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;
+      }
+      input {
+        width: 100%;
+        padding: 8px 12px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        font-size: 14px;
+        box-sizing: border-box;
+      }
+      .control-group {
+        margin-bottom: 15px;
+      }
+      label {
+        display: block;
+        margin-bottom: 5px;
+        font-weight: 500;
+        color: #555;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Input Text Demo</h1>
+    <div id="root"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState } from "preact/hooks";
+      // eslint-disable-next-line no-unused-vars
+      import { Field, Input, Form, Button, createAction } 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">
+              <BasicInputDemo />
+              <InputWithInitialValueDemo />
+              <InputWithExternalControlDemo />
+              <FormInputDemo />
+              <FormWithExternalControlDemo />
+              <SharedActionDemo />
+            </div>
+          </>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const BasicInputDemo = () => {
+        const [result, setResult] = useState("");
+        const [isLoading, setIsLoading] = useState(false);
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Basic Input with Action</h3>
+            <div className="control-group">
+              <label htmlFor="basic-input">Enter some text:</label>
+              <Input
+                id="basic-input"
+                name="text"
+                placeholder="Type something..."
+                action={async ({ text }) => {
+                  setIsLoading(true);
+                  setResult("Processing...");
+                  try {
+                    await delay(1000);
+                    const response = `✅ Processed: "${text}"`;
+                    setResult(response);
+                    return response;
+                  } catch (error) {
+                    setResult(`❌ Error: ${error.message}`);
+                    throw error;
+                  } finally {
+                    setIsLoading(false);
+                  }
+                }}
+              />
+            </div>
+            <div
+              className={`result-display ${isLoading ? "result-loading" : result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
+            >
+              {result || "Result will appear here..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const InputWithInitialValueDemo = () => {
+        const [result, setResult] = useState("");
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Input with Initial Value</h3>
+            <div className="control-group">
+              <label htmlFor="initial-input">Input with preset value:</label>
+              <Input
+                id="initial-input"
+                name="text"
+                value="Hello World!"
+                action={async ({ text }) => {
+                  setResult("Processing...");
+                  await delay(800);
+                  const response = `✅ Submitted: "${text}"`;
+                  setResult(response);
+                  return response;
+                }}
+              />
+            </div>
+            <div
+              className={`result-display ${result.startsWith("✅") ? "result-success" : ""}`}
+            >
+              {result || "Submit to see result..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const InputWithExternalControlDemo = () => {
+        const [inputValue, setInputValue] = useState(undefined);
+        const [result, setResult] = useState("");
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Input with External Control</h3>
+            <div className="control-group">
+              <label htmlFor="controlled-input">
+                Externally controlled input:
+              </label>
+              <Input
+                id="controlled-input"
+                name="text"
+                value={inputValue}
+                placeholder="Use buttons below to set value"
+                action={async ({ text }) => {
+                  setResult("Processing...");
+                  await delay(600);
+                  const response = `✅ Action executed with: "${text}"`;
+                  setResult(response);
+                  return response;
+                }}
+              />
+            </div>
+            <div className="button-group">
+              <button
+                onClick={() => {
+                  setInputValue("Preset Value 1");
+                }}
+              >
+                Set Value 1
+              </button>
+              <button
+                onClick={() => {
+                  setInputValue("Preset Value 2");
+                }}
+              >
+                Set Value 2
+              </button>
+              <button
+                onClick={() => {
+                  setInputValue("");
+                }}
+              >
+                Clear
+              </button>
+            </div>
+            <div
+              className={`result-display ${result.startsWith("✅") ? "result-success" : ""}`}
+            >
+              Current value: "{inputValue}"<br />
+              {result || "Click buttons to change value, then submit..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const FormInputDemo = () => {
+        const [result, setResult] = useState("");
+        const [isLoading, setIsLoading] = useState(false);
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Input inside Form</h3>
+            <Form
+              action={async ({ username, email }) => {
+                setIsLoading(true);
+                setResult("Submitting form...");
+                try {
+                  await delay(1200);
+                  const response = `✅ Form submitted!\nUsername: ${username}\nEmail: ${email}`;
+                  setResult(response);
+                  return response;
+                } catch (error) {
+                  setResult(`❌ Form error: ${error.message}`);
+                  throw error;
+                } finally {
+                  setIsLoading(false);
+                }
+              }}
+            >
+              <div className="control-group">
+                <label htmlFor="form-username">Username:</label>
+                <Input
+                  id="form-username"
+                  name="username"
+                  placeholder="Enter username"
+                />
+              </div>
+              <div className="control-group">
+                <label htmlFor="form-email">Email:</label>
+                <Input
+                  id="form-email"
+                  name="email"
+                  type="email"
+                  placeholder="Enter email"
+                />
+              </div>
+              <div className="button-group">
+                <Button type="submit">Submit Form</Button>
+                <Button type="reset">Reset</Button>
+              </div>
+            </Form>
+            <div
+              className={`result-display ${isLoading ? "result-loading" : result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
+            >
+              {result || "Fill form and submit..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const FormWithExternalControlDemo = () => {
+        const [username, setUsername] = useState(undefined);
+        const [email, setEmail] = useState(undefined);
+        const [result, setResult] = useState("");
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Form with External Control</h3>
+            <Form
+              action={async (params) => {
+                setResult("Submitting form...");
+                await delay(1000);
+                const response = `✅ Form submitted!\nUsername: ${params.username}\nEmail: ${params.email}`;
+                setResult(response);
+                return response;
+              }}
+            >
+              <div className="control-group">
+                <label htmlFor="controlled-form-username">Username:</label>
+                <Input
+                  id="controlled-form-username"
+                  name="username"
+                  value={username}
+                  placeholder="Controlled by buttons"
+                />
+              </div>
+              <div className="control-group">
+                <label htmlFor="controlled-form-email">Email:</label>
+                <Input
+                  id="controlled-form-email"
+                  name="email"
+                  value={email}
+                  placeholder="Controlled by buttons"
+                />
+              </div>
+              <div className="button-group">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setUsername("john_doe");
+                    setEmail("john@example.com");
+                  }}
+                >
+                  Set User 1
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setUsername("jane_smith");
+                    setEmail("jane@example.com");
+                  }}
+                >
+                  Set User 2
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setUsername("");
+                    setEmail("");
+                  }}
+                >
+                  Clear All
+                </button>
+              </div>
+              <div className="button-group">
+                <Button type="submit">Submit Form</Button>
+                <Button type="reset">Reset</Button>
+              </div>
+            </Form>
+            <div
+              className={`result-display ${result.startsWith("✅") ? "result-success" : ""}`}
+            >
+              Current: {username} / {email}
+              <br />
+              {result || "Use buttons to set values, then 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>
+            <div className="control-group">
+              <label htmlFor="shared-input-1">Input 1 (shared action):</label>
+              <Input
+                id="shared-input-1"
+                name="name"
+                placeholder="Enter name for input 1"
+                action={sharedAction}
+                onActionStart={() => {
+                  setResult("Processing...");
+                }}
+                onActionEnd={(e) => {
+                  setResult(e.detail.data);
+                }}
+              />
+            </div>
+            <div className="control-group">
+              <label htmlFor="shared-input-2">
+                Input 2 (same shared action):
+              </label>
+              <Input
+                id="shared-input-2"
+                name="name"
+                placeholder="Enter name for input 2"
+                action={sharedAction}
+              />
+            </div>
+            <div
+              className={`result-display ${result.startsWith("✅") ? "result-success" : ""}`}
+            >
+              {result || "Type in either input and submit..."}
+            </div>
+          </div>
+        );
+      };
+      const sharedAction = createAction(async ({ name }) => {
+        await delay(800);
+        const response = `✅ Hello ${name}! (from shared action)`;
+        return response;
+      });
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>