@pyreon/runtime-dom 0.11.4 → 0.11.6

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/package.json CHANGED
@@ -1,25 +1,25 @@
1
1
  {
2
2
  "name": "@pyreon/runtime-dom",
3
- "version": "0.11.4",
3
+ "version": "0.11.6",
4
4
  "description": "DOM renderer for Pyreon",
5
+ "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/runtime-dom#readme",
6
+ "bugs": {
7
+ "url": "https://github.com/pyreon/pyreon/issues"
8
+ },
5
9
  "license": "MIT",
6
10
  "repository": {
7
11
  "type": "git",
8
12
  "url": "https://github.com/pyreon/pyreon.git",
9
13
  "directory": "packages/core/runtime-dom"
10
14
  },
11
- "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/runtime-dom#readme",
12
- "bugs": {
13
- "url": "https://github.com/pyreon/pyreon/issues"
14
- },
15
15
  "files": [
16
16
  "lib",
17
17
  "src",
18
18
  "README.md",
19
19
  "LICENSE"
20
20
  ],
21
- "sideEffects": false,
22
21
  "type": "module",
22
+ "sideEffects": false,
23
23
  "main": "./lib/index.js",
24
24
  "module": "./lib/index.js",
25
25
  "types": "./lib/types/index.d.ts",
@@ -30,23 +30,23 @@
30
30
  "types": "./lib/types/index.d.ts"
31
31
  }
32
32
  },
33
+ "publishConfig": {
34
+ "access": "public"
35
+ },
33
36
  "scripts": {
34
37
  "build": "vl_rolldown_build",
35
38
  "dev": "vl_rolldown_build-watch",
36
39
  "test": "vitest run",
37
40
  "typecheck": "tsc --noEmit",
38
- "lint": "biome check .",
41
+ "lint": "oxlint .",
39
42
  "prepublishOnly": "bun run build"
40
43
  },
41
44
  "dependencies": {
42
- "@pyreon/core": "^0.11.4",
43
- "@pyreon/reactivity": "^0.11.4"
45
+ "@pyreon/core": "^0.11.6",
46
+ "@pyreon/reactivity": "^0.11.6"
44
47
  },
45
48
  "devDependencies": {
46
49
  "@happy-dom/global-registrator": "^20.8.3",
47
50
  "happy-dom": "^20.8.3"
48
- },
49
- "publishConfig": {
50
- "access": "public"
51
51
  }
52
52
  }
package/src/delegate.ts CHANGED
@@ -11,7 +11,7 @@
11
11
  * - Faster initial mount (~0.4-0.8ms savings on 1000-row benchmarks)
12
12
  */
13
13
 
14
- import { batch } from "@pyreon/reactivity"
14
+ import { batch } from '@pyreon/reactivity'
15
15
 
16
16
  /**
17
17
  * Events that are delegated (common bubbling events).
@@ -19,29 +19,29 @@ import { batch } from "@pyreon/reactivity"
19
19
  * are NOT delegated — they must use addEventListener.
20
20
  */
21
21
  export const DELEGATED_EVENTS = new Set([
22
- "click",
23
- "dblclick",
24
- "contextmenu",
25
- "focusin",
26
- "focusout",
27
- "input",
28
- "change",
29
- "keydown",
30
- "keyup",
31
- "mousedown",
32
- "mouseup",
33
- "mousemove",
34
- "mouseover",
35
- "mouseout",
36
- "pointerdown",
37
- "pointerup",
38
- "pointermove",
39
- "pointerover",
40
- "pointerout",
41
- "touchstart",
42
- "touchend",
43
- "touchmove",
44
- "submit",
22
+ 'click',
23
+ 'dblclick',
24
+ 'contextmenu',
25
+ 'focusin',
26
+ 'focusout',
27
+ 'input',
28
+ 'change',
29
+ 'keydown',
30
+ 'keyup',
31
+ 'mousedown',
32
+ 'mouseup',
33
+ 'mousemove',
34
+ 'mouseover',
35
+ 'mouseout',
36
+ 'pointerdown',
37
+ 'pointerup',
38
+ 'pointermove',
39
+ 'pointerover',
40
+ 'pointerout',
41
+ 'touchstart',
42
+ 'touchend',
43
+ 'touchmove',
44
+ 'submit',
45
45
  ])
46
46
 
47
47
  /**
@@ -69,7 +69,7 @@ export function setupDelegation(container: Element): void {
69
69
  let el = e.target as (HTMLElement & Record<string, unknown>) | null
70
70
  while (el && el !== container) {
71
71
  const handler = el[prop]
72
- if (typeof handler === "function") {
72
+ if (typeof handler === 'function') {
73
73
  batch(() => handler(e))
74
74
  // Don't break — allow ancestor handlers too (consistent with addEventListener)
75
75
  // But if stopPropagation was called, stop walking
package/src/devtools.ts CHANGED
@@ -89,14 +89,14 @@ function findComponentForElement(el: Element): DevtoolsComponentEntry | null {
89
89
  function createOverlayElements(): void {
90
90
  if (_overlayEl) return
91
91
 
92
- _overlayEl = document.createElement("div")
93
- _overlayEl.id = "__pyreon-overlay"
92
+ _overlayEl = document.createElement('div')
93
+ _overlayEl.id = '__pyreon-overlay'
94
94
  _overlayEl.style.cssText =
95
- "position:fixed;pointer-events:none;border:2px solid #00b4d8;border-radius:3px;z-index:999999;display:none;transition:all 0.08s ease-out;"
95
+ 'position:fixed;pointer-events:none;border:2px solid #00b4d8;border-radius:3px;z-index:999999;display:none;transition:all 0.08s ease-out;'
96
96
 
97
- _tooltipEl = document.createElement("div")
97
+ _tooltipEl = document.createElement('div')
98
98
  _tooltipEl.style.cssText =
99
- "position:fixed;pointer-events:none;background:#1a1a2e;color:#e0e0e0;font:12px/1.4 ui-monospace,monospace;padding:6px 10px;border-radius:4px;z-index:999999;display:none;box-shadow:0 2px 8px rgba(0,0,0,0.3);max-width:400px;white-space:pre-wrap;"
99
+ 'position:fixed;pointer-events:none;background:#1a1a2e;color:#e0e0e0;font:12px/1.4 ui-monospace,monospace;padding:6px 10px;border-radius:4px;z-index:999999;display:none;box-shadow:0 2px 8px rgba(0,0,0,0.3);max-width:400px;white-space:pre-wrap;'
100
100
 
101
101
  document.body.appendChild(_overlayEl)
102
102
  document.body.appendChild(_tooltipEl)
@@ -104,7 +104,7 @@ function createOverlayElements(): void {
104
104
 
105
105
  function positionOverlay(rect: DOMRect): void {
106
106
  if (!_overlayEl) return
107
- _overlayEl.style.display = "block"
107
+ _overlayEl.style.display = 'block'
108
108
  _overlayEl.style.top = `${rect.top}px`
109
109
  _overlayEl.style.left = `${rect.left}px`
110
110
  _overlayEl.style.width = `${rect.width}px`
@@ -115,9 +115,9 @@ function positionTooltip(entry: DevtoolsComponentEntry, rect: DOMRect): void {
115
115
  if (!_tooltipEl) return
116
116
  const childCount = entry.childIds.length
117
117
  let info = `<${entry.name}>`
118
- if (childCount > 0) info += `\n ${childCount} child component${childCount === 1 ? "" : "s"}`
118
+ if (childCount > 0) info += `\n ${childCount} child component${childCount === 1 ? '' : 's'}`
119
119
  _tooltipEl.textContent = info
120
- _tooltipEl.style.display = "block"
120
+ _tooltipEl.style.display = 'block'
121
121
  _tooltipEl.style.top = `${rect.top - 30}px`
122
122
  _tooltipEl.style.left = `${rect.left}px`
123
123
  if (rect.top < 35) {
@@ -126,8 +126,8 @@ function positionTooltip(entry: DevtoolsComponentEntry, rect: DOMRect): void {
126
126
  }
127
127
 
128
128
  function hideOverlayElements(): void {
129
- if (_overlayEl) _overlayEl.style.display = "none"
130
- if (_tooltipEl) _tooltipEl.style.display = "none"
129
+ if (_overlayEl) _overlayEl.style.display = 'none'
130
+ if (_tooltipEl) _tooltipEl.style.display = 'none'
131
131
  _currentHighlight = null
132
132
  }
133
133
 
@@ -159,12 +159,12 @@ export function onOverlayClick(e: MouseEvent): void {
159
159
  const entry = findComponentForElement(target)
160
160
  if (entry) {
161
161
  console.group(`[Pyreon] <${entry.name}>`)
162
- console.log("element:", entry.el)
163
- console.log("children:", entry.childIds.length)
162
+ console.log('element:', entry.el)
163
+ console.log('children:', entry.childIds.length)
164
164
  if (entry.parentId) {
165
165
  const parent = _components.get(entry.parentId)
166
166
  if (parent) {
167
- console.log("parent:", `<${parent.name}>`)
167
+ console.log('parent:', `<${parent.name}>`)
168
168
  }
169
169
  }
170
170
  console.groupEnd()
@@ -173,7 +173,7 @@ export function onOverlayClick(e: MouseEvent): void {
173
173
  }
174
174
 
175
175
  function onOverlayKeydown(e: KeyboardEvent): void {
176
- if (e.key === "Escape") {
176
+ if (e.key === 'Escape') {
177
177
  disableOverlay()
178
178
  }
179
179
  }
@@ -182,21 +182,21 @@ function enableOverlay(): void {
182
182
  if (_overlayActive) return
183
183
  _overlayActive = true
184
184
  createOverlayElements()
185
- document.addEventListener("mousemove", onOverlayMouseMove, true)
186
- document.addEventListener("click", onOverlayClick, true)
187
- document.addEventListener("keydown", onOverlayKeydown, true)
188
- document.body.style.cursor = "crosshair"
185
+ document.addEventListener('mousemove', onOverlayMouseMove, true)
186
+ document.addEventListener('click', onOverlayClick, true)
187
+ document.addEventListener('keydown', onOverlayKeydown, true)
188
+ document.body.style.cursor = 'crosshair'
189
189
  }
190
190
 
191
191
  function disableOverlay(): void {
192
192
  if (!_overlayActive) return
193
193
  _overlayActive = false
194
- document.removeEventListener("mousemove", onOverlayMouseMove, true)
195
- document.removeEventListener("click", onOverlayClick, true)
196
- document.removeEventListener("keydown", onOverlayKeydown, true)
197
- document.body.style.cursor = ""
198
- if (_overlayEl) _overlayEl.style.display = "none"
199
- if (_tooltipEl) _tooltipEl.style.display = "none"
194
+ document.removeEventListener('mousemove', onOverlayMouseMove, true)
195
+ document.removeEventListener('click', onOverlayClick, true)
196
+ document.removeEventListener('keydown', onOverlayKeydown, true)
197
+ document.body.style.cursor = ''
198
+ if (_overlayEl) _overlayEl.style.display = 'none'
199
+ if (_tooltipEl) _tooltipEl.style.display = 'none'
200
200
  _currentHighlight = null
201
201
  }
202
202
 
@@ -204,14 +204,14 @@ function disableOverlay(): void {
204
204
 
205
205
  let _installed = false
206
206
  // Resolved once at module load — avoids per-call typeof branch in coverage
207
- const _hasWindow = typeof window !== "undefined"
207
+ const _hasWindow = typeof window !== 'undefined'
208
208
 
209
209
  export function installDevTools(): void {
210
210
  if (!_hasWindow || _installed) return
211
211
  _installed = true
212
212
 
213
213
  const devtools: PyreonDevtools = {
214
- version: "0.1.0",
214
+ version: '0.1.0',
215
215
 
216
216
  getComponentTree() {
217
217
  return Array.from(_components.values()).filter((e) => e.parentId === null)
@@ -226,7 +226,7 @@ export function installDevTools(): void {
226
226
  if (!entry?.el) return
227
227
  const el = entry.el as HTMLElement
228
228
  const prev = el.style.outline
229
- el.style.outline = "2px solid #00b4d8"
229
+ el.style.outline = '2px solid #00b4d8'
230
230
  setTimeout(() => {
231
231
  el.style.outline = prev
232
232
  }, 1500)
@@ -256,8 +256,8 @@ export function installDevTools(): void {
256
256
  ;(window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ = devtools
257
257
 
258
258
  // Ctrl+Shift+P toggles the component inspector overlay
259
- window.addEventListener("keydown", (e) => {
260
- if (e.ctrlKey && e.shiftKey && e.key === "P") {
259
+ window.addEventListener('keydown', (e) => {
260
+ if (e.ctrlKey && e.shiftKey && e.key === 'P') {
261
261
  e.preventDefault()
262
262
  if (_overlayActive) disableOverlay()
263
263
  else enableOverlay()
@@ -284,20 +284,20 @@ export function installDevTools(): void {
284
284
  const all = devtools.getAllComponents()
285
285
  const roots = devtools.getComponentTree()
286
286
  console.log(
287
- `[Pyreon] ${all.length} component${all.length === 1 ? "" : "s"}, ${roots.length} root${roots.length === 1 ? "" : "s"}`,
287
+ `[Pyreon] ${all.length} component${all.length === 1 ? '' : 's'}, ${roots.length} root${roots.length === 1 ? '' : 's'}`,
288
288
  )
289
289
  return { total: all.length, roots: roots.length }
290
290
  },
291
291
  /** Quick help */
292
292
  help: () => {
293
293
  console.log(
294
- "[Pyreon] $p commands:\n" +
295
- " $p.components() — list all mounted components\n" +
296
- " $p.tree() — component tree (roots only)\n" +
297
- " $p.highlight(id)— outline a component\n" +
298
- " $p.inspect() — toggle component inspector\n" +
299
- " $p.stats() — print component count\n" +
300
- " $p.help() — this message",
294
+ '[Pyreon] $p commands:\n' +
295
+ ' $p.components() — list all mounted components\n' +
296
+ ' $p.tree() — component tree (roots only)\n' +
297
+ ' $p.highlight(id)— outline a component\n' +
298
+ ' $p.inspect() — toggle component inspector\n' +
299
+ ' $p.stats() — print component count\n' +
300
+ ' $p.help() — this message',
301
301
  )
302
302
  },
303
303
  }
package/src/hydrate.ts CHANGED
@@ -16,7 +16,7 @@
16
16
  * Falls back to mountChild() whenever DOM structure doesn't match the VNode.
17
17
  */
18
18
 
19
- import type { ComponentFn, Ref, VNode, VNodeChild } from "@pyreon/core"
19
+ import type { ComponentFn, Ref, VNode, VNodeChild } from '@pyreon/core'
20
20
  import {
21
21
  dispatchToErrorBoundary,
22
22
  ForSymbol,
@@ -24,13 +24,13 @@ import {
24
24
  PortalSymbol,
25
25
  reportError,
26
26
  runWithHooks,
27
- } from "@pyreon/core"
28
- import { effectScope, renderEffect, runUntracked, setCurrentScope } from "@pyreon/reactivity"
29
- import { setupDelegation } from "./delegate"
30
- import { warnHydrationMismatch } from "./hydration-debug"
31
- import { mountChild } from "./mount"
32
- import { mountReactive } from "./nodes"
33
- import { applyProps } from "./props"
27
+ } from '@pyreon/core'
28
+ import { effectScope, renderEffect, runUntracked, setCurrentScope } from '@pyreon/reactivity'
29
+ import { setupDelegation } from './delegate'
30
+ import { warnHydrationMismatch } from './hydration-debug'
31
+ import { mountChild } from './mount'
32
+ import { mountReactive } from './nodes'
33
+ import { applyProps } from './props'
34
34
 
35
35
  type Cleanup = () => void
36
36
  const noop: Cleanup = () => {
@@ -99,12 +99,12 @@ function hydrateReactiveChild(
99
99
  const initial = runUntracked(child)
100
100
 
101
101
  if (initial == null || initial === false) {
102
- const marker = insertMarker(parent, domNode, "pyreon")
102
+ const marker = insertMarker(parent, domNode, 'pyreon')
103
103
  const cleanup = mountReactive(child, parent, marker, mountChild)
104
104
  return [cleanup, domNode]
105
105
  }
106
106
 
107
- if (typeof initial === "string" || typeof initial === "number" || typeof initial === "boolean") {
107
+ if (typeof initial === 'string' || typeof initial === 'number' || typeof initial === 'boolean') {
108
108
  return hydrateReactiveText(
109
109
  child as () => string | number | boolean | null | undefined,
110
110
  domNode,
@@ -114,7 +114,7 @@ function hydrateReactiveChild(
114
114
  )
115
115
  }
116
116
 
117
- const marker = insertMarker(parent, domNode, "pyreon")
117
+ const marker = insertMarker(parent, domNode, 'pyreon')
118
118
  const cleanup = mountReactive(child, parent, marker, mountChild)
119
119
  const next = domNode ? nextReal(domNode) : null
120
120
  return [cleanup, next]
@@ -132,11 +132,11 @@ function hydrateReactiveText(
132
132
  const textNode = domNode as Text
133
133
  const dispose = renderEffect(() => {
134
134
  const v = child()
135
- textNode.data = v == null ? "" : String(v)
135
+ textNode.data = v == null ? '' : String(v)
136
136
  })
137
137
  return [dispose, nextReal(domNode)]
138
138
  }
139
- warnHydrationMismatch("text", "TextNode", domNode?.nodeType ?? "null", `${path} > reactive`)
139
+ warnHydrationMismatch('text', 'TextNode', domNode?.nodeType ?? 'null', `${path} > reactive`)
140
140
  const cleanup = mountChild(child, parent, anchor)
141
141
  return [cleanup, domNode]
142
142
  }
@@ -154,7 +154,7 @@ function hydrateVNode(
154
154
  }
155
155
 
156
156
  if (vnode.type === ForSymbol) {
157
- const marker = insertMarker(parent, domNode, "pyreon-for")
157
+ const marker = insertMarker(parent, domNode, 'pyreon-for')
158
158
  const cleanup = mountChild(vnode, parent, marker)
159
159
  return [cleanup, null]
160
160
  }
@@ -164,11 +164,11 @@ function hydrateVNode(
164
164
  return [cleanup, domNode]
165
165
  }
166
166
 
167
- if (typeof vnode.type === "function") {
167
+ if (typeof vnode.type === 'function') {
168
168
  return hydrateComponent(vnode, domNode, parent, anchor, path)
169
169
  }
170
170
 
171
- if (typeof vnode.type === "string") {
171
+ if (typeof vnode.type === 'string') {
172
172
  return hydrateElement(vnode, domNode, parent, anchor, path)
173
173
  }
174
174
 
@@ -180,7 +180,7 @@ function hydrateChild(
180
180
  domNode: ChildNode | null,
181
181
  parent: Node,
182
182
  anchor: Node | null,
183
- path = "root",
183
+ path = 'root',
184
184
  ): [Cleanup, ChildNode | null] {
185
185
  if (Array.isArray(child)) {
186
186
  const cleanups: Cleanup[] = []
@@ -200,15 +200,15 @@ function hydrateChild(
200
200
 
201
201
  if (child == null || child === false) return [noop, domNode]
202
202
 
203
- if (typeof child === "function") {
203
+ if (typeof child === 'function') {
204
204
  return hydrateReactiveChild(child as () => VNodeChild, domNode, parent, anchor, path)
205
205
  }
206
206
 
207
- if (typeof child === "string" || typeof child === "number") {
207
+ if (typeof child === 'string' || typeof child === 'number') {
208
208
  if (domNode?.nodeType === Node.TEXT_NODE) {
209
209
  return [() => (domNode as Text).remove(), nextReal(domNode)]
210
210
  }
211
- warnHydrationMismatch("text", "TextNode", domNode?.nodeType ?? "null", `${path} > text`)
211
+ warnHydrationMismatch('text', 'TextNode', domNode?.nodeType ?? 'null', `${path} > text`)
212
212
  const cleanup = mountChild(child, parent, anchor)
213
213
  return [cleanup, domNode]
214
214
  }
@@ -223,7 +223,7 @@ function hydrateElement(
223
223
  domNode: ChildNode | null,
224
224
  parent: Node,
225
225
  anchor: Node | null,
226
- path = "root",
226
+ path = 'root',
227
227
  ): [Cleanup, ChildNode | null] {
228
228
  const elPath = `${path} > ${vnode.type as string}`
229
229
 
@@ -247,12 +247,12 @@ function hydrateElement(
247
247
  // Set ref
248
248
  const ref = vnode.props.ref as Ref<Element> | ((el: Element) => void) | undefined
249
249
  if (ref) {
250
- if (typeof ref === "function") ref(el)
250
+ if (typeof ref === 'function') ref(el)
251
251
  else ref.current = el
252
252
  }
253
253
 
254
254
  const cleanup = () => {
255
- if (ref && typeof ref === "object") ref.current = null
255
+ if (ref && typeof ref === 'object') ref.current = null
256
256
  for (const c of cleanups) c()
257
257
  el.remove()
258
258
  }
@@ -264,8 +264,8 @@ function hydrateElement(
264
264
  const actual =
265
265
  domNode?.nodeType === Node.ELEMENT_NODE
266
266
  ? (domNode as Element).tagName.toLowerCase()
267
- : (domNode?.nodeType ?? "null")
268
- warnHydrationMismatch("tag", vnode.type, actual, elPath)
267
+ : (domNode?.nodeType ?? 'null')
268
+ warnHydrationMismatch('tag', vnode.type, actual, elPath)
269
269
  const cleanup = mountChild(vnode, parent, anchor)
270
270
  return [cleanup, domNode]
271
271
  }
@@ -277,7 +277,7 @@ function hydrateChildren(
277
277
  domNode: ChildNode | null,
278
278
  parent: Node,
279
279
  anchor: Node | null,
280
- path = "root",
280
+ path = 'root',
281
281
  ): [Cleanup, ChildNode | null] {
282
282
  if (children.length === 0) return [noop, domNode]
283
283
 
@@ -308,7 +308,7 @@ function hydrateComponent(
308
308
  domNode: ChildNode | null,
309
309
  parent: Node,
310
310
  anchor: Node | null,
311
- path = "root",
311
+ path = 'root',
312
312
  ): [Cleanup, ChildNode | null] {
313
313
  const scope = effectScope()
314
314
  setCurrentScope(scope)
@@ -318,7 +318,7 @@ function hydrateComponent(
318
318
  let nextDom: ChildNode | null = domNode
319
319
 
320
320
  // Function.name is always a string per spec; || handles empty string, avoids uncoverable ?? branch
321
- const componentName = ((vnode.type as ComponentFn).name || "Anonymous") as string
321
+ const componentName = ((vnode.type as ComponentFn).name || 'Anonymous') as string
322
322
  const mergedProps =
323
323
  (vnode.children ?? []).length > 0 &&
324
324
  (vnode.props as Record<string, unknown>).children === undefined
@@ -341,7 +341,7 @@ function hydrateComponent(
341
341
  console.error(`[Pyreon] Error hydrating component <${componentName}>:`, err)
342
342
  reportError({
343
343
  component: componentName,
344
- phase: "setup",
344
+ phase: 'setup',
345
345
  error: err,
346
346
  timestamp: Date.now(),
347
347
  props: vnode.props as Record<string, unknown>,
@@ -373,7 +373,7 @@ function hydrateComponent(
373
373
  })
374
374
  if (c) mountCleanups.push(c)
375
375
  } catch (err) {
376
- reportError({ component: componentName, phase: "mount", error: err, timestamp: Date.now() })
376
+ reportError({ component: componentName, phase: 'mount', error: err, timestamp: Date.now() })
377
377
  }
378
378
  }
379
379
 
@@ -9,7 +9,7 @@
9
9
  * enableHydrationWarnings()
10
10
  */
11
11
 
12
- const __DEV__ = typeof process !== "undefined" && process.env.NODE_ENV !== "production"
12
+ const __DEV__ = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'
13
13
 
14
14
  let _enabled = __DEV__
15
15
 
@@ -29,7 +29,7 @@ export function disableHydrationWarnings(): void {
29
29
  * @param path - Human-readable path in the tree, e.g. "root > div > span"
30
30
  */
31
31
  export function warnHydrationMismatch(
32
- _type: "tag" | "text" | "missing",
32
+ _type: 'tag' | 'text' | 'missing',
33
33
  _expected: unknown,
34
34
  _actual: unknown,
35
35
  _path: string,
package/src/index.ts CHANGED
@@ -1,26 +1,26 @@
1
1
  // @pyreon/runtime-dom — surgical signal-to-DOM renderer (no virtual DOM)
2
2
 
3
- export { DELEGATED_EVENTS, delegatedPropName, setupDelegation } from "./delegate"
4
- export type { DevtoolsComponentEntry, PyreonDevtools } from "./devtools"
5
- export { hydrateRoot } from "./hydrate"
6
- export { disableHydrationWarnings, enableHydrationWarnings } from "./hydration-debug"
7
- export type { KeepAliveProps } from "./keep-alive"
8
- export { KeepAlive } from "./keep-alive"
9
- export { mountChild } from "./mount"
10
- export type { SanitizeFn } from "./props"
11
- export { applyProp, applyProps, sanitizeHtml, setSanitizer } from "./props"
12
- export { _bindDirect, _bindText, _tpl, createTemplate } from "./template"
13
- export type { TransitionProps } from "./transition"
14
- export { Transition } from "./transition"
15
- export type { TransitionGroupProps } from "./transition-group"
16
- export { TransitionGroup } from "./transition-group"
3
+ export { DELEGATED_EVENTS, delegatedPropName, setupDelegation } from './delegate'
4
+ export type { DevtoolsComponentEntry, PyreonDevtools } from './devtools'
5
+ export { hydrateRoot } from './hydrate'
6
+ export { disableHydrationWarnings, enableHydrationWarnings } from './hydration-debug'
7
+ export type { KeepAliveProps } from './keep-alive'
8
+ export { KeepAlive } from './keep-alive'
9
+ export { mountChild } from './mount'
10
+ export type { SanitizeFn } from './props'
11
+ export { applyProp, applyProps, sanitizeHtml, setSanitizer } from './props'
12
+ export { _bindDirect, _bindText, _tpl, createTemplate } from './template'
13
+ export type { TransitionProps } from './transition'
14
+ export { Transition } from './transition'
15
+ export type { TransitionGroupProps } from './transition-group'
16
+ export { TransitionGroup } from './transition-group'
17
17
 
18
- import type { VNodeChild } from "@pyreon/core"
19
- import { setupDelegation } from "./delegate"
20
- import { installDevTools } from "./devtools"
21
- import { mountChild } from "./mount"
18
+ import type { VNodeChild } from '@pyreon/core'
19
+ import { setupDelegation } from './delegate'
20
+ import { installDevTools } from './devtools'
21
+ import { mountChild } from './mount'
22
22
 
23
- const __DEV__ = typeof process !== "undefined" && process.env.NODE_ENV !== "production"
23
+ const __DEV__ = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'
24
24
 
25
25
  /**
26
26
  * Mount a VNode tree into a container element.
@@ -38,7 +38,7 @@ export function mount(root: VNodeChild, container: Element): () => void {
38
38
  }
39
39
  installDevTools()
40
40
  setupDelegation(container)
41
- container.innerHTML = ""
41
+ container.innerHTML = ''
42
42
  return mountChild(root, container, null)
43
43
  }
44
44
 
package/src/keep-alive.ts CHANGED
@@ -1,7 +1,7 @@
1
- import type { Props, VNodeChild } from "@pyreon/core"
2
- import { createRef, h, onMount } from "@pyreon/core"
3
- import { effect } from "@pyreon/reactivity"
4
- import { mountChild } from "./mount"
1
+ import type { Props, VNodeChild } from '@pyreon/core'
2
+ import { createRef, h, onMount } from '@pyreon/core'
3
+ import { effect } from '@pyreon/reactivity'
4
+ import { mountChild } from './mount'
5
5
 
6
6
  export interface KeepAliveProps extends Props {
7
7
  /**
@@ -57,7 +57,7 @@ export function KeepAlive(props: KeepAliveProps): VNodeChild {
57
57
  }
58
58
 
59
59
  // Show/hide without unmounting — state is fully preserved
60
- container.style.display = isActive ? "" : "none"
60
+ container.style.display = isActive ? '' : 'none'
61
61
  })
62
62
 
63
63
  return () => {
@@ -68,5 +68,5 @@ export function KeepAlive(props: KeepAliveProps): VNodeChild {
68
68
 
69
69
  // `display: contents` makes the wrapper transparent to layout
70
70
  // (children appear as if directly in the parent flow)
71
- return h("div", { ref: containerRef, style: "display: contents" })
71
+ return h('div', { ref: containerRef, style: 'display: contents' })
72
72
  }