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

@@ -0,0 +1,303 @@
+<!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>Form validation test - Multiple elements</title>
+    <style>
+      .test-container {
+        margin: 20px;
+        padding: 20px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+      .field {
+        margin-bottom: 15px;
+      }
+      .field label {
+        display: block;
+        margin-bottom: 5px;
+        font-weight: bold;
+      }
+      .status {
+        margin-top: 20px;
+        padding: 10px;
+        border-radius: 4px;
+      }
+      .status.success {
+        background-color: #d4edda;
+        color: #155724;
+        border: 1px solid #c3e6cb;
+      }
+      .status.error {
+        background-color: #f8d7da;
+        color: #721c24;
+        border: 1px solid #f5c6cb;
+      }
+      .validation-errors {
+        margin-top: 10px;
+      }
+      .validation-errors ul {
+        margin: 0;
+        padding-left: 20px;
+      }
+      /* ✅ Styles for form params display */
+      .form-params {
+        margin-top: 20px;
+        padding: 15px;
+        background-color: #f8f9fa;
+        border: 1px solid #dee2e6;
+        border-radius: 4px;
+      }
+      .form-params h3 {
+        margin-top: 0;
+        color: #495057;
+      }
+      .form-params pre {
+        background-color: #e9ecef;
+        padding: 10px;
+        border-radius: 4px;
+        overflow-x: auto;
+        margin: 0;
+        font-size: 14px;
+      }
+    </style>
+  </head>
+  <body>
+    <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
+        Form,
+        // eslint-disable-next-line no-unused-vars
+        Button,
+      } from "@jsenv/navi";
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        return (
+          <div>
+            <h1>Test de validation de formulaire multi-éléments</h1>
+            <MultiFieldValidationTest />
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const MultiFieldValidationTest = () => {
+        const [submitStatus, setSubmitStatus] = useState(null);
+        const [validationErrors, setValidationErrors] = useState([]);
+        const [formParams, setFormParams] = useState(null); // ✅ New state for form params
+        const handleFormExecutePrevented = (event) => {
+          console.log("❌ Form execute prevented event:", event);
+          const reason = event.detail;
+          if (reason === "validation_failed") {
+            setSubmitStatus("error");
+            setFormParams(null); // ✅ Clear params on validation failure
+            // Collecter toutes les erreurs de validation
+            const form = event.target;
+            const errors = [];
+            // Parcourir tous les éléments du formulaire
+            const formElements = form.querySelectorAll(
+              "input, select, textarea",
+            );
+            formElements.forEach((element) => {
+              const validationInterface = element.__validationInterface__;
+              if (validationInterface) {
+                // Vérifier si l'élément a des erreurs
+                if (
+                  !element.checkValidity() ||
+                  !validationInterface.checkValidity?.()
+                ) {
+                  const fieldName = element.name || element.id || element.type;
+                  const validationMessage =
+                    element.validationMessage || "Invalid value";
+                  errors.push(`${fieldName}: ${validationMessage}`);
+                }
+              }
+            });
+            setValidationErrors(errors);
+          }
+        };
+        return (
+          <div className="test-container">
+            <h2>Formulaire avec validation multiple</h2>
+            <p>
+              Ce formulaire contient plusieurs champs avec différentes
+              contraintes. Essayez de soumettre avec des valeurs invalides pour
+              voir toutes les erreurs.
+            </p>
+            <Form
+              onReset={() => {
+                setSubmitStatus(null);
+                setValidationErrors([]);
+                setFormParams(null); // ✅ Clear params on reset
+              }}
+              onExecutePrevented={handleFormExecutePrevented}
+              action={async (params) => {
+                console.log("🎯 Form execute event with params:", params);
+                // ✅ Store form params in state
+                setFormParams(params);
+                setSubmitStatus("executing...");
+                setValidationErrors([]);
+                await new Promise((resolve) => setTimeout(resolve, 2_000));
+                setSubmitStatus("Form submitted successfully!");
+              }}
+            >
+              {/* ✅ Champ requis */}
+              <div className="field">
+                <label htmlFor="required-field">Nom (obligatoire) :</label>
+                <Input
+                  id="required-field"
+                  name="name"
+                  required
+                  placeholder="Entrez votre nom"
+                />
+              </div>
+              {/* ✅ Champ email avec validation type */}
+              <div className="field">
+                <label htmlFor="email-field">Email (format email) :</label>
+                <Input
+                  id="email-field"
+                  name="email"
+                  type="email"
+                  placeholder="exemple@domain.com"
+                />
+              </div>
+              {/* ✅ Champ avec pattern */}
+              <div className="field">
+                <label htmlFor="phone-field">
+                  Téléphone (format: 01-23-45-67-89) :
+                </label>
+                <Input
+                  id="phone-field"
+                  name="phone"
+                  pattern="[0-9]{2}-[0-9]{2}-[0-9]{2}-[0-9]{2}-[0-9]{2}"
+                  pattern-validation-message="Doit respecter le format <strong>01-23-45-67-89</strong>."
+                  placeholder="01-23-45-67-89"
+                />
+              </div>
+              {/* ✅ Champ avec longueur minimum */}
+              <div className="field">
+                <label htmlFor="password-field">
+                  Mot de passe (min 8 caractères) :
+                </label>
+                <Input
+                  id="password-field"
+                  name="password"
+                  type="password"
+                  minLength="8"
+                  placeholder="Au moins 8 caractères"
+                />
+              </div>
+              {/* ✅ Champ avec contrainte personnalisée */}
+              <div className="field">
+                <label htmlFor="age-field">Âge (18-99 ans) :</label>
+                <Input
+                  id="age-field"
+                  name="age"
+                  type="number"
+                  min="18"
+                  min-validation-message="L'age doit être de <strong>18</strong> ans ou plus."
+                  max="99"
+                  max-validation-message="L'age doit être de <strong>99</strong> ans ou moins."
+                  placeholder="18"
+                />
+              </div>
+              {/* ✅ Bouton de soumission */}
+              <div className="field">
+                <Button type="submit">Valider le formulaire</Button>
+                <Button type="reset">Reset Status</Button>
+              </div>
+            </Form>
+            {/* ✅ Affichage des paramètres du formulaire */}
+            {formParams && (
+              <div className="form-params">
+                <h3>📋 Paramètres du formulaire soumis :</h3>
+                <pre>{JSON.stringify(formParams, null, 2)}</pre>
+              </div>
+            )}
+            {/* ✅ Affichage du statut */}
+            {submitStatus && (
+              <div
+                className={`status ${submitStatus === "error" ? "error" : "success"}`}
+              >
+                {submitStatus === "error" ? (
+                  <div>
+                    <strong>❌ Validation échouée</strong>
+                    {validationErrors.length > 0 && (
+                      <div className="validation-errors">
+                        <p>Erreurs détectées :</p>
+                        <ul>
+                          {validationErrors.map((error, index) => (
+                            <li key={index}>{error}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <strong>✅ {submitStatus}</strong>
+                )}
+              </div>
+            )}
+            {/* ✅ Instructions de test */}
+            <div
+              style={{
+                marginTop: "30px",
+                padding: "15px",
+                backgroundColor: "#f8f9fa",
+                borderRadius: "4px",
+              }}
+            >
+              <h3>Instructions de test :</h3>
+              <ol>
+                <li>
+                  <strong>Test 1</strong> : Laissez tous les champs vides et
+                  cliquez "Valider" → Doit montrer toutes les erreurs
+                </li>
+                <li>
+                  <strong>Test 2</strong> : Remplissez partiellement (ex: nom
+                  seulement) → Doit montrer les erreurs restantes
+                </li>
+                <li>
+                  <strong>Test 3</strong> : Entrez des valeurs invalides (ex:
+                  email sans @, âge inf. 18) → Doit montrer les erreurs
+                  spécifiques
+                </li>
+                <li>
+                  <strong>Test 4</strong> : Remplissez tout correctement → Doit
+                  permettre la soumission et afficher les paramètres
+                </li>
+              </ol>
+            </div>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>

package/src/components/demos/action/3_details_demo.html ADDED Viewed

@@ -0,0 +1,172 @@
+<!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>Details demo</title>
+  </head>
+  <body>
+    <div id="root" style="position: relative"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import {
+        createAction,
+        // eslint-disable-next-line no-unused-vars
+        Details,
+        // eslint-disable-next-line no-unused-vars
+        Form,
+      } 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>Loaded sync</strong>
+                </p>
+                <Details
+                  id="test"
+                  action={() => {
+                    return "Hello";
+                  }}
+                >
+                  {(message) => <span>{message}</span>}
+                </Details>
+              </div>
+              <div>
+                <p>
+                  <strong>Loaded after 1s</strong>
+                </p>
+                <Details
+                  id="test_2"
+                  action={async () => {
+                    await new Promise((resolve) => {
+                      setTimeout(resolve, 1000);
+                    });
+                    return "Hello";
+                  }}
+                  label="Custom summary"
+                >
+                  {(content) => content}
+                </Details>
+              </div>
+              <div>
+                <p>
+                  <strong>Throw sync</strong>
+                </p>
+                <Details
+                  id="test_3"
+                  action={() => {
+                    throw new Error("error");
+                  }}
+                  label={
+                    <>
+                      <span>A</span>
+                      <span style="font-weight: bold">mixed summary</span>
+                    </>
+                  }
+                ></Details>
+              </div>
+            </div>
+            <div>
+              <p>
+                <strong>Full control (abort, reload)</strong>
+              </p>
+              <Details
+                id="test_4"
+                action={async (_, { signal }) => {
+                  await new Promise((resolve) => {
+                    const timeout = setTimeout(resolve, 1000);
+                    signal.addEventListener("abort", () => {
+                      clearTimeout(timeout);
+                    });
+                  });
+                  return "Hello";
+                }}
+              >
+                {{
+                  loading: (action) => {
+                    return (
+                      <span>
+                        Loading...
+                        <button
+                          onClick={() => {
+                            action.abort();
+                          }}
+                        >
+                          Abort
+                        </button>
+                      </span>
+                    );
+                  },
+                  aborted: (action) => (
+                    <>
+                      <span style="color: red">Aborted</span>
+                      <button
+                        onClick={() => {
+                          action.reload();
+                        }}
+                      >
+                        Reload
+                      </button>
+                    </>
+                  ),
+                  completed: (message, action) => (
+                    <>
+                      <span>{message}</span>
+                      <button
+                        onClick={() => {
+                          action.reload();
+                        }}
+                      >
+                        Reload
+                      </button>
+                    </>
+                  ),
+                }}
+              </Details>
+            </div>
+            <div>
+              <p>
+                <strong>Action preloaded</strong>
+              </p>
+              <Details
+                id="bound"
+                action={rootAction}
+                label="Action using bind params"
+              >
+                {(content) => content}
+              </Details>
+            </div>
+          </>
+        );
+      };
+      const rootAction = createAction(
+        async ({ name = "default name" }) => {
+          await new Promise((resolve) => {
+            setTimeout(resolve, 500);
+          });
+          return name;
+        },
+        { name: "load user" },
+      );
+      window.rootAction = rootAction;
+      // const boundAction = rootAction.bindParams({
+      //   name: "dam",
+      // });
+      rootAction.prerun();
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>