kiru 0.46.1 → 0.47.1

package/src/appContext.ts

@@ -1,140 +1,73 @@
+import { FLAG_STATIC_DOM } from "./constants.js"
 import { createElement } from "./element.js"
 import { __DEV__ } from "./env.js"
-import { KiruError } from "./error.js"
-import { renderMode } from "./globals.js"
-import { hydrationStack } from "./hydration.js"
-import {
-  requestDelete,
-  requestUpdate,
-  flushSync,
-  nextIdle,
-} from "./scheduler.js"
-import { generateRandomID } from "./generateId.js"
+import { requestUpdate, flushSync } from "./scheduler.js"
 
 type VNode = Kiru.VNode
 
 export interface AppContextOptions {
-  root?: HTMLElement
-  /**
-   * @internal
-   * Sets the root node type for the app. Used for SSR & rendering without the DOM.
-   */
-  rootType?: ({ children }: { children: JSX.Children }) => JSX.Element
   name?: string
 }
 
-export interface AppContext<T extends Record<string, unknown> = {}> {
-  id: string
+export interface AppContext {
+  id: number
   name: string
-  rootNode?: VNode
-  root?: HTMLElement
-  mounted: boolean
-  mount(): Promise<AppContext<T>>
-  unmount(): Promise<AppContext<T>>
-  setProps(fn: (oldProps: T) => T): Promise<AppContext<T>>
+  rootNode: VNode
+  render(children: JSX.Element): void
+  unmount(): void
 }
 
-export function createAppContext<T extends Record<string, unknown> = {}>(
-  appFunc: (props: T) => JSX.Element,
-  appProps = {} as T,
-  options?: AppContextOptions
-): AppContext<T> {
-  const id = generateRandomID()
-  const name = options?.name ?? "App-" + id
-  let root = options?.root
-  let mounted = false
-  let appContext: AppContext<T>
+let appId = 0
 
-  const appNode = createElement(appFunc, appProps as T)
-  appNode.depth = 1
-  const rootNode = options?.rootType
-    ? createElement(options.rootType, {}, appNode)
-    : root
-    ? createElement(root!.nodeName.toLowerCase(), {}, appNode)
-    : void 0
-  if (rootNode) {
-    rootNode.depth = 0
+export function mount(
+  children: JSX.Element,
+  container: HTMLElement,
+  options?: AppContextOptions
+): AppContext {
+  const rootNode = createElement(container.nodeName.toLowerCase(), {})
+  if (__DEV__) {
+    if (container.__kiruNode) {
+      throw new Error(
+        "[kiru]: container in use - call unmount on the previous app first."
+      )
+    }
+    container.__kiruNode = rootNode
   }
+  rootNode.dom = container
+  rootNode.flags |= FLAG_STATIC_DOM
 
-  function mount(): Promise<AppContext<T>> {
-    return new Promise<AppContext<T>>((resolve, reject) => {
-      if (mounted) return resolve(appContext)
-      if (!rootNode) return reject(new KiruError("Root node not configured"))
-      root ??= document.body
-      rootNode.dom = root
-      rootNode.app = appContext
-
-      if (__DEV__) {
-        root.__kiruNode = rootNode
-      }
-      if (renderMode.current === "hydrate") {
-        hydrationStack.captureEvents(root!)
-      }
-      nextIdle(() => {
-        if (renderMode.current === "hydrate") {
-          hydrationStack.releaseEvents(root!)
-        }
-        mounted = true
-        if (__DEV__) {
-          window.__kiru?.emit("mount", appContext)
-        }
-        resolve(appContext)
-      }, false)
-      requestUpdate(rootNode)
-      flushSync()
-    })
+  const id = appId++
+  const name = options?.name ?? `App-${id}`
+  const appContext: AppContext = {
+    id,
+    name,
+    rootNode,
+    render,
+    unmount,
   }
 
-  function unmount(): Promise<AppContext<T>> {
-    return new Promise<AppContext<T>>((resolve) => {
-      if (!mounted) return resolve(appContext)
-      if (!rootNode?.child) return resolve(appContext)
-      requestDelete(rootNode.child)
+  if (__DEV__) {
+    rootNode.app = appContext
+    window.__kiru?.emit("mount", appContext)
+  }
 
-      nextIdle(() => {
-        rootNode && (rootNode.child = null)
-        mounted = false
-        if (__DEV__) {
-          window.__kiru?.emit("unmount", appContext)
-        }
-        resolve(appContext)
-      })
-    })
+  function render(children: JSX.Element) {
+    rootNode.props.children = children
+    requestUpdate(rootNode)
+    flushSync()
   }
 
-  function setProps(fn: (oldProps: T) => T): Promise<AppContext<T>> {
-    const rootChild = rootNode?.child
-    if (!mounted || !rootChild)
-      throw new KiruError(
-        "Failed to apply new props - ensure the app is mounted"
-      )
-    return new Promise<AppContext<T>>((resolve) => {
-      const { children, ref, key, ...rest } = rootChild.props
-      rootChild.props = {
-        ...Object.assign(rest, fn(rest as T)),
-        children,
-        ref,
-        key,
-      }
-      requestUpdate(rootChild)
-      nextIdle(() => resolve(appContext))
-    })
+  function unmount() {
+    rootNode.props.children = null
+    requestUpdate(rootNode)
+    flushSync()
+    if (__DEV__) {
+      delete container.__kiruNode
+      delete rootNode.app
+      window.__kiru?.emit("unmount", appContext)
+    }
   }
 
-  return (appContext = {
-    id,
-    name,
-    get rootNode() {
-      return rootNode
-    },
-    get root() {
-      return root
-    },
-    get mounted() {
-      return mounted
-    },
-    mount,
-    unmount,
-    setProps,
-  })
+  render(children)
+  return appContext
 }

package/src/constants.ts

@@ -13,6 +13,8 @@ export {
   FLAG_PLACEMENT,
   FLAG_DELETION,
   FLAG_HAS_MEMO_ANCESTOR,
+  FLAG_STATIC_DOM,
+  FLAG_MEMO,
 }
 
 export { voidElements, svgTags, booleanAttributes }
@@ -32,6 +34,8 @@ const FLAG_UPDATE = 1 << 1
 const FLAG_PLACEMENT = 1 << 2
 const FLAG_DELETION = 1 << 3
 const FLAG_HAS_MEMO_ANCESTOR = 1 << 4
+const FLAG_STATIC_DOM = 1 << 5
+const FLAG_MEMO = 1 << 6
 
 const REGEX_UNIT = {
   AMP_G: /&/g,

package/src/context.ts

@@ -31,7 +31,6 @@ export function createContext<T>(defaultValue: T): Kiru.Context<T> {
       inject: (prev) => {
         const newProvider = ctx.Provider
         window.__kiru!.apps.forEach((ctx) => {
-          if (!ctx.mounted || !ctx.rootNode) return
           traverseApply(ctx.rootNode, (vNode) => {
             if (vNode.type === prev.Provider) {
               vNode.type = newProvider

package/src/dom.ts

@@ -11,13 +11,14 @@ import {
   FLAG_DELETION,
   FLAG_PLACEMENT,
   FLAG_UPDATE,
+  FLAG_STATIC_DOM,
   svgTags,
 } from "./constants.js"
-import { Signal, unwrap } from "./signals/index.js"
+import { Signal } from "./signals/base.js"
+import { unwrap } from "./signals/utils.js"
 import { renderMode } from "./globals.js"
 import { hydrationStack } from "./hydration.js"
 import { StyleObject } from "./types.dom.js"
-import { isPortal } from "./portal.js"
 import { __DEV__ } from "./env.js"
 import { KiruError } from "./error.js"
 import type {
@@ -146,7 +147,6 @@ const vNodeToWrappedFocusEventHandlersMap = new WeakMap<
 >()
 
 function updateDom(vNode: VNode) {
-  if (isPortal(vNode)) return
   const dom = vNode.dom as SomeDom
   const prevProps: Record<string, any> = vNode.prev?.props ?? {}
   const nextProps: Record<string, any> = vNode.props ?? {}
@@ -363,7 +363,7 @@ function hydrateDom(vNode: VNode) {
     })
   }
   vNode.dom = dom
-  if (vNode.type !== "#text") {
+  if (vNode.type !== "#text" && !(vNode.flags & FLAG_STATIC_DOM)) {
     updateDom(vNode)
     return
   }
@@ -571,8 +571,8 @@ function getNextSiblingDom(vNode: VNode, parent: ElementVNode): MaybeDom {
     let sibling = node.sibling
 
     while (sibling) {
-      // Skip unmounted, to-be-placed & portal nodes
-      if (!(sibling.flags & FLAG_PLACEMENT) && !isPortal(sibling)) {
+      // Skip unmounted, to-be-placed & static nodes
+      if (!(sibling.flags & (FLAG_PLACEMENT | FLAG_STATIC_DOM))) {
         // Descend into the child to find host dom
         const dom = findFirstHostDom(sibling)
         if (dom?.isConnected) return dom
@@ -582,7 +582,7 @@ function getNextSiblingDom(vNode: VNode, parent: ElementVNode): MaybeDom {
 
     // Move up to parent — but don't escape portal boundary
     node = node.parent
-    if (!node || isPortal(node) || node === parent) {
+    if (!node || node.flags & FLAG_STATIC_DOM || node === parent) {
       return
     }
   }
@@ -595,7 +595,7 @@ function findFirstHostDom(vNode: VNode): MaybeDom {
 
   while (node) {
     if (node.dom) return node.dom
-    if (isPortal(node)) return // Don't descend into portals
+    if (node.flags & FLAG_STATIC_DOM) return // Don't descend into portals
     node = node.child
   }
   return
@@ -656,7 +656,9 @@ function commitWork(vNode: VNode) {
           currentHostNode = { node: getDomParent(node) }
           hostNodes.push(currentHostNode)
         }
-        commitDom(node as DomVNode, currentHostNode, inheritsPlacement)
+        if (!(node.flags & FLAG_STATIC_DOM)) {
+          commitDom(node as DomVNode, currentHostNode, inheritsPlacement)
+        }
       }
       commitSnapshot(node)
     },
@@ -680,7 +682,6 @@ function commitDom(
   hostNode: HostNode,
   inheritsPlacement: boolean
 ) {
-  if (isPortal(vNode)) return
   if (
     inheritsPlacement ||
     !vNode.dom.isConnected ||
@@ -720,7 +721,7 @@ function commitDeletion(vNode: VNode) {
 
     if (dom) {
       if (ref) setDomRef(ref as Kiru.Ref<SomeDom>, null)
-      if (dom.isConnected && !isPortal(node)) {
+      if (dom.isConnected && !(node.flags & FLAG_STATIC_DOM)) {
         dom.remove()
       }
       delete node.dom

package/src/element.ts

@@ -1,4 +1,4 @@
-import { $FRAGMENT, $MEMO } from "./constants.js"
+import { $FRAGMENT, $MEMO, FLAG_MEMO } from "./constants.js"
 import { isMemoFn } from "./memo.js"
 import { isValidElementKeyProp, isValidElementRefProp } from "./props.js"
 
@@ -23,7 +23,7 @@ export function createElement<T extends Kiru.VNode["type"]>(
     deletions: null,
   }
   if (isMemoFn(type)) {
-    node.isMemoized = true
+    node.flags |= FLAG_MEMO
     node.arePropsEqual = type[$MEMO].arePropsEqual
   }
 

package/src/hmr.ts

@@ -1,11 +1,11 @@
-import type { Store } from "./store"
-import type { WatchEffect } from "./signals/watch"
 import { $HMR_ACCEPT } from "./constants.js"
 import { __DEV__ } from "./env.js"
 import { traverseApply } from "./utils.js"
 import { requestUpdate } from "./scheduler.js"
-import { Signal } from "./signals/index.js"
-import type { AppContext } from "./appContext"
+import { Signal } from "./signals/base.js"
+import type { WatchEffect } from "./signals/watch.js"
+import type { Store } from "./store.js"
+import type { AppContext } from "./appContext.js"
 
 export type HMRAccept<T = {}> = {
   provide: () => T
@@ -119,7 +119,6 @@ export function createHMRContext() {
       }
       if (oldEntry.type === "component" && newEntry.type === "component") {
         window.__kiru!.apps.forEach((ctx) => {
-          if (!ctx.mounted || !ctx.rootNode) return
           traverseApply(ctx.rootNode, (vNode) => {
             if (vNode.type === oldEntry.value) {
               vNode.type = newEntry.value as any

package/src/index.ts

@@ -1,13 +1,8 @@
-import {
-  createAppContext,
-  type AppContext,
-  type AppContextOptions,
-} from "./appContext.js"
 import { createKiruGlobalContext } from "./globalContext.js"
 import { __DEV__ } from "./env.js"
-import { KiruError } from "./error.js"
 
 export type * from "./types"
+export * from "./signals/index.js"
 export * from "./appContext.js"
 export * from "./context.js"
 export * from "./cloneVNode.js"
@@ -17,7 +12,6 @@ export * from "./lazy.js"
 export { memo } from "./memo.js"
 export * from "./portal.js"
 export * from "./renderToString.js"
-export * from "./signals/index.js"
 export { nextIdle, flushSync, requestUpdate } from "./scheduler.js"
 export * from "./store.js"
 export * from "./transition.js"
@@ -25,37 +19,3 @@ export * from "./transition.js"
 if ("window" in globalThis) {
   globalThis.window.__kiru ??= createKiruGlobalContext()
 }
-
-export function mount<T extends Record<string, unknown>>(
-  appFunc: (props: T) => JSX.Element,
-  options: AppContextOptions,
-  appProps?: T
-): Promise<AppContext<T>>
-
-export function mount<T extends Record<string, unknown>>(
-  appFunc: (props: T) => JSX.Element,
-  root: HTMLElement,
-  appProps?: T
-): Promise<AppContext<T>>
-
-export function mount<T extends Record<string, unknown>>(
-  appFunc: (props: T) => JSX.Element,
-  optionsOrRoot: HTMLElement | AppContextOptions,
-  appProps = {} as T
-): Promise<AppContext<T>> {
-  let root: HTMLElement, opts: AppContextOptions | undefined
-  if (optionsOrRoot instanceof HTMLElement) {
-    root = optionsOrRoot
-    opts = { root }
-  } else {
-    opts = optionsOrRoot
-    root = optionsOrRoot.root!
-    if (__DEV__) {
-      if (!(root instanceof HTMLElement)) {
-        throw new KiruError("Root node must be an HTMLElement")
-      }
-    }
-  }
-
-  return createAppContext<T>(appFunc, appProps, opts).mount()
-}

package/src/memo.ts

@@ -41,8 +41,6 @@ export function memo<T extends Record<string, unknown> = {}>(
 
 export function isMemoFn(fn: any): fn is MemoFn {
   return (
-    typeof fn === "function" &&
-    fn[$MEMO] &&
-    typeof fn[$MEMO].arePropsEqual === "function"
+    typeof fn === "function" && typeof fn[$MEMO]?.arePropsEqual === "function"
   )
 }

package/src/portal.ts

@@ -1,42 +1,38 @@
+import { FLAG_STATIC_DOM } from "./constants.js"
 import { __DEV__ } from "./env.js"
 import { KiruError } from "./error.js"
 import { renderMode } from "./globals.js"
 import { useVNode } from "./hooks/utils.js"
 import { nextIdle, requestUpdate } from "./scheduler.js"
 
-export { Portal, isPortal }
-
 type PortalProps = {
   children?: JSX.Children
   container: HTMLElement | (() => HTMLElement)
 }
 
-function Portal({ children, container }: PortalProps) {
+export function Portal({ children, container }: PortalProps) {
   const vNode = useVNode()
-  switch (renderMode.current) {
-    case "dom":
-      vNode.dom = typeof container === "function" ? container() : container
-      if (!(vNode.dom instanceof HTMLElement)) {
-        if (__DEV__) {
-          throw new KiruError({
-            message: `Invalid portal container, expected HTMLElement, got ${vNode.dom}`,
-            vNode: vNode,
-          })
+  if (!vNode.dom) {
+    vNode.flags |= FLAG_STATIC_DOM
+    switch (renderMode.current) {
+      case "dom":
+        vNode.dom = typeof container === "function" ? container() : container
+        if (!(vNode.dom instanceof HTMLElement)) {
+          if (__DEV__) {
+            throw new KiruError({
+              message: `Invalid portal container, expected HTMLElement, got ${vNode.dom}`,
+              vNode: vNode,
+            })
+          }
+          return null
         }
+        return children
+      case "hydrate":
+        nextIdle(() => requestUpdate(vNode))
+      case "stream":
+      case "string":
         return null
-      }
-      return children
-    case "hydrate":
-      nextIdle(() => requestUpdate(vNode))
-      return null
-    case "stream":
-    case "string":
-      return null
+    }
   }
-}
-
-function isPortal(
-  node: Kiru.VNode
-): node is Kiru.VNode & { type: typeof Portal } {
-  return node.type === Portal
+  return children
 }

package/src/props.ts

@@ -1,5 +1,5 @@
 import { KiruError } from "./error.js"
-import { Signal } from "./signals/index.js"
+import { Signal } from "./signals/base.js"
 
 export function assertValidElementProps(vNode: Kiru.VNode) {
   if ("children" in vNode.props && vNode.props.innerHTML) {

package/src/reconciler.ts

@@ -1,11 +1,12 @@
 import {
   $FRAGMENT,
   FLAG_HAS_MEMO_ANCESTOR,
+  FLAG_MEMO,
   FLAG_PLACEMENT,
   FLAG_UPDATE,
 } from "./constants.js"
 import { getVNodeAppContext, isVNode, latest } from "./utils.js"
-import { Signal } from "./signals/index.js"
+import { Signal } from "./signals/base.js"
 import { __DEV__ } from "./env.js"
 import { createElement, Fragment } from "./element.js"
 import type { AppContext } from "./appContext.js"
@@ -459,7 +460,7 @@ function propsChanged(oldProps: VNode["props"], newProps: VNode["props"]) {
 function setParent(child: VNode, parent: VNode) {
   child.parent = parent
   child.depth = parent.depth + 1
-  if (parent.isMemoized || parent.flags & FLAG_HAS_MEMO_ANCESTOR) {
+  if (parent.flags & (FLAG_MEMO | FLAG_HAS_MEMO_ANCESTOR)) {
     child.flags |= FLAG_HAS_MEMO_ANCESTOR
   }
 }

package/src/renderToString.ts

@@ -1,5 +1,4 @@
 import { node, renderMode } from "./globals.js"
-import { createAppContext } from "./appContext.js"
 import { Fragment } from "./element.js"
 import {
   isVNode,
@@ -7,22 +6,17 @@ import {
   propsToElementAttributes,
   isExoticType,
 } from "./utils.js"
-import { Signal } from "./signals/index.js"
+import { Signal } from "./signals/base.js"
 import { $HYDRATION_BOUNDARY, voidElements } from "./constants.js"
 import { assertValidElementProps } from "./props.js"
 import { HYDRATION_BOUNDARY_MARKER } from "./ssr/hydrationBoundary.js"
 import { __DEV__ } from "./env.js"
 
-export function renderToString<T extends Record<string, unknown>>(
-  appFunc: (props: T) => JSX.Element,
-  appProps = {} as T
-) {
+export function renderToString(element: JSX.Element) {
   const prev = renderMode.current
   renderMode.current = "string"
-  const ctx = createAppContext(appFunc, appProps, {
-    rootType: Fragment,
-  })
-  const res = renderToString_internal(ctx.rootNode, null, 0)
+  const rootNode = Fragment({ children: element })
+  const res = renderToString_internal(rootNode, null, 0)
   renderMode.current = prev
   return res
 }