@pyreon/runtime-dom 0.1.0 → 0.1.2

package/README.md

@@ -10,17 +10,78 @@ bun add @pyreon/runtime-dom
 
 ## Quick Start
 
-```ts
+```tsx
 import { mount } from "@pyreon/runtime-dom"
-import { h } from "@pyreon/core"
 import { signal } from "@pyreon/reactivity"
 
 const count = signal(0)
 
-const App = () =>
-  h("button", { onClick: () => count.update((n) => n + 1) }, () => `Clicks: ${count()}`)
+const App = () => (
+  <button onClick={() => count.update((n) => n + 1)}>
+    Clicks: {() => count()}
+  </button>
+)
 
-const unmount = mount(h(App, null), document.getElementById("app")!)
+const unmount = mount(<App />, document.getElementById("app")!)
+```
+
+## Transition Examples
+
+Animate elements on enter and leave:
+
+```tsx
+import { Transition } from "@pyreon/runtime-dom"
+import { signal } from "@pyreon/reactivity"
+
+const show = signal(true)
+
+const App = () => (
+  <div>
+    <button onClick={() => show.set(!show())}>Toggle</button>
+    <Transition name="fade">
+      {() => show() && <p>Hello!</p>}
+    </Transition>
+  </div>
+)
+```
+
+Animate keyed lists with move support:
+
+```tsx
+import { TransitionGroup } from "@pyreon/runtime-dom"
+import { For } from "@pyreon/core"
+import { signal } from "@pyreon/reactivity"
+
+const items = signal([1, 2, 3])
+
+const List = () => (
+  <TransitionGroup name="list">
+    <For each={items} by={(n) => n}>
+      {(item) => <div>{() => item()}</div>}
+    </For>
+  </TransitionGroup>
+)
+```
+
+## KeepAlive Example
+
+Cache inactive component subtrees instead of destroying them:
+
+```tsx
+import { KeepAlive } from "@pyreon/runtime-dom"
+import { signal } from "@pyreon/reactivity"
+
+const tab = signal<"home" | "settings">("home")
+
+const App = () => (
+  <div>
+    <button onClick={() => tab.set("home")}>Home</button>
+    <button onClick={() => tab.set("settings")}>Settings</button>
+    <KeepAlive>
+      {() => tab() === "home" ? <Home /> : <Settings />}
+    </KeepAlive>
+  </div>
+)
 ```
 
 ## API

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/runtime-dom",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "DOM renderer for Pyreon",
   "license": "MIT",
   "repository": {
@@ -35,6 +35,7 @@
     "dev": "vl_rolldown_build-watch",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
+    "lint": "biome check .",
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
@@ -44,5 +45,8 @@
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.3",
     "happy-dom": "^20.8.3"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }