@supersoniks/concorde 5.1.2 → 5.1.3-immutable.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (497) hide show
  1. package/.agents/skills/concorde-docs/SKILL.md +1 -1
  2. package/.claude/skills +1 -0
  3. package/.github/workflows/ci.yml +21 -0
  4. package/.github-export-ignore +30 -0
  5. package/CONTRIBUTING.md +59 -0
  6. package/DEV.md +54 -0
  7. package/LICENSE +21 -0
  8. package/OPEN_SOURCE_CHECKPOINT.md +133 -0
  9. package/README.md +1 -1
  10. package/ai/README.md +29 -41
  11. package/ai/skills/concorde/SKILL.md +54 -324
  12. package/ai/skills/concorde/rules/composition.md +32 -0
  13. package/ai/skills/concorde/rules/data.md +47 -0
  14. package/ai/skills/concorde/rules/http.md +25 -0
  15. package/ai/skills/concorde/rules/lists-forms.md +35 -0
  16. package/ai/skills/concorde/rules/styling.md +46 -0
  17. package/ai/skills/concorde/rules/troubleshooting.md +45 -0
  18. package/build-infos.json +1 -1
  19. package/concorde-core.bundle.js +177 -177
  20. package/concorde-core.es.js +5183 -5018
  21. package/custom-elements-manifest.public.config.mjs +8 -0
  22. package/{.tmp-cem/custom-elements.json → custom-elements.json} +11722 -8868
  23. package/dist/concorde-core.bundle.js +177 -177
  24. package/dist/concorde-core.es.js +5183 -5018
  25. package/dist/docs-mock-api-sw.js +58 -223
  26. package/dist/docs-mock-api-sw.js.map +4 -4
  27. package/dist/img/og-concorde.jpg +0 -0
  28. package/dist/robots.txt +11 -10
  29. package/docs/assets/index-CD4WyL6o.css +1 -0
  30. package/docs/assets/index-D_alEsng.js +12122 -0
  31. package/docs/crawl/core/components/functional/date/date.html +190 -0
  32. package/docs/crawl/core/components/functional/fetch/fetch.html +109 -0
  33. package/docs/crawl/core/components/functional/if/if.html +27 -0
  34. package/docs/crawl/core/components/functional/jsonata/jsonata.html +79 -0
  35. package/docs/crawl/core/components/functional/list/list.html +70 -0
  36. package/docs/crawl/core/components/functional/mix/mix.html +45 -0
  37. package/docs/crawl/core/components/functional/queue/queue.html +96 -0
  38. package/docs/crawl/core/components/functional/router/router.html +106 -0
  39. package/docs/{core → crawl/core}/components/functional/sdui/sdui-extension-points.html +8 -9
  40. package/docs/crawl/core/components/functional/sdui/sdui.html +368 -0
  41. package/docs/crawl/core/components/functional/states/states.html +66 -0
  42. package/docs/crawl/core/components/functional/submit/submit.html +160 -0
  43. package/docs/{core → crawl/core}/components/functional/subscriber/subscriber.html +5 -6
  44. package/docs/crawl/core/components/functional/value/value.html +51 -0
  45. package/docs/{core → crawl/core}/components/ui/alert/alert.html +63 -53
  46. package/docs/{core → crawl/core}/components/ui/alert-messages/alert-messages.html +5 -6
  47. package/docs/{core → crawl/core}/components/ui/badge/badge.html +33 -33
  48. package/docs/crawl/core/components/ui/button/button.html +150 -0
  49. package/docs/crawl/core/components/ui/captcha/captcha.html +112 -0
  50. package/docs/{core → crawl/core}/components/ui/card/card.html +11 -12
  51. package/docs/{core → crawl/core}/components/ui/divider/divider.html +14 -14
  52. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +73 -0
  53. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +266 -0
  54. package/docs/{core → crawl/core}/components/ui/form/form-actions/form-actions.html +23 -23
  55. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +121 -0
  56. package/docs/crawl/core/components/ui/form/input/input.html +109 -0
  57. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +38 -0
  58. package/docs/crawl/core/components/ui/form/radio/radio.html +56 -0
  59. package/docs/crawl/core/components/ui/form/select/select.html +73 -0
  60. package/docs/crawl/core/components/ui/form/switch/switch.html +56 -0
  61. package/docs/crawl/core/components/ui/form/textarea/textarea.html +59 -0
  62. package/docs/crawl/core/components/ui/group/group.html +104 -0
  63. package/docs/{core → crawl/core}/components/ui/icon/icon.html +9 -10
  64. package/docs/crawl/core/components/ui/image/image.html +298 -0
  65. package/docs/{core → crawl/core}/components/ui/link/link.html +11 -12
  66. package/docs/crawl/core/components/ui/loader/loader.html +124 -0
  67. package/docs/{core → crawl/core}/components/ui/menu/menu.html +33 -34
  68. package/docs/crawl/core/components/ui/modal/modal.html +342 -0
  69. package/docs/crawl/core/components/ui/pop/pop.html +296 -0
  70. package/docs/{core → crawl/core}/components/ui/progress/progress.html +7 -8
  71. package/docs/crawl/core/components/ui/table/table.html +545 -0
  72. package/docs/crawl/core/components/ui/theme/theme.html +131 -0
  73. package/docs/crawl/core/components/ui/toast/toast.html +233 -0
  74. package/docs/crawl/core/components/ui/tooltip/tooltip.html +140 -0
  75. package/docs/{docs/getting-started → crawl/docs/_core-concept}/dataFlow.html +29 -26
  76. package/docs/crawl/docs/_core-concept/overview.html +66 -0
  77. package/docs/crawl/docs/_core-concept/subscriber.html +75 -0
  78. package/docs/crawl/docs/_decorators/ancestor-attribute.html +117 -0
  79. package/docs/crawl/docs/_decorators/auto-subscribe.html +202 -0
  80. package/docs/crawl/docs/_decorators/bind.html +141 -0
  81. package/docs/crawl/docs/_decorators/get.html +149 -0
  82. package/docs/crawl/docs/_decorators/handle.html +165 -0
  83. package/docs/crawl/docs/_decorators/on-assign.html +355 -0
  84. package/docs/crawl/docs/_decorators/patch.html +78 -0
  85. package/docs/crawl/docs/_decorators/post.html +139 -0
  86. package/docs/crawl/docs/_decorators/publish.html +61 -0
  87. package/docs/crawl/docs/_decorators/put.html +78 -0
  88. package/docs/crawl/docs/_decorators/subscribe.html +109 -0
  89. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +137 -0
  90. package/docs/crawl/docs/_directives/sub.html +93 -0
  91. package/docs/{docs/getting-started → crawl/docs/_getting-started}/ai-agents.html +11 -12
  92. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +100 -0
  93. package/docs/crawl/docs/_getting-started/concorde-outside.html +58 -0
  94. package/docs/{docs/getting-started → crawl/docs/_getting-started}/create-a-component.html +14 -11
  95. package/docs/{docs/getting-started → crawl/docs/_getting-started}/my-first-component.html +22 -13
  96. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +110 -0
  97. package/docs/crawl/docs/_getting-started/pubsub.html +62 -0
  98. package/docs/crawl/docs/_getting-started/start.html +76 -0
  99. package/docs/{docs/getting-started → crawl/docs/_getting-started}/theming.html +9 -10
  100. package/docs/{docs/misc → crawl/docs/_misc}/api-configuration.html +18 -18
  101. package/docs/{docs/misc → crawl/docs/_misc}/dataProviderKey.html +11 -12
  102. package/docs/{docs/misc → crawl/docs/_misc}/docs-mock-api.html +28 -25
  103. package/docs/{docs/misc → crawl/docs/_misc}/dynamic-path.html +15 -16
  104. package/docs/{docs/misc → crawl/docs/_misc}/endpoint.html +15 -16
  105. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +138 -0
  106. package/docs/{docs/misc → crawl/docs/_misc}/html-integration.html +15 -12
  107. package/docs/crawl/hubs/decorators.html +547 -0
  108. package/docs/crawl/hubs/form-components.html +381 -0
  109. package/docs/crawl/hubs/remote-data.html +452 -0
  110. package/docs/crawl/index.html +103 -0
  111. package/docs/docs-mock-api-sw.js +223 -58
  112. package/docs/docs-mock-api-sw.js.map +4 -4
  113. package/docs/index.html +68 -95
  114. package/docs/llms-full.txt +3610 -2231
  115. package/docs/llms.txt +86 -94
  116. package/docs/robots.txt +10 -11
  117. package/docs/sitemap.xml +84 -78
  118. package/docs/src/core/components/functional/date/date.md +231 -91
  119. package/docs/src/core/components/functional/fetch/fetch.md +83 -66
  120. package/docs/src/core/components/functional/if/if.md +3 -28
  121. package/docs/src/core/components/functional/jsonata/jsonata.md +37 -42
  122. package/docs/src/core/components/functional/list/list.md +43 -99
  123. package/docs/src/core/components/functional/mix/mix.md +26 -31
  124. package/docs/src/core/components/functional/queue/queue.md +61 -40
  125. package/docs/src/core/components/functional/router/router.md +65 -64
  126. package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
  127. package/docs/src/core/components/functional/sdui/component-catalog.json +1 -1
  128. package/docs/src/core/components/functional/sdui/example.json +86 -19
  129. package/docs/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
  130. package/docs/src/core/components/functional/sdui/sdui.md +358 -187
  131. package/docs/src/core/components/functional/states/states.md +61 -86
  132. package/docs/src/core/components/functional/submit/submit.md +72 -64
  133. package/docs/src/core/components/functional/value/value.md +22 -34
  134. package/docs/src/core/components/ui/alert/alert.md +58 -48
  135. package/docs/src/core/components/ui/badge/badge.md +34 -27
  136. package/docs/src/core/components/ui/button/button.md +106 -139
  137. package/docs/src/core/components/ui/captcha/captcha.md +32 -17
  138. package/docs/src/core/components/ui/card/card.md +6 -6
  139. package/docs/src/core/components/ui/divider/divider.md +11 -8
  140. package/docs/src/core/components/ui/form/checkbox/checkbox.md +42 -90
  141. package/docs/src/core/components/ui/form/fieldset/fieldset.md +75 -31
  142. package/docs/src/core/components/ui/form/form-actions/form-actions.md +16 -14
  143. package/docs/src/core/components/ui/form/form-layout/form-layout.md +29 -19
  144. package/docs/src/core/components/ui/form/input/input.md +95 -95
  145. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +29 -0
  146. package/docs/src/core/components/ui/form/radio/radio.md +34 -55
  147. package/docs/src/core/components/ui/form/select/select.md +45 -60
  148. package/docs/src/core/components/ui/form/switch/switch.md +34 -57
  149. package/docs/src/core/components/ui/form/textarea/textarea.md +38 -55
  150. package/docs/src/core/components/ui/group/group.md +33 -35
  151. package/docs/src/core/components/ui/icon/icon.md +4 -4
  152. package/docs/src/core/components/ui/image/image.md +107 -41
  153. package/docs/src/core/components/ui/link/link.md +6 -6
  154. package/docs/src/core/components/ui/loader/loader.md +55 -30
  155. package/docs/src/core/components/ui/menu/menu.md +27 -27
  156. package/docs/src/core/components/ui/modal/modal.md +96 -72
  157. package/docs/src/core/components/ui/pop/pop.md +158 -80
  158. package/docs/src/core/components/ui/progress/progress.md +2 -2
  159. package/docs/src/core/components/ui/table/table.md +255 -91
  160. package/docs/src/core/components/ui/theme/theme.md +36 -11
  161. package/docs/src/core/components/ui/toast/toast.md +117 -48
  162. package/docs/src/core/components/ui/tooltip/tooltip.md +62 -27
  163. package/docs/{docs/getting-started → src/docs/_core-concept}/dataFlow.md +18 -17
  164. package/docs/src/docs/_core-concept/overview.md +57 -0
  165. package/docs/src/docs/_core-concept/subscriber.md +75 -0
  166. package/docs/src/docs/_decorators/ancestor-attribute.md +128 -0
  167. package/docs/src/docs/_decorators/auto-subscribe.md +202 -0
  168. package/docs/src/docs/_decorators/bind.md +167 -0
  169. package/docs/src/docs/_decorators/get.md +162 -0
  170. package/docs/src/docs/_decorators/handle.md +175 -0
  171. package/docs/src/docs/_decorators/on-assign.md +390 -0
  172. package/docs/src/docs/_decorators/patch.md +70 -0
  173. package/docs/src/docs/_decorators/post.md +146 -0
  174. package/docs/src/docs/_decorators/publish.md +55 -0
  175. package/docs/src/docs/_decorators/put.md +70 -0
  176. package/docs/src/docs/_decorators/subscribe.md +100 -0
  177. package/docs/src/docs/_decorators/wait-for-ancestors.md +163 -0
  178. package/docs/src/docs/_directives/sub.md +91 -0
  179. package/docs/src/docs/{getting-started → _getting-started}/ai-agents.md +3 -3
  180. package/docs/src/docs/_getting-started/concorde-manual-install.md +133 -0
  181. package/docs/src/docs/_getting-started/concorde-outside.md +33 -0
  182. package/docs/{docs/getting-started → src/docs/_getting-started}/create-a-component.md +6 -3
  183. package/docs/src/docs/{getting-started → _getting-started}/my-first-component.md +14 -5
  184. package/docs/src/docs/_getting-started/my-first-subscriber.md +120 -0
  185. package/docs/src/docs/_getting-started/pubsub.md +37 -0
  186. package/docs/src/docs/{getting-started → _getting-started}/start.md +13 -1
  187. package/docs/src/docs/{getting-started → _getting-started}/theming.md +2 -2
  188. package/docs/src/docs/{misc → _misc}/api-configuration.md +12 -10
  189. package/docs/src/docs/{misc → _misc}/dataProviderKey.md +4 -4
  190. package/docs/{docs/misc → src/docs/_misc}/docs-mock-api.md +13 -12
  191. package/docs/{docs/misc → src/docs/_misc}/dynamic-path.md +8 -8
  192. package/docs/{docs/misc → src/docs/_misc}/endpoint.md +8 -8
  193. package/docs/src/docs/_misc/formelement-subscriber-removal.md +115 -0
  194. package/docs/{docs/misc → src/docs/_misc}/html-integration.md +5 -4
  195. package/docs/src/docs/search/docs-search.json +4375 -2420
  196. package/docs/src/tsconfig.declarations.json +22 -0
  197. package/docs/src/tsconfig.emit.json +23 -0
  198. package/docs/src/tsconfig.json +2 -23
  199. package/gitlab/job_github_mirror.sh +39 -0
  200. package/index.html +89 -0
  201. package/package.json +22 -4
  202. package/public/img/og-concorde.jpg +0 -0
  203. package/scripts/ai-init.mjs +104 -379
  204. package/scripts/ai-init.test.mjs +81 -239
  205. package/scripts/docs-markdown-vite-plugin.ts +11 -5
  206. package/scripts/docs-public-url.mjs +6 -0
  207. package/scripts/docs.htaccess +7 -0
  208. package/scripts/generate-cem.mjs +244 -0
  209. package/scripts/generate-cem.test.mjs +122 -0
  210. package/scripts/generate-crawl-docs.mjs +29 -5
  211. package/scripts/generate-sdui-catalog.mjs +11 -10
  212. package/scripts/github-export.mjs +150 -0
  213. package/scripts/post-build-docs.js +3 -0
  214. package/scripts/post-build.mjs +0 -0
  215. package/scripts/pre-publish.mjs +2 -1
  216. package/scripts/site-pages.mjs +212 -0
  217. package/scripts/site-pages.test.mjs +116 -0
  218. package/site-pages/about.md +22 -0
  219. package/site-pages/privacy.md +32 -0
  220. package/src/core/components/functional/date/date.md +1 -1
  221. package/src/core/components/functional/example/example.ts +3 -1
  222. package/src/core/components/functional/if/if.ts +0 -0
  223. package/src/core/components/functional/list/list.demo.ts +0 -0
  224. package/src/core/components/functional/list/list.md +6 -2
  225. package/src/core/components/functional/list/list.ts +17 -4
  226. package/src/core/components/functional/mix/mix.md +0 -0
  227. package/src/core/components/functional/router/router.demo.ts +0 -0
  228. package/src/core/components/functional/router/router.ts +0 -0
  229. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +0 -0
  230. package/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
  231. package/src/core/components/functional/sdui/component-catalog.json +2 -2
  232. package/src/core/components/functional/sdui/example.json +0 -0
  233. package/src/core/components/functional/sdui/sdui-immutable.spec.ts +74 -0
  234. package/src/core/components/functional/sdui/sdui.ts +33 -8
  235. package/src/core/components/functional/sdui/types.ts +0 -0
  236. package/src/core/components/functional/states/states.ts +0 -0
  237. package/src/core/components/functional/submit/submit.spec.ts +60 -0
  238. package/src/core/components/functional/submit/submit.ts +6 -3
  239. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  240. package/src/core/components/functional/value/value.md +0 -0
  241. package/src/core/components/functional/value/value.ts +0 -0
  242. package/src/core/components/ui/_css/size.ts +0 -0
  243. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  244. package/src/core/components/ui/card/card.md +1 -1
  245. package/src/core/components/ui/form/input/input.md +19 -1
  246. package/src/core/components/ui/form/input/input.ts +8 -2
  247. package/src/core/components/ui/form/radio/radio.md +14 -0
  248. package/src/core/components/ui/image/image.md +17 -17
  249. package/src/core/components/ui/modal/modal.md +2 -2
  250. package/src/core/decorators/subscriber/bind.ts +9 -14
  251. package/src/core/decorators/subscriber/subscribe.ts +15 -9
  252. package/src/core/decorators/subscriber/subscribe.type-test.ts +14 -5
  253. package/src/core/mixins/Subscriber.ts +0 -0
  254. package/src/core/utils/DataBindObserver.ts +0 -0
  255. package/src/core/utils/Objects.ts +0 -0
  256. package/src/core/utils/PublisherProxy.ts +166 -125
  257. package/src/core/utils/deepReadonly.spec.ts +66 -0
  258. package/src/core/utils/deepReadonly.ts +71 -0
  259. package/src/core/utils/immutableValue.spec.ts +58 -0
  260. package/src/core/utils/immutableValue.ts +116 -0
  261. package/src/core/utils/nestedDotForm.spec.ts +88 -0
  262. package/src/core/utils/publisherImmutable.spec.ts +127 -0
  263. package/src/core/utils/route.ts +0 -0
  264. package/src/core/utils/strictGet.spec.ts +61 -0
  265. package/src/core/utils/strictGet.ts +102 -0
  266. package/src/css.d.ts +19 -0
  267. package/src/docs/components/docs-demo-sources.ts +3 -3
  268. package/src/docs/decorators/bind.md +23 -24
  269. package/src/docs/docs-location.spec.ts +10 -0
  270. package/src/docs/docs-location.ts +10 -0
  271. package/src/docs/example/decorators-demo-bind-demos.ts +11 -28
  272. package/src/docs/example/docs-toggle-demos.ts +1 -1
  273. package/src/docs/example/users.ts +0 -0
  274. package/src/docs/getting-started/ai-agents.md +51 -51
  275. package/src/docs/getting-started/dataFlow.md +2 -2
  276. package/src/docs/home/home.ts +3 -1
  277. package/src/docs/misc/publisher-get-immutability-docs-crawl.json +902 -0
  278. package/src/docs/misc/publisher-get-immutability-docs-recheck.json +13 -0
  279. package/src/docs/misc/publisher-get-immutability-study.md +229 -0
  280. package/src/docs/navigation/navigation.ts +5 -1
  281. package/src/docs/search/docs-search.json +358 -58
  282. package/src/docs/search/markdown-renderer.ts +6 -1
  283. package/src/docs/tailwind/css/docs/content.css +4 -5
  284. package/src/tsconfig.declarations.json +22 -0
  285. package/src/tsconfig.emit.json +23 -0
  286. package/src/tsconfig.json +53 -5
  287. package/src/tsconfig.tsbuildinfo +1 -1
  288. package/.taste-skill/after/desktop-fold.jpg +0 -0
  289. package/.taste-skill/after/desktop-page-01.jpg +0 -0
  290. package/.taste-skill/after/desktop-page-02.jpg +0 -0
  291. package/.taste-skill/after/desktop-page-03.jpg +0 -0
  292. package/.taste-skill/after/mobile-fold.jpg +0 -0
  293. package/.taste-skill/after/mobile-page-01.jpg +0 -0
  294. package/.taste-skill/after/report.json +0 -4103
  295. package/.taste-skill/after/tablet-fold.jpg +0 -0
  296. package/.taste-skill/after/tablet-page-01.jpg +0 -0
  297. package/.taste-skill/after/tablet-page-02.jpg +0 -0
  298. package/.taste-skill/before/desktop-fold.jpg +0 -0
  299. package/.taste-skill/before/desktop-page-01.jpg +0 -0
  300. package/.taste-skill/before/desktop-page-02.jpg +0 -0
  301. package/.taste-skill/before/mobile-fold.jpg +0 -0
  302. package/.taste-skill/before/mobile-page-01.jpg +0 -0
  303. package/.taste-skill/before/report.json +0 -2556
  304. package/.taste-skill/before/tablet-fold.jpg +0 -0
  305. package/.taste-skill/before/tablet-page-01.jpg +0 -0
  306. package/.taste-skill/direction.json +0 -510
  307. package/.taste-skill/notes.md +0 -84
  308. package/.taste-skill/prod/desktop-fold.jpg +0 -0
  309. package/.taste-skill/prod/desktop-page-01.jpg +0 -0
  310. package/.taste-skill/prod/desktop-page-02.jpg +0 -0
  311. package/.taste-skill/prod/desktop-page-03.jpg +0 -0
  312. package/.taste-skill/prod/mobile-fold.jpg +0 -0
  313. package/.taste-skill/prod/mobile-page-01.jpg +0 -0
  314. package/.taste-skill/prod/mobile-page-02.jpg +0 -0
  315. package/.taste-skill/prod/report.json +0 -1973
  316. package/.taste-skill/prod/tablet-fold.jpg +0 -0
  317. package/.taste-skill/prod/tablet-page-01.jpg +0 -0
  318. package/.taste-skill/prod/tablet-page-02.jpg +0 -0
  319. package/AUDIT.md +0 -228
  320. package/PLAN-AMELIORATION.md +0 -220
  321. package/PLAN-DOCS-AGENTS.md +0 -80
  322. package/ai/AGENTS.md +0 -56
  323. package/ai/cursor/rules/concorde-menu.mdc +0 -15
  324. package/ai/cursor/rules/concorde-scope.mdc +0 -14
  325. package/ai/cursor/rules/concorde-theme.mdc +0 -13
  326. package/ai/cursor/rules/concorde.mdc +0 -66
  327. package/ai/jetbrains/rules/concorde.md +0 -53
  328. package/ai/skills/concorde-get-set-dp/SKILL.md +0 -194
  329. package/ai/skills/concorde-imports/SKILL.md +0 -78
  330. package/ai/skills/concorde-menu/SKILL.md +0 -74
  331. package/ai/skills/concorde-scope/SKILL.md +0 -70
  332. package/ai/skills/concorde-theme/SKILL.md +0 -57
  333. package/docs/.htaccess +0 -75
  334. package/docs/404.html +0 -15
  335. package/docs/404.md +0 -5
  336. package/docs/assets/index-BgG6FFPt.js +0 -11765
  337. package/docs/assets/index-x89XINSG.css +0 -1
  338. package/docs/core/components/functional/date/date.html +0 -211
  339. package/docs/core/components/functional/date/date.md +0 -150
  340. package/docs/core/components/functional/fetch/fetch.html +0 -180
  341. package/docs/core/components/functional/fetch/fetch.md +0 -108
  342. package/docs/core/components/functional/if/if.html +0 -65
  343. package/docs/core/components/functional/if/if.md +0 -34
  344. package/docs/core/components/functional/jsonata/jsonata.html +0 -110
  345. package/docs/core/components/functional/jsonata/jsonata.md +0 -61
  346. package/docs/core/components/functional/list/list.html +0 -198
  347. package/docs/core/components/functional/list/list.md +0 -121
  348. package/docs/core/components/functional/mix/mix.html +0 -78
  349. package/docs/core/components/functional/mix/mix.md +0 -46
  350. package/docs/core/components/functional/queue/queue.html +0 -155
  351. package/docs/core/components/functional/queue/queue.md +0 -51
  352. package/docs/core/components/functional/router/router.html +0 -154
  353. package/docs/core/components/functional/router/router.md +0 -93
  354. package/docs/core/components/functional/sdui/sdui-extension-points.md +0 -94
  355. package/docs/core/components/functional/sdui/sdui.html +0 -397
  356. package/docs/core/components/functional/sdui/sdui.md +0 -307
  357. package/docs/core/components/functional/states/states.html +0 -141
  358. package/docs/core/components/functional/states/states.md +0 -112
  359. package/docs/core/components/functional/submit/submit.html +0 -178
  360. package/docs/core/components/functional/submit/submit.md +0 -106
  361. package/docs/core/components/functional/subscriber/subscriber.md +0 -91
  362. package/docs/core/components/functional/translation/translation.html +0 -60
  363. package/docs/core/components/functional/translation/translation.md +0 -38
  364. package/docs/core/components/functional/value/value.html +0 -81
  365. package/docs/core/components/functional/value/value.md +0 -47
  366. package/docs/core/components/ui/alert/alert.md +0 -186
  367. package/docs/core/components/ui/alert-messages/alert-messages.md +0 -85
  368. package/docs/core/components/ui/badge/badge.md +0 -181
  369. package/docs/core/components/ui/button/button.html +0 -309
  370. package/docs/core/components/ui/button/button.md +0 -216
  371. package/docs/core/components/ui/captcha/captcha.html +0 -80
  372. package/docs/core/components/ui/captcha/captcha.md +0 -56
  373. package/docs/core/components/ui/card/card.md +0 -215
  374. package/docs/core/components/ui/divider/divider.md +0 -126
  375. package/docs/core/components/ui/form/checkbox/checkbox.html +0 -200
  376. package/docs/core/components/ui/form/checkbox/checkbox.md +0 -125
  377. package/docs/core/components/ui/form/fieldset/fieldset.html +0 -238
  378. package/docs/core/components/ui/form/fieldset/fieldset.md +0 -161
  379. package/docs/core/components/ui/form/form-actions/form-actions.md +0 -98
  380. package/docs/core/components/ui/form/form-layout/form-layout.html +0 -115
  381. package/docs/core/components/ui/form/form-layout/form-layout.md +0 -109
  382. package/docs/core/components/ui/form/input/input.html +0 -235
  383. package/docs/core/components/ui/form/input/input.md +0 -142
  384. package/docs/core/components/ui/form/radio/radio.html +0 -144
  385. package/docs/core/components/ui/form/radio/radio.md +0 -78
  386. package/docs/core/components/ui/form/select/select.html +0 -178
  387. package/docs/core/components/ui/form/select/select.md +0 -86
  388. package/docs/core/components/ui/form/switch/switch.html +0 -146
  389. package/docs/core/components/ui/form/switch/switch.md +0 -80
  390. package/docs/core/components/ui/form/textarea/textarea.html +0 -162
  391. package/docs/core/components/ui/form/textarea/textarea.md +0 -82
  392. package/docs/core/components/ui/group/group.html +0 -113
  393. package/docs/core/components/ui/group/group.md +0 -77
  394. package/docs/core/components/ui/icon/icon.md +0 -214
  395. package/docs/core/components/ui/image/image.html +0 -194
  396. package/docs/core/components/ui/image/image.md +0 -167
  397. package/docs/core/components/ui/link/link.md +0 -81
  398. package/docs/core/components/ui/loader/loader.html +0 -114
  399. package/docs/core/components/ui/loader/loader.md +0 -87
  400. package/docs/core/components/ui/menu/menu.md +0 -370
  401. package/docs/core/components/ui/modal/modal.html +0 -324
  402. package/docs/core/components/ui/modal/modal.md +0 -211
  403. package/docs/core/components/ui/pop/pop.html +0 -250
  404. package/docs/core/components/ui/pop/pop.md +0 -216
  405. package/docs/core/components/ui/progress/progress.md +0 -109
  406. package/docs/core/components/ui/table/table.html +0 -333
  407. package/docs/core/components/ui/table/table.md +0 -267
  408. package/docs/core/components/ui/theme/theme.html +0 -116
  409. package/docs/core/components/ui/theme/theme.md +0 -97
  410. package/docs/core/components/ui/toast/toast.html +0 -185
  411. package/docs/core/components/ui/toast/toast.md +0 -147
  412. package/docs/core/components/ui/tooltip/tooltip.html +0 -112
  413. package/docs/core/components/ui/tooltip/tooltip.md +0 -89
  414. package/docs/docs/decorators/ancestor-attribute.html +0 -71
  415. package/docs/docs/decorators/ancestor-attribute.md +0 -59
  416. package/docs/docs/decorators/auto-subscribe.html +0 -61
  417. package/docs/docs/decorators/auto-subscribe.md +0 -40
  418. package/docs/docs/decorators/bind.html +0 -86
  419. package/docs/docs/decorators/bind.md +0 -77
  420. package/docs/docs/decorators/get.html +0 -166
  421. package/docs/docs/decorators/get.md +0 -160
  422. package/docs/docs/decorators/handle.html +0 -139
  423. package/docs/docs/decorators/handle.md +0 -119
  424. package/docs/docs/decorators/on-assign.html +0 -72
  425. package/docs/docs/decorators/on-assign.md +0 -63
  426. package/docs/docs/decorators/patch.html +0 -76
  427. package/docs/docs/decorators/patch.md +0 -44
  428. package/docs/docs/decorators/post.html +0 -150
  429. package/docs/docs/decorators/post.md +0 -134
  430. package/docs/docs/decorators/publish.html +0 -74
  431. package/docs/docs/decorators/publish.md +0 -56
  432. package/docs/docs/decorators/put.html +0 -83
  433. package/docs/docs/decorators/put.md +0 -51
  434. package/docs/docs/decorators/subscribe.html +0 -91
  435. package/docs/docs/decorators/subscribe.md +0 -87
  436. package/docs/docs/decorators/wait-for-ancestors.html +0 -82
  437. package/docs/docs/decorators/wait-for-ancestors.md +0 -76
  438. package/docs/docs/directives/sub.html +0 -79
  439. package/docs/docs/directives/sub.md +0 -75
  440. package/docs/docs/directives/t.html +0 -91
  441. package/docs/docs/directives/t.md +0 -73
  442. package/docs/docs/getting-started/ai-agents.md +0 -76
  443. package/docs/docs/getting-started/components.html +0 -27
  444. package/docs/docs/getting-started/components.md +0 -5
  445. package/docs/docs/getting-started/installation.html +0 -69
  446. package/docs/docs/getting-started/installation.md +0 -36
  447. package/docs/docs/getting-started/my-first-component.md +0 -227
  448. package/docs/docs/getting-started/start.html +0 -47
  449. package/docs/docs/getting-started/start.md +0 -35
  450. package/docs/docs/getting-started/theming.md +0 -253
  451. package/docs/docs/index.html +0 -99
  452. package/docs/docs/misc/api-configuration.md +0 -79
  453. package/docs/docs/misc/dataProviderKey.md +0 -168
  454. package/docs/hubs/decorators.html +0 -443
  455. package/docs/hubs/form-components.html +0 -404
  456. package/docs/hubs/remote-data.html +0 -371
  457. package/docs/img/archive/concorde-001-2cv.webp +0 -0
  458. package/docs/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  459. package/docs/img/archive/concorde-red-arrows-2002.webm +0 -0
  460. package/docs/img/archive/credits.json +0 -28
  461. package/docs/index.md +0 -22
  462. package/docs/src/core/components/functional/translation/translation.md +0 -38
  463. package/docs/src/docs/decorators/ancestor-attribute.md +0 -59
  464. package/docs/src/docs/decorators/auto-subscribe.md +0 -40
  465. package/docs/src/docs/decorators/bind.md +0 -77
  466. package/docs/src/docs/decorators/get.md +0 -160
  467. package/docs/src/docs/decorators/handle.md +0 -119
  468. package/docs/src/docs/decorators/on-assign.md +0 -63
  469. package/docs/src/docs/decorators/patch.md +0 -44
  470. package/docs/src/docs/decorators/post.md +0 -134
  471. package/docs/src/docs/decorators/publish.md +0 -56
  472. package/docs/src/docs/decorators/put.md +0 -51
  473. package/docs/src/docs/decorators/subscribe.md +0 -87
  474. package/docs/src/docs/decorators/wait-for-ancestors.md +0 -76
  475. package/docs/src/docs/directives/sub.md +0 -75
  476. package/docs/src/docs/directives/t.md +0 -73
  477. package/docs/src/docs/getting-started/components.md +0 -5
  478. package/docs/src/docs/getting-started/create-a-component.md +0 -136
  479. package/docs/src/docs/getting-started/dataFlow.md +0 -87
  480. package/docs/src/docs/getting-started/installation.md +0 -36
  481. package/docs/src/docs/misc/docs-mock-api.md +0 -62
  482. package/docs/src/docs/misc/dynamic-path.md +0 -71
  483. package/docs/src/docs/misc/endpoint.md +0 -45
  484. package/docs/src/docs/misc/html-integration.md +0 -14
  485. /package/{docs → dist}/img/concorde/plane_01.jpg +0 -0
  486. /package/{docs → dist}/img/concorde/plane_02.jpg +0 -0
  487. /package/{docs → dist}/img/concorde/plane_03.jpg +0 -0
  488. /package/{docs → dist}/img/concorde/plane_04.jpg +0 -0
  489. /package/{docs → dist}/img/concorde/plane_05.jpg +0 -0
  490. /package/{docs → dist}/img/concorde/plane_06.jpg +0 -0
  491. /package/{docs → dist}/img/concorde/plane_07.jpg +0 -0
  492. /package/{docs → dist}/img/concorde/plane_08.jpg +0 -0
  493. /package/{docs → dist}/img/concorde/plane_09.jpg +0 -0
  494. /package/{docs → dist}/img/concorde/plane_10.jpg +0 -0
  495. /package/{docs → dist}/img/concorde/plane_11.jpg +0 -0
  496. /package/{docs → dist}/img/concorde/plane_12.jpg +0 -0
  497. /package/{docs → dist}/img/concorde/plane_13.jpg +0 -0
package/docs/{docs/getting-started → crawl/docs/_core-concept}/dataFlow.html RENAMED
@@ -1,24 +1,23 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en" data-doc-url="https://concorde.supersoniks.org/docs/getting-started/dataFlow" data-doc-id="docs/getting-started/dataFlow">
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_core-concept/dataFlow.html" data-doc-id="docs/_core-concept/dataFlow">
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Data flow — Concorde by Supersoniks</title>
7
- <meta name="description" content="Recommended patterns for new Concorde apps (Lit + TypeScript). Under the hood, data lives in a DataProvider store.">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/getting-started/dataFlow, dataFlow, Data flow, guide, DataProvider, get, set, dp, DataProviderKey, sub(key), @subscribe, @state, @ancestorAttribute">
9
- <meta name="concorde-doc-id" content="docs/getting-started/dataFlow">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/docs/getting-started/dataFlow">
11
- <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/docs/getting-started/dataFlow.md">
6
+ <title>Data flow — Concorde</title>
7
+ <meta name="description" content="Recommended patterns for new Concorde apps (Lit + TypeScript). Under the hood, data lives in a DataProvider store (legacy Publisher API: Legacy: Sharing data).">
8
+ <meta name="keywords" content="Concorde, supersoniks, docs/_core-concept/dataFlow, dataFlow, Data flow, concept, DataProvider, get, set, dp, DataProviderKey, sub(key), @subscribe, @state, @ancestorAttribute">
9
+ <meta name="concorde-doc-id" content="docs/_core-concept/dataFlow">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_core-concept/dataFlow.html">
12
11
  </head>
13
12
  <body>
14
13
  <header>
15
- <p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/docs/getting-started/dataFlow">same URL (interactive)</a> · <a href="/llms.txt">llms.txt</a></p>
14
+ <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_core-concept/dataFlow.md/dataFlow" rel="nofollow">interactive version</a></p>
16
15
  </header>
17
16
  <main>
18
17
  <article>
19
- <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Data flow</strong>. Recommended patterns for new Concorde apps (Lit + TypeScript). Under the hood, data lives in a DataProvider store. <span>Doc ID: <code>docs/getting-started/dataFlow</code>. Keywords: Concorde, supersoniks, docs/getting-started/dataFlow, dataFlow, Data flow, guide, DataProvider, get, set, dp, DataProviderKey, sub(key), @subscribe, @state, @ancestorAttribute. URL: <a href="https://concorde.supersoniks.org/docs/getting-started/dataFlow">https://concorde.supersoniks.org/docs/getting-started/dataFlow</a>.</span></p>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde concept — Data flow</strong>. Recommended patterns for new Concorde apps (Lit + TypeScript). Under the hood, data lives in a DataProvider store (legacy Publisher API: Legacy: Sharing data). <span>Doc ID: <code>docs/_core-concept/dataFlow</code>. Keywords: Concorde, supersoniks, docs/_core-concept/dataFlow, dataFlow, Data flow, concept, DataProvider, get, set, dp, DataProviderKey, sub(key), @subscribe, @state, @ancestorAttribute. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_core-concept/dataFlow.html">https://concorde.supersoniks.org/crawl/docs/_core-concept/dataFlow.html</a>.</span></p>
20
19
  <h1 id="data-flow">Data flow</h1>
21
- <p>Recommended patterns for new Concorde apps (Lit + TypeScript). Under the hood, data lives in a <strong>DataProvider</strong> store.</p>
20
+ <p>Recommended patterns for new Concorde apps (Lit + TypeScript). Under the hood, data lives in a <strong>DataProvider</strong> store (legacy <strong>Publisher</strong> API: <a href="../_getting-started/pubsub.html#pubsub">Legacy: Sharing data</a>).</p>
22
21
  <h2 id="quick-map">Quick map</h2>
23
22
  <table>
24
23
  <thead>
@@ -69,11 +68,11 @@
69
68
  </tr>
70
69
  <tr>
71
70
  <td>Derived / aggregate (JSONata)</td>
72
- <td><code>derive()</code> or <code>sonic-jsonata</code> — <a href="/core/components/functional/jsonata">Jsonata</a></td>
71
+ <td><code>derive()</code> or <code>sonic-jsonata</code> — <a href="../../core/components/functional/jsonata/jsonata.html#jsonata">Jsonata</a></td>
73
72
  </tr>
74
73
  <tr>
75
74
  <td>Offline doc demos</td>
76
- <td><code>serviceURL=&quot;/docs-mock-api&quot;</code> — <a href="/docs/misc/docs-mock-api">Local API demos</a></td>
75
+ <td><code>serviceURL=&quot;/docs-mock-api&quot;</code> — <a href="../_misc/docs-mock-api.html#docs-mock-api">Local API demos</a></td>
77
76
  </tr>
78
77
  </tbody></table>
79
78
  <p>Skill: <code>concorde-get-set-dp</code> in the package <code>ai/</code> folder.</p>
@@ -87,8 +86,8 @@ set(cartKey, { items: [] });
87
86
  dp(cartKey.items).set([&quot;a&quot;, &quot;b&quot;]);
88
87
  get(cartKey);
89
88
  </code></pre>
90
- <p>Dynamic paths (<code>users.${userId}</code>) → decorators or <code>sub()</code> — not <code>get(&quot;users.${id}&quot;)</code> in imperative code. Resolution rules: <a href="/docs/misc/dynamic-path">Dynamic path placeholders</a>.</p>
91
- <p><a href="/docs/misc/dataProviderKey">DataProviderKey</a></p>
89
+ <p>Dynamic paths (<code>users.${userId}</code>) → decorators or <code>sub()</code> — not <code>get(&quot;users.${id}&quot;)</code> in imperative code. Resolution rules: <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a>.</p>
90
+ <p><a href="../_misc/dataProviderKey.html#dataProviderKey">DataProviderKey</a></p>
92
91
  <h2 id="decorators">Decorators</h2>
93
92
  <table>
94
93
  <thead>
@@ -99,7 +98,7 @@ get(cartKey);
99
98
  </thead>
100
99
  <tbody><tr>
101
100
  <td><code>@subscribe</code></td>
102
- <td>Read-only property from store — <a href="/docs/getting-started/my-first-component">data configuration</a> (type + key + scope)</td>
101
+ <td>Read-only property from store — <a href="../_getting-started/my-first-component.html#my-first-component">data configuration</a> (type + key + scope)</td>
103
102
  </tr>
104
103
  <tr>
105
104
  <td><code>@publish</code></td>
@@ -126,14 +125,14 @@ get(cartKey);
126
125
  <td>HTTP PUT / PATCH into <code>ApiResult&amp;lt;T&amp;gt;</code></td>
127
126
  </tr>
128
127
  </tbody></table>
129
- <p>Walkthrough: <a href="/docs/getting-started/my-first-component">My first component</a></p>
128
+ <p>Walkthrough: <a href="../_getting-started/my-first-component.html#my-first-component">My first component</a></p>
130
129
  <h2 id="http-and-lists">HTTP and lists</h2>
131
130
  <ul>
132
- <li><a href="/docs/decorators/get">@get</a> — single GET on a component</li>
133
- <li><a href="/docs/decorators/post">@post</a> — POST with body read from a <code>DataProviderKey</code></li>
134
- <li><a href="/docs/decorators/put">@put</a> · <a href="/docs/decorators/patch">@patch</a> — PUT / PATCH (same options as <code>@post</code>)</li>
135
- <li><a href="/core/components/functional/list">List</a> — <code>fetch</code> + <code>key=&quot;data&quot;</code> + <code>/docs-mock-api/api/users</code></li>
136
- <li><a href="/core/components/functional/queue">Queue</a> — lazy <code>offset=$offset&amp;per_page=$limit</code> + optional <code>dataFilterProvider</code> (form → query)</li>
131
+ <li><a href="../_decorators/get.html#get">@get</a> — single GET on a component</li>
132
+ <li><a href="../_decorators/post.html#post">@post</a> — POST with body read from a <code>DataProviderKey</code></li>
133
+ <li><a href="../_decorators/put.html#put">@put</a> · <a href="../_decorators/patch.html#patch">@patch</a> — PUT / PATCH (same options as <code>@post</code>)</li>
134
+ <li><a href="../../core/components/functional/list/list.html#list">List</a> — <code>fetch</code> + <code>key=&quot;data&quot;</code> + <code>/docs-mock-api/api/users</code></li>
135
+ <li><a href="../../core/components/functional/queue/queue.html#queue">Queue</a> — lazy <code>offset=$offset&amp;per_page=$limit</code> + optional <code>dataFilterProvider</code> (form → query)</li>
137
136
  </ul>
138
137
  <h2 id="starter-kit">Starter kit</h2>
139
138
  <pre><code class="language-bash">npx @supersoniks/create-concorde-ts-starter my-app
@@ -143,8 +142,8 @@ get(cartKey);
143
142
  <p>Use when you need <strong>client-side aggregations</strong> (groupby, top N, chart shapes) from existing DataProviders — without inline app JS in SDUI.</p>
144
143
  <ul>
145
144
  <li>Primitive: <code>derive({ inputs, compute, output, variables? })</code> from <code>@supersoniks/concorde/utils</code> (read-only output, debounce, generation, cycle detection, <code>{output}/_state_</code>).</li>
146
- <li>SDUI adapter: <a href="/core/components/functional/jsonata"><code>sonic-jsonata</code></a> (<code>inputProvider</code> → <code>expression</code> → <code>outputProvider</code>, optional <code>formDataProvider</code>).</li>
147
- <li>vs <a href="/core/components/functional/mix"><code>sonic-mix</code></a>: mix composes bidirectionally; jsonata <strong>computes</strong> unidirectionally.</li>
145
+ <li>SDUI adapter: <a href="../../core/components/functional/jsonata/jsonata.html#jsonata"><code>sonic-jsonata</code></a> (<code>inputProvider</code> → <code>expression</code> → <code>outputProvider</code>, optional <code>formDataProvider</code>).</li>
146
+ <li>vs <a href="../../core/components/functional/mix/mix.html#mix"><code>sonic-mix</code></a>: mix composes bidirectionally; jsonata <strong>computes</strong> unidirectionally.</li>
148
147
  </ul>
149
148
  <h2 id="legacy-integration">Legacy integration</h2>
150
149
  <table>
@@ -155,16 +154,20 @@ get(cartKey);
155
154
  </tr>
156
155
  </thead>
157
156
  <tbody><tr>
157
+ <td><code>Subscriber</code> / <code>Fetcher</code> mixins on app code</td>
158
+ <td><a href="./subscriber.html#subscriber">Legacy: Subscriber mixin</a>, <a href="../_getting-started/my-first-subscriber.html#my-first-subscriber">Legacy: My first subscriber</a></td>
159
+ </tr>
160
+ <tr>
158
161
  <td><code>data-bind</code> HTML (plain HTML hosts)</td>
159
- <td><a href="/docs/misc/html-integration">HTML integration</a> — doc demos use Lit in <code>src/docs/example/</code></td>
162
+ <td><a href="../_misc/html-integration.html#html-integration">HTML integration</a> — doc demos use Lit in <code>src/docs/example/</code></td>
160
163
  </tr>
161
164
  <tr>
162
165
  <td><code>@onAssign</code></td>
163
- <td><a href="/docs/decorators/on-assign">@onAssign</a> (prefer <code>@handle</code>)</td>
166
+ <td><a href="../_decorators/on-assign.html#on-assign">@onAssign</a> (prefer <code>@handle</code>)</td>
164
167
  </tr>
165
168
  <tr>
166
169
  <td><code>sonic-fetch</code> alone</td>
167
- <td><a href="/core/components/functional/fetch">Fetch</a></td>
170
+ <td><a href="../../core/components/functional/fetch/fetch.html#fetch">Fetch</a></td>
168
171
  </tr>
169
172
  </tbody></table>
170
173
 
package/docs/crawl/docs/_core-concept/overview.html ADDED
@@ -0,0 +1,66 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_core-concept/overview.html" data-doc-id="docs/_core-concept/overview">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>lit + tailwind + vite — Concorde</title>
7
+ <meta name="description" content="Some notes for an overview of Concorde's functioning">
8
+ <meta name="keywords" content="Concorde, supersoniks, docs/_core-concept/overview, overview, lit + tailwind + vite, concept, DataProvider, custom elements, reactive properties">
9
+ <meta name="concorde-doc-id" content="docs/_core-concept/overview">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_core-concept/overview.html">
11
+ </head>
12
+ <body>
13
+ <header>
14
+ <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_core-concept/overview.md/overview" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde concept — lit + tailwind + vite</strong>. Some notes for an overview of Concorde's functioning <span>Doc ID: <code>docs/_core-concept/overview</code>. Keywords: Concorde, supersoniks, docs/_core-concept/overview, overview, lit + tailwind + vite, concept, DataProvider, custom elements, reactive properties. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_core-concept/overview.html">https://concorde.supersoniks.org/crawl/docs/_core-concept/overview.html</a>.</span></p>
19
+ <h1 id="lit--tailwind--vite">lit + tailwind + vite</h1>
20
+ <p><strong>Some notes for an overview of Concorde&#39;s functioning</strong></p>
21
+ <h2 id="standard-web-components">Standard Web components</h2>
22
+ <p>A web component is simply a <strong>custom HTML element</strong> created using web standards:</p>
23
+ <p><strong>web component</strong> = <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">Custom Elements</a> + <a href="https://developer.mozilla.org/fr/docs/Web/Web_Components/Using_shadow_DOM">shadowDom</a> + <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/template">HTML templates</a></p>
24
+ <h2 id="lit-library">Lit Library</h2>
25
+ <p>Concorde components are written using the lightweight Lit library: <a href="https://lit.dev/">https://lit.dev/</a>.</p>
26
+ <p>A good portion of the elements documented on the Lit website are standard JavaScript concepts (e.g., <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#mix-ins">mixins</a>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Template_literals#gabarits_%C3%A9tiquet%C3%A9s">tagged template literals</a>).</p>
27
+ <p>The <strong>library simplifies the writing of web components</strong> by automating certain tasks:</p>
28
+ <ul>
29
+ <li>Creation of an <strong>open mode shadow DOM</strong> (the component is accessible from the outside via its shadow root property).</li>
30
+ <li><a href="https://lit.dev/docs/components/rendering/">Rendering function</a> based on <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Template_literals#gabarits_%C3%A9tiquet%C3%A9s">tagged template literals</a></li>
31
+ <li><a href="https://lit.dev/docs/components/properties/">Reactive properties</a> that trigger rendering when modified.</li>
32
+ </ul>
33
+ <p>Our use of Lit rarely goes beyond this <a href="https://lit.dev/playground/#sample=examples/hello-world">hello world</a></p>
34
+ <h2 id="typescript-language">Typescript Language</h2>
35
+ <p>We write the components in <a href="https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html">TypeScript</a>, which is then compiled into JS.</p>
36
+ <p>Static and inferred typing provides stronger validation of the program&#39;s functioning during compilation.
37
+ However, we often use the &quot;any&quot; type due to time constraints.</p>
38
+ <p>Lit uses TypeScript to simplify development through metadata:</p>
39
+ <ul>
40
+ <li>Simplified declaration of <code>custom elements</code> via @customElement</li>
41
+ <li>Generation of <code>reactive properties</code> via @property.</li>
42
+ </ul>
43
+ <p>☢️<strong>Warning</strong>:</p>
44
+ <ul>
45
+ <li>During development, we operate in interpreted mode, which is faster but allows errors that won&#39;t pass during the build.</li>
46
+ <li>It is important to <strong>build a distribution before pushing the code</strong> to ensure everything is fine.</li>
47
+ </ul>
48
+ <h2 id="compatibility-with-classic-js-libraries">Compatibility with Classic JS Libraries</h2>
49
+ <p>Compatibility issues may arise when using JS libraries, particularly regarding DOM traversal.
50
+ This is because these libraries are blocked from traversing the DOM due to the presence of the shadow DOM.
51
+ Here are some examples of things that may cause problems:</p>
52
+ <ul>
53
+ <li>Latest FontAwesome in SVG mode, icons are not replaced</li>
54
+ <li>Libraries associated with jQuery</li>
55
+ <li>document.getElementById</li>
56
+ <li>...</li>
57
+ </ul>
58
+ <h2 id="topics-to-explore-for-further-learning">Topics to Explore for Further Learning</h2>
59
+ <p><a href="../_getting-started/create-a-component.html#create-a-component">🧱 Creating components</a></p>
60
+ <p><a href="../_getting-started/theming.html#theming">🎨 Adding styles</a></p>
61
+ <p><a href="../_getting-started/pubsub.html#pubsub">🥨 Sharing data</a></p>
62
+
63
+ </article>
64
+ </main>
65
+ </body>
66
+ </html>
package/docs/crawl/docs/_core-concept/subscriber.html ADDED
@@ -0,0 +1,75 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_core-concept/subscriber.html" data-doc-id="docs/_core-concept/subscriber">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Legacy: Subscriber mixin — Concorde</title>
7
+ <meta name="description" content="&gt; New app components: My first component and Data flow — extend LitElement with decorators (@subscribe, @ancestorAttribute, …). This mixin remains in core components (sonic-list, sonic-fetch, …) and l">
8
+ <meta name="keywords" content="Concorde, supersoniks, docs/_core-concept/subscriber, subscriber, Legacy: Subscriber mixin, concept, DataProvider, LitElement, @subscribe, @ancestorAttribute, sonic-list, sonic-fetch, dataProvider, subDataProvider = 'address.of.my.data', props">
9
+ <meta name="concorde-doc-id" content="docs/_core-concept/subscriber">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_core-concept/subscriber.html">
11
+ </head>
12
+ <body>
13
+ <header>
14
+ <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_core-concept/subscriber.md/subscriber" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde concept — Legacy: Subscriber mixin</strong>. &gt; New app components: My first component and Data flow — extend LitElement with decorators (@subscribe, @ancestorAttribute, …). This mixin remains in core components (sonic-list, sonic-fetch, …) and l <span>Doc ID: <code>docs/_core-concept/subscriber</code>. Keywords: Concorde, supersoniks, docs/_core-concept/subscriber, subscriber, Legacy: Subscriber mixin, concept, DataProvider, LitElement, @subscribe, @ancestorAttribute, sonic-list, sonic-fetch, dataProvider, subDataProvider = 'address.of.my.data', props. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_core-concept/subscriber.html">https://concorde.supersoniks.org/crawl/docs/_core-concept/subscriber.html</a>.</span></p>
19
+ <h1 id="legacy-subscriber-mixin">Legacy: Subscriber mixin</h1>
20
+ <blockquote>
21
+ <p><strong>New app components:</strong> <a href="../_getting-started/my-first-component.html#my-first-component">My first component</a> and <a href="./dataFlow.html#dataFlow">Data flow</a> — extend <code>LitElement</code> with decorators (<code>@subscribe</code>, <code>@ancestorAttribute</code>, …). This mixin remains in <strong>core</strong> components (<code>sonic-list</code>, <code>sonic-fetch</code>, …) and <a href="../_getting-started/my-first-subscriber.html#my-first-subscriber">legacy tutorials</a>.</p>
22
+ </blockquote>
23
+ <p>The Subscriber mixin was commonly extended by Concorde core components and older destination components. Pure UI components usually don&#39;t extend it, especially those outside of form components.</p>
24
+ <h2 id="dataprovider-attribute-automatic-filling-of-subscriber-properties">DataProvider Attribute: Automatic Filling of Subscriber Properties</h2>
25
+ <p>Upon being added to the DOM (connectedCallback), subscribers search for the first occurrence of the <code>dataProvider</code> attribute in their parent&#39;s HTML structure.</p>
26
+ <p>The value of this attribute is the DataProvider path (see <a href="./dataFlow.html#dataFlow">Data flow</a> and <a href="../_misc/dataProviderKey.html#dataProviderKey">DataProviderKey</a>; legacy API: <a href="../_getting-started/pubsub.html#pubsub">Sharing Data</a>).</p>
27
+ <p>The subscriber then subscribes to the publisher as a data template to be filled.</p>
28
+ <p>The reactive properties of the component reflect in real-time the properties with the same name in the publisher.</p>
29
+ <p>This functionality is commonly used in the generic components <a href="../../core/components/functional/fetch/fetch.html#fetch">fetch</a>, <a href="../../core/components/functional/queue/queue.html#queue">queue</a>, and <a href="../../core/components/functional/list/list.html#list">list</a>.</p>
30
+ <p>If the subscriber is inside another subscriber, it can subscribe to a data of its parent using the attribute <code>subDataProvider = &#39;address.of.my.data&#39;</code> instead of the parent&#39;s data. This allows for dynamic behavior.</p>
31
+ <h2 id="automated-translation">Automated Translation</h2>
32
+ <p>In a similar manner, searching for ancestor attributes can be used to configure automatic translation for any property starting with &quot;wording&quot; and ending with a label identifier recognized by the wordingProvider API.</p>
33
+ <p>Normally, this API is globally configured and not within the component. Therefore, remember to prefix translatable label identifiers present in the ticketing system, for example, with &quot;wording&quot;.</p>
34
+ <h2 id="reactive-property-props">Reactive Property <code>props</code></h2>
35
+ <p>The value of this property can be provided as a JSON object or any other value. This value is then assigned to the associated publisher via the <code>dataProvider</code> attribute. As a result, the reactive properties of all subscribers associated with the same <code>dataProvider</code> are filled as mentioned above.</p>
36
+ <h2 id="disabling-automatic-filling-of-reactive-properties">Disabling Automatic Filling of Reactive Properties</h2>
37
+ <p>It is possible to disable the automatic filling of reactive properties in a particular component. To do so, set the variable <code>noAutoFill = true</code> in the component&#39;s class. However, the reactive property <code>props</code> will still be updated.</p>
38
+ <p>For example, <code>sonic-subscriber</code> and <code>sonic-fetch</code> have this attribute because they do not have reactive properties.</p>
39
+ <p><strong>☢ CAUTION:</strong> When creating an object of type Subscriber or Fetcher, make sure to use the mixins and not directly extend the concrete fetch component (<code>sonic-fetch</code>) and subscriber component (<code>sonic-subscriber</code>). This is because the <code>noAutofill = true</code> attribute is set in those components.</p>
40
+ <p><strong>TIPS:</strong>
41
+ If you disable automatic filling, you will likely make the rendering dynamic by writing expressions like <code>this.props.my.subproperty</code>. If <code>props</code> is updated, the rendering will be triggered. However, if <code>this.props.my.subproperty</code> is directly modified, the rendering will not be triggered. To achieve more reactivity, you can enable rendering when any subproperty is modified. Simply set the variable <code>renderOnPropsInternalChange = true</code> in the class that implements the corresponding mixin.</p>
42
+ <h2 id="data-binding">Data Binding</h2>
43
+ <p>Suppose that:</p>
44
+ <ul>
45
+ <li>You have a subscriber subscribed to a publisher via its <code>dataProvider</code> attribute.</li>
46
+ <li>The published data has the following structure:</li>
47
+ </ul>
48
+ <pre><code class="language-javascript">{&quot;img&quot;: { &quot;avatar&quot;: &quot;my-avatar.jpg&quot;, &quot;caption&quot;: &quot;look at my smile&quot; }, &quot;email&quot;: &quot;an.email@example.com&quot; }
49
+ </code></pre>
50
+ <ul>
51
+ <li>We want to keep the display of an image and its <code>title</code> attribute up to date, as well as a &quot;contact&quot; button to email the person in the photo. The content of the subscriber could be as follows:</li>
52
+ </ul>
53
+ <p>In a <strong>Lit</strong> app, use the same data with <a href="../_getting-started/my-first-component.html#my-first-component">data configuration</a> (<code>@subscribe</code> + <code>DataProviderKey</code>) on a small row component — see <code>docs-user</code> in <code>src/docs/example/users.ts</code>.</p>
54
+ <p>For <strong>HTML-only</strong> embedding (no Lit), attribute binding is described in <a href="../_misc/html-integration.html#html-integration">HTML integration</a> and in the Legacy <a href="./subscriber.html#subscriber">Subscriber mixin</a> pages.</p>
55
+ <p>This pattern also illustrates:</p>
56
+ <ul>
57
+ <li>Binding to subproperties using dot syntax, as done for the <code>src</code> attribute of the <code>img</code> tag.</li>
58
+ <li>Using a simple expression to include the property within a string, as in creating a <code>mailto</code> link.</li>
59
+ <li>Using formatting functions, as in the <code>title</code> attribute of the <code>img</code> tag. You can find (and add) formatting functions in the <code>core/utils/Format.ts</code> file.</li>
60
+ <li>Writing for properties that are in camel case. Convert everything to lowercase and add hyphens. Note that <code>innerHTML</code> (or <code>outerHTML</code>) is a special case where no hyphens are added between each letter.</li>
61
+ </ul>
62
+ <p><strong>Note:</strong> Data binding implies that updating the <code>img.src</code> data via the publisher will change the photo without any additional calls.</p>
63
+ <p><strong>Special Variables:</strong></p>
64
+ <ul>
65
+ <li><code>_self_</code> targets the root of the data. This is useful, for example, when the data is a pure string.</li>
66
+ <li><code>_parent_</code> targets the parent publisher of the current publisher, if any. For example, the subscribers of lists have the complete data of the list as their parent.</li>
67
+ <li><code>_metadata_</code> is only used in the case of <em>sonic-list</em> at the moment. In a simple list, <code>_metadata_</code> see the (list)[] component for further details</li>
68
+ </ul>
69
+ <p><strong>Disabling this functionality:</strong>
70
+ You can disable data binding if it is not needed by calling <code>DataBinding.disable()</code>.</p>
71
+
72
+ </article>
73
+ </main>
74
+ </body>
75
+ </html>
package/docs/crawl/docs/_decorators/ancestor-attribute.html ADDED
@@ -0,0 +1,117 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/ancestor-attribute.html" data-doc-id="docs/_decorators/ancestor-attribute">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>@ancestorAttribute — Concorde</title>
7
+ <meta name="description" content="The @ancestorAttribute decorator automatically injects the value of an ancestor's attribute into a class property at the time of connectedCallback.">
8
+ <meta name="keywords" content="Concorde, supersoniks, docs/_decorators/ancestor-attribute, ancestor-attribute, @ancestorAttribute, decorator, ancestorAttribute, connectedCallback, HTML.getAncestorAttributeValue, dataProvider, testAttribute, dynamic: false, formDataProvider, wordingProvider">
9
+ <meta name="concorde-doc-id" content="docs/_decorators/ancestor-attribute">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/ancestor-attribute.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/ancestor-attribute.md/ancestor-attribute" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @ancestorAttribute</strong>. The @ancestorAttribute decorator automatically injects the value of an ancestor's attribute into a class property at the time of connectedCallback. <span>Doc ID: <code>docs/_decorators/ancestor-attribute</code>. Keywords: Concorde, supersoniks, docs/_decorators/ancestor-attribute, ancestor-attribute, @ancestorAttribute, decorator, ancestorAttribute, connectedCallback, HTML.getAncestorAttributeValue, dataProvider, testAttribute, dynamic: false, formDataProvider, wordingProvider. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/ancestor-attribute.html">https://concorde.supersoniks.org/crawl/docs/_decorators/ancestor-attribute.html</a>.</span></p>
19
+ <h1 id="ancestorattribute">@ancestorAttribute</h1>
20
+ <p>The <code>@ancestorAttribute</code> decorator automatically injects the value of an ancestor&#39;s attribute into a class property at the time of <code>connectedCallback</code>.</p>
21
+ <h2 id="principle">Principle</h2>
22
+ <p>This decorator uses <code>HTML.getAncestorAttributeValue</code> to traverse up the DOM tree from the current element and find the first ancestor that has the specified attribute. The value of this attribute is then assigned to the decorated property.</p>
23
+ <h2 id="usage">Usage</h2>
24
+ <h3 id="import">Import</h3>
25
+ <pre><code class="language-typescript">import { ancestorAttribute } from &quot;@supersoniks/concorde/decorators&quot;;
26
+ </code></pre>
27
+ <h3 id="basic-example">Basic example</h3>
28
+ <p>The component reads <code>dataProvider</code> and <code>testAttribute</code> from its ancestor wrapper. By default (<code>dynamic: false</code>), values are read once at connect.</p>
29
+ <pre><code class="language-typescript">import { html, LitElement } from &quot;lit&quot;;
30
+ import { customElement } from &quot;lit/decorators.js&quot;;
31
+ import { ancestorAttribute } from &quot;@supersoniks/concorde/decorators&quot;;
32
+
33
+ @customElement(&quot;demo-ancestor-attribute&quot;)
34
+ export class DemoAncestorAttribute extends LitElement {
35
+ @ancestorAttribute(&quot;dataProvider&quot;)
36
+ dataProvider: string | null = null;
37
+
38
+ @ancestorAttribute(&quot;testAttribute&quot;)
39
+ testAttribute: string | null = null;
40
+
41
+ render() {
42
+ return html`
43
+ &lt;p&gt;dataProvider: &lt;strong&gt;${this.dataProvider ?? &quot;null&quot;}&lt;/strong&gt;&lt;/p&gt;
44
+ &lt;p&gt;testAttribute: &lt;strong&gt;${this.testAttribute ?? &quot;null&quot;}&lt;/strong&gt;&lt;/p&gt;
45
+ `;
46
+ }
47
+ }
48
+ </code></pre>
49
+ <pre><code>&lt;div dataProvider=&quot;demoDataProvider&quot; testAttribute=&quot;test-value-123&quot;&gt;
50
+ &lt;docs-demo-sources for=&quot;demo-ancestor-attribute&quot;&gt;&lt;/docs-demo-sources&gt;
51
+ &lt;demo-ancestor-attribute&gt;&lt;/demo-ancestor-attribute&gt;
52
+ &lt;/div&gt;
53
+ </code></pre>
54
+ <h2 id="use-cases">Use cases</h2>
55
+ <p>This decorator is particularly useful for:</p>
56
+ <ul>
57
+ <li><strong>Retrieving the <code>dataProvider</code></strong> from an ancestor without having to pass it explicitly</li>
58
+ <li><strong>Retrieving the <code>formDataProvider</code></strong> in form components</li>
59
+ <li><strong>Retrieving the <code>wordingProvider</code></strong> for translation</li>
60
+ <li><strong>Retrieving any other attribute</strong> defined on an ancestor</li>
61
+ </ul>
62
+ <h2 id="behavior">Behavior</h2>
63
+ <ul>
64
+ <li>The search starts from the current element and traverses up the DOM tree</li>
65
+ <li>The injection happens automatically at the time of <code>connectedCallback</code></li>
66
+ <li>By default (<code>dynamic: false</code>), the value is read once at connect time and is not updated afterward</li>
67
+ <li>With <code>{ dynamic: true }</code>, the property stays in sync when:<ul>
68
+ <li>an ancestor <strong>changes</strong> the attribute value</li>
69
+ <li>a <strong>closer</strong> ancestor <strong>gains</strong> / <strong>loses</strong> the attribute (fallback / <code>null</code>)</li>
70
+ <li>the component is <strong>reparented</strong> (no extra opt-in) — parent <code>childList</code> only reacts if <em>this</em> node moves</li>
71
+ </ul>
72
+ </li>
73
+ <li>Observers are <strong>shared</strong> (one per ancestor attribute / one per parent) so large lists of <code>sonic-icon</code> stay cheap on Firefox.</li>
74
+ <li>When <code>dynamic</code> is enabled, updates also propagate to <code>@subscribe</code> / <code>@bind</code> paths that depend on the decorated property (e.g. <code>${dataProvider}</code>)</li>
75
+ </ul>
76
+ <h3 id="dynamic-mode">Dynamic mode</h3>
77
+ <p>Use <code>{ dynamic: true }</code> when the decorated property must follow the DOM. With Lit, add <strong><code>@state()</code></strong> on the same property so template updates are visible when the observer assigns a new value.</p>
78
+ <p>The live demo below shows only the resolved attribute value — no store, no reparenting.</p>
79
+ <pre><code class="language-typescript">@customElement(&quot;demo-ancestor-attribute-dynamic&quot;)
80
+ export class DemoAncestorAttributeDynamic extends LitElement {
81
+ @ancestorAttribute(&quot;dataProvider&quot;, { dynamic: true })
82
+ @state()
83
+ dataProvider: string | null = null;
84
+
85
+ render() {
86
+ return html`
87
+ &amp;lt;p&amp;gt;Nearest ancestor: &amp;lt;strong&amp;gt;${this.dataProvider ?? &quot;null&quot;}&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
88
+ `;
89
+ }
90
+ }
91
+ </code></pre>
92
+ <p>Try in the demo:</p>
93
+ <ul>
94
+ <li><strong>parent-a</strong> / <strong>parent-b</strong> — change the value on the direct parent</li>
95
+ <li><strong>Remove parent attr</strong> — falls back to <strong>outer</strong></li>
96
+ <li><strong>Add closer</strong> — a wrapper with <code>from-closer</code> becomes the nearest ancestor</li>
97
+ <li><strong>Remove closer</strong> — back to parent or outer</li>
98
+ <li><strong>Remove outer attr</strong> — if parent has no attribute either, the child shows <code>null</code></li>
99
+ </ul>
100
+ <pre><code>&lt;docs-demo-sources for=&quot;demo-ancestor-attribute-dynamic-section&quot;&gt;&lt;/docs-demo-sources&gt;
101
+ &lt;demo-ancestor-attribute-dynamic-section&gt;&lt;/demo-ancestor-attribute-dynamic-section&gt;
102
+ </code></pre>
103
+ <p>Static mode (default) — read once at connect, no observer:</p>
104
+ <pre><code class="language-typescript">@ancestorAttribute(&quot;dataProvider&quot;)
105
+ dataProvider: string | null = null;
106
+ </code></pre>
107
+ <h2 id="notes">Notes</h2>
108
+ <ul>
109
+ <li>This decorator works with any component that has a <code>connectedCallback</code> method (such as <code>LitElement</code> or components extending <code>Subscriber</code>)</li>
110
+ <li>The search also traverses Shadow DOM if necessary</li>
111
+ <li>If multiple ancestors have the attribute, the closest one will be used</li>
112
+ </ul>
113
+
114
+ </article>
115
+ </main>
116
+ </body>
117
+ </html>
package/docs/crawl/docs/_decorators/auto-subscribe.html ADDED
@@ -0,0 +1,202 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/auto-subscribe.html" data-doc-id="docs/_decorators/auto-subscribe">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>@autoSubscribe — Concorde</title>
7
+ <meta name="description" content="&gt; Legacy: prefer @subscribe + DataProviderKey. Examples below may still show PublisherManager for existing codebases.">
8
+ <meta name="keywords" content="Concorde, supersoniks, docs/_decorators/auto-subscribe, auto-subscribe, @autoSubscribe, decorator, autoSubscribe, DataProviderKey, PublisherManager, ;
9
+ }
10
+
11
+ render() {
12
+ return html">
13
+ <meta name="concorde-doc-id" content="docs/_decorators/auto-subscribe">
14
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/auto-subscribe.html">
15
+ </head>
16
+ <body>
17
+ <header>
18
+ <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_decorators/auto-subscribe.md/auto-subscribe" rel="nofollow">interactive version</a></p>
19
+ </header>
20
+ <main>
21
+ <article>
22
+ <p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @autoSubscribe</strong>. &gt; Legacy: prefer @subscribe + DataProviderKey. Examples below may still show PublisherManager for existing codebases. <span>Doc ID: <code>docs/_decorators/auto-subscribe</code>. Keywords: Concorde, supersoniks, docs/_decorators/auto-subscribe, auto-subscribe, @autoSubscribe, decorator, autoSubscribe, DataProviderKey, PublisherManager, ;
23
+ }
24
+
25
+ render() {
26
+ return html. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/auto-subscribe.html">https://concorde.supersoniks.org/crawl/docs/_decorators/auto-subscribe.html</a>.</span></p>
27
+ <h1 id="autosubscribe">@autoSubscribe</h1>
28
+ <blockquote>
29
+ <p><strong>Legacy:</strong> prefer <a href="./subscribe.html#subscribe">@subscribe</a> + <code>DataProviderKey</code>. Examples below may still show <code>PublisherManager</code> for existing codebases.</p>
30
+ </blockquote>
31
+ <p>The <code>@autoSubscribe</code> decorator automatically detects which publishers are accessed within a method and subscribes to them. When any of these publishers change, the method is automatically re-executed.</p>
32
+ <h2 id="principle">Principle</h2>
33
+ <p>This decorator wraps a method to track which publishers are accessed during its execution. It then subscribes to all accessed publishers, and when any of them change, the method is re-executed. This provides automatic reactivity without manually managing subscriptions.</p>
34
+ <h2 id="usage">Usage</h2>
35
+ <h3 id="import">Import</h3>
36
+ <pre><code class="language-typescript">import { autoSubscribe } from &quot;@supersoniks/concorde/decorators&quot;;
37
+ </code></pre>
38
+ <h3 id="basic-example">Basic example</h3>
39
+ <pre><code class="language-typescript">@customElement(&quot;demo-auto-subscribe&quot;)
40
+ export class DemoAutoSubscribe extends LitElement {
41
+ static styles = [tailwind];
42
+
43
+ @state() displayText: string = &quot;&quot;;
44
+ @state() computedValue: number = 0;
45
+
46
+ @autoSubscribe()
47
+ updateDisplay() {
48
+ const value1 = PublisherManager.get(&quot;autoValue1&quot;).get() || 0;
49
+ const value2 = PublisherManager.get(&quot;autoValue2&quot;).get() || 0;
50
+ this.computedValue = value1 + value2;
51
+ this.displayText = `${value1} + ${value2} = ${this.computedValue}`;
52
+ }
53
+
54
+ render() {
55
+ return html`
56
+ &lt;p&gt;&lt;strong&gt;${this.displayText}&lt;/strong&gt;&lt;/p&gt;
57
+ &lt;div&gt;
58
+ &lt;sonic-button @click=${() =&gt; this.randomizeValue(&quot;autoValue1&quot;)}&gt;
59
+ Randomize Value 1
60
+ &lt;/sonic-button&gt;
61
+ &lt;sonic-button @click=${() =&gt; this.randomizeValue(&quot;autoValue2&quot;)}&gt;
62
+ Randomize Value 2
63
+ &lt;/sonic-button&gt;
64
+ &lt;/div&gt;
65
+ `;
66
+ }
67
+
68
+ randomizeValue(publisherId: string) {
69
+ const value = PublisherManager.get(publisherId);
70
+ value.set(Math.floor(Math.random() * 100));
71
+ }
72
+ }
73
+ </code></pre>
74
+ <pre><code>&lt;docs-demo-sources for=&quot;demo-auto-subscribe&quot;&gt;&lt;/docs-demo-sources&gt;
75
+ &lt;demo-auto-subscribe&gt;&lt;/demo-auto-subscribe&gt;
76
+ </code></pre>
77
+ <h3 id="example-with-render-method">Example with render method</h3>
78
+ <pre><code class="language-typescript">@customElement(&quot;reactive-view&quot;)
79
+ export class ReactiveView extends LitElement {
80
+ @autoSubscribe()
81
+ render() {
82
+ const data = PublisherManager.get(&quot;myData&quot;);
83
+ const config = PublisherManager.get(&quot;config&quot;);
84
+
85
+ // This render method will be automatically re-executed
86
+ // when myData or config change
87
+ const value = data.get()?.value || 0;
88
+ const multiplier = config.get()?.multiplier || 1;
89
+
90
+ return html`
91
+ &lt;div&gt;
92
+ &lt;h1&gt;Result: ${value * multiplier}&lt;/h1&gt;
93
+ &lt;p&gt;Value: ${value}&lt;/p&gt;
94
+ &lt;p&gt;Multiplier: ${multiplier}&lt;/p&gt;
95
+ &lt;/div&gt;
96
+ `;
97
+ }
98
+ }
99
+ </code></pre>
100
+ <h2 id="how-it-works">How it works</h2>
101
+ <ol>
102
+ <li><strong>First execution</strong>: When the method is called, <code>PublisherManager.collectModifiedPublisher()</code> is used to track which publishers are accessed</li>
103
+ <li><strong>Subscription</strong>: After execution, the decorator subscribes to all detected publishers</li>
104
+ <li><strong>Re-execution</strong>: When any subscribed publisher changes, the method is automatically called again</li>
105
+ <li><strong>Cleanup</strong>: On <code>disconnectedCallback</code>, all subscriptions are automatically removed</li>
106
+ </ol>
107
+ <h2 id="behavior">Behavior</h2>
108
+ <ul>
109
+ <li>The method is automatically called on <code>connectedCallback</code></li>
110
+ <li>The method is re-executed whenever any accessed publisher changes</li>
111
+ <li>Subscriptions are managed automatically (no manual cleanup needed)</li>
112
+ <li>Only publishers accessed during method execution are subscribed to</li>
113
+ <li>The decorator uses <code>queueMicrotask</code> to batch multiple updates and avoid unnecessary re-renders</li>
114
+ </ul>
115
+ <h2 id="use-cases">Use cases</h2>
116
+ <p>This decorator is particularly useful for:</p>
117
+ <ul>
118
+ <li><strong>Reactive rendering</strong> where the render method depends on multiple publishers</li>
119
+ <li><strong>Data transformation</strong> that needs to update when source data changes</li>
120
+ <li><strong>Computed properties</strong> that depend on multiple data sources</li>
121
+ <li><strong>Automatic synchronization</strong> between publishers and component state</li>
122
+ </ul>
123
+ <h2 id="complete-example">Complete example</h2>
124
+ <pre><code class="language-typescript">import { html, LitElement } from &quot;lit&quot;;
125
+ import { customElement } from &quot;lit/decorators.js&quot;;
126
+ import { autoSubscribe } from &quot;@supersoniks/concorde/decorators&quot;;
127
+ import { PublisherManager } from &quot;@supersoniks/concorde/core/utils/PublisherProxy&quot;;
128
+
129
+ @customElement(&quot;shopping-cart&quot;)
130
+ export class ShoppingCart extends LitElement {
131
+ items: any[] = [];
132
+ total: number = 0;
133
+ discount: number = 0;
134
+
135
+ @autoSubscribe()
136
+ calculateTotal() {
137
+ const cart = PublisherManager.get(&quot;cart&quot;);
138
+ const promo = PublisherManager.get(&quot;promo&quot;);
139
+
140
+ // Access cart items
141
+ this.items = cart.items.get() || [];
142
+
143
+ // Access promo code
144
+ const promoCode = promo.code.get() || &quot;&quot;;
145
+ const discountPercent = promoCode === &quot;SAVE10&quot; ? 0.1 : 0;
146
+
147
+ // Calculate totals
148
+ const subtotal = this.items.reduce((sum, item) =&gt;
149
+ sum + (item.price * item.quantity), 0
150
+ );
151
+ this.discount = subtotal * discountPercent;
152
+ this.total = subtotal - this.discount;
153
+
154
+ this.requestUpdate();
155
+ }
156
+
157
+ connectedCallback() {
158
+ super.connectedCallback();
159
+ this.calculateTotal();
160
+ }
161
+
162
+ render() {
163
+ return html`
164
+ &lt;div class=&quot;cart&quot;&gt;
165
+ &lt;h2&gt;Shopping Cart&lt;/h2&gt;
166
+ ${this.items.map(item =&gt; html`
167
+ &lt;div&gt;${item.name} x${item.quantity} - ${item.price}€&lt;/div&gt;
168
+ `)}
169
+ &lt;div class=&quot;total&quot;&gt;
170
+ &lt;p&gt;Subtotal: ${this.total + this.discount}€&lt;/p&gt;
171
+ &lt;p&gt;Discount: -${this.discount}€&lt;/p&gt;
172
+ &lt;p&gt;&lt;strong&gt;Total: ${this.total}€&lt;/strong&gt;&lt;/p&gt;
173
+ &lt;/div&gt;
174
+ &lt;/div&gt;
175
+ `;
176
+ }
177
+ }
178
+
179
+ // When you update the publishers, calculateTotal is automatically called:
180
+ const cart = PublisherManager.get(&quot;cart&quot;);
181
+ cart.items.set([
182
+ { name: &quot;Product 1&quot;, price: 10, quantity: 2 },
183
+ { name: &quot;Product 2&quot;, price: 15, quantity: 1 }
184
+ ]);
185
+
186
+ const promo = PublisherManager.get(&quot;promo&quot;);
187
+ promo.code.set(&quot;SAVE10&quot;);
188
+ // calculateTotal will be automatically called and the UI will update
189
+ </code></pre>
190
+ <h2 id="notes">Notes</h2>
191
+ <ul>
192
+ <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>
193
+ <li>The method is called automatically on <code>connectedCallback</code></li>
194
+ <li>Remember to call <code>this.requestUpdate()</code> if you&#39;re updating component properties</li>
195
+ <li>The decorator uses debouncing via <code>queueMicrotask</code> to prevent excessive re-executions</li>
196
+ <li>For more information about publishers, see the documentation on <a href="../_getting-started/pubsub.html#pubsub">Sharing data</a></li>
197
+ </ul>
198
+
199
+ </article>
200
+ </main>
201
+ </body>
202
+ </html>