kiru 0.44.4

package/src/renderToString.ts

@@ -0,0 +1,91 @@
+import { ctx, node, nodeToCtxMap, renderMode } from "./globals.js"
+import { createAppContext } from "./appContext.js"
+import { Fragment } from "./element.js"
+import {
+  isVNode,
+  encodeHtmlEntities,
+  propsToElementAttributes,
+  isExoticType,
+} from "./utils.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
+) {
+  const prev = renderMode.current
+  renderMode.current = "string"
+  const prevCtx = ctx.current
+  const c = (ctx.current = createAppContext(appFunc, appProps, {
+    rootType: Fragment,
+  }))
+  const res = renderToString_internal(c.rootNode, null, 0)
+  renderMode.current = prev
+  ctx.current = prevCtx
+  return res
+}
+
+function renderToString_internal(
+  el: unknown,
+  parent: Kaioken.VNode | null,
+  idx: number
+): string {
+  if (el === null) return ""
+  if (el === undefined) return ""
+  if (typeof el === "boolean") return ""
+  if (typeof el === "string") return encodeHtmlEntities(el)
+  if (typeof el === "number" || typeof el === "bigint") return el.toString()
+  if (el instanceof Array) {
+    return el.map((c, i) => renderToString_internal(c, parent, i)).join("")
+  }
+  if (Signal.isSignal(el)) return String(el.peek())
+  if (!isVNode(el)) return String(el)
+  el.parent = parent
+  el.depth = (parent?.depth ?? -1) + 1
+  el.index = idx
+  const props = el.props ?? {}
+  const type = el.type
+  if (type === "#text") return encodeHtmlEntities(props.nodeValue ?? "")
+
+  const children = props.children
+  if (isExoticType(type)) {
+    if (type === $HYDRATION_BOUNDARY) {
+      return `<!--${HYDRATION_BOUNDARY_MARKER}-->${renderToString_internal(
+        children,
+        el,
+        idx
+      )}<!--/${HYDRATION_BOUNDARY_MARKER}-->`
+    }
+
+    return renderToString_internal(children, el, idx)
+  }
+
+  if (typeof type !== "string") {
+    nodeToCtxMap.set(el, ctx.current)
+    node.current = el
+    const res = type(props)
+    node.current = null
+    return renderToString_internal(res, el, idx)
+  }
+
+  if (__DEV__) {
+    assertValidElementProps(el)
+  }
+  const attrs = propsToElementAttributes(props)
+  const inner =
+    "innerHTML" in props
+      ? Signal.isSignal(props.innerHTML)
+        ? props.innerHTML.peek()
+        : props.innerHTML
+      : Array.isArray(children)
+      ? children.map((c, i) => renderToString_internal(c, el, i)).join("")
+      : renderToString_internal(children, el, 0)
+
+  return `<${type}${attrs.length ? ` ${attrs}` : ""}>${
+    voidElements.has(type) ? "" : `${inner}</${type}>`
+  }`
+}

package/src/router/index.ts

@@ -0,0 +1,2 @@
+export { Router, useRouter, navigate, Link, type LinkProps } from "./router.js"
+export { Route } from "./route.js"

package/src/router/route.ts

@@ -0,0 +1,51 @@
+import { isVNode } from "../utils.js"
+
+interface RouteProps {
+  /**
+   * The path to match.
+   * @example
+   * ```tsx
+   * <Router>
+   *   <Route path="/" element={<h1>Home</h1>} />
+   *   <Route path="/:id" element={<UserProfile />} />
+   * </Router>
+   * //
+   * const UserProfile = () => {
+   *   const router = useRouter()
+   *   const { id } = router.params
+   *   return <h1>{id}</h1>
+   * }
+   * ```
+   */
+  path: string
+  /**
+   * Allow url with additional segments being matched. Useful with nested routers.
+   * @example
+   * ```tsx
+   * <Route path="/profile" fallthrough element={<UserProfile />} />
+   * //
+   * const UserProfile = () => {
+   *   return (
+   *     <Router>
+   *       <Route path="/" element={<UserDetails />} />
+   *       <Route path="/update" element={<UserUpdateForm />} />
+   *     </Router>
+   *   )
+   * }
+   * ```
+   */
+  fallthrough?: boolean
+  /**
+   * The element to render.
+   */
+  element: JSX.Element
+}
+export function Route({ element }: RouteProps) {
+  return element
+}
+
+export function isRoute(
+  thing: unknown
+): thing is Kaioken.VNode & { props: RouteProps } {
+  return isVNode(thing) && thing.type === Route
+}

package/src/router/router.ts

@@ -0,0 +1,275 @@
+import { createElement } from "../element.js"
+import {
+  useState,
+  useMemo,
+  useContext,
+  useLayoutEffect,
+  useRef,
+  useAppContext,
+} from "../hooks/index.js"
+import { __DEV__ } from "../env.js"
+import {
+  parsePathParams,
+  parseSearchParams,
+  routeMatchesPath,
+} from "./routerUtils.js"
+import { createContext } from "../context.js"
+import { isRoute, Route } from "./route.js"
+import { getVNodeAppContext, noop } from "../utils.js"
+import { node } from "../globals.js"
+import type { ElementProps } from "../types"
+
+export interface LinkProps extends Omit<ElementProps<"a">, "href"> {
+  /**
+   * The relative path to navigate to. If `inherit` is true,
+   * the path will be relative to the parent <Route> component.
+   */
+  to: string
+  /**
+   * Event handler called when the link is clicked.
+   * If you call `e.preventDefault()`, the navigation will not happen.
+   */
+  onclick?: (e: Event) => void
+  /**
+   * Specifies whether to replace the current history entry
+   * instead of adding a new one.
+   */
+  replace?: boolean
+  /**
+   * If true, the path used for `to` will be relative to the parent <Route> component.
+   * @default false
+   */
+  inherit?: boolean
+}
+export function Link({ to, onclick, replace, inherit, ...props }: LinkProps) {
+  const router = useContext(RouterContext, false)
+
+  const href = useMemo(() => {
+    if (!inherit || router.isDefault) return to
+    const parentPath = Object.entries(router.params).reduce(
+      (acc, [k, v]) => acc.replace(`:${k}`, v),
+      router.routePath
+    )
+    if (to === "/") return parentPath
+    return (parentPath + to).replaceAll(/\/+/g, "/")
+  }, [router.params, to, inherit])
+
+  return createElement("a", {
+    ...props,
+    href,
+    onclick: (e: Event) => {
+      onclick?.(e)
+      if (e.defaultPrevented) return
+      e.preventDefault()
+      navigate(href, { replace })
+    },
+  })
+}
+
+type RouterCtx = {
+  viewTransition: Kaioken.RefObject<ViewTransition>
+  queueSyncNav: (callback: () => void) => void
+  params: Record<string, string>
+  query: Record<string, string>
+  routePath: string
+  basePath?: string
+  isDefault: boolean
+}
+const RouterContext = createContext<RouterCtx>({
+  viewTransition: { current: null },
+  queueSyncNav: noop,
+  params: {},
+  query: {},
+  routePath: "/",
+  isDefault: true,
+})
+RouterContext.displayName = "Router"
+
+function setQuery(query: Record<string, string>) {
+  const url = new URL(window.location.href)
+  Object.entries(query).forEach(([k, v]) => url.searchParams.set(k, v))
+  window.history.pushState({}, "", url.toString())
+  window.dispatchEvent(new PopStateEvent("popstate", { state: {} }))
+}
+
+/**
+ * Gets state and methods provided by a parent <Router>.
+ *
+ * @see https://kaioken.dev/docs/api/routing
+ */
+export function useRouter() {
+  const { viewTransition, params, query } = useContext(RouterContext)
+  return { viewTransition, params, query, setQuery }
+}
+
+export function navigate(to: string, options?: { replace?: boolean }) {
+  const doNav = () => {
+    window.history[options?.replace ? "replaceState" : "pushState"]({}, "", to)
+    window.dispatchEvent(new PopStateEvent("popstate", { state: {} }))
+  }
+  // not called during render, just do the navigation
+  if (!node.current) return doNav(), null
+
+  const routerCtx = useContext(RouterContext, false)
+  if (routerCtx.isDefault) {
+    /**
+     * called from a non-router-decendant - postpone
+     * until next tick to avoid race conditions
+     */
+    const ctx = getVNodeAppContext(node.current)
+    return ctx.scheduler?.nextIdle(doNav), null
+  }
+  /**
+   * set the value of our router's syncNavCallback,
+   * causing it to be executed synchronously
+   * during the router's useLayoutEffect.
+   * consecutive calls to navigate will overwrite
+   * the previous value.
+   */
+  return routerCtx.queueSyncNav(doNav), null
+}
+
+export interface RouterProps {
+  /**
+   * Base path for all routes in this router. Use this
+   * to add a prefix to all routes
+   */
+  basePath?: string
+  /**
+   * Enable ViewTransition API for navigations
+   */
+  transition?: boolean
+  /**
+   * Children to render - the only supported children are <Route> components
+   */
+  children?: JSX.Children
+}
+const initLoc = () => ({
+  pathname: window.location.pathname,
+  search: window.location.search,
+})
+
+/**
+ * Main router component.
+ *
+ * @see https://kaioken.dev/docs/api/routing
+ */
+export function Router(props: RouterProps) {
+  const appCtx = useAppContext()
+  const viewTransition = useRef<ViewTransition | null>(null)
+  const syncNavCallback = useRef<(() => void) | null>(null)
+  const parentRouterContext = useContext(RouterContext, false)
+  const dynamicParentPath = parentRouterContext.isDefault
+    ? null
+    : parentRouterContext.routePath
+  const dynamicParentPathSegments = useMemo(
+    () => dynamicParentPath?.split("/").filter(Boolean) || [],
+    [dynamicParentPath]
+  )
+
+  const [loc, setLoc] = useState(initLoc)
+  const query = useMemo(() => parseSearchParams(loc.search), [loc.search])
+  const realPathSegments = useMemo(
+    () => loc.pathname.split("/").filter(Boolean),
+    [loc.pathname]
+  )
+
+  useLayoutEffect(() => {
+    const handler = () => {
+      if (!document.startViewTransition || !props.transition) {
+        return setLoc({
+          pathname: window.location.pathname,
+          search: window.location.search,
+        })
+      }
+
+      viewTransition.current = document.startViewTransition(() => {
+        setLoc({
+          pathname: window.location.pathname,
+          search: window.location.search,
+        })
+        appCtx.flushSync()
+      })
+      viewTransition.current.finished.then(() => {
+        viewTransition.current = null
+      })
+    }
+    window.addEventListener("popstate", handler)
+    return () => window.removeEventListener("popstate", handler)
+  }, [])
+
+  useLayoutEffect(() => {
+    if (syncNavCallback.current) {
+      syncNavCallback.current()
+      syncNavCallback.current = null
+    }
+  })
+
+  type RouteComponent = Kaioken.VNode & {
+    props: Kaioken.InferProps<typeof Route>
+  }
+  let fallbackRoute: RouteComponent | undefined
+  let route: RouteComponent | undefined
+  const _children = (
+    Array.isArray(props.children) ? props.children : [props.children]
+  ).flat()
+
+  for (const child of _children) {
+    if (!isRoute(child)) continue
+
+    if (child.props.path === "*") {
+      if (__DEV__) {
+        if (fallbackRoute) {
+          console.warn(
+            "[kaioken]: More than one fallback route defined. Only the last one will be used."
+          )
+        }
+      }
+      fallbackRoute = child
+      continue
+    }
+    const dynamicChildPathSegments = ((props.basePath || "") + child.props.path)
+      .split("/")
+      .filter(Boolean)
+    if (
+      routeMatchesPath(
+        dynamicParentPathSegments.concat(dynamicChildPathSegments),
+        realPathSegments,
+        child.props.fallthrough
+      )
+    ) {
+      route = child
+      break
+    }
+  }
+
+  let parsedParams = {}
+  if (route) {
+    const dynamicChildPathSegments = ((props.basePath || "") + route.props.path)
+      .split("/")
+      .filter(Boolean)
+    parsedParams = parsePathParams(
+      dynamicParentPathSegments.concat(dynamicChildPathSegments),
+      realPathSegments
+    )
+  }
+  const params = { ...parentRouterContext.params, ...parsedParams }
+
+  return RouterContext.Provider({
+    value: {
+      params,
+      query,
+      routePath:
+        (dynamicParentPath || "") +
+        (props.basePath || "") +
+        (route?.props.path || ""),
+      basePath: props.basePath,
+      isDefault: false,
+      queueSyncNav: (callback: () => void) => {
+        syncNavCallback.current = callback
+      },
+      viewTransition: viewTransition,
+    },
+    children: route ?? fallbackRoute ?? null,
+  })
+}

package/src/router/routerUtils.ts

@@ -0,0 +1,49 @@
+export { routeMatchesPath, parsePathParams, parseSearchParams }
+
+function routeMatchesPath(
+  dynamicPathSegments: string[],
+  realPathSegments: string[],
+  fallthrough?: boolean
+) {
+  if (!fallthrough && dynamicPathSegments.length < realPathSegments.length) {
+    return false
+  }
+
+  for (let i = 0; i < dynamicPathSegments.length; i++) {
+    const segment = dynamicPathSegments[i]
+    if (segment.startsWith(":")) {
+      continue
+    } else if (segment !== realPathSegments[i]) {
+      return false
+    }
+  }
+
+  return true
+}
+
+function parsePathParams(
+  dynamicPathSegments: string[],
+  realPathSegments: string[]
+) {
+  const params: Record<string, string> = {}
+  for (let i = 0; i < dynamicPathSegments.length; i++) {
+    const segment = dynamicPathSegments[i]
+    if (segment.startsWith(":")) {
+      params[segment.slice(1)] = realPathSegments[i]
+    }
+  }
+  return params
+}
+
+function parseSearchParams(search: string) {
+  const parsed: Record<string, string> = {}
+  const str = search.split("?")[1]
+  if (!str || str === "") return parsed
+
+  const parts = str.split("&")
+  for (let i = 0; i < parts.length; i++) {
+    const [key, val] = parts[i].split("=")
+    parsed[key] = val
+  }
+  return parsed
+}