@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/handle.html DELETED
@@ -1,165 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/handle.html" data-doc-id="docs/_decorators/handle">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>@handle — Concorde</title>
7
- <meta name="description" content="Typed callback on one or more DataProviderKey&lt;T&gt; paths: invokes the decorated method when a publisher assigns a value (calculations, side effects, updating other @state properties, etc.).">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_decorators/handle, handle, @handle, decorator, DataProviderKey, @state, HandleOptions, null, undefined, @bind, @subscribe, ${user.firstName} ${user.lastName}">
9
- <meta name="concorde-doc-id" content="docs/_decorators/handle">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/handle.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/handle.md/handle" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @handle</strong>. Typed callback on one or more DataProviderKey&lt;T&gt; paths: invokes the decorated method when a publisher assigns a value (calculations, side effects, updating other @state properties, etc.). <span>Doc ID: <code>docs/_decorators/handle</code>. Keywords: Concorde, supersoniks, docs/_decorators/handle, handle, @handle, decorator, DataProviderKey, @state, HandleOptions, null, undefined, @bind, @subscribe, ${user.firstName} ${user.lastName}. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/handle.html">https://concorde.supersoniks.org/crawl/docs/_decorators/handle.html</a>.</span></p>
19
- <h1 id="handle">@handle</h1>
20
- <p>Typed callback on one or more <code>DataProviderKey&lt;T&gt;</code> paths: invokes the decorated <strong>method</strong> when a publisher assigns a value (calculations, side effects, updating other <code>@state</code> properties, etc.).</p>
21
- <p>Unlike <a href="./subscribe.html#subscribe">@subscribe</a>, nothing is bound to the decorated member — only your method runs. <code>@handle</code> is typed and accepts up to <strong>3 keys</strong> plus an optional trailing <code>HandleOptions</code> object. It supersedes the string-based <a href="./on-assign.html#on-assign">@onAssign</a>.</p>
22
- <p>By default the method is called on <strong>every</strong> assignment, even when the value is <code>null</code> / <code>undefined</code>. Use the options below to restrict that.</p>
23
- <h2 id="import">Import</h2>
24
- <pre><code class="language-typescript">import { handle, Skip } from &quot;@supersoniks/concorde/decorators&quot;;
25
- import { DataProviderKey } from &quot;@supersoniks/concorde/dataProviderKey&quot;;
26
- import { get, set } from &quot;@supersoniks/concorde/utils&quot;;
27
- </code></pre>
28
- <h2 id="basic-example">Basic example</h2>
29
- <pre><code class="language-typescript">type DemoCounterData = { count: number };
30
- const demoDataKey = new DataProviderKey&amp;lt;DemoCounterData&amp;gt;(&quot;demoData&quot;);
31
-
32
- @customElement(&quot;demo-handle&quot;)
33
- export class DemoHandle extends LitElement {
34
- @state() doubled = 0;
35
- @state() lastUpdate = &quot;&quot;;
36
-
37
- @handle(demoDataKey.count)
38
- onCountChange(count: number) {
39
- this.doubled = count * 2;
40
- this.lastUpdate = new Date().toLocaleTimeString();
41
- }
42
-
43
- incrementCount() {
44
- const data = get(demoDataKey);
45
- set(demoDataKey, { ...data, count: data.count + 1 });
46
- }
47
-
48
- render() {
49
- return html`
50
- &amp;lt;p&amp;gt;Doubled count: ${this.doubled}&amp;lt;/p&amp;gt;
51
- &amp;lt;p&amp;gt;&amp;lt;small&amp;gt;Last update: ${this.lastUpdate}&amp;lt;/small&amp;gt;&amp;lt;/p&amp;gt;
52
- &amp;lt;sonic-button @click=${this.incrementCount}&amp;gt;Increment&amp;lt;/sonic-button&amp;gt;
53
- `;
54
- }
55
- }
56
- </code></pre>
57
- <pre><code>&lt;docs-demo-sources for=&quot;demo-handle&quot;&gt;&lt;/docs-demo-sources&gt;
58
- &lt;demo-handle&gt;&lt;/demo-handle&gt;
59
- </code></pre>
60
- <h2 id="dynamic-path">Dynamic path</h2>
61
- <p>Placeholders in <code>DataProviderKey</code> resolve from the host component’s properties (same rules as <code>@bind</code> / <code>@subscribe</code>).</p>
62
- <pre><code class="language-typescript">type User = { firstName: string; lastName: string; email: string };
63
-
64
- @customElement(&quot;demo-handle-dynamic&quot;)
65
- export class DemoHandleDynamic extends LitElement {
66
- @property({ type: Number })
67
- userIndex = 0;
68
-
69
- @state() displayName = &quot;&quot;;
70
- @state() lastUpdate = &quot;&quot;;
71
-
72
- @handle(new DataProviderKey&amp;lt;User, { userIndex: number }&amp;gt;(&quot;demoUsers.${userIndex}&quot;))
73
- onUserAssigned(user: User) {
74
- this.displayName = `${user.firstName} ${user.lastName}`;
75
- this.lastUpdate = new Date().toLocaleTimeString();
76
- }
77
-
78
- render() {
79
- return html`...`;
80
- }
81
- }
82
- </code></pre>
83
- <pre><code>&lt;docs-demo-sources for=&quot;demo-handle-dynamic&quot;&gt;&lt;/docs-demo-sources&gt;
84
- &lt;demo-handle-dynamic&gt;&lt;/demo-handle-dynamic&gt;
85
- </code></pre>
86
- <h2 id="multiple-paths">Multiple paths</h2>
87
- <p><code>@handle</code> accepts up to <strong>3 keys</strong>; the method receives one strongly-typed argument per key, in order. Each assignment triggers the method, so make your method safe against partial values (or use <code>waitForAllDefined</code>, see below).</p>
88
- <pre><code class="language-typescript">type QueueConfig = { onInactivity: { stillHere: { show: boolean } } };
89
- const config = new DataProviderKey&amp;lt;QueueConfig&amp;gt;(&quot;sessionQueueConfig&quot;);
90
- const idle = new DataProviderKey&amp;lt;{ isIdle: boolean }&amp;gt;(&quot;idleStatus&quot;);
91
-
92
- @customElement(&quot;demo-handle-multi&quot;)
93
- export class DemoHandleMulti extends LitElement {
94
-
95
- // show: boolean, isIdle: boolean — fully typed from the keys
96
- @handle(config.onInactivity.stillHere.show, idle.isIdle)
97
- onInactivity(show: boolean, isIdle: boolean) {
98
- if (show === true &amp;&amp; isIdle === true) this.openModal();
99
- else this.closeModal();
100
- }
101
- }
102
- </code></pre>
103
- <h2 id="options-handleoptions">Options (<code>HandleOptions</code>)</h2>
104
- <p>Pass an options object as the <strong>last</strong> argument. The names map to real situations seen in the apps.</p>
105
- <h3 id="waitforalldefined"><code>waitForAllDefined</code></h3>
106
- <p>Only call the method once <strong>all</strong> watched keys are defined (non <code>null</code> / <code>undefined</code>). This reproduces the historical <code>@onAssign</code> semantics — use it when the logic only makes sense with every source ready (e.g. building a date from <code>date</code> + <code>timeZone</code> + <code>direction</code>).</p>
107
- <pre><code class="language-typescript">@handle(trip.departureDate, trip.event.timeZone, form.direction, {
108
- waitForAllDefined: true,
109
- })
110
- updateDepartureDate(date: number, timeZone: string, direction: string) {
111
- // called only when the three values are all available
112
- this.formDate = formatDate(date, timeZone, direction);
113
- }
114
- </code></pre>
115
- <h3 id="skip"><code>skip</code></h3>
116
- <p>Do <strong>not</strong> call the method when a received value belongs to one of the listed <strong>categories</strong> (the <code>Skip</code> enum). Each entry is a named category — not a value — so there is no value/pattern ambiguity (e.g. <code>{}</code> is <code>Skip.EmptyObject</code>, an explicit &quot;empty object&quot; category, never a value comparison).</p>
117
- <table>
118
- <thead>
119
- <tr>
120
- <th>Category</th>
121
- <th>Matches</th>
122
- </tr>
123
- </thead>
124
- <tbody><tr>
125
- <td><code>Skip.Nullish</code></td>
126
- <td><code>null</code> or <code>undefined</code> (a publisher always emits <code>null</code>, never <code>undefined</code>)</td>
127
- </tr>
128
- <tr>
129
- <td><code>Skip.EmptyString</code></td>
130
- <td><code>&quot;&quot;</code></td>
131
- </tr>
132
- <tr>
133
- <td><code>Skip.EmptyObject</code></td>
134
- <td>object with no keys (<code>{}</code>), arrays excluded</td>
135
- </tr>
136
- <tr>
137
- <td><code>Skip.EmptyArray</code></td>
138
- <td>empty array (<code>[]</code>)</td>
139
- </tr>
140
- </tbody></table>
141
- <p>Useful when a not-yet-initialized publisher emits <code>{}</code> as a &quot;loading&quot; state. For a <strong>specific value</strong> (e.g. a particular string), guard inside the method instead.</p>
142
- <pre><code class="language-typescript">@handle(user.profile, { skip: [Skip.Nullish, Skip.EmptyObject] })
143
- onProfile(profile: Profile) {
144
- // not called while the publisher still holds {} (not loaded yet)
145
- this.displayName = profile.firstName;
146
- }
147
- </code></pre>
148
- <blockquote>
149
- <p>Options can be combined, e.g. <code>@handle(a, b, { waitForAllDefined: true, skip: [Skip.Nullish] })</code>. For any <strong>arbitrary</strong> validation on a specific value, just guard inside the method (<code>if (!isValid(v)) return;</code>) — that is exactly what an <code>accept</code>-style predicate would do, since <code>@handle</code> only runs your method.</p>
150
- </blockquote>
151
- <h3 id="skipemptyplaceholder"><code>skipEmptyPlaceholder</code></h3>
152
- <p>On a <strong>dynamic key path</strong> (<code>&quot;items.${itemId}&quot;</code>), if <code>true</code>, a placeholder resolved to <code>&#39;&#39;</code> is treated as not ready (no subscription) — <strong>empty string only</strong>, not <code>0</code> or <code>false</code>. See <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a>.</p>
153
- <h2 id="highlights">Highlights</h2>
154
- <ul>
155
- <li>Strict typing: the method receives one argument per key, in order.</li>
156
- <li>Up to 3 keys; for 4+ keys (rare), keep <a href="./on-assign.html#on-assign">@onAssign</a> for now.</li>
157
- <li>By default the method runs on <strong>every</strong> assignment, even with <code>null</code> / <code>undefined</code> (unlike <code>@onAssign</code>, which waits for all values). Opt back into that behavior with <code>waitForAllDefined</code>.</li>
158
- <li><code>skip</code> filters out values by <strong>named category</strong> (e.g. <code>[Skip.Nullish, Skip.EmptyObject]</code>); for arbitrary checks on a specific value, guard inside the method.</li>
159
- </ul>
160
- <p>See also <a href="../_misc/dataProviderKey.html#dataProviderKey">DataProviderKey</a> and <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a>.</p>
161
-
162
- </article>
163
- </main>
164
- </body>
165
- </html>
package/docs/crawl/docs/_decorators/on-assign.html DELETED
@@ -1,355 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/on-assign.html" data-doc-id="docs/_decorators/on-assign">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>@onAssign — Concorde</title>
7
- <meta name="description" content="&gt; New apps: use @handle with DataProviderKey (Data flow). @onAssign uses untyped string paths; it remains documented for existing codebases — see Migrating to @handle below.">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_decorators/on-assign, on-assign, @onAssign, decorator, onAssign, DataProviderKey, set, get, User n°${userNumber}, user-${userNumber}@example.com">
9
- <meta name="concorde-doc-id" content="docs/_decorators/on-assign">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/on-assign.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/on-assign.md/on-assign" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @onAssign</strong>. &gt; New apps: use @handle with DataProviderKey (Data flow). @onAssign uses untyped string paths; it remains documented for existing codebases — see Migrating to @handle below. <span>Doc ID: <code>docs/_decorators/on-assign</code>. Keywords: Concorde, supersoniks, docs/_decorators/on-assign, on-assign, @onAssign, decorator, onAssign, DataProviderKey, set, get, User n°${userNumber}, user-${userNumber}@example.com. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/on-assign.html">https://concorde.supersoniks.org/crawl/docs/_decorators/on-assign.html</a>.</span></p>
19
- <h1 id="onassign">@onAssign</h1>
20
- <blockquote>
21
- <p><strong>New apps:</strong> use <a href="./handle.html#handle">@handle</a> with <code>DataProviderKey</code> (<a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a>). <code>@onAssign</code> uses untyped string paths; it remains documented for existing codebases — see <strong>Migrating to @handle</strong> below.</p>
22
- </blockquote>
23
- <p>The <code>@onAssign</code> decorator allows you to execute a method when one or more publishers are updated. The method is called only when all specified publishers have been assigned values.</p>
24
- <p>For a <strong>typed</strong> equivalent (recommended), use <a href="./handle.html#handle">@handle</a>.</p>
25
- <h2 id="principle">Principle</h2>
26
- <p>This decorator subscribes to one or more publishers by <strong>string path</strong> (legacy). When all specified publishers have been assigned values (via <code>set</code>), the decorated method is called with all the values as arguments. Prefer <a href="./handle.html#handle">@handle</a> + <code>DataProviderKey</code> and <code>get</code> / <code>set</code> from <a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a>.</p>
27
- <p>This is particularly useful when you need to wait for multiple data sources to be ready before executing logic.</p>
28
- <h2 id="usage">Usage</h2>
29
- <h3 id="import">Import</h3>
30
- <pre><code class="language-typescript">import { onAssign } from &quot;@supersoniks/concorde/decorators&quot;;
31
- </code></pre>
32
- <h3 id="basic-example">Basic example</h3>
33
- <pre><code class="language-typescript">//...
34
- @customElement(&quot;demo-on-assign&quot;)
35
- export class DemoOnAssign extends LitElement {
36
- static styles = [tailwind];
37
-
38
- @state() userWithSettings: any = null;
39
- @state() isReady: boolean = false;
40
- @state() lastUpdate: string = &quot;&quot;;
41
-
42
- @onAssign(&quot;demoUser&quot;, &quot;demoUserSettings&quot;)
43
- handleDataReady(user: any, settings: any) {
44
- this.isReady = Object.keys(user).length &gt; 0 &amp;&amp; Object.keys(settings).length &gt; 0;
45
- this.userWithSettings = { ...user, ...settings };
46
- this.lastUpdate = new Date().toLocaleTimeString();
47
- this.requestUpdate();
48
- }
49
-
50
- render() {
51
- const { name, email, theme, language } = this.userWithSettings;
52
- return //...
53
- }
54
-
55
- updateData() {
56
- const user = PublisherManager.get(&quot;demoUser&quot;);
57
- const userSettings = PublisherManager.get(&quot;demoUserSettings&quot;);
58
- const userNumber = Math.floor(Math.random() * 100);
59
- user.set({
60
- name: `User n°${userNumber}`,
61
- email: `user-${userNumber}@example.com`,
62
- });
63
-
64
- userSettings.set({
65
- theme: [&quot;light&quot;, &quot;dark&quot;, &quot;auto&quot;][Math.floor(Math.random() * 3)],
66
- language: [&quot;en&quot;, &quot;fr&quot;, &quot;es&quot;][Math.floor(Math.random() * 3)],
67
- });
68
- }
69
- }
70
- </code></pre>
71
- <pre><code>&lt;docs-demo-sources for=&quot;demo-on-assign&quot;&gt;&lt;/docs-demo-sources&gt;
72
- &lt;demo-on-assign&gt;&lt;/demo-on-assign&gt;
73
- </code></pre>
74
- <h3 id="example-with-nested-paths">Example with nested paths</h3>
75
- <pre><code class="language-typescript">@customElement(&quot;product-view&quot;)
76
- export class ProductView extends LitElement {
77
- product: any = null;
78
- inventory: any = null;
79
-
80
- @onAssign(&quot;store.product&quot;, &quot;store.inventory&quot;)
81
- handleProductData(product: any, inventory: any) {
82
- this.product = product;
83
- this.inventory = inventory;
84
- this.requestUpdate();
85
- }
86
-
87
- render() {
88
- if (!this.product) return html`&lt;div&gt;Loading...&lt;/div&gt;`;
89
-
90
- const stock = this.inventory[this.product.id] || 0;
91
- return html`
92
- &lt;div&gt;
93
- &lt;h2&gt;${this.product.name}&lt;/h2&gt;
94
- &lt;p&gt;Price: ${this.product.price}€&lt;/p&gt;
95
- &lt;p&gt;Stock: ${stock}&lt;/p&gt;
96
- &lt;/div&gt;
97
- `;
98
- }
99
- }
100
- </code></pre>
101
- <h2 id="path-syntax">Path syntax</h2>
102
- <p>The path uses dot notation to navigate through the publisher structure:</p>
103
- <ul>
104
- <li><strong>First segment</strong>: dataProvider identifier (e.g., <code>&quot;userData&quot;</code>)</li>
105
- <li><strong>Following segments</strong>: nested properties (e.g., <code>&quot;store.product&quot;</code>)</li>
106
- <li><strong>Array access</strong>: use numeric index (e.g., <code>&quot;data.items.0&quot;</code>)</li>
107
- </ul>
108
- <h3 id="dynamic-path-driven-by-class-properties">Dynamic path driven by class properties</h3>
109
- <p>You can now build the paths dynamically by referencing the host class properties inside the strings passed to <code>@onAssign</code>. Two placeholder syntaxes are supported:</p>
110
- <ul>
111
- <li><code>${myProperty}</code> or <code>${this.myProperty}</code></li>
112
- <li><code>{$myProperty}</code></li>
113
- </ul>
114
- <p>Each placeholder is replaced at runtime with the current value of the corresponding property. <code>@onAssign</code> automatically watches those properties and:</p>
115
- <ul>
116
- <li>re-evaluates the final paths when one of them changes,</li>
117
- <li>removes the previous subscriptions before attaching the new ones,</li>
118
- <li>observe the changes inside <code>willUpdate(changedProperties)</code> so nothing touches the getters/setters.</li>
119
- </ul>
120
- <p>While a placeholder is <code>null</code>/<code>undefined</code>, subscriptions are detached. Optional <code>skipEmptyPlaceholder</code> on <a href="./handle.html#handle">@handle</a> (typed replacement). Details: <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a>.</p>
121
- <pre><code class="language-typescript">@customElement(&quot;demo-on-assign-dynamic&quot;)
122
- export class DemoOnAssignDynamic extends LitElement {
123
- static styles = [tailwind];
124
-
125
- @property({ type: String })
126
- dataProvider: &quot;demoUsers&quot; | &quot;demoUsersAlt&quot; = &quot;demoUsers&quot;;
127
-
128
- @property({ type: Number })
129
- userIndex: number = 0;
130
-
131
- @state() user: any = null;
132
- @state() userSettings: any = null;
133
-
134
- @onAssign(&quot;${dataProvider}.${userIndex}&quot;, &quot;${dataProvider}Settings.${userIndex}&quot;)
135
- handleUserDataReady(user: any, settings: any) {
136
- this.user = user;
137
- this.userSettings = settings;
138
- }
139
-
140
- updateUserIndex(e: Event) {
141
- this.userIndex = parseInt((e.target as HTMLInputElement).value);
142
- }
143
-
144
- updateDataProvider(e: Event) {
145
- this.dataProvider = (e.target as HTMLSelectElement).value as
146
- | &quot;demoUsers&quot;
147
- | &quot;demoUsersAlt&quot;;
148
- }
149
-
150
- updateCurrentUserData() {
151
- const usersPublisher = PublisherManager.get(this.dataProvider);
152
- const settingsPublisher = PublisherManager.get(
153
- `${this.dataProvider}Settings`
154
- );
155
- const userPublisher = Objects.traverse(
156
- usersPublisher,
157
- [String(this.userIndex)]
158
- ) as PublisherProxy;
159
- const settingPublisher = Objects.traverse(
160
- settingsPublisher,
161
- [String(this.userIndex)]
162
- ) as PublisherProxy;
163
-
164
- if (userPublisher &amp;&amp; settingPublisher) {
165
- // Générer de nouvelles données aléatoires
166
- const randomNames = [
167
- { firstName: &quot;Alice&quot;, lastName: &quot;Wonder&quot; },
168
- { firstName: &quot;Bob&quot;, lastName: &quot;Builder&quot; },
169
- { firstName: &quot;Charlie&quot;, lastName: &quot;Chaplin&quot; },
170
- ];
171
- const randomThemes = [&quot;light&quot;, &quot;dark&quot;, &quot;auto&quot;];
172
- const randomLanguages = [&quot;en&quot;, &quot;fr&quot;, &quot;es&quot;];
173
-
174
- const randomName =
175
- randomNames[Math.floor(Math.random() * randomNames.length)];
176
- const randomEmail = `${randomName.firstName.toLowerCase()}.${randomName.lastName.toLowerCase()}@example.com`;
177
- const randomTheme =
178
- randomThemes[Math.floor(Math.random() * randomThemes.length)];
179
- const randomLanguage =
180
- randomLanguages[Math.floor(Math.random() * randomLanguages.length)];
181
-
182
- // Mettre à jour l&#39;utilisateur directement
183
- const currentUser = userPublisher.get() || {};
184
- userPublisher.set({
185
- ...currentUser,
186
- firstName: randomName.firstName,
187
- lastName: randomName.lastName,
188
- email: randomEmail,
189
- });
190
-
191
- // Mettre à jour les settings directement
192
- settingPublisher.set({
193
- theme: randomTheme,
194
- language: randomLanguage,
195
- });
196
- }
197
- }
198
-
199
- render() {
200
- return html`
201
- &amp;lt;div class=&quot;flex flex-col gap-2&quot;&amp;gt;
202
- &amp;lt;sonic-select label=&quot;Users set&quot; @change=${this.updateDataProvider}&amp;gt;
203
- &amp;lt;option value=&quot;demoUsers&quot;&amp;gt;First set of users&amp;lt;/option&amp;gt;
204
- &amp;lt;option value=&quot;demoUsersAlt&quot;&amp;gt;Second set of users&amp;lt;/option&amp;gt;
205
- &amp;lt;/sonic-select&amp;gt;
206
- &amp;lt;sonic-input
207
- type=&quot;number&quot;
208
- .value=${this.userIndex}
209
- @input=${this.updateUserIndex}
210
- min=&quot;0&quot;
211
- max=&quot;9&quot;
212
- label=&quot;Index&quot;
213
- class=&quot;block&quot;
214
- &amp;gt;&amp;lt;/sonic-input&amp;gt;
215
- &amp;lt;sonic-button @click=${this.updateCurrentUserData}&amp;gt;
216
- Update current user data
217
- &amp;lt;/sonic-button&amp;gt;
218
- &amp;lt;div class=&quot;flex flex-col gap-2 border p-2&quot;&amp;gt;
219
- &amp;lt;div&amp;gt;
220
- &amp;lt;sonic-icon name=&quot;user&quot; library=&quot;heroicons&quot;&amp;gt;&amp;lt;/sonic-icon&amp;gt;
221
- ${this.user?.firstName} ${this.user?.lastName}
222
- &amp;lt;/div&amp;gt;
223
- &amp;lt;div&amp;gt;
224
- &amp;lt;sonic-icon name=&quot;envelope&quot; library=&quot;heroicons&quot;&amp;gt;&amp;lt;/sonic-icon&amp;gt;
225
- ${this.user?.email}
226
- &amp;lt;/div&amp;gt;
227
- &amp;lt;div&amp;gt;
228
- Theme: ${this.userSettings?.theme} | Language:
229
- ${this.userSettings?.language}
230
- &amp;lt;/div&amp;gt;
231
- &amp;lt;/div&amp;gt;
232
- &amp;lt;/div&amp;gt;
233
- `;
234
- }
235
- }
236
- </code></pre>
237
- <pre><code>&lt;docs-demo-sources for=&quot;demo-on-assign-dynamic&quot;&gt;&lt;/docs-demo-sources&gt;
238
- &lt;demo-on-assign-dynamic&gt;&lt;/demo-on-assign-dynamic&gt;
239
- </code></pre>
240
- <blockquote>
241
- <p>⚠️ Use classic string literals: <code>@onAssign(&quot;${dataProvider}.${profileId}&quot;, &quot;settings.${profileId}&quot;)</code>. Do <strong>not</strong> use template literals (backticks), otherwise JavaScript would try to interpolate the value immediately.</p>
242
- </blockquote>
243
- <p>Additional constraints:</p>
244
- <ul>
245
- <li>The hosting class must expose a <code>willUpdate(changedProperties?: Map&lt;PropertyKey, unknown&gt;)</code> method (LitElement already provides it) so that <code>@onAssign</code> can listen to dependency changes.</li>
246
- <li>Dependencies need to be reactive (e.g. <code>@property()</code> on LitElement) or you must call <code>this.requestUpdate(&quot;myProp&quot;)</code> manually after changing them, otherwise <code>willUpdate</code> will never be notified.</li>
247
- <li>If you use nested expressions like <code>${user.id}</code>, the first segment (<code>user</code>) is the one being observed: you need to reassign <code>this.user</code> (e.g. with a new object) so that the binding can detect the change.</li>
248
- </ul>
249
- <h2 id="behavior">Behavior</h2>
250
- <ul>
251
- <li>The method is called only when <strong>all</strong> specified publishers have been assigned values</li>
252
- <li>The method receives the values of all publishers as arguments, in the same order as specified</li>
253
- <li>Subscription happens at the time of <code>connectedCallback</code></li>
254
- <li>Unsubscription happens automatically at the time of <code>disconnectedCallback</code></li>
255
- <li>If a publisher doesn&#39;t exist yet, it will be created with the value <code>null</code></li>
256
- <li>The method is called with <code>this</code> bound to the component instance</li>
257
- </ul>
258
- <h2 id="use-cases">Use cases</h2>
259
- <p>This decorator is particularly useful for:</p>
260
- <ul>
261
- <li><strong>Waiting for multiple data sources</strong> before rendering or executing logic</li>
262
- <li><strong>Synchronizing data</strong> from different publishers</li>
263
- <li><strong>Initializing components</strong> that depend on multiple data providers</li>
264
- <li><strong>Handling complex data dependencies</strong> where you need all data to be ready</li>
265
- </ul>
266
- <h2 id="complete-example">Complete example</h2>
267
- <pre><code class="language-typescript">import { html, LitElement } from &quot;lit&quot;;
268
- import { customElement } from &quot;lit/decorators.js&quot;;
269
- import { onAssign } from &quot;@supersoniks/concorde/decorators&quot;;
270
- import { PublisherManager } from &quot;@supersoniks/concorde/core/utils/PublisherProxy&quot;;
271
-
272
- @customElement(&quot;order-summary&quot;)
273
- export class OrderSummary extends LitElement {
274
- order: any = null;
275
- customer: any = null;
276
- shipping: any = null;
277
-
278
- @onAssign(&quot;orderData&quot;, &quot;customerData&quot;, &quot;shippingData&quot;)
279
- handleOrderReady(order: any, customer: any, shipping: any) {
280
- this.order = order;
281
- this.customer = customer;
282
- this.shipping = shipping;
283
- this.requestUpdate();
284
- }
285
-
286
- render() {
287
- if (!this.order || !this.customer || !this.shipping) {
288
- return html`&lt;div&gt;Loading order details...&lt;/div&gt;`;
289
- }
290
-
291
- return html`
292
- &lt;div class=&quot;order-summary&quot;&gt;
293
- &lt;h2&gt;Order #${this.order.id}&lt;/h2&gt;
294
- &lt;p&gt;Customer: ${this.customer.name}&lt;/p&gt;
295
- &lt;p&gt;Shipping to: ${this.shipping.address}&lt;/p&gt;
296
- &lt;p&gt;Total: ${this.order.total}€&lt;/p&gt;
297
- &lt;/div&gt;
298
- `;
299
- }
300
- }
301
- // Somewhere in your code, update the publishers:
302
- const orderPub = PublisherManager.get(&quot;orderData&quot;);
303
- const customerPub = PublisherManager.get(&quot;customerData&quot;);
304
- const shippingPub = PublisherManager.get(&quot;shippingData&quot;);
305
- // The method will be called only when all three are set:
306
- orderPub.set({ id: &quot;123&quot;, total: 99.99 });
307
- customerPub.set({ name: &quot;John Doe&quot;, email: &quot;john@example.com&quot; });
308
- shippingPub.set({ address: &quot;123 Main St&quot; });
309
- // handleOrderReady will be called with all three values
310
- </code></pre>
311
- <h2 id="migrating-to-handle">Migrating to @handle</h2>
312
- <p><code>@handle</code> is the typed successor of <code>@onAssign</code>. The key behavioral difference: <code>@onAssign</code> waits for <strong>all</strong> values to be defined before calling the method, whereas <code>@handle</code> calls it on <strong>every</strong> assignment by default. Use the <code>waitForAllDefined</code> option to keep the old semantics.</p>
313
- <h3 id="why-migrate">Why migrate</h3>
314
- <ul>
315
- <li><strong>Typed paths</strong>: keys are <code>DataProviderKey&lt;T&gt;</code>, so the method arguments are strongly typed (no more <code>any</code>).</li>
316
- <li><strong>Explicit intent</strong>: <code>waitForAllDefined</code> and <code>skip</code> replace implicit behavior.</li>
317
- <li><strong>Single API</strong>: <code>@handle</code> covers the mono- and multi-path cases (up to 3 keys).</li>
318
- </ul>
319
- <h3 id="equivalent-semantics-waitforalldefined">Equivalent semantics (<code>waitForAllDefined</code>)</h3>
320
- <pre><code class="language-typescript">// Before
321
- @onAssign(&quot;demoUser&quot;, &quot;demoUserSettings&quot;)
322
- handleDataReady(user: any, settings: any) { /* ... */ }
323
-
324
- // After — same &quot;wait for everything&quot; behavior, but typed
325
- const user = new DataProviderKey&amp;lt;User&amp;gt;(&quot;demoUser&quot;);
326
- const settings = new DataProviderKey&amp;lt;Settings&amp;gt;(&quot;demoUserSettings&quot;);
327
-
328
- @handle(user, settings, { waitForAllDefined: true })
329
- handleDataReady(user: User, settings: Settings) { /* ... */ }
330
- </code></pre>
331
- <h3 id="single-path">Single path</h3>
332
- <pre><code class="language-typescript">// Before
333
- @onAssign(&quot;settings.modules.logs_route.enabled&quot;)
334
- onLogRoute(value: boolean) { /* ... */ }
335
-
336
- // After
337
- const settings = new DataProviderKey&amp;lt;AppSettings&amp;gt;(&quot;settings&quot;);
338
-
339
- @handle(settings.modules.logs_route.enabled)
340
- onLogRoute(value: boolean) { /* ... */ }
341
- </code></pre>
342
- <h3 id="4-paths">4+ paths</h3>
343
- <p><code>@handle</code> is capped at 3 keys. For the rare case of 4 or more publishers, keep <code>@onAssign</code> for now, or split the logic into several <code>@handle</code> methods that each store their value and call a shared method (guarding against partial values).</p>
344
- <h2 id="notes">Notes</h2>
345
- <ul>
346
- <li>This decorator works with any component that has <code>connectedCallback</code> and <code>disconnectedCallback</code> methods (such as <code>LitElement</code> or components extending <code>Subscriber</code>)</li>
347
- <li>The method is called synchronously when all publishers are ready</li>
348
- <li>If you need to update the UI, remember to call <code>this.requestUpdate()</code> inside the method</li>
349
- <li>For more information about publishers, see the documentation on <a href="../_getting-started/pubsub.html#pubsub">Sharing data</a></li>
350
- </ul>
351
-
352
- </article>
353
- </main>
354
- </body>
355
- </html>
package/docs/crawl/docs/_decorators/patch.html DELETED
@@ -1,78 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/patch.html" data-doc-id="docs/_decorators/patch">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>@patch — Concorde</title>
7
- <meta name="description" content="@patch applies a partial update with the body from a publisher. It uses the">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_decorators/patch, patch, @patch, 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/patch">
12
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/patch.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/patch.md/patch" rel="nofollow">interactive version</a></p>
17
- </header>
18
- <main>
19
- <article>
20
- <p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @patch</strong>. @patch applies a partial update with the body from a publisher. It uses the <span>Doc ID: <code>docs/_decorators/patch</code>. Keywords: Concorde, supersoniks, docs/_decorators/patch, patch, @patch, 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/patch.html">https://concorde.supersoniks.org/crawl/docs/_decorators/patch.html</a>.</span></p>
23
- <h1 id="patch">@patch</h1>
24
- <p><code>@patch</code> applies a partial update with the body from a publisher. It uses 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;Partial&lt;User&gt;&gt;(&quot;users.patch&quot;);
30
- const patchUser = patch(new Endpoint&lt;User&gt;(&quot;users/42&quot;), bodyKey);
31
-
32
- @patchUser
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">@patch(new Endpoint&lt;User&gt;(&quot;users/42&quot;), bodyKey)
38
- handlePatch(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 savePatch() {
44
- await patchUser.send(this);
45
- }
46
- </code></pre>
47
- <p><code>send(component)</code> returns a Promise resolved after the PATCH 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 PATCH is also sent automatically when the body mutates, unless
51
- <code>autoPostOnBodyMutation: false</code> is set. The available options are described in
52
- <a href="./post.html#post">@post</a>:</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">@patch(endpoint, bodyKey, apiConfigurationKey)
62
- </code></pre>
63
- <h2 id="import">Import</h2>
64
- <pre><code class="language-typescript">import { patch, 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="./put.html#put">@put</a> — full replacement</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>