@pyreon/runtime-dom 0.13.1 → 0.14.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/README.md +23 -0
- package/lib/analysis/index.js.html +1 -1
- package/lib/analysis/keep-alive-entry.js.html +5406 -0
- package/lib/analysis/transition-entry.js.html +5406 -0
- package/lib/index.js +98 -47
- package/lib/index.js.map +1 -1
- package/lib/keep-alive-entry.js +1341 -0
- package/lib/keep-alive-entry.js.map +1 -0
- package/lib/transition-entry.js +167 -0
- package/lib/transition-entry.js.map +1 -0
- package/lib/types/index.d.ts.map +1 -1
- package/lib/types/keep-alive-entry.d.ts +41 -0
- package/lib/types/keep-alive-entry.d.ts.map +1 -0
- package/lib/types/transition-entry.d.ts +59 -0
- package/lib/types/transition-entry.d.ts.map +1 -0
- package/package.json +16 -6
- package/src/hydrate.ts +14 -12
- package/src/index.ts +19 -3
- package/src/keep-alive-entry.ts +3 -0
- package/src/mount.ts +159 -54
- package/src/nodes.ts +61 -11
- package/src/template.ts +13 -2
- package/src/tests/coverage-gaps.test.ts +709 -0
- package/src/tests/lis-prepend.browser.test.ts +99 -0
- package/src/tests/runtime-dom.browser.test.ts +63 -1
- package/src/tests/template.test.ts +64 -0
- package/src/transition-entry.ts +7 -0
package/README.md
CHANGED
|
@@ -107,14 +107,37 @@ const App = () => (
|
|
|
107
107
|
- **`Transition`** -- Animates a single child on enter/leave with CSS classes or JS hooks.
|
|
108
108
|
- **`TransitionGroup`** -- Animates a list of keyed children, including move transitions.
|
|
109
109
|
|
|
110
|
+
Also available as a separate subpath export for apps that don't use animations:
|
|
111
|
+
|
|
112
|
+
```ts
|
|
113
|
+
import { Transition, TransitionGroup } from '@pyreon/runtime-dom/transition'
|
|
114
|
+
```
|
|
115
|
+
|
|
110
116
|
### KeepAlive
|
|
111
117
|
|
|
112
118
|
- **`KeepAlive`** -- Caches inactive component subtrees instead of destroying them.
|
|
113
119
|
|
|
120
|
+
Also available as a separate subpath export:
|
|
121
|
+
|
|
122
|
+
```ts
|
|
123
|
+
import { KeepAlive } from '@pyreon/runtime-dom/keep-alive'
|
|
124
|
+
```
|
|
125
|
+
|
|
114
126
|
### Types
|
|
115
127
|
|
|
116
128
|
`TransitionProps`, `TransitionGroupProps`, `KeepAliveProps`, `SanitizeFn`, `DevtoolsComponentEntry`, `PyreonDevtools`
|
|
117
129
|
|
|
130
|
+
## Production Performance
|
|
131
|
+
|
|
132
|
+
The mount pipeline is optimized for zero unnecessary allocations:
|
|
133
|
+
|
|
134
|
+
- **Devtools gated on `__DEV__`** -- Component ID generation (`Math.random`), parent/child tracking (`_mountingStack`), and `registerComponent`/`unregisterComponent` are all behind `if (__DEV__)`. Vite tree-shakes the entire devtools module from production bundles.
|
|
135
|
+
- **Lazy LifecycleHooks** -- `mount`/`unmount`/`update`/`error` arrays start as `null`, allocated on first hook registration. Components with no hooks (80%+) skip all hook iteration.
|
|
136
|
+
- **Lazy mountCleanups** -- Only allocated when an `onMount` callback returns a cleanup function.
|
|
137
|
+
- **makeReactiveProps scan-first** -- Scans for `_rp()` brands before allocating the getter-backed object. Static-only components return `raw` immediately.
|
|
138
|
+
- **renderEffect first-run skip** -- Skips cleanup on first run since the deps array is empty.
|
|
139
|
+
- **Text .data no-op writes** -- `_bindText` and `_bindDirect` skip DOM writes when the value hasn't changed.
|
|
140
|
+
|
|
118
141
|
## Dev-mode warnings — bundler tree-shake
|
|
119
142
|
|
|
120
143
|
Dev warnings are gated on `import.meta.env?.DEV`. Tree-shake behavior depends on both the source pattern and the consumer bundler:
|
|
@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
|
|
|
5386
5386
|
</script>
|
|
5387
5387
|
<script>
|
|
5388
5388
|
/*<!--*/
|
|
5389
|
-
const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"
|
|
5389
|
+
const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"7ccb5fa4-1","name":"delegate.ts"},{"uid":"7ccb5fa4-3","name":"hydration-debug.ts"},{"uid":"7ccb5fa4-5","name":"devtools.ts"},{"uid":"7ccb5fa4-7","name":"nodes.ts"},{"uid":"7ccb5fa4-9","name":"props.ts"},{"uid":"7ccb5fa4-11","name":"mount.ts"},{"uid":"7ccb5fa4-13","name":"hydrate.ts"},{"uid":"7ccb5fa4-15","name":"keep-alive.ts"},{"uid":"7ccb5fa4-17","name":"template.ts"},{"uid":"7ccb5fa4-19","name":"transition.ts"},{"uid":"7ccb5fa4-21","name":"transition-group.ts"},{"uid":"7ccb5fa4-23","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"7ccb5fa4-1":{"renderedLength":1990,"gzipLength":976,"brotliLength":0,"metaUid":"7ccb5fa4-0"},"7ccb5fa4-3":{"renderedLength":662,"gzipLength":370,"brotliLength":0,"metaUid":"7ccb5fa4-2"},"7ccb5fa4-5":{"renderedLength":6803,"gzipLength":2095,"brotliLength":0,"metaUid":"7ccb5fa4-4"},"7ccb5fa4-7":{"renderedLength":16842,"gzipLength":4536,"brotliLength":0,"metaUid":"7ccb5fa4-6"},"7ccb5fa4-9":{"renderedLength":7947,"gzipLength":3020,"brotliLength":0,"metaUid":"7ccb5fa4-8"},"7ccb5fa4-11":{"renderedLength":12224,"gzipLength":3878,"brotliLength":0,"metaUid":"7ccb5fa4-10"},"7ccb5fa4-13":{"renderedLength":8293,"gzipLength":2464,"brotliLength":0,"metaUid":"7ccb5fa4-12"},"7ccb5fa4-15":{"renderedLength":1473,"gzipLength":701,"brotliLength":0,"metaUid":"7ccb5fa4-14"},"7ccb5fa4-17":{"renderedLength":5556,"gzipLength":2174,"brotliLength":0,"metaUid":"7ccb5fa4-16"},"7ccb5fa4-19":{"renderedLength":4895,"gzipLength":1390,"brotliLength":0,"metaUid":"7ccb5fa4-18"},"7ccb5fa4-21":{"renderedLength":7942,"gzipLength":2070,"brotliLength":0,"metaUid":"7ccb5fa4-20"},"7ccb5fa4-23":{"renderedLength":977,"gzipLength":544,"brotliLength":0,"metaUid":"7ccb5fa4-22"}},"nodeMetas":{"7ccb5fa4-0":{"id":"/src/delegate.ts","moduleParts":{"index.js":"7ccb5fa4-1"},"imported":[{"uid":"7ccb5fa4-24"}],"importedBy":[{"uid":"7ccb5fa4-22"},{"uid":"7ccb5fa4-12"},{"uid":"7ccb5fa4-8"}]},"7ccb5fa4-2":{"id":"/src/hydration-debug.ts","moduleParts":{"index.js":"7ccb5fa4-3"},"imported":[],"importedBy":[{"uid":"7ccb5fa4-22"},{"uid":"7ccb5fa4-12"}]},"7ccb5fa4-4":{"id":"/src/devtools.ts","moduleParts":{"index.js":"7ccb5fa4-5"},"imported":[],"importedBy":[{"uid":"7ccb5fa4-22"},{"uid":"7ccb5fa4-10"}]},"7ccb5fa4-6":{"id":"/src/nodes.ts","moduleParts":{"index.js":"7ccb5fa4-7"},"imported":[{"uid":"7ccb5fa4-25"},{"uid":"7ccb5fa4-24"}],"importedBy":[{"uid":"7ccb5fa4-12"},{"uid":"7ccb5fa4-10"}]},"7ccb5fa4-8":{"id":"/src/props.ts","moduleParts":{"index.js":"7ccb5fa4-9"},"imported":[{"uid":"7ccb5fa4-25"},{"uid":"7ccb5fa4-24"},{"uid":"7ccb5fa4-0"}],"importedBy":[{"uid":"7ccb5fa4-22"},{"uid":"7ccb5fa4-12"},{"uid":"7ccb5fa4-10"}]},"7ccb5fa4-10":{"id":"/src/mount.ts","moduleParts":{"index.js":"7ccb5fa4-11"},"imported":[{"uid":"7ccb5fa4-25"},{"uid":"7ccb5fa4-24"},{"uid":"7ccb5fa4-4"},{"uid":"7ccb5fa4-6"},{"uid":"7ccb5fa4-8"}],"importedBy":[{"uid":"7ccb5fa4-22"},{"uid":"7ccb5fa4-12"},{"uid":"7ccb5fa4-14"},{"uid":"7ccb5fa4-16"},{"uid":"7ccb5fa4-20"}]},"7ccb5fa4-12":{"id":"/src/hydrate.ts","moduleParts":{"index.js":"7ccb5fa4-13"},"imported":[{"uid":"7ccb5fa4-25"},{"uid":"7ccb5fa4-24"},{"uid":"7ccb5fa4-0"},{"uid":"7ccb5fa4-2"},{"uid":"7ccb5fa4-10"},{"uid":"7ccb5fa4-6"},{"uid":"7ccb5fa4-8"}],"importedBy":[{"uid":"7ccb5fa4-22"}]},"7ccb5fa4-14":{"id":"/src/keep-alive.ts","moduleParts":{"index.js":"7ccb5fa4-15"},"imported":[{"uid":"7ccb5fa4-25"},{"uid":"7ccb5fa4-24"},{"uid":"7ccb5fa4-10"}],"importedBy":[{"uid":"7ccb5fa4-22"}]},"7ccb5fa4-16":{"id":"/src/template.ts","moduleParts":{"index.js":"7ccb5fa4-17"},"imported":[{"uid":"7ccb5fa4-24"},{"uid":"7ccb5fa4-10"}],"importedBy":[{"uid":"7ccb5fa4-22"}]},"7ccb5fa4-18":{"id":"/src/transition.ts","moduleParts":{"index.js":"7ccb5fa4-19"},"imported":[{"uid":"7ccb5fa4-25"},{"uid":"7ccb5fa4-24"}],"importedBy":[{"uid":"7ccb5fa4-22"}]},"7ccb5fa4-20":{"id":"/src/transition-group.ts","moduleParts":{"index.js":"7ccb5fa4-21"},"imported":[{"uid":"7ccb5fa4-25"},{"uid":"7ccb5fa4-24"},{"uid":"7ccb5fa4-10"}],"importedBy":[{"uid":"7ccb5fa4-22"}]},"7ccb5fa4-22":{"id":"/src/index.ts","moduleParts":{"index.js":"7ccb5fa4-23"},"imported":[{"uid":"7ccb5fa4-0"},{"uid":"7ccb5fa4-12"},{"uid":"7ccb5fa4-2"},{"uid":"7ccb5fa4-14"},{"uid":"7ccb5fa4-10"},{"uid":"7ccb5fa4-8"},{"uid":"7ccb5fa4-16"},{"uid":"7ccb5fa4-18"},{"uid":"7ccb5fa4-20"},{"uid":"7ccb5fa4-4"}],"importedBy":[],"isEntry":true},"7ccb5fa4-24":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"7ccb5fa4-0"},{"uid":"7ccb5fa4-12"},{"uid":"7ccb5fa4-14"},{"uid":"7ccb5fa4-10"},{"uid":"7ccb5fa4-8"},{"uid":"7ccb5fa4-16"},{"uid":"7ccb5fa4-18"},{"uid":"7ccb5fa4-20"},{"uid":"7ccb5fa4-6"}]},"7ccb5fa4-25":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"7ccb5fa4-12"},{"uid":"7ccb5fa4-14"},{"uid":"7ccb5fa4-10"},{"uid":"7ccb5fa4-8"},{"uid":"7ccb5fa4-18"},{"uid":"7ccb5fa4-20"},{"uid":"7ccb5fa4-6"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
|
|
5390
5390
|
|
|
5391
5391
|
const run = () => {
|
|
5392
5392
|
const width = window.innerWidth;
|