@pyreon/runtime-dom 0.1.1 → 0.1.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/README.md +66 -5
- package/package.json +5 -6
package/README.md
CHANGED
|
@@ -10,17 +10,78 @@ bun add @pyreon/runtime-dom
|
|
|
10
10
|
|
|
11
11
|
## Quick Start
|
|
12
12
|
|
|
13
|
-
```
|
|
13
|
+
```tsx
|
|
14
14
|
import { mount } from "@pyreon/runtime-dom"
|
|
15
|
-
import { h } from "@pyreon/core"
|
|
16
15
|
import { signal } from "@pyreon/reactivity"
|
|
17
16
|
|
|
18
17
|
const count = signal(0)
|
|
19
18
|
|
|
20
|
-
const App = () =>
|
|
21
|
-
|
|
19
|
+
const App = () => (
|
|
20
|
+
<button onClick={() => count.update((n) => n + 1)}>
|
|
21
|
+
Clicks: {() => count()}
|
|
22
|
+
</button>
|
|
23
|
+
)
|
|
22
24
|
|
|
23
|
-
const unmount = mount(
|
|
25
|
+
const unmount = mount(<App />, document.getElementById("app")!)
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Transition Examples
|
|
29
|
+
|
|
30
|
+
Animate elements on enter and leave:
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import { Transition } from "@pyreon/runtime-dom"
|
|
34
|
+
import { signal } from "@pyreon/reactivity"
|
|
35
|
+
|
|
36
|
+
const show = signal(true)
|
|
37
|
+
|
|
38
|
+
const App = () => (
|
|
39
|
+
<div>
|
|
40
|
+
<button onClick={() => show.set(!show())}>Toggle</button>
|
|
41
|
+
<Transition name="fade">
|
|
42
|
+
{() => show() && <p>Hello!</p>}
|
|
43
|
+
</Transition>
|
|
44
|
+
</div>
|
|
45
|
+
)
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Animate keyed lists with move support:
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
import { TransitionGroup } from "@pyreon/runtime-dom"
|
|
52
|
+
import { For } from "@pyreon/core"
|
|
53
|
+
import { signal } from "@pyreon/reactivity"
|
|
54
|
+
|
|
55
|
+
const items = signal([1, 2, 3])
|
|
56
|
+
|
|
57
|
+
const List = () => (
|
|
58
|
+
<TransitionGroup name="list">
|
|
59
|
+
<For each={items} by={(n) => n}>
|
|
60
|
+
{(item) => <div>{() => item()}</div>}
|
|
61
|
+
</For>
|
|
62
|
+
</TransitionGroup>
|
|
63
|
+
)
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## KeepAlive Example
|
|
67
|
+
|
|
68
|
+
Cache inactive component subtrees instead of destroying them:
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
import { KeepAlive } from "@pyreon/runtime-dom"
|
|
72
|
+
import { signal } from "@pyreon/reactivity"
|
|
73
|
+
|
|
74
|
+
const tab = signal<"home" | "settings">("home")
|
|
75
|
+
|
|
76
|
+
const App = () => (
|
|
77
|
+
<div>
|
|
78
|
+
<button onClick={() => tab.set("home")}>Home</button>
|
|
79
|
+
<button onClick={() => tab.set("settings")}>Settings</button>
|
|
80
|
+
<KeepAlive>
|
|
81
|
+
{() => tab() === "home" ? <Home /> : <Settings />}
|
|
82
|
+
</KeepAlive>
|
|
83
|
+
</div>
|
|
84
|
+
)
|
|
24
85
|
```
|
|
25
86
|
|
|
26
87
|
## API
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pyreon/runtime-dom",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "DOM renderer for Pyreon",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -35,13 +35,12 @@
|
|
|
35
35
|
"dev": "vl_rolldown_build-watch",
|
|
36
36
|
"test": "vitest run",
|
|
37
37
|
"typecheck": "tsc --noEmit",
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"postpack": "bun run ../../scripts/resolve-workspace-deps.ts post"
|
|
38
|
+
"lint": "biome check .",
|
|
39
|
+
"prepublishOnly": "bun run build"
|
|
41
40
|
},
|
|
42
41
|
"dependencies": {
|
|
43
|
-
"@pyreon/core": "
|
|
44
|
-
"@pyreon/reactivity": "
|
|
42
|
+
"@pyreon/core": "workspace:*",
|
|
43
|
+
"@pyreon/reactivity": "workspace:*"
|
|
45
44
|
},
|
|
46
45
|
"devDependencies": {
|
|
47
46
|
"@happy-dom/global-registrator": "^20.8.3",
|