@jsenv/navi 0.10.2 → 0.11.0

package/src/docs/demos/user_nav/user_nav.jsx

@@ -1,330 +0,0 @@
-import {
-  defineRoutes,
-  resource,
-  Route,
-  useDocumentState,
-  useDocumentUrl,
-} from "@jsenv/navi";
-import { signal } from "@preact/signals";
-import { render } from "preact";
-import { useEffect, useState } from "preact/hooks";
-
-import.meta.css = /* css */ `
-  body {
-    font-family: Arial, sans-serif;
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-  }
-  .nav-links {
-    margin-bottom: 20px;
-    padding: 10px;
-    background: #f5f5f5;
-    border-radius: 5px;
-  }
-  .nav-links a {
-    margin-right: 15px;
-    text-decoration: none;
-    color: #007bff;
-    padding: 5px 10px;
-    border-radius: 3px;
-  }
-  .nav-links a:hover {
-    background: #e9ecef;
-  }
-  .nav-links a.active {
-    background: #007bff;
-    color: white;
-  }
-  .user-details {
-    margin: 20px 0;
-    padding: 20px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-  }
-  .actions {
-    margin-top: 15px;
-  }
-  button {
-    margin-right: 10px;
-    margin-bottom: 10px;
-    padding: 8px 15px;
-    border: none;
-    border-radius: 3px;
-    cursor: pointer;
-    background: #007bff;
-    color: white;
-  }
-  button:hover {
-    background: #0056b3;
-  }
-  button:disabled {
-    background: #6c757d;
-    cursor: not-allowed;
-  }
-  .current-url {
-    margin-top: 10px;
-    padding: 10px;
-    background: #f8f9fa;
-    border-radius: 3px;
-    font-family: monospace;
-    font-size: 14px;
-  }
-  .loading {
-    opacity: 0.6;
-  }
-  .error {
-    color: #dc3545;
-    background: #f8d7da;
-    padding: 10px;
-    border-radius: 3px;
-  }
-`;
-
-const App = () => {
-  return (
-    <div>
-      <h1>User Navigation Test</h1>
-      <Navigation />
-      <Route route={USER_ROUTE}>{(user) => <UserPage user={user} />}</Route>
-      <DocumentInfo />
-    </div>
-  );
-};
-
-const Navigation = () => {
-  const users = USER.useArray();
-
-  return (
-    <div className="nav-links">
-      {users.map((user) => {
-        const url = USER_ROUTE.buildUrl({ name: user.name });
-        return (
-          <a key={user.id} href={url}>
-            {user.name}
-          </a>
-        );
-      })}
-    </div>
-  );
-};
-
-const UserPage = ({ user }) => {
-  const isRenamed = user.name !== user.originalName;
-
-  const handleRename = async () => {
-    console.log("handleRename called for user:", user.name);
-    const renameAction = USER.PUT.bindParams({
-      name: user.name,
-      property: "name",
-      value: `${user.name}_2`,
-    });
-    console.log("About to call renameAction.load()");
-    await renameAction.reload();
-    console.log("renameAction.load() completed");
-  };
-
-  const handleRevert = async () => {
-    const revertAction = USER.PUT.bindParams({
-      name: user.name,
-      property: "name",
-      value: user.originalName,
-    });
-    await revertAction.reload();
-  };
-
-  return (
-    <div className="user-details">
-      <h2>User: {user.name}</h2>
-      <p>
-        <strong>Status:</strong> {isRenamed ? "Renamed" : "Original"}
-      </p>
-
-      <div className="actions">
-        <button
-          onClick={handleRename}
-          disabled={USER.PUT.loadingState === "LOADING"}
-        >
-          Rename to &quot;{user.name}_2&quot;
-        </button>
-        <button
-          onClick={handleRevert}
-          disabled={!isRenamed || USER.PUT.loadingState === "LOADING"}
-        >
-          Revert to Original Name
-        </button>
-      </div>
-
-      <MutableIdSignalDemo currentUser={user} />
-    </div>
-  );
-};
-
-const MutableIdSignalDemo = ({ currentUser }) => {
-  // Create a signal that tracks the ORIGINAL user's name (this should NOT change)
-  const [originalName] = useState(currentUser.name);
-  const originalUserNameSignal = signal(originalName);
-
-  // Use signalForMutableIdKey to get a signal that tracks the user by the ORIGINAL name
-  const userFromMutableIdSignal = USER.store.signalForMutableIdKey(
-    "name",
-    originalUserNameSignal,
-  );
-
-  // Get the current value
-  const [signalValue, setSignalValue] = useState(userFromMutableIdSignal.value);
-
-  // Subscribe to changes
-  useEffect(() => {
-    console.log(
-      "MutableIdSignalDemo: Setting up subscription to userFromMutableIdSignal",
-    );
-    const unsubscribe = userFromMutableIdSignal.subscribe((newValue) => {
-      console.log(
-        "MutableIdSignalDemo: userFromMutableIdSignal changed to:",
-        newValue,
-      );
-      setSignalValue(newValue);
-    });
-    return unsubscribe;
-  }, []);
-
-  console.log("MutableIdSignalDemo render:", {
-    originalName,
-    currentUserName: currentUser.name,
-    currentUserId: currentUser.id,
-    signalValueName: signalValue?.name,
-    signalValueId: signalValue?.id,
-    originalUserNameSignalValue: originalUserNameSignal.value,
-  });
-
-  // Check if a rename has occurred
-  const hasBeenRenamed = currentUser.name !== originalName;
-
-  return (
-    <div
-      style={{
-        marginTop: "20px",
-        padding: "15px",
-        backgroundColor: "#f0f8ff",
-        borderRadius: "5px",
-        border: "1px solid #007bff",
-      }}
-    >
-      <h3>signalForMutableIdKey Demo</h3>
-      <p>
-        <strong>Current Route User:</strong> {currentUser.name} (ID:{" "}
-        {currentUser.id})
-      </p>
-      <p>
-        <strong>Signal Tracking Original Name:</strong>{" "}
-        {originalUserNameSignal.value}
-      </p>
-      <p>
-        <strong>Signal Value:</strong>{" "}
-        {signalValue ? `${signalValue.name} (ID: ${signalValue.id})` : "null"}
-      </p>
-      <p style={{ fontSize: "0.9em", color: "#666" }}>
-        💡 This signal tracks by the original name &quot;{originalName}&quot;
-        but should return the same user even after renaming, demonstrating the
-        caching behavior of signalForMutableIdKey.
-      </p>
-      {signalValue && signalValue.id === currentUser.id && hasBeenRenamed && (
-        <p style={{ color: "green", fontWeight: "bold" }}>
-          ✅ Signal correctly returns the same user instance even after rename!
-        </p>
-      )}
-      {signalValue && signalValue.id === currentUser.id && !hasBeenRenamed && (
-        <p style={{ color: "blue", fontWeight: "bold" }}>
-          🔵 Signal correctly returns the user (no rename yet)
-        </p>
-      )}
-      {signalValue && signalValue.id !== currentUser.id && (
-        <p style={{ color: "orange", fontWeight: "bold" }}>
-          ⚠️ Signal returned a different user (this might happen during
-          transitions)
-        </p>
-      )}
-      {!signalValue && (
-        <p style={{ color: "red", fontWeight: "bold" }}>
-          ❌ Signal returned null (user not found in store) - Looking for
-          original name: &quot;{originalUserNameSignal.value}&quot;
-        </p>
-      )}
-    </div>
-  );
-};
-
-const DocumentInfo = () => {
-  const documentUrl = useDocumentUrl();
-  const documentState = useDocumentState();
-
-  return (
-    <div>
-      <div>
-        Current URL: <div className="current-url">{documentUrl}</div>
-      </div>
-      <div className="current-state">
-        Current State: <pre>{JSON.stringify(documentState, null, 2)}</pre>
-      </div>
-    </div>
-  );
-};
-
-const initialUsers = [
-  {
-    id: 1,
-    name: "alice",
-    email: "alice@example.com",
-    originalName: "alice",
-  },
-  {
-    id: 2,
-    name: "bob",
-    email: "bob@example.com",
-    originalName: "bob",
-  },
-  {
-    id: 3,
-    name: "charlie",
-    email: "charlie@example.com",
-    originalName: "charlie",
-  },
-];
-const USER = resource("user", {
-  idKey: "id",
-  mutableIdKeys: ["name"],
-  GET_MANY: () => initialUsers,
-  GET: async ({ name }) => {
-    await new Promise((resolve) => setTimeout(resolve, 100));
-    return initialUsers.find((user) => user.name === name);
-  },
-  PUT: ({ name, property, value }) => {
-    console.log("PUT action called:", { name, property, value });
-    const userIndex = initialUsers.findIndex((user) => user.name === name);
-    if (userIndex === -1) {
-      throw new Error(`User with name "${name}" not found`);
-    }
-    const user = initialUsers[userIndex];
-    console.log("Found user:", user);
-    const updatedUser = {
-      ...user,
-      [property]: value,
-    };
-    console.log("Updated user:", updatedUser);
-
-    // Update the initialUsers array so future lookups work
-    initialUsers[userIndex] = updatedUser;
-
-    return updatedUser;
-  },
-});
-
-const [USER_ROUTE] = defineRoutes({
-  "/user/:name": USER.GET,
-});
-
-// Populate initial users in the store
-USER.store.upsert(initialUsers);
-
-render(<App />, document.querySelector("#app"));

package/src/docs/resource_dependencies.md

@@ -1,103 +0,0 @@
-# Resource Dependencies Documentation
-
-The `withParams` method now supports cross-resource dependencies, allowing you to set up autoreload relationships between different resources.
-
-## Basic Usage
-
-```js
-const role = resource("role", {
-  GET_MANY: () => fetchRoles(),
-  POST: (data) => createRole(data),
-  DELETE: (id) => deleteRole(id),
-});
-
-const database = resource("database", {
-  GET_MANY: () => fetchDatabases(),
-  POST: (data) => createDatabase(data),
-  DELETE: (id) => deleteDatabase(id),
-});
-
-const tables = resource("tables", {
-  GET_MANY: () => fetchTables(),
-  POST: (data) => createTable(data),
-  DELETE: (id) => deleteTable(id),
-});
-
-// Create a parameterized resource with cross-resource dependencies
-const ROLE_WITH_OWNERSHIP = role.withParams(
-  { owners: true },
-  {
-    dependencies: [role, database, tables],
-  },
-);
-```
-
-## How It Works
-
-When you specify `dependencies`, any non-GET action (POST, PUT, PATCH, DELETE) on the dependency resources will trigger an autoreload of the GET_MANY actions in the parameterized resource.
-
-### Autoreload Behavior
-
-- **Triggering Actions**: Any POST, PUT, PATCH, or DELETE on dependency resources
-- **Target Actions**: GET_MANY actions in the parameterized resource (same param scope only)
-- **Scope Isolation**: Only actions with the same parameter scope are affected
-
-### Example Scenarios
-
-1. **Creating a table**: `tables.POST.load(newTableData)` → triggers `ROLE_WITH_OWNERSHIP.GET_MANY` reload
-2. **Deleting a database**: `database.DELETE.load(dbId)` → triggers `ROLE_WITH_OWNERSHIP.GET_MANY` reload
-3. **Updating a role**: `role.PUT.load(roleData)` → triggers `ROLE_WITH_OWNERSHIP.GET_MANY` reload
-
-## Advanced Usage
-
-### Parameterized Dependencies
-
-You can also use parameterized resources as dependencies:
-
-```js
-const recentTables = tables.withParams({ recent: true });
-const adminTables = tables.withParams({ owner: "admin" });
-
-const ROLE_WITH_RECENT_OWNERSHIP = role.withParams(
-  { owners: true },
-  {
-    dependencies: [recentTables], // Only affected by recent tables
-  },
-);
-
-const ROLE_WITH_ADMIN_OWNERSHIP = role.withParams(
-  { owners: true },
-  {
-    dependencies: [adminTables], // Only affected by admin tables
-  },
-);
-```
-
-### Custom Autoreload Settings
-
-You can also customize the autoreload behavior:
-
-```js
-const ROLE_WITH_OWNERSHIP = role.withParams(
-  { owners: true },
-  {
-    dependencies: [role, database, tables],
-    autoreloadGetManyAfter: ["POST", "DELETE", "PUT"], // Custom trigger verbs
-    autoreloadGetAfter: false, // Disable GET autoreload
-  },
-);
-```
-
-## Implementation Details
-
-- **Global Registry**: Dependencies are tracked in a global registry to enable cross-resource communication
-- **Memory Management**: The system uses WeakSets to avoid memory leaks
-- **Async Execution**: Autoreloads are triggered asynchronously with `setTimeout` to ensure proper sequencing
-- **Parameter Isolation**: Each parameter scope maintains its own autoreload behavior
-
-## Benefits
-
-1. **Reactive Updates**: Automatically keep related data in sync across different resources
-2. **Parameter Isolation**: Avoid unwanted cross-contamination between different parameter sets
-3. **Flexible Dependencies**: Mix and match regular and parameterized resources as dependencies
-4. **Performance**: Only reload what's actually needed based on the dependency graph

package/src/docs/resource_with_params.md

@@ -1,80 +0,0 @@
-# Resource `withParams()` Method
-
-Creates a parameterized version of a resource with isolated autoreload behavior. Solves cross-contamination where actions with different parameters incorrectly trigger each other's autoreload.
-
-## Problem & Solution
-
-Without `withParams()`:
-
-```javascript
-const ROLE = resource("role", {
-  GET_MANY: (params) => fetchRoles(params),
-  DELETE: (params) => deleteRole(params),
-});
-
-// These actions interfere with each other
-await ROLE.GET_MANY.bindParams({ admin: true });
-await ROLE.DELETE.bindParams({ id: 123 }); // ❌ Reloads both admin and non-admin queries
-```
-
-With `withParams()`:
-
-```javascript
-const adminRoles = ROLE.withParams({ admin: true });
-const guestRoles = ROLE.withParams({ admin: false });
-
-await adminRoles.DELETE({ id: 123 }); // ✅ Only reloads admin queries
-```
-
-## API
-
-### `resource.withParams(params)`
-
-**Parameters:** `params` (Object, required) - Parameters to bind to all actions
-
-**Returns:** New resource instance with parameter-bound actions and isolated autoreload
-
-**Throws:** Error if params is empty
-
-## Autoreload Hierarchy
-
-Actions follow a parent-child hierarchy where child scopes reload their parents:
-
-```javascript
-const ROLE = resource("role", { GET_MANY: () => fetch("/roles") });
-const ROLE_ADMIN = ROLE.withParams({ type: "admin" });
-const ROLE_ADMIN_MALE = ROLE_ADMIN.withParams({ gender: "male" });
-
-// Si ROLE_ADMIN_MALE.POST() est exécuté, il recharge :
-// ✅ ROLE_ADMIN_MALE.GET_MANY (même scope: { type: "admin", gender: "male" })
-// ✅ ROLE_ADMIN.GET_MANY (parent scope: { type: "admin" })
-// ✅ ROLE.GET_MANY (root parent: {})
-// ❌ Ne recharge PAS femaleAdmin.GET_MANY ({ type: "admin", gender: "female" })
-
-// Si ROLE_ADMIN.POST() est exécuté, il recharge :
-// ✅ ROLE_ADMIN.GET_MANY (même scope: { type: "admin" })
-// ✅ ROLE.GET_MANY (root parent: {})
-// ❌ Ne recharge PAS ROLE_ADMIN_MALE.GET_MANY (enfant, pas parent)
-
-// Si ROLE.POST() est exécuté, il recharge :
-// ✅ ROLE.GET_MANY (même scope: {})
-// ❌ Ne recharge PAS ROLE_ADMIN.GET_MANY ni ROLE_ADMIN_MALE.GET_MANY (enfants, pas parents)
-```
-
-## Chaining
-
-```javascript
-const maleAdmins = USER.withParams({ role: "admin" }).withParams({
-  gender: "male",
-});
-
-// Equivalent to:
-const maleAdmins = USER.withParams({ role: "admin", gender: "male" });
-```
-
-## Key Features
-
-- **Isolation**: Different parameter sets have separate autoreload behavior
-- **Hierarchy**: Child scopes reload parent scopes automatically
-- **Shared Store**: All parameterized resources use the same data store
-- **Efficient**: Parameter comparison is cached for performance

package/src/navi_css_vars.js

@@ -1,14 +0,0 @@
-import.meta.css = /* css */ `
-  @layer navi {
-    :root {
-      --navi-background-color-readonly: #d3d3d3;
-      --navi-color-readonly: grey;
-      --navi-background-color-disabled: #d3d3d3;
-      --navi-color-disabled: #eeeeee;
-
-      --navi-info-color: #2196f3;
-      --navi-warning-color: #ff9800;
-      --navi-error-color: #f44336;
-    }
-  }
-`;

package/src/notes.md

@@ -1,34 +0,0 @@
-- Drag to move row and column
-
-  (ideally we keep an empty "clone" in the table and we create a visually identic clone to drag)
-
-  sitcky prevents drag to re-order
-  I think we are starting to reach the limits of a table element
-
-  donc on va refaire mais avec des div comme ca on controle bien tout
-  de toute facon les dimensions des lignes et colonnes seront fixes
-  et je gagne pas grand chose a passer par la balise table
-
-- Ideally the drag gesture should autoscroll once dragged element boundaries reach the scrollable parent (not the mouse)
-
-- Can use shortcuts on table selection
-  - cmd + delete would delete rows/columns
-    on cells it does nothing but we'll be able to copy via keyboard to start
-
-- Fixed first column and first row (overflow on the rest + it's fixed when there is a lof of content)
-
-- Can delete a table row
-
-- Can update a table row cell
-
-- Can see table columns attributes
-
-- Can update table column attributes
-
-- Can remove table column
-
-- Can move table column
-
-- Pagination
-
-- import.meta.css during build should use stylesheet to inject so that it puts an url instead of constructed stylesheet?