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/docs/demos/resource/resource_demo_9_describe_one.html ADDED Viewed

@@ -0,0 +1,472 @@
+<!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>Resource demo describe one</title>
+  </head>
+  <body>
+    <div id="root" style="position: relative; width: 600px"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState, useEffect, useRef } from "preact/hooks";
+      import {
+        resource,
+        // eslint-disable-next-line no-unused-vars
+        ActionRenderer,
+      } from "@jsenv/navi";
+      import {
+        // eslint-disable-next-line no-unused-vars
+        ActionStatus,
+      } from "./action_status.jsx";
+      import { localStorageSignal } from "../../../store/local_storage_signal.js";
+      const tables = [
+        { id: "table_1", name: "table_1", owner: "user_1" },
+        { id: "table_2", name: "table_2", owner: "user_2" },
+      ];
+      const users = [
+        { id: "user_1", name: "User 1" },
+        { id: "user_2", name: "User 2" },
+      ];
+      const getUser = ({ userId }) => {
+        const user = users.find((user) => user.id === userId);
+        user.tables = tables.filter((table) => table.owner?.id === userId);
+        return user;
+      };
+      const USER = resource("user", {
+        idKey: "id",
+        mutableIdKey: "name",
+        GET: getUser,
+        GET_MANY: () => users,
+        PUT: ({ name, field, value }) => {
+          let userToUpdate = users.find((u) => u.name === name);
+          const id = userToUpdate.id;
+          userToUpdate[field] = value;
+          return { id, [field]: value };
+        },
+      });
+      USER.RENAME = USER.PUT.bindParams({ field: "name" });
+      const TABLE = resource("table", {
+        idKey: "id",
+        mutableIdKey: "name",
+        GET: ({ name }) => {
+          const table = tables.find((table) => table.name === name);
+          if (!table) {
+            throw new Error(`Table with name "${name}" not found`);
+          }
+          return table;
+        },
+        GET_MANY: () => tables,
+        PUT: ({ name, field, value }) => {
+          let tableToUpdate = tables.find((t) => t.name === name);
+          const id = tableToUpdate.id;
+          tableToUpdate[field] = value;
+          return { id, [field]: value };
+        },
+      });
+      TABLE.RENAME = TABLE.PUT.bindParams({ field: "name" });
+      USER.many("tables", TABLE, {
+        GET: ({ userId }) => {
+          return tables.filter((table) => table.owner?.id === userId);
+        },
+        POST: ({ tableId }) => {
+          const tableToAdd = tables.find((t) => t.id === tableId);
+          return tableToAdd;
+        },
+        DELETE: ({ tableId }) => {
+          return tableId;
+        },
+        POST_MANY: ({ tableIds }) => {
+          const tablesToAdd = tables.filter((t) => tableIds.includes(t.id));
+          return tablesToAdd;
+        },
+        DELETE_MANY: ({ tableIds }) => {
+          return tableIds;
+        },
+      });
+      const TABLE_OWNER = TABLE.one("owner", USER, {
+        GET: ({ tableId, owner }) => {
+          if (!owner) {
+            return null;
+          }
+          return {
+            id: tableId,
+            owner: getUser({ userId: owner.id }),
+          };
+        },
+        PUT: ({ tableId, newOwnerId }) => {
+          const newOwner = users.find((u) => u.id === newOwnerId);
+          const tableToUpdate = tables.find((t) => t.id === tableId);
+          tableToUpdate.owner = newOwner;
+          return {
+            id: tableId,
+            owner: newOwner,
+          };
+        },
+        DELETE: ({ tableId }) => {
+          const tableToUpdate = tables.find((t) => t.id === tableId);
+          tableToUpdate.owner = null;
+          return {
+            id: tableId,
+            owner: null,
+          };
+        },
+      });
+      // Signal pour la table courante
+      const currentTableNameSignal = localStorageSignal("current_table_name");
+      const currentTableAction = TABLE.GET.bindParams({
+        name: currentTableNameSignal,
+      });
+      if (currentTableNameSignal.value) {
+        currentTableAction.load();
+      }
+      TABLE.store.registerPropertyChangeCallback("name", (tableName) => {
+        currentTableNameSignal.value = tableName;
+      });
+      TABLE.GET_MANY.load();
+      USER.GET_MANY.load();
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        return (
+          <div style={{ display: "flex", gap: "20px" }}>
+            <div style={{ flex: 1 }}>
+              <h2>Tables</h2>
+              <TablesList />
+              <h2>Current Table</h2>
+              <CurrentTable />
+            </div>
+            <div style={{ flex: 1 }}>
+              <h2>Users</h2>
+              <UsersList />
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const TablesList = () => {
+        return (
+          <ActionRenderer action={TABLE.GET_MANY}>
+            {(tables) => (
+              <div>
+                {tables.map((table) => (
+                  <TableItem key={table.id} table={table} />
+                ))}
+              </div>
+            )}
+          </ActionRenderer>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const TableItem = ({ table }) => {
+        const [isEditing, setIsEditing] = useState(false);
+        const [editName, setEditName] = useState(table.name);
+        // ✅ NEW: State for editing owner
+        const [isEditingOwner, setIsEditingOwner] = useState(false);
+        const [editOwnerId, setEditOwnerId] = useState(table.owner?.id);
+        const handleSave = async () => {
+          await TABLE.RENAME.bindParams({
+            name: table.name,
+            value: editName,
+          }).reload();
+          setIsEditing(false);
+        };
+        const handleCancel = () => {
+          setEditName(table.name);
+          setIsEditing(false);
+        };
+        // ✅ NEW: Handle owner update
+        const handleOwnerSave = async () => {
+          if (editOwnerId) {
+            await TABLE_OWNER.PUT.bindParams({
+              tableId: table.id,
+              newOwnerId: editOwnerId,
+            }).reload();
+            setIsEditingOwner(false);
+            return;
+          }
+          await TABLE_OWNER.DELETE.bindParams({ tableId: table.id }).reload();
+          setIsEditingOwner(false);
+        };
+        const handleOwnerCancel = () => {
+          setEditOwnerId(table.owner?.id);
+          setIsEditingOwner(false);
+        };
+        const inputRef = useRef();
+        useEffect(() => {
+          if (isEditing) {
+            inputRef.current.focus();
+            inputRef.current.select();
+          }
+        }, [isEditing]);
+        // ✅ Get current owner name for display
+        const currentOwner = users.find((u) => u.id === table.owner?.id);
+        return (
+          <div
+            style={{
+              border: "1px solid #ccc",
+              padding: "10px",
+              margin: "5px 0",
+              backgroundColor:
+                currentTableNameSignal.value === table.name
+                  ? "#e6f3ff"
+                  : "white",
+            }}
+          >
+            <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+              {isEditing ? (
+                <>
+                  <input
+                    ref={inputRef}
+                    value={editName}
+                    onChange={(e) => setEditName(e.target.value)}
+                    style={{ flex: 1 }}
+                  />
+                  <button onClick={handleSave}>Save</button>
+                  <button onClick={handleCancel}>Cancel</button>
+                </>
+              ) : (
+                <>
+                  <strong style={{ flex: 1 }}>{table.name}</strong>
+                  <button onClick={() => setIsEditing(true)}>Rename</button>
+                  <button
+                    onClick={() => {
+                      currentTableNameSignal.value = table.name;
+                      currentTableAction.reload();
+                    }}
+                    disabled={currentTableNameSignal.value === table.name}
+                  >
+                    Select
+                  </button>
+                </>
+              )}
+            </div>
+            {/* ✅ NEW: Owner editing section */}
+            <div style={{ marginTop: "10px", fontSize: "12px", color: "#666" }}>
+              <div
+                style={{ display: "flex", alignItems: "center", gap: "10px" }}
+              >
+                {isEditingOwner ? (
+                  <>
+                    <span>Owner:</span>
+                    <select
+                      value={editOwnerId}
+                      onChange={(e) => {
+                        const value = e.target.value;
+                        setEditOwnerId(value === "" ? null : e.target.value);
+                      }}
+                      style={{ fontSize: "12px" }}
+                    >
+                      <option value=""></option>
+                      {users.map((user) => (
+                        <option key={user.id} value={user.id}>
+                          {user.name}
+                        </option>
+                      ))}
+                    </select>
+                    <button
+                      onClick={handleOwnerSave}
+                      style={{ fontSize: "10px", padding: "2px 6px" }}
+                    >
+                      Save
+                    </button>
+                    <button
+                      onClick={handleOwnerCancel}
+                      style={{ fontSize: "10px", padding: "2px 6px" }}
+                    >
+                      Cancel
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <span>Owner: {currentOwner?.name || "Unknown"}</span>
+                    <button
+                      onClick={() => {
+                        setEditOwnerId(table.owner?.id);
+                        setIsEditingOwner(true);
+                      }}
+                      style={{ fontSize: "10px", padding: "2px 6px" }}
+                    >
+                      Change Owner
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const CurrentTable = () => {
+        if (!currentTableNameSignal.value) {
+          return <p>No table selected</p>;
+        }
+        return (
+          <div>
+            <ActionStatus action={currentTableAction} />
+            <ActionRenderer action={currentTableAction}>
+              {(table) => <TableDetails table={table} />}
+            </ActionRenderer>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const TableDetails = ({ table }) => {
+        const getTableOwner = TABLE_OWNER.GET.bindParams({
+          tableId: table.id,
+          owner: table.owner,
+        });
+        // const { idle } = useActionStatus(getTableOwner);
+        return (
+          <div style={{ border: "2px solid #007acc", padding: "15px" }}>
+            <h3>{table.name}</h3>
+            <p>ID: {table.id}</p>
+            <details
+              onToggle={(e) => {
+                if (e.target.open) {
+                  getTableOwner.load();
+                } else {
+                  getTableOwner.abort();
+                }
+              }}
+            >
+              <summary>Owner Details</summary>
+              <ActionRenderer action={getTableOwner}>
+                {(owner) => {
+                  if (!owner) {
+                    return <p>No owner assigned</p>;
+                  }
+                  return (
+                    <div
+                      style={{
+                        marginTop: "10px",
+                        padding: "10px",
+                        backgroundColor: "#f0f0f0",
+                      }}
+                    >
+                      <p>
+                        <strong>Owner:</strong> {owner.name}
+                      </p>
+                      <p>
+                        <strong>Owner ID:</strong> {owner.id}
+                      </p>
+                    </div>
+                  );
+                }}
+              </ActionRenderer>
+            </details>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const UsersList = () => {
+        return (
+          <ActionRenderer action={USER.GET_MANY}>
+            {(users) => (
+              <div>
+                {users.map((user) => (
+                  <UserItem key={user.id} user={user} />
+                ))}
+              </div>
+            )}
+          </ActionRenderer>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const UserItem = ({ user }) => {
+        const [isEditing, setIsEditing] = useState(false);
+        const [editName, setEditName] = useState(user.name);
+        const handleSave = async () => {
+          await USER.RENAME.bindParams({
+            name: user.name,
+            value: editName,
+          }).load();
+          setIsEditing(false);
+        };
+        const handleCancel = () => {
+          setEditName(user.name);
+          setIsEditing(false);
+        };
+        const inputRef = useRef();
+        useEffect(() => {
+          if (isEditing) {
+            inputRef.current.focus();
+            inputRef.current.select();
+          }
+        }, [isEditing]);
+        // Compter combien de tables appartiennent à cet utilisateur
+        const userTables = user.tables || [];
+        return (
+          <div
+            style={{
+              border: "1px solid #ccc",
+              padding: "10px",
+              margin: "5px 0",
+              backgroundColor: "#f9f9f9",
+            }}
+          >
+            <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+              {isEditing ? (
+                <>
+                  <input
+                    ref={inputRef}
+                    value={editName}
+                    onChange={(e) => setEditName(e.target.value)}
+                    style={{ flex: 1 }}
+                  />
+                  <button onClick={handleSave}>Save</button>
+                  <button onClick={handleCancel}>Cancel</button>
+                </>
+              ) : (
+                <>
+                  <strong style={{ flex: 1 }}>{user.name}</strong>
+                  <button onClick={() => setIsEditing(true)}>Rename</button>
+                </>
+              )}
+            </div>
+            <div style={{ marginTop: "10px", fontSize: "12px", color: "#666" }}>
+              ID: {user.id} | Tables owned: {userTables.length}
+              {userTables.length > 0 && (
+                <span> ({userTables.map((t) => t.name).join(", ")})</span>
+              )}
+            </div>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>

package/src/docs/demos/resource/tata.jsx ADDED Viewed

@@ -0,0 +1,3 @@
+export const Tata = () => {
+  return "tata";
+};

package/src/docs/demos/resource/toto.jsx ADDED Viewed

@@ -0,0 +1,3 @@
+export const Toto = () => {
+  return "toto";
+};

package/src/docs/demos/user_nav/user_nav.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>User Navigation Test</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="user_nav.jsx"></script>
+  </body>
+</html>