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/6_checkbox_list_demo.html ADDED Viewed

@@ -0,0 +1,109 @@
+<!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 list demo</title>
+  </head>
+  <body>
+    <div id="root" style="position: relative"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import {
+        // eslint-disable-next-line no-unused-vars
+        Button,
+        // eslint-disable-next-line no-unused-vars
+        Form,
+        // eslint-disable-next-line no-unused-vars
+        CheckboxList,
+      } from "@jsenv/navi";
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        return (
+          <div style="display: flex; flex-direction: row; gap: 30px">
+            <div>
+              <p>
+                <strong>Action + log after 1s</strong>
+              </p>
+              <CheckboxList
+                name="colors"
+                label="Select your favorite colors:"
+                value={["red", "blue"]}
+                action={async ({ colors }) => {
+                  await new Promise((resolve) => setTimeout(resolve, 1_000));
+                  console.log(`Colors selected: ${JSON.stringify(colors)}`);
+                }}
+              >
+                {[
+                  { label: "Red", value: "red" },
+                  { label: "Blue", value: "blue" },
+                  { label: "Green", value: "green" },
+                ]}
+              </CheckboxList>
+            </div>
+            <div>
+              <p>
+                <strong>Form + alert after 1s</strong>
+              </p>
+              <Form
+                action={async ({ colors }) => {
+                  await new Promise((resolve) => setTimeout(resolve, 1_000));
+                  // eslint-disable-next-line no-alert
+                  window.alert(`Colors selected: ${JSON.stringify(colors)}`);
+                }}
+              >
+                <CheckboxList
+                  id="form_alert_1"
+                  name="colors"
+                  label="Select your favorite colors:"
+                  value={["blue"]}
+                >
+                  {[
+                    { label: "Red", id: "red", value: "red" },
+                    { label: "Blue", id: "blue", value: "blue" },
+                    { label: "Green", id: "green", value: "green" },
+                  ]}
+                </CheckboxList>
+                <Button type="submit">Submit</Button>
+                <Button type="reset">Reset</Button>
+              </Form>
+            </div>
+            <div>
+              <p>
+                <strong>Form + throw after 1s</strong>
+              </p>
+              <Form
+                action={async ({ colors }) => {
+                  await new Promise((resolve) => setTimeout(resolve, 1_000));
+                  throw new Error(`Colors selected: ${JSON.stringify(colors)}`);
+                }}
+              >
+                <CheckboxList
+                  label="Select your favorite colors:"
+                  name="colors"
+                  value={["red", "blue"]}
+                >
+                  {[
+                    { label: "Red", value: "red" },
+                    { label: "Blue", value: "blue" },
+                    { label: "Green", value: "green" },
+                  ]}
+                </CheckboxList>
+                <Button type="submit">Submit</Button>
+                <Button type="reset">Reset</Button>
+              </Form>
+            </div>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>

package/src/components/demos/action/7_radio_list_demo.html ADDED Viewed

@@ -0,0 +1,217 @@
+<!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 list demo</title>
+  </head>
+  <body>
+    <div id="root" style="position: relative"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import {
+        // eslint-disable-next-line no-unused-vars
+        Button,
+        // eslint-disable-next-line no-unused-vars
+        Form,
+        // eslint-disable-next-line no-unused-vars
+        RadioList,
+      } 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>No action </strong>
+                </p>
+                <RadioList
+                  id="no_action"
+                  name="color"
+                  label="Select your favorite color:"
+                >
+                  {[
+                    { label: "Red", value: "red" },
+                    { label: "Blue", value: "blue" },
+                    { label: "Green", value: "green" },
+                  ]}
+                </RadioList>
+              </div>
+              <div>
+                <p>
+                  <strong>action log after 1s</strong>
+                </p>
+                <RadioList
+                  id="action_alert"
+                  name="color_alert"
+                  label="Select your favorite color:"
+                  action={async ({ color_alert }) => {
+                    await new Promise((resolve) => setTimeout(resolve, 1_000));
+                    console.log(
+                      `Color selected: ${JSON.stringify(color_alert)}`,
+                    );
+                  }}
+                >
+                  {[
+                    { label: "Red", value: "red" },
+                    { label: "Blue", value: "blue" },
+                    { label: "Green", value: "green" },
+                  ]}
+                </RadioList>
+              </div>
+              <div>
+                <p>
+                  <strong>Form + log after 1s</strong>
+                </p>
+                <Form
+                  action={async ({ color }) => {
+                    await new Promise((resolve) => setTimeout(resolve, 1_000));
+                    console.log(`Color selected: ${JSON.stringify(color)}`);
+                  }}
+                >
+                  <RadioList
+                    id="color_form_log"
+                    label="Select your favorite color:"
+                    name="color"
+                  >
+                    {[
+                      { label: "Red", id: "red", value: "red" },
+                      { label: "Blue", id: "blue", value: "blue" },
+                      { label: "Green", id: "green", value: "green" },
+                    ]}
+                  </RadioList>
+                  <Button type="submit">Submit</Button>
+                  <Button type="reset">Reset</Button>
+                </Form>
+              </div>
+            </div>
+            <div>
+              <p>
+                <strong>Action + throw after 1s</strong>
+              </p>
+              <RadioList
+                id="color_action_throw"
+                name="color_action_throw"
+                label="Select your favorite color:"
+                action={async ({ color_action_throw }) => {
+                  await new Promise((resolve) => setTimeout(resolve, 1_000));
+                  throw new Error(
+                    `Color selected: ${JSON.stringify(color_action_throw)}`,
+                  );
+                }}
+              >
+                {[
+                  { label: "Red", id: "red", value: "red" },
+                  { label: "Blue", id: "blue", value: "blue" },
+                  { label: "Green", id: "green", value: "green" },
+                ]}
+              </RadioList>
+            </div>
+            <div>
+              <div>
+                <p>
+                  <strong>Form + throw after 1s</strong>
+                </p>
+                <Form
+                  action={async ({ color_form_throw }) => {
+                    await new Promise((resolve) => setTimeout(resolve, 1_000));
+                    throw new Error(
+                      `Color selected: ${JSON.stringify(color_form_throw)}`,
+                    );
+                  }}
+                >
+                  <RadioList
+                    id="color_form_throw"
+                    name="color_form_throw"
+                    label="Select your favorite color:"
+                  >
+                    {[
+                      { label: "Red", id: "red", value: "red" },
+                      { label: "Blue", id: "blue", value: "blue" },
+                      { label: "Green", id: "green", value: "green" },
+                    ]}
+                  </RadioList>
+                  <Button type="submit">Submit</Button>
+                  <Button type="reset">Reset</Button>
+                </Form>
+              </div>
+            </div>
+            <div>
+              <p>
+                <strong>Form + ref checked throw after 1s</strong>
+              </p>
+              <Form
+                action={async ({ color_form_checked_throw }) => {
+                  await new Promise((resolve) => setTimeout(resolve, 1_000));
+                  throw new Error(
+                    `Color selected: ${JSON.stringify(color_form_checked_throw)}`,
+                  );
+                }}
+              >
+                <RadioList
+                  id="color_form_checked_throw"
+                  name="color_form_checked_throw"
+                  label="Select your favorite color:"
+                  value="red"
+                >
+                  {[
+                    { label: "Red", id: "red", value: "red" },
+                    { label: "Blue", id: "blue", value: "blue" },
+                    { label: "Green", id: "green", value: "green" },
+                  ]}
+                </RadioList>
+                <Button type="submit">Submit</Button>
+                <Button type="reset">Reset</Button>
+              </Form>
+            </div>
+            <div>
+              <p>
+                <strong>Form + required</strong>
+              </p>
+              <Form
+                action={async () => {
+                  await new Promise((resolve) => setTimeout(resolve, 1_000));
+                }}
+              >
+                <RadioList
+                  id="color_form_required"
+                  label="Select your favorite color:"
+                  name="color"
+                  required
+                  data-required-message="Veuillez sélectionner une couleur"
+                >
+                  {[
+                    { label: "Red", id: "red", value: "red" },
+                    { label: "Blue", id: "blue", value: "blue" },
+                    { label: "Green", id: "green", value: "green" },
+                  ]}
+                </RadioList>
+                <Button type="submit">Submit</Button>
+                <Button type="reset">Reset</Button>
+              </Form>
+            </div>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>