@supersoniks/concorde 5.1.2 → 5.1.3-immutable.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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 +5183 -5018
- 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 +5183 -5018
- 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 +58 -0
- package/src/core/utils/immutableValue.ts +116 -0
- package/src/core/utils/nestedDotForm.spec.ts +88 -0
- package/src/core/utils/publisherImmutable.spec.ts +127 -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 +51 -51
- 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,371 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" data-doc-url="https://concorde.supersoniks.org/hubs/remote-data.html" data-doc-id="hubs/remote-data">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Fetching remote data in Concorde — Concorde by Supersoniks</title>
|
|
7
|
-
<meta name="description" content="Hub for loading online data: @get decorator, Endpoint, API configuration, dynamic paths, sonic-list fetch, sonic-queue, legacy sonic-fetch.">
|
|
8
|
-
<meta name="keywords" content="@get, fetch, remote data, API, Endpoint, ApiResult, serviceURL, sonic-list, sonic-queue, HTTP GET">
|
|
9
|
-
<meta name="concorde-doc-id" content="hubs/remote-data">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/hubs/remote-data.html">
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<header>
|
|
14
|
-
<p><a href="/docs/index.html">Concorde documentation</a></p>
|
|
15
|
-
</header>
|
|
16
|
-
<main>
|
|
17
|
-
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde documentation — Fetching remote data in Concorde</strong>. Hub for loading online data: @get decorator, Endpoint, API configuration, dynamic paths, sonic-list fetch, sonic-queue, legacy sonic-fetch. <span>Doc ID: <code>hubs/remote-data</code>. Keywords: @get, fetch, remote data, API, Endpoint, ApiResult, serviceURL, sonic-list, sonic-queue, HTTP GET. URL: <a href="https://concorde.supersoniks.org/hubs/remote-data.html">https://concorde.supersoniks.org/hubs/remote-data.html</a>.</span></p>
|
|
19
|
-
<section id="core-components-functional-fetch-fetch" data-doc-id="core/components/functional/fetch/fetch">
|
|
20
|
-
<h2><a href="/core/components/functional/fetch">Fetch</a></h2>
|
|
21
|
-
<p><strong>Doc ID:</strong> <code>core/components/functional/fetch/fetch</code> · <a href="/core/components/functional/fetch">full page</a></p>
|
|
22
|
-
<p>sonic-fetch sends a GET request to serviceURL + endPoint and publishes the response under dataProvider, so its children and any subscriber of that provider can render it. In a Lit component, prefer th</p>
|
|
23
|
-
<pre class="doc-excerpt">Fetch
|
|
24
|
-
|
|
25
|
-
sonic-fetch sends a GET request to serviceURL + endPoint and publishes the response under dataProvider, so its children and any subscriber of that provider can render it. In a Lit component, prefer the @get decorator; for collections, use List or Queue.
|
|
26
|
-
|
|
27
|
-
Basic example
|
|
28
|
-
|
|
29
|
-
dataProvider is required; serviceURL and dataProvider can be set on an ancestor. Children are hidden while the request is pending. With no serviceURL, requests go to the page origin.
|
|
30
|
-
|
|
31
|
-
$code to $city, gate $gate">
|
|
32
|
-
|
|
33
|
-
Data provider as endpoint
|
|
34
|
-
|
|
35
|
-
With no endPoint, the dataProvider value is used as the endpoint.
|
|
36
|
-
|
|
37
|
-
$code from $city at $time">
|
|
38
|
-
|
|
39
|
-
Key
|
|
40
|
-
|
|
41
|
-
key keeps only part of the response, using a dot path: with { "flights": [ … ] } and key="flights.1", the provider holds the second flight. Add preserveOtherKeys to merge the target into the parent object instead of dropping its siblings. With no key, the whole response is published.
|
|
42
|
-
|
|
43
|
-
Loader and skeleton
|
|
44
|
-
|
|
45
|
-
With no loader, nothing is shown during the request. Set loader (fixed overlay) or loader="inline" to show a Loader, or add a child rendered in place of the content while loading.
|
|
46
|
-
|
|
47
|
-
Loading arrivals…
|
|
48
|
-
|
|
49
|
-
Text responses
|
|
50
|
-
|
|
51
|
-
When the response type starts w</pre>
|
|
52
|
-
</section>
|
|
53
|
-
<section id="core-components-functional-list-list" data-doc-id="core/components/functional/list/list">
|
|
54
|
-
<h2><a href="/core/components/functional/list">List</a></h2>
|
|
55
|
-
<p><strong>Doc ID:</strong> <code>core/components/functional/list/list</code> · <a href="/core/components/functional/list">full page</a></p>
|
|
56
|
-
<p>sonic-list renders one row per entry of its props array, either set directly or loaded with fetch. From Lit, pass a row renderer on the items property; in plain HTML, declare <template> children. Each</p>
|
|
57
|
-
<pre class="doc-excerpt">List
|
|
58
|
-
|
|
59
|
-
sonic-list renders one row per entry of its props array, either set directly or loaded with fetch. From Lit, pass a row renderer on the items property; in plain HTML, declare children. Each row gets its own data provider at /list-item/ .
|
|
60
|
-
|
|
61
|
-
Basic example
|
|
62
|
-
|
|
63
|
-
Add fetch to load props from serviceURL + endPoint (or dataProvider when endPoint is empty). key picks the array inside the response. Without fetch, the list only renders the props it receives.
|
|
64
|
-
|
|
65
|
-
$time $code from $city ($airport)">
|
|
66
|
-
|
|
67
|
-
Fetch attributes (lazyload · refetchEveryMs · headers · authentication) are shared with Fetch.
|
|
68
|
-
|
|
69
|
-
Row renderer
|
|
70
|
-
|
|
71
|
-
From a Lit component, set .items to a function (item, metadata) => TemplateResult. Functions only pass as properties, so always use the . binding: the same applies to .separator · .noItems · .skeleton. metadata holds key · even · odd · firstChild · lastChild · onlyChild.
|
|
72
|
-
|
|
73
|
-
Row variants
|
|
74
|
-
|
|
75
|
-
In HTML, templateKey (default template) names the row field that selects a . Rows without a match cycle through the children that have no data-value. From Lit, branch inside the items callback instead.
|
|
76
|
-
|
|
77
|
-
Separator and empty list
|
|
78
|
-
|
|
79
|
-
.separator renders between rows (not after the last one). .noItems</pre>
|
|
80
|
-
</section>
|
|
81
|
-
<section id="core-components-functional-queue-queue" data-doc-id="core/components/functional/queue/queue">
|
|
82
|
-
<h2><a href="/core/components/functional/queue">Queue</a></h2>
|
|
83
|
-
<p><strong>Doc ID:</strong> <code>core/components/functional/queue/queue</code> · <a href="/core/components/functional/queue">full page</a></p>
|
|
84
|
-
<p>sonic-queue loads a paginated API in batches and renders each batch as an internal List. Choose it over sonic-list for long or endless lists; the key attributes are dataProviderExpression · limit · da</p>
|
|
85
|
-
<pre class="doc-excerpt">Queue
|
|
86
|
-
|
|
87
|
-
sonic-queue loads a paginated API in batches and renders each batch as an internal List. Choose it over sonic-list for long or endless lists; the key attributes are dataProviderExpression · limit · dataFilterProvider.
|
|
88
|
-
|
|
89
|
-
Lazy load
|
|
90
|
-
|
|
91
|
-
dataProviderExpression is the request path: $offset and $limit are replaced for each batch. The first batch starts at offset (default 0) with limit rows (default 5, at most 15). The next batch loads when the end of the list scrolls into view, and the queue stops at the first empty batch. Put the queue in a box with a fixed height and overflow-y-auto, then scroll inside it.
|
|
92
|
-
|
|
93
|
-
Rows come from the .items callback, as on List; .noItems and .skeleton work the same way. Without $offset in the expression, the queue sends one request and behaves like a list. Set noLazyload to load every batch in a row without waiting for the scroll.
|
|
94
|
-
|
|
95
|
-
Filters
|
|
96
|
-
|
|
97
|
-
dataFilterProvider names a form store (formDataProvider). Each non-empty field is added to the query string; when a field changes, the queue drops the loaded batches and reloads from the first offset, after a filterTimeoutMs debounce (default 400). Search a city, an airport or a flight number.
|
|
98
|
-
|
|
99
|
-
To keep some form fields o</pre>
|
|
100
|
-
</section>
|
|
101
|
-
<section id="docs-decorators-get" data-doc-id="docs/decorators/get">
|
|
102
|
-
<h2><a href="/docs/decorators/get">@get</a></h2>
|
|
103
|
-
<p><strong>Doc ID:</strong> <code>docs/decorators/get</code> · <a href="/docs/decorators/get">full page</a></p>
|
|
104
|
-
<p>@get(endpoint) runs an HTTP GET on an Endpoint and stores the full ApiResult<T> in a property, or passes it to a method. It runs again when the endpoint's placeholders or the API configuration change,</p>
|
|
105
|
-
<pre class="doc-excerpt">@get
|
|
106
|
-
|
|
107
|
-
@get(endpoint) runs an HTTP GET on an Endpoint and stores the full ApiResult in a property, or passes it to a method. It runs again when the endpoint's placeholders or the API configuration change, and on demand through refetch. For writes, see @post, @put and @patch.
|
|
108
|
-
|
|
109
|
-
Import
|
|
110
|
-
|
|
111
|
-
import { get, Endpoint, type ApiResult } from "@supersoniks/concorde/decorators";
|
|
112
|
-
|
|
113
|
-
type FlightBoard = { flights: Flight[] };
|
|
114
|
-
const departuresEndpoint = new Endpoint&lt;FlightBoard&gt;("flights?direction=departures");
|
|
115
|
-
|
|
116
|
-
@get(departuresEndpoint)
|
|
117
|
-
@state()
|
|
118
|
-
departures?: ApiResult&lt;FlightBoard&gt;;
|
|
119
|
-
|
|
120
|
-
Property
|
|
121
|
-
|
|
122
|
-
The property is undefined until the first response, then holds result (typed T), response (the HTTP response) and request. It is reset to undefined when the component disconnects.
|
|
123
|
-
|
|
124
|
-
Without a configuration key, serviceURL and the token are read from the HTML scope: place the component under an element that sets them (see API configuration). The GET waits until serviceURL is available.
|
|
125
|
-
|
|
126
|
-
Method
|
|
127
|
-
|
|
128
|
-
Decorate a method to receive the ApiResult after each GET instead of storing it.
|
|
129
|
-
|
|
130
|
-
@get(departuresEndpoint)
|
|
131
|
-
onDepartures(payload?: ApiResult&lt;FlightBoard&gt;) {
|
|
132
|
-
this.boarding = payload?.result?.flights.filter(</pre>
|
|
133
|
-
</section>
|
|
134
|
-
<section id="docs-decorators-patch" data-doc-id="docs/decorators/patch">
|
|
135
|
-
<h2><a href="/docs/decorators/patch">@patch</a></h2>
|
|
136
|
-
<p><strong>Doc ID:</strong> <code>docs/decorators/patch</code> · <a href="/docs/decorators/patch">full page</a></p>
|
|
137
|
-
<p>Sends the value of a publisher as the body of a PATCH request, to update part of a resource, and stores the response in an ApiResult<T> property. It takes the same arguments, options and send(componen</p>
|
|
138
|
-
<pre class="doc-excerpt">@patch
|
|
139
|
-
|
|
140
|
-
Sends the value of a publisher as the body of a PATCH request, to update part of a resource, and stores the response in an ApiResult property. It takes the same arguments, options and send(component) handle as @post; only the HTTP method differs.
|
|
141
|
-
|
|
142
|
-
Import
|
|
143
|
-
|
|
144
|
-
import { patch, type ApiResult } from "@supersoniks/concorde/decorators";
|
|
145
|
-
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
|
|
146
|
-
import { Endpoint } from "@supersoniks/concorde/utils/endpoint";
|
|
147
|
-
|
|
148
|
-
Basic usage
|
|
149
|
-
|
|
150
|
-
The body holds only the fields to change, here a gate change for flight CN 001.
|
|
151
|
-
|
|
152
|
-
type Flight = { flight: string; route: string; gate: string };
|
|
153
|
-
|
|
154
|
-
const gateChangeKey = new DataProviderKey&lt;Partial&lt;Flight&gt;&gt;("gateChange");
|
|
155
|
-
|
|
156
|
-
@patch(new Endpoint&lt;Flight&gt;("flights/CN001"), gateChangeKey)
|
|
157
|
-
@state()
|
|
158
|
-
payload?: ApiResult&lt;Flight&gt;;
|
|
159
|
-
|
|
160
|
-
moveToB12() {
|
|
161
|
-
set(gateChangeKey, { gate: "B12" }); // sends the PATCH
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
Triggers, the send method decorator and every option are described on @post.
|
|
165
|
-
|
|
166
|
-
API reference
|
|
167
|
-
|
|
168
|
-
| Argument | Type | Description |
|
|
169
|
-
|----------|------|-------------|
|
|
170
|
-
| endpoint | Endpoint | Resource path and response type |
|
|
171
|
-
| bodyKey | DataProviderKey | Publisher read as the partial body |
|
|
172
|
-
| </pre>
|
|
173
|
-
</section>
|
|
174
|
-
<section id="docs-decorators-post" data-doc-id="docs/decorators/post">
|
|
175
|
-
<h2><a href="/docs/decorators/post">@post</a></h2>
|
|
176
|
-
<p><strong>Doc ID:</strong> <code>docs/decorators/post</code> · <a href="/docs/decorators/post">full page</a></p>
|
|
177
|
-
<p>Sends the value of a publisher as the body of a POST request and stores the response in an ApiResult<T> property. Pass an Endpoint and a DataProviderKey for the body; the request runs on connect and a</p>
|
|
178
|
-
<pre class="doc-excerpt">@post
|
|
179
|
-
|
|
180
|
-
Sends the value of a publisher as the body of a POST request and stores the response in an ApiResult property. Pass an Endpoint and a DataProviderKey for the body; the request runs on connect and again whenever the body changes. @put and @patch work the same way.
|
|
181
|
-
|
|
182
|
-
Import
|
|
183
|
-
|
|
184
|
-
import { post, type ApiResult } from "@supersoniks/concorde/decorators";
|
|
185
|
-
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
|
|
186
|
-
import { Endpoint } from "@supersoniks/concorde/utils/endpoint";
|
|
187
|
-
|
|
188
|
-
type SignUp = { email: string; password: string };
|
|
189
|
-
type CrewMember = { id: number; email: string };
|
|
190
|
-
|
|
191
|
-
const signUpKey = new DataProviderKey&lt;SignUp&gt;("crewSignUp");
|
|
192
|
-
|
|
193
|
-
@post(new Endpoint&lt;CrewMember&gt;("api/register"), signUpKey)
|
|
194
|
-
@state()
|
|
195
|
-
payload?: ApiResult&lt;CrewMember&gt;;
|
|
196
|
-
|
|
197
|
-
Basic usage
|
|
198
|
-
|
|
199
|
-
The property is undefined until a response arrives, then holds request · response · the typed result. Each body mutation sends a new request; mutations in the same frame are coalesced into one. The demo posts to the local mock POST /docs-mock-api/api/register.
|
|
200
|
-
|
|
201
|
-
Method form
|
|
202
|
-
|
|
203
|
-
On a method, the decorator calls it with the full ApiResult after each request instead of assigning a property.
|
|
204
|
-
|
|
205
|
-
Sending again
|
|
206
|
-
|
|
207
|
-
Keep th</pre>
|
|
208
|
-
</section>
|
|
209
|
-
<section id="docs-decorators-put" data-doc-id="docs/decorators/put">
|
|
210
|
-
<h2><a href="/docs/decorators/put">@put</a></h2>
|
|
211
|
-
<p><strong>Doc ID:</strong> <code>docs/decorators/put</code> · <a href="/docs/decorators/put">full page</a></p>
|
|
212
|
-
<p>Sends the value of a publisher as the body of a PUT request, to replace a resource, and stores the response in an ApiResult<T> property. It takes the same arguments, options and send(component) handle</p>
|
|
213
|
-
<pre class="doc-excerpt">@put
|
|
214
|
-
|
|
215
|
-
Sends the value of a publisher as the body of a PUT request, to replace a resource, and stores the response in an ApiResult property. It takes the same arguments, options and send(component) handle as @post; only the HTTP method differs.
|
|
216
|
-
|
|
217
|
-
Import
|
|
218
|
-
|
|
219
|
-
import { put, type ApiResult } from "@supersoniks/concorde/decorators";
|
|
220
|
-
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
|
|
221
|
-
import { Endpoint } from "@supersoniks/concorde/utils/endpoint";
|
|
222
|
-
|
|
223
|
-
Basic usage
|
|
224
|
-
|
|
225
|
-
The full passenger record is sent on connect and after each body mutation. Placeholders such as ${passengerId} are resolved on the host component.
|
|
226
|
-
|
|
227
|
-
type Passenger = { name: string; flight: string; seat: string };
|
|
228
|
-
|
|
229
|
-
const passengerKey = new DataProviderKey&lt;Passenger&gt;("passengerForm");
|
|
230
|
-
const savePassenger = put(
|
|
231
|
-
new Endpoint&lt;Passenger, { passengerId: string }&gt;("passengers/${passengerId}"),
|
|
232
|
-
passengerKey,
|
|
233
|
-
{ autoPostOnBodyMutation: false },
|
|
234
|
-
);
|
|
235
|
-
|
|
236
|
-
@property() passengerId = "ada-lindqvist";
|
|
237
|
-
|
|
238
|
-
@savePassenger
|
|
239
|
-
@state()
|
|
240
|
-
payload?: ApiResult&lt;Passenger&gt;;
|
|
241
|
-
|
|
242
|
-
async save() {
|
|
243
|
-
await savePassenger.send(this);
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
Triggers, the send method decorator and every option are described on @post.
|
|
247
|
-
|
|
248
|
-
API reference
|
|
249
|
-
|
|
250
|
-
| Argumen</pre>
|
|
251
|
-
</section>
|
|
252
|
-
<section id="docs-getting-started-dataFlow" data-doc-id="docs/getting-started/dataFlow">
|
|
253
|
-
<h2><a href="/docs/getting-started/dataFlow">Data flow</a></h2>
|
|
254
|
-
<p><strong>Doc ID:</strong> <code>docs/getting-started/dataFlow</code> · <a href="/docs/getting-started/dataFlow">full page</a></p>
|
|
255
|
-
<p>Recommended patterns for new Concorde apps (Lit + TypeScript). Under the hood, data lives in a DataProvider store.</p>
|
|
256
|
-
<pre class="doc-excerpt">Data flow
|
|
257
|
-
|
|
258
|
-
Recommended patterns for new Concorde apps (Lit + TypeScript). Under the hood, data lives in a DataProvider store.
|
|
259
|
-
|
|
260
|
-
Quick map
|
|
261
|
-
|
|
262
|
-
| Need | Use |
|
|
263
|
-
|------|-----|
|
|
264
|
-
| Read/write in code | get / set / dp + DataProviderKey (static paths only) |
|
|
265
|
-
| Reactive Lit template | sub(key) or @subscribe |
|
|
266
|
-
| Read component state from store | @subscribe + DataProviderKey + @state |
|
|
267
|
-
| Inherit ancestor attributes | @ancestorAttribute |
|
|
268
|
-
| Write from component state | @publish |
|
|
269
|
-
| React to assignments | @handle |
|
|
270
|
-
| HTTP GET | @get + Endpoint, or sonic-list / sonic-queue with fetch |
|
|
271
|
-
| HTTP POST (body from store) | @post + Endpoint + body DataProviderKey |
|
|
272
|
-
| HTTP PUT / PATCH (body from store) | @put / @patch — same model as @post |
|
|
273
|
-
| Forms | formDataProvider + name on fields (no Subscriber on form elements) |
|
|
274
|
-
| Derived / aggregate (JSONata) | derive() or sonic-jsonata — Jsonata |
|
|
275
|
-
| Offline doc demos | serviceURL="/docs-mock-api" — Local API demos |
|
|
276
|
-
|
|
277
|
-
Skill: concorde-get-set-dp in the package ai/ folder.
|
|
278
|
-
|
|
279
|
-
DataProviderKey
|
|
280
|
-
|
|
281
|
-
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
|
|
282
|
-
import { dp, get, set } from "@supersoniks/concorde/utils";
|
|
283
|
-
|
|
284
|
-
const cartKey = new DataProviderKey&lt;{ items</pre>
|
|
285
|
-
</section>
|
|
286
|
-
<section id="docs-misc-api-configuration" data-doc-id="docs/misc/api-configuration">
|
|
287
|
-
<h2><a href="/docs/misc/api-configuration">API configuration</a></h2>
|
|
288
|
-
<p><strong>Doc ID:</strong> <code>docs/misc/api-configuration</code> · <a href="/docs/misc/api-configuration">full page</a></p>
|
|
289
|
-
<p>APIConfiguration is the object built by HTML.getApiConfiguration from ancestor attributes on the DOM (or from a typed publisher — see @get / @post configuration key). It is passed to API by fetchers, </p>
|
|
290
|
-
<pre class="doc-excerpt">API configuration
|
|
291
|
-
|
|
292
|
-
APIConfiguration is the object built by HTML.getApiConfiguration from ancestor attributes on the DOM (or from a typed publisher — see @get / @post configuration key). It is passed to API by fetchers, sonic-submit, the wording() directive, @get, @post, @put, and @patch.
|
|
293
|
-
|
|
294
|
-
> Mock service: same Local API demos Service Worker / Vite middleware. Routes used on this page are listed in the API config routes section below.
|
|
295
|
-
|
|
296
|
-
Attribute map
|
|
297
|
-
|
|
298
|
-
| Attribute (ancestor) | APIConfiguration field | Role |
|
|
299
|
-
|---------------------|---------------------------|------|
|
|
300
|
-
| serviceURL | serviceURL | Base URL (e.g. /docs-mock-api) |
|
|
301
|
-
| token | token | Static Bearer sent on REST calls |
|
|
302
|
-
| userName / password | userName / password | Basic auth for tokenProvider fetch only |
|
|
303
|
-
| eventsApiToken | authToken | Bearer for tokenProvider when no Basic |
|
|
304
|
-
| tokenProvider | tokenProvider | Path to GET a new token ({ token } JSON) |
|
|
305
|
-
| wordingProvider | — (read by wording()) | Base path + query for label batch GET |
|
|
306
|
-
| wordingVersionProvider | — | Publisher id; bump version → reload wordings |
|
|
307
|
-
| credentials | credentials | fetch credentials mode |
|
|
308
|
-
| addHTTPResponse | addHTTPResponse | Attach sonichttpresponse </pre>
|
|
309
|
-
</section>
|
|
310
|
-
<section id="docs-misc-dynamic-path" data-doc-id="docs/misc/dynamic-path">
|
|
311
|
-
<h2><a href="/docs/misc/dynamic-path">Dynamic path placeholders</a></h2>
|
|
312
|
-
<p><strong>Doc ID:</strong> <code>docs/misc/dynamic-path</code> · <a href="/docs/misc/dynamic-path">full page</a></p>
|
|
313
|
-
<p>Decorators and DataProviderKey paths can include placeholders resolved on the host component at runtime:</p>
|
|
314
|
-
<pre class="doc-excerpt">Dynamic path placeholders
|
|
315
|
-
|
|
316
|
-
Decorators and DataProviderKey paths can include placeholders resolved on the host component at runtime:
|
|
317
|
-
|
|
318
|
-
- ${prop} or {$prop} — e.g. "users/${userId}", "api/sessions/${sessionId}/sync"
|
|
319
|
-
- Nested expressions — e.g. "teams.${teamId}.members"
|
|
320
|
-
|
|
321
|
-
Resolution is done by resolveDynamicPath. The root property names (userId, sessionId, …) are watched via requestAnimationFrame (see dynamicPropertyWatch.ts).
|
|
322
|
-
|
|
323
|
-
Default behaviour (ready / not ready)
|
|
324
|
-
|
|
325
|
-
| Placeholder value | Path ready? | Inserted segment | Notes |
|
|
326
|
-
|-------------------|---------------|------------------|-------|
|
|
327
|
-
| undefined | no | — | Wait until defined |
|
|
328
|
-
| null | no | — | Same as undefined |
|
|
329
|
-
| "" | yes | empty string | e.g. sessions//sync — request may still run |
|
|
330
|
-
| 0 | yes | "0" | Not treated as “missing” |
|
|
331
|
-
| false | yes | "false" | |
|
|
332
|
-
| 42, "alpha" | yes | "42", "alpha" | |
|
|
333
|
-
|
|
334
|
-
When ready: false, decorators do not call the network (for @get / @post / @put / @patch), unsubscribe (@bind / @subscribe), or skip publisher binding (@publish / @handle). The decorated property is often left unchanged or set to undefined (HTTP decorators).
|
|
335
|
-
|
|
336
|
-
When the placeholder later becomes valid, observers run again and behaviour r</pre>
|
|
337
|
-
</section>
|
|
338
|
-
<section id="docs-misc-endpoint" data-doc-id="docs/misc/endpoint">
|
|
339
|
-
<h2><a href="/docs/misc/endpoint">Endpoint</a></h2>
|
|
340
|
-
<p><strong>Doc ID:</strong> <code>docs/misc/endpoint</code> · <a href="/docs/misc/endpoint">full page</a></p>
|
|
341
|
-
<p>Endpoint<T, U> describes a single HTTP path (or a path accepted by API.get) and carries the expected response type T. Unlike DataProviderKey, there is no dot-navigation: the path is one string.</p>
|
|
342
|
-
<pre class="doc-excerpt">Endpoint
|
|
343
|
-
|
|
344
|
-
Endpoint describes a single HTTP path (or a path accepted by API.get) and carries the expected response type T. Unlike DataProviderKey, there is no dot-navigation: the path is one string.
|
|
345
|
-
|
|
346
|
-
The optional second generic U (default any) describes host properties used to resolve dynamic segments in the path (${…} / {$…}), for example with @get or @post. See Dynamic path placeholders for null / undefined / "" / 0 and skipEmptyPlaceholder.
|
|
347
|
-
|
|
348
|
-
Import
|
|
349
|
-
|
|
350
|
-
import { Endpoint } from "@supersoniks/concorde/utils/endpoint";
|
|
351
|
-
|
|
352
|
-
Construction
|
|
353
|
-
|
|
354
|
-
const users = new Endpoint&lt;User[]&gt;("users?limit=10");
|
|
355
|
-
users.path; // "users?limit=10"
|
|
356
|
-
|
|
357
|
-
const one = new Endpoint&lt;User, { userId: string }&gt;("users/${userId}");
|
|
358
|
-
// userId on the host class is observed when used with @get
|
|
359
|
-
|
|
360
|
-
Normalization
|
|
361
|
-
|
|
362
|
-
Endpoint.normalizePath trims the string, rejects an empty path, strips leading slashes for paths relative to serviceURL, collapses duplicate slashes, and validates absolute http(s):// URLs.
|
|
363
|
-
|
|
364
|
-
Publisher key for payloads
|
|
365
|
-
|
|
366
|
-
getDataProviderKey() returns a typed publisher key whose path matches the endpoint path (payload typing follows ApiResult for this endpoint). Useful when pairing @get with @publish / @subscribe (see</pre>
|
|
367
|
-
</section>
|
|
368
|
-
</article>
|
|
369
|
-
</main>
|
|
370
|
-
</body>
|
|
371
|
-
</html>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
[
|
|
2
|
-
{
|
|
3
|
-
"file": "public/img/archive/concorde-red-arrows-2002.webm",
|
|
4
|
-
"media": "video",
|
|
5
|
-
"poster": "public/img/archive/concorde-red-arrows-2002-poster.jpg",
|
|
6
|
-
"ref": "commons:191164291",
|
|
7
|
-
"title": "Concorde & Red Arrows 2002",
|
|
8
|
-
"creator": "Steve Elliott from UK",
|
|
9
|
-
"creatorUrl": null,
|
|
10
|
-
"date": "2002",
|
|
11
|
-
"license": "CC BY-SA 2.0",
|
|
12
|
-
"licenseCode": "by-sa",
|
|
13
|
-
"licenseUrl": "https://creativecommons.org/licenses/by-sa/2.0",
|
|
14
|
-
"creditRequired": true,
|
|
15
|
-
"page": "https://commons.wikimedia.org/wiki/File:Concorde_%26_Red_Arrows_2002.webm",
|
|
16
|
-
"via": "Wikimedia Commons",
|
|
17
|
-
"video": "https://upload.wikimedia.org/wikipedia/commons/0/07/Concorde_%26_Red_Arrows_2002.webm",
|
|
18
|
-
"width": 640,
|
|
19
|
-
"height": 360,
|
|
20
|
-
"duration": 10.4,
|
|
21
|
-
"bytes": 402387,
|
|
22
|
-
"credit": "\"Concorde & Red Arrows 2002\" by Steve Elliott from UK, CC BY-SA 2.0, via Wikimedia Commons",
|
|
23
|
-
"notes": [
|
|
24
|
-
"Share-alike: an altered version (recoloured, combined with other pictures) must be shared under the same licence."
|
|
25
|
-
],
|
|
26
|
-
"saved": "2026-10-25T16:21:03.878Z"
|
|
27
|
-
}
|
|
28
|
-
]
|
package/docs/index.md
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
# Concorde by Supersoniks
|
|
2
|
-
|
|
3
|
-
Concorde is an open-source Lit web-components library from Supersoniks. It provides UI primitives, data binding, forms, routing helpers and theming that run the same way in React, Vue, PHP templates or a static HTML page.
|
|
4
|
-
|
|
5
|
-
Install the npm package [`@supersoniks/concorde`](https://www.npmjs.com/package/@supersoniks/concorde).
|
|
6
|
-
|
|
7
|
-
## Developer resources
|
|
8
|
-
|
|
9
|
-
- Interactive docs: https://concorde.supersoniks.org/
|
|
10
|
-
- Agent index: https://concorde.supersoniks.org/llms.txt
|
|
11
|
-
- Full text mirror: https://concorde.supersoniks.org/llms-full.txt
|
|
12
|
-
- Docs index: https://concorde.supersoniks.org/docs/index.html
|
|
13
|
-
- Sitemap: https://concorde.supersoniks.org/sitemap.xml
|
|
14
|
-
- Getting started: https://concorde.supersoniks.org/docs/getting-started/start
|
|
15
|
-
- AI agents (skills): https://concorde.supersoniks.org/docs/getting-started/ai-agents
|
|
16
|
-
- Components: https://concorde.supersoniks.org/docs/getting-started/components
|
|
17
|
-
|
|
18
|
-
Doc pages share pathnames with the interactive site (`/docs/…`, `/core/…`). Markdown is at the same path with a `.md` suffix (e.g. `/docs/getting-started/start.md`), or via `Accept: text/markdown` on the pathname (`Content-Type: text/markdown`, `Vary: Accept`).
|
|
19
|
-
|
|
20
|
-
## What Concorde includes
|
|
21
|
-
|
|
22
|
-
Custom elements (`sonic-*`) for buttons, forms, lists, queues, SDUI trees and more. Decorators such as `@get`, `@post`, `@subscribe` and `@bind` wire components to a shared DataProvider without framework lock-in. Concorde is MIT-licensed and maintained by Supersoniks.
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
# Translation
|
|
2
|
-
|
|
3
|
-
**`sonic-t`** renders a translated label in plain HTML. It is the markup counterpart of the [t()](/docs/directives/t) directive and shares its endpoint, batching and cache.
|
|
4
|
-
|
|
5
|
-
## Basic example
|
|
6
|
-
|
|
7
|
-
Set `serviceURL` and `wordingProvider` on an ancestor, then give each `sonic-t` a `key`. Labels requested together are fetched in one call.
|
|
8
|
-
|
|
9
|
-
<sonic-code>
|
|
10
|
-
<template>
|
|
11
|
-
<div serviceURL="/docs-mock-api" wordingProvider="wording/labels?lang=fr">
|
|
12
|
-
<p><sonic-t key="flight.boarding"></sonic-t></p>
|
|
13
|
-
</div>
|
|
14
|
-
</template>
|
|
15
|
-
</sonic-code>
|
|
16
|
-
|
|
17
|
-
## HTML labels
|
|
18
|
-
|
|
19
|
-
The label is escaped by default. Add `unsafeHTML` for labels that contain trusted markup.
|
|
20
|
-
|
|
21
|
-
<sonic-code>
|
|
22
|
-
<template>
|
|
23
|
-
<div serviceURL="/docs-mock-api" wordingProvider="wording/labels?lang=fr">
|
|
24
|
-
<p><sonic-t key="flight.gate" unsafeHTML></sonic-t></p>
|
|
25
|
-
</div>
|
|
26
|
-
</template>
|
|
27
|
-
</sonic-code>
|
|
28
|
-
|
|
29
|
-
Endpoint format, reloading on `<html lang>` change and `wordingVersionProvider` are described on the [t()](/docs/directives/t) page.
|
|
30
|
-
|
|
31
|
-
## API reference
|
|
32
|
-
|
|
33
|
-
| Attribute | Values | Description |
|
|
34
|
-
|-----------|--------|-------------|
|
|
35
|
-
| `key` | string | Label key. Renders nothing while empty |
|
|
36
|
-
| `unsafeHTML` | boolean | Renders the label as HTML instead of text |
|
|
37
|
-
|
|
38
|
-
No slots.
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
# @ancestorAttribute
|
|
2
|
-
|
|
3
|
-
Copies the value of an attribute from the nearest element that carries it (the host itself, then its ancestors, across shadow roots) into a class property. Use it to pick up a scope such as `dataProvider` without passing it down by hand, typically to feed a dynamic key of [@subscribe](/docs/decorators/subscribe).
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
<sonic-code language="typescript">
|
|
8
|
-
<template>
|
|
9
|
-
import { ancestorAttribute } from "@supersoniks/concorde/decorators";
|
|
10
|
-
|
|
11
|
-
@ancestorAttribute("dataProvider")
|
|
12
|
-
dataProvider: string | null = null;
|
|
13
|
-
</template>
|
|
14
|
-
</sonic-code>
|
|
15
|
-
|
|
16
|
-
## Read once at connect
|
|
17
|
-
|
|
18
|
-
By default the value is read once, just before the component's `connectedCallback`, and never updated. The closest element with the attribute wins. If no ancestor has it, the property keeps its initial value.
|
|
19
|
-
|
|
20
|
-
<sonic-code>
|
|
21
|
-
<template>
|
|
22
|
-
<div dataProvider="flights.CN001" gate="B12">
|
|
23
|
-
<docs-demo-sources for="demo-ancestor-attribute"></docs-demo-sources>
|
|
24
|
-
<demo-ancestor-attribute></demo-ancestor-attribute>
|
|
25
|
-
</div>
|
|
26
|
-
</template>
|
|
27
|
-
</sonic-code>
|
|
28
|
-
|
|
29
|
-
An attribute present without a value (`<div gate>`) resolves to `""`. A camelCase name also matches its lowercase form (`dataProvider` and `dataprovider`).
|
|
30
|
-
|
|
31
|
-
## Follow DOM changes
|
|
32
|
-
|
|
33
|
-
With `{ dynamic: true }`, the property stays in sync while the component is connected: when an ancestor changes the attribute, when a closer ancestor gains or loses it, and when the component is moved. When no ancestor has the attribute, the property becomes `null`. Add `@state()` so Lit re-renders on each assignment.
|
|
34
|
-
|
|
35
|
-
<sonic-code language="typescript">
|
|
36
|
-
<template>
|
|
37
|
-
@ancestorAttribute("dataProvider", { dynamic: true })
|
|
38
|
-
@state()
|
|
39
|
-
dataProvider: string | null = null;
|
|
40
|
-
</template>
|
|
41
|
-
</sonic-code>
|
|
42
|
-
|
|
43
|
-
Change the parent or outer value, insert a closer wrapper, or remove an attribute: the child always shows the nearest one.
|
|
44
|
-
|
|
45
|
-
<sonic-code>
|
|
46
|
-
<template>
|
|
47
|
-
<docs-demo-sources for="demo-ancestor-attribute-dynamic-section"></docs-demo-sources>
|
|
48
|
-
<demo-ancestor-attribute-dynamic-section></demo-ancestor-attribute-dynamic-section>
|
|
49
|
-
</template>
|
|
50
|
-
</sonic-code>
|
|
51
|
-
|
|
52
|
-
Keys of [@subscribe](/docs/decorators/subscribe) and [@bind](/docs/decorators/bind) that use the property as a placeholder (`"${dataProvider}"`) are re-resolved on each change.
|
|
53
|
-
|
|
54
|
-
## API reference
|
|
55
|
-
|
|
56
|
-
| Argument | Type | Description |
|
|
57
|
-
|----------|------|-------------|
|
|
58
|
-
| `attributeName` | `string` | Attribute to look up on the host, then on its ancestors |
|
|
59
|
-
| `options.dynamic` | `boolean` (default `false`) | Keep the property in sync with attribute changes and reparenting until disconnect; assigns `null` when no ancestor has the attribute |
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
# @autoSubscribe
|
|
2
|
-
|
|
3
|
-
Legacy decorator that re-runs a method whenever one of the store values it reads is assigned. For new code, prefer [@subscribe](/docs/decorators/subscribe) with a [`DataProviderKey`](/docs/misc/dataProviderKey): dependencies are explicit and typed.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
<sonic-code language="typescript">
|
|
8
|
-
<template>
|
|
9
|
-
import { autoSubscribe } from "@supersoniks/concorde/decorators";
|
|
10
|
-
import { get } from "@supersoniks/concorde/utils";
|
|
11
|
-
|
|
12
|
-
@autoSubscribe()
|
|
13
|
-
updateDisplay() {
|
|
14
|
-
this.total = get(passengersKey) + get(crewKey);
|
|
15
|
-
}
|
|
16
|
-
</template>
|
|
17
|
-
</sonic-code>
|
|
18
|
-
|
|
19
|
-
## Tracked reads
|
|
20
|
-
|
|
21
|
-
The method runs once after `connectedCallback`. Every store value read during that run becomes a dependency; assigning any of them runs the method again. Write the result to a `@state()` property (or call `requestUpdate()`) so the component re-renders.
|
|
22
|
-
|
|
23
|
-
<sonic-code>
|
|
24
|
-
<template>
|
|
25
|
-
<docs-demo-sources for="demo-auto-subscribe"></docs-demo-sources>
|
|
26
|
-
<demo-auto-subscribe></demo-auto-subscribe>
|
|
27
|
-
</template>
|
|
28
|
-
</sonic-code>
|
|
29
|
-
|
|
30
|
-
## Notes
|
|
31
|
-
|
|
32
|
-
- Several assignments in the same task trigger a single re-run (batched with `queueMicrotask`).
|
|
33
|
-
- Keep reads unconditional: a value read only behind a condition becomes a dependency the first time that branch runs.
|
|
34
|
-
- Subscriptions are removed in `disconnectedCallback`.
|
|
35
|
-
|
|
36
|
-
## API reference
|
|
37
|
-
|
|
38
|
-
| Argument | Type | Description |
|
|
39
|
-
|----------|------|-------------|
|
|
40
|
-
| none | | `@autoSubscribe()` takes no argument; apply it to a method of a custom element |
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
# @bind
|
|
2
|
-
|
|
3
|
-
Keeps a class property in sync with a path of the DataProvider store, in both directions when needed. Pass a dot-notation string or a [DataProviderKey](/docs/misc/dataProviderKey); add `{ reflect: true }` to push local writes back to the store. For read-only sync prefer [@subscribe](/docs/decorators/subscribe), and see [Data flow](/docs/getting-started/dataFlow) for the overall model.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
<sonic-code language="typescript">
|
|
8
|
-
<template>
|
|
9
|
-
import { bind } from "@supersoniks/concorde/decorators";
|
|
10
|
-
|
|
11
|
-
@bind("flight.gate")
|
|
12
|
-
@state()
|
|
13
|
-
gate = "";
|
|
14
|
-
</template>
|
|
15
|
-
</sonic-code>
|
|
16
|
-
|
|
17
|
-
## Basic usage
|
|
18
|
-
|
|
19
|
-
The first path segment is the data provider id, the rest is dot notation (array items use a numeric index: `passengers.0`). The property updates each time the store value changes. Add `@state()` so Lit re-renders.
|
|
20
|
-
|
|
21
|
-
<sonic-code>
|
|
22
|
-
<template>
|
|
23
|
-
<docs-demo-sources for="demo-bind"></docs-demo-sources>
|
|
24
|
-
<demo-bind></demo-bind>
|
|
25
|
-
</template>
|
|
26
|
-
</sonic-code>
|
|
27
|
-
|
|
28
|
-
## Typed key
|
|
29
|
-
|
|
30
|
-
With a `DataProviderKey<T>`, TypeScript checks that the property type matches `T` at that path.
|
|
31
|
-
|
|
32
|
-
<sonic-code language="typescript">
|
|
33
|
-
<template>
|
|
34
|
-
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
|
|
35
|
-
|
|
36
|
-
type Flight = { flight: string; gate: string; boarded: number };
|
|
37
|
-
const flightKey = new DataProviderKey<Flight>("flight");
|
|
38
|
-
|
|
39
|
-
@bind(flightKey.boarded, { reflect: true })
|
|
40
|
-
@state()
|
|
41
|
-
boarded = 0;
|
|
42
|
-
</template>
|
|
43
|
-
</sonic-code>
|
|
44
|
-
|
|
45
|
-
## Reflect
|
|
46
|
-
|
|
47
|
-
By default (`reflect: false`) the binding is one-way: assigning the property does not touch the store. With `reflect: true`, each assignment calls `set()` on the publisher, so every other subscriber sees the new value. An internal guard prevents update loops.
|
|
48
|
-
|
|
49
|
-
<sonic-code>
|
|
50
|
-
<template>
|
|
51
|
-
<docs-demo-sources for="demo-bind-reflect"></docs-demo-sources>
|
|
52
|
-
<demo-bind-reflect></demo-bind-reflect>
|
|
53
|
-
</template>
|
|
54
|
-
</sonic-code>
|
|
55
|
-
|
|
56
|
-
## Dynamic path
|
|
57
|
-
|
|
58
|
-
Placeholders such as `${index}` are resolved from properties of the same component, and `@bind` re-subscribes when they change. Write them in a plain string, not a backtick template literal. While a placeholder is `null` or `undefined` the binding is inactive; `{ skipEmptyPlaceholder: true }` also waits on `""`. Full rules: [Dynamic paths](/docs/misc/dynamic-path).
|
|
59
|
-
|
|
60
|
-
<sonic-code>
|
|
61
|
-
<template>
|
|
62
|
-
<docs-demo-sources for="demo-bind-dynamic"></docs-demo-sources>
|
|
63
|
-
<demo-bind-dynamic></demo-bind-dynamic>
|
|
64
|
-
</template>
|
|
65
|
-
</sonic-code>
|
|
66
|
-
|
|
67
|
-
## Lifecycle
|
|
68
|
-
|
|
69
|
-
The decorator subscribes in `connectedCallback` and unsubscribes in `disconnectedCallback`. It works on any element with that lifecycle (`LitElement`, the `Subscriber` mixin).
|
|
70
|
-
|
|
71
|
-
## API reference
|
|
72
|
-
|
|
73
|
-
| Argument | Type | Description |
|
|
74
|
-
|----------|------|-------------|
|
|
75
|
-
| `path` | `string` or `DataProviderKey<T>` | Store path to bind. Supports `${prop}` placeholders |
|
|
76
|
-
| `options.reflect` | `boolean` (default `false`) | Write local assignments back to the store |
|
|
77
|
-
| `options.skipEmptyPlaceholder` | `boolean` (default `false`) | Treat a placeholder resolved to `""` as not ready |
|