@pyreon/runtime-dom 0.11.5 → 0.11.7
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 +16 -22
- package/lib/analysis/index.js.html +1 -1
- package/lib/index.js +4 -3
- package/lib/index.js.map +1 -1
- package/package.json +12 -12
- package/src/delegate.ts +25 -25
- package/src/devtools.ts +37 -37
- package/src/hydrate.ts +30 -30
- package/src/hydration-debug.ts +2 -2
- package/src/index.ts +20 -20
- package/src/keep-alive.ts +6 -6
- package/src/mount.ts +46 -46
- package/src/nodes.ts +31 -19
- package/src/props.ts +93 -93
- package/src/template.ts +6 -6
- package/src/tests/coverage-gaps.test.ts +669 -669
- package/src/tests/coverage.test.ts +299 -299
- package/src/tests/mount.test.ts +1183 -1183
- package/src/tests/props.test.ts +219 -219
- package/src/tests/setup.ts +1 -1
- package/src/tests/show-context.test.ts +43 -43
- package/src/tests/template.test.ts +71 -71
- package/src/tests/transition.test.ts +124 -124
- package/src/transition-group.ts +22 -22
- package/src/transition.ts +18 -18
package/README.md
CHANGED
|
@@ -11,18 +11,16 @@ bun add @pyreon/runtime-dom
|
|
|
11
11
|
## Quick Start
|
|
12
12
|
|
|
13
13
|
```tsx
|
|
14
|
-
import { mount } from
|
|
15
|
-
import { signal } from
|
|
14
|
+
import { mount } from '@pyreon/runtime-dom'
|
|
15
|
+
import { signal } from '@pyreon/reactivity'
|
|
16
16
|
|
|
17
17
|
const count = signal(0)
|
|
18
18
|
|
|
19
19
|
const App = () => (
|
|
20
|
-
<button onClick={() => count.update((n) => n + 1)}>
|
|
21
|
-
Clicks: {() => count()}
|
|
22
|
-
</button>
|
|
20
|
+
<button onClick={() => count.update((n) => n + 1)}>Clicks: {() => count()}</button>
|
|
23
21
|
)
|
|
24
22
|
|
|
25
|
-
const unmount = mount(<App />, document.getElementById(
|
|
23
|
+
const unmount = mount(<App />, document.getElementById('app')!)
|
|
26
24
|
```
|
|
27
25
|
|
|
28
26
|
## Transition Examples
|
|
@@ -30,17 +28,15 @@ const unmount = mount(<App />, document.getElementById("app")!)
|
|
|
30
28
|
Animate elements on enter and leave:
|
|
31
29
|
|
|
32
30
|
```tsx
|
|
33
|
-
import { Transition } from
|
|
34
|
-
import { signal } from
|
|
31
|
+
import { Transition } from '@pyreon/runtime-dom'
|
|
32
|
+
import { signal } from '@pyreon/reactivity'
|
|
35
33
|
|
|
36
34
|
const show = signal(true)
|
|
37
35
|
|
|
38
36
|
const App = () => (
|
|
39
37
|
<div>
|
|
40
38
|
<button onClick={() => show.set(!show())}>Toggle</button>
|
|
41
|
-
<Transition name="fade">
|
|
42
|
-
{() => show() && <p>Hello!</p>}
|
|
43
|
-
</Transition>
|
|
39
|
+
<Transition name="fade">{() => show() && <p>Hello!</p>}</Transition>
|
|
44
40
|
</div>
|
|
45
41
|
)
|
|
46
42
|
```
|
|
@@ -48,9 +44,9 @@ const App = () => (
|
|
|
48
44
|
Animate keyed lists with move support:
|
|
49
45
|
|
|
50
46
|
```tsx
|
|
51
|
-
import { TransitionGroup } from
|
|
52
|
-
import { For } from
|
|
53
|
-
import { signal } from
|
|
47
|
+
import { TransitionGroup } from '@pyreon/runtime-dom'
|
|
48
|
+
import { For } from '@pyreon/core'
|
|
49
|
+
import { signal } from '@pyreon/reactivity'
|
|
54
50
|
|
|
55
51
|
const items = signal([1, 2, 3])
|
|
56
52
|
|
|
@@ -68,18 +64,16 @@ const List = () => (
|
|
|
68
64
|
Cache inactive component subtrees instead of destroying them:
|
|
69
65
|
|
|
70
66
|
```tsx
|
|
71
|
-
import { KeepAlive } from
|
|
72
|
-
import { signal } from
|
|
67
|
+
import { KeepAlive } from '@pyreon/runtime-dom'
|
|
68
|
+
import { signal } from '@pyreon/reactivity'
|
|
73
69
|
|
|
74
|
-
const tab = signal<
|
|
70
|
+
const tab = signal<'home' | 'settings'>('home')
|
|
75
71
|
|
|
76
72
|
const App = () => (
|
|
77
73
|
<div>
|
|
78
|
-
<button onClick={() => tab.set(
|
|
79
|
-
<button onClick={() => tab.set(
|
|
80
|
-
<KeepAlive>
|
|
81
|
-
{() => tab() === "home" ? <Home /> : <Settings />}
|
|
82
|
-
</KeepAlive>
|
|
74
|
+
<button onClick={() => tab.set('home')}>Home</button>
|
|
75
|
+
<button onClick={() => tab.set('settings')}>Settings</button>
|
|
76
|
+
<KeepAlive>{() => (tab() === 'home' ? <Home /> : <Settings />)}</KeepAlive>
|
|
83
77
|
</div>
|
|
84
78
|
)
|
|
85
79
|
```
|
|
@@ -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":"c7542956-1","name":"delegate.ts"},{"uid":"c7542956-3","name":"hydration-debug.ts"},{"uid":"c7542956-5","name":"devtools.ts"},{"uid":"c7542956-7","name":"nodes.ts"},{"uid":"c7542956-9","name":"props.ts"},{"uid":"c7542956-11","name":"mount.ts"},{"uid":"c7542956-13","name":"hydrate.ts"},{"uid":"c7542956-15","name":"keep-alive.ts"},{"uid":"c7542956-17","name":"template.ts"},{"uid":"c7542956-19","name":"transition.ts"},{"uid":"c7542956-21","name":"transition-group.ts"},{"uid":"c7542956-23","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"c7542956-1":{"renderedLength":1990,"gzipLength":976,"brotliLength":0,"metaUid":"c7542956-0"},"c7542956-3":{"renderedLength":704,"gzipLength":397,"brotliLength":0,"metaUid":"c7542956-2"},"c7542956-5":{"renderedLength":6803,"gzipLength":2095,"brotliLength":0,"metaUid":"c7542956-4"},"c7542956-7":{"renderedLength":16365,"gzipLength":4407,"brotliLength":0,"metaUid":"c7542956-6"},"c7542956-9":{"renderedLength":6157,"gzipLength":2362,"brotliLength":0,"metaUid":"c7542956-8"},"c7542956-11":{"renderedLength":9379,"gzipLength":2858,"brotliLength":0,"metaUid":"c7542956-10"},"c7542956-13":{"renderedLength":7694,"gzipLength":2333,"brotliLength":0,"metaUid":"c7542956-12"},"c7542956-15":{"renderedLength":1473,"gzipLength":701,"brotliLength":0,"metaUid":"c7542956-14"},"c7542956-17":{"renderedLength":4512,"gzipLength":1811,"brotliLength":0,"metaUid":"c7542956-16"},"c7542956-19":{"renderedLength":4007,"gzipLength":1316,"brotliLength":0,"metaUid":"c7542956-18"},"c7542956-21":{"renderedLength":6362,"gzipLength":1937,"brotliLength":0,"metaUid":"c7542956-20"},"c7542956-23":{"renderedLength":811,"gzipLength":491,"brotliLength":0,"metaUid":"c7542956-22"}},"nodeMetas":{"c7542956-0":{"id":"/src/delegate.ts","moduleParts":{"index.js":"c7542956-1"},"imported":[{"uid":"c7542956-24"}],"importedBy":[{"uid":"c7542956-22"},{"uid":"c7542956-12"},{"uid":"c7542956-8"}]},"c7542956-2":{"id":"/src/hydration-debug.ts","moduleParts":{"index.js":"c7542956-3"},"imported":[],"importedBy":[{"uid":"c7542956-22"},{"uid":"c7542956-12"}]},"c7542956-4":{"id":"/src/devtools.ts","moduleParts":{"index.js":"c7542956-5"},"imported":[],"importedBy":[{"uid":"c7542956-22"},{"uid":"c7542956-10"}]},"c7542956-6":{"id":"/src/nodes.ts","moduleParts":{"index.js":"c7542956-7"},"imported":[{"uid":"c7542956-25"},{"uid":"c7542956-24"}],"importedBy":[{"uid":"c7542956-12"},{"uid":"c7542956-10"}]},"c7542956-8":{"id":"/src/props.ts","moduleParts":{"index.js":"c7542956-9"},"imported":[{"uid":"c7542956-25"},{"uid":"c7542956-24"},{"uid":"c7542956-0"}],"importedBy":[{"uid":"c7542956-22"},{"uid":"c7542956-12"},{"uid":"c7542956-10"}]},"c7542956-10":{"id":"/src/mount.ts","moduleParts":{"index.js":"c7542956-11"},"imported":[{"uid":"c7542956-25"},{"uid":"c7542956-24"},{"uid":"c7542956-4"},{"uid":"c7542956-6"},{"uid":"c7542956-8"}],"importedBy":[{"uid":"c7542956-22"},{"uid":"c7542956-12"},{"uid":"c7542956-14"},{"uid":"c7542956-20"}]},"c7542956-12":{"id":"/src/hydrate.ts","moduleParts":{"index.js":"c7542956-13"},"imported":[{"uid":"c7542956-25"},{"uid":"c7542956-24"},{"uid":"c7542956-0"},{"uid":"c7542956-2"},{"uid":"c7542956-10"},{"uid":"c7542956-6"},{"uid":"c7542956-8"}],"importedBy":[{"uid":"c7542956-22"}]},"c7542956-14":{"id":"/src/keep-alive.ts","moduleParts":{"index.js":"c7542956-15"},"imported":[{"uid":"c7542956-25"},{"uid":"c7542956-24"},{"uid":"c7542956-10"}],"importedBy":[{"uid":"c7542956-22"}]},"c7542956-16":{"id":"/src/template.ts","moduleParts":{"index.js":"c7542956-17"},"imported":[{"uid":"c7542956-24"}],"importedBy":[{"uid":"c7542956-22"}]},"c7542956-18":{"id":"/src/transition.ts","moduleParts":{"index.js":"c7542956-19"},"imported":[{"uid":"c7542956-25"},{"uid":"c7542956-24"}],"importedBy":[{"uid":"c7542956-22"}]},"c7542956-20":{"id":"/src/transition-group.ts","moduleParts":{"index.js":"c7542956-21"},"imported":[{"uid":"c7542956-25"},{"uid":"c7542956-24"},{"uid":"c7542956-10"}],"importedBy":[{"uid":"c7542956-22"}]},"c7542956-22":{"id":"/src/index.ts","moduleParts":{"index.js":"c7542956-23"},"imported":[{"uid":"c7542956-0"},{"uid":"c7542956-12"},{"uid":"c7542956-2"},{"uid":"c7542956-14"},{"uid":"c7542956-10"},{"uid":"c7542956-8"},{"uid":"c7542956-16"},{"uid":"c7542956-18"},{"uid":"c7542956-20"},{"uid":"c7542956-4"}],"importedBy":[],"isEntry":true},"c7542956-24":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"c7542956-0"},{"uid":"c7542956-12"},{"uid":"c7542956-14"},{"uid":"c7542956-10"},{"uid":"c7542956-8"},{"uid":"c7542956-16"},{"uid":"c7542956-18"},{"uid":"c7542956-20"},{"uid":"c7542956-6"}]},"c7542956-25":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"c7542956-12"},{"uid":"c7542956-14"},{"uid":"c7542956-10"},{"uid":"c7542956-8"},{"uid":"c7542956-18"},{"uid":"c7542956-20"},{"uid":"c7542956-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;
|
package/lib/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { batch, effect, effectScope, renderEffect, runUntracked, setCurrentScope, signal } from "@pyreon/reactivity";
|
|
2
|
-
import { EMPTY_PROPS, ForSymbol, Fragment, PortalSymbol, createRef, cx, dispatchToErrorBoundary, h, normalizeStyleValue, onMount, onUnmount, propagateError, reportError, runWithHooks, toKebabCase } from "@pyreon/core";
|
|
2
|
+
import { EMPTY_PROPS, ForSymbol, Fragment, PortalSymbol, captureContextStack, createRef, cx, dispatchToErrorBoundary, h, normalizeStyleValue, onMount, onUnmount, propagateError, reportError, restoreContextStack, runWithHooks, toKebabCase } from "@pyreon/core";
|
|
3
3
|
|
|
4
4
|
//#region src/delegate.ts
|
|
5
5
|
/**
|
|
@@ -334,6 +334,7 @@ function clearBetween(start, end) {
|
|
|
334
334
|
function mountReactive(accessor, parent, anchor, mount) {
|
|
335
335
|
const marker = document.createComment("pyreon");
|
|
336
336
|
parent.insertBefore(marker, anchor);
|
|
337
|
+
const contextSnapshot = captureContextStack();
|
|
337
338
|
let currentCleanup = () => {};
|
|
338
339
|
let generation = 0;
|
|
339
340
|
const e = effect(() => {
|
|
@@ -343,7 +344,7 @@ function mountReactive(accessor, parent, anchor, mount) {
|
|
|
343
344
|
const value = accessor();
|
|
344
345
|
if (__DEV__$4 && typeof value === "function") console.warn("[Pyreon] Reactive accessor returned a function instead of a value. Did you forget to call the signal?");
|
|
345
346
|
if (value != null && value !== false) {
|
|
346
|
-
const cleanup = mount(value, parent, marker);
|
|
347
|
+
const cleanup = restoreContextStack(contextSnapshot, () => mount(value, parent, marker));
|
|
347
348
|
if (myGen === generation) currentCleanup = cleanup;
|
|
348
349
|
else cleanup();
|
|
349
350
|
}
|
|
@@ -1084,7 +1085,7 @@ function mountChild(child, parent, anchor = null) {
|
|
|
1084
1085
|
return cleanup;
|
|
1085
1086
|
}
|
|
1086
1087
|
if (typeof sample === "string" || typeof sample === "number" || typeof sample === "boolean") {
|
|
1087
|
-
const text = document.createTextNode(sample
|
|
1088
|
+
const text = document.createTextNode(sample === false ? "" : String(sample));
|
|
1088
1089
|
parent.insertBefore(text, anchor);
|
|
1089
1090
|
const dispose = renderEffect(() => {
|
|
1090
1091
|
const v = child();
|