@jsenv/navi 0.0.1

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

@@ -0,0 +1,330 @@
+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

@@ -0,0 +1,103 @@
+# 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

@@ -0,0 +1,80 @@
+# 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/notes.md

@@ -0,0 +1,13 @@
+- import.meta.css during build should use stylesheet to inject so that it puts an url instead of constructed stylesheet?
+
+- La table qui affiche une page, on mettra les details dans un bouton settings en haut a droite
+  Qui ouvrira les infos a propos de cette tables et on focus sur les données au lieu des settings de la table
+  (surement qu'on aura
+  - api/tables/:tablename/settings
+  - api/tables/:tablename/columns
+  - api/tables/:tablename/rows
+    (et api/tables on verra je serais pas encore)
+
+- See table columns, ability to add, update, remove table columns
+- Ability to see table rows, ability to add/update/remove rows
+- Pagination of course