@supersoniks/concorde 4.9.1 → 4.9.2

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 (106) hide show
  1. package/build-infos.json +1 -1
  2. package/concorde-core.bundle.js +106 -106
  3. package/concorde-core.es.js +4 -7
  4. package/dist/concorde-core.bundle.js +106 -106
  5. package/dist/concorde-core.es.js +4 -7
  6. package/dist/docs-mock-api-sw.js +1 -0
  7. package/dist/js/core/utils/HTML.js +4 -5
  8. package/dist/js/core/utils/HTML.js.map +1 -1
  9. package/dist/robots.txt +15 -1
  10. package/dist/types/core/utils/HTML.d.ts.map +1 -1
  11. package/docs/assets/{index-CZLTFws2.css → index-Bnp7gVaA.css} +1 -1
  12. package/docs/assets/{index-nkkwC13U.js → index-hElUgV9_.js} +505 -438
  13. package/docs/crawl/core/components/functional/date/date.html +190 -0
  14. package/docs/crawl/core/components/functional/fetch/fetch.html +109 -0
  15. package/docs/crawl/core/components/functional/if/if.html +27 -0
  16. package/docs/crawl/core/components/functional/list/list.html +70 -0
  17. package/docs/crawl/core/components/functional/mix/mix.html +45 -0
  18. package/docs/crawl/core/components/functional/queue/queue.html +96 -0
  19. package/docs/crawl/core/components/functional/router/router.html +106 -0
  20. package/docs/crawl/core/components/functional/sdui/sdui.html +269 -0
  21. package/docs/crawl/core/components/functional/states/states.html +66 -0
  22. package/docs/crawl/core/components/functional/submit/submit.html +160 -0
  23. package/docs/crawl/core/components/functional/subscriber/subscriber.html +67 -0
  24. package/docs/crawl/core/components/functional/value/value.html +51 -0
  25. package/docs/crawl/core/components/ui/alert/alert.html +110 -0
  26. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +23 -0
  27. package/docs/crawl/core/components/ui/badge/badge.html +119 -0
  28. package/docs/crawl/core/components/ui/button/button.html +149 -0
  29. package/docs/crawl/core/components/ui/captcha/captcha.html +30 -0
  30. package/docs/crawl/core/components/ui/card/card.html +99 -0
  31. package/docs/crawl/core/components/ui/divider/divider.html +58 -0
  32. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +73 -0
  33. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +135 -0
  34. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +79 -0
  35. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +62 -0
  36. package/docs/crawl/core/components/ui/form/input/input.html +109 -0
  37. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +106 -0
  38. package/docs/crawl/core/components/ui/form/radio/radio.html +56 -0
  39. package/docs/crawl/core/components/ui/form/select/select.html +73 -0
  40. package/docs/crawl/core/components/ui/form/switch/switch.html +56 -0
  41. package/docs/crawl/core/components/ui/form/textarea/textarea.html +59 -0
  42. package/docs/crawl/core/components/ui/group/group.html +82 -0
  43. package/docs/crawl/core/components/ui/icon/icon.html +133 -0
  44. package/docs/crawl/core/components/ui/image/image.html +110 -0
  45. package/docs/crawl/core/components/ui/link/link.html +42 -0
  46. package/docs/crawl/core/components/ui/loader/loader.html +50 -0
  47. package/docs/crawl/core/components/ui/menu/menu.html +322 -0
  48. package/docs/crawl/core/components/ui/modal/modal.html +117 -0
  49. package/docs/crawl/core/components/ui/pop/pop.html +102 -0
  50. package/docs/crawl/core/components/ui/progress/progress.html +58 -0
  51. package/docs/crawl/core/components/ui/table/table.html +413 -0
  52. package/docs/crawl/core/components/ui/toast/toast.html +122 -0
  53. package/docs/crawl/core/components/ui/tooltip/tooltip.html +79 -0
  54. package/docs/crawl/docs/_core-concept/dataFlow.html +166 -0
  55. package/docs/crawl/docs/_core-concept/overview.html +66 -0
  56. package/docs/crawl/docs/_core-concept/subscriber.html +75 -0
  57. package/docs/crawl/docs/_decorators/ancestor-attribute.html +116 -0
  58. package/docs/crawl/docs/_decorators/auto-subscribe.html +202 -0
  59. package/docs/crawl/docs/_decorators/bind.html +141 -0
  60. package/docs/crawl/docs/_decorators/get.html +120 -0
  61. package/docs/crawl/docs/_decorators/handle.html +165 -0
  62. package/docs/crawl/docs/_decorators/on-assign.html +355 -0
  63. package/docs/crawl/docs/_decorators/patch.html +52 -0
  64. package/docs/crawl/docs/_decorators/post.html +102 -0
  65. package/docs/crawl/docs/_decorators/publish.html +61 -0
  66. package/docs/crawl/docs/_decorators/put.html +49 -0
  67. package/docs/crawl/docs/_decorators/subscribe.html +109 -0
  68. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +137 -0
  69. package/docs/crawl/docs/_directives/sub.html +93 -0
  70. package/docs/crawl/docs/_getting-started/ai-agents.html +134 -0
  71. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +100 -0
  72. package/docs/crawl/docs/_getting-started/concorde-outside.html +58 -0
  73. package/docs/crawl/docs/_getting-started/create-a-component.html +111 -0
  74. package/docs/crawl/docs/_getting-started/my-first-component.html +189 -0
  75. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +110 -0
  76. package/docs/crawl/docs/_getting-started/pubsub.html +62 -0
  77. package/docs/crawl/docs/_getting-started/start.html +76 -0
  78. package/docs/crawl/docs/_getting-started/theming.html +85 -0
  79. package/docs/crawl/docs/_misc/api-configuration.html +149 -0
  80. package/docs/crawl/docs/_misc/dataProviderKey.html +135 -0
  81. package/docs/crawl/docs/_misc/docs-mock-api.html +146 -0
  82. package/docs/crawl/docs/_misc/dynamic-path.html +180 -0
  83. package/docs/crawl/docs/_misc/endpoint.html +50 -0
  84. package/docs/crawl/docs/_misc/html-integration.html +47 -0
  85. package/docs/crawl/hubs/decorators.html +467 -0
  86. package/docs/crawl/hubs/form-components.html +357 -0
  87. package/docs/crawl/hubs/remote-data.html +374 -0
  88. package/docs/crawl/index.html +99 -0
  89. package/docs/docs-mock-api-sw.js +3 -1
  90. package/docs/docs-mock-api-sw.js.map +2 -2
  91. package/docs/index.html +3 -2
  92. package/docs/llms-full.txt +5423 -0
  93. package/docs/llms.txt +102 -0
  94. package/docs/robots.txt +15 -1
  95. package/docs/sitemap.xml +231 -0
  96. package/docs/src/docs/_decorators/get.md +47 -1
  97. package/docs/src/docs/search/docs-search.json +31 -1
  98. package/index.html +1 -0
  99. package/package.json +1 -1
  100. package/public/docs-mock-api-sw.js +1 -0
  101. package/public/robots.txt +15 -1
  102. package/scripts/generate-crawl-docs.mjs +569 -0
  103. package/scripts/post-build-docs.js +18 -14
  104. package/src/core/decorators/subscriber/ancestorAttribute.spec.ts +42 -0
  105. package/src/core/utils/HTML.ts +4 -5
  106. package/src/docs/search/docs-search.json +61 -1
@@ -0,0 +1,76 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/start.html" data-doc-id="docs/_getting-started/start">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Introduction — Concorde</title>
7
+ <meta name="description" content="Based on lit.dev, Concorde is a collection of web components for shared apps and websites.">
8
+ <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/start, start, Introduction, guide, get, set, formDataProvider, @ancestorAttribute, @bind, serviceURL, yarn ai:sync, AGENTS.md">
9
+ <meta name="concorde-doc-id" content="docs/_getting-started/start">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/start.html">
11
+ </head>
12
+ <body>
13
+ <header>
14
+ <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/start.md/start" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Introduction</strong>. Based on lit.dev, Concorde is a collection of web components for shared apps and websites. <span>Doc ID: <code>docs/_getting-started/start</code>. Keywords: Concorde, supersoniks, docs/_getting-started/start, start, Introduction, guide, get, set, formDataProvider, @ancestorAttribute, @bind, serviceURL, yarn ai:sync, AGENTS.md. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/start.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/start.html</a>.</span></p>
19
+ <h1 id="introduction">Introduction</h1>
20
+ <h2 id="what-is-concorde">What is Concorde?</h2>
21
+ <p>Based on <strong><a href="https://lit.dev">lit.dev</a></strong>, Concorde is a collection of web components for shared apps and websites.<br>Build UIs without tying components to a specific host stack, while keeping visual consistency through a small set of CSS variables.</p>
22
+ <h2 id="why-and-use-case">Why and use case</h2>
23
+ <p>In 2022, Supersoniks needed a new ticketing stack for nearly 100 sites — mobile apps, modern sites, and legacy PHP without bundlers.<br>One composable web-component library replaced many one-off apps. Lit was chosen for broad runtime compatibility.</p>
24
+ <h3 id="stack">Stack</h3>
25
+ <ul>
26
+ <li>Lit</li>
27
+ <li>TypeScript</li>
28
+ <li>Vite</li>
29
+ <li>Tailwind (starter kit, not required in the core package)</li>
30
+ </ul>
31
+ <h3 id="functional-features">Functional features</h3>
32
+ <ul>
33
+ <li><strong>DataProvider</strong> store (decorators, <code>get</code> / <code>set</code>)</li>
34
+ <li>Forms (<code>formDataProvider</code>)</li>
35
+ <li>Lists, queues, lazy loading</li>
36
+ <li>Router, states, UI kit with status variants</li>
37
+ </ul>
38
+ <h2 id="learn-concorde">Learn Concorde</h2>
39
+ <table>
40
+ <thead>
41
+ <tr>
42
+ <th>Step</th>
43
+ <th>Page</th>
44
+ </tr>
45
+ </thead>
46
+ <tbody><tr>
47
+ <td>1</td>
48
+ <td><a href="./my-first-component.html#my-first-component">My first component</a> — Lit card, <code>@ancestorAttribute</code>, <code>@bind</code>, mock API</td>
49
+ </tr>
50
+ <tr>
51
+ <td>2</td>
52
+ <td><a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a> — Core concepts: decorators and APIs</td>
53
+ </tr>
54
+ <tr>
55
+ <td>3</td>
56
+ <td><a href="../_misc/docs-mock-api.html#docs-mock-api">Local API demos</a> — offline <code>serviceURL</code> for this site (Misc)</td>
57
+ </tr>
58
+ <tr>
59
+ <td>4</td>
60
+ <td><a href="https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter">create-concorde-ts-starter</a> — <strong>recommended</strong> project kit (Vite, Tailwind, <code>yarn ai:sync</code>)</td>
61
+ </tr>
62
+ <tr>
63
+ <td>5</td>
64
+ <td><a href="./ai-agents.html#ai-agents">AI agents (skills)</a> — <code>AGENTS.md</code>, Cursor / JetBrains rules</td>
65
+ </tr>
66
+ </tbody></table>
67
+ <p>Legacy (Subscriber mixin, Publisher API): <strong>Legacy</strong> section at the bottom of the sidebar.</p>
68
+ <h2 id="start-a-new-project">Start a new project</h2>
69
+ <pre><code class="language-bash">npx @supersoniks/create-concorde-ts-starter &quot;project_name&quot;
70
+ </code></pre>
71
+ <p>The starter runs <strong><code>yarn ai:sync</code></strong> for you. Details: <a href="./ai-agents.html#ai-agents">AI agents (skills)</a>. Manual Vite setup: <a href="./concorde-manual-install.html#concorde-manual-install">Legacy: Manual installation</a>.</p>
72
+
73
+ </article>
74
+ </main>
75
+ </body>
76
+ </html>
@@ -0,0 +1,85 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html" data-doc-id="docs/_getting-started/theming">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Adding styles — Concorde</title>
7
+ <meta name="description" content="No style crosses the shadow root of a component, except for inheritable properties (which have the &quot;inherit&quot; property possible) and CSS variables.">
8
+ <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/theming, theming, Adding styles, guide, , size, {reflect: true}, :host(), :host([type='primary']){...}, inline, block, display, contents">
9
+ <meta name="concorde-doc-id" content="docs/_getting-started/theming">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html">
11
+ </head>
12
+ <body>
13
+ <header>
14
+ <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/theming.md/theming" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Adding styles</strong>. No style crosses the shadow root of a component, except for inheritable properties (which have the &quot;inherit&quot; property possible) and CSS variables. <span>Doc ID: <code>docs/_getting-started/theming</code>. Keywords: Concorde, supersoniks, docs/_getting-started/theming, theming, Adding styles, guide, , size, {reflect: true}, :host(), :host([type='primary']){...}, inline, block, display, contents. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html</a>.</span></p>
19
+ <h1 id="adding-styles">Adding styles</h1>
20
+ <h2 id="normal-behavior">Normal Behavior</h2>
21
+ <p>No style crosses the shadow root of a component, except for inheritable properties (which have the &quot;inherit&quot; property possible) and CSS variables.
22
+ Properties integrated via a &quot;<a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/slot">slot</a>&quot; remain stylizable in a conventional way.</p>
23
+ <ul>
24
+ <li><strong>During creation / from the inside:</strong><ul>
25
+ <li>We edit the <a href="https://lit.dev/docs/components/styles/">static &quot;styles&quot; property of the lit component</a>, which can also reference shared and dynamic styles.
26
+ These styles are scoped and do not impact the outside.</li>
27
+ <li>We use CSS variables as the value of properties intended to be customized from the outside.
28
+ For each variable, we define a default value to have a simple but consistent base style.</li>
29
+ <li>We only rewrite inheritable properties with hard values if they are truly specific to the component.</li>
30
+ <li>The <code>&lt;style&gt;</code> tag as a direct child can be used as a last resort, especially if there is a need for particularly dynamic customization. Performance is reduced.</li>
31
+ </ul>
32
+ </li>
33
+ <li><strong>During use / from the outside:</strong>
34
+ We define values for <strong>inheritable CSS properties</strong> (e.g., font-_, color...) using tools like Tailwind.
35
+ We modify the value of <strong>CSS variables</strong> used by the component.</li>
36
+ </ul>
37
+ <h2 id="choosing-style-presets-via-reactive-properties">Choosing Style Presets via Reactive Properties:</h2>
38
+ <p>The declaration of reactive properties is useful for selecting a particular configuration that mostly affects a set of properties.</p>
39
+ <p>For example, a <code>size</code> property (xs, sm, md, xl) will affect margins, font, line heights to align them with the corresponding CSS vars, which can be customized using the methods mentioned earlier if necessary.</p>
40
+ <p>It is recommended to use the <code>{reflect: true}</code> property for reactive properties that have an associated style on the <code>:host()</code>. For example: <code>:host([type=&#39;primary&#39;]){...}</code></p>
41
+ <p>☢️ <strong>Caution:</strong> Passing class names via reactive properties / HTML attributes of the component should be avoided as it can quickly lead to difficult-to-manage situations.</p>
42
+ <h4 id="css-display-property">CSS &quot;display&quot; Property</h4>
43
+ <p>By default, the display property is <code>inline</code>.
44
+ Therefore, be careful to define it according to the needs, as one might mistakenly expect it to be <code>block</code> as with a regular <code>&lt;div&gt;</code>.</p>
45
+ <p>☢️ <strong>Caution:</strong> Defining the <code>display</code> property as <code>contents</code> may seem attractive at first, but:</p>
46
+ <ul>
47
+ <li>It almost always leads to the creation of wrappers to style the content (instead of using <code>:host</code>).</li>
48
+ <li>It is no longer possible to directly add classes to the component or style it from the outside.
49
+ Ultimately, the amount of code to write increases significantly.</li>
50
+ </ul>
51
+ <h2 id="tailwind-functional-classes">TAILWIND Functional Classes</h2>
52
+ <p><a href="https://tailwindcss.com/">tailwind</a> has been integrated into Concorde and is available in scoped components (with Shadow DOM).
53
+ To use it, you need to import the following:</p>
54
+ <pre><code class="language-javascript">import { tailwind } from &quot;@supersoniks/concorde/la-billetterie/ui/theme/theme&quot;;
55
+ </code></pre>
56
+ <p>Then include the <code>tailwind</code> style in the static <code>styles</code> property of the component:</p>
57
+ <pre><code class="language-javascript">static styles = [tailwind];
58
+ </code></pre>
59
+ <p>Finally, use it in the HTML within the render function:</p>
60
+ <pre><code class="language-html">&lt;p class=&quot;m-2&quot;&gt;A paragraph with margin&lt;/p&gt;
61
+ </code></pre>
62
+ <p>The colors from Concorde&#39;s theme are referenced in Tailwind&#39;s theme.</p>
63
+ <h2 id="operation-without-shadow-dom">Operation without Shadow DOM</h2>
64
+ <h3 id="usefulness">Usefulness</h3>
65
+ <p>This operation is particularly useful when it comes to <strong>adding behavior to a simple existing element</strong>.
66
+ It may also become necessary to establish <strong>compatibility with a traditional JS library</strong>.</p>
67
+ <p>For example, with a text input:</p>
68
+ <ul>
69
+ <li>Trigger automatic data or filter update when typing text.</li>
70
+ <li>Automatic formatting.</li>
71
+ <li>Constraints that cannot be handled by native methods.</li>
72
+ </ul>
73
+ <h3 id="consequences">Consequences</h3>
74
+ <p>If there is no shadow DOM (see the <strong>noShadowDom</strong> property of <strong>Subscriber</strong>):</p>
75
+ <ul>
76
+ <li>Styling using the static &quot;styles&quot; property of the lit component will not be applied.</li>
77
+ <li>The element and its content can be styled in a traditional manner.</li>
78
+ </ul>
79
+ <p>For example, the components <code>queue</code>, <code>list</code>, and <code>fetch</code> do not have a shadow DOM.</p>
80
+ <p>ℹ️ <strong>Note:</strong> Specifically in this case, it may be useful to set the <code>display</code> property to <code>contents</code>.</p>
81
+
82
+ </article>
83
+ </main>
84
+ </body>
85
+ </html>
@@ -0,0 +1,149 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_misc/api-configuration.html" data-doc-id="docs/_misc/api-configuration">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>API configuration — Concorde</title>
7
+ <meta name="description" content="APIConfiguration is the object built by HTML.getApiConfiguration from ancestor attributes on the DOM (or from a typed publisher — see @get / @post configuration key). It is passed to API by fetchers, ">
8
+ <meta name="keywords" content="Concorde, supersoniks, docs/_misc/api-configuration, api-configuration, API configuration, reference, APIConfiguration, HTML.getApiConfiguration, API, wording(), @get, @post, @put, @patch, serviceURL">
9
+ <meta name="concorde-doc-id" content="docs/_misc/api-configuration">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_misc/api-configuration.html">
11
+ </head>
12
+ <body>
13
+ <header>
14
+ <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_misc/api-configuration.md/api-configuration" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde reference — API configuration</strong>. APIConfiguration is the object built by HTML.getApiConfiguration from ancestor attributes on the DOM (or from a typed publisher — see @get / @post configuration key). It is passed to API by fetchers, <span>Doc ID: <code>docs/_misc/api-configuration</code>. Keywords: Concorde, supersoniks, docs/_misc/api-configuration, api-configuration, API configuration, reference, APIConfiguration, HTML.getApiConfiguration, API, wording(), @get, @post, @put, @patch, serviceURL. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_misc/api-configuration.html">https://concorde.supersoniks.org/crawl/docs/_misc/api-configuration.html</a>.</span></p>
19
+ <h1 id="api-configuration">API configuration</h1>
20
+ <p><code>APIConfiguration</code> is the object built by <a href="../../core/utils/HTML.ts"><code>HTML.getApiConfiguration</code></a> from <strong>ancestor attributes</strong> on the DOM (or from a typed publisher — see <a href="../_decorators/get.html#get">@get</a> / <a href="../_decorators/post.html#post">@post</a> configuration key). It is passed to <a href="../../core/utils/api.ts"><code>API</code></a> by fetchers, <strong>sonic-submit</strong>, the <strong><code>wording()</code></strong> directive, <strong><code>@get</code></strong>, <strong><code>@post</code></strong>, <strong><code>@put</code></strong>, and <strong><code>@patch</code></strong>.</p>
21
+ <blockquote>
22
+ <p><strong>Mock service:</strong> same <a href="./docs-mock-api.html#docs-mock-api">Local API demos</a> Service Worker / Vite middleware. Routes used on this page are listed in the <a href="#api-config-routes">API config routes</a> section below.</p>
23
+ </blockquote>
24
+ <h2 id="attribute-map">Attribute map</h2>
25
+ <table>
26
+ <thead>
27
+ <tr>
28
+ <th>Attribute (ancestor)</th>
29
+ <th><code>APIConfiguration</code> field</th>
30
+ <th>Role</th>
31
+ </tr>
32
+ </thead>
33
+ <tbody><tr>
34
+ <td><code>serviceURL</code></td>
35
+ <td><code>serviceURL</code></td>
36
+ <td>Base URL (e.g. <code>/docs-mock-api</code>)</td>
37
+ </tr>
38
+ <tr>
39
+ <td><code>token</code></td>
40
+ <td><code>token</code></td>
41
+ <td>Static Bearer sent on REST calls</td>
42
+ </tr>
43
+ <tr>
44
+ <td><code>userName</code> / <code>password</code></td>
45
+ <td><code>userName</code> / <code>password</code></td>
46
+ <td>Basic auth for <strong>tokenProvider</strong> fetch only</td>
47
+ </tr>
48
+ <tr>
49
+ <td><code>eventsApiToken</code></td>
50
+ <td><code>authToken</code></td>
51
+ <td>Bearer for <strong>tokenProvider</strong> when no Basic</td>
52
+ </tr>
53
+ <tr>
54
+ <td><code>tokenProvider</code></td>
55
+ <td><code>tokenProvider</code></td>
56
+ <td>Path to GET a new token (<code>{ token }</code> JSON)</td>
57
+ </tr>
58
+ <tr>
59
+ <td><code>wordingProvider</code></td>
60
+ <td>— (read by <code>wording()</code>)</td>
61
+ <td>Base path + query for label batch GET</td>
62
+ </tr>
63
+ <tr>
64
+ <td><code>wordingVersionProvider</code></td>
65
+ <td>—</td>
66
+ <td>Publisher id; bump version → reload wordings</td>
67
+ </tr>
68
+ <tr>
69
+ <td><code>credentials</code></td>
70
+ <td><code>credentials</code></td>
71
+ <td><code>fetch</code> credentials mode</td>
72
+ </tr>
73
+ <tr>
74
+ <td><code>addHTTPResponse</code></td>
75
+ <td><code>addHTTPResponse</code></td>
76
+ <td>Attach <code>_sonic_http_response_</code> on result</td>
77
+ </tr>
78
+ <tr>
79
+ <td><code>cache</code></td>
80
+ <td><code>cache</code></td>
81
+ <td><code>fetch</code> cache mode</td>
82
+ </tr>
83
+ <tr>
84
+ <td><code>blockUntilDone</code></td>
85
+ <td><code>blockUntilDone</code></td>
86
+ <td>Serialize calls per <code>serviceURL</code></td>
87
+ </tr>
88
+ <tr>
89
+ <td><code>keepAlive</code></td>
90
+ <td><code>keepAlive</code></td>
91
+ <td><code>fetch</code> keepalive</td>
92
+ </tr>
93
+ </tbody></table>
94
+ <p><strong>Lit / TypeScript:</strong> store the same shape in a publisher and pass <code>DataProviderKey&lt;APIConfiguration&gt;</code> as the second argument of <code>@get</code> (see <a href="./dataProviderKey.html#dataProviderKey">DataProviderKey</a>).</p>
95
+ <h2 id="bearer-token-static">Bearer token (static)</h2>
96
+ <p>Publisher <code>docsApiConfBearerKey</code> (<code>set(docsApiConfBearerKey, { token: &quot;docs-mock-valid-token&quot;, … })</code>) — mock returns the protected payload.</p>
97
+ <p><docs-lit-demo for="docs-api-config-bearer-demo"></docs-lit-demo></p>
98
+ <h2 id="tokenprovider--basic-auth">tokenProvider + Basic auth</h2>
99
+ <p>No static <code>token</code>: <code>API.auth()</code> calls <code>GET /docs-mock-api/auth/token</code> with Basic <strong>demo</strong> / <strong>secret</strong>, stores <code>token</code>, then calls the protected route.</p>
100
+ <p><docs-lit-demo for="docs-api-config-token-provider-demo"></docs-lit-demo></p>
101
+ <h2 id="http-498--stale-token-refresh">HTTP 498 — stale token refresh</h2>
102
+ <p>Initial <code>token=&quot;docs-mock-stale-token&quot;</code> → mock responds <strong>498</strong> → Concorde invalidates the token, runs <code>auth()</code> again (same <code>tokenProvider</code> + Basic), retries with <code>docs-mock-fresh-token</code>.</p>
103
+ <p><docs-lit-demo for="docs-api-config-stale-token-demo"></docs-lit-demo></p>
104
+ <h2 id="eventsapitoken">eventsApiToken</h2>
105
+ <p>Attribute <strong><code>eventsApiToken</code></strong> on an ancestor maps to <strong><code>authToken</code></strong> in config (used as Bearer when calling <code>tokenProvider</code>, instead of Basic).</p>
106
+ <p><docs-lit-demo for="docs-api-config-events-token-demo"></docs-lit-demo></p>
107
+ <h2 id="wording-api">Wording API</h2>
108
+ <p><code>wordingProvider=&quot;wording/labels?lang=fr&quot;</code> + <code>wording(&#39;api-config.greeting&#39;)</code> in Lit. Mock returns label map from <code>labels[]</code> query params.</p>
109
+ <p><docs-lit-demo for="docs-api-config-wording-demo"></docs-lit-demo></p>
110
+ <h2 id="scoped-attributes-html--sonic-scope">Scoped attributes (HTML / sonic-scope)</h2>
111
+ <p>Attributes on <strong><code>sonic-scope</code></strong> (or any ancestor) are visible to descendants via <code>getAncestorAttributeValue</code>.</p>
112
+ <p><docs-lit-demo for="docs-api-config-scoped-attrs-demo"></docs-lit-demo></p>
113
+ <h2 id="api-config-routes">API config routes</h2>
114
+ <table>
115
+ <thead>
116
+ <tr>
117
+ <th>Route</th>
118
+ <th>Demo</th>
119
+ </tr>
120
+ </thead>
121
+ <tbody><tr>
122
+ <td><code>GET /docs-mock-api/auth/token</code></td>
123
+ <td>tokenProvider, eventsApiToken</td>
124
+ </tr>
125
+ <tr>
126
+ <td><code>GET /docs-mock-api/api/config/protected</code></td>
127
+ <td>Bearer / Basic / 498</td>
128
+ </tr>
129
+ <tr>
130
+ <td><code>GET /docs-mock-api/wording/labels?labels[]=…&amp;lang=fr</code></td>
131
+ <td><code>wording()</code></td>
132
+ </tr>
133
+ </tbody></table>
134
+ <p>Mock tokens (doc only): <code>docs-mock-valid-token</code>, <code>docs-mock-stale-token</code> (498), <code>docs-mock-fresh-token</code> (after refresh). Basic: <strong>demo</strong> / <strong>secret</strong>. Events token: <code>docs-mock-events-token</code>.</p>
135
+ <p>Implementation: <code>src/docs/mock-api/api-config-mock.ts</code> (bundled in the Service Worker with <code>router.ts</code>).</p>
136
+ <h2 id="see-also">See also</h2>
137
+ <ul>
138
+ <li><a href="../_decorators/get.html#get">@get</a> — <code>APIConfiguration</code> + <code>Endpoint</code></li>
139
+ <li><a href="../_decorators/post.html#post">@post</a> — same configuration model for POST</li>
140
+ <li><a href="../_decorators/put.html#put">@put</a> · <a href="../_decorators/patch.html#patch">@patch</a> — PUT / PATCH</li>
141
+ <li><a href="./endpoint.html#endpoint">Endpoint</a> — typed path</li>
142
+ <li><a href="./docs-mock-api.html#docs-mock-api">Local API demos</a> — offline <code>serviceURL</code></li>
143
+ <li><a href="../../core/components/functional/fetch/fetch.html#fetch">Fetch</a> — attribute table (legacy sonic-fetch)</li>
144
+ </ul>
145
+
146
+ </article>
147
+ </main>
148
+ </body>
149
+ </html>
@@ -0,0 +1,135 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_misc/dataProviderKey.html" data-doc-id="docs/_misc/dataProviderKey">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DataProviderKey — Concorde</title>
7
+ <meta name="description" content="The DataProviderKey&lt;T&gt; utility provides type-safe navigation through composite data structures. Each property or index access extends the path, and the final key can be retrieved via toString() or the">
8
+ <meta name="keywords" content="Concorde, supersoniks, docs/_misc/dataProviderKey, dataProviderKey, DataProviderKey, reference, toString(), path, myKey.items[0], items, Item[], .path">
9
+ <meta name="concorde-doc-id" content="docs/_misc/dataProviderKey">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_misc/dataProviderKey.html">
11
+ </head>
12
+ <body>
13
+ <header>
14
+ <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_misc/dataProviderKey.md/dataProviderKey" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde reference — DataProviderKey</strong>. The DataProviderKey&lt;T&gt; utility provides type-safe navigation through composite data structures. Each property or index access extends the path, and the final key can be retrieved via toString() or the <span>Doc ID: <code>docs/_misc/dataProviderKey</code>. Keywords: Concorde, supersoniks, docs/_misc/dataProviderKey, dataProviderKey, DataProviderKey, reference, toString(), path, myKey.items[0], items, Item[], .path. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_misc/dataProviderKey.html">https://concorde.supersoniks.org/crawl/docs/_misc/dataProviderKey.html</a>.</span></p>
19
+ <h1 id="dataproviderkey">DataProviderKey</h1>
20
+ <p>The <code>DataProviderKey&lt;T&gt;</code> utility provides type-safe navigation through composite data structures. Each property or index access extends the path, and the final key can be retrieved via <code>toString()</code> or the <code>path</code> property.</p>
21
+ <p>For a <strong>single HTTP path string</strong> (no dot-syntax), see <a href="./endpoint.html#endpoint">Endpoint</a>. For <strong><code>DataProviderKey&lt;APIConfiguration&gt;</code></strong>, see <a href="./api-configuration.html#api-configuration">API configuration</a>.</p>
22
+ <h2 id="principle">Principle</h2>
23
+ <p><code>DataProviderKey</code> uses a Proxy to intercept property access and build a cumulative path string. TypeScript infers the nested type at each level, so <code>myKey.items[0]</code> is correctly typed as <code>DataProviderKey&lt;Item&gt;</code> when <code>items</code> is <code>Item[]</code>.</p>
24
+ <p>In Lit demos, bind HTML attributes from a key’s <strong><code>.path</code></strong> (single source of truth), and use <strong><code>get</code> / <code>set</code> / <code>dp</code></strong> instead of <code>PublisherManager.get(&quot;…&quot;)</code>:</p>
25
+ <pre><code class="language-typescript">import { DataProviderKey } from &quot;@supersoniks/concorde/dataProviderKey&quot;;
26
+ import { get, set } from &quot;@supersoniks/concorde/utils&quot;;
27
+
28
+ export const myFormKey = new DataProviderKey&amp;lt;{ email: string }&amp;gt;(&quot;myForm&quot;);
29
+ set(myFormKey, { email: &quot;a@b.c&quot; });
30
+
31
+ // template: formDataProvider=${myFormKey.path}
32
+ </code></pre>
33
+ <h2 id="usage">Usage</h2>
34
+ <h3 id="import">Import</h3>
35
+ <pre><code class="language-typescript">import { DataProviderKey } from &quot;@supersoniks/concorde/dataProviderKey&quot;;
36
+ </code></pre>
37
+ <h3 id="basic-example">Basic example</h3>
38
+ <pre><code class="language-typescript">type Item = { id: string; name: string };
39
+ //
40
+ type Data = {
41
+ items: Item[];
42
+ count: number;
43
+ };
44
+ //
45
+ const myKey = new DataProviderKey&amp;lt;Data&amp;gt;(&quot;data&quot;).items[0];
46
+ // Equivalent to: new DataProviderKey&amp;lt;Item&amp;gt;(&quot;data.items.0&quot;)
47
+ myKey.toString(); // &quot;data.items.0&quot;
48
+ myKey.path; // same value
49
+ // myKey is typed as DataProviderKey&amp;lt;Item&amp;gt;
50
+ </code></pre>
51
+ <h3 id="object-property-access">Object property access</h3>
52
+ <pre><code class="language-typescript">const key = new DataProviderKey&amp;lt;Data&amp;gt;(&quot;data&quot;);
53
+ const countKey = key.count;
54
+ countKey.path; // &quot;data.count&quot;
55
+ countKey.toString(); // &quot;data.count&quot;
56
+ </code></pre>
57
+ <h3 id="array-index-access">Array index access</h3>
58
+ <pre><code class="language-typescript">const itemsKey = new DataProviderKey&amp;lt;Data&amp;gt;(&quot;data&quot;).items;
59
+ itemsKey.path; // &quot;data.items&quot;
60
+ // itemsKey is DataProviderKey&amp;lt;Item[]&amp;gt;
61
+ //
62
+ const firstItem = itemsKey[0];
63
+ firstItem.path; // &quot;data.items.0&quot;
64
+ // firstItem is DataProviderKey&amp;lt;Item&amp;gt;
65
+ </code></pre>
66
+ <h3 id="dynamic-paths">Dynamic paths</h3>
67
+ <p>Use placeholders <code>${prop}</code> or <code>{$prop}</code> in the path string. The path is resolved at runtime from the component&#39;s properties. See <a href="./dynamic-path.html#dynamic-path">Dynamic path placeholders</a> for resolution rules and <code>skipEmptyPlaceholder</code>. The type remains declarative:</p>
68
+ <pre><code class="language-typescript">type User = { name: string; email: string };
69
+ //
70
+ // Path resolved from component.userIndex at runtime
71
+ @subscribe(new DataProviderKey&amp;lt;User&amp;gt;(&quot;users.${userIndex}&quot;))
72
+ @state()
73
+ user: User | null = null;
74
+ </code></pre>
75
+ <p>Dynamic keys are <strong>not</strong> supported by <code>get</code>, <code>set</code>, or <code>dp</code> — those APIs take a snapshot at call time with no component context. For dynamic paths use decorators (<code>@subscribe</code>, <code>@publish</code>, <code>@handle</code>) or <strong><code>sub(key)</code></strong> in Lit templates (resolves <code>${…}</code> from the host component). See <a href="../_directives/sub.html#sub">sub()</a>.</p>
76
+ <h3 id="get--set--dp-with-static-keys">get / set / dp with static keys</h3>
77
+ <p>For programmatic access, pass a <code>DataProviderKey</code> or a static path string. Dynamic placeholders are rejected:</p>
78
+ <pre><code class="language-typescript">import { dp, get, set } from &quot;@supersoniks/concorde/utils&quot;;
79
+ import { DataProviderKey } from &quot;@supersoniks/concorde/dataProviderKey&quot;;
80
+ //
81
+ const counterKey = new DataProviderKey&amp;lt;{ count: number }&amp;gt;(&quot;myCounter&quot;);
82
+ //
83
+ set(counterKey, { count: 0 });
84
+ dp(counterKey.count).set(1);
85
+ get(counterKey); // snapshot: { count: 1 }
86
+ </code></pre>
87
+ <h2 id="path-retrieval">Path retrieval</h2>
88
+ <p>The final path is built by concatenating each accessed property with a dot:</p>
89
+ <ul>
90
+ <li><code>new DataProviderKey&lt;T&gt;(&quot;base&quot;)</code> → <code>&quot;base&quot;</code></li>
91
+ <li><code>key.prop</code> → <code>&quot;base.prop&quot;</code></li>
92
+ <li><code>key.items[0]</code> → <code>&quot;base.items.0&quot;</code></li>
93
+ </ul>
94
+ <p>Use <code>toString()</code> or <code>path</code> to get the full path string:</p>
95
+ <pre><code class="language-typescript">const key = new DataProviderKey&amp;lt;Data&amp;gt;(&quot;data&quot;).count;
96
+ const pathString = key.toString(); // &quot;data.count&quot;
97
+ const pathProp = key.path; // &quot;data.count&quot;
98
+ </code></pre>
99
+ <h2 id="use-cases">Use cases</h2>
100
+ <ul>
101
+ <li><strong>Type-safe bindings</strong>: paths for <code>@bind</code>, <code>@subscribe</code>, <code>@publish</code>, <code>@handle</code></li>
102
+ <li><strong>Dynamic paths</strong>: reusable keys with <code>${...}</code> placeholders</li>
103
+ <li><strong>Form fields</strong>: form data paths with compile-time checking</li>
104
+ </ul>
105
+ <h2 id="integration-with-subscribe-publish-and-handle">Integration with @subscribe, @publish and @handle</h2>
106
+ <p>Use <code>DataProviderKey</code> with <code>@subscribe</code> (read-only), <code>@publish</code> (write-only), or <code>@handle</code> (method callback on assign). With <code>@subscribe</code> / <code>@publish</code>, the decorated property <strong>must</strong> match the key’s value type. With <code>@handle</code>, the method receives <code>(value: T)</code>.</p>
107
+ <pre><code class="language-typescript">import { subscribe } from &quot;@supersoniks/concorde/decorators&quot;;
108
+ import { DataProviderKey } from &quot;@supersoniks/concorde/dataProviderKey&quot;;
109
+ //
110
+ type FormData = { email: string };
111
+ const formKey = new DataProviderKey&amp;lt;FormData&amp;gt;(&quot;formData&quot;);
112
+ //
113
+ @customElement(&quot;user-form&quot;)
114
+ export class UserForm extends LitElement {
115
+ @subscribe(formKey.email)
116
+ @state()
117
+ email = &quot;&quot;;
118
+ //
119
+ render() {
120
+ return html`&amp;lt;input .value=${this.email} @input=${(e) =&gt; this.email = (e.target as HTMLInputElement).value}&amp;gt;`;
121
+ }
122
+ }
123
+ </code></pre>
124
+ <p>These decorators support dynamic paths: <code>&quot;base.${prop}&quot;</code> in the constructor. A wrong property type (e.g. <code>number</code> for <code>DataProviderKey&lt;string&gt;</code>) is a TypeScript error. Resolution rules: <a href="./dynamic-path.html#dynamic-path">Dynamic path placeholders</a>. See <a href="../_decorators/handle.html#handle">@handle</a> for method callbacks.</p>
125
+ <h2 id="notes">Notes</h2>
126
+ <ul>
127
+ <li>Function properties are excluded from navigation (no <code>key.method()</code> chaining)</li>
128
+ <li>Primitives have no navigable properties</li>
129
+ <li>The <code>path</code> property and <code>toString()</code> are equivalent for retrieving the key</li>
130
+ </ul>
131
+
132
+ </article>
133
+ </main>
134
+ </body>
135
+ </html>
@@ -0,0 +1,146 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_misc/docs-mock-api.html" data-doc-id="docs/_misc/docs-mock-api">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Local API demos (offline) — Concorde</title>
7
+ <meta name="description" content="The Concorde doc site does not call fragile third-party APIs during yarn dev. A Service Worker and the Vite dev middleware serve /docs-mock-api/* on the same origin.">
8
+ <meta name="keywords" content="Concorde, supersoniks, docs/_misc/docs-mock-api, docs-mock-api, Local API demos (offline), reference, yarn dev, /docs-mock-api/*, registerDocsMockApiServiceWorker(), /docs-mock-api-sw.js, /docs-mock-api/..., serviceURL=&quot;/docs-mock-api&quot;, src/docs/mock-api/urls.ts, DOCS_MOCK_REQRES_SERVICE, DOCS_MOCK_GEO_SERVICE, /docs-mock-api/api/users">
9
+ <meta name="concorde-doc-id" content="docs/_misc/docs-mock-api">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_misc/docs-mock-api.html">
11
+ </head>
12
+ <body>
13
+ <header>
14
+ <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_misc/docs-mock-api.md/docs-mock-api" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde reference — Local API demos (offline)</strong>. The Concorde doc site does not call fragile third-party APIs during yarn dev. A Service Worker and the Vite dev middleware serve /docs-mock-api/* on the same origin. <span>Doc ID: <code>docs/_misc/docs-mock-api</code>. Keywords: Concorde, supersoniks, docs/_misc/docs-mock-api, docs-mock-api, Local API demos (offline), reference, yarn dev, /docs-mock-api/*, registerDocsMockApiServiceWorker(), /docs-mock-api-sw.js, /docs-mock-api/..., serviceURL=&quot;/docs-mock-api&quot;, src/docs/mock-api/urls.ts, DOCS_MOCK_REQRES_SERVICE, DOCS_MOCK_GEO_SERVICE, /docs-mock-api/api/users. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_misc/docs-mock-api.html">https://concorde.supersoniks.org/crawl/docs/_misc/docs-mock-api.html</a>.</span></p>
19
+ <h1 id="local-api-demos-offline">Local API demos (offline)</h1>
20
+ <p>The Concorde doc site does not call fragile third-party APIs during <code>yarn dev</code>. A <strong>Service Worker</strong> and the Vite dev middleware serve <strong><code>/docs-mock-api/*</code></strong> on the same origin.</p>
21
+ <h2 id="how-it-works">How it works</h2>
22
+ <ol>
23
+ <li>On load, <code>registerDocsMockApiServiceWorker()</code> registers <code>/docs-mock-api-sw.js</code>.</li>
24
+ <li>Requests to <code>/docs-mock-api/...</code> are handled by the SW (production build) or Vite middleware (dev).</li>
25
+ <li>Live examples use <code>serviceURL=&quot;/docs-mock-api&quot;</code> and relative paths.</li>
26
+ </ol>
27
+ <p>TypeScript constants: <code>src/docs/mock-api/urls.ts</code> (<code>DOCS_MOCK_REQRES_SERVICE</code>, <code>DOCS_MOCK_GEO_SERVICE</code>, …).</p>
28
+ <h2 id="routes">Routes</h2>
29
+ <table>
30
+ <thead>
31
+ <tr>
32
+ <th>Path</th>
33
+ <th>Used in</th>
34
+ </tr>
35
+ </thead>
36
+ <tbody><tr>
37
+ <td><code>/docs-mock-api/api/users</code></td>
38
+ <td><code>sonic-list</code>, <code>sonic-fetch</code>, <code>sonic-queue</code> (users)</td>
39
+ </tr>
40
+ <tr>
41
+ <td><code>/docs-mock-api/api/users/:id</code></td>
42
+ <td>Single user, <code>docs-user</code></td>
43
+ </tr>
44
+ <tr>
45
+ <td><code>POST /docs-mock-api/api/register</code></td>
46
+ <td><strong>sonic-submit</strong> — JSON, <code>multipart/form-data</code> (<code>sendAsFormData</code>), or <code>application/x-www-form-urlencoded</code> (native <code>&lt;form&gt;</code>); response includes parsed <code>email</code> + <code>token</code></td>
47
+ </tr>
48
+ <tr>
49
+ <td><code>POST /docs-mock-api/api/register/nested</code></td>
50
+ <td>Wrapped body <code>{ data: { id, token } }</code> for <code>submit-result-key</code> demo</td>
51
+ </tr>
52
+ <tr>
53
+ <td><code>GET /docs-mock-api/api/register/echo</code></td>
54
+ <td>Echoes query string (<code>method=&quot;get&quot;</code> on submit)</td>
55
+ </tr>
56
+ <tr>
57
+ <td><code>GET /docs-mock-api/auth/token</code></td>
58
+ <td><a href="./api-configuration.html#api-configuration">API configuration</a> — tokenProvider (Basic or <code>eventsApiToken</code>)</td>
59
+ </tr>
60
+ <tr>
61
+ <td><code>GET /docs-mock-api/api/config/protected</code></td>
62
+ <td>Bearer / Basic; <code>docs-mock-stale-token</code> → <strong>498</strong></td>
63
+ </tr>
64
+ <tr>
65
+ <td><code>GET /docs-mock-api/wording/labels</code></td>
66
+ <td>Wording batch (<code>labels[]</code>, <code>lang</code>)</td>
67
+ </tr>
68
+ <tr>
69
+ <td><code>/docs-mock-api/geo/communes</code></td>
70
+ <td>Geo list, <code>@get</code> demos</td>
71
+ </tr>
72
+ <tr>
73
+ <td><code>/docs-mock-api/jokes/joke/:category</code></td>
74
+ <td>JokeAPI-shaped list (<code>key=&quot;jokes&quot;</code> on queue/list)</td>
75
+ </tr>
76
+ </tbody></table>
77
+ <h3 id="filtres-get-jokesjoke">Filtres <code>GET /jokes/joke/…</code></h3>
78
+ <table>
79
+ <thead>
80
+ <tr>
81
+ <th>Query</th>
82
+ <th>Meaning</th>
83
+ </tr>
84
+ </thead>
85
+ <tbody><tr>
86
+ <td><code>amount</code></td>
87
+ <td>Max jokes per request when not using <code>offset</code></td>
88
+ </tr>
89
+ <tr>
90
+ <td><code>offset</code> + <code>limit</code> / <code>per_page</code></td>
91
+ <td>Pagination for <strong>sonic-queue</strong> lazy load</td>
92
+ </tr>
93
+ <tr>
94
+ <td><code>contains</code></td>
95
+ <td>Substring on joke text, setup/delivery, categories (<strong>input</strong> demo, <code>name=&quot;contains&quot;</code>)</td>
96
+ </tr>
97
+ <tr>
98
+ <td><code>lang</code></td>
99
+ <td><code>fr</code> or <code>en</code> — filters the local dataset (<strong>select</strong> demo, <code>name=&quot;lang&quot;</code>)</td>
100
+ </tr>
101
+ <tr>
102
+ <td><code>blacklistFlags</code></td>
103
+ <td>Comma-separated flags to <strong>exclude</strong> (<code>nsfw</code>, <code>religious</code>, <code>political</code>, <code>racist</code>, <code>sexist</code>, <code>explicit</code>) — checkbox/radio/switch « Remove following jokes » demos; each joke has matching <code>flags</code> in fixtures</td>
104
+ </tr>
105
+ </tbody></table>
106
+ <h3 id="pagination-get-apiusers">Pagination <code>GET /api/users</code></h3>
107
+ <table>
108
+ <thead>
109
+ <tr>
110
+ <th>Query</th>
111
+ <th>Meaning</th>
112
+ </tr>
113
+ </thead>
114
+ <tbody><tr>
115
+ <td><code>offset</code> + <code>per_page</code></td>
116
+ <td>Index-based slice on the filtered set — <strong>sonic-queue</strong> (<code>offset=$offset&amp;per_page=$limit</code>)</td>
117
+ </tr>
118
+ <tr>
119
+ <td><code>page</code> + <code>per_page</code></td>
120
+ <td>1-based page — static fetch examples (<code>?page=2</code>)</td>
121
+ </tr>
122
+ <tr>
123
+ <td><code>limit</code></td>
124
+ <td>Alias of <code>per_page</code></td>
125
+ </tr>
126
+ <tr>
127
+ <td><code>q</code></td>
128
+ <td>Search on first name, last name, email (optional; <strong>sonic-queue</strong> + <code>dataFilterProvider</code>, field <code>name=&quot;q&quot;</code>)</td>
129
+ </tr>
130
+ </tbody></table>
131
+ <p><strong>ALTCHA</strong> (<code>sonic-captcha</code>) is <strong>not</strong> mocked — it still uses the Supersoniks service.</p>
132
+ <p>In TypeScript demos, import from <code>src/docs/mock-api/urls.ts</code> (e.g. <code>DOCS_MOCK_REQRES_SERVICE</code> on <code>serviceURL</code>).</p>
133
+ <h2 id="source-files">Source files</h2>
134
+ <ul>
135
+ <li><code>src/docs/mock-api/</code> — router, fixtures, service worker, <code>urls.ts</code></li>
136
+ <li><code>scripts/docs-mock-api-vite-plugin.ts</code> — SW build + middleware</li>
137
+ <li><code>public/docs-mock-api-sw.js</code> — generated on <code>yarn dev</code> / <code>yarn build-docs</code></li>
138
+ </ul>
139
+ <pre><code class="language-bash">yarn dev # mock API on by default
140
+ yarn build-docs # includes SW bundle
141
+ </code></pre>
142
+
143
+ </article>
144
+ </main>
145
+ </body>
146
+ </html>