effect-start 0.22.0 → 0.23.0

package/src/console/ui/Traces.tsx

@@ -0,0 +1,426 @@
+import * as ConsoleStore from "../ConsoleStore.ts"
+
+function formatDuration(ms: number | undefined): string {
+  if (ms == null) return "..."
+  if (ms < 1) return `${(ms * 1000).toFixed(0)}µs`
+  if (ms < 1000) return `${ms.toFixed(1)}ms`
+  return `${(ms / 1000).toFixed(2)}s`
+}
+
+function statusColor(status: string): string {
+  if (status === "ok") return "#22c55e"
+  if (status === "error") return "#ef4444"
+  return "#eab308"
+}
+
+function KeyValue({ label, value }: { label: string; value: string | undefined | null }) {
+  if (value == null) return null
+  return (
+    <div style="display:flex;gap:8px;padding:4px 0;border-bottom:1px solid #1e293b;font-size:12px">
+      <span style="color:#64748b;min-width:120px">{label}</span>
+      <span style="color:#e2e8f0;font-family:monospace;word-break:break-all">{value}</span>
+    </div>
+  )
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const bg = status === "ok" ? "#166534" : status === "error" ? "#7f1d1d" : "#713f12"
+  const fg = status === "ok" ? "#4ade80" : status === "error" ? "#fca5a5" : "#fde047"
+  return (
+    <span style={`font-size:11px;padding:2px 8px;border-radius:4px;background:${bg};color:${fg}`}>
+      {status}
+    </span>
+  )
+}
+
+// --- Tree building ---
+
+interface TreeSpan {
+  span: ConsoleStore.ConsoleSpan
+  depth: number
+  childCount: number
+  isLastChild: boolean
+  ancestorHasNextSibling: Array<boolean>
+}
+
+function buildSpanTree(spans: Array<ConsoleStore.ConsoleSpan>): Array<TreeSpan> {
+  const byId = new Map<string, ConsoleStore.ConsoleSpan>()
+  const childrenOf = new Map<string, Array<ConsoleStore.ConsoleSpan>>()
+
+  for (const s of spans) {
+    byId.set(s.spanId, s)
+  }
+
+  const roots: Array<ConsoleStore.ConsoleSpan> = []
+  for (const s of spans) {
+    if (s.parentSpanId && byId.has(s.parentSpanId)) {
+      let children = childrenOf.get(s.parentSpanId)
+      if (!children) {
+        children = []
+        childrenOf.set(s.parentSpanId, children)
+      }
+      children.push(s)
+    } else {
+      roots.push(s)
+    }
+  }
+
+  const sortByStart = (a: ConsoleStore.ConsoleSpan, b: ConsoleStore.ConsoleSpan) =>
+    Number(a.startTime - b.startTime)
+
+  roots.sort(sortByStart)
+  for (const children of childrenOf.values()) {
+    children.sort(sortByStart)
+  }
+
+  const result: Array<TreeSpan> = []
+
+  function walk(
+    span: ConsoleStore.ConsoleSpan,
+    depth: number,
+    isLast: boolean,
+    ancestors: Array<boolean>,
+  ) {
+    const children = childrenOf.get(span.spanId) ?? []
+    result.push({
+      span,
+      depth,
+      childCount: children.length,
+      isLastChild: isLast,
+      ancestorHasNextSibling: [...ancestors],
+    })
+    for (let i = 0; i < children.length; i++) {
+      walk(children[i], depth + 1, i === children.length - 1, [...ancestors, !isLast])
+    }
+  }
+
+  for (let i = 0; i < roots.length; i++) {
+    walk(roots[i], 0, i === roots.length - 1, [])
+  }
+
+  return result
+}
+
+// --- Components ---
+
+function TreeConnectors({ tree }: { tree: TreeSpan }) {
+  if (tree.depth === 0) return null
+
+  const indent = tree.depth * 20
+  const elements: Array<any> = []
+
+  for (let i = 0; i < tree.ancestorHasNextSibling.length; i++) {
+    if (tree.ancestorHasNextSibling[i]) {
+      elements.push(<div class="wf-vline" style={`left:${i * 20 + 6}px`} />)
+    }
+  }
+
+  if (tree.isLastChild) {
+    elements.push(<div class="wf-elbow" style={`left:${(tree.depth - 1) * 20 + 6}px`} />)
+  } else {
+    elements.push(<div class="wf-vline" style={`left:${(tree.depth - 1) * 20 + 6}px`} />)
+  }
+
+  elements.push(<div class="wf-hline" style={`left:${(tree.depth - 1) * 20 + 6}px;top:50%`} />)
+
+  return (
+    <div class="wf-tree" style={`width:${indent}px;position:relative`}>
+      {elements}
+    </div>
+  )
+}
+
+function TimeAxis({ totalMs }: { totalMs: number }) {
+  const ticks = 5
+  const labels: Array<string> = []
+  for (let i = 0; i <= ticks; i++) {
+    labels.push(formatDuration((totalMs / ticks) * i))
+  }
+  return (
+    <div class="wf-axis">
+      <div style="padding:4px 8px;color:#64748b;font-size:11px">Span</div>
+      <div class="wf-axis-ticks">
+        {labels.map((l) => (
+          <span>{l}</span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function WaterfallRow({
+  tree,
+  totalMs,
+  rootStart,
+}: {
+  tree: TreeSpan
+  totalMs: number
+  rootStart: bigint
+}) {
+  const s = tree.span
+  const offsetMs = Number(s.startTime - rootStart) / 1_000_000
+  const durMs = s.durationMs ?? 0
+  const leftPct = totalMs > 0 ? Math.min(100, (offsetMs / totalMs) * 100) : 0
+  const widthPct =
+    totalMs > 0 ? Math.max(0.5, Math.min(100 - leftPct, (durMs / totalMs) * 100)) : 100
+  const color = statusColor(s.status)
+
+  const durLabelLeft = leftPct + widthPct + 0.5
+
+  return (
+    <div class="wf-row">
+      <div class="wf-name">
+        <TreeConnectors tree={tree} />
+        <span style="overflow:hidden;text-overflow:ellipsis">{s.name}</span>
+        {tree.childCount > 0 && <span class="wf-badge">{tree.childCount}</span>}
+      </div>
+      <div class="wf-bar-cell">
+        <div class="wf-bar" style={`left:${leftPct}%;width:${widthPct}%;background:${color}`} />
+        <div class="wf-dur" style={`left:${durLabelLeft}%`}>
+          {formatDuration(s.durationMs)}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function MiniWaterfall({
+  spans,
+  totalMs,
+  rootStart,
+}: {
+  spans: Array<ConsoleStore.ConsoleSpan>
+  totalMs: number
+  rootStart: bigint
+}) {
+  if (totalMs <= 0) return <div class="mini-wf" />
+  return (
+    <div class="mini-wf">
+      {spans.map((s) => {
+        const offsetMs = Number(s.startTime - rootStart) / 1_000_000
+        const durMs = s.durationMs ?? 0
+        const leftPct = Math.min(100, (offsetMs / totalMs) * 100)
+        const widthPct = Math.max(0.3, Math.min(100 - leftPct, (durMs / totalMs) * 100))
+        return (
+          <div
+            class="mini-wf-bar"
+            style={`left:${leftPct}%;width:${widthPct}%;background:${statusColor(s.status)}`}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+// --- Exports ---
+
+export function groupByTraceId(
+  spans: Array<ConsoleStore.ConsoleSpan>,
+): Map<string, Array<ConsoleStore.ConsoleSpan>> {
+  const groups = new Map<string, Array<ConsoleStore.ConsoleSpan>>()
+  for (const span of spans) {
+    let group = groups.get(span.traceId)
+    if (!group) {
+      group = []
+      groups.set(span.traceId, group)
+    }
+    group.push(span)
+  }
+  return groups
+}
+
+export function TraceGroup({ spans }: { spans: Array<ConsoleStore.ConsoleSpan> }) {
+  if (spans.length === 0) return null
+  const root = spans.find((s) => !s.parentSpanId) ?? spans[0]
+  const traceId = root.traceId
+  const totalMs = root.durationMs ?? 0
+  const rootStart = root.startTime
+  const hasError = spans.some((s) => s.status === "error")
+  const status = hasError ? "error" : root.status
+
+  return (
+    <details class="tl-row">
+      <summary class="tl-summary tl-cols">
+        <span class="tl-cell tl-cell-status">
+          <span
+            style={`width:8px;height:8px;border-radius:50%;background:${statusColor(status)};display:block`}
+          />
+        </span>
+        <span class="tl-cell tl-cell-name">{root.name}</span>
+        <span class="tl-cell tl-cell-spans">{spans.length}</span>
+        <span class="tl-cell tl-cell-dur">{formatDuration(totalMs)}</span>
+        <span class="tl-cell tl-cell-id">{traceId.slice(0, 12)}</span>
+      </summary>
+      <div class="tl-body">
+        <div style="display:flex;gap:12px;align-items:center;margin-bottom:8px">
+          <a
+            href={`${ConsoleStore.store.prefix}/traces/${traceId}`}
+            style="color:#38bdf8;font-size:12px;text-decoration:none"
+          >
+            Full trace view
+          </a>
+          <StatusBadge status={status} />
+          <span style="color:#64748b;font-size:11px">
+            {spans.length} span{spans.length !== 1 ? "s" : ""}
+          </span>
+          <span style="color:#64748b;font-size:11px;font-family:monospace">
+            {formatDuration(totalMs)}
+          </span>
+          <span style="color:#475569;font-size:10px;font-family:monospace">{traceId}</span>
+        </div>
+        {spans.map((s) => {
+          const offsetMs = Number(s.startTime - rootStart) / 1_000_000
+          const leftPct = totalMs > 0 ? Math.min(100, (offsetMs / totalMs) * 100) : 0
+          const widthPct =
+            totalMs > 0
+              ? Math.max(0.5, Math.min(100 - leftPct, ((s.durationMs ?? 0) / totalMs) * 100))
+              : 100
+          return (
+            <div style="display:flex;align-items:center;gap:8px;padding:2px 0;font-size:11px;font-family:monospace">
+              <span style={`color:${statusColor(s.status)};min-width:10px`}>
+                {s.parentSpanId ? "  " : ""}
+              </span>
+              <span style="color:#d1d5db;min-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
+                {s.name}
+              </span>
+              <div style="flex:1;height:10px;background:#1f2937;border-radius:2px;position:relative;overflow:hidden">
+                <div
+                  style={`position:absolute;height:100%;border-radius:2px;background:${statusColor(s.status)};left:${leftPct}%;width:${widthPct}%`}
+                />
+              </div>
+              <span style="color:#9ca3af;min-width:60px;text-align:right">
+                {formatDuration(s.durationMs)}
+              </span>
+            </div>
+          )
+        })}
+      </div>
+    </details>
+  )
+}
+
+export function TraceGroups({ spans }: { spans: Array<ConsoleStore.ConsoleSpan> }) {
+  const groups = groupByTraceId(spans)
+  const sorted = Array.from(groups.values())
+    .sort((a, b) => Number(b[0].startTime) - Number(a[0].startTime))
+    .slice(0, 50)
+
+  if (sorted.length === 0) {
+    return <div class="empty">Waiting for traces...</div>
+  }
+  return (
+    <div class="tl-grid">
+      <div class="tl-header tl-cols">
+        <span class="tl-cell tl-cell-status" />
+        <span class="tl-cell tl-cell-name">Name</span>
+        <span class="tl-cell tl-cell-spans">Spans</span>
+        <span class="tl-cell tl-cell-dur">Duration</span>
+        <span class="tl-cell tl-cell-id">Trace</span>
+      </div>
+      {sorted.map((group) => (
+        <TraceGroup spans={group} />
+      ))}
+    </div>
+  )
+}
+
+export function TraceDetail({
+  prefix,
+  spans,
+}: {
+  prefix: string
+  spans: Array<ConsoleStore.ConsoleSpan>
+}) {
+  if (spans.length === 0) {
+    return <div class="empty">Trace not found</div>
+  }
+  const root = spans.find((s) => !s.parentSpanId) ?? spans[0]
+  const traceId = root.traceId
+  const totalMs = root.durationMs ?? 0
+  const rootStart = root.startTime
+  const startDate = new Date(Number(rootStart) / 1_000_000)
+  const tree = buildSpanTree(spans)
+
+  return (
+    <>
+      <div style="padding:12px 16px;border-bottom:1px solid #1e293b">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
+          <a href={`${prefix}/traces`} style="color:#64748b;text-decoration:none;font-size:12px">
+            Traces
+          </a>
+          <span style="color:#475569">/</span>
+          <span style="color:#e2e8f0;font-size:13px;font-family:monospace">{root.name}</span>
+        </div>
+        <div style="display:flex;gap:16px;font-size:12px;color:#94a3b8;align-items:center">
+          <StatusBadge status={root.status} />
+          <span>
+            {spans.length} span{spans.length !== 1 ? "s" : ""}
+          </span>
+          <span>{formatDuration(totalMs)}</span>
+          <span>{startDate.toLocaleTimeString("en", { hour12: false })}</span>
+          <span style="color:#475569;font-family:monospace;font-size:10px">{traceId}</span>
+        </div>
+      </div>
+
+      <div style="padding:8px 16px">
+        <MiniWaterfall spans={spans} totalMs={totalMs} rootStart={rootStart} />
+      </div>
+
+      <div style="padding:0 8px">
+        <TimeAxis totalMs={totalMs} />
+        <div class="wf-grid">
+          {tree.map((t) => (
+            <WaterfallRow tree={t} totalMs={totalMs} rootStart={rootStart} />
+          ))}
+        </div>
+      </div>
+
+      <div style="padding:8px">
+        {tree.map((t) => {
+          const s = t.span
+          const stacktrace = s.attributes["code.stacktrace"] as string | undefined
+          const customAttrs = Object.entries(s.attributes).filter(([k]) => k !== "code.stacktrace")
+
+          return (
+            <details class="span-panel" style="margin-bottom:4px">
+              <summary class="span-panel-header">
+                <span
+                  style={`width:8px;height:8px;border-radius:50%;background:${statusColor(s.status)};flex-shrink:0`}
+                />
+                <span style="color:#e2e8f0;font-family:monospace;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1">
+                  {s.name}
+                </span>
+                <StatusBadge status={s.status} />
+                <span style="color:#64748b;font-size:11px;font-family:monospace;margin-left:auto">
+                  {formatDuration(s.durationMs)}
+                </span>
+              </summary>
+              <div class="span-panel-body">
+                <KeyValue label="Span ID" value={s.spanId} />
+                <KeyValue label="Kind" value={s.kind} />
+                {s.parentSpanId && <KeyValue label="Parent" value={s.parentSpanId} />}
+                {stacktrace && <KeyValue label="Source" value={stacktrace} />}
+                {customAttrs.map(([k, v]) => (
+                  <KeyValue label={k} value={String(v)} />
+                ))}
+                {s.events.length > 0 && (
+                  <div style="margin-top:4px">
+                    <span style="color:#64748b;font-size:11px">Events:</span>
+                    {s.events.map((ev) => (
+                      <div style="padding:2px 0;font-size:11px;color:#94a3b8;font-family:monospace">
+                        {ev.name}
+                        {ev.attributes && (
+                          <span style="color:#64748b"> {JSON.stringify(ev.attributes)}</span>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </details>
+          )
+        })}
+      </div>
+    </>
+  )
+}

package/src/datastar/README.md

@@ -6,7 +6,7 @@ We experimentally place it inside Effect Start to have tighter integration with
 great out-of-the-box experience. After cleaning up the code, we're at around ~90kb of source code.
 We can probably cut it down by another ~10kb if we remove DataStar expression and use JS functions directly.
 
-Based on `812cbe9` (2025-02-05) following changes were made:
+We made following changes:
 
 - Path aliases converted to relative imports: `@engine/*` → `./engine/*`, etc.
 - Flattened `plugins/` directory: `plugins/actions/` → `actions/`, etc.
@@ -16,3 +16,8 @@ Based on `812cbe9` (2025-02-05) following changes were made:
 - Updated type declaration to conform to `erasableSyntaxOnly`:
   - Converted `enum ReactiveFlags` and `enum EffectFlags` to `const` objects with `as const`
   - Added type aliases `ReactiveFlags_X` to replace `ReactiveFlags.X` namespace types
+- Extends expressions with function form handled by `genRx`
+- `data-on` supports function form with optional config object:
+  - Function form: `data-on:click="(e) => { e.signals.count.value++ }"`
+  - Function form with config: `data-on:click="(e) => {...}, { debounce: 500, prevent: true }"`
+  - !! `__` attribute modifiers are no longer parsed by `on.ts` (now removed from imports)

package/src/datastar/actions/fetch.ts

@@ -285,7 +285,6 @@ const getLines = (onLine: (line: Uint8Array, fieldLength: number) => void) => {
             }
             break
           // @ts-expect-error:7029
-          // biome-ignore lint/suspicious/noFallthroughSwitchClause: intentional fallthrough for CR to LF
           case 13:
             discardTrailingNewline = true
           case 10:

package/src/datastar/attributes/on.ts

@@ -4,46 +4,66 @@ import {
   DATASTAR_FETCH_EVENT,
   DATASTAR_SIGNAL_PATCH_EVENT,
   endBatch,
+  type Modifiers,
 } from "../engine.ts"
-import { modifyCasing, modifyTiming, modifyViewTransition } from "../utils.ts"
+import { modifyTiming, modifyViewTransition } from "../utils.ts"
+
+// TODO: support leading/trailing options for debounce/throttle
+// e.g. { debounce: { ms: 500, leading: true, noTrailing: true } }
+const configToMods = (config: Record<string, any>): Modifiers => {
+  const mods: Modifiers = new Map()
+  for (const [k, v] of Object.entries(config)) {
+    if (v === true) {
+      mods.set(k, new Set())
+    } else if (typeof v === "number") {
+      mods.set(k, new Set([`${v}ms`]))
+    }
+  }
+  return mods
+}
 
 attribute({
   name: "on",
   requirement: "must",
   argNames: ["evt"],
-  apply({ el, key, mods, rx }) {
+  apply({ el, key, mods, rx, value }) {
+    let userFn: Function | undefined
+    let effectiveMods = mods
+
+    try {
+      const parts = Function(`return [${value}]`)()
+      if (typeof parts[0] === "function") {
+        userFn = parts[0]
+        if (parts[1]) effectiveMods = configToMods(parts[1])
+      }
+    } catch {}
+
     let target: Element | Window | Document = el
-    if (mods.has("window")) target = window
+    if (effectiveMods.has("window")) target = window
     let callback = (evt?: Event) => {
       if (evt) {
-        if (mods.has("prevent")) {
-          evt.preventDefault()
-        }
-        if (mods.has("stop")) {
-          evt.stopPropagation()
-        }
+        if (effectiveMods.has("prevent")) evt.preventDefault()
+        if (effectiveMods.has("stop")) evt.stopPropagation()
       }
       beginBatch()
-      rx(evt)
+      userFn ? userFn(evt) : rx(evt)
       endBatch()
     }
-    callback = modifyViewTransition(callback, mods)
-    callback = modifyTiming(callback, mods)
+    callback = modifyViewTransition(callback, effectiveMods)
+    callback = modifyTiming(callback, effectiveMods)
     const evtListOpts: AddEventListenerOptions = {
-      capture: mods.has("capture"),
-      passive: mods.has("passive"),
-      once: mods.has("once"),
+      capture: effectiveMods.has("capture"),
+      passive: effectiveMods.has("passive"),
+      once: effectiveMods.has("once"),
     }
-    if (mods.has("outside")) {
+    if (effectiveMods.has("outside")) {
       target = document
       const cb = callback
       callback = (evt?: Event) => {
-        if (!el.contains(evt?.target as HTMLElement)) {
-          cb(evt)
-        }
+        if (!el.contains(evt?.target as HTMLElement)) cb(evt)
       }
     }
-    const eventName = modifyCasing(key, mods, "kebab")
+    const eventName = key
     if (eventName === DATASTAR_FETCH_EVENT || eventName === DATASTAR_SIGNAL_PATCH_EVENT) {
       target = document
     }

package/src/datastar/engine.ts

@@ -116,6 +116,14 @@ export type MergePatchArgs = {
 }
 
 export type HTMLOrSVG = HTMLElement | SVGElement | MathMLElement
+
+export type DataEvent = Event & {
+  signals: Record<string, any>
+  actions: Record<string, (...args: Array<any>) => any>
+  target: HTMLOrSVG
+  window: Window & typeof globalThis
+}
+
 export type Modifiers = Map<string, Set<string>>
 
 export type EventCallbackHandler = (...args: Array<any>) => void
@@ -1187,6 +1195,49 @@ const genRx = (
   value: string,
   { returnsValue = false, argNames = [], cleanups = new Map() }: GenRxOptions = {},
 ): GenRxFn => {
+  if (/^\s*(?:async\s+)?(?:\(.*?\)\s*=>|[\w$]+\s*=>|function\s*[\w$]*\s*\()/.test(value)) {
+    const userFn = Function(`return (${value.trim()})`)()
+
+    return (el: HTMLOrSVG, ...args: Array<any>) => {
+      const actionsProxy = new Proxy({} as Record<string, any>, {
+        get:
+          (_, name: string) =>
+          (...actionArgs: Array<any>) => {
+            const err = error.bind(0, {
+              plugin: { type: "action", name },
+              element: { id: el.id, tag: el.tagName },
+              expression: { fnContent: value, value },
+            })
+            const fn = actions[name]
+            if (fn) return fn({ el, evt: undefined, error: err, cleanups }, ...actionArgs)
+            throw err("UndefinedAction")
+          },
+      })
+
+      const dataEvt = args[0] instanceof Event ? args[0] : new Event("datastar:expression")
+      Object.defineProperties(dataEvt, {
+        target: { value: el },
+        signals: { value: root },
+        actions: { value: actionsProxy },
+        window: { value: window },
+      })
+
+      try {
+        return userFn(dataEvt)
+      } catch (e: any) {
+        console.error(e)
+        throw error(
+          {
+            element: { id: el.id, tag: el.tagName },
+            expression: { fnContent: value, value },
+            error: e.message,
+          },
+          "ExecuteExpression",
+        )
+      }
+    }
+  }
+
   let expr = ""
   if (returnsValue) {
     const statementRe =

package/src/datastar/jsx.d.ts

@@ -0,0 +1,79 @@
+import type { DataEvent } from "./engine.ts"
+
+// Datastar object types for specific attributes
+type DatastarSignalsObject = Record<string, any>
+type DatastarClassObject = Record<string, boolean | string>
+type DatastarAttrObject = Record<string, string | boolean | number>
+type DatastarStyleObject = Record<string, string | number | boolean | null | undefined>
+
+type DatastarFn = (e: DataEvent) => any
+
+// TODO: support leading/trailing options
+// e.g. { debounce: { ms: 500, leading: true, noTrailing: true } }
+type DatastarOnConfig = {
+  prevent?: boolean
+  stop?: boolean
+  capture?: boolean
+  passive?: boolean
+  once?: boolean
+  outside?: boolean
+  window?: boolean
+  viewTransition?: boolean
+} & ({ debounce?: number; throttle?: never } | { debounce?: never; throttle?: number })
+
+type DatastarOnFn = DatastarFn | [handler: DatastarFn, config: DatastarOnConfig]
+
+/**
+ * Datastar attributes for reactive web applications
+ * @see https://data-star.dev/reference/attributes
+ */
+export interface DatastarAttributes {
+  // Core attributes that can accept objects (but also strings)
+  "data-signals"?: string | DatastarSignalsObject | undefined
+  "data-class"?: string | DatastarFn | DatastarClassObject | undefined
+  "data-attr"?: string | DatastarFn | DatastarAttrObject | undefined
+  "data-style"?: string | DatastarFn | DatastarStyleObject | undefined
+
+  // Boolean/presence attributes (but also strings)
+  "data-show"?: string | DatastarFn | boolean | undefined
+  "data-ignore"?: string | boolean | undefined
+  "data-ignore-morph"?: string | boolean | undefined
+
+  // Attributes that accept function expressions
+  "data-bind"?: string | undefined
+  "data-computed"?: string | DatastarFn | undefined
+  "data-effect"?: string | DatastarFn | undefined
+  "data-indicator"?: string | undefined
+  "data-json-signals"?: string | undefined
+  "data-on"?: string | DatastarOnFn | undefined
+  "data-on-intersect"?: string | DatastarOnFn | undefined
+  "data-on-interval"?: string | DatastarOnFn | undefined
+  "data-on-load"?: string | DatastarOnFn | undefined
+  "data-on-signal-patch"?: string | DatastarOnFn | undefined
+  "data-on-signal-patch-filter"?: string | undefined
+  "data-preserve-attr"?: string | undefined
+  "data-ref"?: string | undefined
+  "data-text"?: string | DatastarFn | undefined
+
+  // Pro attributes
+  "data-animate"?: string | undefined
+  "data-custom-validity"?: string | DatastarFn | undefined
+  "data-on-raf"?: string | DatastarOnFn | undefined
+  "data-on-resize"?: string | DatastarOnFn | undefined
+  "data-persist"?: string | undefined
+  "data-query-string"?: string | undefined
+  "data-replace-url"?: string | undefined
+  "data-scroll-into-view"?: string | undefined
+  "data-view-transition"?: string | undefined
+
+  // Dynamic attributes with suffixes
+  [key: `data-signals:${string}`]: string | undefined
+  [key: `data-class:${string}`]: string | DatastarFn | undefined
+  [key: `data-attr:${string}`]: string | DatastarFn | undefined
+  [key: `data-style:${string}`]: string | DatastarFn | undefined
+  [key: `data-bind:${string}`]: string | undefined
+  [key: `data-computed:${string}`]: string | DatastarFn | undefined
+  [key: `data-indicator:${string}`]: string | undefined
+  [key: `data-ref:${string}`]: string | undefined
+  [key: `data-on:${string}`]: string | DatastarOnFn | undefined
+}