@vidact/runtime 0.2.0-beta.0 → 0.2.0-beta.4

package/src/framework.ts

@@ -0,0 +1,161 @@
+import type { CompiledComponentResult } from './compiled/types.ts'
+import { installFrameworkMetadata } from './direct-dom.ts'
+import type { FrameworkValue } from './framework-protocol.ts'
+import {
+  hoistFrameworkMetadata,
+  installFrameworkMetadataPropRekeying,
+  isFrameworkMetadataElement,
+} from './metadata.ts'
+
+let metadataInstalled = false
+const CLIENT_BOUNDARY_DEFINITION = Symbol('Vidact.ClientBoundaryDefinition')
+
+export interface ClientBoundaryDefinition<Props = FrameworkValue, Prepared = unknown> {
+  readonly [CLIENT_BOUNDARY_DEFINITION]: true
+  readonly prepare?: (props: Props) => Prepared | PromiseLike<Prepared>
+  readonly render: (props: Props, prepared: Prepared) => CompiledComponentResult
+}
+
+export function defineClientBoundary<Props = FrameworkValue, Prepared = void>(
+  render: (props: Props, prepared: Prepared) => CompiledComponentResult,
+  prepare?: (props: Props) => Prepared | PromiseLike<Prepared>,
+): ClientBoundaryDefinition<Props, Prepared> {
+  return Object.freeze({
+    [CLIENT_BOUNDARY_DEFINITION]: true as const,
+    render,
+    ...(prepare === undefined ? {} : { prepare }),
+  })
+}
+
+export function isClientBoundaryDefinition(value: unknown): value is ClientBoundaryDefinition {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    CLIENT_BOUNDARY_DEFINITION in value &&
+    typeof Reflect.get(value, 'render') === 'function'
+  )
+}
+
+/** @internal */
+export function enableFrameworkMetadata(): void {
+  if (metadataInstalled) return
+  metadataInstalled = true
+  installFrameworkMetadataPropRekeying()
+  installFrameworkMetadata((element, props) =>
+    isFrameworkMetadataElement(element, props) ? hoistFrameworkMetadata(element) : element,
+  )
+}
+
+export interface ResourceHintOptions {
+  readonly crossOrigin?: '' | 'anonymous' | 'use-credentials'
+}
+
+export interface PreloadOptions extends ResourceHintOptions {
+  readonly as: string
+  readonly fetchPriority?: 'high' | 'low' | 'auto'
+  readonly imageSizes?: string
+  readonly imageSrcSet?: string
+  readonly integrity?: string
+  readonly nonce?: string
+  readonly referrerPolicy?: string
+  readonly type?: string
+}
+
+export interface PreinitOptions extends ResourceHintOptions {
+  readonly as: 'script' | 'style'
+  readonly precedence?: string
+  readonly integrity?: string
+  readonly nonce?: string
+}
+
+export function preconnect(href: string, options: ResourceHintOptions = {}): void {
+  appendLink('preconnect', href, options)
+}
+
+export function prefetchDNS(href: string): void {
+  appendLink('dns-prefetch', href, {})
+}
+
+export function preload(href: string, options: PreloadOptions): void {
+  appendLink('preload', href, options)
+}
+
+export function preloadModule(href: string, options: ResourceHintOptions = {}): void {
+  appendLink('modulepreload', href, options)
+}
+
+export function preinit(href: string, options: PreinitOptions): void {
+  assertHref(href)
+  if (options.as === 'style') {
+    if (document.head.querySelector(`link[rel="stylesheet"][href="${CSS.escape(href)}"]`)) return
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.href = href
+    if (options.precedence !== undefined) link.dataset.precedence = options.precedence
+    applyResourceOptions(link, options)
+    document.head.append(link)
+    return
+  }
+  if (document.head.querySelector(`script[src="${CSS.escape(href)}"]`)) return
+  const script = document.createElement('script')
+  script.src = href
+  applyResourceOptions(script, options)
+  document.head.append(script)
+}
+
+export function preinitModule(href: string, options: ResourceHintOptions = {}): void {
+  assertHref(href)
+  if (document.head.querySelector(`script[type="module"][src="${CSS.escape(href)}"]`)) return
+  const script = document.createElement('script')
+  script.type = 'module'
+  script.src = href
+  applyResourceOptions(script, options)
+  document.head.append(script)
+}
+
+function appendLink(
+  relation: string,
+  href: string,
+  options: ResourceHintOptions | PreloadOptions,
+): void {
+  assertHref(href)
+  const as = 'as' in options ? options.as : undefined
+  const selector = `link[rel="${CSS.escape(relation)}"][href="${CSS.escape(href)}"]${as === undefined ? '' : `[as="${CSS.escape(as)}"]`}`
+  if (document.head.querySelector(selector)) return
+  const link = document.createElement('link')
+  link.rel = relation
+  link.href = href
+  if (as !== undefined) link.as = as
+  applyResourceOptions(link, options)
+  document.head.append(link)
+}
+
+function applyResourceOptions(
+  element: HTMLLinkElement | HTMLScriptElement,
+  options: ResourceHintOptions | PreloadOptions | PreinitOptions,
+): void {
+  if (options.crossOrigin !== undefined) element.crossOrigin = options.crossOrigin
+  if ('integrity' in options && options.integrity !== undefined)
+    element.integrity = options.integrity
+  if ('nonce' in options && options.nonce !== undefined) element.nonce = options.nonce
+  if (element instanceof HTMLLinkElement) {
+    if ('fetchPriority' in options && options.fetchPriority !== undefined) {
+      element.fetchPriority = options.fetchPriority
+    }
+    if ('imageSizes' in options && options.imageSizes !== undefined) {
+      element.imageSizes = options.imageSizes
+    }
+    if ('imageSrcSet' in options && options.imageSrcSet !== undefined) {
+      element.imageSrcset = options.imageSrcSet
+    }
+    if ('referrerPolicy' in options && options.referrerPolicy !== undefined) {
+      element.referrerPolicy = options.referrerPolicy
+    }
+    if ('type' in options && options.type !== undefined) element.type = options.type
+  }
+}
+
+function assertHref(href: string): void {
+  if (typeof href !== 'string' || href.length === 0)
+    throw new TypeError('resource href must be non-empty')
+}

package/src/hydrate.ts

@@ -0,0 +1,38 @@
+import type { MountCompiledOptions } from './compiled/core.ts'
+import type { CompiledComponentResult, CompiledRenderValue } from './compiled/types.ts'
+import type { DirectComponent } from './direct-dom.ts'
+import { installHydration } from './hydration.ts'
+import { createReactElement, type CompiledRenderable } from './renderable.ts'
+import {
+  hydrateHotRoot as createHotHydrationRoot,
+  hydrateRoot as createHydrationRoot,
+  type CompiledRoot,
+  type HotContext,
+} from './root.ts'
+
+installHydration()
+
+export function createElement(
+  type: string | symbol | DirectComponent | CompiledRenderable,
+  props: Record<string, unknown> | null,
+  ...children: CompiledRenderValue[]
+): CompiledRenderable {
+  return createReactElement(type, props, ...children)
+}
+
+export function hydrateRoot(
+  host: ParentNode,
+  application: () => CompiledComponentResult,
+  options?: MountCompiledOptions,
+): CompiledRoot {
+  return createHydrationRoot(host, application, options)
+}
+
+export function hydrateHotRoot(
+  hot: HotContext,
+  host: ParentNode,
+  application: () => CompiledComponentResult,
+  options?: MountCompiledOptions,
+): CompiledRoot {
+  return createHotHydrationRoot(hot, host, application, options)
+}

package/src/hydration-bridge.ts

@@ -0,0 +1,183 @@
+export type HydrationRange = readonly [start: Comment, end: Comment]
+
+export interface HydrationOperations {
+  readonly begin: (host: ParentNode) => () => void
+  readonly finish: () => void
+  readonly rootMarkers: () => HydrationRange
+  readonly active: () => boolean
+  readonly createFragment: (children: readonly unknown[]) => DocumentFragment
+  readonly fragmentChildren: (fragment: DocumentFragment) => readonly unknown[] | undefined
+  readonly claimElement: (
+    localName: string,
+    namespace: string | null,
+    matches?: (element: Element) => boolean,
+  ) => Element | undefined
+  readonly noteStructuralParent: () => void
+  readonly claimComponentRange: () => HydrationRange | undefined
+  readonly withComponentRange: <Result>(range: HydrationRange, operation: () => Result) => Result
+  readonly withCursor: <Result>(parent: Node, value: Node | null, operation: () => Result) => Result
+  readonly claimNode: (parent: Node, node: Node) => boolean
+  readonly claimComponentMount: (parent: Node, start: Comment, end: Comment) => boolean
+  readonly claimText: (parent: Node, expected: string) => Text | null | undefined
+  readonly claimTextRange: (
+    parent: Node,
+    expected: string,
+  ) => readonly [start: Comment, end: Comment, text: Text | null] | undefined
+  readonly claimArrayRange: (parent: Node) => HydrationRange | undefined
+  readonly finishArrayRange: (parent: Node, end: Comment) => void
+  readonly claimSlotRange: (parent: Node) => HydrationRange | undefined
+  readonly borrowSlotRange: (parent: Node, current: boolean) => HydrationRange | undefined
+  readonly claimSuspenseFallback: (parent: Node) => Comment | undefined
+  readonly withoutHydration: <Result>(operation: () => Result) => Result
+  readonly withInsertion: <Result>(parent: Node, before: Node, operation: () => Result) => Result
+  readonly insertionPoint: () => readonly [parent: Node, before: Node] | undefined
+  readonly cursor: (parent: Node) => Node | null | undefined
+  readonly rangeParent: (start: Comment, end: Comment) => Node | undefined
+}
+
+export interface HydrationMismatchInfo {
+  readonly message: string
+}
+
+export class HydrationMismatch extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'HydrationMismatch'
+  }
+}
+
+let hydration: HydrationOperations | undefined
+
+export function beginHydration(host: ParentNode): () => void {
+  if (hydration === undefined) throw new Error('hydrate runtime entry is not installed')
+  return hydration.begin(host)
+}
+
+export function finishHydration(): void {
+  hydration?.finish()
+}
+
+export function hydrationRootMarkers(): HydrationRange {
+  if (hydration === undefined) throw new Error('hydrate runtime entry is not installed')
+  return hydration.rootMarkers()
+}
+
+export function isHydrating(): boolean {
+  return hydration?.active() ?? false
+}
+
+export function createHydrationFragment(children: readonly unknown[]): DocumentFragment {
+  if (hydration === undefined) throw new Error('hydrate runtime entry is not installed')
+  return hydration.createFragment(children)
+}
+
+export function hydrationFragmentChildren(
+  fragment: DocumentFragment,
+): readonly unknown[] | undefined {
+  return hydration?.fragmentChildren(fragment)
+}
+
+export function claimHydrationElement(
+  localName: string,
+  namespace: string | null,
+  matches?: (element: Element) => boolean,
+): Element | undefined {
+  return hydration?.claimElement(localName, namespace, matches)
+}
+
+export function noteHydrationStructuralParent(): void {
+  hydration?.noteStructuralParent()
+}
+
+export function claimHydrationComponentRange(): HydrationRange | undefined {
+  return hydration?.claimComponentRange()
+}
+
+export function withHydrationComponentRange<Result>(
+  range: HydrationRange,
+  operation: () => Result,
+): Result {
+  return hydration === undefined ? operation() : hydration.withComponentRange(range, operation)
+}
+
+export function withHydrationCursor<Result>(
+  parent: Node,
+  value: Node | null,
+  operation: () => Result,
+): Result {
+  return hydration === undefined ? operation() : hydration.withCursor(parent, value, operation)
+}
+
+export function claimHydrationNode(parent: Node, node: Node): boolean {
+  return hydration?.claimNode(parent, node) ?? false
+}
+
+export function claimHydrationComponentMount(parent: Node, start: Comment, end: Comment): boolean {
+  return hydration?.claimComponentMount(parent, start, end) ?? false
+}
+
+export function claimHydrationText(parent: Node, expected: string): Text | null | undefined {
+  return hydration?.claimText(parent, expected)
+}
+
+export function claimHydrationTextRange(
+  parent: Node,
+  expected: string,
+): readonly [start: Comment, end: Comment, text: Text | null] | undefined {
+  return hydration?.claimTextRange(parent, expected)
+}
+
+export function claimHydrationArrayRange(parent: Node): HydrationRange | undefined {
+  return hydration?.claimArrayRange(parent)
+}
+
+export function finishHydrationArrayRange(parent: Node, end: Comment): void {
+  hydration?.finishArrayRange(parent, end)
+}
+
+export function claimHydrationSlotRange(parent: Node): HydrationRange | undefined {
+  return hydration?.claimSlotRange(parent)
+}
+
+export function borrowHydrationSlotRange(
+  parent: Node,
+  current: boolean,
+): HydrationRange | undefined {
+  return hydration?.borrowSlotRange(parent, current)
+}
+
+export function claimHydrationSuspenseFallback(parent: Node): Comment | undefined {
+  return hydration?.claimSuspenseFallback(parent)
+}
+
+export function withoutHydration<Result>(operation: () => Result): Result {
+  return hydration === undefined ? operation() : hydration.withoutHydration(operation)
+}
+
+export function withHydrationInsertion<Result>(
+  parent: Node,
+  before: Node,
+  operation: () => Result,
+): Result {
+  return hydration === undefined ? operation() : hydration.withInsertion(parent, before, operation)
+}
+
+export function hydrationInsertionPoint(): readonly [parent: Node, before: Node] | undefined {
+  return hydration?.insertionPoint()
+}
+
+export function hydrationCursor(parent: Node): Node | null | undefined {
+  return hydration?.cursor(parent)
+}
+
+export function hydrationRangeParent(start: Comment, end: Comment): Node | undefined {
+  return hydration?.rangeParent(start, end)
+}
+
+export function isHydrationMismatch(error: unknown): error is HydrationMismatch {
+  return error instanceof HydrationMismatch
+}
+
+export function installHydrationOperations(operations: HydrationOperations): void {
+  hydration = operations
+}