gorsee 0.1.0

package/src/runtime/router.ts

@@ -0,0 +1,224 @@
+// Client-side SPA router
+// Intercepts link clicks, fetches partial pages from server, swaps content
+// Uses History API for back/forward navigation
+
+import { hydrate } from "./client.ts"
+
+interface NavigationResult {
+  html: string
+  data?: unknown
+  params?: Record<string, string>
+  title?: string
+  css?: string[]
+  script?: string
+}
+
+type NavigateCallback = (url: string) => void
+type BeforeNavigateCallback = (url: string) => boolean | void
+
+let currentPath = ""
+const subscribers: NavigateCallback[] = []
+const beforeNavigateHooks: BeforeNavigateCallback[] = []
+let navigating = false
+let loadingElement: HTMLElement | null = null
+
+/** Set a loading indicator element to show during navigation */
+export function setLoadingElement(el: HTMLElement): void {
+  loadingElement = el
+}
+
+function showLoading(): void {
+  if (loadingElement) {
+    loadingElement.style.display = ""
+    loadingElement.removeAttribute("hidden")
+  }
+}
+
+function hideLoading(): void {
+  if (loadingElement) {
+    loadingElement.style.display = "none"
+  }
+}
+
+export function onNavigate(fn: NavigateCallback): () => void {
+  subscribers.push(fn)
+  return () => {
+    const i = subscribers.indexOf(fn)
+    if (i >= 0) subscribers.splice(i, 1)
+  }
+}
+
+export function beforeNavigate(fn: BeforeNavigateCallback): () => void {
+  beforeNavigateHooks.push(fn)
+  return () => {
+    const i = beforeNavigateHooks.indexOf(fn)
+    if (i >= 0) beforeNavigateHooks.splice(i, 1)
+  }
+}
+
+export function getCurrentPath(): string {
+  return currentPath
+}
+
+async function fetchPage(url: string): Promise<NavigationResult> {
+  const res = await fetch(url, {
+    headers: { "X-Gorsee-Navigate": "partial" },
+  })
+  if (!res.ok) throw new Error(`Navigation failed: ${res.status}`)
+  return res.json()
+}
+
+function updateHead(result: NavigationResult): void {
+  if (result.title) document.title = result.title
+
+  // Remove old route CSS
+  document.querySelectorAll("link[data-g-route-css]").forEach((el) => el.remove())
+
+  // Add new route CSS
+  if (result.css) {
+    for (const href of result.css) {
+      const link = document.createElement("link")
+      link.rel = "stylesheet"
+      link.href = href
+      link.dataset.gRouteCss = ""
+      document.head.appendChild(link)
+    }
+  }
+}
+
+function updateDataScript(result: NavigationResult): void {
+  // Update __GORSEE_DATA__
+  let dataEl = document.getElementById("__GORSEE_DATA__")
+  if (result.data !== undefined) {
+    if (!dataEl) {
+      const script = document.createElement("script")
+      script.id = "__GORSEE_DATA__"
+      script.type = "application/json"
+      document.body.appendChild(script)
+      dataEl = script
+    }
+    dataEl.textContent = JSON.stringify(result.data)
+  } else if (dataEl) {
+    dataEl.remove()
+  }
+
+  // Update __GORSEE_PARAMS__
+  if (result.params) {
+    (globalThis as unknown as Record<string, unknown>).__GORSEE_PARAMS__ = result.params
+  }
+}
+
+export async function navigate(url: string, pushState = true): Promise<void> {
+  if (navigating) return
+  if (url === currentPath) return
+
+  // Before-navigate hooks (can cancel)
+  for (const hook of beforeNavigateHooks) {
+    if (hook(url) === false) return
+  }
+
+  navigating = true
+  showLoading()
+  try {
+    const result = await fetchPage(url)
+    const container = document.getElementById("app")
+    if (!container) return
+
+    // Update DOM
+    container.innerHTML = result.html
+    updateHead(result)
+    updateDataScript(result)
+
+    // Update history
+    if (pushState) {
+      history.pushState({ gorsee: true }, "", url)
+    }
+    currentPath = url
+
+    // Hydrate new content
+    if (result.script) {
+      const mod = await import(/* @vite-ignore */ result.script)
+      if (mod.default && typeof mod.default === "function") {
+        const data = result.data ?? {}
+        const params = result.params ?? {}
+        hydrate(() => mod.default({ data, params }), container)
+      }
+    }
+
+    // Scroll to top
+    window.scrollTo(0, 0)
+
+    // Notify subscribers
+    for (const fn of subscribers) fn(url)
+  } finally {
+    hideLoading()
+    navigating = false
+  }
+}
+
+// Prefetch cache
+const prefetchCache = new Set<string>()
+
+export function prefetch(url: string): void {
+  if (prefetchCache.has(url)) return
+  prefetchCache.add(url)
+  // Use low-priority fetch
+  const link = document.createElement("link")
+  link.rel = "prefetch"
+  link.href = url
+  link.setAttribute("as", "fetch")
+  link.setAttribute("crossorigin", "")
+  document.head.appendChild(link)
+}
+
+function shouldHandleClick(e: MouseEvent, anchor: HTMLAnchorElement): boolean {
+  // Don't handle modified clicks (new tab, etc.)
+  if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return false
+  if (e.button !== 0) return false
+
+  // Don't handle links with target
+  if (anchor.target && anchor.target !== "_self") return false
+
+  // Only handle same-origin
+  if (anchor.origin !== location.origin) return false
+
+  // Don't handle downloads
+  if (anchor.hasAttribute("download")) return false
+
+  // Don't handle hash-only links
+  if (anchor.pathname === location.pathname && anchor.hash) return false
+
+  return true
+}
+
+export function initRouter(): void {
+  currentPath = location.pathname
+
+  // Intercept link clicks
+  document.addEventListener("click", (e) => {
+    const anchor = (e.target as Element).closest?.("a[href]") as HTMLAnchorElement | null
+    if (!anchor) return
+    if (anchor.dataset.gNoRouter !== undefined) return
+
+    if (shouldHandleClick(e, anchor)) {
+      e.preventDefault()
+      navigate(anchor.pathname + anchor.search)
+    }
+  })
+
+  // Handle back/forward
+  window.addEventListener("popstate", (e) => {
+    if (e.state?.gorsee || currentPath !== location.pathname) {
+      navigate(location.pathname + location.search, false)
+    }
+  })
+
+  // Prefetch on hover
+  document.addEventListener("mouseover", (e) => {
+    const anchor = (e.target as Element).closest?.("a[href]") as HTMLAnchorElement | null
+    if (!anchor) return
+    if (anchor.origin !== location.origin) return
+    if (anchor.dataset.gNoRouter !== undefined) return
+    prefetch(anchor.pathname + anchor.search)
+  })
+}

package/src/runtime/server.ts

@@ -0,0 +1,102 @@
+// Server-side rendering -- renders component tree to HTML string
+// No DOM API used -- pure string concatenation
+
+import type { Component } from "./jsx-runtime.ts"
+import { escapeHTML, escapeAttr, VOID_ELEMENTS, resolveValue } from "./html-escape.ts"
+
+export type VNode = {
+  type: string | Component | symbol
+  props: Record<string, unknown>
+}
+
+function renderChild(child: unknown): string {
+  if (child == null || typeof child === "boolean") return ""
+
+  if (Array.isArray(child)) {
+    let s = ""
+    for (let i = 0; i < child.length; i++) s += renderChild(child[i])
+    return s
+  }
+
+  if (typeof child === "object" && child !== null && "type" in child) {
+    return renderVNode(child as VNode)
+  }
+
+  const resolved = resolveValue(child)
+  if (resolved == null || typeof resolved === "boolean") return ""
+  return escapeHTML(String(resolved))
+}
+
+function renderAttrs(props: Record<string, unknown>): string {
+  let result = ""
+
+  for (const key in props) {
+    if (key === "children" || key === "ref" || key.startsWith("on:")) continue
+
+    const value = resolveValue(props[key])
+
+    if (key === "className" || key === "class") {
+      if (value != null) result += ` class="${escapeAttr(String(value))}"`
+      continue
+    }
+
+    if (key === "style" && typeof value === "object" && value !== null) {
+      let styles = ""
+      for (const p in value as Record<string, unknown>) {
+        if (styles) styles += "; "
+        const sv = resolveValue((value as Record<string, unknown>)[p])
+        if (sv != null) styles += `${p}: ${sv}`
+      }
+      result += ` style="${escapeAttr(styles)}"`
+      continue
+    }
+
+    if (typeof value === "boolean") {
+      if (value) result += ` ${key}`
+    } else if (value != null) {
+      result += ` ${key}="${escapeAttr(String(value))}"`
+    }
+  }
+
+  return result
+}
+
+function renderVNode(vnode: VNode): string {
+  const { type, props } = vnode
+
+  // Fragment
+  if (typeof type === "symbol") {
+    return renderChild(props.children)
+  }
+
+  // Component
+  if (typeof type === "function") {
+    const result = type(props)
+    return renderChild(result)
+  }
+
+  // HTML element
+  const tag = type as string
+  const attrs = renderAttrs(props)
+
+  if (VOID_ELEMENTS.has(tag)) {
+    return `<${tag}${attrs} />`
+  }
+
+  const children = renderChild(props.children)
+  return `<${tag}${attrs}>${children}</${tag}>`
+}
+
+// Server-side jsx function -- creates VNodes instead of DOM nodes
+export function ssrJsx(
+  type: string | Component | symbol,
+  props: Record<string, unknown> | null
+): VNode {
+  return { type, props: props ?? {} }
+}
+
+export const ssrJsxs = ssrJsx
+
+export function renderToString(root: unknown): string {
+  return renderChild(root)
+}

package/src/runtime/stream.ts

@@ -0,0 +1,182 @@
+// Out-of-order streaming SSR
+// Sends HTML shell with Suspense fallbacks immediately,
+// then streams resolved chunks as data becomes available
+
+import type { Component } from "./jsx-runtime.ts"
+import { escapeHTML, escapeAttr, VOID_ELEMENTS, resolveValue } from "./html-escape.ts"
+
+interface SuspenseSlot {
+  id: string
+  fallback: unknown
+  children: unknown
+  resolve: () => Promise<unknown>
+}
+
+interface StreamContext {
+  suspenseSlots: SuspenseSlot[]
+  nextId: number
+}
+
+interface VNode {
+  type: string | Component | symbol
+  props: Record<string, unknown>
+  __gorsee_suspense?: boolean
+}
+
+export function streamJsx(
+  type: string | Component | symbol,
+  props: Record<string, unknown> | null
+): VNode {
+  return { type, props: props ?? {} }
+}
+
+export const streamJsxs = streamJsx
+
+// Marker for Suspense components in streaming mode
+export function StreamSuspense(props: {
+  fallback: unknown
+  children: unknown
+  __streamCtx?: StreamContext
+}): VNode {
+  const node = streamJsx("gorsee-suspense", {
+    fallback: props.fallback,
+    children: props.children,
+  })
+  node.__gorsee_suspense = true
+  return node
+}
+
+function renderAttrs(props: Record<string, unknown>): string {
+  const parts: string[] = []
+  for (const [key, rawValue] of Object.entries(props)) {
+    if (key === "children" || key === "ref" || key === "fallback" || key.startsWith("on:")) continue
+    const value = resolveValue(rawValue)
+    if (key === "className" || key === "class") {
+      if (value != null) parts.push(` class="${escapeAttr(String(value))}"`)
+    } else if (typeof value === "boolean") {
+      if (value) parts.push(` ${key}`)
+    } else if (value != null) {
+      parts.push(` ${key}="${escapeAttr(String(value))}"`)
+    }
+  }
+  return parts.join("")
+}
+
+function renderShellNode(node: unknown, ctx: StreamContext): string {
+  if (node == null || typeof node === "boolean") return ""
+
+  if (Array.isArray(node)) {
+    return node.map((n) => renderShellNode(n, ctx)).join("")
+  }
+
+  if (typeof node === "object" && node !== null && "type" in node) {
+    const vnode = node as VNode
+
+    // Suspense boundary -- render fallback, register slot for later resolution
+    if (vnode.__gorsee_suspense) {
+      const id = `s${ctx.nextId++}`
+      const fallbackHtml = renderShellNode(vnode.props.fallback, ctx)
+
+      ctx.suspenseSlots.push({
+        id,
+        fallback: vnode.props.fallback,
+        children: vnode.props.children,
+        resolve: async () => {
+          // Resolve the async children
+          const children = vnode.props.children
+          if (typeof children === "function") {
+            return await (children as () => Promise<unknown>)()
+          }
+          return children
+        },
+      })
+
+      return `<div data-g-suspense="${id}">${fallbackHtml}</div>`
+    }
+
+    // Fragment
+    if (typeof vnode.type === "symbol") {
+      return renderShellNode(vnode.props.children, ctx)
+    }
+
+    // Component
+    if (typeof vnode.type === "function") {
+      const result = vnode.type(vnode.props)
+      return renderShellNode(result, ctx)
+    }
+
+    // HTML element
+    const tag = vnode.type as string
+    const attrs = renderAttrs(vnode.props)
+    if (VOID_ELEMENTS.has(tag)) return `<${tag}${attrs} />`
+    const children = renderShellNode(vnode.props.children, ctx)
+    return `<${tag}${attrs}>${children}</${tag}>`
+  }
+
+  const resolved = resolveValue(node)
+  if (resolved == null || typeof resolved === "boolean") return ""
+  return escapeHTML(String(resolved))
+}
+
+// Generate the inline script that swaps a Suspense fallback with resolved content
+function chunkScript(slotId: string, html: string): string {
+  return [
+    `<template data-g-chunk="${slotId}">${html}</template>`,
+    `<script>`,
+    `(function(){`,
+    `  var t=document.querySelector('[data-g-chunk="${slotId}"]');`,
+    `  var s=document.querySelector('[data-g-suspense="${slotId}"]');`,
+    `  if(t&&s){s.innerHTML=t.content.firstChild?'':'';s.replaceChildren(...t.content.childNodes);t.remove();s.removeAttribute('data-g-suspense')}`,
+    `})();`,
+    `</script>`,
+  ].join("")
+}
+
+export interface StreamOptions {
+  shell?: (body: string) => string
+}
+
+const defaultShell = (body: string) => `<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Gorsee App</title></head>
+<body><div id="app">${body}</div>`
+
+const STREAM_TAIL = `</body></html>`
+
+export function renderToStream(
+  root: unknown,
+  options?: StreamOptions
+): ReadableStream<Uint8Array> {
+  const shell = options?.shell ?? defaultShell
+  const encoder = new TextEncoder()
+  const ctx: StreamContext = { suspenseSlots: [], nextId: 0 }
+
+  return new ReadableStream({
+    async start(controller) {
+      // 1. Render shell synchronously (with fallbacks for Suspense boundaries)
+      const shellHtml = renderShellNode(root, ctx)
+      controller.enqueue(encoder.encode(shell(shellHtml)))
+
+      // 2. Resolve each Suspense slot and stream chunks
+      const promises = ctx.suspenseSlots.map(async (slot) => {
+        try {
+          const resolved = await slot.resolve()
+          const html = renderShellNode(resolved, ctx)
+          const script = chunkScript(slot.id, html)
+          controller.enqueue(encoder.encode(script))
+        } catch (err) {
+          const message = err instanceof Error ? err.message : String(err)
+          const errorHtml = `<div class="error">Error: ${escapeHTML(message)}</div>`
+          const script = chunkScript(slot.id, errorHtml)
+          controller.enqueue(encoder.encode(script))
+        }
+      })
+
+      await Promise.all(promises)
+
+      // 3. Close the stream
+      controller.enqueue(encoder.encode(STREAM_TAIL))
+      controller.close()
+    },
+  })
+}

package/src/runtime/suspense.ts

@@ -0,0 +1,37 @@
+// Suspense component -- shows fallback while async resources load
+// Works with createResource() from reactive module
+
+import { createSignal } from "../reactive/signal.ts"
+
+export interface SuspenseProps {
+  fallback: unknown
+  children: unknown
+}
+
+type AsyncChild = () => Promise<unknown>
+
+// Client-side Suspense: renders fallback, then swaps to content when ready
+export function Suspense(props: SuspenseProps): unknown {
+  const children = props.children
+
+  // If children is a function that returns a promise, handle async
+  if (typeof children === "function") {
+    const asyncFn = children as AsyncChild
+    const [resolved, setResolved] = createSignal<unknown>(null)
+    const [pending, setPending] = createSignal(true)
+
+    asyncFn().then((result) => {
+      setResolved(result)
+      setPending(false)
+    }).catch((err) => {
+      setResolved(err instanceof Error ? err.message : String(err))
+      setPending(false)
+    })
+
+    // Return a reactive choice between fallback and resolved
+    return () => pending() ? props.fallback : resolved()
+  }
+
+  // Synchronous children -- just return them
+  return children
+}

package/src/runtime/typed-routes.ts

@@ -0,0 +1,26 @@
+// Runtime helpers for type-safe route links and navigation
+
+/**
+ * Build a URL from a route pattern and params.
+ * Replaces [param] and [...param] placeholders with actual values.
+ */
+export function typedLink(
+  path: string,
+  params: Record<string, string> = {},
+): string {
+  return path
+    .replace(/\[\.\.\.(\w+)\]/g, (_, key) => params[key] ?? "")
+    .replace(/\[(\w+)\]/g, (_, key) => encodeURIComponent(params[key] ?? ""))
+}
+
+/**
+ * Navigate to a typed route. Client-side only.
+ * Dynamically imports the router to avoid circular dependencies.
+ */
+export function typedNavigate(
+  path: string,
+  params: Record<string, string> = {},
+): Promise<void> {
+  const url = typedLink(path, params)
+  return import("./router.ts").then((m) => m.navigate(url))
+}

package/src/runtime/validated-form.ts

@@ -0,0 +1,106 @@
+// Type-safe validated forms with branded types
+// Combines client-side validation with server-side action safety
+
+export interface FieldRule {
+  required?: boolean
+  minLength?: number
+  maxLength?: number
+  pattern?: RegExp
+  min?: number
+  max?: number
+  custom?: (value: string) => string | null  // return error message or null
+}
+
+export interface FormField {
+  name: string
+  rules: FieldRule
+  label?: string
+}
+
+export interface FormSchema {
+  fields: FormField[]
+}
+
+export interface ValidationError {
+  field: string
+  message: string
+}
+
+export interface ValidationResult<T> {
+  valid: boolean
+  data: T | null
+  errors: ValidationError[]
+}
+
+/** Define a form schema for validation */
+export function defineForm(fields: FormField[]): FormSchema {
+  return { fields }
+}
+
+function validateField(value: string | undefined, field: FormField): string | null {
+  const { rules, label } = field
+  const name = label ?? field.name
+  const v = value ?? ""
+
+  if (rules.required && !v.trim()) return `${name} is required`
+  if (!v && !rules.required) return null
+  if (rules.minLength !== undefined && v.length < rules.minLength)
+    return `${name} must be at least ${rules.minLength} characters`
+  if (rules.maxLength !== undefined && v.length > rules.maxLength)
+    return `${name} must be at most ${rules.maxLength} characters`
+  if (rules.pattern && !rules.pattern.test(v)) return `${name} format is invalid`
+  if (rules.min !== undefined && Number(v) < rules.min) return `${name} must be at least ${rules.min}`
+  if (rules.max !== undefined && Number(v) > rules.max) return `${name} must be at most ${rules.max}`
+  if (rules.custom) return rules.custom(v)
+  return null
+}
+
+/** Validate form data against schema */
+export function validateForm<T extends Record<string, string>>(
+  data: Record<string, string>,
+  schema: FormSchema,
+): ValidationResult<T> {
+  const errors: ValidationError[] = []
+
+  for (const field of schema.fields) {
+    const error = validateField(data[field.name], field)
+    if (error) errors.push({ field: field.name, message: error })
+  }
+
+  return {
+    valid: errors.length === 0,
+    data: errors.length === 0 ? (data as T) : null,
+    errors,
+  }
+}
+
+/** Server action helper: parse request and validate */
+export async function validateAction<T extends Record<string, string>>(
+  request: Request,
+  schema: FormSchema,
+): Promise<ValidationResult<T>> {
+  const contentType = request.headers.get("content-type") ?? ""
+  let data: Record<string, string>
+
+  if (contentType.includes("application/json")) {
+    data = await request.json()
+  } else {
+    const formData = await request.formData()
+    data = {}
+    formData.forEach((v, k) => { data[k] = String(v) })
+  }
+
+  return validateForm<T>(data, schema)
+}
+
+/** Generate client-side validation attributes for HTML inputs */
+export function fieldAttrs(field: FormField): Record<string, unknown> {
+  const attrs: Record<string, unknown> = { name: field.name }
+  if (field.rules.required) attrs.required = true
+  if (field.rules.minLength !== undefined) attrs.minlength = field.rules.minLength
+  if (field.rules.maxLength !== undefined) attrs.maxlength = field.rules.maxLength
+  if (field.rules.pattern) attrs.pattern = field.rules.pattern.source
+  if (field.rules.min !== undefined) attrs.min = field.rules.min
+  if (field.rules.max !== undefined) attrs.max = field.rules.max
+  return attrs
+}