@supersoniks/concorde 5.0.0 → 5.0.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 (314) hide show
  1. package/.gitlab-ci.yml +0 -13
  2. package/build-infos.json +1 -1
  3. package/concorde-core.bundle.js +606 -689
  4. package/concorde-core.es.js +4511 -4329
  5. package/dist/concorde-core.bundle.js +606 -689
  6. package/dist/concorde-core.es.js +4511 -4329
  7. package/gitlab/job_tests.sh +25 -12
  8. package/index.html +3 -3
  9. package/package.json +16 -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/rounded.ts +36 -0
  23. package/src/core/components/ui/_css/size.ts +0 -0
  24. package/src/core/components/ui/_css/type.ts +49 -0
  25. package/src/core/components/ui/_i18n/ui-aria-labels.ts +104 -0
  26. package/src/core/components/ui/alert/alert.md +128 -72
  27. package/src/core/components/ui/alert/alert.spec.ts +145 -0
  28. package/src/core/components/ui/alert/alert.ts +86 -91
  29. package/src/core/components/ui/alert-messages/alert-messages.ts +1 -1
  30. package/src/core/components/ui/badge/badge.md +126 -78
  31. package/src/core/components/ui/badge/badge.ts +29 -81
  32. package/src/core/components/ui/button/button.md +1 -0
  33. package/src/core/components/ui/button/button.ts +11 -8
  34. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  35. package/src/core/components/ui/captcha/captcha.md +0 -0
  36. package/src/core/components/ui/card/card-header.ts +7 -2
  37. package/src/core/components/ui/card/card.md +120 -65
  38. package/src/core/components/ui/divider/divider.ts +4 -9
  39. package/src/core/components/ui/form/fieldset/legend-description.ts +1 -1
  40. package/src/core/components/ui/form/fieldset/legend.ts +1 -1
  41. package/src/core/components/ui/form/input/input.md +1 -1
  42. package/src/core/components/ui/form/input/input.ts +19 -15
  43. package/src/core/components/ui/form/radio/radio.md +0 -0
  44. package/src/core/components/ui/form/select/select.md +0 -0
  45. package/src/core/components/ui/form/switch/switch.md +0 -0
  46. package/src/core/components/ui/form/textarea/textarea.md +1 -1
  47. package/src/core/components/ui/image/image.md +147 -53
  48. package/src/core/components/ui/image/image.ts +10 -44
  49. package/src/core/components/ui/link/link.md +2 -2
  50. package/src/core/components/ui/link/link.ts +42 -37
  51. package/src/core/components/ui/loader/loader.md +0 -0
  52. package/src/core/components/ui/menu/menu.md +0 -0
  53. package/src/core/components/ui/modal/modal-close.ts +8 -12
  54. package/src/core/components/ui/modal/modal.md +0 -0
  55. package/src/core/components/ui/modal/modal.ts +18 -18
  56. package/src/core/components/ui/pop/pop.md +105 -1
  57. package/src/core/components/ui/pop/pop.ts +143 -148
  58. package/src/core/components/ui/table/table-caption.ts +0 -0
  59. package/src/core/components/ui/table/table.md +0 -0
  60. package/src/core/components/ui/table/table.ts +2 -8
  61. package/src/core/components/ui/theme/theme.ts +1 -1
  62. package/src/core/components/ui/toast/dismissed.ts +14 -0
  63. package/src/core/components/ui/toast/toast-item.ts +139 -91
  64. package/src/core/components/ui/toast/toast.ts +4 -7
  65. package/src/core/components/ui/tooltip/tooltip.ts +176 -154
  66. package/src/core/utils/LocationHandler.ts +12 -5
  67. package/src/core/utils/dismissed.ts +22 -0
  68. package/src/core/utils/positioning.spec.ts +208 -0
  69. package/src/core/utils/positioning.ts +183 -0
  70. package/src/core/utils/route.ts +0 -0
  71. package/src/directives.ts +2 -3
  72. package/src/docs/_core-concept/subscriber.md +0 -0
  73. package/src/docs/_getting-started/concorde-outside.md +3 -3
  74. package/src/docs/_getting-started/my-first-subscriber.md +0 -0
  75. package/src/docs/_getting-started/pubsub.md +0 -0
  76. package/src/docs/_getting-started/start.md +0 -0
  77. package/src/docs/code.ts +3 -1
  78. package/src/docs/example/users.ts +0 -0
  79. package/src/docs/search/docs-search.json +651 -21
  80. package/src/docs/search/page.ts +0 -0
  81. package/src/docs/tailwind/css/tailwind.css +13 -6
  82. package/src/tsconfig.json +45 -0
  83. package/src/tsconfig.tsbuildinfo +1 -1
  84. package/tailwind.config.js +50 -3
  85. package/vitest.setup.ts +49 -13
  86. package/.github/workflows/ci.yml +0 -21
  87. package/.github-export-ignore +0 -30
  88. package/CONTRIBUTING.md +0 -59
  89. package/DEV.md +0 -54
  90. package/LICENSE +0 -21
  91. package/OPEN_SOURCE_CHECKPOINT.md +0 -133
  92. package/concorde-3d.bundle.js +0 -3960
  93. package/concorde-3d.es.js +0 -33433
  94. package/concorde-hugging-face-infer.bundle.js +0 -32
  95. package/concorde-hugging-face-infer.es.js +0 -2952
  96. package/concorde-shader.bundle.js +0 -116
  97. package/concorde-shader.es.js +0 -8353
  98. package/concorde-webgpu.bundle.js +0 -307
  99. package/concorde-webgpu.es.js +0 -8627
  100. package/docs/altcha-widget.js +0 -2662
  101. package/docs/assets/index-BZiZXMU-.css +0 -1
  102. package/docs/assets/index-FmK4JaIM.js +0 -11992
  103. package/docs/crawl/core/components/functional/date/date.html +0 -190
  104. package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
  105. package/docs/crawl/core/components/functional/if/if.html +0 -27
  106. package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
  107. package/docs/crawl/core/components/functional/list/list.html +0 -70
  108. package/docs/crawl/core/components/functional/mix/mix.html +0 -45
  109. package/docs/crawl/core/components/functional/queue/queue.html +0 -96
  110. package/docs/crawl/core/components/functional/router/router.html +0 -106
  111. package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
  112. package/docs/crawl/core/components/functional/states/states.html +0 -66
  113. package/docs/crawl/core/components/functional/submit/submit.html +0 -160
  114. package/docs/crawl/core/components/functional/subscriber/subscriber.html +0 -67
  115. package/docs/crawl/core/components/functional/value/value.html +0 -51
  116. package/docs/crawl/core/components/ui/alert/alert.html +0 -110
  117. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -23
  118. package/docs/crawl/core/components/ui/badge/badge.html +0 -119
  119. package/docs/crawl/core/components/ui/button/button.html +0 -149
  120. package/docs/crawl/core/components/ui/captcha/captcha.html +0 -30
  121. package/docs/crawl/core/components/ui/card/card.html +0 -99
  122. package/docs/crawl/core/components/ui/divider/divider.html +0 -58
  123. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
  124. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -135
  125. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -79
  126. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -62
  127. package/docs/crawl/core/components/ui/form/input/input.html +0 -109
  128. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -106
  129. package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
  130. package/docs/crawl/core/components/ui/form/select/select.html +0 -73
  131. package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
  132. package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
  133. package/docs/crawl/core/components/ui/group/group.html +0 -82
  134. package/docs/crawl/core/components/ui/icon/icon.html +0 -133
  135. package/docs/crawl/core/components/ui/image/image.html +0 -110
  136. package/docs/crawl/core/components/ui/link/link.html +0 -42
  137. package/docs/crawl/core/components/ui/loader/loader.html +0 -50
  138. package/docs/crawl/core/components/ui/menu/menu.html +0 -322
  139. package/docs/crawl/core/components/ui/modal/modal.html +0 -117
  140. package/docs/crawl/core/components/ui/pop/pop.html +0 -102
  141. package/docs/crawl/core/components/ui/progress/progress.html +0 -58
  142. package/docs/crawl/core/components/ui/table/table.html +0 -413
  143. package/docs/crawl/core/components/ui/toast/toast.html +0 -122
  144. package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -79
  145. package/docs/crawl/docs/_core-concept/dataFlow.html +0 -177
  146. package/docs/crawl/docs/_core-concept/overview.html +0 -66
  147. package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
  148. package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -116
  149. package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
  150. package/docs/crawl/docs/_decorators/bind.html +0 -141
  151. package/docs/crawl/docs/_decorators/get.html +0 -149
  152. package/docs/crawl/docs/_decorators/handle.html +0 -165
  153. package/docs/crawl/docs/_decorators/on-assign.html +0 -355
  154. package/docs/crawl/docs/_decorators/patch.html +0 -78
  155. package/docs/crawl/docs/_decorators/post.html +0 -139
  156. package/docs/crawl/docs/_decorators/publish.html +0 -61
  157. package/docs/crawl/docs/_decorators/put.html +0 -78
  158. package/docs/crawl/docs/_decorators/subscribe.html +0 -109
  159. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
  160. package/docs/crawl/docs/_directives/sub.html +0 -93
  161. package/docs/crawl/docs/_getting-started/ai-agents.html +0 -173
  162. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
  163. package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
  164. package/docs/crawl/docs/_getting-started/create-a-component.html +0 -111
  165. package/docs/crawl/docs/_getting-started/my-first-component.html +0 -189
  166. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
  167. package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
  168. package/docs/crawl/docs/_getting-started/start.html +0 -76
  169. package/docs/crawl/docs/_getting-started/theming.html +0 -85
  170. package/docs/crawl/docs/_misc/api-configuration.html +0 -149
  171. package/docs/crawl/docs/_misc/dataProviderKey.html +0 -135
  172. package/docs/crawl/docs/_misc/docs-mock-api.html +0 -158
  173. package/docs/crawl/docs/_misc/dynamic-path.html +0 -180
  174. package/docs/crawl/docs/_misc/endpoint.html +0 -50
  175. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
  176. package/docs/crawl/docs/_misc/html-integration.html +0 -48
  177. package/docs/crawl/hubs/decorators.html +0 -547
  178. package/docs/crawl/hubs/form-components.html +0 -357
  179. package/docs/crawl/hubs/remote-data.html +0 -452
  180. package/docs/crawl/index.html +0 -101
  181. package/docs/css/docs.css +0 -0
  182. package/docs/docs-mock-api-sw.js +0 -720
  183. package/docs/docs-mock-api-sw.js.map +0 -7
  184. package/docs/fonts/ClashGrotesk-Bold.eot +0 -0
  185. package/docs/fonts/ClashGrotesk-Bold.ttf +0 -0
  186. package/docs/fonts/ClashGrotesk-Bold.woff +0 -0
  187. package/docs/fonts/ClashGrotesk-Bold.woff2 +0 -0
  188. package/docs/fonts/ClashGrotesk-Extralight.eot +0 -0
  189. package/docs/fonts/ClashGrotesk-Extralight.ttf +0 -0
  190. package/docs/fonts/ClashGrotesk-Extralight.woff +0 -0
  191. package/docs/fonts/ClashGrotesk-Extralight.woff2 +0 -0
  192. package/docs/fonts/ClashGrotesk-Light.eot +0 -0
  193. package/docs/fonts/ClashGrotesk-Light.ttf +0 -0
  194. package/docs/fonts/ClashGrotesk-Light.woff +0 -0
  195. package/docs/fonts/ClashGrotesk-Light.woff2 +0 -0
  196. package/docs/fonts/ClashGrotesk-Medium.eot +0 -0
  197. package/docs/fonts/ClashGrotesk-Medium.ttf +0 -0
  198. package/docs/fonts/ClashGrotesk-Medium.woff +0 -0
  199. package/docs/fonts/ClashGrotesk-Medium.woff2 +0 -0
  200. package/docs/fonts/ClashGrotesk-Regular.eot +0 -0
  201. package/docs/fonts/ClashGrotesk-Regular.ttf +0 -0
  202. package/docs/fonts/ClashGrotesk-Regular.woff +0 -0
  203. package/docs/fonts/ClashGrotesk-Regular.woff2 +0 -0
  204. package/docs/fonts/ClashGrotesk-Semibold.eot +0 -0
  205. package/docs/fonts/ClashGrotesk-Semibold.ttf +0 -0
  206. package/docs/fonts/ClashGrotesk-Semibold.woff +0 -0
  207. package/docs/fonts/ClashGrotesk-Semibold.woff2 +0 -0
  208. package/docs/fonts/ClashGrotesk-Variable.eot +0 -0
  209. package/docs/fonts/ClashGrotesk-Variable.ttf +0 -0
  210. package/docs/fonts/ClashGrotesk-Variable.woff +0 -0
  211. package/docs/fonts/ClashGrotesk-Variable.woff2 +0 -0
  212. package/docs/img/concorde-icon.svg +0 -5
  213. package/docs/img/concorde-logo.svg +0 -1
  214. package/docs/img/concorde.png +0 -0
  215. package/docs/img/concorde_def.png +0 -0
  216. package/docs/img/concorde_seuil.png.webp +0 -0
  217. package/docs/img/concorde_seuil_invert.png +0 -0
  218. package/docs/img/paul_metrand.jpg +0 -0
  219. package/docs/img/paul_metrand_xs.jpg +0 -0
  220. package/docs/index.html +0 -93
  221. package/docs/llms-full.txt +0 -5787
  222. package/docs/llms.txt +0 -104
  223. package/docs/robots.txt +0 -16
  224. package/docs/sitemap.xml +0 -237
  225. package/docs/src/core/components/functional/date/date.md +0 -290
  226. package/docs/src/core/components/functional/fetch/fetch.md +0 -125
  227. package/docs/src/core/components/functional/if/if.md +0 -9
  228. package/docs/src/core/components/functional/jsonata/jsonata.md +0 -56
  229. package/docs/src/core/components/functional/list/list.md +0 -65
  230. package/docs/src/core/components/functional/mix/mix.md +0 -41
  231. package/docs/src/core/components/functional/queue/queue.md +0 -72
  232. package/docs/src/core/components/functional/router/router.md +0 -94
  233. package/docs/src/core/components/functional/sdui/default-library.json +0 -108
  234. package/docs/src/core/components/functional/sdui/example.json +0 -99
  235. package/docs/src/core/components/functional/sdui/sdui.md +0 -356
  236. package/docs/src/core/components/functional/states/states.md +0 -87
  237. package/docs/src/core/components/functional/submit/submit.md +0 -114
  238. package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
  239. package/docs/src/core/components/functional/value/value.md +0 -35
  240. package/docs/src/core/components/ui/alert/alert.md +0 -121
  241. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -0
  242. package/docs/src/core/components/ui/badge/badge.md +0 -127
  243. package/docs/src/core/components/ui/button/button.md +0 -182
  244. package/docs/src/core/components/ui/captcha/captcha.md +0 -12
  245. package/docs/src/core/components/ui/card/card.md +0 -97
  246. package/docs/src/core/components/ui/divider/divider.md +0 -35
  247. package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -77
  248. package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -129
  249. package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -77
  250. package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -44
  251. package/docs/src/core/components/ui/form/input/input.md +0 -142
  252. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -133
  253. package/docs/src/core/components/ui/form/radio/radio.md +0 -57
  254. package/docs/src/core/components/ui/form/select/select.md +0 -71
  255. package/docs/src/core/components/ui/form/switch/switch.md +0 -57
  256. package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
  257. package/docs/src/core/components/ui/group/group.md +0 -75
  258. package/docs/src/core/components/ui/icon/icon.md +0 -125
  259. package/docs/src/core/components/ui/icon/icons.json +0 -1
  260. package/docs/src/core/components/ui/image/image.md +0 -107
  261. package/docs/src/core/components/ui/link/link.md +0 -43
  262. package/docs/src/core/components/ui/loader/loader.md +0 -55
  263. package/docs/src/core/components/ui/menu/menu.md +0 -329
  264. package/docs/src/core/components/ui/modal/modal.md +0 -119
  265. package/docs/src/core/components/ui/pop/pop.md +0 -96
  266. package/docs/src/core/components/ui/progress/progress.md +0 -63
  267. package/docs/src/core/components/ui/table/table.md +0 -455
  268. package/docs/src/core/components/ui/toast/toast.md +0 -166
  269. package/docs/src/core/components/ui/tooltip/tooltip.md +0 -82
  270. package/docs/src/docs/_core-concept/dataFlow.md +0 -88
  271. package/docs/src/docs/_core-concept/overview.md +0 -57
  272. package/docs/src/docs/_core-concept/subscriber.md +0 -75
  273. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -127
  274. package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
  275. package/docs/src/docs/_decorators/bind.md +0 -167
  276. package/docs/src/docs/_decorators/get.md +0 -162
  277. package/docs/src/docs/_decorators/handle.md +0 -175
  278. package/docs/src/docs/_decorators/on-assign.md +0 -390
  279. package/docs/src/docs/_decorators/patch.md +0 -70
  280. package/docs/src/docs/_decorators/post.md +0 -146
  281. package/docs/src/docs/_decorators/publish.md +0 -55
  282. package/docs/src/docs/_decorators/put.md +0 -70
  283. package/docs/src/docs/_decorators/subscribe.md +0 -100
  284. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
  285. package/docs/src/docs/_directives/sub.md +0 -91
  286. package/docs/src/docs/_getting-started/ai-agents.md +0 -76
  287. package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
  288. package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
  289. package/docs/src/docs/_getting-started/create-a-component.md +0 -139
  290. package/docs/src/docs/_getting-started/my-first-component.md +0 -236
  291. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
  292. package/docs/src/docs/_getting-started/pubsub.md +0 -37
  293. package/docs/src/docs/_getting-started/start.md +0 -47
  294. package/docs/src/docs/_getting-started/theming.md +0 -91
  295. package/docs/src/docs/_misc/api-configuration.md +0 -81
  296. package/docs/src/docs/_misc/dataProviderKey.md +0 -168
  297. package/docs/src/docs/_misc/docs-mock-api.md +0 -63
  298. package/docs/src/docs/_misc/dynamic-path.md +0 -71
  299. package/docs/src/docs/_misc/endpoint.md +0 -45
  300. package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  301. package/docs/src/docs/_misc/html-integration.md +0 -15
  302. package/docs/src/docs/search/docs-search.json +0 -9512
  303. package/docs/src/tag-list.json +0 -1
  304. package/docs/src/tsconfig-model.json +0 -23
  305. package/docs/src/tsconfig.declarations.json +0 -22
  306. package/docs/src/tsconfig.emit.json +0 -23
  307. package/docs/src/tsconfig.json +0 -858
  308. package/docs/svg/regular/plane.svg +0 -1
  309. package/docs/svg/solid/plane.svg +0 -1
  310. package/gitlab/job_github_mirror.sh +0 -39
  311. package/scripts/github-export.mjs +0 -150
  312. package/src/css.d.ts +0 -19
  313. package/src/tsconfig.declarations.json +0 -22
  314. package/src/tsconfig.emit.json +0 -23
package/docs/crawl/docs/_getting-started/ai-agents.html DELETED
@@ -1,173 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/ai-agents.html" data-doc-id="docs/_getting-started/ai-agents">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AI agents (skills &amp; AGENTS.md) — Concorde</title>
7
- <meta name="description" content="Concorde ships skills, rules, and a root AGENTS.md so Cursor, JetBrains AI Assistant, and other coding agents follow framework patterns (DataProvider, decorators, short imports, scope, theme, migratio">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/ai-agents, ai-agents, AI agents (skills &amp; AGENTS.md), guide, AGENTS.md, yarn ai:sync, ai-init, yarn add @supersoniks/concorde, |
9
- | Concorde repo (contributors) | , --skip-agents, --merge-agents, --force-agents">
10
- <meta name="concorde-doc-id" content="docs/_getting-started/ai-agents">
11
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/ai-agents.html">
12
- </head>
13
- <body>
14
- <header>
15
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/ai-agents.md/ai-agents" rel="nofollow">interactive version</a></p>
16
- </header>
17
- <main>
18
- <article>
19
- <p class="doc-lead" id="doc-summary"><strong>Concorde guide — AI agents (skills &amp; AGENTS.md)</strong>. Concorde ships skills, rules, and a root AGENTS.md so Cursor, JetBrains AI Assistant, and other coding agents follow framework patterns (DataProvider, decorators, short imports, scope, theme, migratio <span>Doc ID: <code>docs/_getting-started/ai-agents</code>. Keywords: Concorde, supersoniks, docs/_getting-started/ai-agents, ai-agents, AI agents (skills &amp; AGENTS.md), guide, AGENTS.md, yarn ai:sync, ai-init, yarn add @supersoniks/concorde, |
20
- | Concorde repo (contributors) | , --skip-agents, --merge-agents, --force-agents. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/ai-agents.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/ai-agents.html</a>.</span></p>
21
- <h1 id="ai-agents-skills--agentsmd">AI agents (skills &amp; AGENTS.md)</h1>
22
- <p>Concorde ships <strong>skills</strong>, <strong>rules</strong>, and a root <strong><code>AGENTS.md</code></strong> so Cursor, JetBrains AI Assistant, and other coding agents follow framework patterns (DataProvider, decorators, short imports, scope, theme, migrations).</p>
23
- <p>On a <a href="./concorde-outside.html#concorde-outside">starter</a> project, run <code>yarn ai:sync</code> after install. On a <a href="./concorde-manual-install.html#concorde-manual-install">manual / brownfield</a> project, install Concorde first, then use <code>ai-init</code> below.</p>
24
- <h2 id="dedicated-commands">Dedicated commands</h2>
25
- <table>
26
- <thead>
27
- <tr>
28
- <th>Context</th>
29
- <th>Command</th>
30
- </tr>
31
- </thead>
32
- <tbody><tr>
33
- <td><a href="https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter">create-concorde-ts-starter</a> project</td>
34
- <td><code>yarn ai:sync</code></td>
35
- </tr>
36
- <tr>
37
- <td>Any consumer app (after <code>yarn add @supersoniks/concorde</code>)</td>
38
- <td><code>node node_modules/@supersoniks/concorde/scripts/ai-init.mjs</code></td>
39
- </tr>
40
- <tr>
41
- <td>Concorde repo (contributors)</td>
42
- <td><code>yarn ai-init</code></td>
43
- </tr>
44
- </tbody></table>
45
- <pre><code class="language-shell"># Starter (from project root)
46
- yarn ai:sync
47
-
48
- # Manual / existing project
49
- node node_modules/@supersoniks/concorde/scripts/ai-init.mjs
50
- </code></pre>
51
- <h2 id="useful-flags">Useful flags</h2>
52
- <table>
53
- <thead>
54
- <tr>
55
- <th>Flag</th>
56
- <th>Effect</th>
57
- </tr>
58
- </thead>
59
- <tbody><tr>
60
- <td><code>--skip-agents</code></td>
61
- <td>Never write <code>AGENTS.md</code> (skills / rules only)</td>
62
- </tr>
63
- <tr>
64
- <td><code>--merge-agents</code></td>
65
- <td>Opt-in: keep the project preamble and append / refresh the Concorde block</td>
66
- </tr>
67
- <tr>
68
- <td><code>--force-agents</code></td>
69
- <td>Opt-in: <strong>replace</strong> the whole <code>AGENTS.md</code> (destructive)</td>
70
- </tr>
71
- <tr>
72
- <td><code>--overlay &lt;dir&gt;</code></td>
73
- <td>Extra rules/skills + optional <code>AGENTS.concorde.md</code> for project-only Concorde agent notes</td>
74
- </tr>
75
- <tr>
76
- <td><code>--cursor-only</code></td>
77
- <td>Install only <code>.cursor/skills</code> and <code>.cursor/rules</code></td>
78
- </tr>
79
- <tr>
80
- <td><code>--jetbrains-only</code></td>
81
- <td>Install only <code>.aiassistant/rules/</code></td>
82
- </tr>
83
- </tbody></table>
84
- <h2 id="agentsmd-policy-non-invasive"><code>AGENTS.md</code> policy (non-invasive)</h2>
85
- <table>
86
- <thead>
87
- <tr>
88
- <th>Situation</th>
89
- <th>Default</th>
90
- </tr>
91
- </thead>
92
- <tbody><tr>
93
- <td>No <code>AGENTS.md</code></td>
94
- <td>Create the Concorde guide</td>
95
- </tr>
96
- <tr>
97
- <td>File with <code>&lt;!-- concorde-ai --&gt;</code></td>
98
- <td>Refresh the managed zone only</td>
99
- </tr>
100
- <tr>
101
- <td>File <strong>without</strong> marker (project notes)</td>
102
- <td><strong>Left untouched</strong> — skills / rules are enough</td>
103
- </tr>
104
- <tr>
105
- <td><code>--merge-agents</code> / <code>--force-agents</code> / <code>--skip-agents</code></td>
106
- <td>See flags above</td>
107
- </tr>
108
- </tbody></table>
109
- <pre><code class="language-text">[optional project preamble — short, project-only]
110
- &lt;!-- concorde-ai --&gt;
111
- &lt;package ai/AGENTS.md&gt;
112
- [--- + overlay AGENTS.concorde.md]
113
- </code></pre>
114
- <p>Everything <strong>after</strong> <code>&lt;!-- concorde-ai --&gt;</code> is replaced on each <code>ai-init</code> run (idempotent). Do not paste a full copy of the Concorde guide above the marker — put project-specific notes in <code>AGENTS.concorde.md</code> (overlay). If the preamble duplicates package <code>AGENTS.md</code>, <code>ai-init</code> slims or drops it and prints a warning. Legacy filenames <code>AGENTS.overlay.md</code> / <code>AGENTS.starter.md</code> are still accepted with a deprecation warning.</p>
115
- <h2 id="what-gets-installed">What gets installed</h2>
116
- <table>
117
- <thead>
118
- <tr>
119
- <th>Path</th>
120
- <th>Role</th>
121
- </tr>
122
- </thead>
123
- <tbody><tr>
124
- <td><code>AGENTS.md</code></td>
125
- <td>Created only if missing; existing project-owned files are left alone unless <code>--merge-agents</code> / <code>--force-agents</code></td>
126
- </tr>
127
- <tr>
128
- <td><code>.cursor/skills/concorde/</code></td>
129
- <td>Core Lit + DataProvider patterns</td>
130
- </tr>
131
- <tr>
132
- <td><code>.cursor/skills/concorde-imports/</code></td>
133
- <td>Short <code>@supersoniks/concorde/…</code> import paths</td>
134
- </tr>
135
- <tr>
136
- <td><code>.cursor/skills/concorde-scope/</code></td>
137
- <td><code>serviceURL</code>, <code>formDataProvider</code>, API configuration</td>
138
- </tr>
139
- <tr>
140
- <td><code>.cursor/skills/concorde-theme/</code></td>
141
- <td><code>sonic-theme</code> and <code>--sc-*</code> tokens</td>
142
- </tr>
143
- <tr>
144
- <td><code>.cursor/skills/concorde-menu/</code></td>
145
- <td><code>sonic-menu</code> navigation</td>
146
- </tr>
147
- <tr>
148
- <td><code>.cursor/skills/concorde-get-set-dp/</code></td>
149
- <td><code>get</code> / <code>set</code> / <code>dp</code> and <code>DataProviderKey</code> migration</td>
150
- </tr>
151
- <tr>
152
- <td><code>.cursor/rules/concorde.mdc</code></td>
153
- <td>Cursor rules (always-on patterns)</td>
154
- </tr>
155
- <tr>
156
- <td><code>.aiassistant/rules/concorde.md</code></td>
157
- <td>JetBrains AI Assistant rules</td>
158
- </tr>
159
- </tbody></table>
160
- <h2 id="workflow">Workflow</h2>
161
- <ol>
162
- <li><strong>Starter project:</strong> <a href="./concorde-outside.html#concorde-outside">Installation</a> — <code>yarn ai:sync</code> is wired in the kit.</li>
163
- <li><strong>Existing / manual Vite project:</strong> <a href="./concorde-manual-install.html#concorde-manual-install">Manual installation</a>, then <strong><code>ai-init</code></strong> after <code>yarn add @supersoniks/concorde</code>.</li>
164
- <li>Commit <code>.cursor/</code> and <code>.aiassistant/</code> (and <code>AGENTS.md</code> only if you opted in / it was created) if your team shares agent settings.</li>
165
- <li>Re-run the same command when you bump <code>@supersoniks/concorde</code> to refresh skills from <code>node_modules/@supersoniks/concorde/ai/</code>.</li>
166
- <li>In Cursor, skills under <code>.cursor/skills/</code> are picked up automatically; mention a skill in chat for focused tasks (e.g. migration → <code>concorde-get-set-dp</code>).</li>
167
- </ol>
168
- <p>Source files in the npm package: <code>node_modules/@supersoniks/concorde/ai/</code> (see also <code>ai/README.md</code> in the <a href="https://github.com/supersoniks/concorde">Concorde repository</a>).</p>
169
-
170
- </article>
171
- </main>
172
- </body>
173
- </html>
package/docs/crawl/docs/_getting-started/concorde-manual-install.html DELETED
@@ -1,100 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-manual-install.html" data-doc-id="docs/_getting-started/concorde-manual-install">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Manual installation (Vite) — Concorde</title>
7
- <meta name="description" content="&gt; Legacy — for brownfield apps or custom stacks. New projects should use the starter.">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/concorde-manual-install, concorde-manual-install, Manual installation (Vite), guide, tsconfig.json, AGENTS.md, --host, becomes ,
9
- * , main.ts, my-element.ts">
10
- <meta name="concorde-doc-id" content="docs/_getting-started/concorde-manual-install">
11
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-manual-install.html">
12
- </head>
13
- <body>
14
- <header>
15
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/concorde-manual-install.md/concorde-manual-install" rel="nofollow">interactive version</a></p>
16
- </header>
17
- <main>
18
- <article>
19
- <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Manual installation (Vite)</strong>. &gt; Legacy — for brownfield apps or custom stacks. New projects should use the starter. <span>Doc ID: <code>docs/_getting-started/concorde-manual-install</code>. Keywords: Concorde, supersoniks, docs/_getting-started/concorde-manual-install, concorde-manual-install, Manual installation (Vite), guide, tsconfig.json, AGENTS.md, --host, becomes ,
20
- * , main.ts, my-element.ts. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-manual-install.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-manual-install.html</a>.</span></p>
21
- <h1 id="manual-installation-vite">Manual installation (Vite)</h1>
22
- <blockquote>
23
- <p><strong>Legacy</strong> — for brownfield apps or custom stacks. New projects should use the <a href="./concorde-outside.html#concorde-outside">starter</a>.</p>
24
- </blockquote>
25
- <h2 id="brand-new-vite-project">Brand New Vite Project</h2>
26
- <p>Tailwind configuration is not covered here yet.</p>
27
- <h3 id="creating-the-project">Creating the Project</h3>
28
- <pre><code class="language-shell"># Pure JavaScript project
29
- yarn create vite --template vanilla-js
30
- # TypeScript project
31
- # (it is recommended to use this approach, which installs Lit separately if needed, via &quot;yarn add lit&quot;)
32
- yarn create vite --template vanilla-ts
33
- # TypeScript + Lit project
34
- # (creating new web components, for example, to extend the fetch or subscriber mixins)
35
- yarn create vite --template lit-ts
36
- </code></pre>
37
- <p>Using Lit with TypeScript requires the following configuration in the &quot;compilerOptions&quot; section of the <code>tsconfig.json</code> file:</p>
38
- <pre><code class="language-json">&quot;experimentalDecorators&quot;: true,
39
- &quot;useDefineForClassFields&quot;: false
40
- </code></pre>
41
- <h3 id="installing-concorde">Installing Concorde</h3>
42
- <p>Navigate to the project folder created and perform the installation:</p>
43
- <pre><code class="language-shell">yarn add @supersoniks/concorde
44
- </code></pre>
45
- <p>Agent skills (<code>AGENTS.md</code>, Cursor / JetBrains): see <a href="./ai-agents.html#ai-agents">AI agents</a> — run <code>node node_modules/@supersoniks/concorde/scripts/ai-init.mjs</code> after install.</p>
46
- <h3 id="development--build">Development / Build</h3>
47
- <pre><code class="language-shell"># Development (you can add `--host` after the command chain in package.json&#39;s dev script instead of typing it each time as shown below)
48
- yarn dev --host
49
- # Build
50
- yarn build
51
- </code></pre>
52
- <h2 id="shortcut-imports">Shortcut Imports</h2>
53
- <p>Shortcut imports work by default in JavaScript, but in TypeScript, they are activated by choice as they inject data into <em>tsconfig.json</em>. Here is the command:</p>
54
- <pre><code class="language-shell">npx concorde enable-short-paths
55
- </code></pre>
56
- <p>Shortcut imports replace the actual paths with aliases as follows:</p>
57
- <ul>
58
- <li><code>@supersoniks/concorde/core/components/functional_or_ui/component/component</code> becomes <code>@supersoniks/concorde/functional_or_ui/component</code></li>
59
- <li><code>@supersoniks/concorde/core/mixins_or_utils/class_name</code> becomes <code>@supersoniks/concorde/mixins_or_utils/class_name</code></li>
60
- </ul>
61
- <p>The original paths remain accessible. Shortcut imports are used for the examples later in this documentation.</p>
62
- <h2 id="usage">Usage</h2>
63
- <h3 id="simple-integration-in-html">Simple Integration in HTML</h3>
64
- <p>Import needed component in <code>main.ts</code> or wherever you want to use it:</p>
65
- <pre><code class="language-typescript">import &quot;@supersoniks/concorde/ui/button&quot;;
66
- </code></pre>
67
- <p>Then in the render function ofyour component or in the HTML of the web page that includes the compiled JS, use the component as follows:</p>
68
- <pre><code>&lt;sonic-button variant=&quot;outline&quot;&gt;My button&lt;/sonic-button&gt;
69
- </code></pre>
70
- <h3 id="using-a-mixin-to-create-a-new-lit-component">Using a Mixin to Create a New Lit Component</h3>
71
- <p>For example, create a file <code>my-element.ts</code> at the root:</p>
72
- <pre><code class="language-typescript">import { html, LitElement } from &quot;lit&quot;;
73
- import { customElement, property } from &quot;lit/decorators.js&quot;;
74
- import Fetcher from &quot;@supersoniks/concorde/mixins/Fetcher&quot;;
75
- import Subscriber from &quot;@supersoniks/concorde/mixins/Subscriber&quot;;
76
-
77
- @customElement(&quot;my-element&quot;)
78
- export class SonicComponent extends Fetcher(Subscriber(LitElement)) {
79
- @property() email = &quot;&quot;;
80
- @property() first_name = &quot;&quot;;
81
- @property() last_name = &quot;&quot;;
82
-
83
- render() {
84
- return html`&lt;div&gt;
85
- ${this.first_name} ${this.last_name} : ${this.email}
86
- &lt;/div&gt;`;
87
- }
88
- }
89
- </code></pre>
90
- <p>Import component <code>main.ts</code> or <code>main.js</code> or any other component that uses it to be compiled</p>
91
- <pre><code class="language-typescript">import &quot;./my-element&quot;;
92
- </code></pre>
93
- <p>In the HTML of a JS or TS component or in the HTML of the web page containing the compiled JS:</p>
94
- <pre><code class="language-html">&lt;my-element serviceURL=&quot;/docs-mock-api&quot; dataProvider=&quot;api/users/2&quot; key=&quot;data&quot;&gt;&lt;/my-element&gt;
95
- </code></pre>
96
-
97
- </article>
98
- </main>
99
- </body>
100
- </html>
package/docs/crawl/docs/_getting-started/concorde-outside.html DELETED
@@ -1,58 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html" data-doc-id="docs/_getting-started/concorde-outside">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Installation — Concorde</title>
7
- <meta name="description" content="The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started.">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/concorde-outside, concorde-outside, Installation, guide, yarn ai:sync">
9
- <meta name="concorde-doc-id" content="docs/_getting-started/concorde-outside">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/concorde-outside.md/concorde-outside" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Installation</strong>. The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started. <span>Doc ID: <code>docs/_getting-started/concorde-outside</code>. Keywords: Concorde, supersoniks, docs/_getting-started/concorde-outside, concorde-outside, Installation, guide, yarn ai:sync. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html</a>.</span></p>
19
- <h1 id="installation">Installation</h1>
20
- <sonic-alert status="success" label="Recommended — use the starter" size="xl" background>
21
- <p><strong>For almost all new projects, use <a href="https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter">create-concorde-ts-starter</a>.</strong></p>
22
- <p>You get Vite + TypeScript + Lit + Tailwind, an example component, <code>npx concorde enable-short-paths</code> ready to run, and <code>yarn ai:sync</code> for <a href="./ai-agents.html#ai-agents">AI agent skills</a> (<code>AGENTS.md</code>, Cursor / JetBrains rules) without extra setup.</p>
23
- </sonic-alert>
24
-
25
- <h2 id="starter">Starter</h2>
26
- <p>The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started.</p>
27
- <pre><code class="language-shell">npx @supersoniks/create-concorde-ts-starter &quot;project_name&quot;
28
- </code></pre>
29
- <p>Then, from the project folder:</p>
30
- <pre><code class="language-shell">yarn install
31
- yarn dev --host
32
- </code></pre>
33
- <h2 id="next-steps">Next steps</h2>
34
- <table>
35
- <thead>
36
- <tr>
37
- <th>Step</th>
38
- <th>Page</th>
39
- </tr>
40
- </thead>
41
- <tbody><tr>
42
- <td>Learn patterns</td>
43
- <td><a href="./my-first-component.html#my-first-component">My first component</a></td>
44
- </tr>
45
- <tr>
46
- <td>Agent skills</td>
47
- <td><a href="./ai-agents.html#ai-agents">AI agents (skills)</a> — <code>yarn ai:sync</code> on the starter</td>
48
- </tr>
49
- <tr>
50
- <td>Brownfield / manual Vite</td>
51
- <td><a href="./concorde-manual-install.html#concorde-manual-install">Legacy: Manual installation</a></td>
52
- </tr>
53
- </tbody></table>
54
-
55
- </article>
56
- </main>
57
- </body>
58
- </html>
package/docs/crawl/docs/_getting-started/create-a-component.html DELETED
@@ -1,111 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/create-a-component.html" data-doc-id="docs/_getting-started/create-a-component">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Creating components — Concorde</title>
7
- <meta name="description" content="&gt; New app components: start with My first component and Data flow. The Subscriber mixin below is legacy.">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/create-a-component, create-a-component, Creating components, guide, Subscriber, core, /components/destination/, /components/atoms, example.ts, ${this.text}">
9
- <meta name="concorde-doc-id" content="docs/_getting-started/create-a-component">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/create-a-component.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/create-a-component.md/create-a-component" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Creating components</strong>. &gt; New app components: start with My first component and Data flow. The Subscriber mixin below is legacy. <span>Doc ID: <code>docs/_getting-started/create-a-component</code>. Keywords: Concorde, supersoniks, docs/_getting-started/create-a-component, create-a-component, Creating components, guide, Subscriber, core, /components/destination/, /components/atoms, example.ts, ${this.text}. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/create-a-component.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/create-a-component.html</a>.</span></p>
19
- <h1 id="creating-components">Creating components</h1>
20
- <blockquote>
21
- <p><strong>New app components:</strong> start with <a href="./my-first-component.html#my-first-component">My first component</a> and <a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a>. The <code>Subscriber</code> mixin below is <a href="../_core-concept/subscriber.html#subscriber">legacy</a>.</p>
22
- </blockquote>
23
- <h2 id="where-to-put-it">Where to put it?</h2>
24
- <p>In this document, we consider the src directory of the project as the root.<br>
25
- We describe how we organize our components as an example, however it depends on your project.</p>
26
- <p>In concorde each component is currently organized in the following directory structure (at least we try):</p>
27
- <ul>
28
- <li><strong>/core/components/functional/component-name/component-name.ts</strong><br>Generic/functional/generally unstyled component.
29
- The component usually doesn&#39;t use any other concrete components.</li>
30
- <li><strong>/core/components/ui/component-name/component-name.ts</strong><br>Generic but UI-oriented component.
31
- The component usually only uses generic components and other UI components.</li>
32
- <li><strong>la-billetterie/components/atoms/component-name/component-name.ts</strong><br>The component is intended to have a concrete usage within our ticketing system <strong>&quot;la-billetterie&quot;</strong>.
33
- It usually only uses generic components from <code>core</code> and possibly other atoms.</li>
34
- <li><strong>la-billetterie/components/concrete-destination/component-name/component-name.ts</strong><br>The component has a specific destination: (event / cart / gift card): <code>/components/destination/</code>
35
- The component uses various components, usually from the <code>/components/atoms</code> directory.
36
- It does not use components at the same level in the file hierarchy.</li>
37
- </ul>
38
- <h2 id="starting-from-a-simple-model">Starting from a Simple Model</h2>
39
- <p>You can copy <code>example.ts</code> from the source to the desired destination to start with.
40
- This file contains a web component in the form of a class that extends the <code>Subscriber</code> mixin, with a reactive property and a render function.</p>
41
- <pre><code class="language-javascript">import { html, LitElement } from &quot;lit&quot;;
42
- import { customElement, property } from &quot;lit/decorators.js&quot;;
43
- import Subscriber from &quot;@supersoniks/concorde/core/mixins/Subscriber&quot;;
44
-
45
- @customElement(&quot;sonic-example&quot;)
46
- export class SonicComponent extends Subscriber(LitElement) {
47
- @property() text = &quot;Example&quot;;
48
- render() {
49
- return html`${this.text}`;
50
- }
51
- }
52
- </code></pre>
53
- <p><strong>You can remove the dependency on <code>Subscriber</code></strong> if automatic population of the component with external data is not required.
54
- For example, for a UI component:</p>
55
- <pre><code class="language-javascript">import { html, LitElement } from &quot;lit&quot;;
56
- import { customElement, property } from &quot;lit/decorators.js&quot;;
57
-
58
- @customElement(&quot;sonic-example&quot;)
59
- export class SonicComponent extends LitElement {
60
- @property() text = &quot;Example&quot;;
61
- render() {
62
- return html`${this.text}`;
63
- }
64
- }
65
- </code></pre>
66
- <p>Regarding <code>Subscriber</code>, see:</p>
67
- <ul>
68
- <li><a href="../_core-concept/subscriber.html#subscriber">🔔 Subscriber</a></li>
69
- <li><a href="./pubsub.html#pubsub">🥨 Sharing Data</a></li>
70
- </ul>
71
- <h3 id="naming-the-component">Naming the Component</h3>
72
- <p>The class name is not necessarily important. However, it is important to <strong>give it a component name prefixed with &quot;sonic&quot;</strong> (or a prefix of your own) using the dedicated metadata already present in the copied document. For example, a button component would be named as follows:</p>
73
- <pre><code class="language-typescript">@customElement(&quot;sonic-button&quot;)
74
- </code></pre>
75
- <p>For less generic components with a specific destination, we advise to include the destination in the name.
76
- For example, for a &quot;title&quot; component in the &quot;event&quot; destination, the name would be simply:</p>
77
- <pre><code class="language-typescript">@customElement(&quot;sonic-event-title&quot;)
78
- </code></pre>
79
- <h2 id="modifying-it">Modifying It</h2>
80
- <h4 id="creating-reactive-properties-and-modifying-the-render-function">Creating Reactive Properties and Modifying the Render Function</h4>
81
- <p>To do this, study the functioning of <a href="https://lit.dev">https://lit.dev</a> and also refer to <a href="../_core-concept/subscriber.html#subscriber">Subscriber</a>.</p>
82
- <h4 id="html-structure-of-a-component">HTML Structure of a Component</h4>
83
- <p>The HTML structure of a component should remain as simple as possible.</p>
84
- <p>Ideally, there should be only one additional level of elements in addition to slots.</p>
85
- <ul>
86
- <li><strong>The main component is already a wrapper</strong>.
87
- It receives classes to manage its layout, but it should not style internal elements.</li>
88
- <li><strong>Slots handle the visual organization</strong> of elements.</li>
89
- <li><strong>The specificity of the component is expressed in this additional level</strong> by adding a list, a functional native element (e.g., button), or another component.</li>
90
- </ul>
91
- <p>This leads to the creation of more components and thus raises questions about the hierarchical organization of files. However, this tends to atomize their roles.</p>
92
- <h2 id="referencing-it">Referencing It</h2>
93
- <p>To compile the component, it needs to be referenced somewhere through an import statement. In particular, it is important to reference it in any component that uses it.</p>
94
- <p>In the case where it can be directly used in a page, it should also be globally referenced, especially considering the creation of <strong>specific bundles</strong> in the future.</p>
95
- <p>Here&#39;s where we add imports based on the component&#39;s location inside concorde as an example</p>
96
- <ul>
97
- <li><strong>/core/components/functional/component-name/component-name.ts</strong><br>In <code>/core/components/functional/functional.ts</code>, which is referenced in core.ts and imported in <code>index.ts</code>.</li>
98
- <li><strong>/core/components/ui/component-name/component-name.ts</strong><br>In <code>/core/components/ui/ui.ts</code>, which is referenced in core.ts and imported in <code>index.ts</code>.</li>
99
- <li><strong>la-billetterie/components/atoms/component-name/component-name.ts</strong><br>Nowhere else but where it will be used, except for possible <strong>temporary</strong> tests, for example, in <code>index.ts</code>.</li>
100
- <li><strong>la-billetterie/components/concrete-destination/component-name/component-name.ts</strong><br>In <code>la-billetterie/components/concrete-destination/destination-concrete.ts</code>.
101
- If it&#39;s a new destination, you&#39;ll need to create the corresponding import .ts file and import it in <code>la-billetterie.ts</code>.</li>
102
- </ul>
103
- <h2 id="using-it">Using It</h2>
104
- <p>As a reminder, the component is simply integrated into the context by adding a tag with the component&#39;s name, for example:</p>
105
- <pre><code class="language-html">&lt;sonic-event-title&gt;&lt;/sonic-event-title&gt;
106
- </code></pre>
107
-
108
- </article>
109
- </main>
110
- </body>
111
- </html>