WIP all previous component tests passing

Author: ryanflorence

.gitignore

@@ -4,3 +4,5 @@ reference/
 .tmp/
 
 .env
+
+/reference

packages/component/src/jsx-runtime.ts

@@ -1 +1,2 @@
 export * from './lib/jsx.ts'
+export { Fragment } from './lib/component.ts'

packages/component/src/lib/component.ts

@@ -0,0 +1,270 @@
+import type { EventListeners } from '@remix-run/interaction'
+
+export type Task = (signal: AbortSignal) => void
+
+export interface Handle<C = Record<string, never>> {
+  /**
+   * Stable identifier per component instance. Useful for HTML APIs like
+   * htmlFor, aria-owns, etc. so consumers don't have to supply an id.
+   */
+  id: string
+
+  /**
+   * Set and get values in an element tree for indirect ancestor/descendant
+   * communication.
+   */
+  context: Context<C>
+
+  /**
+   * Schedules an update for the component to render again.
+   *
+   * @param task A render task to run after the update completes
+   */
+  update(task?: Task): void
+
+  /**
+   * Schedules a task to run after the next update.
+   *
+   * @param task
+   */
+  queueTask(task: Task): void
+
+  /**
+   * Raises an error the closest Catch boundary. Useful when running outside
+   * of a framework-controlled scope (ie outside of rendering or events).
+   *
+   * @param error The raised error
+   *
+   * @example
+   * ```tsx
+   * this.raise(new Error("Oops"))
+   * ```
+   */
+  raise(error: unknown): void
+
+  /**
+   * The component's closest frame
+   */
+  frame: FrameHandle
+
+  /**
+   * A signal indicating the connected status of the component. When the
+   * component is disconnected from the tree the signal will be aborted.
+   * Useful for setup scope cleanup.
+   *
+   * @example Clear a timer
+   * ```ts
+   * function Clock() {
+   *   let interval = setInterval(() => {
+   *     if (this.signal.aborted) {
+   *       clearInterval(interval)
+   *       return
+   *     }
+   *     this.render()
+   *   }, 1000)
+   *   return () => <span>{new Date().toString()}</span>
+   * }
+   * ```
+   *
+   * Because signals are event targets, you can also add an event instead.
+   * ```ts
+   * function Clock() {
+   *   let interval = setInterval(this.render)
+   *   this.signal.addEventListener("abort", () => clearInterval(interval))
+   *   return () => <span>{new Date().toString()}</span>
+   * }
+   * ```
+   *
+   * @discussion
+   * You don't need to check both this.signal and a render/event signal as
+   * render/event signals are aborted when the component disconnects
+   */
+  signal: AbortSignal
+}
+
+/**
+ * Default Handle context so types must be declared explicitly.
+ */
+export type NoContext = Record<string, never>
+
+export type Component<
+  Context = NoContext,
+  SetupProps = Remix.ElementProps,
+  RenderProps = Remix.ElementProps,
+> = (this: Handle<Context>, props: SetupProps) => Remix.Node | ((props: RenderProps) => Remix.Node)
+
+export type ContextFrom<ComponentType> =
+  ComponentType extends Component<infer Provided, any, any>
+    ? Provided
+    : ComponentType extends (this: Handle<infer Provided>, ...args: any[]) => any
+      ? Provided
+      : never
+
+export interface Context<C> {
+  set(values: C): void
+  get<ComponentType>(component: ComponentType): ContextFrom<ComponentType>
+  get(component: Remix.ElementType | symbol): unknown | undefined
+}
+
+// export type FrameContent = RemixElement | Element | DocumentFragment | ReadableStream | string
+export type FrameContent = DocumentFragment | string
+
+export type FrameHandle = EventTarget & {
+  reload(): Promise<void>
+  replace(content: FrameContent): Promise<void>
+}
+
+export interface FrameProps {
+  name?: string
+  src: string
+  fallback?: Remix.Renderable
+  on?: EventListeners
+}
+
+export type ComponentProps<T> = T extends {
+  (props: infer Setup): infer R
+}
+  ? R extends (props: infer Render) => any
+    ? Setup & Render
+    : Setup
+  : never
+
+export interface CatchProps {
+  children?: Remix.Node
+  fallback?: Remix.Node | ((error: Error) => Remix.Node)
+}
+
+export interface FragmentProps {
+  children?: Remix.Node
+}
+
+export interface BuiltinElements {
+  Catch: CatchProps
+  Fragment: FragmentProps
+  Frame: FrameProps
+}
+
+export type Key = string | number | bigint
+
+type ComponentConfig = {
+  id: string
+  type: Function
+  frame: FrameHandle
+  raise: (error: unknown) => void
+  getContext: (type: Component) => unknown
+}
+
+export type ComponentHandle = ReturnType<typeof createComponent>
+
+export function createComponent<C = NoContext>(config: ComponentConfig) {
+  let taskQueue: Task[] = []
+  let renderCtrl = new AbortController()
+  let connectedCtrl = new AbortController()
+  let contextValue: C | undefined = undefined
+
+  let getContent: null | ((props: Remix.ElementProps) => Remix.Node) = null
+  let scheduleUpdate: (task?: Task) => void = () => {
+    throw new Error('scheduleUpdate not implemented')
+  }
+
+  let context: Context<C> = {
+    set: (value: C) => {
+      contextValue = value
+    },
+    get: (type: Component) => {
+      return config.getContext(type)
+    },
+  }
+
+  let handle: Handle<C> = {
+    id: config.id,
+    update: (task?: Task) => {
+      if (task) taskQueue.push(task)
+      scheduleUpdate()
+    },
+    queueTask: (task: Task) => {
+      taskQueue.push(task)
+    },
+    raise: config.raise,
+    frame: config.frame,
+    context: context,
+    signal: connectedCtrl.signal,
+  }
+
+  function dequeueTasks() {
+    return taskQueue.splice(0, taskQueue.length).map((task) => task.bind(handle, renderCtrl.signal))
+  }
+
+  function render(props: Remix.ElementProps): [Remix.Node, Array<() => void>] {
+    if (connectedCtrl.signal.aborted) {
+      console.warn('render called after component was removed, potential application memory leak')
+      return [null, []]
+    }
+
+    renderCtrl.abort()
+    renderCtrl = new AbortController()
+
+    if (!getContent) {
+      let result = config.type.call(handle, props)
+      if (typeof result === 'function') {
+        getContent = (props) => result.call(handle, props, renderCtrl.signal)
+      } else {
+        getContent = (props) => config.type.call(handle, props)
+      }
+    }
+
+    let node = getContent(props)
+    return [node, dequeueTasks()]
+  }
+
+  function remove(): (() => void)[] {
+    connectedCtrl.abort()
+    return dequeueTasks()
+  }
+
+  function setScheduleUpdate(_scheduleUpdate: (task?: Task) => void) {
+    scheduleUpdate = _scheduleUpdate
+  }
+
+  function getContextValue(): C | undefined {
+    return contextValue
+  }
+
+  return { render, remove, setScheduleUpdate, frame: config.frame, getContextValue }
+}
+
+export function Frame(this: Handle<FrameHandle>, _: FrameProps) {
+  return null // reconciler renders
+}
+
+export function Fragment(_: FragmentProps) {
+  return null // reconciler renders
+}
+
+export function Catch(_: CatchProps) {
+  return null // reconciler renders
+}
+
+export function createFrameHandle(
+  def?: Partial<{
+    src: string
+    replace: FrameHandle['replace']
+    reload: FrameHandle['reload']
+  }>,
+): FrameHandle {
+  return Object.assign(
+    new EventTarget(),
+    {
+      src: '/',
+      replace: notImplemented('replace not implemented'),
+      reload: notImplemented('reload not implemented'),
+    },
+    def,
+  )
+}
+
+function notImplemented(msg: string) {
+  return (): never => {
+    throw new Error(msg)
+  }
+}

packages/component/src/lib/dom.ts

@@ -1,3 +1,5 @@
+import type { StyleProps } from './style/lib/style'
+
 /**
  * Adapted from Preact:
  * - Source: https://github.com/preactjs/preact/blob/eee0c6ef834534498e433f0f7a3ef679efd24380/src/dom.d.ts
@@ -8,19 +10,6 @@ type Booleanish = boolean | 'true' | 'false'
 
 export type Trackable<T> = T
 
-export type DOMCSSProperties = {
-  [key in keyof Omit<
-    CSSStyleDeclaration,
-    'item' | 'setProperty' | 'removeProperty' | 'getPropertyValue' | 'getPropertyPriority'
-  >]?: string | number | null | undefined
-}
-export type AllCSSProperties = {
-  [key: string]: string | number | null | undefined
-}
-export interface CSSProperties extends AllCSSProperties, DOMCSSProperties {
-  cssText?: string | null
-}
-
 export interface SVGProps<eventTarget extends EventTarget = SVGElement>
   extends HTMLProps<eventTarget> {
   accentHeight?: Trackable<number | string | undefined>
@@ -966,7 +955,7 @@ export interface AllHTMLProps<eventTarget extends EventTarget = EventTarget>
   srcObject?: Trackable<MediaStream | MediaSource | Blob | File | null>
   start?: Trackable<number | undefined>
   step?: Trackable<number | string | undefined>
-  style?: Trackable<string | CSSProperties | undefined>
+  style?: Trackable<string | StyleProps | undefined>
   summary?: Trackable<string | undefined>
   tabIndex?: Trackable<number | undefined>
   tabindex?: Trackable<number | undefined>
@@ -1053,7 +1042,7 @@ export interface HTMLProps<eventTarget extends EventTarget = EventTarget>
   popover?: Trackable<'auto' | 'hint' | 'manual' | boolean | undefined>
   slot?: Trackable<string | undefined>
   spellcheck?: Trackable<boolean | undefined>
-  style?: Trackable<string | CSSProperties | undefined>
+  style?: Trackable<string | StyleProps | undefined>
   tabindex?: Trackable<number | undefined>
   tabIndex?: Trackable<number | undefined>
   title?: Trackable<string | undefined>

packages/component/src/lib/invariant.ts

@@ -0,0 +1,25 @@
+/**
+ * Use this when framework code is incorrect, indicating an internal bug rather
+ * than application code error.
+ */
+export function invariant(assertion: any, message?: string): asserts assertion {
+  let prefix = 'Framework invariant'
+  if (assertion) return
+  throw new Error(message ? `${prefix}: ${message}` : prefix)
+}
+
+/**
+ * Use this when application logic is incorrect, indicating a developer error.
+ *
+ * Using ID-based warnings with external documentation links allows us to:
+ * - Update warning messages without releasing new versions
+ * - Avoid bloating the library with warning messages or complicating builds
+ *   with prod/dev build/export shenanigans
+ * - Provide detailed troubleshooting guides and examples
+ *
+ * `id` is first so we can easily grep the codebase for ensure calls
+ */
+export function ensure(id: number, assertion: boolean): asserts assertion {
+  if (assertion) return
+  throw new Error(`REMIX_${id}: https://rmx.as/w/${id}`)
+}

packages/component/src/lib/remix-types.ts

@@ -1,4 +1,9 @@
 import type { EventListeners } from '@remix-run/interaction'
+import type { CSSProps } from './style/lib/style'
+import type {
+  VirtualRoot as VirtualRoot_,
+  VirtualRootOptions as VirtualRootOptions_,
+} from './vdom.ts'
 
 declare global {
   namespace Remix {
@@ -45,7 +50,7 @@ declare global {
     export interface HostProps<eventTarget extends EventTarget> {
       children?: Node
       on?: EventListeners<eventTarget> | undefined
-      css?: 'TODO: support css properties' | undefined
+      css?: CSSProps
       connect?: 'TODO: support connect' | undefined
     }
 
@@ -58,11 +63,14 @@ declare global {
      * }
      *
      * @example
-     * function Button({ on = [], ...rest }: Props<"button">) {
-     *   // on is always EventDescriptor[] here
-     *   return <button {...rest} on={[...on, dom.click(handler)]} />
+     * function Button({ on, ...rest }: Props<"button">) {
+     *   return <button {...rest} on={{ ...on, click: handler }} />
      * }
      */
     export type Props<T extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[T]
+
+    export type VirtualRoot = VirtualRoot_
+
+    export type VirtualRootOptions = VirtualRootOptions_
   }
 }

packages/component/src/lib/style/index.ts

@@ -0,0 +1,6 @@
+export type {
+  CSSProps as EnhancedStyleProperties,
+  DOMStyleProperties as StyleProperties,
+} from './lib/style.ts'
+export { processStyle } from './lib/style.ts'
+export { createStyleManager } from './lib/stylesheet.ts'