kiru 0.50.0-preview.0 → 0.50.0-preview.1

package/dist/ssr/hydrationBoundary.js

@@ -1,30 +0,0 @@
-import { createContext } from "../context.js";
-import { $HYDRATION_BOUNDARY } from "../constants.js";
-import { createElement, Fragment } from "../element.js";
-import { renderMode } from "../globals.js";
-export const HYDRATION_BOUNDARY_MARKER = "kiru:h-boundary";
-export const DEFAULT_INTERACTION_EVENTS = [
-    "pointerdown",
-    "keydown",
-    "focus",
-    "input",
-];
-export const HydrationBoundaryContext = createContext(null);
-export function Experimental_HydrationBoundary(props) {
-    const provider = createElement(HydrationBoundaryContext.Provider, {
-        value: {
-            mode: props.mode || "eager",
-            // @ts-expect-error this is fine
-            events: props.events ?? DEFAULT_INTERACTION_EVENTS,
-        },
-    }, createElement($HYDRATION_BOUNDARY, props));
-    if (renderMode.current === "string" || renderMode.current === "stream") {
-        /**
-         * in order to ensure consistent tree structure, we're simulating
-         * the generated loader + wrapper components here.
-         */
-        return Fragment({ children: Fragment({ children: provider }) });
-    }
-    return provider;
-}
-//# sourceMappingURL=hydrationBoundary.js.map

package/dist/ssr/hydrationBoundary.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hydrationBoundary.js","sourceRoot":"","sources":["../../src/ssr/hydrationBoundary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAI1C,MAAM,CAAC,MAAM,yBAAyB,GAAG,iBAAiB,CAAA;AAC1D,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,aAAa;IACb,SAAS;IACT,OAAO;IACP,OAAO;CACuB,CAAA;AAsBhC,MAAM,CAAC,MAAM,wBAAwB,GAAG,aAAa,CAGlD,IAAK,CAAC,CAAA;AAET,MAAM,UAAU,8BAA8B,CAC5C,KAAgC;IAEhC,MAAM,QAAQ,GAAG,aAAa,CAC5B,wBAAwB,CAAC,QAAQ,EACjC;QACE,KAAK,EAAE;YACL,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,OAAO;YAC3B,gCAAgC;YAChC,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,0BAA0B;SACnD;KACF,EACD,aAAa,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAC1C,CAAA;IACD,IAAI,UAAU,CAAC,OAAO,KAAK,QAAQ,IAAI,UAAU,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;QACvE;;;WAGG;QACH,OAAO,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAA;IACjE,CAAC;IACD,OAAO,QAAQ,CAAA;AACjB,CAAC"}

package/dist/ssr/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./hydrationBoundary.js";
-//# sourceMappingURL=index.d.ts.map

package/dist/ssr/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ssr/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}

package/dist/ssr/index.js

@@ -1,2 +0,0 @@
-export * from "./hydrationBoundary.js";
-//# sourceMappingURL=index.js.map

package/dist/ssr/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ssr/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}

package/src/components/router/index.ts

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

package/src/components/router/route.ts

@@ -1,51 +0,0 @@
-import { isVNode } from "../../utils/index.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 Kiru.VNode & { props: RouteProps } {
-  return isVNode(thing) && thing.type === Route
-}

package/src/components/router/router.ts

@@ -1,273 +0,0 @@
-import { createElement } from "../../element.js"
-import {
-  useState,
-  useMemo,
-  useContext,
-  useLayoutEffect,
-  useRef,
-} from "../../hooks/index.js"
-import { __DEV__ } from "../../env.js"
-import { createContext } from "../../context.js"
-import { isRoute, Route } from "./route.js"
-import { noop } from "../../utils/index.js"
-import { node } from "../../globals.js"
-import type { ElementProps } from "../../types.js"
-import { flushSync, nextIdle } from "../../scheduler.js"
-import {
-  parsePathParams,
-  parseSearchParams,
-  routeMatchesPath,
-} from "./routerUtils.js"
-
-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: Kiru.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://kirujs.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
-     */
-    return 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://kirujs.dev/docs/api/routing
- */
-export function Router(props: RouterProps) {
-  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,
-        })
-        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 = Kiru.VNode & {
-    props: Kiru.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(
-            "[kiru]: 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/components/router/routerUtils.ts

@@ -1,49 +0,0 @@
-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
-}

package/src/ssr/hydrationBoundary.ts

@@ -1,63 +0,0 @@
-import { createContext } from "../context.js"
-import { $HYDRATION_BOUNDARY } from "../constants.js"
-import { createElement, Fragment } from "../element.js"
-import { renderMode } from "../globals.js"
-
-type EventsArray = (keyof GlobalEventHandlersEventMap)[]
-
-export const HYDRATION_BOUNDARY_MARKER = "kiru:h-boundary"
-export const DEFAULT_INTERACTION_EVENTS = [
-  "pointerdown",
-  "keydown",
-  "focus",
-  "input",
-] as const satisfies EventsArray
-
-export type HydrationBoundaryMode = "eager" | "interaction"
-export type HydrationBoundaryProps<T extends HydrationBoundaryMode> = {
-  /**
-   * Determines the strategy to use when hydrating the boundary.
-   * - `eager`: hydrate immediately.
-   * - `interaction`: hydrate upon the first user interaction.
-   * @default "eager"
-   */
-  mode?: T
-  children: JSX.Children
-} & (T extends "interaction"
-  ? {
-      /**
-       * List of events that will trigger the hydration.
-       * @default ["pointerdown", "keydown", "focus", "input"]
-       */
-      events?: EventsArray
-    }
-  : {})
-
-export const HydrationBoundaryContext = createContext<{
-  mode: HydrationBoundaryMode
-  events: string[]
-}>(null!)
-
-export function Experimental_HydrationBoundary<T extends HydrationBoundaryMode>(
-  props: HydrationBoundaryProps<T>
-) {
-  const provider = createElement(
-    HydrationBoundaryContext.Provider,
-    {
-      value: {
-        mode: props.mode || "eager",
-        // @ts-expect-error this is fine
-        events: props.events ?? DEFAULT_INTERACTION_EVENTS,
-      },
-    },
-    createElement($HYDRATION_BOUNDARY, props)
-  )
-  if (renderMode.current === "string" || renderMode.current === "stream") {
-    /**
-     * in order to ensure consistent tree structure, we're simulating
-     * the generated loader + wrapper components here.
-     */
-    return Fragment({ children: Fragment({ children: provider }) })
-  }
-  return provider
-}

package/src/ssr/index.ts

@@ -1 +0,0 @@
-export * from "./hydrationBoundary.js"