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_11_describe_many.html ADDED Viewed

@@ -0,0 +1,362 @@
+<!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 many</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";
+      // Mock data
+      const users = [
+        { id: "user_1", name: "Alice" },
+        { id: "user_2", name: "Bob" },
+        { id: "user_3", name: "Charlie" },
+        { id: "user_4", name: "Diana" },
+      ];
+      // Mock friendships data (userId -> array of friend userIds)
+      const friendships = {
+        user_1: ["user_2", "user_3"],
+        user_2: ["user_1"],
+        user_3: ["user_1", "user_4"],
+        user_4: ["user_3"],
+      };
+      const getUser = ({ userId }) => {
+        const user = users.find((user) => user.id === userId);
+        if (!user) {
+          throw new Error(`User with id "${userId}" not found`);
+        }
+        return user;
+      };
+      const USER = resource("user", {
+        idKey: "id",
+        mutableIdKey: "name",
+        GET: getUser,
+        GET_MANY: () => users,
+        PUT: ({ userId, field, value }) => {
+          let userToUpdate = users.find((u) => u.id === userId);
+          userToUpdate[field] = value;
+          return { id: userId, [field]: value };
+        },
+      });
+      // ✅ One-to-many relationship: User can have many friends
+      const USER_FRIENDS = USER.many("friends", USER, {
+        // GET - Retrieve all friends of a user
+        GET_MANY: ({ userId }) => {
+          const friendIds = friendships[userId] || [];
+          return {
+            id: userId,
+            friends: friendIds.map((friendId) =>
+              users.find((u) => u.id === friendId),
+            ),
+          };
+        },
+        // POST - Add a friend relationship
+        POST: ({ userId, friendId }) => {
+          if (!friendships[userId]) {
+            friendships[userId] = [];
+          }
+          // Add friend if not already added
+          if (!friendships[userId].includes(friendId)) {
+            friendships[userId].push(friendId);
+          }
+          // Return the added friend
+          return users.find((u) => u.id === friendId);
+        },
+        // DELETE - Remove a friend relationship
+        DELETE: ({ userId, friendId }) => {
+          if (friendships[userId]) {
+            friendships[userId] = friendships[userId].filter(
+              (id) => id !== friendId,
+            );
+          }
+          return [userId, friendId];
+        },
+      });
+      USER.RENAME = USER.PUT.bindParams({ field: "name" });
+      // Signal for current user
+      const currentUserIdSignal = localStorageSignal("current_user_id");
+      const currentUserAction = USER.GET.bindParams({
+        userId: currentUserIdSignal,
+      });
+      if (currentUserIdSignal.value) {
+        currentUserAction.load();
+      }
+      // Load initial data
+      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>Users</h2>
+              <UsersList />
+            </div>
+            <div style={{ flex: 1 }}>
+              <h2>Current User Friends</h2>
+              <CurrentUserFriends />
+            </div>
+          </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({
+            userId: user.id,
+            value: editName,
+          }).reload();
+          setIsEditing(false);
+        };
+        const handleCancel = () => {
+          setEditName(user.name);
+          setIsEditing(false);
+        };
+        const inputRef = useRef();
+        useEffect(() => {
+          if (isEditing) {
+            inputRef.current.focus();
+            inputRef.current.select();
+          }
+        }, [isEditing]);
+        // Count friends
+        const friendCount = friendships[user.id]?.length || 0;
+        return (
+          <div
+            style={{
+              border: "1px solid #ccc",
+              padding: "10px",
+              margin: "5px 0",
+              backgroundColor:
+                currentUserIdSignal.value === user.id ? "#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 }}>{user.name}</strong>
+                  <button onClick={() => setIsEditing(true)}>Rename</button>
+                  <button
+                    onClick={() => {
+                      currentUserIdSignal.value = user.id;
+                      currentUserAction.reload();
+                    }}
+                    disabled={currentUserIdSignal.value === user.id}
+                  >
+                    Select
+                  </button>
+                </>
+              )}
+            </div>
+            <div style={{ marginTop: "10px", fontSize: "12px", color: "#666" }}>
+              ID: {user.id} | Friends: {friendCount}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const CurrentUserFriends = () => {
+        if (!currentUserIdSignal.value) {
+          return <p>No user selected</p>;
+        }
+        return (
+          <div>
+            <ActionStatus action={currentUserAction} />
+            <ActionRenderer action={currentUserAction}>
+              {(user) => <UserFriends user={user} />}
+            </ActionRenderer>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const UserFriends = ({ user }) => {
+        const [isAddingFriend, setIsAddingFriend] = useState(false);
+        const [selectedFriendId, setSelectedFriendId] = useState("");
+        const userFriendsAction = USER_FRIENDS.GET_MANY.bindParams({
+          userId: user.id,
+        });
+        useEffect(() => {
+          userFriendsAction.load();
+        }, [user.id]);
+        const handleAddFriend = async () => {
+          if (!selectedFriendId) return;
+          await USER_FRIENDS.POST.bindParams({
+            userId: user.id,
+            friendId: selectedFriendId,
+          }).reload();
+          setSelectedFriendId("");
+          setIsAddingFriend(false);
+        };
+        const handleRemoveFriend = async (friendId) => {
+          await USER_FRIENDS.DELETE.bindParams({
+            userId: user.id,
+            friendId,
+          }).reload();
+        };
+        // Get available users to add as friends (excluding self and existing friends)
+        const currentFriendIds = friendships[user.id] || [];
+        const availableUsers = users.filter(
+          (u) => u.id !== user.id && !currentFriendIds.includes(u.id),
+        );
+        return (
+          <div style={{ border: "2px solid #007acc", padding: "15px" }}>
+            <h3>{user.name}'s Friends</h3>
+            <div style={{ marginBottom: "15px" }}>
+              {isAddingFriend ? (
+                <div
+                  style={{ display: "flex", gap: "10px", alignItems: "center" }}
+                >
+                  <select
+                    value={selectedFriendId}
+                    onChange={(e) => setSelectedFriendId(e.target.value)}
+                  >
+                    <option value="">Select a friend to add...</option>
+                    {availableUsers.map((u) => (
+                      <option key={u.id} value={u.id}>
+                        {u.name}
+                      </option>
+                    ))}
+                  </select>
+                  <button
+                    onClick={handleAddFriend}
+                    disabled={!selectedFriendId}
+                  >
+                    Add
+                  </button>
+                  <button onClick={() => setIsAddingFriend(false)}>
+                    Cancel
+                  </button>
+                </div>
+              ) : (
+                <button
+                  onClick={() => setIsAddingFriend(true)}
+                  disabled={availableUsers.length === 0}
+                >
+                  Add Friend
+                </button>
+              )}
+            </div>
+            <ActionRenderer action={userFriendsAction}>
+              {(friends) => (
+                <div>
+                  {friends.length === 0 ? (
+                    <p style={{ color: "#666" }}>No friends yet</p>
+                  ) : (
+                    friends.map((friend) => (
+                      <div
+                        key={friend.id}
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          padding: "8px",
+                          margin: "5px 0",
+                          backgroundColor: "#f0f0f0",
+                          borderRadius: "4px",
+                        }}
+                      >
+                        <span>{friend.name}</span>
+                        <button
+                          onClick={() => handleRemoveFriend(friend.id)}
+                          style={{
+                            background: "#ff4444",
+                            color: "white",
+                            border: "none",
+                            padding: "4px 8px",
+                            borderRadius: "4px",
+                            cursor: "pointer",
+                          }}
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    ))
+                  )}
+                </div>
+              )}
+            </ActionRenderer>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>

package/src/docs/demos/resource/resource_demo_2.html ADDED Viewed

@@ -0,0 +1,173 @@
+<!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>Action demo 2</title>
+  </head>
+  <body>
+    <div id="root" style="position: relative; width: 400px"></div>
+    <script type="module" jsenv-type="module/jsx">
+      /**
+       * Ici on test une action ayant un param qui est lu dans le local storage
+       * On peut utiliser deux actions dérivées pour charger deux users différents
+       * on peut aussi savoir qui est l'utilisateur courant
+       */
+      import { render } from "preact";
+      import { effect, signal } from "@preact/signals";
+      import {
+        useActionStatus,
+        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";
+      const USER = resource("user", {
+        idKey: "name",
+        GET_MANY: () => {
+          return [{ name: "dam" }, { name: "seb" }, { name: "john" }];
+        },
+        GET: ({ name }) => {
+          return { name, greeting: `Hello ${name}` };
+        },
+      });
+      const activeUsernameSignal = signal(
+        localStorage.getItem("active_user_name"),
+      );
+      effect(() => {
+        const activeUsername = activeUsernameSignal.value;
+        if (activeUsername) {
+          localStorage.setItem("active_user_name", activeUsername);
+        } else {
+          localStorage.removeItem("active_user_name");
+        }
+      });
+      USER.ACTIVE = {
+        GET: USER.GET.bindParams({
+          name: activeUsernameSignal,
+        }),
+      };
+      if (activeUsernameSignal.peek()) {
+        USER.ACTIVE.GET.load();
+      }
+      USER.GET_MANY.load();
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        const { data: users } = useActionStatus(USER.GET_MANY);
+        const [dam, seb, john] = users;
+        const getDamAction = USER.GET.bindParams({
+          name: dam.name,
+        });
+        const getSebAction = USER.GET.bindParams({
+          name: seb.name,
+        });
+        const getJohnAction = USER.GET.bindParams({
+          name: john.name,
+        });
+        return (
+          <div>
+            <button
+              onClick={() => {
+                getDamAction.load();
+                activeUsernameSignal.value = dam.name;
+              }}
+            >
+              Load dam
+            </button>
+            <button
+              onClick={() => {
+                getDamAction.unload();
+              }}
+            >
+              Unload dam
+            </button>
+            <button
+              onClick={() => {
+                getDamAction.preload();
+              }}
+            >
+              Preload dam
+            </button>
+            <br />
+            <button
+              onClick={() => {
+                getSebAction.load();
+                activeUsernameSignal.value = seb.name;
+              }}
+            >
+              Load seb
+            </button>
+            <button
+              onClick={() => {
+                getSebAction.unload();
+              }}
+            >
+              Unload seb
+            </button>
+            <button
+              onClick={() => {
+                getSebAction.preload();
+              }}
+            >
+              Preload seb
+            </button>
+            <br />
+            <button
+              onClick={() => {
+                getJohnAction.load();
+                activeUsernameSignal.value = john.name;
+              }}
+            >
+              Load john
+            </button>
+            <button
+              onClick={() => {
+                getJohnAction.unload();
+              }}
+            >
+              Unload john
+            </button>
+            <button
+              onClick={() => {
+                getJohnAction.preload();
+              }}
+            >
+              Preload john
+            </button>
+            <ActionStatus action={getDamAction} />
+            <ActionStatus action={getSebAction} />
+            <ActionStatus action={getJohnAction} />
+            <ActionStatus action={USER.ACTIVE.GET} />
+            <ActionRenderer action={USER.ACTIVE.GET}>
+              {{
+                loading: () => <div>Loading user...</div>,
+                error: (error) => <div>Error: {error.message}</div>,
+                unloaded: () => <div>User not loaded</div>,
+                loaded: (user) => {
+                  return <div>{user.greeting}</div>;
+                },
+              }}
+            </ActionRenderer>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>