@supersoniks/concorde 4.5.2 → 4.7.0

package/src/docs/docs-location.ts

@@ -0,0 +1,54 @@
+/** Doc page hash for `router.md` (markdown anchor, before demo sub-routes). */
+export const DOC_ROUTER_PAGE_HASH =
+  "#core/components/functional/router/router.md/router";
+
+/**
+ * Doc site hash: `#<markdown-path>/<page-anchor>[#<in-page-demo-route>]`
+ * e.g. `#core/.../router.md/router#home` — second `#` is for sonic-router demos only.
+ */
+export function parseDocsLocation(location: string): {
+  /** Path for markdown fetch (no leading `#`). */
+  url: string;
+  /** Page anchor (last segment before demo sub-hash). */
+  anchor: string;
+  /** In-page route segment after a second `#` (router demos). */
+  demoSubHash: string;
+  /** Full doc page hash including anchor, without demo sub-hash. */
+  pageHash: string;
+} {
+  const sharpIdx = location.indexOf("#");
+  if (sharpIdx < 0) {
+    return { url: "", anchor: "", demoSubHash: "", pageHash: "" };
+  }
+
+  let hashBody = location.substring(sharpIdx + 1);
+  let demoSubHash = "";
+  const nested = hashBody.lastIndexOf("#");
+  if (nested > 0) {
+    demoSubHash = hashBody.substring(nested + 1);
+    hashBody = hashBody.substring(0, nested);
+  }
+
+  const parts = hashBody.split("/").filter(Boolean);
+  const anchor = decodeURIComponent(parts.pop() || "");
+  const url = parts.join("/");
+
+  return {
+    url,
+    anchor,
+    demoSubHash,
+    pageHash: hashBody ? `#${hashBody}` : "",
+  };
+}
+
+/** Navigate inside the current doc page without reloading markdown. */
+export function setDocsDemoSubHash(subRoute: string, pageHash?: string): void {
+  const loc = document.location;
+  const base =
+    pageHash ||
+    parseDocsLocation(loc.pathname + loc.search + loc.hash).pageHash ||
+    loc.hash;
+  const sub = subRoute.replace(/^#/, "");
+  const nextHash = sub ? `${base}#${sub}` : base;
+  history.replaceState(history.state, "", `${loc.pathname}${loc.search}${nextHash}`);
+}

package/src/docs/docs.ts

@@ -1,8 +1,20 @@
+import "./example/docs-provider-keys";
 import "./layout";
 import "./search/search";
 import "./search/page";
 import "./search/markdown-renderer";
 import "./code";
+import "./components/docs-demo-sources";
+import "./components/docs-lit-demo";
 import "./header/header";
 import "./navigation/navigation";
 import "./example/users";
+import "./example/docs-users-list";
+import "./example/docs-user-two-scopes";
+import "./example/docs-joke-demos";
+import "./example/docs-queue-demos";
+import "./example/docs-toggle-demos";
+import "./example/docs-list-demos";
+import "./example/docs-router-demos";
+import "./example/docs-submit-demos";
+import "./example/docs-api-config-demos";

package/src/docs/example/decorators-demo-bind-demos.ts

@@ -3,11 +3,13 @@ import { customElement, property, state } from "lit/decorators.js";
 import { bind } from "@supersoniks/concorde/decorators";
 import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
 import { sub } from "@supersoniks/concorde/directives";
+import { get, set } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import {
-  PublisherManager,
-  PublisherProxy,
-} from "@supersoniks/concorde/core/utils/PublisherProxy";
-import { Objects } from "@supersoniks/concorde/utils";
+  bindReflectDemoKey,
+  demoDataKey,
+  demoUsersAltKey,
+  demoUsersKey,
+} from "./docs-provider-keys";
 import { tailwind } from "../tailwind";
 import "./decorators-demo-init";
 
@@ -41,14 +43,14 @@ export class DemoBind extends LitElement {
   }
 
   updateData() {
-    const demoData = PublisherManager.get("demoData");
-    const demoUsers = PublisherManager.get("demoUsers");
-    const randomIndex = Math.floor(Math.random() * demoUsers.get().length);
-    const randomUser = demoUsers.get()[randomIndex];
-    demoData.set({
-      firstName: randomUser.firstName,
-      lastName: randomUser.lastName,
-      count: (demoData.count.get() || 0) + 1,
+    const users = get(demoUsersKey);
+    const randomIndex = Math.floor(Math.random() * users.length);
+    const randomUser = users[randomIndex];
+    const data = get(demoDataKey);
+    set(demoDataKey, {
+      ...data,
+      count: data.count + 1,
+      user: { name: `${randomUser.firstName} ${randomUser.lastName}` },
     });
   }
 }
@@ -71,7 +73,7 @@ export class DemoBindReflect extends LitElement {
   }
 
   resetData() {
-    PublisherManager.get("bindReflectDemo").set({ count: 0 });
+    set(bindReflectDemoKey, { count: 0 });
   }
   render() {
     return html`
@@ -91,11 +93,6 @@ export class DemoBindReflect extends LitElement {
   }
 }
 
-type BindReflectDemoData = { count: number };
-const bindReflectDemoKey = new DataProviderKey<BindReflectDemoData>(
-  "bindReflectDemo",
-);
-
 @customElement("demo-bind-key")
 export class DemoBindKey extends LitElement {
   static styles = [tailwind];
@@ -106,7 +103,7 @@ export class DemoBindKey extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    PublisherManager.get("bindReflectDemo").set({ count: 0 });
+    set(bindReflectDemoKey, { count: 0 });
   }
 
   render() {
@@ -126,7 +123,8 @@ export class DemoBindDynamic extends LitElement {
   static styles = [tailwind];
 
   @property({ type: String })
-  dataProvider: "demoUsers" | "demoUsersAlt" = "demoUsers";
+  dataProvider: typeof demoUsersKey.path | typeof demoUsersAltKey.path =
+    demoUsersKey.path;
 
   @property({ type: Number })
   userIndex: number = 1;
@@ -141,36 +139,33 @@ export class DemoBindDynamic extends LitElement {
 
   updateDataProvider(e: Event) {
     this.dataProvider = (e.target as HTMLSelectElement).value as
-      | "demoUsers"
-      | "demoUsersAlt";
+      | typeof demoUsersKey.path
+      | typeof demoUsersAltKey.path;
   }
 
   updateCurrentUserData() {
-    const usersPublisher = PublisherManager.get(this.dataProvider);
-    const userPublisher = Objects.traverse(usersPublisher, [
-      String(this.userIndex),
-    ]) as PublisherProxy;
-
-    if (userPublisher) {
-      const randomNames = [
-        { firstName: "Alice", lastName: "Wonder" },
-        { firstName: "Bob", lastName: "Builder" },
-        { firstName: "Charlie", lastName: "Chaplin" },
-        { firstName: "Diana", lastName: "Prince" },
-        { firstName: "Eve", lastName: "Adams" },
-      ];
-
-      const randomName =
-        randomNames[Math.floor(Math.random() * randomNames.length)];
-      const randomEmail = `${randomName.firstName.toLowerCase()}.${randomName.lastName.toLowerCase()}@example.com`;
-
-      const currentUser = userPublisher.get() || {};
-      userPublisher.set({
-        ...currentUser,
+    const key =
+      this.dataProvider === demoUsersAltKey.path ? demoUsersAltKey : demoUsersKey;
+    const users = [...get(key)];
+    const randomNames = [
+      { firstName: "Alice", lastName: "Wonder" },
+      { firstName: "Bob", lastName: "Builder" },
+      { firstName: "Charlie", lastName: "Chaplin" },
+      { firstName: "Diana", lastName: "Prince" },
+      { firstName: "Eve", lastName: "Adams" },
+    ];
+    const randomName =
+      randomNames[Math.floor(Math.random() * randomNames.length)];
+    const randomEmail = `${randomName.firstName.toLowerCase()}.${randomName.lastName.toLowerCase()}@example.com`;
+    const idx = this.userIndex;
+    if (users[idx]) {
+      users[idx] = {
+        ...users[idx],
         firstName: randomName.firstName,
         lastName: randomName.lastName,
         email: randomEmail,
-      });
+      };
+      set(key, users);
     }
   }
 
@@ -182,8 +177,8 @@ export class DemoBindDynamic extends LitElement {
           label="Users set"
           @change=${this.updateDataProvider}
         >
-          <option value="demoUsers">First set of users</option>
-          <option value="demoUsersAlt">Second set of users</option>
+          <option value=${demoUsersKey.path}>First set of users</option>
+          <option value=${demoUsersAltKey.path}>Second set of users</option>
         </sonic-select>
         <sonic-input
           type="number"

package/src/docs/example/decorators-demo-geo.ts

@@ -2,13 +2,14 @@ import type { APIConfiguration } from "@supersoniks/concorde/core/utils/api";
 import type { ApiGetResult } from "@supersoniks/concorde/core/utils/api";
 import { Endpoint } from "@supersoniks/concorde/core/utils/endpoint";
 import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
-import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { get, set } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import "./decorators-demo-init";
+import { DOCS_MOCK_GEO_SERVICE } from "../mock-api/urls";
 
 export type GeoCommuneRow = { nom: string; code: string };
 
 export const geoApiDemoConfiguration: APIConfiguration = {
-  serviceURL: "https://geo.api.gouv.fr/",
+  serviceURL: DOCS_MOCK_GEO_SERVICE,
   token: null,
   userName: null,
   password: null,
@@ -16,13 +17,10 @@ export const geoApiDemoConfiguration: APIConfiguration = {
   tokenProvider: null,
 };
 
-const docsDemoGeoApiConfigurationId = "docsDemoGeoApiConfiguration";
-PublisherManager.get(docsDemoGeoApiConfigurationId).set(
-  geoApiDemoConfiguration,
-);
-
 export const docsDemoGeoApiConfigurationKey =
-  new DataProviderKey<APIConfiguration>(docsDemoGeoApiConfigurationId);
+  new DataProviderKey<APIConfiguration>("docsDemoGeoApiConfiguration");
+
+set(docsDemoGeoApiConfigurationKey, geoApiDemoConfiguration);
 
 export const geoCommunesApiGetEndpoint = new Endpoint<GeoCommuneRow[]>(
   "communes?limit=5&fields=nom,code",
@@ -31,10 +29,17 @@ export const geoCommunesApiGetEndpoint = new Endpoint<GeoCommuneRow[]>(
 export const docsDemoDynApiConfKeyTemplate =
   new DataProviderKey<APIConfiguration>("docsDemoDynApiConf${configSlot}");
 
-PublisherManager.get("docsDemoDynApiConfA").set(geoApiDemoConfiguration);
-PublisherManager.get("docsDemoDynApiConfB").set({
+export const docsDemoDynApiConfAKey = new DataProviderKey<APIConfiguration>(
+  "docsDemoDynApiConfA",
+);
+export const docsDemoDynApiConfBKey = new DataProviderKey<APIConfiguration>(
+  "docsDemoDynApiConfB",
+);
+
+set(docsDemoDynApiConfAKey, geoApiDemoConfiguration);
+set(docsDemoDynApiConfBKey, {
   ...geoApiDemoConfiguration,
-  serviceURL: "https://geo.api.gouv.fr/",
+  serviceURL: DOCS_MOCK_GEO_SERVICE,
 });
 
 export const geoCommunesApiGetEndpointDynamic = new Endpoint<GeoCommuneRow[]>(

package/src/docs/example/decorators-demo-init.ts

@@ -1,228 +1,2 @@
-import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
-
-export const ensurePublisherValue = <T>(
-  publisherId: string,
-  defaultValue: T,
-): void => {
-  const publisher = PublisherManager.get(publisherId);
-  const currentValue =
-    typeof publisher.get === "function" ? publisher.get() : undefined;
-
-  const isUnset =
-    currentValue === undefined ||
-    currentValue === null ||
-    (typeof currentValue === "object" &&
-      !Array.isArray(currentValue) &&
-      Object.keys(currentValue).length === 0);
-
-  if (isUnset) {
-    publisher.set(defaultValue as T);
-  }
-};
-
-export const initializeDecoratorsDemoData = () => {
-  ensurePublisherValue("demoData", {
-    title: "Initial Title",
-    user: { name: "Initial User" },
-    count: 0,
-  });
-
-  ensurePublisherValue("demoUser", {
-    name: "Demo User",
-    email: "demo@example.com",
-  });
-
-  ensurePublisherValue("demoSettings", {
-    theme: "light",
-    language: "en",
-  });
-
-  ensurePublisherValue("demoUserSettings", {
-    theme: "light",
-    language: "en",
-  });
-
-  ensurePublisherValue("autoValue1", 10);
-  ensurePublisherValue("autoValue2", 20);
-  ensurePublisherValue("waitAncestorDemo", {
-    message: "Context from ancestor",
-  });
-
-  ensurePublisherValue("combinedData", { title: "Combined Title" });
-  ensurePublisherValue("combinedUser", { name: "Combined User" });
-  ensurePublisherValue("combinedSettings", { theme: "dark" });
-
-  ensurePublisherValue("reflectData", {
-    title: "Initial Reflected Title",
-    count: 0,
-  });
-
-  ensurePublisherValue("publishDemo", {
-    email: "",
-    message: "",
-  });
-
-  ensurePublisherValue("dynamicProfiles", {
-    alpha: { info: { title: "Profil Alpha" } },
-    beta: { info: { title: "Profil Beta" } },
-  });
-
-  ensurePublisherValue("dynamicProfilesAlt", {
-    alpha: { info: { title: "Profil Alpha (Alt)" } },
-    beta: { info: { title: "Profil Beta (Alt)" } },
-  });
-
-  ensurePublisherValue("demoUsers", [
-    {
-      id: 1,
-      firstName: "Alice",
-      lastName: "Smith",
-      email: "alice.smith@example.com",
-    },
-    {
-      id: 2,
-      firstName: "Bob",
-      lastName: "Johnson",
-      email: "bob.johnson@example.com",
-    },
-    {
-      id: 3,
-      firstName: "Carol",
-      lastName: "Williams",
-      email: "carol.williams@example.com",
-    },
-    {
-      id: 4,
-      firstName: "David",
-      lastName: "Brown",
-      email: "david.brown@example.com",
-    },
-    {
-      id: 5,
-      firstName: "Eve",
-      lastName: "Jones",
-      email: "eve.jones@example.com",
-    },
-    {
-      id: 6,
-      firstName: "Frank",
-      lastName: "Garcia",
-      email: "frank.garcia@example.com",
-    },
-    {
-      id: 7,
-      firstName: "Grace",
-      lastName: "Miller",
-      email: "grace.miller@example.com",
-    },
-    {
-      id: 8,
-      firstName: "Henry",
-      lastName: "Davis",
-      email: "henry.davis@example.com",
-    },
-    {
-      id: 9,
-      firstName: "Ivy",
-      lastName: "Martinez",
-      email: "ivy.martinez@example.com",
-    },
-    {
-      id: 10,
-      firstName: "Jack",
-      lastName: "Taylor",
-      email: "jack.taylor@example.com",
-    },
-  ]);
-
-  ensurePublisherValue("demoUsersAlt", [
-    {
-      id: 11,
-      firstName: "Sophie",
-      lastName: "Lindquist",
-      email: "sophie.lindquist@example.com",
-    },
-    {
-      id: 12,
-      firstName: "Mateo",
-      lastName: "Ortega",
-      email: "mateo.ortega@example.com",
-    },
-    {
-      id: 13,
-      firstName: "Jin",
-      lastName: "Park",
-      email: "jin.park@example.com",
-    },
-    {
-      id: 14,
-      firstName: "Fatima",
-      lastName: "El-Sayed",
-      email: "fatima.el-sayed@example.com",
-    },
-    {
-      id: 15,
-      firstName: "Lars",
-      lastName: "Johansson",
-      email: "lars.johansson@example.com",
-    },
-    {
-      id: 16,
-      firstName: "Amara",
-      lastName: "Singh",
-      email: "amara.singh@example.com",
-    },
-    {
-      id: 17,
-      firstName: "Zuri",
-      lastName: "Okafor",
-      email: "zuri.okafor@example.com",
-    },
-    {
-      id: 18,
-      firstName: "Luca",
-      lastName: "Rossi",
-      email: "luca.rossi@example.com",
-    },
-    {
-      id: 19,
-      firstName: "Ava",
-      lastName: "Murphy",
-      email: "ava.murphy@example.com",
-    },
-    {
-      id: 20,
-      firstName: "Noah",
-      lastName: "Keller",
-      email: "noah.keller@example.com",
-    },
-  ]);
-
-  ensurePublisherValue("demoUsersSettings", [
-    { theme: "light", language: "en" },
-    { theme: "dark", language: "fr" },
-    { theme: "auto", language: "es" },
-    { theme: "light", language: "en" },
-    { theme: "dark", language: "fr" },
-    { theme: "auto", language: "es" },
-    { theme: "light", language: "en" },
-    { theme: "dark", language: "fr" },
-    { theme: "auto", language: "es" },
-    { theme: "light", language: "en" },
-  ]);
-
-  ensurePublisherValue("demoUsersAltSettings", [
-    { theme: "dark", language: "de" },
-    { theme: "light", language: "it" },
-    { theme: "auto", language: "ja" },
-    { theme: "dark", language: "pt" },
-    { theme: "light", language: "ru" },
-    { theme: "auto", language: "zh" },
-    { theme: "dark", language: "ar" },
-    { theme: "light", language: "sv" },
-    { theme: "auto", language: "nl" },
-    { theme: "dark", language: "pl" },
-  ]);
-};
-
-initializeDecoratorsDemoData();
+/** Default doc demo store values — keys in @docs-provider-keys.ts, writes via `set()`. */
+import "./docs-provider-keys";