@supersoniks/concorde 5.0.0 → 5.0.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 (287) hide show
  1. package/.gitlab-ci.yml +0 -13
  2. package/build-infos.json +1 -1
  3. package/concorde-core.bundle.js +257 -273
  4. package/concorde-core.es.js +4127 -4039
  5. package/dist/concorde-core.bundle.js +257 -273
  6. package/dist/concorde-core.es.js +4127 -4039
  7. package/gitlab/job_tests.sh +25 -12
  8. package/index.html +1 -1
  9. package/package.json +3 -1
  10. package/scripts/post-build-docs.js +0 -0
  11. package/scripts/post-build.mjs +0 -0
  12. package/src/core/components/functional/fetch/fetch.md +0 -0
  13. package/src/core/components/functional/if/if.md +0 -0
  14. package/src/core/components/functional/list/list.demo.ts +0 -0
  15. package/src/core/components/functional/list/list.md +0 -0
  16. package/src/core/components/functional/list/list.ts +0 -0
  17. package/src/core/components/functional/router/router.md +0 -0
  18. package/src/core/components/functional/router/router.ts +0 -0
  19. package/src/core/components/functional/sdui/sdui.md +0 -0
  20. package/src/core/components/functional/states/states.md +0 -0
  21. package/src/core/components/functional/submit/submit.md +0 -0
  22. package/src/core/components/ui/_css/size.ts +0 -0
  23. package/src/core/components/ui/alert/alert.ts +0 -0
  24. package/src/core/components/ui/button/button.md +0 -0
  25. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  26. package/src/core/components/ui/captcha/captcha.md +0 -0
  27. package/src/core/components/ui/card/card.md +0 -0
  28. package/src/core/components/ui/divider/divider.ts +0 -0
  29. package/src/core/components/ui/form/input/input.md +0 -0
  30. package/src/core/components/ui/form/radio/radio.md +0 -0
  31. package/src/core/components/ui/form/select/select.md +0 -0
  32. package/src/core/components/ui/form/switch/switch.md +0 -0
  33. package/src/core/components/ui/loader/loader.md +0 -0
  34. package/src/core/components/ui/menu/menu.md +0 -0
  35. package/src/core/components/ui/modal/modal-close.ts +0 -0
  36. package/src/core/components/ui/modal/modal.md +0 -0
  37. package/src/core/components/ui/pop/pop.md +103 -1
  38. package/src/core/components/ui/pop/pop.ts +70 -115
  39. package/src/core/components/ui/table/table-caption.ts +0 -0
  40. package/src/core/components/ui/table/table.md +0 -0
  41. package/src/core/components/ui/theme/theme.ts +1 -1
  42. package/src/core/components/ui/tooltip/tooltip.ts +178 -154
  43. package/src/core/utils/positioning.spec.ts +180 -0
  44. package/src/core/utils/positioning.ts +164 -0
  45. package/src/core/utils/route.ts +0 -0
  46. package/src/directives.ts +2 -3
  47. package/src/docs/_core-concept/subscriber.md +0 -0
  48. package/src/docs/_getting-started/concorde-outside.md +0 -0
  49. package/src/docs/_getting-started/my-first-subscriber.md +0 -0
  50. package/src/docs/_getting-started/pubsub.md +0 -0
  51. package/src/docs/_getting-started/start.md +0 -0
  52. package/src/docs/example/users.ts +0 -0
  53. package/src/docs/search/docs-search.json +90 -0
  54. package/src/docs/search/page.ts +0 -0
  55. package/src/docs/tailwind/css/tailwind.css +7 -6
  56. package/src/tsconfig.json +387 -381
  57. package/src/tsconfig.tsbuildinfo +1 -1
  58. package/vitest.setup.ts +49 -13
  59. package/.github/workflows/ci.yml +0 -21
  60. package/.github-export-ignore +0 -30
  61. package/CONTRIBUTING.md +0 -59
  62. package/DEV.md +0 -54
  63. package/LICENSE +0 -21
  64. package/OPEN_SOURCE_CHECKPOINT.md +0 -133
  65. package/concorde-3d.bundle.js +0 -3960
  66. package/concorde-3d.es.js +0 -33433
  67. package/concorde-hugging-face-infer.bundle.js +0 -32
  68. package/concorde-hugging-face-infer.es.js +0 -2952
  69. package/concorde-shader.bundle.js +0 -116
  70. package/concorde-shader.es.js +0 -8353
  71. package/concorde-webgpu.bundle.js +0 -307
  72. package/concorde-webgpu.es.js +0 -8627
  73. package/docs/altcha-widget.js +0 -2662
  74. package/docs/assets/index-BZiZXMU-.css +0 -1
  75. package/docs/assets/index-FmK4JaIM.js +0 -11992
  76. package/docs/crawl/core/components/functional/date/date.html +0 -190
  77. package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
  78. package/docs/crawl/core/components/functional/if/if.html +0 -27
  79. package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
  80. package/docs/crawl/core/components/functional/list/list.html +0 -70
  81. package/docs/crawl/core/components/functional/mix/mix.html +0 -45
  82. package/docs/crawl/core/components/functional/queue/queue.html +0 -96
  83. package/docs/crawl/core/components/functional/router/router.html +0 -106
  84. package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
  85. package/docs/crawl/core/components/functional/states/states.html +0 -66
  86. package/docs/crawl/core/components/functional/submit/submit.html +0 -160
  87. package/docs/crawl/core/components/functional/subscriber/subscriber.html +0 -67
  88. package/docs/crawl/core/components/functional/value/value.html +0 -51
  89. package/docs/crawl/core/components/ui/alert/alert.html +0 -110
  90. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -23
  91. package/docs/crawl/core/components/ui/badge/badge.html +0 -119
  92. package/docs/crawl/core/components/ui/button/button.html +0 -149
  93. package/docs/crawl/core/components/ui/captcha/captcha.html +0 -30
  94. package/docs/crawl/core/components/ui/card/card.html +0 -99
  95. package/docs/crawl/core/components/ui/divider/divider.html +0 -58
  96. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
  97. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -135
  98. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -79
  99. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -62
  100. package/docs/crawl/core/components/ui/form/input/input.html +0 -109
  101. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -106
  102. package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
  103. package/docs/crawl/core/components/ui/form/select/select.html +0 -73
  104. package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
  105. package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
  106. package/docs/crawl/core/components/ui/group/group.html +0 -82
  107. package/docs/crawl/core/components/ui/icon/icon.html +0 -133
  108. package/docs/crawl/core/components/ui/image/image.html +0 -110
  109. package/docs/crawl/core/components/ui/link/link.html +0 -42
  110. package/docs/crawl/core/components/ui/loader/loader.html +0 -50
  111. package/docs/crawl/core/components/ui/menu/menu.html +0 -322
  112. package/docs/crawl/core/components/ui/modal/modal.html +0 -117
  113. package/docs/crawl/core/components/ui/pop/pop.html +0 -102
  114. package/docs/crawl/core/components/ui/progress/progress.html +0 -58
  115. package/docs/crawl/core/components/ui/table/table.html +0 -413
  116. package/docs/crawl/core/components/ui/toast/toast.html +0 -122
  117. package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -79
  118. package/docs/crawl/docs/_core-concept/dataFlow.html +0 -177
  119. package/docs/crawl/docs/_core-concept/overview.html +0 -66
  120. package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
  121. package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -116
  122. package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
  123. package/docs/crawl/docs/_decorators/bind.html +0 -141
  124. package/docs/crawl/docs/_decorators/get.html +0 -149
  125. package/docs/crawl/docs/_decorators/handle.html +0 -165
  126. package/docs/crawl/docs/_decorators/on-assign.html +0 -355
  127. package/docs/crawl/docs/_decorators/patch.html +0 -78
  128. package/docs/crawl/docs/_decorators/post.html +0 -139
  129. package/docs/crawl/docs/_decorators/publish.html +0 -61
  130. package/docs/crawl/docs/_decorators/put.html +0 -78
  131. package/docs/crawl/docs/_decorators/subscribe.html +0 -109
  132. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
  133. package/docs/crawl/docs/_directives/sub.html +0 -93
  134. package/docs/crawl/docs/_getting-started/ai-agents.html +0 -173
  135. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
  136. package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
  137. package/docs/crawl/docs/_getting-started/create-a-component.html +0 -111
  138. package/docs/crawl/docs/_getting-started/my-first-component.html +0 -189
  139. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
  140. package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
  141. package/docs/crawl/docs/_getting-started/start.html +0 -76
  142. package/docs/crawl/docs/_getting-started/theming.html +0 -85
  143. package/docs/crawl/docs/_misc/api-configuration.html +0 -149
  144. package/docs/crawl/docs/_misc/dataProviderKey.html +0 -135
  145. package/docs/crawl/docs/_misc/docs-mock-api.html +0 -158
  146. package/docs/crawl/docs/_misc/dynamic-path.html +0 -180
  147. package/docs/crawl/docs/_misc/endpoint.html +0 -50
  148. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
  149. package/docs/crawl/docs/_misc/html-integration.html +0 -48
  150. package/docs/crawl/hubs/decorators.html +0 -547
  151. package/docs/crawl/hubs/form-components.html +0 -357
  152. package/docs/crawl/hubs/remote-data.html +0 -452
  153. package/docs/crawl/index.html +0 -101
  154. package/docs/css/docs.css +0 -0
  155. package/docs/docs-mock-api-sw.js +0 -720
  156. package/docs/docs-mock-api-sw.js.map +0 -7
  157. package/docs/fonts/ClashGrotesk-Bold.eot +0 -0
  158. package/docs/fonts/ClashGrotesk-Bold.ttf +0 -0
  159. package/docs/fonts/ClashGrotesk-Bold.woff +0 -0
  160. package/docs/fonts/ClashGrotesk-Bold.woff2 +0 -0
  161. package/docs/fonts/ClashGrotesk-Extralight.eot +0 -0
  162. package/docs/fonts/ClashGrotesk-Extralight.ttf +0 -0
  163. package/docs/fonts/ClashGrotesk-Extralight.woff +0 -0
  164. package/docs/fonts/ClashGrotesk-Extralight.woff2 +0 -0
  165. package/docs/fonts/ClashGrotesk-Light.eot +0 -0
  166. package/docs/fonts/ClashGrotesk-Light.ttf +0 -0
  167. package/docs/fonts/ClashGrotesk-Light.woff +0 -0
  168. package/docs/fonts/ClashGrotesk-Light.woff2 +0 -0
  169. package/docs/fonts/ClashGrotesk-Medium.eot +0 -0
  170. package/docs/fonts/ClashGrotesk-Medium.ttf +0 -0
  171. package/docs/fonts/ClashGrotesk-Medium.woff +0 -0
  172. package/docs/fonts/ClashGrotesk-Medium.woff2 +0 -0
  173. package/docs/fonts/ClashGrotesk-Regular.eot +0 -0
  174. package/docs/fonts/ClashGrotesk-Regular.ttf +0 -0
  175. package/docs/fonts/ClashGrotesk-Regular.woff +0 -0
  176. package/docs/fonts/ClashGrotesk-Regular.woff2 +0 -0
  177. package/docs/fonts/ClashGrotesk-Semibold.eot +0 -0
  178. package/docs/fonts/ClashGrotesk-Semibold.ttf +0 -0
  179. package/docs/fonts/ClashGrotesk-Semibold.woff +0 -0
  180. package/docs/fonts/ClashGrotesk-Semibold.woff2 +0 -0
  181. package/docs/fonts/ClashGrotesk-Variable.eot +0 -0
  182. package/docs/fonts/ClashGrotesk-Variable.ttf +0 -0
  183. package/docs/fonts/ClashGrotesk-Variable.woff +0 -0
  184. package/docs/fonts/ClashGrotesk-Variable.woff2 +0 -0
  185. package/docs/img/concorde-icon.svg +0 -5
  186. package/docs/img/concorde-logo.svg +0 -1
  187. package/docs/img/concorde.png +0 -0
  188. package/docs/img/concorde_def.png +0 -0
  189. package/docs/img/concorde_seuil.png.webp +0 -0
  190. package/docs/img/concorde_seuil_invert.png +0 -0
  191. package/docs/img/paul_metrand.jpg +0 -0
  192. package/docs/img/paul_metrand_xs.jpg +0 -0
  193. package/docs/index.html +0 -93
  194. package/docs/llms-full.txt +0 -5787
  195. package/docs/llms.txt +0 -104
  196. package/docs/robots.txt +0 -16
  197. package/docs/sitemap.xml +0 -237
  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 -121
  214. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -0
  215. package/docs/src/core/components/ui/badge/badge.md +0 -127
  216. package/docs/src/core/components/ui/button/button.md +0 -182
  217. package/docs/src/core/components/ui/captcha/captcha.md +0 -12
  218. package/docs/src/core/components/ui/card/card.md +0 -97
  219. package/docs/src/core/components/ui/divider/divider.md +0 -35
  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 -129
  222. package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -77
  223. package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -44
  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 -133
  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 -125
  232. package/docs/src/core/components/ui/icon/icons.json +0 -1
  233. package/docs/src/core/components/ui/image/image.md +0 -107
  234. package/docs/src/core/components/ui/link/link.md +0 -43
  235. package/docs/src/core/components/ui/loader/loader.md +0 -55
  236. package/docs/src/core/components/ui/menu/menu.md +0 -329
  237. package/docs/src/core/components/ui/modal/modal.md +0 -119
  238. package/docs/src/core/components/ui/pop/pop.md +0 -96
  239. package/docs/src/core/components/ui/progress/progress.md +0 -63
  240. package/docs/src/core/components/ui/table/table.md +0 -455
  241. package/docs/src/core/components/ui/toast/toast.md +0 -166
  242. package/docs/src/core/components/ui/tooltip/tooltip.md +0 -82
  243. package/docs/src/docs/_core-concept/dataFlow.md +0 -88
  244. package/docs/src/docs/_core-concept/overview.md +0 -57
  245. package/docs/src/docs/_core-concept/subscriber.md +0 -75
  246. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -127
  247. package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
  248. package/docs/src/docs/_decorators/bind.md +0 -167
  249. package/docs/src/docs/_decorators/get.md +0 -162
  250. package/docs/src/docs/_decorators/handle.md +0 -175
  251. package/docs/src/docs/_decorators/on-assign.md +0 -390
  252. package/docs/src/docs/_decorators/patch.md +0 -70
  253. package/docs/src/docs/_decorators/post.md +0 -146
  254. package/docs/src/docs/_decorators/publish.md +0 -55
  255. package/docs/src/docs/_decorators/put.md +0 -70
  256. package/docs/src/docs/_decorators/subscribe.md +0 -100
  257. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
  258. package/docs/src/docs/_directives/sub.md +0 -91
  259. package/docs/src/docs/_getting-started/ai-agents.md +0 -76
  260. package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
  261. package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
  262. package/docs/src/docs/_getting-started/create-a-component.md +0 -139
  263. package/docs/src/docs/_getting-started/my-first-component.md +0 -236
  264. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
  265. package/docs/src/docs/_getting-started/pubsub.md +0 -37
  266. package/docs/src/docs/_getting-started/start.md +0 -47
  267. package/docs/src/docs/_getting-started/theming.md +0 -91
  268. package/docs/src/docs/_misc/api-configuration.md +0 -81
  269. package/docs/src/docs/_misc/dataProviderKey.md +0 -168
  270. package/docs/src/docs/_misc/docs-mock-api.md +0 -63
  271. package/docs/src/docs/_misc/dynamic-path.md +0 -71
  272. package/docs/src/docs/_misc/endpoint.md +0 -45
  273. package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  274. package/docs/src/docs/_misc/html-integration.md +0 -15
  275. package/docs/src/docs/search/docs-search.json +0 -9512
  276. package/docs/src/tag-list.json +0 -1
  277. package/docs/src/tsconfig-model.json +0 -23
  278. package/docs/src/tsconfig.declarations.json +0 -22
  279. package/docs/src/tsconfig.emit.json +0 -23
  280. package/docs/src/tsconfig.json +0 -858
  281. package/docs/svg/regular/plane.svg +0 -1
  282. package/docs/svg/solid/plane.svg +0 -1
  283. package/gitlab/job_github_mirror.sh +0 -39
  284. package/scripts/github-export.mjs +0 -150
  285. package/src/css.d.ts +0 -19
  286. package/src/tsconfig.declarations.json +0 -22
  287. package/src/tsconfig.emit.json +0 -23
package/docs/crawl/docs/_decorators/post.html DELETED
@@ -1,139 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/post.html" data-doc-id="docs/_decorators/post">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>@post — Concorde</title>
7
- <meta name="description" content="@post sends the contents of a publisher and stores the response in an">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_decorators/post, post, @post, decorator, ApiResult, undefined, Endpoint, DataProviderKey,
9
-
10
- The current body is read from , send(component),
11
-
12
- , returns a ,
13
-
14
- Use ">
15
- <meta name="concorde-doc-id" content="docs/_decorators/post">
16
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/post.html">
17
- </head>
18
- <body>
19
- <header>
20
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_decorators/post.md/post" rel="nofollow">interactive version</a></p>
21
- </header>
22
- <main>
23
- <article>
24
- <p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @post</strong>. @post sends the contents of a publisher and stores the response in an <span>Doc ID: <code>docs/_decorators/post</code>. Keywords: Concorde, supersoniks, docs/_decorators/post, post, @post, decorator, ApiResult, undefined, Endpoint, DataProviderKey,
25
-
26
- The current body is read from , send(component),
27
-
28
- , returns a ,
29
-
30
- Use . URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/post.html">https://concorde.supersoniks.org/crawl/docs/_decorators/post.html</a>.</span></p>
31
- <h1 id="post">@post</h1>
32
- <p><code>@post</code> sends the contents of a publisher and stores the response in an
33
- optional <code>ApiResult&lt;T&gt;</code> property. The property is <code>undefined</code> until a result
34
- is available.</p>
35
- <h2 id="minimal-usage">Minimal usage</h2>
36
- <p>Pass an <code>Endpoint&lt;T&gt;</code> and a <code>DataProviderKey&lt;B&gt;</code> for the request body.</p>
37
- <pre><code class="language-typescript">const userBodyKey = new DataProviderKey&lt;CreateUser&gt;(&quot;users.form&quot;);
38
- const createUser = post(new Endpoint&lt;User&gt;(&quot;users&quot;), userBodyKey);
39
-
40
- @createUser
41
- @state()
42
- payload?: ApiResult&lt;User&gt;;
43
- </code></pre>
44
- <p>The same decorator adapts to a method and receives the complete payload:</p>
45
- <pre><code class="language-typescript">@post(new Endpoint&lt;User&gt;(&quot;users&quot;), userBodyKey)
46
- handleCreate(payload?: ApiResult&lt;User&gt;) {
47
- if (payload?.response?.ok) console.log(payload.result);
48
- }
49
- </code></pre>
50
- <p>The current body is read from <code>userBodyKey</code>. By default, the POST is sent when
51
- the component connects and after each body mutation. Mutations in the same
52
- frame are coalesced into one request.</p>
53
- <p>API configuration is read from the HTML scope, as with
54
- <a href="./get.html#get">@get</a>.</p>
55
- <h2 id="sending-the-post-again">Sending the POST again</h2>
56
- <h3 id="from-the-component">From the component</h3>
57
- <p>Keep the decorator to access <code>send(component)</code>. The body is read again when the
58
- operation runs.</p>
59
- <pre><code class="language-typescript">async saveAgain() {
60
- const payload = await createUser.send(this);
61
- console.log(payload?.result);
62
- }
63
- </code></pre>
64
- <p><code>send()</code> returns a <code>Promise&lt;ApiResult&lt;T&gt; | undefined&gt;</code> that resolves after the
65
- operation completes. It is useful for “Save” or “Retry” buttons and can repeat
66
- an operation with side effects.</p>
67
- <h3 id="from-a-method-decorator">From a method decorator</h3>
68
- <p>The send action can decorate a local method. It runs after the method by
69
- default, waits for an eventual Promise to resolve, and the decorated method
70
- call waits for the send to complete:</p>
71
- <pre><code class="language-typescript">import { send } from &quot;@supersoniks/concorde/decorators&quot;;
72
-
73
- @send(createUser)
74
- async save() {
75
- // Prepare local state or validate the form.
76
- }
77
- </code></pre>
78
- <p>Use <code>{ when: &quot;before&quot; }</code> when the send must complete before the method runs:</p>
79
- <pre><code class="language-typescript">@send(createUser, { when: &quot;before&quot; })
80
- saveBefore() {
81
- // The POST has completed before this method runs.
82
- }
83
- </code></pre>
84
- <p>The method decorator adds an explicit send. If the method also mutates the body
85
- publisher, set <code>autoPostOnBodyMutation: false</code> when the decorated method must
86
- be the only trigger.</p>
87
- <h2 id="options-postoptions">Options (<code>PostOptions</code>)</h2>
88
- <p>Options are the third argument, or the fourth argument when a configuration key
89
- is provided.</p>
90
- <ul>
91
- <li><code>autoPostOnBodyMutation</code>: send after a body mutation (default: <code>true</code>). Set
92
- it to <code>false</code> to use <code>send()</code>.</li>
93
- <li><code>skipIfBodyMissing</code>: skip when the body is <code>null</code> or <code>undefined</code> (default:
94
- <code>true</code>).</li>
95
- <li><code>refetchEveryMs</code>: repeat the POST at this interval. Use it only when
96
- repeating the operation is intended.</li>
97
- <li><code>skipEmptyPlaceholder</code>: block the request when a <code>${...}</code> placeholder is
98
- <code>&quot;&quot;</code>.</li>
99
- <li><code>triggerKey</code>: a publisher whose <code>invalidate()</code> sends the POST again.</li>
100
- </ul>
101
- <p>With a configuration key:</p>
102
- <pre><code class="language-typescript">@post(endpoint, userBodyKey, apiConfigurationKey)
103
- </code></pre>
104
- <p>See <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a> for
105
- dynamic path details.</p>
106
- <h2 id="when-the-post-is-sent">When the POST is sent</h2>
107
- <ul>
108
- <li>when the component connects and the body and configuration are available;</li>
109
- <li>after a body mutation, unless <code>autoPostOnBodyMutation: false</code>;</li>
110
- <li>when a property used in <code>${...}</code> changes;</li>
111
- <li>when a configuration publisher changes;</li>
112
- <li>when the <code>triggerKey</code> publisher is invalidated;</li>
113
- <li>when <code>send()</code> is called;</li>
114
- <li>after each response when <code>refetchEveryMs</code> is set.</li>
115
- </ul>
116
- <h2 id="import">Import</h2>
117
- <pre><code class="language-typescript">import { post, type ApiResult } from &quot;@supersoniks/concorde/decorators&quot;;
118
- import { DataProviderKey } from &quot;@supersoniks/concorde/dataProviderKey&quot;;
119
- import { Endpoint } from &quot;@supersoniks/concorde/utils/endpoint&quot;;
120
- </code></pre>
121
- <h2 id="demos">Demos</h2>
122
- <pre><code>&lt;docs-demo-sources for=&quot;demo-api-post&quot;&gt;&lt;/docs-demo-sources&gt;
123
- &lt;demo-api-post&gt;&lt;/demo-api-post&gt;
124
- &lt;docs-demo-sources for=&quot;demo-api-post-method&quot;&gt;&lt;/docs-demo-sources&gt;
125
- &lt;demo-api-post-method&gt;&lt;/demo-api-post-method&gt;
126
- &lt;docs-demo-sources for=&quot;demo-api-post-dynamic&quot;&gt;&lt;/docs-demo-sources&gt;
127
- &lt;demo-api-post-dynamic&gt;&lt;/demo-api-post-dynamic&gt;
128
- </code></pre>
129
- <p>See <a href="./put.html#put">@put</a> and
130
- <a href="./patch.html#patch">@patch</a>: they use the same model with a
131
- different HTTP method.</p>
132
- <h2 id="advanced">Advanced</h2>
133
- <p>External invalidation is currently available through <code>triggerKey</code>; it is kept
134
- out of the main usage examples.</p>
135
-
136
- </article>
137
- </main>
138
- </body>
139
- </html>
package/docs/crawl/docs/_decorators/publish.html DELETED
@@ -1,61 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/publish.html" data-doc-id="docs/_decorators/publish">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>@publish — Concorde</title>
7
- <meta name="description" content="Write-only binding: assigning to the property publishes to the DataProviderKey path. No read subscription (inverse of @subscribe).">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_decorators/publish, publish, @publish, decorator, DataProviderKey, @bind, @subscribe, skipEmptyPlaceholder">
9
- <meta name="concorde-doc-id" content="docs/_decorators/publish">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/publish.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_decorators/publish.md/publish" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @publish</strong>. Write-only binding: assigning to the property publishes to the DataProviderKey path. No read subscription (inverse of @subscribe). <span>Doc ID: <code>docs/_decorators/publish</code>. Keywords: Concorde, supersoniks, docs/_decorators/publish, publish, @publish, decorator, DataProviderKey, @bind, @subscribe, skipEmptyPlaceholder. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/publish.html">https://concorde.supersoniks.org/crawl/docs/_decorators/publish.html</a>.</span></p>
19
- <h1 id="publish">@publish</h1>
20
- <p>Write-only binding: assigning to the property publishes to the <code>DataProviderKey</code> path. No read subscription (inverse of <a href="./subscribe.html#subscribe">@subscribe</a>).</p>
21
- <p>Similar to the “reflect” half of <a href="./bind.html#bind">@bind</a> without listening to the publisher.</p>
22
- <h2 id="import">Import</h2>
23
- <pre><code class="language-typescript">import { publish } from &quot;@supersoniks/concorde/decorators&quot;;
24
- import { sub } from &quot;@supersoniks/concorde/directives&quot;;
25
- import { DataProviderKey } from &quot;@supersoniks/concorde/dataProviderKey&quot;;
26
- </code></pre>
27
- <h2 id="example">Example</h2>
28
- <pre><code class="language-typescript">type PublishDemoData = { email: string; message: string };
29
- const publishDemoKey = new DataProviderKey&lt;PublishDemoData&gt;(&quot;publishDemo&quot;);
30
- //
31
- @customElement(&quot;demo-publish&quot;)
32
- export class DemoPublish extends LitElement {
33
- @publish(publishDemoKey.email)
34
- @state()
35
- email = &quot;&quot;;
36
- //
37
- @publish(publishDemoKey.message)
38
- @state()
39
- message = &quot;&quot;;
40
- //
41
- render() {
42
- return html`
43
- &lt;sonic-input
44
- .value=${this.email}
45
- @input=${(e) =&gt; (this.email = (e.target as HTMLInputElement).value)}
46
- label=&quot;Email&quot;
47
- &gt;&lt;/sonic-input&gt;
48
- &lt;p&gt;${sub(publishDemoKey.email)}&lt;/p&gt;
49
- `;
50
- }
51
- }
52
- </code></pre>
53
- <pre><code>&lt;docs-demo-sources for=&quot;demo-publish&quot;&gt;&lt;/docs-demo-sources&gt;
54
- &lt;demo-publish&gt;&lt;/demo-publish&gt;
55
- </code></pre>
56
- <p>Dynamic paths use the same placeholder rules as <code>@bind</code> / <code>@subscribe</code>. Resolution and <code>skipEmptyPlaceholder</code>: <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a>.</p>
57
-
58
- </article>
59
- </main>
60
- </body>
61
- </html>
package/docs/crawl/docs/_decorators/put.html DELETED
@@ -1,78 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/put.html" data-doc-id="docs/_decorators/put">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>@put — Concorde</title>
7
- <meta name="description" content="@put replaces a resource with the body from a publisher. It uses exactly the">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_decorators/put, put, @put, decorator, Endpoint, DataProviderKey, ApiResult, send(component),
9
-
10
- , when: &quot;before&quot;, autoPostOnBodyMutation: false, autoPostOnBodyMutation, skipIfBodyMissing">
11
- <meta name="concorde-doc-id" content="docs/_decorators/put">
12
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/put.html">
13
- </head>
14
- <body>
15
- <header>
16
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_decorators/put.md/put" rel="nofollow">interactive version</a></p>
17
- </header>
18
- <main>
19
- <article>
20
- <p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @put</strong>. @put replaces a resource with the body from a publisher. It uses exactly the <span>Doc ID: <code>docs/_decorators/put</code>. Keywords: Concorde, supersoniks, docs/_decorators/put, put, @put, decorator, Endpoint, DataProviderKey, ApiResult, send(component),
21
-
22
- , when: &quot;before&quot;, autoPostOnBodyMutation: false, autoPostOnBodyMutation, skipIfBodyMissing. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/put.html">https://concorde.supersoniks.org/crawl/docs/_decorators/put.html</a>.</span></p>
23
- <h1 id="put">@put</h1>
24
- <p><code>@put</code> replaces a resource with the body from a publisher. It uses exactly the
25
- same model as <a href="./post.html#post">@post</a>:
26
- <code>Endpoint&lt;T&gt;</code>, <code>DataProviderKey&lt;B&gt;</code>, <code>ApiResult&lt;T&gt;</code>, options, and the
27
- <code>send(component)</code> handle.</p>
28
- <h2 id="minimal-usage">Minimal usage</h2>
29
- <pre><code class="language-typescript">const bodyKey = new DataProviderKey&lt;UpdateUser&gt;(&quot;users.form&quot;);
30
- const updateUser = put(new Endpoint&lt;User&gt;(&quot;users/42&quot;), bodyKey);
31
-
32
- @updateUser
33
- @state()
34
- payload?: ApiResult&lt;User&gt;;
35
- </code></pre>
36
- <p>The same decorator adapts to a method:</p>
37
- <pre><code class="language-typescript">@put(new Endpoint&lt;User&gt;(&quot;users/42&quot;), bodyKey)
38
- handleUpdate(payload?: ApiResult&lt;User&gt;) {
39
- if (payload?.response?.ok) console.log(payload.result);
40
- }
41
- </code></pre>
42
- <p>To run the operation again from the component:</p>
43
- <pre><code class="language-typescript">async update() {
44
- await updateUser.send(this);
45
- }
46
- </code></pre>
47
- <p><code>send(component)</code> returns a Promise resolved after the PUT completes. See
48
- <a href="./post.html#post">@post</a> for the method-decorator form and the
49
- <code>when: &quot;before&quot;</code> option.</p>
50
- <p>The PUT is also sent automatically when the body mutates, unless
51
- <code>autoPostOnBodyMutation: false</code> is set. See
52
- <a href="./post.html#post">@post</a> for the option details:</p>
53
- <ul>
54
- <li><code>autoPostOnBodyMutation</code></li>
55
- <li><code>skipIfBodyMissing</code></li>
56
- <li><code>refetchEveryMs</code></li>
57
- <li><code>skipEmptyPlaceholder</code></li>
58
- <li><code>triggerKey</code></li>
59
- </ul>
60
- <p>Pass explicit API configuration as the third argument:</p>
61
- <pre><code class="language-typescript">@put(endpoint, bodyKey, apiConfigurationKey)
62
- </code></pre>
63
- <h2 id="import">Import</h2>
64
- <pre><code class="language-typescript">import { put, type ApiResult } from &quot;@supersoniks/concorde/decorators&quot;;
65
- import { DataProviderKey } from &quot;@supersoniks/concorde/dataProviderKey&quot;;
66
- import { Endpoint } from &quot;@supersoniks/concorde/utils/endpoint&quot;;
67
- </code></pre>
68
- <h2 id="see-also">See also</h2>
69
- <ul>
70
- <li><a href="./post.html#post">@post</a> — options and triggers</li>
71
- <li><a href="./patch.html#patch">@patch</a> — partial update</li>
72
- <li><a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a></li>
73
- </ul>
74
-
75
- </article>
76
- </main>
77
- </body>
78
- </html>
package/docs/crawl/docs/_decorators/subscribe.html DELETED
@@ -1,109 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/subscribe.html" data-doc-id="docs/_decorators/subscribe">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>@subscribe — Concorde</title>
7
- <meta name="description" content="Keeps a Lit property in sync with a read-only slice of the DataProvider store. You pass a DataProviderKey; when that path changes, the property updates and the component re-renders.">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_decorators/subscribe, subscribe, @subscribe, decorator, DataProviderKey, | Shape of the object at that path (, , , , …) |
9
- | **Key** | , — static path (, ) or dynamic (, (e.g. , ) — often filled via [">
10
- <meta name="concorde-doc-id" content="docs/_decorators/subscribe">
11
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/subscribe.html">
12
- </head>
13
- <body>
14
- <header>
15
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_decorators/subscribe.md/subscribe" rel="nofollow">interactive version</a></p>
16
- </header>
17
- <main>
18
- <article>
19
- <p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @subscribe</strong>. Keeps a Lit property in sync with a read-only slice of the DataProvider store. You pass a DataProviderKey; when that path changes, the property updates and the component re-renders. <span>Doc ID: <code>docs/_decorators/subscribe</code>. Keywords: Concorde, supersoniks, docs/_decorators/subscribe, subscribe, @subscribe, decorator, DataProviderKey, | Shape of the object at that path (, , , , …) |
20
- | **Key** | , — static path (, ) or dynamic (, (e.g. , ) — often filled via [. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/subscribe.html">https://concorde.supersoniks.org/crawl/docs/_decorators/subscribe.html</a>.</span></p>
21
- <h1 id="subscribe">@subscribe</h1>
22
- <p>Keeps a <strong>Lit property</strong> in sync with a <strong>read-only</strong> slice of the DataProvider store. You pass a <a href="../_misc/dataProviderKey.html#dataProviderKey"><code>DataProviderKey</code></a>; when that path changes, the property updates and the component re-renders.</p>
23
- <p>Typical setup (same idea as <a href="../_getting-started/my-first-component.html#my-first-component">My first component</a>):</p>
24
- <table>
25
- <thead>
26
- <tr>
27
- <th>Piece</th>
28
- <th>Role</th>
29
- </tr>
30
- </thead>
31
- <tbody><tr>
32
- <td><strong>Type</strong> <code>T</code></td>
33
- <td>Shape of the object at that path (<code>DocsUserData</code>, <code>{ count: number }</code>, …)</td>
34
- </tr>
35
- <tr>
36
- <td><strong>Key</strong></td>
37
- <td><code>DataProviderKey&lt;T, U&gt;</code> — static path (<code>&quot;cart&quot;</code>) or dynamic (<code>&quot;users.${userIndex}&quot;</code>, <code>&quot;${dataProvider}&quot;</code>)</td>
38
- </tr>
39
- <tr>
40
- <td><strong>Scope on the host</strong></td>
41
- <td>Properties listed in <code>U</code> (e.g. <code>dataProvider</code>, <code>userIndex</code>) — often filled via <a href="./ancestor-attribute.html#ancestor-attribute"><code>@ancestorAttribute</code></a></td>
42
- </tr>
43
- <tr>
44
- <td><strong><code>@subscribe(key)</code></strong></td>
45
- <td>Mirrors the store into <code>@state()</code> (or another property); read-only from the component side</td>
46
- </tr>
47
- </tbody></table>
48
- <p>For <strong>writing</strong> back to the store from component state, use <a href="./publish.html#publish">@publish</a>. In templates, the same paths work with <a href="../_directives/sub.html#sub">sub()</a>.</p>
49
- <h2 id="import">Import</h2>
50
- <pre><code class="language-typescript">import { subscribe } from &quot;@supersoniks/concorde/decorators&quot;;
51
- import { DataProviderKey } from &quot;@supersoniks/concorde/dataProviderKey&quot;;
52
-
53
- type Data = { count: number };
54
- const dataKey = new DataProviderKey&amp;lt;Data&amp;gt;(&quot;data&quot;);
55
-
56
- @subscribe(dataKey.count)
57
- @state()
58
- count = 0;
59
- </code></pre>
60
- <h2 id="static-path">Static path</h2>
61
- <p>The key path is fixed. The property type must match <code>T</code> at that segment.</p>
62
- <pre><code class="language-typescript">const cartKey = new DataProviderKey&amp;lt;{ items: string[] }&amp;gt;(&quot;cart&quot;);
63
-
64
- @subscribe(cartKey)
65
- @state()
66
- cart: { items: string[] } | null = null;
67
- </code></pre>
68
- <h2 id="dynamic-path-and-scope">Dynamic path and scope</h2>
69
- <p>Placeholders <code>${prop}</code> in the key string are resolved from <strong>properties on the same component</strong>. While a value is <code>null</code>/<code>undefined</code>, the subscription is inactive; optional <code>{ skipEmptyPlaceholder: true }</code> also waits on <code>&quot;&quot;</code>. Full rules: <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a>.</p>
70
- <p>Declare dynamic props in the key’s second generic so TypeScript expects them on the host:</p>
71
- <pre><code class="language-typescript">type User = { firstName: string; lastName: string; email: string };
72
-
73
- @subscribe(new DataProviderKey&amp;lt;User, { userIndex: number }&amp;gt;(&quot;demoUsers.${userIndex}&quot;))
74
- @state()
75
- user: User | null = null;
76
-
77
- @property({ type: Number }) userIndex = 0;
78
- </code></pre>
79
- <p>When <code>userIndex</code> changes, <code>@subscribe</code> re-resolves the path and refreshes <code>user</code>.</p>
80
- <h2 id="row--ancestor-scope">Row / ancestor scope</h2>
81
- <p>List items (and wrappers like <code>&lt;div dataProvider=&quot;…&quot;&gt;</code>) set which branch the child reads. Pattern from the tutorial:</p>
82
- <pre><code class="language-typescript">export const rowKey = new DataProviderKey&amp;lt;
83
- User,
84
- { dataProvider: string | null }
85
- &amp;gt;(&quot;${dataProvider}&quot;);
86
-
87
- @ancestorAttribute(&quot;dataProvider&quot;)
88
- dataProvider: string | null = null;
89
-
90
- @subscribe(rowKey)
91
- @state()
92
- user: User | null = null;
93
- </code></pre>
94
- <h2 id="demo">Demo</h2>
95
- <pre><code>&lt;docs-demo-sources for=&quot;demo-subscribe-dynamic&quot;&gt;&lt;/docs-demo-sources&gt;
96
- &lt;demo-subscribe-dynamic&gt;&lt;/demo-subscribe-dynamic&gt;
97
- </code></pre>
98
- <h2 id="see-also">See also</h2>
99
- <ul>
100
- <li><a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a> — overview</li>
101
- <li><a href="../_misc/dataProviderKey.html#dataProviderKey">DataProviderKey</a> — paths and host generics</li>
102
- <li><a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a> — <code>${prop}</code> resolution and <code>skipEmptyPlaceholder</code></li>
103
- <li><a href="../_directives/sub.html#sub">sub()</a> — same paths inside <code>html</code> templates</li>
104
- </ul>
105
-
106
- </article>
107
- </main>
108
- </body>
109
- </html>
package/docs/crawl/docs/_decorators/wait-for-ancestors.html DELETED
@@ -1,137 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/wait-for-ancestors.html" data-doc-id="docs/_decorators/wait-for-ancestors">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>@awaitConnectedAncestors and @dispatchConnectedEvent — Concorde</title>
7
- <meta name="description" content="The @awaitConnectedAncestors and @dispatchConnectedEvent decorators delay a web component's initialization until its matching ancestors have executed their connectedCallback. This is when contextual e">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_decorators/wait-for-ancestors, wait-for-ancestors, @awaitConnectedAncestors and @dispatchConnectedEvent, decorator, awaitConnectedAncestors and @dispatchConnectedEvent, @awaitConnectedAncestors, @dispatchConnectedEvent, connectedCallback, sonic-connected, @dispatchConnectedEvent()">
9
- <meta name="concorde-doc-id" content="docs/_decorators/wait-for-ancestors">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/wait-for-ancestors.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_decorators/wait-for-ancestors.md/wait-for-ancestors" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @awaitConnectedAncestors and @dispatchConnectedEvent</strong>. The @awaitConnectedAncestors and @dispatchConnectedEvent decorators delay a web component's initialization until its matching ancestors have executed their connectedCallback. This is when contextual e <span>Doc ID: <code>docs/_decorators/wait-for-ancestors</code>. Keywords: Concorde, supersoniks, docs/_decorators/wait-for-ancestors, wait-for-ancestors, @awaitConnectedAncestors and @dispatchConnectedEvent, decorator, awaitConnectedAncestors and @dispatchConnectedEvent, @awaitConnectedAncestors, @dispatchConnectedEvent, connectedCallback, sonic-connected, @dispatchConnectedEvent(). URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/wait-for-ancestors.html">https://concorde.supersoniks.org/crawl/docs/_decorators/wait-for-ancestors.html</a>.</span></p>
19
- <h1 id="awaitconnectedancestors-and-dispatchconnectedevent">@awaitConnectedAncestors and @dispatchConnectedEvent</h1>
20
- <p>The <code>@awaitConnectedAncestors</code> and <code>@dispatchConnectedEvent</code> decorators delay a web component&#39;s initialization until its matching ancestors have executed their <code>connectedCallback</code>. This is when contextual elements (publisher, dataProvider, etc.) are configured.</p>
21
- <h2 id="principle">Principle</h2>
22
- <p>When a child component attaches to the DOM, its ancestors may not yet be initialized (especially if custom element definitions are loaded asynchronously). The <code>@awaitConnectedAncestors</code> decorator delays the component&#39;s <code>connectedCallback</code> until all ancestors matching the provided CSS selectors have executed their <code>connectedCallback</code>.</p>
23
- <p>The <code>@dispatchConnectedEvent</code> decorator allows ancestors to signal they are ready by dispatching the <code>sonic-connected</code> event at the end of their <code>connectedCallback</code>. The event bubbles, so it can be listened to from anywhere (e.g. <code>document.addEventListener(CONNECTED, handler)</code>).</p>
24
- <p>Ancestors that are not web components (no hyphen in tag name) are considered connected by default and do not need to emit the event.</p>
25
- <h2 id="usage">Usage</h2>
26
- <h3 id="import">Import</h3>
27
- <pre><code class="language-typescript">import { awaitConnectedAncestors, dispatchConnectedEvent, ancestorAttribute } from &quot;@supersoniks/concorde/decorators&quot;;
28
- </code></pre>
29
- <h3 id="basic-example">Basic example</h3>
30
- <p>An ancestor container decorated with <code>@dispatchConnectedEvent()</code> signals when it is ready. A child component decorated with <code>@awaitConnectedAncestors(&quot;demo-wait-ancestor-container[dataProvider]&quot;)</code> waits for this container to be initialized before initializing itself. Parameters are CSS selectors (<code>element.matches()</code>).</p>
31
- <p>The parent is registered via <code>customElements.define()</code> (vanilla JS) rather than <code>@customElement</code>, so it can be defined later—e.g. when the user clicks a button. This demonstrates the child waiting until the parent exists.</p>
32
- <pre><code class="language-typescript">import { html, LitElement } from &quot;lit&quot;;
33
- import { customElement, state } from &quot;lit/decorators.js&quot;;
34
-
35
- // Parent: registered later via customElements.define(), not @customElement
36
- @dispatchConnectedEvent()
37
- export class DemoWaitAncestorContainer extends LitElement {
38
- render() {
39
- return html`&lt;slot&gt;&lt;/slot&gt;`;
40
- }
41
- }
42
-
43
- // Child: waits for parent before initializing
44
- @customElement(&quot;demo-wait-ancestor-value&quot;)
45
- @awaitConnectedAncestors(&quot;demo-wait-ancestor-container[dataProvider]&quot;)
46
- export class DemoWaitAncestorValue extends LitElement {
47
- @ancestorAttribute(&quot;dataProvider&quot;)
48
- dataProvider: string | null = null;
49
-
50
- @state() initializedAt: string = &quot;&quot;;
51
-
52
- connectedCallback() {
53
- super.connectedCallback();
54
- this.initializedAt = new Date().toISOString();
55
- }
56
-
57
- render() {
58
- return html`
59
- &lt;p&gt;DataProvider from ancestor: &lt;strong&gt;${this.dataProvider || &quot;—&quot;}&lt;/strong&gt;&lt;/p&gt;
60
- &lt;p&gt;Initialized at: ${this.initializedAt || &quot;(waiting for parent…)&quot;}&lt;/p&gt;
61
- `;
62
- }
63
- }
64
-
65
- // Demo section: register parent via customElements.define() when user clicks
66
- @customElement(&quot;demo-wait-ancestors-section&quot;)
67
- export class DemoWaitAncestorsSection extends LitElement {
68
- registerParent() {
69
- if (!customElements.get(&quot;demo-wait-ancestor-container&quot;)) {
70
- customElements.define(&quot;demo-wait-ancestor-container&quot;, DemoWaitAncestorContainer);
71
- }
72
- }
73
- render() {
74
- return html`
75
- &lt;sonic-button @click=${this.registerParent}&gt;Register parent component&lt;/sonic-button&gt;
76
- &lt;demo-wait-ancestor-container dataProvider=&quot;waitAncestorDemo&quot;&gt;
77
- &lt;demo-wait-ancestor-value&gt;&lt;/demo-wait-ancestor-value&gt;
78
- &lt;/demo-wait-ancestor-container&gt;
79
- `;
80
- }
81
- }
82
- </code></pre>
83
- <pre><code>&lt;docs-demo-sources for=&quot;demo-wait-ancestors-section&quot;&gt;&lt;/docs-demo-sources&gt;
84
- &lt;demo-wait-ancestors-section&gt;&lt;/demo-wait-ancestors-section&gt;
85
- </code></pre>
86
- <h3 id="multiple-ancestors">Multiple ancestors</h3>
87
- <p>The child waits for all specified ancestors. Register outer first, then inner — the child initializes only when both are ready.</p>
88
- <pre><code>&lt;demo-wait-ancestors-multi-section&gt;&lt;/demo-wait-ancestors-multi-section&gt;
89
- </code></pre>
90
- <h3 id="ancestors-already-connected">Ancestors already connected</h3>
91
- <p>When the parent is defined at load and already in the DOM, the child initializes immediately (no delay).</p>
92
- <p><strong>Static (both in DOM from start):</strong></p>
93
- <pre><code>&lt;docs-demo-sources for=&quot;demo-wait-ancestors-static-section&quot;&gt;&lt;/docs-demo-sources&gt;
94
- &lt;demo-wait-ancestors-static-section&gt;&lt;/demo-wait-ancestors-static-section&gt;
95
- </code></pre>
96
- <p><strong>Dynamic (child added on button click):</strong></p>
97
- <pre><code>&lt;docs-demo-sources for=&quot;demo-wait-ancestors-ready-section&quot;&gt;&lt;/docs-demo-sources&gt;
98
- &lt;demo-wait-ancestors-ready-section&gt;&lt;/demo-wait-ancestors-ready-section&gt;
99
- </code></pre>
100
- <h2 id="css-selector-support">CSS selector support</h2>
101
- <p>Parameters are CSS selectors matched via <code>element.matches()</code> — e.g. <code>&quot;sonic-subscriber&quot;</code>, <code>&quot;sonic-subscriber[dataProvider]&quot;</code>, <code>&quot;.my-container&quot;</code>, or multiple: <code>&quot;sonic-subscriber&quot;, &quot;sonic-sdui&quot;</code>.</p>
102
- <h2 id="behavior">Behavior</h2>
103
- <ul>
104
- <li>Ancestor search uses CSS selectors (<code>element.matches(selector)</code>) — supports tag names, classes, attributes, combinators, etc.</li>
105
- <li>Traversal includes shadow roots (parentNode / host)</li>
106
- <li>Non-web components (no hyphen in tag name) are considered connected by default</li>
107
- <li>For web component ancestors, it waits for <code>customElements.whenDefined(tagName)</code> and the <code>sonic-connected</code> event (or a timeout as fallback)</li>
108
- <li>If no matching ancestor is found, the original <code>connectedCallback</code> is called immediately</li>
109
- <li>Ancestors that do not emit <code>sonic-connected</code> trigger the fallback after the timeout (compatibility with existing components)</li>
110
- </ul>
111
- <h2 id="use-cases">Use cases</h2>
112
- <p>These decorators are particularly useful for:</p>
113
- <ul>
114
- <li><strong>sonic-value</strong> inside a <strong>sonic-subscriber</strong>: the value waits for the subscriber to configure its publisher</li>
115
- <li><strong>Components inside sonic-sdui</strong>: wait for the SDUI to load and configure its context</li>
116
- <li><strong>Any component</strong> depending on context provided by an ancestor custom element</li>
117
- </ul>
118
- <h2 id="listening-to-the-connected-event">Listening to the connected event</h2>
119
- <p>The <code>sonic-connected</code> event bubbles, so you can listen to it from anywhere:</p>
120
- <pre><code class="language-typescript">import { CONNECTED } from &quot;@supersoniks/concorde/decorators&quot;;
121
-
122
- someConnectable.addEventListener(CONNECTED, (e) =&gt; {
123
- console.log(&quot;Component connected:&quot;, e.target);
124
- });
125
- </code></pre>
126
- <h2 id="notes">Notes</h2>
127
- <ul>
128
- <li>These decorators apply only to web components (classes extending <code>HTMLElement</code>)</li>
129
- <li>The fallback timeout ensures compatibility with components that do not yet use <code>@dispatchConnectedEvent</code></li>
130
- <li>Traversal includes shadow roots</li>
131
- <li>For a guarantee without relying on the timeout, decorate ancestors (Subscriber, Fetcher, etc.) with <code>@dispatchConnectedEvent</code></li>
132
- </ul>
133
-
134
- </article>
135
- </main>
136
- </body>
137
- </html>
package/docs/crawl/docs/_directives/sub.html DELETED
@@ -1,93 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_directives/sub.html" data-doc-id="docs/_directives/sub">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>sub() — Concorde</title>
7
- <meta name="description" content="Read-only Lit directive: displays the current DataProvider value and updates whenever it is assigned.">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_directives/sub, sub, sub(), directive, ${prop}, @subscribe, null, &quot;&quot;, skipEmptyPlaceholder, ${…}, get, set">
9
- <meta name="concorde-doc-id" content="docs/_directives/sub">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_directives/sub.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_directives/sub.md/sub" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde directive — sub()</strong>. Read-only Lit directive: displays the current DataProvider value and updates whenever it is assigned. <span>Doc ID: <code>docs/_directives/sub</code>. Keywords: Concorde, supersoniks, docs/_directives/sub, sub, sub(), directive, ${prop}, @subscribe, null, &quot;&quot;, skipEmptyPlaceholder, ${…}, get, set. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_directives/sub.html">https://concorde.supersoniks.org/crawl/docs/_directives/sub.html</a>.</span></p>
19
- <h1 id="sub">sub()</h1>
20
- <p>Read-only Lit directive: displays the current <strong>DataProvider</strong> value and updates whenever it is assigned.</p>
21
- <h2 id="import">Import</h2>
22
- <pre><code class="language-typescript">import { sub } from &quot;@supersoniks/concorde/directives&quot;;
23
- </code></pre>
24
- <h2 id="string-path">String path</h2>
25
- <pre><code class="language-typescript">render() {
26
- return html`&amp;lt;p&amp;gt;Count: ${sub(&quot;myCounter.count&quot;)}&amp;lt;/p&amp;gt;`;
27
- }
28
- </code></pre>
29
- <h2 id="dataproviderkey-static">DataProviderKey (static)</h2>
30
- <pre><code class="language-typescript">import { DataProviderKey } from &quot;@supersoniks/concorde/dataProviderKey&quot;;
31
- import { sub } from &quot;@supersoniks/concorde/directives&quot;;
32
-
33
- const counterKey = new DataProviderKey&amp;lt;{ count: number }&amp;gt;(&quot;myCounter&quot;);
34
-
35
- render() {
36
- return html`&amp;lt;p&amp;gt;${sub(counterKey.count)}&amp;lt;/p&amp;gt;`;
37
- }
38
- </code></pre>
39
- <h2 id="dynamic-dataproviderkey-prop">Dynamic DataProviderKey (<code>${prop}</code>)</h2>
40
- <p>Like <code>@subscribe</code>: the path is resolved on the template <strong>host component</strong>; the directive re-subscribes when observed props change. Placeholder values (<code>null</code>, <code>&quot;&quot;</code>, <code>0</code>, …): <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a> (<code>skipEmptyPlaceholder</code> not available on <code>sub()</code> yet).</p>
41
- <pre><code class="language-typescript">import { DataProviderKey } from &quot;@supersoniks/concorde/dataProviderKey&quot;;
42
- import { sub } from &quot;@supersoniks/concorde/directives&quot;;
43
-
44
- type User = { firstName: string; lastName: string; email: string };
45
- const userKey = new DataProviderKey&amp;lt;User, { userIndex: number }&amp;gt;(
46
- &quot;demoUsers.${userIndex}&quot;,
47
- );
48
-
49
- @customElement(&quot;demo-sub-dynamic&quot;)
50
- export class DemoSubDynamic extends LitElement {
51
- @property({ type: Number }) userIndex = 0;
52
-
53
- render() {
54
- return html`
55
- &amp;lt;p&amp;gt;${sub(userKey.email)}&amp;lt;/p&amp;gt;
56
- `;
57
- }
58
- }
59
- </code></pre>
60
- <h2 id="demo">Demo</h2>
61
- <pre><code>&lt;docs-demo-sources for=&quot;demo-sub-template&quot;&gt;&lt;/docs-demo-sources&gt;
62
- &lt;demo-sub-template&gt;&lt;/demo-sub-template&gt;
63
- </code></pre>
64
- <h2 id="concatenation-forms">Concatenation (forms)</h2>
65
- <pre><code class="language-typescript">html`&amp;lt;span&amp;gt;${sub(this.formDataProvider + &quot;.email&quot;)}&amp;lt;/span&amp;gt;`
66
- </code></pre>
67
- <h2 id="sub-vs-get--set--dp">sub() vs get() / set() / dp()</h2>
68
- <table>
69
- <thead>
70
- <tr>
71
- <th>API</th>
72
- <th>Context</th>
73
- <th>Dynamic <code>${…}</code></th>
74
- </tr>
75
- </thead>
76
- <tbody><tr>
77
- <td><code>sub()</code></td>
78
- <td>Lit template, reactive</td>
79
- <td>Yes</td>
80
- </tr>
81
- <tr>
82
- <td><code>get</code> / <code>set</code> / <code>dp</code></td>
83
- <td>Imperative code</td>
84
- <td>No</td>
85
- </tr>
86
- </tbody></table>
87
- <p>Do not replace <code>sub(path)</code> with <code>get(path)</code> in a template: <code>get</code> returns a one-time snapshot.</p>
88
- <p>See <a href="../_misc/dataProviderKey.html#dataProviderKey">DataProviderKey</a>, <a href="../_decorators/subscribe.html#subscribe">@subscribe</a>, and the <code>concorde-get-set-dp</code> migration skill.</p>
89
-
90
- </article>
91
- </main>
92
- </body>
93
- </html>