@supersoniks/concorde 5.0.5 → 5.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (282) hide show
  1. package/.claude/launch.json +15 -0
  2. package/.claude/vite.http.config.mjs +7 -0
  3. package/.taste-skill/after/desktop-fold.jpg +0 -0
  4. package/.taste-skill/after/desktop-page-01.jpg +0 -0
  5. package/.taste-skill/after/desktop-page-02.jpg +0 -0
  6. package/.taste-skill/after/desktop-page-03.jpg +0 -0
  7. package/.taste-skill/after/mobile-fold.jpg +0 -0
  8. package/.taste-skill/after/mobile-page-01.jpg +0 -0
  9. package/.taste-skill/after/report.json +4103 -0
  10. package/.taste-skill/after/tablet-fold.jpg +0 -0
  11. package/.taste-skill/after/tablet-page-01.jpg +0 -0
  12. package/.taste-skill/after/tablet-page-02.jpg +0 -0
  13. package/.taste-skill/before/desktop-fold.jpg +0 -0
  14. package/.taste-skill/before/desktop-page-01.jpg +0 -0
  15. package/.taste-skill/before/desktop-page-02.jpg +0 -0
  16. package/.taste-skill/before/mobile-fold.jpg +0 -0
  17. package/.taste-skill/before/mobile-page-01.jpg +0 -0
  18. package/.taste-skill/before/report.json +2556 -0
  19. package/.taste-skill/before/tablet-fold.jpg +0 -0
  20. package/.taste-skill/before/tablet-page-01.jpg +0 -0
  21. package/.taste-skill/direction.json +510 -0
  22. package/.taste-skill/notes.md +84 -0
  23. package/.taste-skill/prod/desktop-fold.jpg +0 -0
  24. package/.taste-skill/prod/desktop-page-01.jpg +0 -0
  25. package/.taste-skill/prod/desktop-page-02.jpg +0 -0
  26. package/.taste-skill/prod/desktop-page-03.jpg +0 -0
  27. package/.taste-skill/prod/mobile-fold.jpg +0 -0
  28. package/.taste-skill/prod/mobile-page-01.jpg +0 -0
  29. package/.taste-skill/prod/mobile-page-02.jpg +0 -0
  30. package/.taste-skill/prod/report.json +1973 -0
  31. package/.taste-skill/prod/tablet-fold.jpg +0 -0
  32. package/.taste-skill/prod/tablet-page-01.jpg +0 -0
  33. package/.taste-skill/prod/tablet-page-02.jpg +0 -0
  34. package/.tmp-cem/custom-elements.json +13705 -0
  35. package/AUDIT.md +228 -0
  36. package/PLAN-AMELIORATION.md +220 -0
  37. package/build-infos.json +1 -1
  38. package/concorde-core.bundle.js +196 -196
  39. package/concorde-core.es.js +3854 -3572
  40. package/custom-elements-manifest.config.mjs +14 -0
  41. package/dist/concorde-core.bundle.js +196 -196
  42. package/dist/concorde-core.es.js +3854 -3572
  43. package/dist/img/archive/concorde-001-2cv.webp +0 -0
  44. package/dist/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  45. package/dist/img/archive/concorde-red-arrows-2002.webm +0 -0
  46. package/dist/img/archive/credits.json +28 -0
  47. package/docs/assets/index-Bb-_LRyY.js +12280 -0
  48. package/docs/index.html +1 -1
  49. package/index.html +27 -63
  50. package/package.json +44 -3
  51. package/public/img/archive/concorde-001-2cv.webp +0 -0
  52. package/public/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  53. package/public/img/archive/concorde-red-arrows-2002.webm +0 -0
  54. package/public/img/archive/credits.json +28 -0
  55. package/scripts/generate-sdui-catalog.mjs +250 -0
  56. package/scripts/generate-sdui-catalog.spec.ts +91 -0
  57. package/scripts/pre-build.mjs +15 -0
  58. package/src/core/components/functional/fetch/fetch.md +2 -2
  59. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +5 -5
  60. package/src/core/components/functional/sdui/__fixtures__/descriptors.ts +251 -0
  61. package/src/core/components/functional/sdui/__snapshots__/sdui-action.spec.ts.snap +73 -0
  62. package/src/core/components/functional/sdui/__snapshots__/sdui-incremental.spec.ts.snap +50 -0
  63. package/src/core/components/functional/sdui/__snapshots__/sdui-partial.spec.ts.snap +50 -0
  64. package/src/core/components/functional/sdui/__snapshots__/sdui.regression.spec.ts.snap +461 -0
  65. package/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  66. package/src/core/components/functional/sdui/component-catalog.json +3103 -0
  67. package/src/core/components/functional/sdui/component-catalog.spec.ts +23 -0
  68. package/src/core/components/functional/sdui/sdui-action.spec.ts +99 -0
  69. package/src/core/components/functional/sdui/sdui-dom-snapshot.ts +61 -0
  70. package/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  71. package/src/core/components/functional/sdui/sdui-incremental.spec.ts +137 -0
  72. package/src/core/components/functional/sdui/sdui-partial.spec.ts +83 -0
  73. package/src/core/components/functional/sdui/sdui-partial.ts +19 -0
  74. package/src/core/components/functional/sdui/sdui-safe.spec.ts +188 -0
  75. package/src/core/components/functional/sdui/sdui-safe.ts +100 -0
  76. package/src/core/components/functional/sdui/sdui.md +122 -0
  77. package/src/core/components/functional/sdui/sdui.regression.spec.ts +64 -0
  78. package/src/core/components/functional/sdui/sdui.ts +442 -34
  79. package/src/core/components/functional/sdui/types.ts +49 -0
  80. package/src/core/components/ui/modal/modal.ts +14 -11
  81. package/src/docs/_getting-started/components.md +5 -0
  82. package/src/docs/_getting-started/theming.md +2 -2
  83. package/src/docs/code.ts +88 -75
  84. package/src/docs/components/docs-demo-sources.ts +16 -8
  85. package/src/docs/components/docs-lit-demo.ts +19 -37
  86. package/src/docs/docs.ts +5 -0
  87. package/src/docs/example/docs-boarding-pass-demo.ts +134 -0
  88. package/src/docs/example/docs-provider-keys.ts +12 -0
  89. package/src/docs/header/header.ts +233 -69
  90. package/src/docs/home/catalog.ts +44 -0
  91. package/src/docs/home/home.ts +513 -0
  92. package/src/docs/home/mach-stage.ts +389 -0
  93. package/src/docs/layout.ts +3 -1
  94. package/src/docs/navigation/components-index.ts +56 -0
  95. package/src/docs/navigation/navigation.ts +240 -232
  96. package/src/docs/navigation/pager.ts +67 -0
  97. package/src/docs/navigation/toc.ts +98 -0
  98. package/src/docs/search/docs-search.json +330 -20
  99. package/src/docs/search/markdown-renderer.ts +11 -3
  100. package/src/docs/shiki/index.ts +109 -0
  101. package/src/docs/tailwind/css/base/scrollbar.css +22 -0
  102. package/src/docs/tailwind/css/base/theme.css +96 -0
  103. package/src/docs/tailwind/css/base/typography.css +4 -0
  104. package/src/docs/tailwind/css/docs/boarding-pass.css +65 -0
  105. package/src/docs/tailwind/css/docs/content.css +32 -0
  106. package/src/docs/tailwind/css/docs/page.css +10 -0
  107. package/src/docs/tailwind/css/docs.css +9 -0
  108. package/src/docs/tailwind/css/home/hero.css +210 -0
  109. package/src/docs/tailwind/css/home/motion.css +84 -0
  110. package/src/docs/tailwind/css/home/sections.css +416 -0
  111. package/src/docs/tailwind/css/tailwind.css +7 -185
  112. package/src/tsconfig.json +113 -2
  113. package/src/tsconfig.tsbuildinfo +1 -1
  114. package/tailwind.config.js +8 -4
  115. package/docs/assets/index-wVZpLVYW.js +0 -12122
  116. package/docs/crawl/core/components/functional/date/date.html +0 -190
  117. package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
  118. package/docs/crawl/core/components/functional/if/if.html +0 -27
  119. package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
  120. package/docs/crawl/core/components/functional/list/list.html +0 -70
  121. package/docs/crawl/core/components/functional/mix/mix.html +0 -45
  122. package/docs/crawl/core/components/functional/queue/queue.html +0 -96
  123. package/docs/crawl/core/components/functional/router/router.html +0 -106
  124. package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
  125. package/docs/crawl/core/components/functional/states/states.html +0 -66
  126. package/docs/crawl/core/components/functional/submit/submit.html +0 -160
  127. package/docs/crawl/core/components/functional/subscriber/subscriber.html +0 -67
  128. package/docs/crawl/core/components/functional/value/value.html +0 -51
  129. package/docs/crawl/core/components/ui/alert/alert.html +0 -211
  130. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -131
  131. package/docs/crawl/core/components/ui/badge/badge.html +0 -197
  132. package/docs/crawl/core/components/ui/button/button.html +0 -150
  133. package/docs/crawl/core/components/ui/captcha/captcha.html +0 -112
  134. package/docs/crawl/core/components/ui/card/card.html +0 -253
  135. package/docs/crawl/core/components/ui/divider/divider.html +0 -144
  136. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
  137. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -266
  138. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -122
  139. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -121
  140. package/docs/crawl/core/components/ui/form/input/input.html +0 -109
  141. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -38
  142. package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
  143. package/docs/crawl/core/components/ui/form/select/select.html +0 -73
  144. package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
  145. package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
  146. package/docs/crawl/core/components/ui/group/group.html +0 -104
  147. package/docs/crawl/core/components/ui/icon/icon.html +0 -222
  148. package/docs/crawl/core/components/ui/image/image.html +0 -298
  149. package/docs/crawl/core/components/ui/link/link.html +0 -100
  150. package/docs/crawl/core/components/ui/loader/loader.html +0 -124
  151. package/docs/crawl/core/components/ui/menu/menu.html +0 -394
  152. package/docs/crawl/core/components/ui/modal/modal.html +0 -342
  153. package/docs/crawl/core/components/ui/pop/pop.html +0 -296
  154. package/docs/crawl/core/components/ui/progress/progress.html +0 -131
  155. package/docs/crawl/core/components/ui/table/table.html +0 -545
  156. package/docs/crawl/core/components/ui/theme/theme.html +0 -131
  157. package/docs/crawl/core/components/ui/toast/toast.html +0 -233
  158. package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -140
  159. package/docs/crawl/docs/_core-concept/dataFlow.html +0 -177
  160. package/docs/crawl/docs/_core-concept/overview.html +0 -66
  161. package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
  162. package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -117
  163. package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
  164. package/docs/crawl/docs/_decorators/bind.html +0 -141
  165. package/docs/crawl/docs/_decorators/get.html +0 -149
  166. package/docs/crawl/docs/_decorators/handle.html +0 -165
  167. package/docs/crawl/docs/_decorators/on-assign.html +0 -355
  168. package/docs/crawl/docs/_decorators/patch.html +0 -78
  169. package/docs/crawl/docs/_decorators/post.html +0 -139
  170. package/docs/crawl/docs/_decorators/publish.html +0 -61
  171. package/docs/crawl/docs/_decorators/put.html +0 -78
  172. package/docs/crawl/docs/_decorators/subscribe.html +0 -109
  173. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
  174. package/docs/crawl/docs/_directives/sub.html +0 -93
  175. package/docs/crawl/docs/_getting-started/ai-agents.html +0 -173
  176. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
  177. package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
  178. package/docs/crawl/docs/_getting-started/create-a-component.html +0 -111
  179. package/docs/crawl/docs/_getting-started/my-first-component.html +0 -189
  180. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
  181. package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
  182. package/docs/crawl/docs/_getting-started/start.html +0 -76
  183. package/docs/crawl/docs/_getting-started/theming.html +0 -333
  184. package/docs/crawl/docs/_misc/api-configuration.html +0 -149
  185. package/docs/crawl/docs/_misc/dataProviderKey.html +0 -135
  186. package/docs/crawl/docs/_misc/docs-mock-api.html +0 -158
  187. package/docs/crawl/docs/_misc/dynamic-path.html +0 -180
  188. package/docs/crawl/docs/_misc/endpoint.html +0 -50
  189. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
  190. package/docs/crawl/docs/_misc/html-integration.html +0 -48
  191. package/docs/crawl/hubs/decorators.html +0 -547
  192. package/docs/crawl/hubs/form-components.html +0 -381
  193. package/docs/crawl/hubs/remote-data.html +0 -452
  194. package/docs/crawl/index.html +0 -102
  195. package/docs/llms-full.txt +0 -7008
  196. package/docs/llms.txt +0 -97
  197. package/docs/sitemap.xml +0 -240
  198. package/docs/src/core/components/functional/date/date.md +0 -290
  199. package/docs/src/core/components/functional/fetch/fetch.md +0 -125
  200. package/docs/src/core/components/functional/if/if.md +0 -9
  201. package/docs/src/core/components/functional/jsonata/jsonata.md +0 -56
  202. package/docs/src/core/components/functional/list/list.md +0 -65
  203. package/docs/src/core/components/functional/mix/mix.md +0 -41
  204. package/docs/src/core/components/functional/queue/queue.md +0 -72
  205. package/docs/src/core/components/functional/router/router.md +0 -94
  206. package/docs/src/core/components/functional/sdui/default-library.json +0 -108
  207. package/docs/src/core/components/functional/sdui/example.json +0 -99
  208. package/docs/src/core/components/functional/sdui/sdui.md +0 -356
  209. package/docs/src/core/components/functional/states/states.md +0 -87
  210. package/docs/src/core/components/functional/submit/submit.md +0 -114
  211. package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
  212. package/docs/src/core/components/functional/value/value.md +0 -35
  213. package/docs/src/core/components/ui/alert/alert.md +0 -196
  214. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -85
  215. package/docs/src/core/components/ui/badge/badge.md +0 -188
  216. package/docs/src/core/components/ui/button/button.md +0 -183
  217. package/docs/src/core/components/ui/captcha/captcha.md +0 -71
  218. package/docs/src/core/components/ui/card/card.md +0 -215
  219. package/docs/src/core/components/ui/divider/divider.md +0 -129
  220. package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -77
  221. package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -205
  222. package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -100
  223. package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -119
  224. package/docs/src/core/components/ui/form/input/input.md +0 -142
  225. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
  226. package/docs/src/core/components/ui/form/radio/radio.md +0 -57
  227. package/docs/src/core/components/ui/form/select/select.md +0 -71
  228. package/docs/src/core/components/ui/form/switch/switch.md +0 -57
  229. package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
  230. package/docs/src/core/components/ui/group/group.md +0 -75
  231. package/docs/src/core/components/ui/icon/icon.md +0 -214
  232. package/docs/src/core/components/ui/icon/icons.json +0 -1
  233. package/docs/src/core/components/ui/image/image.md +0 -233
  234. package/docs/src/core/components/ui/link/link.md +0 -81
  235. package/docs/src/core/components/ui/loader/loader.md +0 -112
  236. package/docs/src/core/components/ui/menu/menu.md +0 -370
  237. package/docs/src/core/components/ui/modal/modal.md +0 -235
  238. package/docs/src/core/components/ui/pop/pop.md +0 -294
  239. package/docs/src/core/components/ui/progress/progress.md +0 -109
  240. package/docs/src/core/components/ui/table/table.md +0 -431
  241. package/docs/src/core/components/ui/theme/theme.md +0 -122
  242. package/docs/src/core/components/ui/toast/toast.md +0 -216
  243. package/docs/src/core/components/ui/tooltip/tooltip.md +0 -124
  244. package/docs/src/docs/_core-concept/dataFlow.md +0 -88
  245. package/docs/src/docs/_core-concept/overview.md +0 -57
  246. package/docs/src/docs/_core-concept/subscriber.md +0 -75
  247. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -128
  248. package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
  249. package/docs/src/docs/_decorators/bind.md +0 -167
  250. package/docs/src/docs/_decorators/get.md +0 -162
  251. package/docs/src/docs/_decorators/handle.md +0 -175
  252. package/docs/src/docs/_decorators/on-assign.md +0 -390
  253. package/docs/src/docs/_decorators/patch.md +0 -70
  254. package/docs/src/docs/_decorators/post.md +0 -146
  255. package/docs/src/docs/_decorators/publish.md +0 -55
  256. package/docs/src/docs/_decorators/put.md +0 -70
  257. package/docs/src/docs/_decorators/subscribe.md +0 -100
  258. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
  259. package/docs/src/docs/_directives/sub.md +0 -91
  260. package/docs/src/docs/_getting-started/ai-agents.md +0 -76
  261. package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
  262. package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
  263. package/docs/src/docs/_getting-started/create-a-component.md +0 -139
  264. package/docs/src/docs/_getting-started/my-first-component.md +0 -236
  265. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
  266. package/docs/src/docs/_getting-started/pubsub.md +0 -37
  267. package/docs/src/docs/_getting-started/start.md +0 -47
  268. package/docs/src/docs/_getting-started/theming.md +0 -253
  269. package/docs/src/docs/_misc/api-configuration.md +0 -81
  270. package/docs/src/docs/_misc/dataProviderKey.md +0 -168
  271. package/docs/src/docs/_misc/docs-mock-api.md +0 -63
  272. package/docs/src/docs/_misc/dynamic-path.md +0 -71
  273. package/docs/src/docs/_misc/endpoint.md +0 -45
  274. package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  275. package/docs/src/docs/_misc/html-integration.md +0 -15
  276. package/docs/src/docs/search/docs-search.json +0 -12242
  277. package/docs/src/tag-list.json +0 -1
  278. package/docs/src/tsconfig-model.json +0 -23
  279. package/docs/src/tsconfig.json +0 -1242
  280. package/src/docs/prism/index.ts +0 -6
  281. package/src/docs/prism/prism.css +0 -158
  282. package/src/docs/prism/prism.js +0 -1022
package/docs/crawl/docs/_getting-started/my-first-component.html DELETED
@@ -1,189 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-component.html" data-doc-id="docs/_getting-started/my-first-component">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>My first component — Concorde</title>
7
- <meta name="description" content="Build a Lit user card with Tailwind and Concorde UI, then connect it to the DataProvider store: declare the data configuration (type, key, scope), and let @subscribe keep the card in sync.">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/my-first-component, my-first-component, My first component, guide, @subscribe, src/docs/tailwind.ts, ${unsafeCSS(tailwindImport)}, DocsUserData, user, docsUserRowKey, &quot;${dataProvider}&quot;, { dataProvider: string | null }">
9
- <meta name="concorde-doc-id" content="docs/_getting-started/my-first-component">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-component.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/my-first-component.md/my-first-component" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde guide — My first component</strong>. Build a Lit user card with Tailwind and Concorde UI, then connect it to the DataProvider store: declare the data configuration (type, key, scope), and let @subscribe keep the card in sync. <span>Doc ID: <code>docs/_getting-started/my-first-component</code>. Keywords: Concorde, supersoniks, docs/_getting-started/my-first-component, my-first-component, My first component, guide, @subscribe, src/docs/tailwind.ts, ${unsafeCSS(tailwindImport)}, DocsUserData, user, docsUserRowKey, &quot;${dataProvider}&quot;, { dataProvider: string | null }. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-component.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-component.html</a>.</span></p>
19
- <h1 id="my-first-component">My first component</h1>
20
- <p>Build a <strong>Lit</strong> user card with Tailwind and Concorde UI, then connect it to the <strong>DataProvider</strong> store: declare the <strong>data configuration</strong> (type, key, scope), and let <strong><code>@subscribe</code></strong> keep the card in sync.</p>
21
- <blockquote>
22
- <p>Legacy approach with the <strong>Subscriber mixin</strong>: <a href="./my-first-subscriber.html#my-first-subscriber">Legacy: My first subscriber</a>.</p>
23
- </blockquote>
24
- <h2 id="1-lit-component--tailwind">1. Lit component + Tailwind</h2>
25
- <p>Export Tailwind once (e.g. <code>src/docs/tailwind.ts</code> in this repo):</p>
26
- <pre><code class="language-typescript">import { css, unsafeCSS } from &quot;lit&quot;;
27
- import tailwindImport from &quot;./css/tailwind.css?inline&quot;;
28
-
29
- export const tailwind = css`${unsafeCSS(tailwindImport)}`;
30
- </code></pre>
31
- <p>User card — plain Lit properties and UI components (no store yet):</p>
32
- <pre><code class="language-typescript">import { html, LitElement } from &quot;lit&quot;;
33
- import { customElement, property } from &quot;lit/decorators.js&quot;;
34
- import { tailwind } from &quot;../tailwind&quot;;
35
-
36
- @customElement(&quot;docs-user&quot;)
37
- export class DocsUser extends LitElement {
38
- static styles = [tailwind];
39
-
40
- @property({ type: String }) first_name = &quot;&quot;;
41
- @property({ type: String }) last_name = &quot;&quot;;
42
- @property({ type: String }) email = &quot;&quot;;
43
- @property({ type: String }) avatar = &quot;&quot;;
44
-
45
- render() {
46
- return html`&amp;lt;div class=&quot;flex items-center gap-3 rounded-md p-2&quot;&amp;gt;
47
- &amp;lt;sonic-image src=${this.avatar} rounded=&quot;md&quot; ratio=&quot;1/1&quot; class=&quot;w-16&quot;&amp;gt;&amp;lt;/sonic-image&amp;gt;
48
- &amp;lt;div&amp;gt;
49
- &amp;lt;div&amp;gt;${this.first_name} &amp;lt;span class=&quot;font-bold&quot;&amp;gt;${this.last_name}&amp;lt;/span&amp;gt;&amp;lt;/div&amp;gt;
50
- &amp;lt;div class=&quot;text-sm text-neutral-400&quot;&amp;gt;${this.email}&amp;lt;/div&amp;gt;
51
- &amp;lt;/div&amp;gt;
52
- &amp;lt;/div&amp;gt;`;
53
- }
54
- }
55
- </code></pre>
56
- <h2 id="2-data-configuration">2. Data configuration</h2>
57
- <p>The card does not hard-code user fields anymore. You declare <strong>what</strong> is stored, <strong>where</strong> it lives, and <strong>which ancestor scope</strong> applies — then <code>@subscribe</code> mirrors that object on the component.</p>
58
- <h3 id="type--shape-of-the-data">Type — shape of the data</h3>
59
- <p><code>DocsUserData</code> documents the fields you expect at this scope (first name, email, avatar, …). TypeScript checks that <code>user</code> matches that shape.</p>
60
- <pre><code class="language-typescript">export type DocsUserData = {
61
- first_name: string;
62
- last_name: string;
63
- email: string;
64
- avatar: string;
65
- };
66
- </code></pre>
67
- <h3 id="key--path-in-the-dataprovider">Key — path in the DataProvider</h3>
68
- <p><code>docsUserRowKey</code> points at the store segment to read. The path <code>&quot;${dataProvider}&quot;</code> is resolved at runtime from a property on the component (see scope below).</p>
69
- <pre><code class="language-typescript">import { DataProviderKey } from &quot;@supersoniks/concorde/core/utils/dataProviderKey&quot;;
70
-
71
- export const docsUserRowKey = new DataProviderKey&amp;lt;
72
- DocsUserData,
73
- { dataProvider: string | null }
74
- &amp;gt;(&quot;${dataProvider}&quot;);
75
- </code></pre>
76
- <p>The second generic (<code>{ dataProvider: string | null }</code>) lists what the host must expose so <code>&quot;${dataProvider}&quot;</code> can be resolved. See <a href="../_misc/dataProviderKey.html#dataProviderKey">DataProviderKey</a> and <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a>.</p>
77
- <h3 id="scope--which-store-segment-applies">Scope — which store segment applies</h3>
78
- <p>A parent sets <code>dataProvider=${docsUserScopeAKey.path}</code> (or a list row sets <code>…/list-item/0</code>). <a href="../_decorators/ancestor-attribute.html#ancestor-attribute"><code>@ancestorAttribute</code></a> copies that attribute onto <code>this.dataProvider</code>, so the key resolves to the correct branch.</p>
79
- <pre><code class="language-typescript">@ancestorAttribute(&quot;dataProvider&quot;)
80
- dataProvider: string | null = null;
81
- </code></pre>
82
- <h3 id="subscribe--keep-the-card-in-sync">Subscribe — keep the card in sync</h3>
83
- <p><a href="../_decorators/subscribe.html#subscribe"><code>@subscribe</code></a> watches <code>docsUserRowKey</code> and updates <code>user</code> when the store changes. Use <code>@state()</code> so Lit re-renders. The template reads <code>this.user</code> like any other property.</p>
84
- <pre><code class="language-typescript">import { html, LitElement, nothing } from &quot;lit&quot;;
85
- import { customElement, state } from &quot;lit/decorators.js&quot;;
86
- import {
87
- ancestorAttribute,
88
- subscribe,
89
- } from &quot;@supersoniks/concorde/core/decorators/Subscriber&quot;;
90
- import { docsUserRowKey, type DocsUserData } from &quot;./users&quot;;
91
- import { tailwind } from &quot;../tailwind&quot;;
92
-
93
- @customElement(&quot;docs-user&quot;)
94
- export class DocsUser extends LitElement {
95
- static styles = [tailwind];
96
-
97
- @ancestorAttribute(&quot;dataProvider&quot;)
98
- dataProvider: string | null = null;
99
-
100
- @subscribe(docsUserRowKey)
101
- @state()
102
- user: DocsUserData | null = null;
103
-
104
- render() {
105
- const u = this.user;
106
- if (!u) return nothing;
107
- return html`&amp;lt;div class=&quot;flex items-center gap-3 rounded-md p-2&quot;&amp;gt;
108
- &amp;lt;sonic-image src=${u.avatar} rounded=&quot;md&quot; ratio=&quot;1/1&quot; class=&quot;w-16&quot;&amp;gt;&amp;lt;/sonic-image&amp;gt;
109
- &amp;lt;div&amp;gt;
110
- &amp;lt;div&amp;gt;${u.first_name} &amp;lt;span class=&quot;font-bold&quot;&amp;gt;${u.last_name}&amp;lt;/span&amp;gt;&amp;lt;/div&amp;gt;
111
- &amp;lt;div class=&quot;text-sm text-neutral-400&quot;&amp;gt;${u.email}&amp;lt;/div&amp;gt;
112
- &amp;lt;/div&amp;gt;
113
- &amp;lt;/div&amp;gt;`;
114
- }
115
- }
116
- </code></pre>
117
- <p>Live code: <code>src/docs/example/users.ts</code>. In this repo, imports use <strong><code>core/…</code> paths</strong> (short <code>@supersoniks/concorde/…</code> exports apply in <strong>consumer apps</strong> only).</p>
118
- <h3 id="two-scopes-one-component">Two scopes, one component</h3>
119
- <p>The same <code>docs-user</code> is mounted twice. Each copy inherits a <strong>different</strong> nearest <code>dataProvider</code> — that is the row/list <strong>scope</strong>:</p>
120
- <pre><code>&lt;docs-demo-sources for=&quot;docs-user-two-scopes&quot;&gt;&lt;/docs-demo-sources&gt;
121
- &lt;docs-user-two-scopes&gt;&lt;/docs-user-two-scopes&gt;
122
- </code></pre>
123
- <p>Markup (two isolated stores; keys from <code>docs-provider-keys.ts</code>):</p>
124
- <pre><code class="language-markup">&amp;lt;div class=&quot;grid md:grid-cols-2 gap-6&quot;&amp;gt;
125
- &amp;lt;div dataProvider=&quot;${docsUserScopeAKey.path}&quot;&amp;gt;
126
- &amp;lt;docs-user&amp;gt;&amp;lt;/docs-user&amp;gt;
127
- &amp;lt;/div&amp;gt;
128
- &amp;lt;div dataProvider=&quot;${docsUserScopeBKey.path}&quot;&amp;gt;
129
- &amp;lt;docs-user&amp;gt;&amp;lt;/docs-user&amp;gt;
130
- &amp;lt;/div&amp;gt;
131
- &amp;lt;/div&amp;gt;
132
- </code></pre>
133
- <p>Seeded in <code>docs-provider-keys.ts</code> (<code>set(docsUserScopeAKey, …)</code>): <strong>Paul</strong> / <strong>Marie</strong>. Without <code>@ancestorAttribute</code>, both cards would not know which store to read.</p>
134
- <h2 id="3-fetch-users--sonic-list-with-items">3. Fetch users — <code>sonic-list</code> with <code>.items</code></h2>
135
- <p>Use a Lit parent and the <strong><code>items</code></strong> renderer (not HTML <code>&lt;template&gt;</code> children). The callback receives each row object from fetch — render fields directly (<code>${item.first_name}</code>, …), like porting a template that used <code>data-bind</code> / <code>&lt;sonic-value&gt;</code>.</p>
136
- <pre><code>&lt;docs-lit-demo for=&quot;docs-users-list&quot;&gt;&lt;/docs-lit-demo&gt;
137
- </code></pre>
138
- <p>Wrapper (<code>docs-users-list.ts</code>):</p>
139
- <pre><code class="language-typescript">import { html, LitElement } from &quot;lit&quot;;
140
- import { customElement } from &quot;lit/decorators.js&quot;;
141
- import &quot;../../core/components/functional/list/list&quot;;
142
- import &quot;./users&quot;;
143
-
144
- @customElement(&quot;docs-users-list&quot;)
145
- export class DocsUsersList extends LitElement {
146
- private items = ({ first_name, last_name, email, avatar }) =&gt; html`
147
- &amp;lt;div class=&quot;flex gap-3&quot;&amp;gt;
148
- &amp;lt;sonic-image src=${avatar} ...&amp;gt;&amp;lt;/sonic-image&amp;gt;
149
- &amp;lt;div&amp;gt;${first_name} &amp;lt;b&amp;gt;${last_name}&amp;lt;/b&amp;gt;&amp;lt;/div&amp;gt;
150
- &amp;lt;div class=&quot;text-sm text-neutral-400&quot;&amp;gt;${email}&amp;lt;/div&amp;gt;
151
- &amp;lt;/div&amp;gt;
152
- `;
153
-
154
- render() {
155
- return html`
156
- &amp;lt;sonic-list fetch dataProvider=${usersListEndpoint.path} key=&quot;data&quot; .items=${this.items}&amp;gt;&amp;lt;/sonic-list&amp;gt;
157
- `;
158
- }
159
- }
160
- </code></pre>
161
- <p>See <a href="../_misc/docs-mock-api.html#docs-mock-api">Local API demos</a> for <code>serviceURL=&quot;/docs-mock-api&quot;</code>.</p>
162
- <h2 id="4-form-preview-with-formdataprovider">4. Form preview with <code>formDataProvider</code></h2>
163
- <p>Edit fields in a form; the card follows the same <code>docsUserRowKey</code> when the preview host sets <code>dataProvider=&quot;userPreview&quot;</code>.</p>
164
- <pre><code>&lt;div class=&quot;grid grid-cols-1 gap-4 max-w-xl&quot;&gt;
165
- &lt;form formDataProvider=&quot;${docsUserPreviewKey.path}&quot; class=&quot;grid grid-cols-2 gap-3&quot;&gt;
166
- &lt;sonic-input label=&quot;First name&quot; name=&quot;first_name&quot; value=&quot;Paul&quot; size=&quot;sm&quot;&gt;&lt;/sonic-input&gt;
167
- &lt;sonic-input label=&quot;Last name&quot; name=&quot;last_name&quot; value=&quot;Metrand&quot; size=&quot;sm&quot;&gt;&lt;/sonic-input&gt;
168
- &lt;sonic-input class=&quot;col-span-2&quot; label=&quot;Email&quot; name=&quot;email&quot; value=&quot;paul@example.com&quot; size=&quot;sm&quot;&gt;&lt;/sonic-input&gt;
169
- &lt;sonic-input class=&quot;col-span-2&quot; label=&quot;Avatar URL&quot; name=&quot;avatar&quot; value=&quot;https://i.pravatar.cc/150?u=paul&quot; size=&quot;sm&quot;&gt;&lt;/sonic-input&gt;
170
- &lt;/form&gt;
171
- &lt;sonic-divider align=&quot;left&quot;&gt;Preview&lt;/sonic-divider&gt;
172
- &lt;div dataProvider=&quot;${docsUserPreviewKey.path}&quot;&gt;
173
- &lt;docs-user&gt;&lt;/docs-user&gt;
174
- &lt;/div&gt;
175
- &lt;/div&gt;
176
- </code></pre>
177
- <p>Use <code>formDataProvider</code> + <code>name</code> on inputs — no manual <code>@input</code> handlers (<a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a>).</p>
178
- <h2 id="next-steps">Next steps</h2>
179
- <ul>
180
- <li><a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a> — full map</li>
181
- <li><a href="../_misc/dataProviderKey.html#dataProviderKey">DataProviderKey</a> — typed paths and host constraints</li>
182
- <li><a href="../_decorators/subscribe.html#subscribe">@subscribe</a> / <a href="../_directives/sub.html#sub">sub()</a> — read-only in templates</li>
183
- <li><a href="../../core/components/functional/list/list.html#list">List</a> — <code>.items</code>, <code>.noItems</code>, <code>.skeleton</code></li>
184
- </ul>
185
-
186
- </article>
187
- </main>
188
- </body>
189
- </html>
package/docs/crawl/docs/_getting-started/my-first-subscriber.html DELETED
@@ -1,110 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-subscriber.html" data-doc-id="docs/_getting-started/my-first-subscriber">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Legacy: My first subscriber component — Concorde</title>
7
- <meta name="description" content="&gt; New projects: use My first component (@ancestorAttribute, @subscribe + DataProviderKey, .items on lists) and Data flow. This page documents the Subscriber mixin used by older apps and core component">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/my-first-subscriber, my-first-subscriber, Legacy: My first subscriber component, guide, @ancestorAttribute, @subscribe, DataProviderKey, .items, ${unsafeCSS(tailwindImport)}">
9
- <meta name="concorde-doc-id" content="docs/_getting-started/my-first-subscriber">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-subscriber.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/my-first-subscriber.md/my-first-subscriber" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Legacy: My first subscriber component</strong>. &gt; New projects: use My first component (@ancestorAttribute, @subscribe + DataProviderKey, .items on lists) and Data flow. This page documents the Subscriber mixin used by older apps and core component <span>Doc ID: <code>docs/_getting-started/my-first-subscriber</code>. Keywords: Concorde, supersoniks, docs/_getting-started/my-first-subscriber, my-first-subscriber, Legacy: My first subscriber component, guide, @ancestorAttribute, @subscribe, DataProviderKey, .items, ${unsafeCSS(tailwindImport)}. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-subscriber.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-subscriber.html</a>.</span></p>
19
- <h1 id="legacy-my-first-subscriber-component">Legacy: My first subscriber component</h1>
20
- <blockquote>
21
- <p><strong>New projects:</strong> use <a href="./my-first-component.html#my-first-component">My first component</a> (<code>@ancestorAttribute</code>, <code>@subscribe</code> + <code>DataProviderKey</code>, <code>.items</code> on lists) and <a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a>. This page documents the <strong>Subscriber mixin</strong> used by older apps and core components.</p>
22
- </blockquote>
23
- <p>Learn how to build a component with the <strong>Subscriber</strong> mixin, styled with Tailwind, filled from a DataProvider via automatic property mapping.</p>
24
- <h2 id="create-a-classic-lit-component">Create a classic lit component</h2>
25
- <pre><code class="language-javascript">import { html, LitElement, nothing } from &quot;lit&quot;;
26
- import { customElement, property } from &quot;lit/decorators.js&quot;;
27
- @customElement(&quot;docs-user&quot;)
28
- export class user extends LitElement {
29
- @property({ type: String }) first_name = &quot;&quot;;
30
- @property({ type: String }) last_name = &quot;&quot;;
31
- @property({ type: String }) avatar = &quot;&quot;;
32
- @property({ type: String }) email = &quot;&quot;;
33
- render() {
34
- return html`
35
- &amp;lt;img src=&quot;${this.avatar}&quot; /&amp;gt; &amp;lt;br&amp;gt;
36
- ${this.first_name} ${this.last_name} &amp;lt;br&amp;gt;
37
- ${this.email}`;
38
- }
39
- }
40
- </code></pre>
41
- <h3 id="style-with-tailwind-and-ui-components">Style with tailwind and ui components</h3>
42
- <pre><code class="language-javascript">import { css, unsafeCSS } from &quot;lit&quot;;
43
- import tailwindImport from &quot;./css/tailwind.css?inline&quot;;
44
- export const tailwind = css`${unsafeCSS(tailwindImport)}`;
45
- </code></pre>
46
- <pre><code class="language-javascript">import { html, LitElement } from &quot;lit&quot;;
47
- import { customElement, property } from &quot;lit/decorators.js&quot;;
48
- import { tailwind } from &quot;../tailwind&quot;;
49
- import &#39;@supersoniks/concode/ui/image&#39;
50
- import &#39;@supersoniks/concode/ui/button&#39;
51
- import &#39;@supersoniks/concode/ui/icon&#39;
52
- @customElement(&quot;docs-user&quot;)
53
- export class user extends LitElement {
54
- static styles = [tailwind];
55
- @property({ type: String }) first_name = &quot;&quot;;
56
- @property({ type: String }) last_name = &quot;&quot;;
57
- @property({ type: String }) avatar = &quot;&quot;;
58
- @property({ type: String }) email = &quot;&quot;;
59
- render() {
60
- return html`&amp;lt;div class=&quot;flex items-center gap-3 p-2&quot;&amp;gt;
61
- &amp;lt;sonic-image src=${this.avatar} rounded=&quot;md&quot; ratio=&quot;1/1&quot; class=&quot;w-16&quot;&amp;gt;&amp;lt;/sonic-image&amp;gt;
62
- &amp;lt;div&amp;gt;${this.first_name} &amp;lt;span class=&quot;font-bold&quot;&amp;gt;${this.last_name}&amp;lt;/span&amp;gt;&amp;lt;/div&amp;gt;
63
- &amp;lt;div class=&quot;text-sm text-neutral-400&quot;&amp;gt;${this.email}&amp;lt;/div&amp;gt;
64
- &amp;lt;/div&amp;gt;`;
65
- }
66
- }
67
- </code></pre>
68
- <h2 id="add-subscriber-mixin">Add Subscriber mixin</h2>
69
- <pre><code class="language-javascript">import Subscriber from &quot;@supersoniks/concorde/core/mixins/Subscriber&quot;;
70
- @customElement(&quot;docs-user&quot;)
71
- export class user extends Subscriber(LitElement) {
72
- // properties auto-filled from DataProvider when names match
73
- }
74
- </code></pre>
75
- <p>See <a href="../_core-concept/subscriber.html#subscriber">Legacy: Subscriber mixin</a>.</p>
76
- <h2 id="autofill-from-a-dataprovider">Autofill from a dataProvider</h2>
77
- <pre><code>&lt;docs-demo-sources for=&quot;list-users-fetch&quot;&gt;&lt;/docs-demo-sources&gt;
78
- &lt;div serviceURL=&quot;/docs-mock-api&quot;&gt;
79
- &lt;sonic-fetch
80
- serviceURL=&quot;/docs-mock-api&quot;
81
- dataProvider=&quot;api/users/3&quot;
82
- key=&quot;data&quot;&gt;
83
- &lt;docs-user&gt;&lt;/docs-user&gt;
84
- &lt;/sonic-fetch&gt;
85
- &lt;/div&gt;
86
- </code></pre>
87
- <pre><code>&lt;sonic-fetch
88
- serviceURL=&quot;/docs-mock-api&quot;
89
- dataProvider=&quot;api/users/2&quot;
90
- key=&quot;data&quot;&gt;&lt;/sonic-fetch&gt;
91
- &lt;docs-user dataProvider=&quot;api/users/2&quot; &gt;&lt;/docs-user&gt;
92
- </code></pre>
93
- <pre><code>&lt;div class=&quot;grid grid-cols-1 gap-4&quot;&gt;
94
- &lt;form formDataProvider=&quot;userPreview&quot; class=&quot;grid grid-cols-4 gap-3&quot; &gt;
95
- &lt;sonic-input label=&quot;First name&quot; type=&quot;text&quot; name=&quot;first_name&quot; value=&quot;Paul&quot; size=&quot;sm&quot;&gt;&lt;/sonic-input&gt;
96
- &lt;sonic-input label=&quot;Last name&quot; type=&quot;text&quot; name=&quot;last_name&quot; value=&quot;Metrand&quot; size=&quot;sm&quot;&gt;&lt;/sonic-input&gt;
97
- &lt;sonic-input class=&quot;col-span-2&quot; label=&quot;email&quot; type=&quot;text&quot; name=&quot;email&quot; value=&quot;paul@example.com&quot; size=&quot;sm&quot;&gt;&lt;/sonic-input&gt;
98
- &lt;sonic-input label=&quot;Image url&quot; type=&quot;text&quot; name=&quot;avatar&quot; value=&quot;https://i.pravatar.cc/150?u=paul&quot; size=&quot;sm&quot;&gt;&lt;/sonic-input&gt;
99
- &lt;/form&gt;
100
- &lt;sonic-divider align=&quot;left&quot;&gt;Preview before submit&lt;/sonic-divider&gt;
101
- &lt;div dataProvider=&quot;userPreview&quot;&gt;
102
- &lt;docs-user&gt;&lt;/docs-user&gt;
103
- &lt;/div&gt;
104
- &lt;/div&gt;
105
- </code></pre>
106
-
107
- </article>
108
- </main>
109
- </body>
110
- </html>
package/docs/crawl/docs/_getting-started/pubsub.html DELETED
@@ -1,62 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/pubsub.html" data-doc-id="docs/_getting-started/pubsub">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Legacy: Sharing data — Concorde</title>
7
- <meta name="description" content="&gt; New apps: Data flow (get / set / DataProviderKey, decorators). This page documents the historical Publisher proxy API (PublisherManager, publisher.set, onAssign, …).">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/pubsub, pubsub, Legacy: Sharing data, guide, get, set, DataProviderKey, PublisherManager, publisher.set, onAssign, {foo:{hello:[&quot;world&quot;]}, bar:&quot;baz&quot;}, myPublisher.foo.hello, null">
9
- <meta name="concorde-doc-id" content="docs/_getting-started/pubsub">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/pubsub.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/pubsub.md/pubsub" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Legacy: Sharing data</strong>. &gt; New apps: Data flow (get / set / DataProviderKey, decorators). This page documents the historical Publisher proxy API (PublisherManager, publisher.set, onAssign, …). <span>Doc ID: <code>docs/_getting-started/pubsub</code>. Keywords: Concorde, supersoniks, docs/_getting-started/pubsub, pubsub, Legacy: Sharing data, guide, get, set, DataProviderKey, PublisherManager, publisher.set, onAssign, {foo:{hello:[&quot;world&quot;]}, bar:&quot;baz&quot;}, myPublisher.foo.hello, null. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/pubsub.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/pubsub.html</a>.</span></p>
19
- <h1 id="legacy-sharing-data">Legacy: Sharing data</h1>
20
- <blockquote>
21
- <p><strong>New apps:</strong> <a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a> (<code>get</code> / <code>set</code> / <code>DataProviderKey</code>, decorators). This page documents the historical <strong>Publisher</strong> proxy API (<code>PublisherManager</code>, <code>publisher.set</code>, <code>onAssign</code>, …).</p>
22
- </blockquote>
23
- <p>This section describes how data is shared between graphical and non-graphical components.</p>
24
- <p>Graphical components should not reference each other directly — they stay decoupled via a <strong>publish/subscribe</strong> store.</p>
25
- <h2 id="the-publisher">The Publisher</h2>
26
- <h3 id="principle">Principle</h3>
27
- <ul>
28
- <li><p>The <strong>publisher</strong> is a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy">JavaScript proxy</a> that holds data.<br>
29
- Example: <code>{foo:{hello:[&quot;world&quot;]}, bar:&quot;baz&quot;}</code></p>
30
- </li>
31
- <li><p>Accessing a property (<code>myPublisher.foo.hello</code>) returns another <strong>publisher</strong> for that segment.</p>
32
- </li>
33
- <li><p>Missing properties create a publisher with internal data <code>null</code>, filled later.</p>
34
- </li>
35
- <li><p><strong>Subscribers</strong> listen via <code>onAssign</code>, <code>onInternalMutation</code>, template filling on the <strong>Subscriber mixin</strong>, etc.</p>
36
- </li>
37
- <li><p>Updates use <code>publisher.set(...)</code> or nested assignment; changes propagate to subscribers.</p>
38
- </li>
39
- </ul>
40
- <p>❇️ Order of creation vs subscription theoretically does not matter.</p>
41
- <h3 id="methods">Methods</h3>
42
- <ul>
43
- <li><strong>set</strong> — replace internal value</li>
44
- </ul>
45
- <pre><code class="language-javascript">publisher.set({foo:{hello:[&quot;world&quot;]}, bar:&quot;baz&quot;});
46
- </code></pre>
47
- <ul>
48
- <li><strong>get</strong> — read internal value</li>
49
- </ul>
50
- <pre><code class="language-javascript">publisher.get()
51
- </code></pre>
52
- <ul>
53
- <li><strong>onAssign / offAssign</strong> — react to <code>set</code></li>
54
- </ul>
55
- <pre><code class="language-javascript">publisher.a.b.onAssign(console.log);
56
- </code></pre>
57
- <p>Modern equivalent: <code>get</code> / <code>set</code> / <code>@handle</code> — see <a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a>.</p>
58
-
59
- </article>
60
- </main>
61
- </body>
62
- </html>
package/docs/crawl/docs/_getting-started/start.html DELETED
@@ -1,76 +0,0 @@
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 the smallest set of CSS variables needed to define a theme.</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>