@supersoniks/concorde 5.1.2 → 5.1.3-immutable.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agents/skills/concorde-docs/SKILL.md +1 -1
- package/.claude/skills +1 -0
- package/.github/workflows/ci.yml +21 -0
- package/.github-export-ignore +30 -0
- package/CONTRIBUTING.md +59 -0
- package/DEV.md +54 -0
- package/LICENSE +21 -0
- package/OPEN_SOURCE_CHECKPOINT.md +133 -0
- package/README.md +1 -1
- package/ai/README.md +29 -41
- package/ai/skills/concorde/SKILL.md +54 -324
- package/ai/skills/concorde/rules/composition.md +32 -0
- package/ai/skills/concorde/rules/data.md +47 -0
- package/ai/skills/concorde/rules/http.md +25 -0
- package/ai/skills/concorde/rules/lists-forms.md +35 -0
- package/ai/skills/concorde/rules/styling.md +46 -0
- package/ai/skills/concorde/rules/troubleshooting.md +45 -0
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +177 -177
- package/concorde-core.es.js +4993 -4833
- package/custom-elements-manifest.public.config.mjs +8 -0
- package/{.tmp-cem/custom-elements.json → custom-elements.json} +11722 -8868
- package/dist/concorde-core.bundle.js +177 -177
- package/dist/concorde-core.es.js +4993 -4833
- package/dist/docs-mock-api-sw.js +58 -223
- package/dist/docs-mock-api-sw.js.map +4 -4
- package/dist/img/og-concorde.jpg +0 -0
- package/dist/robots.txt +11 -10
- package/docs/assets/index-CD4WyL6o.css +1 -0
- package/docs/assets/index-D_alEsng.js +12122 -0
- package/docs/crawl/core/components/functional/date/date.html +190 -0
- package/docs/crawl/core/components/functional/fetch/fetch.html +109 -0
- package/docs/crawl/core/components/functional/if/if.html +27 -0
- package/docs/crawl/core/components/functional/jsonata/jsonata.html +79 -0
- package/docs/crawl/core/components/functional/list/list.html +70 -0
- package/docs/crawl/core/components/functional/mix/mix.html +45 -0
- package/docs/crawl/core/components/functional/queue/queue.html +96 -0
- package/docs/crawl/core/components/functional/router/router.html +106 -0
- package/docs/{core → crawl/core}/components/functional/sdui/sdui-extension-points.html +8 -9
- package/docs/crawl/core/components/functional/sdui/sdui.html +368 -0
- package/docs/crawl/core/components/functional/states/states.html +66 -0
- package/docs/crawl/core/components/functional/submit/submit.html +160 -0
- package/docs/{core → crawl/core}/components/functional/subscriber/subscriber.html +5 -6
- package/docs/crawl/core/components/functional/value/value.html +51 -0
- package/docs/{core → crawl/core}/components/ui/alert/alert.html +63 -53
- package/docs/{core → crawl/core}/components/ui/alert-messages/alert-messages.html +5 -6
- package/docs/{core → crawl/core}/components/ui/badge/badge.html +33 -33
- package/docs/crawl/core/components/ui/button/button.html +150 -0
- package/docs/crawl/core/components/ui/captcha/captcha.html +112 -0
- package/docs/{core → crawl/core}/components/ui/card/card.html +11 -12
- package/docs/{core → crawl/core}/components/ui/divider/divider.html +14 -14
- package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +73 -0
- package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +266 -0
- package/docs/{core → crawl/core}/components/ui/form/form-actions/form-actions.html +23 -23
- package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +121 -0
- package/docs/crawl/core/components/ui/form/input/input.html +109 -0
- package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +38 -0
- package/docs/crawl/core/components/ui/form/radio/radio.html +56 -0
- package/docs/crawl/core/components/ui/form/select/select.html +73 -0
- package/docs/crawl/core/components/ui/form/switch/switch.html +56 -0
- package/docs/crawl/core/components/ui/form/textarea/textarea.html +59 -0
- package/docs/crawl/core/components/ui/group/group.html +104 -0
- package/docs/{core → crawl/core}/components/ui/icon/icon.html +9 -10
- package/docs/crawl/core/components/ui/image/image.html +298 -0
- package/docs/{core → crawl/core}/components/ui/link/link.html +11 -12
- package/docs/crawl/core/components/ui/loader/loader.html +124 -0
- package/docs/{core → crawl/core}/components/ui/menu/menu.html +33 -34
- package/docs/crawl/core/components/ui/modal/modal.html +342 -0
- package/docs/crawl/core/components/ui/pop/pop.html +296 -0
- package/docs/{core → crawl/core}/components/ui/progress/progress.html +7 -8
- package/docs/crawl/core/components/ui/table/table.html +545 -0
- package/docs/crawl/core/components/ui/theme/theme.html +131 -0
- package/docs/crawl/core/components/ui/toast/toast.html +233 -0
- package/docs/crawl/core/components/ui/tooltip/tooltip.html +140 -0
- package/docs/{docs/getting-started → crawl/docs/_core-concept}/dataFlow.html +29 -26
- package/docs/crawl/docs/_core-concept/overview.html +66 -0
- package/docs/crawl/docs/_core-concept/subscriber.html +75 -0
- package/docs/crawl/docs/_decorators/ancestor-attribute.html +117 -0
- package/docs/crawl/docs/_decorators/auto-subscribe.html +202 -0
- package/docs/crawl/docs/_decorators/bind.html +141 -0
- package/docs/crawl/docs/_decorators/get.html +149 -0
- package/docs/crawl/docs/_decorators/handle.html +165 -0
- package/docs/crawl/docs/_decorators/on-assign.html +355 -0
- package/docs/crawl/docs/_decorators/patch.html +78 -0
- package/docs/crawl/docs/_decorators/post.html +139 -0
- package/docs/crawl/docs/_decorators/publish.html +61 -0
- package/docs/crawl/docs/_decorators/put.html +78 -0
- package/docs/crawl/docs/_decorators/subscribe.html +109 -0
- package/docs/crawl/docs/_decorators/wait-for-ancestors.html +137 -0
- package/docs/crawl/docs/_directives/sub.html +93 -0
- package/docs/{docs/getting-started → crawl/docs/_getting-started}/ai-agents.html +11 -12
- package/docs/crawl/docs/_getting-started/concorde-manual-install.html +100 -0
- package/docs/crawl/docs/_getting-started/concorde-outside.html +58 -0
- package/docs/{docs/getting-started → crawl/docs/_getting-started}/create-a-component.html +14 -11
- package/docs/{docs/getting-started → crawl/docs/_getting-started}/my-first-component.html +22 -13
- package/docs/crawl/docs/_getting-started/my-first-subscriber.html +110 -0
- package/docs/crawl/docs/_getting-started/pubsub.html +62 -0
- package/docs/crawl/docs/_getting-started/start.html +76 -0
- package/docs/{docs/getting-started → crawl/docs/_getting-started}/theming.html +9 -10
- package/docs/{docs/misc → crawl/docs/_misc}/api-configuration.html +18 -18
- package/docs/{docs/misc → crawl/docs/_misc}/dataProviderKey.html +11 -12
- package/docs/{docs/misc → crawl/docs/_misc}/docs-mock-api.html +28 -25
- package/docs/{docs/misc → crawl/docs/_misc}/dynamic-path.html +15 -16
- package/docs/{docs/misc → crawl/docs/_misc}/endpoint.html +15 -16
- package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +138 -0
- package/docs/{docs/misc → crawl/docs/_misc}/html-integration.html +15 -12
- package/docs/crawl/hubs/decorators.html +547 -0
- package/docs/crawl/hubs/form-components.html +381 -0
- package/docs/crawl/hubs/remote-data.html +452 -0
- package/docs/crawl/index.html +103 -0
- package/docs/docs-mock-api-sw.js +223 -58
- package/docs/docs-mock-api-sw.js.map +4 -4
- package/docs/index.html +68 -95
- package/docs/llms-full.txt +3610 -2231
- package/docs/llms.txt +86 -94
- package/docs/robots.txt +10 -11
- package/docs/sitemap.xml +84 -78
- package/docs/src/core/components/functional/date/date.md +231 -91
- package/docs/src/core/components/functional/fetch/fetch.md +83 -66
- package/docs/src/core/components/functional/if/if.md +3 -28
- package/docs/src/core/components/functional/jsonata/jsonata.md +37 -42
- package/docs/src/core/components/functional/list/list.md +43 -99
- package/docs/src/core/components/functional/mix/mix.md +26 -31
- package/docs/src/core/components/functional/queue/queue.md +61 -40
- package/docs/src/core/components/functional/router/router.md +65 -64
- package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
- package/docs/src/core/components/functional/sdui/component-catalog.json +1 -1
- package/docs/src/core/components/functional/sdui/example.json +86 -19
- package/docs/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
- package/docs/src/core/components/functional/sdui/sdui.md +358 -187
- package/docs/src/core/components/functional/states/states.md +61 -86
- package/docs/src/core/components/functional/submit/submit.md +72 -64
- package/docs/src/core/components/functional/value/value.md +22 -34
- package/docs/src/core/components/ui/alert/alert.md +58 -48
- package/docs/src/core/components/ui/badge/badge.md +34 -27
- package/docs/src/core/components/ui/button/button.md +106 -139
- package/docs/src/core/components/ui/captcha/captcha.md +32 -17
- package/docs/src/core/components/ui/card/card.md +6 -6
- package/docs/src/core/components/ui/divider/divider.md +11 -8
- package/docs/src/core/components/ui/form/checkbox/checkbox.md +42 -90
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +75 -31
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +16 -14
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +29 -19
- package/docs/src/core/components/ui/form/input/input.md +95 -95
- package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +29 -0
- package/docs/src/core/components/ui/form/radio/radio.md +34 -55
- package/docs/src/core/components/ui/form/select/select.md +45 -60
- package/docs/src/core/components/ui/form/switch/switch.md +34 -57
- package/docs/src/core/components/ui/form/textarea/textarea.md +38 -55
- package/docs/src/core/components/ui/group/group.md +33 -35
- package/docs/src/core/components/ui/icon/icon.md +4 -4
- package/docs/src/core/components/ui/image/image.md +107 -41
- package/docs/src/core/components/ui/link/link.md +6 -6
- package/docs/src/core/components/ui/loader/loader.md +55 -30
- package/docs/src/core/components/ui/menu/menu.md +27 -27
- package/docs/src/core/components/ui/modal/modal.md +96 -72
- package/docs/src/core/components/ui/pop/pop.md +158 -80
- package/docs/src/core/components/ui/progress/progress.md +2 -2
- package/docs/src/core/components/ui/table/table.md +255 -91
- package/docs/src/core/components/ui/theme/theme.md +36 -11
- package/docs/src/core/components/ui/toast/toast.md +117 -48
- package/docs/src/core/components/ui/tooltip/tooltip.md +62 -27
- package/docs/{docs/getting-started → src/docs/_core-concept}/dataFlow.md +18 -17
- package/docs/src/docs/_core-concept/overview.md +57 -0
- package/docs/src/docs/_core-concept/subscriber.md +75 -0
- package/docs/src/docs/_decorators/ancestor-attribute.md +128 -0
- package/docs/src/docs/_decorators/auto-subscribe.md +202 -0
- package/docs/src/docs/_decorators/bind.md +167 -0
- package/docs/src/docs/_decorators/get.md +162 -0
- package/docs/src/docs/_decorators/handle.md +175 -0
- package/docs/src/docs/_decorators/on-assign.md +390 -0
- package/docs/src/docs/_decorators/patch.md +70 -0
- package/docs/src/docs/_decorators/post.md +146 -0
- package/docs/src/docs/_decorators/publish.md +55 -0
- package/docs/src/docs/_decorators/put.md +70 -0
- package/docs/src/docs/_decorators/subscribe.md +100 -0
- package/docs/src/docs/_decorators/wait-for-ancestors.md +163 -0
- package/docs/src/docs/_directives/sub.md +91 -0
- package/docs/src/docs/{getting-started → _getting-started}/ai-agents.md +3 -3
- package/docs/src/docs/_getting-started/concorde-manual-install.md +133 -0
- package/docs/src/docs/_getting-started/concorde-outside.md +33 -0
- package/docs/{docs/getting-started → src/docs/_getting-started}/create-a-component.md +6 -3
- package/docs/src/docs/{getting-started → _getting-started}/my-first-component.md +14 -5
- package/docs/src/docs/_getting-started/my-first-subscriber.md +120 -0
- package/docs/src/docs/_getting-started/pubsub.md +37 -0
- package/docs/src/docs/{getting-started → _getting-started}/start.md +13 -1
- package/docs/src/docs/{getting-started → _getting-started}/theming.md +2 -2
- package/docs/src/docs/{misc → _misc}/api-configuration.md +12 -10
- package/docs/src/docs/{misc → _misc}/dataProviderKey.md +4 -4
- package/docs/{docs/misc → src/docs/_misc}/docs-mock-api.md +13 -12
- package/docs/{docs/misc → src/docs/_misc}/dynamic-path.md +8 -8
- package/docs/{docs/misc → src/docs/_misc}/endpoint.md +8 -8
- package/docs/src/docs/_misc/formelement-subscriber-removal.md +115 -0
- package/docs/{docs/misc → src/docs/_misc}/html-integration.md +5 -4
- package/docs/src/docs/search/docs-search.json +4375 -2420
- package/docs/src/tsconfig.declarations.json +22 -0
- package/docs/src/tsconfig.emit.json +23 -0
- package/docs/src/tsconfig.json +2 -23
- package/gitlab/job_github_mirror.sh +39 -0
- package/index.html +89 -0
- package/package.json +22 -4
- package/public/img/og-concorde.jpg +0 -0
- package/scripts/ai-init.mjs +104 -379
- package/scripts/ai-init.test.mjs +81 -239
- package/scripts/docs-markdown-vite-plugin.ts +11 -5
- package/scripts/docs-public-url.mjs +6 -0
- package/scripts/docs.htaccess +7 -0
- package/scripts/generate-cem.mjs +244 -0
- package/scripts/generate-cem.test.mjs +122 -0
- package/scripts/generate-crawl-docs.mjs +29 -5
- package/scripts/generate-sdui-catalog.mjs +11 -10
- package/scripts/github-export.mjs +150 -0
- package/scripts/post-build-docs.js +3 -0
- package/scripts/post-build.mjs +0 -0
- package/scripts/pre-publish.mjs +2 -1
- package/scripts/site-pages.mjs +212 -0
- package/scripts/site-pages.test.mjs +116 -0
- package/site-pages/about.md +22 -0
- package/site-pages/privacy.md +32 -0
- package/src/core/components/functional/date/date.md +1 -1
- package/src/core/components/functional/example/example.ts +3 -1
- package/src/core/components/functional/if/if.ts +0 -0
- package/src/core/components/functional/list/list.demo.ts +0 -0
- package/src/core/components/functional/list/list.md +6 -2
- package/src/core/components/functional/list/list.ts +17 -4
- package/src/core/components/functional/mix/mix.md +0 -0
- package/src/core/components/functional/router/router.demo.ts +0 -0
- package/src/core/components/functional/router/router.ts +0 -0
- package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +0 -0
- package/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
- package/src/core/components/functional/sdui/component-catalog.json +2 -2
- package/src/core/components/functional/sdui/example.json +0 -0
- package/src/core/components/functional/sdui/sdui-immutable.spec.ts +74 -0
- package/src/core/components/functional/sdui/sdui.ts +33 -8
- package/src/core/components/functional/sdui/types.ts +0 -0
- package/src/core/components/functional/states/states.ts +0 -0
- package/src/core/components/functional/submit/submit.spec.ts +60 -0
- package/src/core/components/functional/submit/submit.ts +6 -3
- package/src/core/components/functional/subscriber/subscriber.ts +0 -0
- package/src/core/components/functional/value/value.md +0 -0
- package/src/core/components/functional/value/value.ts +0 -0
- package/src/core/components/ui/_css/size.ts +0 -0
- package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
- package/src/core/components/ui/card/card.md +1 -1
- package/src/core/components/ui/form/input/input.md +19 -1
- package/src/core/components/ui/form/input/input.ts +8 -2
- package/src/core/components/ui/form/radio/radio.md +14 -0
- package/src/core/components/ui/image/image.md +17 -17
- package/src/core/components/ui/modal/modal.md +2 -2
- package/src/core/decorators/subscriber/bind.ts +9 -14
- package/src/core/decorators/subscriber/subscribe.ts +15 -9
- package/src/core/decorators/subscriber/subscribe.type-test.ts +14 -5
- package/src/core/mixins/Subscriber.ts +0 -0
- package/src/core/utils/DataBindObserver.ts +0 -0
- package/src/core/utils/Objects.ts +0 -0
- package/src/core/utils/PublisherProxy.ts +166 -125
- package/src/core/utils/deepReadonly.spec.ts +66 -0
- package/src/core/utils/deepReadonly.ts +71 -0
- package/src/core/utils/immutableValue.spec.ts +54 -0
- package/src/core/utils/immutableValue.ts +102 -0
- package/src/core/utils/nestedDotForm.spec.ts +88 -0
- package/src/core/utils/publisherImmutable.spec.ts +76 -0
- package/src/core/utils/route.ts +0 -0
- package/src/core/utils/strictGet.spec.ts +61 -0
- package/src/core/utils/strictGet.ts +102 -0
- package/src/css.d.ts +19 -0
- package/src/docs/components/docs-demo-sources.ts +3 -3
- package/src/docs/decorators/bind.md +23 -24
- package/src/docs/docs-location.spec.ts +10 -0
- package/src/docs/docs-location.ts +10 -0
- package/src/docs/example/decorators-demo-bind-demos.ts +11 -28
- package/src/docs/example/docs-toggle-demos.ts +1 -1
- package/src/docs/example/users.ts +0 -0
- package/src/docs/getting-started/ai-agents.md +29 -55
- package/src/docs/getting-started/dataFlow.md +2 -2
- package/src/docs/home/home.ts +3 -1
- package/src/docs/misc/publisher-get-immutability-docs-crawl.json +902 -0
- package/src/docs/misc/publisher-get-immutability-docs-recheck.json +13 -0
- package/src/docs/misc/publisher-get-immutability-study.md +229 -0
- package/src/docs/navigation/navigation.ts +5 -1
- package/src/docs/search/docs-search.json +358 -58
- package/src/docs/search/markdown-renderer.ts +6 -1
- package/src/docs/tailwind/css/docs/content.css +4 -5
- package/src/tsconfig.declarations.json +22 -0
- package/src/tsconfig.emit.json +23 -0
- package/src/tsconfig.json +53 -5
- package/src/tsconfig.tsbuildinfo +1 -1
- package/.taste-skill/after/desktop-fold.jpg +0 -0
- package/.taste-skill/after/desktop-page-01.jpg +0 -0
- package/.taste-skill/after/desktop-page-02.jpg +0 -0
- package/.taste-skill/after/desktop-page-03.jpg +0 -0
- package/.taste-skill/after/mobile-fold.jpg +0 -0
- package/.taste-skill/after/mobile-page-01.jpg +0 -0
- package/.taste-skill/after/report.json +0 -4103
- package/.taste-skill/after/tablet-fold.jpg +0 -0
- package/.taste-skill/after/tablet-page-01.jpg +0 -0
- package/.taste-skill/after/tablet-page-02.jpg +0 -0
- package/.taste-skill/before/desktop-fold.jpg +0 -0
- package/.taste-skill/before/desktop-page-01.jpg +0 -0
- package/.taste-skill/before/desktop-page-02.jpg +0 -0
- package/.taste-skill/before/mobile-fold.jpg +0 -0
- package/.taste-skill/before/mobile-page-01.jpg +0 -0
- package/.taste-skill/before/report.json +0 -2556
- package/.taste-skill/before/tablet-fold.jpg +0 -0
- package/.taste-skill/before/tablet-page-01.jpg +0 -0
- package/.taste-skill/direction.json +0 -510
- package/.taste-skill/notes.md +0 -84
- package/.taste-skill/prod/desktop-fold.jpg +0 -0
- package/.taste-skill/prod/desktop-page-01.jpg +0 -0
- package/.taste-skill/prod/desktop-page-02.jpg +0 -0
- package/.taste-skill/prod/desktop-page-03.jpg +0 -0
- package/.taste-skill/prod/mobile-fold.jpg +0 -0
- package/.taste-skill/prod/mobile-page-01.jpg +0 -0
- package/.taste-skill/prod/mobile-page-02.jpg +0 -0
- package/.taste-skill/prod/report.json +0 -1973
- package/.taste-skill/prod/tablet-fold.jpg +0 -0
- package/.taste-skill/prod/tablet-page-01.jpg +0 -0
- package/.taste-skill/prod/tablet-page-02.jpg +0 -0
- package/AUDIT.md +0 -228
- package/PLAN-AMELIORATION.md +0 -220
- package/PLAN-DOCS-AGENTS.md +0 -80
- package/ai/AGENTS.md +0 -56
- package/ai/cursor/rules/concorde-menu.mdc +0 -15
- package/ai/cursor/rules/concorde-scope.mdc +0 -14
- package/ai/cursor/rules/concorde-theme.mdc +0 -13
- package/ai/cursor/rules/concorde.mdc +0 -66
- package/ai/jetbrains/rules/concorde.md +0 -53
- package/ai/skills/concorde-get-set-dp/SKILL.md +0 -194
- package/ai/skills/concorde-imports/SKILL.md +0 -78
- package/ai/skills/concorde-menu/SKILL.md +0 -74
- package/ai/skills/concorde-scope/SKILL.md +0 -70
- package/ai/skills/concorde-theme/SKILL.md +0 -57
- package/docs/.htaccess +0 -75
- package/docs/404.html +0 -15
- package/docs/404.md +0 -5
- package/docs/assets/index-BgG6FFPt.js +0 -11765
- package/docs/assets/index-x89XINSG.css +0 -1
- package/docs/core/components/functional/date/date.html +0 -211
- package/docs/core/components/functional/date/date.md +0 -150
- package/docs/core/components/functional/fetch/fetch.html +0 -180
- package/docs/core/components/functional/fetch/fetch.md +0 -108
- package/docs/core/components/functional/if/if.html +0 -65
- package/docs/core/components/functional/if/if.md +0 -34
- package/docs/core/components/functional/jsonata/jsonata.html +0 -110
- package/docs/core/components/functional/jsonata/jsonata.md +0 -61
- package/docs/core/components/functional/list/list.html +0 -198
- package/docs/core/components/functional/list/list.md +0 -121
- package/docs/core/components/functional/mix/mix.html +0 -78
- package/docs/core/components/functional/mix/mix.md +0 -46
- package/docs/core/components/functional/queue/queue.html +0 -155
- package/docs/core/components/functional/queue/queue.md +0 -51
- package/docs/core/components/functional/router/router.html +0 -154
- package/docs/core/components/functional/router/router.md +0 -93
- package/docs/core/components/functional/sdui/sdui-extension-points.md +0 -94
- package/docs/core/components/functional/sdui/sdui.html +0 -397
- package/docs/core/components/functional/sdui/sdui.md +0 -307
- package/docs/core/components/functional/states/states.html +0 -141
- package/docs/core/components/functional/states/states.md +0 -112
- package/docs/core/components/functional/submit/submit.html +0 -178
- package/docs/core/components/functional/submit/submit.md +0 -106
- package/docs/core/components/functional/subscriber/subscriber.md +0 -91
- package/docs/core/components/functional/translation/translation.html +0 -60
- package/docs/core/components/functional/translation/translation.md +0 -38
- package/docs/core/components/functional/value/value.html +0 -81
- package/docs/core/components/functional/value/value.md +0 -47
- package/docs/core/components/ui/alert/alert.md +0 -186
- package/docs/core/components/ui/alert-messages/alert-messages.md +0 -85
- package/docs/core/components/ui/badge/badge.md +0 -181
- package/docs/core/components/ui/button/button.html +0 -309
- package/docs/core/components/ui/button/button.md +0 -216
- package/docs/core/components/ui/captcha/captcha.html +0 -80
- package/docs/core/components/ui/captcha/captcha.md +0 -56
- package/docs/core/components/ui/card/card.md +0 -215
- package/docs/core/components/ui/divider/divider.md +0 -126
- package/docs/core/components/ui/form/checkbox/checkbox.html +0 -200
- package/docs/core/components/ui/form/checkbox/checkbox.md +0 -125
- package/docs/core/components/ui/form/fieldset/fieldset.html +0 -238
- package/docs/core/components/ui/form/fieldset/fieldset.md +0 -161
- package/docs/core/components/ui/form/form-actions/form-actions.md +0 -98
- package/docs/core/components/ui/form/form-layout/form-layout.html +0 -115
- package/docs/core/components/ui/form/form-layout/form-layout.md +0 -109
- package/docs/core/components/ui/form/input/input.html +0 -235
- package/docs/core/components/ui/form/input/input.md +0 -142
- package/docs/core/components/ui/form/radio/radio.html +0 -144
- package/docs/core/components/ui/form/radio/radio.md +0 -78
- package/docs/core/components/ui/form/select/select.html +0 -178
- package/docs/core/components/ui/form/select/select.md +0 -86
- package/docs/core/components/ui/form/switch/switch.html +0 -146
- package/docs/core/components/ui/form/switch/switch.md +0 -80
- package/docs/core/components/ui/form/textarea/textarea.html +0 -162
- package/docs/core/components/ui/form/textarea/textarea.md +0 -82
- package/docs/core/components/ui/group/group.html +0 -113
- package/docs/core/components/ui/group/group.md +0 -77
- package/docs/core/components/ui/icon/icon.md +0 -214
- package/docs/core/components/ui/image/image.html +0 -194
- package/docs/core/components/ui/image/image.md +0 -167
- package/docs/core/components/ui/link/link.md +0 -81
- package/docs/core/components/ui/loader/loader.html +0 -114
- package/docs/core/components/ui/loader/loader.md +0 -87
- package/docs/core/components/ui/menu/menu.md +0 -370
- package/docs/core/components/ui/modal/modal.html +0 -324
- package/docs/core/components/ui/modal/modal.md +0 -211
- package/docs/core/components/ui/pop/pop.html +0 -250
- package/docs/core/components/ui/pop/pop.md +0 -216
- package/docs/core/components/ui/progress/progress.md +0 -109
- package/docs/core/components/ui/table/table.html +0 -333
- package/docs/core/components/ui/table/table.md +0 -267
- package/docs/core/components/ui/theme/theme.html +0 -116
- package/docs/core/components/ui/theme/theme.md +0 -97
- package/docs/core/components/ui/toast/toast.html +0 -185
- package/docs/core/components/ui/toast/toast.md +0 -147
- package/docs/core/components/ui/tooltip/tooltip.html +0 -112
- package/docs/core/components/ui/tooltip/tooltip.md +0 -89
- package/docs/docs/decorators/ancestor-attribute.html +0 -71
- package/docs/docs/decorators/ancestor-attribute.md +0 -59
- package/docs/docs/decorators/auto-subscribe.html +0 -61
- package/docs/docs/decorators/auto-subscribe.md +0 -40
- package/docs/docs/decorators/bind.html +0 -86
- package/docs/docs/decorators/bind.md +0 -77
- package/docs/docs/decorators/get.html +0 -166
- package/docs/docs/decorators/get.md +0 -160
- package/docs/docs/decorators/handle.html +0 -139
- package/docs/docs/decorators/handle.md +0 -119
- package/docs/docs/decorators/on-assign.html +0 -72
- package/docs/docs/decorators/on-assign.md +0 -63
- package/docs/docs/decorators/patch.html +0 -76
- package/docs/docs/decorators/patch.md +0 -44
- package/docs/docs/decorators/post.html +0 -150
- package/docs/docs/decorators/post.md +0 -134
- package/docs/docs/decorators/publish.html +0 -74
- package/docs/docs/decorators/publish.md +0 -56
- package/docs/docs/decorators/put.html +0 -83
- package/docs/docs/decorators/put.md +0 -51
- package/docs/docs/decorators/subscribe.html +0 -91
- package/docs/docs/decorators/subscribe.md +0 -87
- package/docs/docs/decorators/wait-for-ancestors.html +0 -82
- package/docs/docs/decorators/wait-for-ancestors.md +0 -76
- package/docs/docs/directives/sub.html +0 -79
- package/docs/docs/directives/sub.md +0 -75
- package/docs/docs/directives/t.html +0 -91
- package/docs/docs/directives/t.md +0 -73
- package/docs/docs/getting-started/ai-agents.md +0 -76
- package/docs/docs/getting-started/components.html +0 -27
- package/docs/docs/getting-started/components.md +0 -5
- package/docs/docs/getting-started/installation.html +0 -69
- package/docs/docs/getting-started/installation.md +0 -36
- package/docs/docs/getting-started/my-first-component.md +0 -227
- package/docs/docs/getting-started/start.html +0 -47
- package/docs/docs/getting-started/start.md +0 -35
- package/docs/docs/getting-started/theming.md +0 -253
- package/docs/docs/index.html +0 -99
- package/docs/docs/misc/api-configuration.md +0 -79
- package/docs/docs/misc/dataProviderKey.md +0 -168
- package/docs/hubs/decorators.html +0 -443
- package/docs/hubs/form-components.html +0 -404
- package/docs/hubs/remote-data.html +0 -371
- package/docs/img/archive/concorde-001-2cv.webp +0 -0
- package/docs/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
- package/docs/img/archive/concorde-red-arrows-2002.webm +0 -0
- package/docs/img/archive/credits.json +0 -28
- package/docs/index.md +0 -22
- package/docs/src/core/components/functional/translation/translation.md +0 -38
- package/docs/src/docs/decorators/ancestor-attribute.md +0 -59
- package/docs/src/docs/decorators/auto-subscribe.md +0 -40
- package/docs/src/docs/decorators/bind.md +0 -77
- package/docs/src/docs/decorators/get.md +0 -160
- package/docs/src/docs/decorators/handle.md +0 -119
- package/docs/src/docs/decorators/on-assign.md +0 -63
- package/docs/src/docs/decorators/patch.md +0 -44
- package/docs/src/docs/decorators/post.md +0 -134
- package/docs/src/docs/decorators/publish.md +0 -56
- package/docs/src/docs/decorators/put.md +0 -51
- package/docs/src/docs/decorators/subscribe.md +0 -87
- package/docs/src/docs/decorators/wait-for-ancestors.md +0 -76
- package/docs/src/docs/directives/sub.md +0 -75
- package/docs/src/docs/directives/t.md +0 -73
- package/docs/src/docs/getting-started/components.md +0 -5
- package/docs/src/docs/getting-started/create-a-component.md +0 -136
- package/docs/src/docs/getting-started/dataFlow.md +0 -87
- package/docs/src/docs/getting-started/installation.md +0 -36
- package/docs/src/docs/misc/docs-mock-api.md +0 -62
- package/docs/src/docs/misc/dynamic-path.md +0 -71
- package/docs/src/docs/misc/endpoint.md +0 -45
- package/docs/src/docs/misc/html-integration.md +0 -14
- /package/{docs → dist}/img/concorde/plane_01.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_02.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_03.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_04.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_05.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_06.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_07.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_08.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_09.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_10.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_11.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_12.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_13.jpg +0 -0
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
# @subscribe
|
|
2
|
-
|
|
3
|
-
`@subscribe(key)` keeps a component property in sync with one path of the store: when a publisher assigns that path, the property updates and the component re-renders. It is read-only; use [@publish](/docs/decorators/publish) to write and [sub()](/docs/directives/sub) to read inside a template. See [Data flow](/docs/getting-started/dataFlow) for the overall model.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
<sonic-code language="typescript">
|
|
8
|
-
<template>
|
|
9
|
-
import { subscribe } from "@supersoniks/concorde/decorators";
|
|
10
|
-
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
|
|
11
|
-
|
|
12
|
-
type Cockpit = { altitude: number };
|
|
13
|
-
const cockpitKey = new DataProviderKey<Cockpit>("cockpit");
|
|
14
|
-
|
|
15
|
-
@subscribe(cockpitKey.altitude)
|
|
16
|
-
@state()
|
|
17
|
-
altitude = 0;
|
|
18
|
-
</template>
|
|
19
|
-
</sonic-code>
|
|
20
|
-
|
|
21
|
-
## Static path
|
|
22
|
-
|
|
23
|
-
The key is a [DataProviderKey](/docs/misc/dataProviderKey): the property type must match `T` at that path. Add `@state()` so Lit re-renders. Until the publisher holds a value, the property keeps its initializer.
|
|
24
|
-
|
|
25
|
-
<sonic-code language="typescript">
|
|
26
|
-
<template>
|
|
27
|
-
type Flight = { code: string; gate: string; status: string };
|
|
28
|
-
const flightKey = new DataProviderKey<Flight>("flight");
|
|
29
|
-
|
|
30
|
-
@subscribe(flightKey)
|
|
31
|
-
@state()
|
|
32
|
-
flight: Flight | null = null;
|
|
33
|
-
</template>
|
|
34
|
-
</sonic-code>
|
|
35
|
-
|
|
36
|
-
## Dynamic path
|
|
37
|
-
|
|
38
|
-
`${prop}` placeholders resolve from properties of the same component. Declare them in the key's second generic so TypeScript requires them on the host. When `seatIndex` changes, the path is resolved again and `person` refreshes; while the placeholder is `null` or `undefined`, the subscription is inactive. Resolution rules: [Dynamic paths](/docs/misc/dynamic-path).
|
|
39
|
-
|
|
40
|
-
<sonic-code language="typescript">
|
|
41
|
-
<template>
|
|
42
|
-
type OnBoard = { name: string; role: string; seat: string };
|
|
43
|
-
const personKey = new DataProviderKey<OnBoard, { seatIndex: number }>(
|
|
44
|
-
"demoOnBoard.${seatIndex}",
|
|
45
|
-
);
|
|
46
|
-
|
|
47
|
-
@property({ type: Number }) seatIndex = 0;
|
|
48
|
-
|
|
49
|
-
@subscribe(personKey)
|
|
50
|
-
@state()
|
|
51
|
-
person: OnBoard | null = null;
|
|
52
|
-
</template>
|
|
53
|
-
</sonic-code>
|
|
54
|
-
|
|
55
|
-
<sonic-code>
|
|
56
|
-
<template>
|
|
57
|
-
<docs-demo-sources for="demo-subscribe-dynamic"></docs-demo-sources>
|
|
58
|
-
<demo-subscribe-dynamic></demo-subscribe-dynamic>
|
|
59
|
-
</template>
|
|
60
|
-
</sonic-code>
|
|
61
|
-
|
|
62
|
-
## Ancestor scope
|
|
63
|
-
|
|
64
|
-
Inside a list row or a `dataProvider` wrapper, read the path from the closest ancestor with [@ancestorAttribute](/docs/decorators/ancestor-attribute), then use it as the placeholder.
|
|
65
|
-
|
|
66
|
-
<sonic-code language="typescript">
|
|
67
|
-
<template>
|
|
68
|
-
const rowKey = new DataProviderKey<OnBoard, { dataProvider: string | null }>(
|
|
69
|
-
"${dataProvider}",
|
|
70
|
-
);
|
|
71
|
-
|
|
72
|
-
@ancestorAttribute("dataProvider")
|
|
73
|
-
dataProvider: string | null = null;
|
|
74
|
-
|
|
75
|
-
@subscribe(rowKey)
|
|
76
|
-
@state()
|
|
77
|
-
person: OnBoard | null = null;
|
|
78
|
-
</template>
|
|
79
|
-
</sonic-code>
|
|
80
|
-
|
|
81
|
-
## API reference
|
|
82
|
-
|
|
83
|
-
| Argument | Type | Description |
|
|
84
|
-
|----------|------|-------------|
|
|
85
|
-
| `key` | `DataProviderKey<T, U>` | Path to read. `U` lists the host properties used by `${…}` placeholders |
|
|
86
|
-
|
|
87
|
-
The decorated property is typed `T` (optionally `| null` or `| undefined`). The subscription starts when the component connects and stops when it disconnects.
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
# @awaitConnectedAncestors
|
|
2
|
-
|
|
3
|
-
Delays a component's `connectedCallback` until its matching ancestors are defined and connected, so context they set up (a `dataProvider`, a publisher, a fetched payload) is ready when the child starts. Pair it with `@dispatchConnectedEvent` on the ancestors, which signals readiness.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
<sonic-code language="typescript">
|
|
8
|
-
<template>
|
|
9
|
-
import {
|
|
10
|
-
awaitConnectedAncestors,
|
|
11
|
-
dispatchConnectedEvent,
|
|
12
|
-
} from "@supersoniks/concorde/decorators";
|
|
13
|
-
|
|
14
|
-
@customElement("flight-scope")
|
|
15
|
-
@dispatchConnectedEvent()
|
|
16
|
-
export class FlightScope extends LitElement {}
|
|
17
|
-
|
|
18
|
-
@customElement("gate-panel")
|
|
19
|
-
@awaitConnectedAncestors("flight-scope")
|
|
20
|
-
export class GatePanel extends LitElement {}
|
|
21
|
-
</template>
|
|
22
|
-
</sonic-code>
|
|
23
|
-
|
|
24
|
-
## Wait for an ancestor
|
|
25
|
-
|
|
26
|
-
Arguments are CSS selectors tested with `element.matches()` on each ancestor, across shadow roots. Here the parent element is not defined yet: the child stays uninitialized until you register it.
|
|
27
|
-
|
|
28
|
-
<sonic-code>
|
|
29
|
-
<template>
|
|
30
|
-
<docs-demo-sources for="demo-wait-ancestors-section"></docs-demo-sources>
|
|
31
|
-
<demo-wait-ancestors-section></demo-wait-ancestors-section>
|
|
32
|
-
</template>
|
|
33
|
-
</sonic-code>
|
|
34
|
-
|
|
35
|
-
## Several ancestors
|
|
36
|
-
|
|
37
|
-
With several selectors, the child waits for every matching ancestor. Register both to initialize it, in any order.
|
|
38
|
-
|
|
39
|
-
<sonic-code>
|
|
40
|
-
<template>
|
|
41
|
-
<docs-demo-sources for="demo-wait-ancestors-multi-section"></docs-demo-sources>
|
|
42
|
-
<demo-wait-ancestors-multi-section></demo-wait-ancestors-multi-section>
|
|
43
|
-
</template>
|
|
44
|
-
</sonic-code>
|
|
45
|
-
|
|
46
|
-
## Ancestor already connected
|
|
47
|
-
|
|
48
|
-
When the ancestor is already connected, or no ancestor matches, the child initializes immediately.
|
|
49
|
-
|
|
50
|
-
<sonic-code>
|
|
51
|
-
<template>
|
|
52
|
-
<docs-demo-sources for="demo-wait-ancestors-ready-section"></docs-demo-sources>
|
|
53
|
-
<demo-wait-ancestors-ready-section></demo-wait-ancestors-ready-section>
|
|
54
|
-
</template>
|
|
55
|
-
</sonic-code>
|
|
56
|
-
|
|
57
|
-
## Signal readiness
|
|
58
|
-
|
|
59
|
-
`@dispatchConnectedEvent()` dispatches a bubbling `sonic-connected` event (exported as `CONNECTED`) at the end of the ancestor's `connectedCallback`. You can listen to it anywhere:
|
|
60
|
-
|
|
61
|
-
<sonic-code language="typescript">
|
|
62
|
-
<template>
|
|
63
|
-
import { CONNECTED } from "@supersoniks/concorde/decorators";
|
|
64
|
-
|
|
65
|
-
document.addEventListener(CONNECTED, (e) => console.log("ready:", e.target));
|
|
66
|
-
</template>
|
|
67
|
-
</sonic-code>
|
|
68
|
-
|
|
69
|
-
Elements without a hyphen in their tag name count as connected. A custom element ancestor that never dispatches the event releases the child after a **5 second** timeout, so decorate the ancestors you wait for.
|
|
70
|
-
|
|
71
|
-
## API reference
|
|
72
|
-
|
|
73
|
-
| Decorator | Argument | Description |
|
|
74
|
-
|-----------|----------|-------------|
|
|
75
|
-
| `@awaitConnectedAncestors` | `...selectors: string[]` | Class decorator. CSS selectors of the ancestors to wait for; with no selector, the class is left unchanged |
|
|
76
|
-
| `@dispatchConnectedEvent` | none | Class decorator. Dispatches `CONNECTED` (`"sonic-connected"`, bubbles) after `connectedCallback` |
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
# sub()
|
|
2
|
-
|
|
3
|
-
`sub(path)` is a Lit directive that renders the current value of a store path and updates in place on every assignment. Use it inside `html` templates for read-only display; in a decorator, the same path goes to [@subscribe](/docs/decorators/subscribe). See [Data flow](/docs/getting-started/dataFlow) for the overall model.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
<sonic-code language="typescript">
|
|
8
|
-
<template>
|
|
9
|
-
import { sub } from "@supersoniks/concorde/directives";
|
|
10
|
-
|
|
11
|
-
render() {
|
|
12
|
-
return html`<p>Altitude: ${sub("cockpit.altitude")} ft</p>`;
|
|
13
|
-
}
|
|
14
|
-
</template>
|
|
15
|
-
</sonic-code>
|
|
16
|
-
|
|
17
|
-
## DataProviderKey
|
|
18
|
-
|
|
19
|
-
Pass a [DataProviderKey](/docs/misc/dataProviderKey) instead of a string to get a typo-safe path. Until the publisher holds a value, nothing is rendered.
|
|
20
|
-
|
|
21
|
-
<sonic-code language="typescript">
|
|
22
|
-
<template>
|
|
23
|
-
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
|
|
24
|
-
|
|
25
|
-
const flightKey = new DataProviderKey<{ code: string; gate: string }>("flight");
|
|
26
|
-
|
|
27
|
-
render() {
|
|
28
|
-
return html`<p>${sub(flightKey.code)} · gate ${sub(flightKey.gate)}</p>`;
|
|
29
|
-
}
|
|
30
|
-
</template>
|
|
31
|
-
</sonic-code>
|
|
32
|
-
|
|
33
|
-
## Dynamic path
|
|
34
|
-
|
|
35
|
-
`${prop}` placeholders resolve from properties of the component that renders the template; the directive re-subscribes when they change. While a placeholder is `null` or `undefined`, nothing is rendered. Rules: [Dynamic paths](/docs/misc/dynamic-path). `skipEmptyPlaceholder` is not available on `sub()`.
|
|
36
|
-
|
|
37
|
-
<sonic-code language="typescript">
|
|
38
|
-
<template>
|
|
39
|
-
const personKey = new DataProviderKey<OnBoard, { seatIndex: number }>(
|
|
40
|
-
"demoOnBoard.${seatIndex}",
|
|
41
|
-
);
|
|
42
|
-
|
|
43
|
-
@property({ type: Number }) seatIndex = 0;
|
|
44
|
-
|
|
45
|
-
render() {
|
|
46
|
-
return html`<strong>${sub(personKey.name)}</strong> · ${sub(personKey.role)}`;
|
|
47
|
-
}
|
|
48
|
-
</template>
|
|
49
|
-
</sonic-code>
|
|
50
|
-
|
|
51
|
-
<sonic-code>
|
|
52
|
-
<template>
|
|
53
|
-
<docs-demo-sources for="demo-sub-template"></docs-demo-sources>
|
|
54
|
-
<demo-sub-template></demo-sub-template>
|
|
55
|
-
</template>
|
|
56
|
-
</sonic-code>
|
|
57
|
-
|
|
58
|
-
## sub() or get()
|
|
59
|
-
|
|
60
|
-
`get(path)` from `@supersoniks/concorde/utils` returns a one-time snapshot: in a template it never updates. Use `sub()` in templates and `get` / `set` / `dp` in imperative code.
|
|
61
|
-
|
|
62
|
-
<sonic-code language="typescript">
|
|
63
|
-
<template>
|
|
64
|
-
html`${sub(flightKey.gate)}`; // updates on gate change
|
|
65
|
-
html`${get(flightKey.gate)}`; // frozen at first render
|
|
66
|
-
</template>
|
|
67
|
-
</sonic-code>
|
|
68
|
-
|
|
69
|
-
## API reference
|
|
70
|
-
|
|
71
|
-
| Argument | Type | Description |
|
|
72
|
-
|----------|------|-------------|
|
|
73
|
-
| `path` | `string` or `DataProviderKey<T, U>` | Path to read. Placeholders resolve on the template host |
|
|
74
|
-
|
|
75
|
-
The directive subscribes when its part connects and unsubscribes when it disconnects.
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
# t()
|
|
2
|
-
|
|
3
|
-
Lit directive that renders a translated label by key. Keys are batched into one GET to the endpoint set by the nearest `wordingProvider` ancestor attribute, and results are cached in `localStorage`.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
<sonic-code language="typescript">
|
|
8
|
-
<template>
|
|
9
|
-
import { t } from "@supersoniks/concorde/directives/Wording";
|
|
10
|
-
</template>
|
|
11
|
-
</sonic-code>
|
|
12
|
-
|
|
13
|
-
`wording` and `w` are aliases of `t`. In plain HTML, use the [`sonic-t`](/core/components/functional/translation) element.
|
|
14
|
-
|
|
15
|
-
## Usage
|
|
16
|
-
|
|
17
|
-
Set `serviceURL` and `wordingProvider` on the host component or one of its ancestors, then call `t(key)` in a template. Attributes on elements **inside** the component's own template are not read. Click the button to bump the version and reload the labels.
|
|
18
|
-
|
|
19
|
-
<docs-lit-demo for="docs-api-config-wording-demo"></docs-lit-demo>
|
|
20
|
-
|
|
21
|
-
## Endpoint contract
|
|
22
|
-
|
|
23
|
-
All keys requested in the same tick are sent in one request, appended to `wordingProvider` as `labels[]`:
|
|
24
|
-
|
|
25
|
-
<sonic-code language="shell">
|
|
26
|
-
<template>
|
|
27
|
-
GET {serviceURL}/wording/labels?lang=fr&labels[]=greeting&labels[]=farewell
|
|
28
|
-
</template>
|
|
29
|
-
</sonic-code>
|
|
30
|
-
|
|
31
|
-
The response is a flat map of key to label:
|
|
32
|
-
|
|
33
|
-
<sonic-code language="json">
|
|
34
|
-
<template>
|
|
35
|
-
{ "greeting": "Bonjour", "farewell": "Au revoir" }
|
|
36
|
-
</template>
|
|
37
|
-
</sonic-code>
|
|
38
|
-
|
|
39
|
-
Until the label arrives, `t()` renders an empty string.
|
|
40
|
-
|
|
41
|
-
## HTML labels
|
|
42
|
-
|
|
43
|
-
`t()` escapes the label. Use `unsafeWording(key)` for labels that contain trusted HTML.
|
|
44
|
-
|
|
45
|
-
<sonic-code language="typescript">
|
|
46
|
-
<template>
|
|
47
|
-
import { unsafeWording } from "@supersoniks/concorde/directives/Wording";
|
|
48
|
-
|
|
49
|
-
html`<p>${unsafeWording("terms.notice")}</p>`;
|
|
50
|
-
</template>
|
|
51
|
-
</sonic-code>
|
|
52
|
-
|
|
53
|
-
## Reloading labels
|
|
54
|
-
|
|
55
|
-
Labels are fetched again when:
|
|
56
|
-
|
|
57
|
-
- the `lang` attribute of `<html>` changes
|
|
58
|
-
- the number stored at `wordingVersionProvider` changes — bump it after publishing new labels to invalidate the `localStorage` cache
|
|
59
|
-
|
|
60
|
-
## API reference
|
|
61
|
-
|
|
62
|
-
| Function | Description |
|
|
63
|
-
|----------|-------------|
|
|
64
|
-
| `t(key)` · `wording(key)` · `w(key)` | Renders the escaped label for `key` |
|
|
65
|
-
| `unsafeWording(key)` | Renders the label as HTML |
|
|
66
|
-
| `isWordingReady(key)` | `true` once the label for `key` is loaded |
|
|
67
|
-
|
|
68
|
-
| Ancestor attribute | Description |
|
|
69
|
-
|--------------------|-------------|
|
|
70
|
-
| `wordingProvider` | Endpoint path and query, relative to `serviceURL` |
|
|
71
|
-
| `wordingVersionProvider` | DataProvider path holding a version number |
|
|
72
|
-
|
|
73
|
-
Other ancestor attributes (`serviceURL`, `token`, …) apply as for any request: see [API configuration](/docs/misc/api-configuration).
|
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
# Creating components
|
|
2
|
-
|
|
3
|
-
> **New app components:** start with [My first component](/docs/getting-started/my-first-component) and [Data flow](/docs/getting-started/dataFlow). The `Subscriber` mixin below is legacy.
|
|
4
|
-
|
|
5
|
-
## Where to put it?
|
|
6
|
-
|
|
7
|
-
In this document, we consider the src directory of the project as the root.<br>
|
|
8
|
-
We describe how we organize our components as an example, however it depends on your project.
|
|
9
|
-
|
|
10
|
-
In concorde each component is currently organized in the following directory structure (at least we try):
|
|
11
|
-
|
|
12
|
-
- **/core/components/functional/component-name/component-name.ts**
|
|
13
|
-
Generic/functional/generally unstyled component.
|
|
14
|
-
The component usually doesn't use any other concrete components.
|
|
15
|
-
- **/core/components/ui/component-name/component-name.ts**
|
|
16
|
-
Generic but UI-oriented component.
|
|
17
|
-
The component usually only uses generic components and other UI components.
|
|
18
|
-
- **la-billetterie/components/atoms/component-name/component-name.ts**
|
|
19
|
-
The component is intended to have a concrete usage within our ticketing system **"la-billetterie"**.
|
|
20
|
-
It usually only uses generic components from `core` and possibly other atoms.
|
|
21
|
-
- **la-billetterie/components/concrete-destination/component-name/component-name.ts**
|
|
22
|
-
The component has a specific destination: (event / cart / gift card): `/components/destination/`
|
|
23
|
-
The component uses various components, usually from the `/components/atoms` directory.
|
|
24
|
-
It does not use components at the same level in the file hierarchy.
|
|
25
|
-
|
|
26
|
-
## Starting from a Simple Model
|
|
27
|
-
|
|
28
|
-
You can copy `example.ts` from the source to the desired destination to start with.
|
|
29
|
-
This file contains a web component in the form of a class that extends the `Subscriber` mixin, with a reactive property and a render function.
|
|
30
|
-
|
|
31
|
-
<sonic-code language="javascript">
|
|
32
|
-
<template>
|
|
33
|
-
import { html, LitElement } from "lit";
|
|
34
|
-
import { customElement, property } from "lit/decorators.js";
|
|
35
|
-
import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
|
|
36
|
-
|
|
37
|
-
@customElement("sonic-example")
|
|
38
|
-
export class SonicComponent extends Subscriber(LitElement) {
|
|
39
|
-
@property() text = "Example";
|
|
40
|
-
render() {
|
|
41
|
-
return html`${this.text}`;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
</template>
|
|
45
|
-
</sonic-code>
|
|
46
|
-
|
|
47
|
-
**You can remove the dependency on `Subscriber`** if automatic population of the component with external data is not required.
|
|
48
|
-
For example, for a UI component:
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<sonic-code language="javascript">
|
|
52
|
-
<template>
|
|
53
|
-
import { html, LitElement } from "lit";
|
|
54
|
-
import { customElement, property } from "lit/decorators.js";
|
|
55
|
-
|
|
56
|
-
@customElement("sonic-example")
|
|
57
|
-
export class SonicComponent extends LitElement {
|
|
58
|
-
@property() text = "Example";
|
|
59
|
-
render() {
|
|
60
|
-
return html`${this.text}`;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
</template>
|
|
64
|
-
</sonic-code>
|
|
65
|
-
|
|
66
|
-
Regarding data sharing, see [Data flow](/docs/getting-started/dataFlow).
|
|
67
|
-
|
|
68
|
-
### Naming the Component
|
|
69
|
-
|
|
70
|
-
The class name is not necessarily important. However, it is important to **give it a component name prefixed with "sonic"** (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:
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
<sonic-code language="typescript">
|
|
74
|
-
<template>
|
|
75
|
-
@customElement("sonic-button")
|
|
76
|
-
</template>
|
|
77
|
-
</sonic-code>
|
|
78
|
-
|
|
79
|
-
For less generic components with a specific destination, we advise to include the destination in the name.
|
|
80
|
-
For example, for a "title" component in the "event" destination, the name would be simply:
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
<sonic-code language="typescript">
|
|
84
|
-
<template>
|
|
85
|
-
@customElement("sonic-event-title")
|
|
86
|
-
</template>
|
|
87
|
-
</sonic-code>
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
## Modifying It
|
|
91
|
-
|
|
92
|
-
#### Creating Reactive Properties and Modifying the Render Function
|
|
93
|
-
|
|
94
|
-
To do this, study the functioning of https://lit.dev and also refer to [Data flow](/docs/getting-started/dataFlow).
|
|
95
|
-
|
|
96
|
-
#### HTML Structure of a Component
|
|
97
|
-
|
|
98
|
-
The HTML structure of a component should remain as simple as possible.
|
|
99
|
-
|
|
100
|
-
Ideally, there should be only one additional level of elements in addition to slots.
|
|
101
|
-
|
|
102
|
-
- **The main component is already a wrapper**.
|
|
103
|
-
It receives classes to manage its layout, but it should not style internal elements.
|
|
104
|
-
- **Slots handle the visual organization** of elements.
|
|
105
|
-
- **The specificity of the component is expressed in this additional level** by adding a list, a functional native element (e.g., button), or another component.
|
|
106
|
-
|
|
107
|
-
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.
|
|
108
|
-
|
|
109
|
-
## Referencing It
|
|
110
|
-
|
|
111
|
-
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.
|
|
112
|
-
|
|
113
|
-
In the case where it can be directly used in a page, it should also be globally referenced, especially considering the creation of **specific bundles** in the future.
|
|
114
|
-
|
|
115
|
-
Here's where we add imports based on the component's location inside concorde as an example
|
|
116
|
-
|
|
117
|
-
- **/core/components/functional/component-name/component-name.ts**
|
|
118
|
-
In `/core/components/functional/functional.ts`, which is referenced in core.ts and imported in `index.ts`.
|
|
119
|
-
- **/core/components/ui/component-name/component-name.ts**
|
|
120
|
-
In `/core/components/ui/ui.ts`, which is referenced in core.ts and imported in `index.ts`.
|
|
121
|
-
- **la-billetterie/components/atoms/component-name/component-name.ts**
|
|
122
|
-
Nowhere else but where it will be used, except for possible **temporary** tests, for example, in `index.ts`.
|
|
123
|
-
- **la-billetterie/components/concrete-destination/component-name/component-name.ts**
|
|
124
|
-
In `la-billetterie/components/concrete-destination/destination-concrete.ts`.
|
|
125
|
-
If it's a new destination, you'll need to create the corresponding import .ts file and import it in `la-billetterie.ts`.
|
|
126
|
-
|
|
127
|
-
## Using It
|
|
128
|
-
|
|
129
|
-
As a reminder, the component is simply integrated into the context by adding a tag with the component's name, for example:
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
<sonic-code language="html">
|
|
133
|
-
<template>
|
|
134
|
-
<sonic-event-title></sonic-event-title>
|
|
135
|
-
</template>
|
|
136
|
-
</sonic-code>
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
# Data flow
|
|
2
|
-
|
|
3
|
-
Recommended patterns for new Concorde apps (Lit + TypeScript). Under the hood, data lives in a **DataProvider** store.
|
|
4
|
-
|
|
5
|
-
## Quick map
|
|
6
|
-
|
|
7
|
-
| Need | Use |
|
|
8
|
-
|------|-----|
|
|
9
|
-
| Read/write in code | `get` / `set` / `dp` + `DataProviderKey` (static paths only) |
|
|
10
|
-
| Reactive Lit template | `sub(key)` or `@subscribe` |
|
|
11
|
-
| Read component state from store | `@subscribe` + `DataProviderKey<T, U>` + `@state` |
|
|
12
|
-
| Inherit ancestor attributes | `@ancestorAttribute` |
|
|
13
|
-
| Write from component state | `@publish` |
|
|
14
|
-
| React to assignments | `@handle` |
|
|
15
|
-
| HTTP GET | `@get` + `Endpoint`, or `sonic-list` / `sonic-queue` with `fetch` |
|
|
16
|
-
| HTTP POST (body from store) | `@post` + `Endpoint` + body `DataProviderKey` |
|
|
17
|
-
| HTTP PUT / PATCH (body from store) | `@put` / `@patch` — same model as `@post` |
|
|
18
|
-
| Forms | `formDataProvider` + `name` on fields (no Subscriber on form elements) |
|
|
19
|
-
| Derived / aggregate (JSONata) | `derive()` or `sonic-jsonata` — [Jsonata](/core/components/functional/jsonata) |
|
|
20
|
-
| Offline doc demos | `serviceURL="/docs-mock-api"` — [Local API demos](/docs/misc/docs-mock-api) |
|
|
21
|
-
|
|
22
|
-
Skill: `concorde-get-set-dp` in the package `ai/` folder.
|
|
23
|
-
|
|
24
|
-
## DataProviderKey
|
|
25
|
-
|
|
26
|
-
<sonic-code language="typescript">
|
|
27
|
-
<template>
|
|
28
|
-
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
|
|
29
|
-
import { dp, get, set } from "@supersoniks/concorde/utils";
|
|
30
|
-
|
|
31
|
-
const cartKey = new DataProviderKey<{ items: string[] }>("cart");
|
|
32
|
-
|
|
33
|
-
set(cartKey, { items: [] });
|
|
34
|
-
dp(cartKey.items).set(["a", "b"]);
|
|
35
|
-
get(cartKey);
|
|
36
|
-
</template>
|
|
37
|
-
</sonic-code>
|
|
38
|
-
|
|
39
|
-
Dynamic paths (`users.${userId}`) → decorators or `sub()` — not `get("users.${id}")` in imperative code. Resolution rules: [Dynamic path placeholders](/docs/misc/dynamic-path).
|
|
40
|
-
|
|
41
|
-
[DataProviderKey](/docs/misc/dataProviderKey)
|
|
42
|
-
|
|
43
|
-
## Decorators
|
|
44
|
-
|
|
45
|
-
| Decorator | Role |
|
|
46
|
-
|-----------|------|
|
|
47
|
-
| `@subscribe` | Read-only property from store — [data configuration](/docs/getting-started/my-first-component) (type + key + scope) |
|
|
48
|
-
| `@publish` | Push property writes to store |
|
|
49
|
-
| `@handle` | Method called on assignment |
|
|
50
|
-
| `@ancestorAttribute` | Copy ancestor HTML attribute onto property |
|
|
51
|
-
| `@get` | HTTP GET into `ApiResult<T>` |
|
|
52
|
-
| `@post` | HTTP POST into `ApiResult<T>` (body from a publisher) |
|
|
53
|
-
| `@put` / `@patch` | HTTP PUT / PATCH into `ApiResult<T>` |
|
|
54
|
-
|
|
55
|
-
Walkthrough: [My first component](/docs/getting-started/my-first-component)
|
|
56
|
-
|
|
57
|
-
## HTTP and lists
|
|
58
|
-
|
|
59
|
-
- [@get](/docs/decorators/get) — single GET on a component
|
|
60
|
-
- [@post](/docs/decorators/post) — POST with body read from a `DataProviderKey`
|
|
61
|
-
- [@put](/docs/decorators/put) · [@patch](/docs/decorators/patch) — PUT / PATCH (same options as `@post`)
|
|
62
|
-
- [List](/core/components/functional/list) — `fetch` + `key="data"` + `/docs-mock-api/api/users`
|
|
63
|
-
- [Queue](/core/components/functional/queue) — lazy `offset=$offset&per_page=$limit` + optional `dataFilterProvider` (form → query)
|
|
64
|
-
|
|
65
|
-
## Starter kit
|
|
66
|
-
|
|
67
|
-
```bash
|
|
68
|
-
npx @supersoniks/create-concorde-ts-starter my-app
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
Interactive routes mirror these patterns (`/concepts/*`, `/demo/*`).
|
|
72
|
-
|
|
73
|
-
## Derived data (`derive` / `sonic-jsonata`)
|
|
74
|
-
|
|
75
|
-
Use when you need **client-side aggregations** (groupby, top N, chart shapes) from existing DataProviders — without inline app JS in SDUI.
|
|
76
|
-
|
|
77
|
-
- Primitive: `derive({ inputs, compute, output, variables? })` from `@supersoniks/concorde/utils` (read-only output, debounce, generation, cycle detection, `{output}/_state_`).
|
|
78
|
-
- SDUI adapter: [`sonic-jsonata`](/core/components/functional/jsonata) (`inputProvider` → `expression` → `outputProvider`, optional `formDataProvider`).
|
|
79
|
-
- vs [`sonic-mix`](/core/components/functional/mix): mix composes bidirectionally; jsonata **computes** unidirectionally.
|
|
80
|
-
|
|
81
|
-
## Legacy integration
|
|
82
|
-
|
|
83
|
-
| Topic | Page |
|
|
84
|
-
|-------|------|
|
|
85
|
-
| `data-bind` HTML (plain HTML hosts) | [HTML integration](/docs/misc/html-integration) — doc demos use Lit in `src/docs/example/` |
|
|
86
|
-
| `@onAssign` | [@onAssign](/docs/decorators/on-assign) (prefer `@handle`) |
|
|
87
|
-
| `sonic-fetch` alone | [Fetch](/core/components/functional/fetch) |
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
# Installation
|
|
2
|
-
|
|
3
|
-
Start a new project from the official starter. It sets up Vite, TypeScript, Lit, Tailwind and Concorde in one command.
|
|
4
|
-
|
|
5
|
-
## Use the starter
|
|
6
|
-
|
|
7
|
-
<sonic-code language="shell">
|
|
8
|
-
<template>
|
|
9
|
-
npx @supersoniks/create-concorde-ts-starter my-app
|
|
10
|
-
cd my-app
|
|
11
|
-
yarn install
|
|
12
|
-
yarn dev --host
|
|
13
|
-
</template>
|
|
14
|
-
</sonic-code>
|
|
15
|
-
|
|
16
|
-
The project includes:
|
|
17
|
-
|
|
18
|
-
- an example component to copy from
|
|
19
|
-
- `npx concorde enable-short-paths` for short import paths
|
|
20
|
-
- `yarn ai:sync` for [AI agent skills](/docs/getting-started/ai-agents)
|
|
21
|
-
|
|
22
|
-
Package: [create-concorde-ts-starter](https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter).
|
|
23
|
-
|
|
24
|
-
## Stack
|
|
25
|
-
|
|
26
|
-
| Tool | Role |
|
|
27
|
-
|------|------|
|
|
28
|
-
| [Lit](https://lit.dev) | Base class, templates and reactive properties for web components |
|
|
29
|
-
| [TypeScript](https://www.typescriptlang.org) | Decorators and typed store paths |
|
|
30
|
-
| [Vite](https://vite.dev) | Dev server and build |
|
|
31
|
-
| [Tailwind](https://tailwindcss.com) | Optional, layout in your components. Concorde components ship their own styles, driven by [theme](/docs/getting-started/theming) variables |
|
|
32
|
-
|
|
33
|
-
## Gotchas
|
|
34
|
-
|
|
35
|
-
- `yarn dev` does not type-check. Run `tsc --noEmit` or a production build to catch type errors.
|
|
36
|
-
- Scripts that query the global document (`document.querySelector`, jQuery plugins, icon replacers) cannot see inside a shadow root. Query from the component's `renderRoot`, or pass the element as slotted content.
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
# Local API demos (offline)
|
|
2
|
-
|
|
3
|
-
The Concorde doc site does not call fragile third-party APIs during `yarn dev`. A **Service Worker** and the Vite dev middleware serve **`/docs-mock-api/*`** on the same origin.
|
|
4
|
-
|
|
5
|
-
## How it works
|
|
6
|
-
|
|
7
|
-
1. On load, `registerDocsMockApiServiceWorker()` registers `/docs-mock-api-sw.js`.
|
|
8
|
-
2. Requests to `/docs-mock-api/...` are handled by the SW (production build) or Vite middleware (dev).
|
|
9
|
-
3. Live examples use `serviceURL="/docs-mock-api"` and relative paths.
|
|
10
|
-
|
|
11
|
-
TypeScript constants: `src/docs/mock-api/urls.ts` (`DOCS_MOCK_REQRES_SERVICE`, `DOCS_MOCK_GEO_SERVICE`, …).
|
|
12
|
-
|
|
13
|
-
## Routes
|
|
14
|
-
|
|
15
|
-
| Path | Used in |
|
|
16
|
-
|------|---------|
|
|
17
|
-
| `/docs-mock-api/api/users` | [My first component](/docs/getting-started/my-first-component) users list |
|
|
18
|
-
| `/docs-mock-api/api/users/:id` | Single user, `docs-user` |
|
|
19
|
-
| `/docs-mock-api/api/space-cats` | Fixtures shared with the jsonata unit tests |
|
|
20
|
-
| `/docs-mock-api/api/coffee-bags` | fixtures / tests jsonata (`?roast=`) |
|
|
21
|
-
| `/docs-mock-api/api/market-order` | Fixtures shared with the jsonata unit tests |
|
|
22
|
-
| `POST /docs-mock-api/api/register` | **sonic-submit** — JSON, `multipart/form-data` (`sendAsFormData`), or `application/x-www-form-urlencoded` (native `<form>`); response includes parsed `email` + `token` |
|
|
23
|
-
| `POST /docs-mock-api/api/register/nested` | Wrapped body `{ data: { id, token } }` for the `submitResultKey` demo |
|
|
24
|
-
| `GET /docs-mock-api/api/register/echo` | Echoes query string (`method="get"` on submit) |
|
|
25
|
-
| `GET /docs-mock-api/auth/token` | [API configuration](/docs/misc/api-configuration) — tokenProvider (Basic or `eventsApiToken`) |
|
|
26
|
-
| `GET /docs-mock-api/api/config/protected` | Bearer / Basic; `docs-mock-stale-token` → **498** |
|
|
27
|
-
| `GET /docs-mock-api/wording/labels` | Wording batch (`labels[]`, `lang`) |
|
|
28
|
-
| `/docs-mock-api/geo/communes` | `@get` demos |
|
|
29
|
-
| `GET /docs-mock-api/flights` | Flight board (`key="flights"`): `sonic-list` · `sonic-fetch` · `sonic-queue` · `sonic-jsonata` · `sonic-states` and the input / select / radio / switch filter demos |
|
|
30
|
-
|
|
31
|
-
### Filters `GET /flights`
|
|
32
|
-
|
|
33
|
-
| Query | Meaning |
|
|
34
|
-
|-------|---------|
|
|
35
|
-
| `direction` | `departures` · `arrivals` |
|
|
36
|
-
| `q` | Substring on flight number, city or airport code |
|
|
37
|
-
| `status` | Comma-separated statuses to keep: `on-time` · `boarding` · `delayed` · `landed` · `cancelled` (`all` = no filter) |
|
|
38
|
-
| `offset` + `limit` | Pagination for **sonic-queue** lazy load |
|
|
39
|
-
|
|
40
|
-
### Pagination `GET /api/users`
|
|
41
|
-
|
|
42
|
-
| Query | Meaning |
|
|
43
|
-
|-------|---------|
|
|
44
|
-
| `offset` + `per_page` | Index-based slice on the filtered set — **sonic-queue** (`offset=$offset&per_page=$limit`) |
|
|
45
|
-
| `page` + `per_page` | 1-based page — static fetch examples (`?page=2`) |
|
|
46
|
-
| `limit` | Alias of `per_page` |
|
|
47
|
-
| `q` | Search on first name, last name, email (optional; **sonic-queue** + `dataFilterProvider`, field `name="q"`) |
|
|
48
|
-
|
|
49
|
-
**ALTCHA** (`sonic-captcha`) is **not** mocked — it still uses the Supersoniks service.
|
|
50
|
-
|
|
51
|
-
In TypeScript demos, import from `src/docs/mock-api/urls.ts` (e.g. `DOCS_MOCK_REQRES_SERVICE` on `serviceURL`).
|
|
52
|
-
|
|
53
|
-
## Source files
|
|
54
|
-
|
|
55
|
-
- `src/docs/mock-api/` — router, fixtures, service worker, `urls.ts`
|
|
56
|
-
- `scripts/docs-mock-api-vite-plugin.ts` — SW build + middleware
|
|
57
|
-
- `public/docs-mock-api-sw.js` — generated on `yarn dev` / `yarn build-docs`
|
|
58
|
-
|
|
59
|
-
```bash
|
|
60
|
-
yarn dev # mock API on by default
|
|
61
|
-
yarn build-docs # includes SW bundle
|
|
62
|
-
```
|