sygnal 5.3.7 → 6.0.0
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/CHANGELOG.md +646 -0
- package/README.md +77 -47
- package/dist/astro/client.cjs.js +33 -8114
- package/dist/astro/client.cjs.js.map +1 -0
- package/dist/astro/client.mjs +33 -8114
- package/dist/astro/client.mjs.map +1 -0
- package/dist/astro/index.cjs.js +1039 -9
- package/dist/astro/index.cjs.js.map +1 -0
- package/dist/astro/index.mjs +1038 -9
- package/dist/astro/index.mjs.map +1 -0
- package/dist/astro/server.cjs.js +3400 -166
- package/dist/astro/server.cjs.js.map +1 -0
- package/dist/astro/server.mjs +3400 -166
- package/dist/astro/server.mjs.map +1 -0
- package/dist/devtools.cjs.js +1431 -0
- package/dist/devtools.cjs.js.map +1 -0
- package/dist/devtools.esm.js +1419 -0
- package/dist/devtools.esm.js.map +1 -0
- package/dist/diagnostics.cjs.js +4033 -0
- package/dist/diagnostics.cjs.js.map +1 -0
- package/dist/diagnostics.esm.js +4003 -0
- package/dist/diagnostics.esm.js.map +1 -0
- package/dist/element.cjs.js +230 -0
- package/dist/element.cjs.js.map +1 -0
- package/dist/element.esm.js +228 -0
- package/dist/element.esm.js.map +1 -0
- package/dist/guide/accessibility.md +257 -0
- package/dist/guide/adapters.md +221 -0
- package/dist/guide/behaviors.md +312 -0
- package/dist/guide/browser-sources.md +203 -0
- package/dist/guide/drag-and-drop.md +342 -0
- package/dist/guide/element-commands.md +306 -0
- package/dist/guide/error-boundaries.md +169 -0
- package/dist/guide/forms-reference.md +381 -0
- package/dist/guide/forms.md +250 -0
- package/dist/guide/http.md +299 -0
- package/dist/guide/inputs.md +173 -0
- package/dist/guide/persistence.md +245 -0
- package/dist/guide/recipes/carousel.md +155 -0
- package/dist/guide/recipes/charts.md +177 -0
- package/dist/guide/recipes/code-editor.md +135 -0
- package/dist/guide/recipes/data-grid.md +155 -0
- package/dist/guide/recipes/data-table.md +196 -0
- package/dist/guide/recipes/i18n.md +222 -0
- package/dist/guide/recipes/icons.md +115 -0
- package/dist/guide/recipes/overview.md +33 -0
- package/dist/guide/recipes/rich-text.md +154 -0
- package/dist/guide/resources.md +471 -0
- package/dist/guide/ssr.md +255 -0
- package/dist/guide/timers.md +178 -0
- package/dist/guide/ui/accordion.md +93 -0
- package/dist/guide/ui/combobox.md +144 -0
- package/dist/guide/ui/dialog.md +124 -0
- package/dist/guide/ui/disclosure.md +60 -0
- package/dist/guide/ui/menu.md +125 -0
- package/dist/guide/ui/overview.md +166 -0
- package/dist/guide/ui/popover.md +101 -0
- package/dist/guide/ui/select.md +114 -0
- package/dist/guide/ui/tabs.md +161 -0
- package/dist/guide/ui/toaster.md +152 -0
- package/dist/guide/ui/tooltip.md +103 -0
- package/dist/guide/undo.md +178 -0
- package/dist/guide/virtual-collections.md +183 -0
- package/dist/guide/web-components.md +179 -0
- package/dist/guide/widgets.md +217 -0
- package/dist/index.cjs.js +15283 -6279
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +3739 -370
- package/dist/index.esm.js +15230 -6274
- package/dist/index.esm.js.map +1 -0
- package/dist/jsx-dev-runtime.cjs.js +27 -329
- package/dist/jsx-dev-runtime.cjs.js.map +1 -0
- package/dist/jsx-dev-runtime.esm.js +20 -322
- package/dist/jsx-dev-runtime.esm.js.map +1 -0
- package/dist/jsx-runtime.cjs.js +27 -329
- package/dist/jsx-runtime.cjs.js.map +1 -0
- package/dist/jsx-runtime.esm.js +20 -322
- package/dist/jsx-runtime.esm.js.map +1 -0
- package/dist/jsx.cjs.js +11 -309
- package/dist/jsx.cjs.js.map +1 -0
- package/dist/jsx.esm.js +9 -310
- package/dist/jsx.esm.js.map +1 -0
- package/dist/react.cjs.js +117 -0
- package/dist/react.cjs.js.map +1 -0
- package/dist/react.esm.js +115 -0
- package/dist/react.esm.js.map +1 -0
- package/dist/shims/globalthis.cjs +20 -0
- package/dist/sygnal.min.js +2 -1
- package/dist/sygnal.min.js.map +1 -0
- package/dist/ui-combobox.cjs.js +169 -0
- package/dist/ui-combobox.cjs.js.map +1 -0
- package/dist/ui-combobox.esm.js +148 -0
- package/dist/ui-combobox.esm.js.map +1 -0
- package/dist/ui-menu.cjs.js +87 -0
- package/dist/ui-menu.cjs.js.map +1 -0
- package/dist/ui-menu.esm.js +66 -0
- package/dist/ui-menu.esm.js.map +1 -0
- package/dist/ui-select.cjs.js +104 -0
- package/dist/ui-select.cjs.js.map +1 -0
- package/dist/ui-select.esm.js +83 -0
- package/dist/ui-select.esm.js.map +1 -0
- package/dist/ui.cjs.js +738 -0
- package/dist/ui.cjs.js.map +1 -0
- package/dist/ui.esm.js +727 -0
- package/dist/ui.esm.js.map +1 -0
- package/dist/vike/ClientOnly.cjs.js +5 -14
- package/dist/vike/ClientOnly.cjs.js.map +1 -0
- package/dist/vike/ClientOnly.mjs +5 -14
- package/dist/vike/ClientOnly.mjs.map +1 -0
- package/dist/vike/{+config.js → config/+config.js} +10 -1
- package/dist/vike/config/+config.js.map +1 -0
- package/dist/vike/config/package.json +6 -0
- package/dist/vike/onRenderClient.cjs.js +166 -95
- package/dist/vike/onRenderClient.cjs.js.map +1 -0
- package/dist/vike/onRenderClient.mjs +166 -95
- package/dist/vike/onRenderClient.mjs.map +1 -0
- package/dist/vike/onRenderHtml.cjs.js +60 -24
- package/dist/vike/onRenderHtml.cjs.js.map +1 -0
- package/dist/vike/onRenderHtml.mjs +61 -25
- package/dist/vike/onRenderHtml.mjs.map +1 -0
- package/dist/vite/plugin.cjs.js +926 -65
- package/dist/vite/plugin.cjs.js.map +1 -0
- package/dist/vite/plugin.mjs +925 -65
- package/dist/vite/plugin.mjs.map +1 -0
- package/dist/zag.cjs.js +408 -0
- package/dist/zag.cjs.js.map +1 -0
- package/dist/zag.esm.js +405 -0
- package/dist/zag.esm.js.map +1 -0
- package/llms.txt +313 -0
- package/package.json +109 -16
- package/src/astro/client.ts +40 -18
- package/src/astro/index.d.ts +48 -1
- package/src/astro/index.ts +106 -9
- package/src/astro/server.ts +11 -3
- package/src/collection.ts +6 -90
- package/src/core/actions.ts +134 -0
- package/src/core/cell.ts +202 -0
- package/src/core/debug.ts +23 -0
- package/src/core/define.ts +242 -0
- package/src/core/hooks.ts +314 -0
- package/src/core/hosts/collection.ts +325 -0
- package/src/core/hosts/switchable.ts +146 -0
- package/src/core/instance.ts +592 -0
- package/src/core/markers/clientonly.ts +13 -0
- package/src/core/markers/lazy.ts +40 -0
- package/src/core/markers/portal.ts +96 -0
- package/src/core/markers/suspense.ts +41 -0
- package/src/core/markers/transition.ts +70 -0
- package/src/core/registry.ts +25 -0
- package/src/core/runtime.ts +573 -0
- package/src/core/statics.ts +104 -0
- package/src/core/teardown.ts +60 -0
- package/src/core/view.ts +37 -0
- package/src/cycle/dom/DocumentDOMSource.ts +13 -8
- package/src/cycle/dom/ElementFinder.ts +7 -9
- package/src/cycle/dom/EventDelegator.ts +174 -223
- package/src/cycle/dom/IsolateModule.ts +65 -35
- package/src/cycle/dom/MainDOMSource.ts +13 -2
- package/src/cycle/dom/PriorityQueue.ts +4 -2
- package/src/cycle/dom/SymbolTree.ts +18 -47
- package/src/cycle/dom/classNameModule.ts +76 -0
- package/src/cycle/dom/controlledInputModule.ts +50 -0
- package/src/cycle/dom/enrichEventStream.ts +29 -45
- package/src/cycle/dom/fragment.ts +7 -0
- package/src/cycle/dom/isolate.ts +30 -27
- package/src/cycle/dom/makeDOMDriver.ts +115 -57
- package/src/cycle/dom/mockDOMSource.ts +83 -9
- package/src/cycle/dom/modules.ts +21 -4
- package/src/cycle/dom/propsModule.ts +65 -0
- package/src/cycle/dom/selectModule.ts +22 -17
- package/src/cycle/dom/snabbdom.ts +1 -6
- package/src/cycle/dom/thunk.ts +3 -0
- package/src/cycle/dom/utils.ts +98 -0
- package/src/cycle/dom/viewTransition.ts +43 -0
- package/src/cycle/state/StateSource.ts +20 -4
- package/src/cycle/state/objIsEqual.ts +50 -0
- package/src/cycle/state/types.ts +0 -10
- package/src/defineComponent.ts +34 -0
- package/src/devtools.d.ts +151 -0
- package/src/devtools.ts +34 -0
- package/src/element.d.ts +59 -0
- package/src/element.ts +235 -0
- package/src/extra/backoff.ts +9 -0
- package/src/extra/behaviors.ts +169 -0
- package/src/extra/browserSignals.ts +23 -0
- package/src/extra/browserSources.ts +326 -0
- package/src/extra/command.ts +3 -3
- package/src/extra/controls.ts +47 -0
- package/src/extra/copyAsTest.ts +286 -0
- package/src/extra/devtools.ts +109 -31
- package/src/extra/devtoolsActions.ts +379 -0
- package/src/extra/devtoolsHook.ts +9 -0
- package/src/extra/devtoolsNext.ts +83 -0
- package/src/extra/diagnostics/checks/actionLog.ts +108 -0
- package/src/extra/diagnostics/checks/behaviors.ts +49 -0
- package/src/extra/diagnostics/checks/browserSources.ts +96 -0
- package/src/extra/diagnostics/checks/collections.ts +67 -0
- package/src/extra/diagnostics/checks/controls.ts +148 -0
- package/src/extra/diagnostics/checks/dataset.ts +57 -0
- package/src/extra/diagnostics/checks/dom.ts +250 -0
- package/src/extra/diagnostics/checks/elementCommands.ts +175 -0
- package/src/extra/diagnostics/checks/events.ts +83 -0
- package/src/extra/diagnostics/checks/fetch.ts +135 -0
- package/src/extra/diagnostics/checks/forms.ts +163 -0
- package/src/extra/diagnostics/checks/index.ts +202 -0
- package/src/extra/diagnostics/checks/inspect.ts +427 -0
- package/src/extra/diagnostics/checks/next.ts +417 -0
- package/src/extra/diagnostics/checks/persist.ts +54 -0
- package/src/extra/diagnostics/checks/props.ts +56 -0
- package/src/extra/diagnostics/checks/public.d.ts +302 -0
- package/src/extra/diagnostics/checks/replies.ts +128 -0
- package/src/extra/diagnostics/checks/router.ts +100 -0
- package/src/extra/diagnostics/checks/rxjsHints.ts +88 -0
- package/src/extra/diagnostics/checks/shared.ts +203 -0
- package/src/extra/diagnostics/checks/shorthand.ts +115 -0
- package/src/extra/diagnostics/checks/sortable.ts +129 -0
- package/src/extra/diagnostics/checks/state.ts +148 -0
- package/src/extra/diagnostics/checks/statics.ts +48 -0
- package/src/extra/diagnostics/checks/strict.ts +55 -0
- package/src/extra/diagnostics/checks/timers.ts +80 -0
- package/src/extra/diagnostics/checks/viewTransitions.ts +47 -0
- package/src/extra/diagnostics/checks/virtual.ts +73 -0
- package/src/extra/diagnostics/checks/widgets.ts +109 -0
- package/src/extra/diagnostics/checks/wiring.ts +121 -0
- package/src/extra/diagnostics/codes.ts +477 -0
- package/src/extra/diagnostics/index.ts +353 -0
- package/src/extra/diagnostics/legacy.ts +76 -0
- package/src/extra/driverFactories.ts +172 -60
- package/src/extra/elementCommands.ts +53 -0
- package/src/extra/eventDriver.ts +4 -0
- package/src/extra/fetchDriver.ts +519 -0
- package/src/extra/flatten.ts +75 -0
- package/src/extra/focusWithin.ts +27 -0
- package/src/extra/form.ts +268 -0
- package/src/extra/formHelpers.ts +139 -0
- package/src/extra/head.ts +106 -0
- package/src/extra/hmr.ts +2 -3
- package/src/extra/owned.ts +24 -0
- package/src/extra/pager.ts +50 -0
- package/src/extra/persist.ts +133 -0
- package/src/extra/pwa.ts +1 -1
- package/src/extra/queryCache.ts +107 -0
- package/src/extra/reducers.ts +13 -6
- package/src/extra/reduxDevtools.ts +92 -0
- package/src/extra/replies.ts +54 -0
- package/src/extra/router.ts +323 -0
- package/src/extra/run.ts +94 -210
- package/src/extra/selection.ts +76 -0
- package/src/extra/socketDriver.ts +265 -0
- package/src/extra/sortable.ts +377 -0
- package/src/extra/ssr.ts +427 -160
- package/src/extra/standardSchema.ts +27 -0
- package/src/extra/testing.ts +3158 -190
- package/src/extra/timers.ts +95 -0
- package/src/extra/undo.ts +261 -0
- package/src/extra/viewTransitions.ts +38 -0
- package/src/extra/virtual.ts +513 -0
- package/src/extra/widget.ts +201 -0
- package/src/extra/xstreamExtras.ts +269 -0
- package/src/index.d.ts +3012 -87
- package/src/index.ts +32 -10
- package/src/jsx-runtime.ts +15 -1
- package/src/jsx.ts +2 -1
- package/src/lazy.ts +50 -7
- package/src/portal.ts +3 -1
- package/src/pragma/index.ts +262 -134
- package/src/react-peers.d.ts +5 -0
- package/src/react.d.ts +43 -0
- package/src/react.ts +110 -0
- package/src/shared.ts +48 -0
- package/src/slot.ts +1 -1
- package/src/suspense.ts +3 -1
- package/src/switchable.ts +6 -119
- package/src/transition.ts +3 -1
- package/src/ui/accordion.ts +64 -0
- package/src/ui/dialog.ts +129 -0
- package/src/ui/disclosure.ts +35 -0
- package/src/ui/popover.ts +45 -0
- package/src/ui/shared.ts +94 -0
- package/src/ui/tabs.ts +82 -0
- package/src/ui/toaster.ts +198 -0
- package/src/ui/tooltip.ts +70 -0
- package/src/ui/zag/combobox.ts +115 -0
- package/src/ui/zag/menu.ts +40 -0
- package/src/ui/zag/select.ts +54 -0
- package/src/ui/zag/shared.ts +43 -0
- package/src/ui-combobox.d.ts +20 -0
- package/src/ui-combobox.ts +6 -0
- package/src/ui-menu.d.ts +30 -0
- package/src/ui-menu.ts +6 -0
- package/src/ui-select.d.ts +17 -0
- package/src/ui-select.ts +6 -0
- package/src/ui-zag-types.d.ts +42 -0
- package/src/ui.d.ts +208 -0
- package/src/ui.ts +15 -0
- package/src/vike/+config.ts +9 -1
- package/src/vike/ClientOnly.ts +1 -1
- package/src/vike/onRenderClient.ts +144 -96
- package/src/vike/onRenderHtml.ts +69 -26
- package/src/vike/types.ts +27 -4
- package/src/vite/globalthis-shim.ts +18 -0
- package/src/vite/globalthis.ts +56 -0
- package/src/vite/plugin.d.ts +114 -2
- package/src/vite/plugin.ts +920 -56
- package/src/zag.d.ts +64 -0
- package/src/zag.ts +238 -0
- package/dist/astro/astro/client.d.ts +0 -5
- package/dist/astro/astro/index.d.ts +0 -16
- package/dist/astro/astro/server.d.ts +0 -12
- package/dist/astro/client.d.ts +0 -5
- package/dist/astro/client.esm.js +0 -4665
- package/dist/astro/collection.d.ts +0 -12
- package/dist/astro/component.d.ts +0 -22
- package/dist/astro/cycle/dom/BodyDOMSource.d.ts +0 -10
- package/dist/astro/cycle/dom/DOMSource.d.ts +0 -11
- package/dist/astro/cycle/dom/DocumentDOMSource.d.ts +0 -12
- package/dist/astro/cycle/dom/ElementFinder.d.ts +0 -8
- package/dist/astro/cycle/dom/EventDelegator.d.ts +0 -34
- package/dist/astro/cycle/dom/IsolateModule.d.ts +0 -23
- package/dist/astro/cycle/dom/MainDOMSource.d.ts +0 -32
- package/dist/astro/cycle/dom/PriorityQueue.d.ts +0 -7
- package/dist/astro/cycle/dom/ScopeChecker.d.ts +0 -9
- package/dist/astro/cycle/dom/SymbolTree.d.ts +0 -9
- package/dist/astro/cycle/dom/VNodeWrapper.d.ts +0 -8
- package/dist/astro/cycle/dom/enrichEventStream.d.ts +0 -24
- package/dist/astro/cycle/dom/fromEvent.d.ts +0 -6
- package/dist/astro/cycle/dom/index.d.ts +0 -8
- package/dist/astro/cycle/dom/isolate.d.ts +0 -9
- package/dist/astro/cycle/dom/makeDOMDriver.d.ts +0 -11
- package/dist/astro/cycle/dom/mockDOMSource.d.ts +0 -17
- package/dist/astro/cycle/dom/modules.d.ts +0 -5
- package/dist/astro/cycle/dom/snabbdom.d.ts +0 -22
- package/dist/astro/cycle/dom/styleModule.d.ts +0 -13
- package/dist/astro/cycle/dom/thunk.d.ts +0 -11
- package/dist/astro/cycle/dom/utils.d.ts +0 -8
- package/dist/astro/cycle/isolate/index.d.ts +0 -42
- package/dist/astro/cycle/run/adapt.d.ts +0 -6
- package/dist/astro/cycle/run/index.d.ts +0 -36
- package/dist/astro/cycle/run/internals.d.ts +0 -8
- package/dist/astro/cycle/run/types.d.ts +0 -49
- package/dist/astro/cycle/state/Collection.d.ts +0 -29
- package/dist/astro/cycle/state/StateSource.d.ts +0 -20
- package/dist/astro/cycle/state/index.d.ts +0 -5
- package/dist/astro/cycle/state/pickCombine.d.ts +0 -3
- package/dist/astro/cycle/state/pickMerge.d.ts +0 -3
- package/dist/astro/cycle/state/types.d.ts +0 -18
- package/dist/astro/cycle/state/withState.d.ts +0 -17
- package/dist/astro/extra/classes.d.ts +0 -7
- package/dist/astro/extra/devtools.d.ts +0 -78
- package/dist/astro/extra/dragDriver.d.ts +0 -20
- package/dist/astro/extra/driverFactories.d.ts +0 -12
- package/dist/astro/extra/eventDriver.d.ts +0 -9
- package/dist/astro/extra/exactState.d.ts +0 -1
- package/dist/astro/extra/hmr.d.ts +0 -17
- package/dist/astro/extra/logDriver.d.ts +0 -2
- package/dist/astro/extra/processDrag.d.ts +0 -19
- package/dist/astro/extra/processForm.d.ts +0 -15
- package/dist/astro/extra/run.d.ts +0 -13
- package/dist/astro/extra/xstreamCompat.d.ts +0 -5
- package/dist/astro/index.d.ts +0 -19
- package/dist/astro/index.esm.js +0 -27
- package/dist/astro/jsx-dev-runtime.d.ts +0 -1
- package/dist/astro/jsx-runtime.d.ts +0 -4
- package/dist/astro/jsx.d.ts +0 -2
- package/dist/astro/pragma/fn.d.ts +0 -7
- package/dist/astro/pragma/index.d.ts +0 -7
- package/dist/astro/pragma/is.d.ts +0 -10
- package/dist/astro/server.d.ts +0 -12
- package/dist/astro/server.esm.js +0 -25
- package/dist/astro/switchable.d.ts +0 -7
- package/dist/collection.d.ts +0 -12
- package/dist/component.d.ts +0 -22
- package/dist/cycle/dom/BodyDOMSource.d.ts +0 -10
- package/dist/cycle/dom/DOMSource.d.ts +0 -11
- package/dist/cycle/dom/DocumentDOMSource.d.ts +0 -12
- package/dist/cycle/dom/ElementFinder.d.ts +0 -8
- package/dist/cycle/dom/EventDelegator.d.ts +0 -34
- package/dist/cycle/dom/IsolateModule.d.ts +0 -23
- package/dist/cycle/dom/MainDOMSource.d.ts +0 -32
- package/dist/cycle/dom/PriorityQueue.d.ts +0 -7
- package/dist/cycle/dom/ScopeChecker.d.ts +0 -9
- package/dist/cycle/dom/SymbolTree.d.ts +0 -9
- package/dist/cycle/dom/VNodeWrapper.d.ts +0 -8
- package/dist/cycle/dom/enrichEventStream.d.ts +0 -24
- package/dist/cycle/dom/fromEvent.d.ts +0 -6
- package/dist/cycle/dom/index.d.ts +0 -8
- package/dist/cycle/dom/isolate.d.ts +0 -9
- package/dist/cycle/dom/makeDOMDriver.d.ts +0 -11
- package/dist/cycle/dom/mockDOMSource.d.ts +0 -17
- package/dist/cycle/dom/modules.d.ts +0 -5
- package/dist/cycle/dom/snabbdom.d.ts +0 -22
- package/dist/cycle/dom/styleModule.d.ts +0 -13
- package/dist/cycle/dom/thunk.d.ts +0 -11
- package/dist/cycle/dom/utils.d.ts +0 -8
- package/dist/cycle/isolate/index.d.ts +0 -42
- package/dist/cycle/run/adapt.d.ts +0 -6
- package/dist/cycle/run/index.d.ts +0 -36
- package/dist/cycle/run/internals.d.ts +0 -8
- package/dist/cycle/run/types.d.ts +0 -49
- package/dist/cycle/state/Collection.d.ts +0 -29
- package/dist/cycle/state/StateSource.d.ts +0 -20
- package/dist/cycle/state/index.d.ts +0 -5
- package/dist/cycle/state/pickCombine.d.ts +0 -3
- package/dist/cycle/state/pickMerge.d.ts +0 -3
- package/dist/cycle/state/types.d.ts +0 -18
- package/dist/cycle/state/withState.d.ts +0 -17
- package/dist/extra/classes.d.ts +0 -7
- package/dist/extra/devtools.d.ts +0 -78
- package/dist/extra/dragDriver.d.ts +0 -20
- package/dist/extra/driverFactories.d.ts +0 -12
- package/dist/extra/eventDriver.d.ts +0 -9
- package/dist/extra/exactState.d.ts +0 -1
- package/dist/extra/hmr.d.ts +0 -17
- package/dist/extra/logDriver.d.ts +0 -2
- package/dist/extra/processDrag.d.ts +0 -19
- package/dist/extra/processForm.d.ts +0 -15
- package/dist/extra/run.d.ts +0 -13
- package/dist/extra/xstreamCompat.d.ts +0 -5
- package/dist/jsx-dev-runtime.d.ts +0 -1
- package/dist/jsx-dev-runtime.js +0 -224
- package/dist/jsx-runtime.d.ts +0 -4
- package/dist/jsx-runtime.js +0 -224
- package/dist/jsx.d.ts +0 -2
- package/dist/pragma/fn.d.ts +0 -7
- package/dist/pragma/index.d.ts +0 -7
- package/dist/pragma/is.d.ts +0 -10
- package/dist/switchable.d.ts +0 -7
- package/dist/vike/+config.cjs.js +0 -65
- package/src/component.ts +0 -2256
- package/src/cycle/isolate/index.ts +0 -196
- package/src/cycle/run/index.ts +0 -151
- package/src/cycle/run/internals.ts +0 -143
- package/src/cycle/state/Collection.ts +0 -174
- package/src/cycle/state/index.ts +0 -5
- package/src/cycle/state/pickCombine.ts +0 -167
- package/src/cycle/state/pickMerge.ts +0 -122
- package/src/cycle/state/withState.ts +0 -47
- package/src/pragma/fn.ts +0 -55
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jsx.cjs.js","sources":["../src/cycle/dom/fragment.ts"],"sourcesContent":["import {Fragment as _Fragment} from 'snabbdom/build/jsx.js';\n\n// Tag Fragment so we can identify it even after minification mangles Function.name.\n// Its own module so the JSX runtime entries (which keep snabbdom external, D188) take it\n// without the rest of the snabbdom barrel\n(_Fragment as any).__sygnalFragment = true;\nexport const Fragment = _Fragment;\n"],"names":["_Fragment"],"mappings":";;;;;AAEA;AACA;AACA;AACCA,eAAiB,CAAC,gBAAgB,GAAG,IAAI,CAAC;AACpC,MAAM,QAAQ,GAAGA;;;;;;;;"}
|
package/dist/jsx.esm.js
CHANGED
|
@@ -1,312 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
export { createElement as jsx } from 'sygnal';
|
|
2
|
+
import { Fragment as Fragment$1 } from 'snabbdom/build/jsx.js';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
const object = (v) => typeof v === 'object' && v !== null;
|
|
9
|
-
const fun = (v) => typeof v === 'function';
|
|
10
|
-
const vnode$1 = (v) => object(v) && 'sel' in v && 'data' in v && 'children' in v && 'text' in v;
|
|
11
|
-
const svgPropsMap = {
|
|
12
|
-
// Container / structural
|
|
13
|
-
svg: 1, g: 1, defs: 1, symbol: 1, use: 1,
|
|
14
|
-
// Shape
|
|
15
|
-
circle: 1, ellipse: 1, line: 1, path: 1, polygon: 1, polyline: 1, rect: 1,
|
|
16
|
-
// Text (no HTML collision: HTML has no <text>, <tspan>, or <textPath>)
|
|
17
|
-
text: 1, tspan: 1, textPath: 1,
|
|
18
|
-
// Gradient / paint
|
|
19
|
-
linearGradient: 1, radialGradient: 1, stop: 1, pattern: 1,
|
|
20
|
-
// Clipping / masking
|
|
21
|
-
clipPath: 1, mask: 1,
|
|
22
|
-
// Marker
|
|
23
|
-
marker: 1,
|
|
24
|
-
// Filter primitives
|
|
25
|
-
filter: 1, feBlend: 1, feColorMatrix: 1, feComponentTransfer: 1,
|
|
26
|
-
feComposite: 1, feConvolveMatrix: 1, feDiffuseLighting: 1,
|
|
27
|
-
feDisplacementMap: 1, feDropShadow: 1, feFlood: 1, feGaussianBlur: 1,
|
|
28
|
-
feImage: 1, feMerge: 1, feMergeNode: 1, feMorphology: 1, feOffset: 1,
|
|
29
|
-
fePointLight: 1, feSpecularLighting: 1, feSpotLight: 1, feTile: 1,
|
|
30
|
-
feTurbulence: 1, feFuncR: 1, feFuncG: 1, feFuncB: 1, feFuncA: 1,
|
|
31
|
-
// Descriptive (excluding 'title' — collides with HTML <title>)
|
|
32
|
-
desc: 1, metadata: 1,
|
|
33
|
-
// Other (excluding 'a', 'image', 'style', 'script' — collide with HTML)
|
|
34
|
-
foreignObject: 1, switch: 1,
|
|
35
|
-
// Animation
|
|
36
|
-
animate: 1, animateMotion: 1, animateTransform: 1, set: 1, mpath: 1,
|
|
37
|
-
};
|
|
38
|
-
const svg = (v) => v.sel in svgPropsMap;
|
|
4
|
+
// Tag Fragment so we can identify it even after minification mangles Function.name.
|
|
5
|
+
// Its own module so the JSX runtime entries (which keep snabbdom external, D188) take it
|
|
6
|
+
// without the rest of the snabbdom barrel
|
|
7
|
+
Fragment$1.__sygnalFragment = true;
|
|
8
|
+
const Fragment = Fragment$1;
|
|
39
9
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
const extend = (...objs) => _extend(true, ...objs);
|
|
43
|
-
const assign = (...objs) => _extend(false, ...objs);
|
|
44
|
-
const reduceDeep = (arr, fn, initial) => {
|
|
45
|
-
let result = initial;
|
|
46
|
-
for (let i = 0; i < arr.length; i++) {
|
|
47
|
-
const value = arr[i];
|
|
48
|
-
if (array(value)) {
|
|
49
|
-
result = reduceDeep(value, fn, result);
|
|
50
|
-
}
|
|
51
|
-
else {
|
|
52
|
-
result = fn(result, value);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
return result;
|
|
56
|
-
};
|
|
57
|
-
const mapObject = (obj, fn) => Object.keys(obj).map((key) => fn(key, obj[key])).reduce((acc, curr) => extend(acc, curr), {});
|
|
58
|
-
const deepifyKeys = (obj, modules) => mapObject(obj, (key, val) => {
|
|
59
|
-
const dashIndex = key.indexOf('-');
|
|
60
|
-
if (dashIndex > -1 && modules[key.slice(0, dashIndex)] !== undefined) {
|
|
61
|
-
const moduleData = {
|
|
62
|
-
[key.slice(dashIndex + 1)]: val
|
|
63
|
-
};
|
|
64
|
-
return {
|
|
65
|
-
[key.slice(0, dashIndex)]: moduleData
|
|
66
|
-
};
|
|
67
|
-
}
|
|
68
|
-
return { [key]: val };
|
|
69
|
-
});
|
|
70
|
-
const omit = (key, obj) => mapObject(obj, (mod, data) => mod !== key ? ({ [mod]: data }) : {});
|
|
71
|
-
|
|
72
|
-
const createTextElement = (text$1) => !text(text$1) ? undefined : {
|
|
73
|
-
text: text$1,
|
|
74
|
-
sel: undefined,
|
|
75
|
-
data: undefined,
|
|
76
|
-
children: undefined,
|
|
77
|
-
elm: undefined,
|
|
78
|
-
key: undefined
|
|
79
|
-
};
|
|
80
|
-
const applySvg = (vnode) => {
|
|
81
|
-
// Skip text vnodes (sel is undefined) and nullish values
|
|
82
|
-
if (!vnode || undefinedv(vnode.sel))
|
|
83
|
-
return vnode;
|
|
84
|
-
const data = vnode.data || {};
|
|
85
|
-
const props = data.props || {};
|
|
86
|
-
const propsWithoutClassName = omit('className', props);
|
|
87
|
-
const classAttr = props.className !== undefined ? { class: props.className } : {};
|
|
88
|
-
const mergedAttrs = assign({}, propsWithoutClassName, classAttr, data.attrs || {});
|
|
89
|
-
return assign(vnode, { data: omit('props', assign({}, data, { ns: 'http://www.w3.org/2000/svg', attrs: mergedAttrs })) },
|
|
90
|
-
// foreignObject contains HTML, not SVG — do not recurse into its children
|
|
91
|
-
{ children: (!Array.isArray(vnode.children) || vnode.sel === 'foreignObject')
|
|
92
|
-
? vnode.children
|
|
93
|
-
: vnode.children.map((child) => applySvg(child))
|
|
94
|
-
});
|
|
95
|
-
};
|
|
96
|
-
const considerSvg = (vnode) => !svg(vnode) ? vnode : applySvg(vnode);
|
|
97
|
-
const rewrites = {
|
|
98
|
-
for: 'attrs',
|
|
99
|
-
role: 'attrs',
|
|
100
|
-
tabindex: 'attrs',
|
|
101
|
-
'aria-*': 'attrs',
|
|
102
|
-
key: null
|
|
103
|
-
};
|
|
104
|
-
const rewriteModules = (data, modules) => mapObject(data, (key, val) => {
|
|
105
|
-
const inner = { [key]: val };
|
|
106
|
-
if (rewrites[key] && modules[rewrites[key]] !== undefined) {
|
|
107
|
-
return { [rewrites[key]]: inner };
|
|
108
|
-
}
|
|
109
|
-
if (rewrites[key] === null) {
|
|
110
|
-
return {};
|
|
111
|
-
}
|
|
112
|
-
const keys = Object.keys(rewrites);
|
|
113
|
-
for (let i = 0; i < keys.length; i++) {
|
|
114
|
-
const k = keys[i];
|
|
115
|
-
if (k.charAt(k.length - 1) === '*' && key.indexOf(k.slice(0, -1)) === 0 && modules[rewrites[k]] !== undefined) {
|
|
116
|
-
return { [rewrites[k]]: inner };
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
if (modules[key] !== undefined) {
|
|
120
|
-
return { [modules[key] ? modules[key] : key]: val };
|
|
121
|
-
}
|
|
122
|
-
if (modules.props !== undefined) {
|
|
123
|
-
return { props: inner };
|
|
124
|
-
}
|
|
125
|
-
return inner;
|
|
126
|
-
});
|
|
127
|
-
const applyFocusProps = (data) => {
|
|
128
|
-
if (!data.props)
|
|
129
|
-
return data;
|
|
130
|
-
const { autoFocus, autoSelect, ...rest } = data.props;
|
|
131
|
-
if (!autoFocus && !autoSelect)
|
|
132
|
-
return data;
|
|
133
|
-
data.props = rest;
|
|
134
|
-
data._autoFocus = !!autoFocus;
|
|
135
|
-
data._autoSelect = !!autoSelect;
|
|
136
|
-
const doFocus = (elm) => {
|
|
137
|
-
if (elm && typeof elm.focus === 'function') {
|
|
138
|
-
requestAnimationFrame(() => {
|
|
139
|
-
elm.focus();
|
|
140
|
-
if (autoSelect && typeof elm.select === 'function') {
|
|
141
|
-
elm.select();
|
|
142
|
-
}
|
|
143
|
-
});
|
|
144
|
-
}
|
|
145
|
-
};
|
|
146
|
-
const existingInsert = data.hook?.insert;
|
|
147
|
-
const existingPostpatch = data.hook?.postpatch;
|
|
148
|
-
data.hook = {
|
|
149
|
-
...data.hook,
|
|
150
|
-
insert: (vnode) => {
|
|
151
|
-
if (existingInsert)
|
|
152
|
-
existingInsert(vnode);
|
|
153
|
-
if (autoFocus || autoSelect)
|
|
154
|
-
doFocus(vnode.elm);
|
|
155
|
-
},
|
|
156
|
-
postpatch: (oldVnode, vnode) => {
|
|
157
|
-
if (existingPostpatch)
|
|
158
|
-
existingPostpatch(oldVnode, vnode);
|
|
159
|
-
const wasFocused = oldVnode.data?._autoFocus;
|
|
160
|
-
const isFocused = vnode.data?._autoFocus;
|
|
161
|
-
if (!wasFocused && isFocused)
|
|
162
|
-
doFocus(vnode.elm);
|
|
163
|
-
},
|
|
164
|
-
};
|
|
165
|
-
return data;
|
|
166
|
-
};
|
|
167
|
-
const applyRefProps = (data, ref) => {
|
|
168
|
-
if (!ref)
|
|
169
|
-
return data;
|
|
170
|
-
const setRef = (elm) => {
|
|
171
|
-
if (typeof ref === 'function') {
|
|
172
|
-
ref(elm);
|
|
173
|
-
}
|
|
174
|
-
else if (ref && typeof ref === 'object' && 'current' in ref) {
|
|
175
|
-
ref.current = elm;
|
|
176
|
-
}
|
|
177
|
-
};
|
|
178
|
-
const existingInsert = data.hook?.insert;
|
|
179
|
-
const existingDestroy = data.hook?.destroy;
|
|
180
|
-
const existingPostpatch = data.hook?.postpatch;
|
|
181
|
-
data.hook = {
|
|
182
|
-
...data.hook,
|
|
183
|
-
insert: (vnode) => {
|
|
184
|
-
if (existingInsert)
|
|
185
|
-
existingInsert(vnode);
|
|
186
|
-
setRef(vnode.elm);
|
|
187
|
-
},
|
|
188
|
-
postpatch: (_oldVnode, vnode) => {
|
|
189
|
-
if (existingPostpatch)
|
|
190
|
-
existingPostpatch(_oldVnode, vnode);
|
|
191
|
-
setRef(vnode.elm);
|
|
192
|
-
},
|
|
193
|
-
destroy: (vnode) => {
|
|
194
|
-
if (existingDestroy)
|
|
195
|
-
existingDestroy(vnode);
|
|
196
|
-
setRef(null);
|
|
197
|
-
},
|
|
198
|
-
};
|
|
199
|
-
return data;
|
|
200
|
-
};
|
|
201
|
-
const sanitizeData = (data, modules) => {
|
|
202
|
-
const { ref, ...rest } = data;
|
|
203
|
-
const sanitized = applyFocusProps(rewriteModules(deepifyKeys(rest, modules), modules));
|
|
204
|
-
return applyRefProps(sanitized, ref);
|
|
205
|
-
};
|
|
206
|
-
const sanitizeText = (children) => children.length > 1 || !text(children[0]) ? undefined : children[0].toString();
|
|
207
|
-
const sanitizeChildren = (children) => reduceDeep(children, (acc, child) => {
|
|
208
|
-
const vnode = vnode$1(child) ? child : createTextElement(child);
|
|
209
|
-
acc.push(vnode);
|
|
210
|
-
return acc;
|
|
211
|
-
}, []);
|
|
212
|
-
const defaultModules = {
|
|
213
|
-
attrs: '',
|
|
214
|
-
props: '',
|
|
215
|
-
class: '',
|
|
216
|
-
data: 'dataset',
|
|
217
|
-
style: '',
|
|
218
|
-
hook: '',
|
|
219
|
-
on: ''
|
|
220
|
-
};
|
|
221
|
-
const createElementWithModules = (modules) => {
|
|
222
|
-
return (sel, data, ...children) => {
|
|
223
|
-
if (typeof sel === 'undefined') {
|
|
224
|
-
sel = 'UNDEFINED';
|
|
225
|
-
console.error('JSX Error: Capitalized HTML element without corresponding factory function. Components with names where the first letter is capital MUST be defined or included at the parent component\'s file scope.');
|
|
226
|
-
}
|
|
227
|
-
if (fun(sel)) {
|
|
228
|
-
if (sel.__sygnalFragment || sel.name === 'Fragment') {
|
|
229
|
-
return sel(data || {}, children);
|
|
230
|
-
}
|
|
231
|
-
data || (data = {});
|
|
232
|
-
if (!sel.isSygnalComponent) {
|
|
233
|
-
const name = sel.componentName || sel.label || sel.name || 'FUNCTION_COMPONENT';
|
|
234
|
-
const view = sel;
|
|
235
|
-
const { model, intent, hmrActions, context, peers, components, initialState, isolatedState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, onError, debug, preventInstantiation } = sel;
|
|
236
|
-
if (preventInstantiation) {
|
|
237
|
-
const text = sanitizeText(children);
|
|
238
|
-
const sanitized = data ? sanitizeData(data, modules) : {};
|
|
239
|
-
return considerSvg({
|
|
240
|
-
sel: name,
|
|
241
|
-
data: sanitized,
|
|
242
|
-
children: typeof text !== 'undefined' ? createTextElement(text) : sanitizeChildren(children),
|
|
243
|
-
text,
|
|
244
|
-
elm: undefined,
|
|
245
|
-
key: data ? data.key : undefined
|
|
246
|
-
});
|
|
247
|
-
}
|
|
248
|
-
const options = { name, view, model, intent, hmrActions, context, peers, components, initialState, isolatedState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, onError, debug };
|
|
249
|
-
data.sygnalOptions = options;
|
|
250
|
-
sel = name;
|
|
251
|
-
}
|
|
252
|
-
else {
|
|
253
|
-
const factory = sel;
|
|
254
|
-
sel = sel.componentName || sel.label || sel.name || 'sygnal-factory';
|
|
255
|
-
data.sygnalFactory = factory;
|
|
256
|
-
}
|
|
257
|
-
}
|
|
258
|
-
const text = sanitizeText(children);
|
|
259
|
-
return considerSvg({
|
|
260
|
-
sel,
|
|
261
|
-
data: data ? sanitizeData(data, modules) : {},
|
|
262
|
-
children: typeof text !== 'undefined' ? createTextElement(text) : sanitizeChildren(children),
|
|
263
|
-
text,
|
|
264
|
-
elm: undefined,
|
|
265
|
-
key: data ? data.key : undefined
|
|
266
|
-
});
|
|
267
|
-
};
|
|
268
|
-
};
|
|
269
|
-
const createElement = createElementWithModules(defaultModules);
|
|
270
|
-
|
|
271
|
-
function vnode(sel, data, children, text, elm) {
|
|
272
|
-
const key = data === undefined ? undefined : data.key;
|
|
273
|
-
return { sel, data, children, text, elm, key };
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
/* eslint-disable @typescript-eslint/no-namespace, import/export */
|
|
277
|
-
function Fragment(data, ...children) {
|
|
278
|
-
const flatChildren = flattenAndFilter(children, []);
|
|
279
|
-
if (flatChildren.length === 1 &&
|
|
280
|
-
!flatChildren[0].sel &&
|
|
281
|
-
flatChildren[0].text) {
|
|
282
|
-
// only child is a simple text node, pass as text for a simpler vtree
|
|
283
|
-
return vnode(undefined, undefined, undefined, flatChildren[0].text, undefined);
|
|
284
|
-
}
|
|
285
|
-
else {
|
|
286
|
-
return vnode(undefined, data !== null && data !== void 0 ? data : {}, flatChildren, undefined, undefined);
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
function flattenAndFilter(children, flattened) {
|
|
290
|
-
for (const child of children) {
|
|
291
|
-
// filter out falsey children, except 0 since zero can be a valid value e.g inside a chart
|
|
292
|
-
if (child !== undefined &&
|
|
293
|
-
child !== null &&
|
|
294
|
-
child !== false &&
|
|
295
|
-
child !== "") {
|
|
296
|
-
if (Array.isArray(child)) {
|
|
297
|
-
flattenAndFilter(child, flattened);
|
|
298
|
-
}
|
|
299
|
-
else if (typeof child === "string" ||
|
|
300
|
-
typeof child === "number" ||
|
|
301
|
-
typeof child === "boolean") {
|
|
302
|
-
flattened.push(vnode(undefined, undefined, undefined, String(child), undefined));
|
|
303
|
-
}
|
|
304
|
-
else {
|
|
305
|
-
flattened.push(child);
|
|
306
|
-
}
|
|
307
|
-
}
|
|
308
|
-
}
|
|
309
|
-
return flattened;
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
export { Fragment, createElement as jsx };
|
|
10
|
+
export { Fragment };
|
|
11
|
+
//# sourceMappingURL=jsx.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jsx.esm.js","sources":["../src/cycle/dom/fragment.ts"],"sourcesContent":["import {Fragment as _Fragment} from 'snabbdom/build/jsx.js';\n\n// Tag Fragment so we can identify it even after minification mangles Function.name.\n// Its own module so the JSX runtime entries (which keep snabbdom external, D188) take it\n// without the rest of the snabbdom barrel\n(_Fragment as any).__sygnalFragment = true;\nexport const Fragment = _Fragment;\n"],"names":["_Fragment"],"mappings":";;;AAEA;AACA;AACA;AACCA,UAAiB,CAAC,gBAAgB,GAAG,IAAI,CAAC;AACpC,MAAM,QAAQ,GAAGA;;;;"}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var react = require('react');
|
|
4
|
+
var reactDom = require('react-dom');
|
|
5
|
+
var client = require('react-dom/client');
|
|
6
|
+
var sygnal = require('sygnal');
|
|
7
|
+
|
|
8
|
+
/*
|
|
9
|
+
* 'sygnal/react' (PLAN-5 W-2, D203): `fromReact(Component, { events })`, a React component as a
|
|
10
|
+
* widget tag (defineWidget). An escape hatch for the one component you can't replace: context
|
|
11
|
+
* and providers don't cross the boundary, a React portal renders outside the host, and the mock
|
|
12
|
+
* DOM can't run it (test with `dom: 'real'`).
|
|
13
|
+
*
|
|
14
|
+
* const Stars = fromReact(StarRating, { events: { rate: 'onChange' } })
|
|
15
|
+
* // view: <Stars className="rating" value={state.rating} max={5} />
|
|
16
|
+
* // intent: RATE: DOM.select('.rating').events('rate').detail()
|
|
17
|
+
*
|
|
18
|
+
* - Each host is a React root (react-dom/client createRoot). `mount` and `update` render the
|
|
19
|
+
* component with the newest props in flushSync, so the DOM is up to date when they return.
|
|
20
|
+
* - `events`: `{ eventName: 'onCallback' }`, or an array of callback names, each dispatched under
|
|
21
|
+
* its own name (`['onChange']` → 'onChange'; React's names never collide with native events).
|
|
22
|
+
* The detail is the callback's argument (an array when it gets more than one). The component
|
|
23
|
+
* gets a callback for each, and a callback passed as a prop runs first.
|
|
24
|
+
* - Props (D215): `className`, `class`, `id`, `style`, `attrs`, `tabIndex` and `hidden` go to the
|
|
25
|
+
* host only (one tab stop); `aria-*`, `role` and `title` to the component only (a labelled
|
|
26
|
+
* React control gets its own name; the host div is generic); `data-*` to both; the rest to the
|
|
27
|
+
* component (`name`, `placeholder`, `lang`, `dir` also to the host, as for any widget).
|
|
28
|
+
* `ownProps: ['tabIndex']` sends a host prop to the component instead; `hostProps: ['role']`
|
|
29
|
+
* puts a component-only one on the host too. `props` maps the component's props:
|
|
30
|
+
* `props: (p) => ({ ...p, size: 'small' })`.
|
|
31
|
+
* - Unmount: `root.unmount()` in a microtask (React refuses a synchronous unmount while it is
|
|
32
|
+
* rendering, which a callback → action → re-render chain can be in), and only once the host
|
|
33
|
+
* has left the document (G-412: inside a <Transition>, the content stays during the leave),
|
|
34
|
+
* seen in shadow roots too (G-437); a destroyed host still in the DOM after 10 s unmounts then.
|
|
35
|
+
* - SSR: the host with the `fallback` (no React on the server here).
|
|
36
|
+
* - preact/compat: alias `react` and `react-dom` to `preact/compat`, and `react-dom/client` to
|
|
37
|
+
* `preact/compat/client`, in the bundler; the adapter only uses createElement, createRoot and
|
|
38
|
+
* flushSync.
|
|
39
|
+
*
|
|
40
|
+
* Separate entry: './index' becomes the external 'sygnal'; react and react-dom stay external
|
|
41
|
+
* (optional peerDependencies, D209).
|
|
42
|
+
*/
|
|
43
|
+
// D215: the host's own props (the component doesn't get them): tabIndex / hidden too, so a
|
|
44
|
+
// focusable host isn't doubled inside (two tab stops)
|
|
45
|
+
const HOST = /^(className|class|id|style|attrs|tab[iI]ndex|hidden)$/;
|
|
46
|
+
// D215 (G-436): the component's own (kept off the host): a React control names itself
|
|
47
|
+
const OWN = /^(aria-|role$|title$)/;
|
|
48
|
+
const fail = (m) => {
|
|
49
|
+
throw new Error(`[Sygnal SYG667] ${m}. https://sygnal.js.org/reference/errors#syg667`);
|
|
50
|
+
};
|
|
51
|
+
// G-412: run f once the host has left the document. A host still in it is leaving with a delay
|
|
52
|
+
// (a <Transition> leave animation): its React content stays until the element is removed.
|
|
53
|
+
// G-437: the removal can happen inside a shadow root (sygnal/element `shadow: true`), which a
|
|
54
|
+
// document observer doesn't see: every root on the way up (shadow roots, then the document) is
|
|
55
|
+
// observed. A destroyed host that stays in the DOM (a leave whose transitionend never comes, a
|
|
56
|
+
// tree left in place) is unmounted after LATE ms anyway, so no React root or observer leaks.
|
|
57
|
+
const LATE = 10000;
|
|
58
|
+
const gone = (el, f) => {
|
|
59
|
+
if (!el.isConnected)
|
|
60
|
+
return f();
|
|
61
|
+
let t;
|
|
62
|
+
const done = () => { o.disconnect(); clearTimeout(t); f(); };
|
|
63
|
+
const o = new MutationObserver(() => { if (!el.isConnected)
|
|
64
|
+
done(); });
|
|
65
|
+
for (let r = el.getRootNode(); r; r = r.host?.getRootNode())
|
|
66
|
+
o.observe(r, { childList: true, subtree: true });
|
|
67
|
+
t = setTimeout(done, LATE);
|
|
68
|
+
};
|
|
69
|
+
/**
|
|
70
|
+
* A React component as a widget tag: `fromReact(Comp, { events, props, tag, name, fallback,
|
|
71
|
+
* hostProps, commands })`. `commands` are called with the instance `{ root, el, props }`.
|
|
72
|
+
*/
|
|
73
|
+
function fromReact(Comp, options = {}) {
|
|
74
|
+
if (typeof Comp != 'function' && !(Comp && typeof Comp == 'object' && Comp.$$typeof)) {
|
|
75
|
+
fail('fromReact(Component): the first argument is not a React component');
|
|
76
|
+
}
|
|
77
|
+
const o = options, ev = o.events || {};
|
|
78
|
+
// event name → callback prop name
|
|
79
|
+
const events = Array.isArray(ev) ? Object.fromEntries(ev.map((c) => [c, c])) : ev;
|
|
80
|
+
const draw = (i, p) => {
|
|
81
|
+
const q = {};
|
|
82
|
+
for (const k in p)
|
|
83
|
+
if (!HOST.test(k) || o.ownProps?.includes(k))
|
|
84
|
+
q[k] = p[k];
|
|
85
|
+
const rp = o.props ? o.props(q) : q;
|
|
86
|
+
for (const name in events) {
|
|
87
|
+
const cb = events[name], own = rp[cb];
|
|
88
|
+
rp[cb] = (...a) => {
|
|
89
|
+
own?.(...a);
|
|
90
|
+
i.d(name, a.length > 1 ? a : a[0]);
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
i.props = rp;
|
|
94
|
+
reactDom.flushSync(() => i.root.render(react.createElement(Comp, rp)));
|
|
95
|
+
};
|
|
96
|
+
return sygnal.defineWidget({
|
|
97
|
+
tag: o.tag,
|
|
98
|
+
name: o.name || Comp.displayName || Comp.name,
|
|
99
|
+
fallback: o.fallback,
|
|
100
|
+
hostProps: o.hostProps,
|
|
101
|
+
// D215: aria-* / role / title stay off the host unless hostProps names one (the list is the
|
|
102
|
+
// option's; its includes() also matches those patterns, which is all defineWidget asks of it)
|
|
103
|
+
ownProps: Object.assign([...(o.ownProps || [])], { includes: (k) => !!o.ownProps?.includes(k) || OWN.test(k) && !o.hostProps?.includes(k) }),
|
|
104
|
+
events: Object.keys(events),
|
|
105
|
+
commands: o.commands,
|
|
106
|
+
mount: (el, p, d) => {
|
|
107
|
+
const i = { root: client.createRoot(el), el, d, props: null };
|
|
108
|
+
draw(i, p);
|
|
109
|
+
return i;
|
|
110
|
+
},
|
|
111
|
+
update: draw,
|
|
112
|
+
unmount: (i) => { queueMicrotask(() => gone(i.el, () => i.root.unmount())); },
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
exports.fromReact = fromReact;
|
|
117
|
+
//# sourceMappingURL=react.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"react.cjs.js","sources":["../src/react.ts"],"sourcesContent":["/*\n * 'sygnal/react' (PLAN-5 W-2, D203): `fromReact(Component, { events })`, a React component as a\n * widget tag (defineWidget). An escape hatch for the one component you can't replace: context\n * and providers don't cross the boundary, a React portal renders outside the host, and the mock\n * DOM can't run it (test with `dom: 'real'`).\n *\n * const Stars = fromReact(StarRating, { events: { rate: 'onChange' } })\n * // view: <Stars className=\"rating\" value={state.rating} max={5} />\n * // intent: RATE: DOM.select('.rating').events('rate').detail()\n *\n * - Each host is a React root (react-dom/client createRoot). `mount` and `update` render the\n * component with the newest props in flushSync, so the DOM is up to date when they return.\n * - `events`: `{ eventName: 'onCallback' }`, or an array of callback names, each dispatched under\n * its own name (`['onChange']` → 'onChange'; React's names never collide with native events).\n * The detail is the callback's argument (an array when it gets more than one). The component\n * gets a callback for each, and a callback passed as a prop runs first.\n * - Props (D215): `className`, `class`, `id`, `style`, `attrs`, `tabIndex` and `hidden` go to the\n * host only (one tab stop); `aria-*`, `role` and `title` to the component only (a labelled\n * React control gets its own name; the host div is generic); `data-*` to both; the rest to the\n * component (`name`, `placeholder`, `lang`, `dir` also to the host, as for any widget).\n * `ownProps: ['tabIndex']` sends a host prop to the component instead; `hostProps: ['role']`\n * puts a component-only one on the host too. `props` maps the component's props:\n * `props: (p) => ({ ...p, size: 'small' })`.\n * - Unmount: `root.unmount()` in a microtask (React refuses a synchronous unmount while it is\n * rendering, which a callback → action → re-render chain can be in), and only once the host\n * has left the document (G-412: inside a <Transition>, the content stays during the leave),\n * seen in shadow roots too (G-437); a destroyed host still in the DOM after 10 s unmounts then.\n * - SSR: the host with the `fallback` (no React on the server here).\n * - preact/compat: alias `react` and `react-dom` to `preact/compat`, and `react-dom/client` to\n * `preact/compat/client`, in the bundler; the adapter only uses createElement, createRoot and\n * flushSync.\n *\n * Separate entry: './index' becomes the external 'sygnal'; react and react-dom stay external\n * (optional peerDependencies, D209).\n */\nimport {createElement} from 'react'\nimport {flushSync} from 'react-dom'\nimport {createRoot} from 'react-dom/client'\nimport {defineWidget} from './index'\n\n// D215: the host's own props (the component doesn't get them): tabIndex / hidden too, so a\n// focusable host isn't doubled inside (two tab stops)\nconst HOST = /^(className|class|id|style|attrs|tab[iI]ndex|hidden)$/\n// D215 (G-436): the component's own (kept off the host): a React control names itself\nconst OWN = /^(aria-|role$|title$)/\n\nconst fail = (m: string): never => {\n throw new Error(`[Sygnal SYG667] ${m}. https://sygnal.js.org/reference/errors#syg667`)\n}\n\n// G-412: run f once the host has left the document. A host still in it is leaving with a delay\n// (a <Transition> leave animation): its React content stays until the element is removed.\n// G-437: the removal can happen inside a shadow root (sygnal/element `shadow: true`), which a\n// document observer doesn't see: every root on the way up (shadow roots, then the document) is\n// observed. A destroyed host that stays in the DOM (a leave whose transitionend never comes, a\n// tree left in place) is unmounted after LATE ms anyway, so no React root or observer leaks.\nconst LATE = 10000\nconst gone = (el: any, f: () => void) => {\n if (!el.isConnected) return f()\n let t: any\n const done = () => { o.disconnect(); clearTimeout(t); f() }\n const o: MutationObserver = new MutationObserver(() => { if (!el.isConnected) done() })\n for (let r = el.getRootNode(); r; r = r.host?.getRootNode()) o.observe(r, {childList: true, subtree: true})\n t = setTimeout(done, LATE)\n}\n\n/**\n * A React component as a widget tag: `fromReact(Comp, { events, props, tag, name, fallback,\n * hostProps, commands })`. `commands` are called with the instance `{ root, el, props }`.\n */\nexport function fromReact(Comp: any, options: any = {}): any {\n if (typeof Comp != 'function' && !(Comp && typeof Comp == 'object' && Comp.$$typeof)) {\n fail('fromReact(Component): the first argument is not a React component')\n }\n const o = options, ev = o.events || {}\n // event name → callback prop name\n const events: Record<string, string> = Array.isArray(ev) ? Object.fromEntries(ev.map((c: string) => [c, c])) : ev\n const draw = (i: any, p: any) => {\n const q: any = {}\n for (const k in p) if (!HOST.test(k) || o.ownProps?.includes(k)) q[k] = p[k]\n const rp = o.props ? o.props(q) : q\n for (const name in events) {\n const cb = events[name], own = rp[cb]\n rp[cb] = (...a: any[]) => {\n own?.(...a)\n i.d(name, a.length > 1 ? a : a[0])\n }\n }\n i.props = rp\n flushSync(() => i.root.render(createElement(Comp, rp)))\n }\n return defineWidget({\n tag: o.tag,\n name: o.name || Comp.displayName || Comp.name,\n fallback: o.fallback,\n hostProps: o.hostProps,\n // D215: aria-* / role / title stay off the host unless hostProps names one (the list is the\n // option's; its includes() also matches those patterns, which is all defineWidget asks of it)\n ownProps: Object.assign([...(o.ownProps || [])], {includes: (k: string) => !!o.ownProps?.includes(k) || OWN.test(k) && !o.hostProps?.includes(k)}),\n events: Object.keys(events),\n commands: o.commands,\n mount: (el: any, p: any, d: any) => {\n const i = {root: createRoot(el), el, d, props: null}\n draw(i, p)\n return i\n },\n update: draw,\n unmount: (i: any) => { queueMicrotask(() => gone(i.el, () => i.root.unmount())) },\n })\n}\n"],"names":["flushSync","createElement","defineWidget","createRoot"],"mappings":"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"}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { createElement } from 'react';
|
|
2
|
+
import { flushSync } from 'react-dom';
|
|
3
|
+
import { createRoot } from 'react-dom/client';
|
|
4
|
+
import { defineWidget } from 'sygnal';
|
|
5
|
+
|
|
6
|
+
/*
|
|
7
|
+
* 'sygnal/react' (PLAN-5 W-2, D203): `fromReact(Component, { events })`, a React component as a
|
|
8
|
+
* widget tag (defineWidget). An escape hatch for the one component you can't replace: context
|
|
9
|
+
* and providers don't cross the boundary, a React portal renders outside the host, and the mock
|
|
10
|
+
* DOM can't run it (test with `dom: 'real'`).
|
|
11
|
+
*
|
|
12
|
+
* const Stars = fromReact(StarRating, { events: { rate: 'onChange' } })
|
|
13
|
+
* // view: <Stars className="rating" value={state.rating} max={5} />
|
|
14
|
+
* // intent: RATE: DOM.select('.rating').events('rate').detail()
|
|
15
|
+
*
|
|
16
|
+
* - Each host is a React root (react-dom/client createRoot). `mount` and `update` render the
|
|
17
|
+
* component with the newest props in flushSync, so the DOM is up to date when they return.
|
|
18
|
+
* - `events`: `{ eventName: 'onCallback' }`, or an array of callback names, each dispatched under
|
|
19
|
+
* its own name (`['onChange']` → 'onChange'; React's names never collide with native events).
|
|
20
|
+
* The detail is the callback's argument (an array when it gets more than one). The component
|
|
21
|
+
* gets a callback for each, and a callback passed as a prop runs first.
|
|
22
|
+
* - Props (D215): `className`, `class`, `id`, `style`, `attrs`, `tabIndex` and `hidden` go to the
|
|
23
|
+
* host only (one tab stop); `aria-*`, `role` and `title` to the component only (a labelled
|
|
24
|
+
* React control gets its own name; the host div is generic); `data-*` to both; the rest to the
|
|
25
|
+
* component (`name`, `placeholder`, `lang`, `dir` also to the host, as for any widget).
|
|
26
|
+
* `ownProps: ['tabIndex']` sends a host prop to the component instead; `hostProps: ['role']`
|
|
27
|
+
* puts a component-only one on the host too. `props` maps the component's props:
|
|
28
|
+
* `props: (p) => ({ ...p, size: 'small' })`.
|
|
29
|
+
* - Unmount: `root.unmount()` in a microtask (React refuses a synchronous unmount while it is
|
|
30
|
+
* rendering, which a callback → action → re-render chain can be in), and only once the host
|
|
31
|
+
* has left the document (G-412: inside a <Transition>, the content stays during the leave),
|
|
32
|
+
* seen in shadow roots too (G-437); a destroyed host still in the DOM after 10 s unmounts then.
|
|
33
|
+
* - SSR: the host with the `fallback` (no React on the server here).
|
|
34
|
+
* - preact/compat: alias `react` and `react-dom` to `preact/compat`, and `react-dom/client` to
|
|
35
|
+
* `preact/compat/client`, in the bundler; the adapter only uses createElement, createRoot and
|
|
36
|
+
* flushSync.
|
|
37
|
+
*
|
|
38
|
+
* Separate entry: './index' becomes the external 'sygnal'; react and react-dom stay external
|
|
39
|
+
* (optional peerDependencies, D209).
|
|
40
|
+
*/
|
|
41
|
+
// D215: the host's own props (the component doesn't get them): tabIndex / hidden too, so a
|
|
42
|
+
// focusable host isn't doubled inside (two tab stops)
|
|
43
|
+
const HOST = /^(className|class|id|style|attrs|tab[iI]ndex|hidden)$/;
|
|
44
|
+
// D215 (G-436): the component's own (kept off the host): a React control names itself
|
|
45
|
+
const OWN = /^(aria-|role$|title$)/;
|
|
46
|
+
const fail = (m) => {
|
|
47
|
+
throw new Error(`[Sygnal SYG667] ${m}. https://sygnal.js.org/reference/errors#syg667`);
|
|
48
|
+
};
|
|
49
|
+
// G-412: run f once the host has left the document. A host still in it is leaving with a delay
|
|
50
|
+
// (a <Transition> leave animation): its React content stays until the element is removed.
|
|
51
|
+
// G-437: the removal can happen inside a shadow root (sygnal/element `shadow: true`), which a
|
|
52
|
+
// document observer doesn't see: every root on the way up (shadow roots, then the document) is
|
|
53
|
+
// observed. A destroyed host that stays in the DOM (a leave whose transitionend never comes, a
|
|
54
|
+
// tree left in place) is unmounted after LATE ms anyway, so no React root or observer leaks.
|
|
55
|
+
const LATE = 10000;
|
|
56
|
+
const gone = (el, f) => {
|
|
57
|
+
if (!el.isConnected)
|
|
58
|
+
return f();
|
|
59
|
+
let t;
|
|
60
|
+
const done = () => { o.disconnect(); clearTimeout(t); f(); };
|
|
61
|
+
const o = new MutationObserver(() => { if (!el.isConnected)
|
|
62
|
+
done(); });
|
|
63
|
+
for (let r = el.getRootNode(); r; r = r.host?.getRootNode())
|
|
64
|
+
o.observe(r, { childList: true, subtree: true });
|
|
65
|
+
t = setTimeout(done, LATE);
|
|
66
|
+
};
|
|
67
|
+
/**
|
|
68
|
+
* A React component as a widget tag: `fromReact(Comp, { events, props, tag, name, fallback,
|
|
69
|
+
* hostProps, commands })`. `commands` are called with the instance `{ root, el, props }`.
|
|
70
|
+
*/
|
|
71
|
+
function fromReact(Comp, options = {}) {
|
|
72
|
+
if (typeof Comp != 'function' && !(Comp && typeof Comp == 'object' && Comp.$$typeof)) {
|
|
73
|
+
fail('fromReact(Component): the first argument is not a React component');
|
|
74
|
+
}
|
|
75
|
+
const o = options, ev = o.events || {};
|
|
76
|
+
// event name → callback prop name
|
|
77
|
+
const events = Array.isArray(ev) ? Object.fromEntries(ev.map((c) => [c, c])) : ev;
|
|
78
|
+
const draw = (i, p) => {
|
|
79
|
+
const q = {};
|
|
80
|
+
for (const k in p)
|
|
81
|
+
if (!HOST.test(k) || o.ownProps?.includes(k))
|
|
82
|
+
q[k] = p[k];
|
|
83
|
+
const rp = o.props ? o.props(q) : q;
|
|
84
|
+
for (const name in events) {
|
|
85
|
+
const cb = events[name], own = rp[cb];
|
|
86
|
+
rp[cb] = (...a) => {
|
|
87
|
+
own?.(...a);
|
|
88
|
+
i.d(name, a.length > 1 ? a : a[0]);
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
i.props = rp;
|
|
92
|
+
flushSync(() => i.root.render(createElement(Comp, rp)));
|
|
93
|
+
};
|
|
94
|
+
return defineWidget({
|
|
95
|
+
tag: o.tag,
|
|
96
|
+
name: o.name || Comp.displayName || Comp.name,
|
|
97
|
+
fallback: o.fallback,
|
|
98
|
+
hostProps: o.hostProps,
|
|
99
|
+
// D215: aria-* / role / title stay off the host unless hostProps names one (the list is the
|
|
100
|
+
// option's; its includes() also matches those patterns, which is all defineWidget asks of it)
|
|
101
|
+
ownProps: Object.assign([...(o.ownProps || [])], { includes: (k) => !!o.ownProps?.includes(k) || OWN.test(k) && !o.hostProps?.includes(k) }),
|
|
102
|
+
events: Object.keys(events),
|
|
103
|
+
commands: o.commands,
|
|
104
|
+
mount: (el, p, d) => {
|
|
105
|
+
const i = { root: createRoot(el), el, d, props: null };
|
|
106
|
+
draw(i, p);
|
|
107
|
+
return i;
|
|
108
|
+
},
|
|
109
|
+
update: draw,
|
|
110
|
+
unmount: (i) => { queueMicrotask(() => gone(i.el, () => i.root.unmount())); },
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
export { fromReact };
|
|
115
|
+
//# sourceMappingURL=react.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"react.esm.js","sources":["../src/react.ts"],"sourcesContent":["/*\n * 'sygnal/react' (PLAN-5 W-2, D203): `fromReact(Component, { events })`, a React component as a\n * widget tag (defineWidget). An escape hatch for the one component you can't replace: context\n * and providers don't cross the boundary, a React portal renders outside the host, and the mock\n * DOM can't run it (test with `dom: 'real'`).\n *\n * const Stars = fromReact(StarRating, { events: { rate: 'onChange' } })\n * // view: <Stars className=\"rating\" value={state.rating} max={5} />\n * // intent: RATE: DOM.select('.rating').events('rate').detail()\n *\n * - Each host is a React root (react-dom/client createRoot). `mount` and `update` render the\n * component with the newest props in flushSync, so the DOM is up to date when they return.\n * - `events`: `{ eventName: 'onCallback' }`, or an array of callback names, each dispatched under\n * its own name (`['onChange']` → 'onChange'; React's names never collide with native events).\n * The detail is the callback's argument (an array when it gets more than one). The component\n * gets a callback for each, and a callback passed as a prop runs first.\n * - Props (D215): `className`, `class`, `id`, `style`, `attrs`, `tabIndex` and `hidden` go to the\n * host only (one tab stop); `aria-*`, `role` and `title` to the component only (a labelled\n * React control gets its own name; the host div is generic); `data-*` to both; the rest to the\n * component (`name`, `placeholder`, `lang`, `dir` also to the host, as for any widget).\n * `ownProps: ['tabIndex']` sends a host prop to the component instead; `hostProps: ['role']`\n * puts a component-only one on the host too. `props` maps the component's props:\n * `props: (p) => ({ ...p, size: 'small' })`.\n * - Unmount: `root.unmount()` in a microtask (React refuses a synchronous unmount while it is\n * rendering, which a callback → action → re-render chain can be in), and only once the host\n * has left the document (G-412: inside a <Transition>, the content stays during the leave),\n * seen in shadow roots too (G-437); a destroyed host still in the DOM after 10 s unmounts then.\n * - SSR: the host with the `fallback` (no React on the server here).\n * - preact/compat: alias `react` and `react-dom` to `preact/compat`, and `react-dom/client` to\n * `preact/compat/client`, in the bundler; the adapter only uses createElement, createRoot and\n * flushSync.\n *\n * Separate entry: './index' becomes the external 'sygnal'; react and react-dom stay external\n * (optional peerDependencies, D209).\n */\nimport {createElement} from 'react'\nimport {flushSync} from 'react-dom'\nimport {createRoot} from 'react-dom/client'\nimport {defineWidget} from './index'\n\n// D215: the host's own props (the component doesn't get them): tabIndex / hidden too, so a\n// focusable host isn't doubled inside (two tab stops)\nconst HOST = /^(className|class|id|style|attrs|tab[iI]ndex|hidden)$/\n// D215 (G-436): the component's own (kept off the host): a React control names itself\nconst OWN = /^(aria-|role$|title$)/\n\nconst fail = (m: string): never => {\n throw new Error(`[Sygnal SYG667] ${m}. https://sygnal.js.org/reference/errors#syg667`)\n}\n\n// G-412: run f once the host has left the document. A host still in it is leaving with a delay\n// (a <Transition> leave animation): its React content stays until the element is removed.\n// G-437: the removal can happen inside a shadow root (sygnal/element `shadow: true`), which a\n// document observer doesn't see: every root on the way up (shadow roots, then the document) is\n// observed. A destroyed host that stays in the DOM (a leave whose transitionend never comes, a\n// tree left in place) is unmounted after LATE ms anyway, so no React root or observer leaks.\nconst LATE = 10000\nconst gone = (el: any, f: () => void) => {\n if (!el.isConnected) return f()\n let t: any\n const done = () => { o.disconnect(); clearTimeout(t); f() }\n const o: MutationObserver = new MutationObserver(() => { if (!el.isConnected) done() })\n for (let r = el.getRootNode(); r; r = r.host?.getRootNode()) o.observe(r, {childList: true, subtree: true})\n t = setTimeout(done, LATE)\n}\n\n/**\n * A React component as a widget tag: `fromReact(Comp, { events, props, tag, name, fallback,\n * hostProps, commands })`. `commands` are called with the instance `{ root, el, props }`.\n */\nexport function fromReact(Comp: any, options: any = {}): any {\n if (typeof Comp != 'function' && !(Comp && typeof Comp == 'object' && Comp.$$typeof)) {\n fail('fromReact(Component): the first argument is not a React component')\n }\n const o = options, ev = o.events || {}\n // event name → callback prop name\n const events: Record<string, string> = Array.isArray(ev) ? Object.fromEntries(ev.map((c: string) => [c, c])) : ev\n const draw = (i: any, p: any) => {\n const q: any = {}\n for (const k in p) if (!HOST.test(k) || o.ownProps?.includes(k)) q[k] = p[k]\n const rp = o.props ? o.props(q) : q\n for (const name in events) {\n const cb = events[name], own = rp[cb]\n rp[cb] = (...a: any[]) => {\n own?.(...a)\n i.d(name, a.length > 1 ? a : a[0])\n }\n }\n i.props = rp\n flushSync(() => i.root.render(createElement(Comp, rp)))\n }\n return defineWidget({\n tag: o.tag,\n name: o.name || Comp.displayName || Comp.name,\n fallback: o.fallback,\n hostProps: o.hostProps,\n // D215: aria-* / role / title stay off the host unless hostProps names one (the list is the\n // option's; its includes() also matches those patterns, which is all defineWidget asks of it)\n ownProps: Object.assign([...(o.ownProps || [])], {includes: (k: string) => !!o.ownProps?.includes(k) || OWN.test(k) && !o.hostProps?.includes(k)}),\n events: Object.keys(events),\n commands: o.commands,\n mount: (el: any, p: any, d: any) => {\n const i = {root: createRoot(el), el, d, props: null}\n draw(i, p)\n return i\n },\n update: draw,\n unmount: (i: any) => { queueMicrotask(() => gone(i.el, () => i.root.unmount())) },\n })\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Stand-in for the `globalthis` npm package (built to dist/shims/globalthis.cjs).
|
|
5
|
+
*
|
|
6
|
+
* xstream does `require('globalthis').getPolyfill()`, which pulls a polyfill
|
|
7
|
+
* chain (define-properties, get-intrinsic, object-keys, has-symbols, ...) into
|
|
8
|
+
* every app bundle (~4 KB gzip). Every browser and Node version Sygnal supports
|
|
9
|
+
* has a native `globalThis`, so `sygnal/vite` aliases `globalthis` to this
|
|
10
|
+
* module (opt out with `sygnal({ nativeGlobalThis: false })`).
|
|
11
|
+
*
|
|
12
|
+
* Same shape as the package's main export (the es-shim API): a function that
|
|
13
|
+
* returns the global object, with `getPolyfill`, `implementation` and `shim`.
|
|
14
|
+
*/
|
|
15
|
+
const getGlobal = () => globalThis;
|
|
16
|
+
getGlobal.getPolyfill = getGlobal;
|
|
17
|
+
getGlobal.implementation = globalThis;
|
|
18
|
+
getGlobal.shim = getGlobal;
|
|
19
|
+
|
|
20
|
+
module.exports = getGlobal;
|