@fictjs/runtime 0.16.0 → 0.17.0

package/src/loader.ts

@@ -36,6 +36,115 @@ function resolveModuleUrl(url: string): string {
   return url
 }
 
+function resolveAbsoluteModuleUrl(url: string, ownerDocument?: Document): string {
+  const baseUrl =
+    ownerDocument?.baseURI ?? (typeof document !== 'undefined' ? document.baseURI : undefined)
+  if (!baseUrl) return url
+
+  try {
+    return new URL(url, baseUrl).href
+  } catch {
+    return url
+  }
+}
+
+function normalizeImportUrl(url: string): string {
+  if (!url.startsWith('data:')) {
+    return url
+  }
+
+  const dataSeparatorIndex = url.indexOf(',')
+  if (dataSeparatorIndex === -1) {
+    return url
+  }
+
+  const metadata = url.slice(0, dataSeparatorIndex)
+  const payload = url.slice(dataSeparatorIndex + 1)
+  if (metadata.includes(';base64')) {
+    return url
+  }
+
+  try {
+    return `${metadata},${encodeURIComponent(decodeURIComponent(payload))}`
+  } catch {
+    return `${metadata},${encodeURIComponent(payload)}`
+  }
+}
+
+interface PreservedControlState {
+  value?: string
+  checked?: boolean
+  selectedIndex?: number
+  selectedValues?: string[]
+}
+
+function captureControlState(node: Element, event: Event): PreservedControlState | null {
+  if (event.type !== 'input' && event.type !== 'change') return null
+
+  if (node instanceof HTMLInputElement) {
+    if (node.type === 'file') return null
+    if (node.type === 'checkbox' || node.type === 'radio') {
+      return { checked: node.checked }
+    }
+    return { value: node.value }
+  }
+
+  if (node instanceof HTMLTextAreaElement) {
+    return { value: node.value }
+  }
+
+  if (node instanceof HTMLSelectElement) {
+    return node.multiple
+      ? {
+          selectedValues: Array.from(node.selectedOptions).map(option => option.value),
+        }
+      : {
+          value: node.value,
+          selectedIndex: node.selectedIndex,
+        }
+  }
+
+  return null
+}
+
+function restoreControlState(node: Element, state: PreservedControlState | null): void {
+  if (!state) return
+
+  if (node instanceof HTMLInputElement) {
+    if (typeof state.checked === 'boolean') {
+      node.checked = state.checked
+    }
+    if (typeof state.value === 'string' && node.type !== 'file') {
+      node.value = state.value
+    }
+    return
+  }
+
+  if (node instanceof HTMLTextAreaElement) {
+    if (typeof state.value === 'string') {
+      node.value = state.value
+    }
+    return
+  }
+
+  if (node instanceof HTMLSelectElement) {
+    if (Array.isArray(state.selectedValues) && node.multiple) {
+      const selected = new Set(state.selectedValues)
+      for (const option of Array.from(node.options)) {
+        option.selected = selected.has(option.value)
+      }
+      return
+    }
+
+    if (typeof state.selectedIndex === 'number') {
+      node.selectedIndex = state.selectedIndex
+    }
+    if (typeof state.value === 'string') {
+      node.value = state.value
+    }
+  }
+}
+
 // ============================================================================
 // Types
 // ============================================================================
@@ -557,29 +666,69 @@ async function handleResumableEventAsync(event: Event): Promise<void> {
       }
     }
 
+    const preservedControlState = captureControlState(node, event)
+    let resumedDuringEvent = false
+
     // Resume FIRST to set up reactive bindings BEFORE the handler runs
     if (!hydratedScopes.has(scopeId)) {
       const resumeQrl = host.getAttribute('data-fict-h')
       if (resumeQrl) {
         const { url: resumeUrl, exportName: resumeExport } = parseQrl(resumeQrl)
         const resolvedResumeUrl = resolveModuleUrl(resumeUrl)
+        const resolvedAbsoluteResumeUrl = resolveAbsoluteModuleUrl(
+          resolvedResumeUrl,
+          host.ownerDocument ?? undefined,
+        )
+        const resolvedResumeQrl = `${resolvedResumeUrl}#${resumeExport}`
+        const resolvedAbsoluteResumeQrl = `${resolvedAbsoluteResumeUrl}#${resumeExport}`
+        const normalizedResumeImportUrl = normalizeImportUrl(resolvedResumeUrl)
         // Load the module to ensure resume functions are registered
-        await import(/* @vite-ignore */ resolvedResumeUrl)
+        await import(/* @vite-ignore */ normalizedResumeImportUrl)
         // Get resume function from registry (not module exports)
-        const resumeFn = __fictGetResume(resumeExport)
+        const resumeFn =
+          __fictGetResume(resumeQrl) ??
+          __fictGetResume(resolvedResumeQrl) ??
+          __fictGetResume(resolvedAbsoluteResumeQrl) ??
+          __fictGetResume(resumeExport)
         if (typeof resumeFn === 'function') {
           await (resumeFn as (scopeId: string, host: Element) => unknown)(scopeId, host)
           hydratedScopes.add(scopeId)
+          resumedDuringEvent = true
         }
       }
     }
 
+    if (resumedDuringEvent) {
+      restoreControlState(node, preservedControlState)
+    }
+
     // THEN run the handler - now signal updates will trigger DOM updates
     const resolvedUrl = resolveModuleUrl(url)
-    const mod = await import(/* @vite-ignore */ resolvedUrl)
+    const normalizedImportUrl = normalizeImportUrl(resolvedUrl)
+    const mod = await import(/* @vite-ignore */ normalizedImportUrl)
     const handler = (mod as Record<string, unknown>)[exportName]
     if (typeof handler === 'function') {
-      await (handler as (scopeId: string, ev: Event, el: Element) => unknown)(scopeId, event, node)
+      const originalCurrentTarget = event.currentTarget
+      Object.defineProperty(event, 'currentTarget', {
+        configurable: true,
+        get() {
+          return node
+        },
+      })
+      try {
+        await (handler as (scopeId: string, ev: Event, el: Element) => unknown)(
+          scopeId,
+          event,
+          node,
+        )
+      } finally {
+        Object.defineProperty(event, 'currentTarget', {
+          configurable: true,
+          get() {
+            return originalCurrentTarget
+          },
+        })
+      }
     }
 
     return

package/src/resume.ts

@@ -294,23 +294,23 @@ export function __fictQrl(moduleId: string, exportName: string): string {
   return `${moduleId}#${exportName}`
 }
 
-// Registry for resume functions to prevent tree-shaking
+// Registry for resume functions to prevent tree-shaking.
 const resumeFunctionRegistry = new Map<string, (...args: unknown[]) => unknown>()
 
 /**
  * Register a resume function to prevent it from being tree-shaken.
  * This is called at module load time by compiled component code.
  */
-export function __fictRegisterResume(name: string, fn: (...args: unknown[]) => unknown): void {
-  resumeFunctionRegistry.set(name, fn)
+export function __fictRegisterResume(key: string, fn: (...args: unknown[]) => unknown): void {
+  resumeFunctionRegistry.set(key, fn)
 }
 
 /**
  * Get a registered resume function by name.
  * Used by the loader to find resume functions.
  */
-export function __fictGetResume(name: string): ((...args: unknown[]) => unknown) | undefined {
-  return resumeFunctionRegistry.get(name)
+export function __fictGetResume(key: string): ((...args: unknown[]) => unknown) | undefined {
+  return resumeFunctionRegistry.get(key)
 }
 
 function serializeSlots(ctx: HookContext): SlotSnapshot[] {