kiru 1.4.1 → 1.5.1

package/src/types.ts

@@ -1,6 +1,11 @@
-import type { Signal as SignalClass } from "./signals"
-import type { $CONTEXT, $ERROR_BOUNDARY, $FRAGMENT } from "./constants"
-import type { KiruGlobalContext } from "./globalContext"
+import type { Signal as SignalClass } from "./signals/base.js"
+import type {
+  $CONTEXT,
+  $ERROR_BOUNDARY,
+  $FRAGMENT,
+  $INLINE_FN,
+} from "./constants.js"
+import type { KiruGlobalContext } from "./globalContext.js"
 import type {
   GlobalAttributes,
   HtmlElementAttributes,
@@ -10,14 +15,14 @@ import type {
   HtmlElementBindableProps,
   HTMLTagToElement,
   SVGTagToElement,
-} from "./types.dom"
+} from "./types.dom.js"
 import type {
   AsyncTaskState,
   Prettify,
   Signalable,
   SomeDom,
-} from "./types.utils"
-import type { AppHandle } from "./appHandle"
+} from "./types.utils.js"
+import type { AppHandle } from "./appHandle.js"
 
 export type { AsyncTaskState, ElementProps, Prettify, Signalable, StyleObject }
 
@@ -131,7 +136,6 @@ declare global {
       input: HTMLElementProps<"input">
       ins: HTMLElementProps<"ins">
       kbd: HTMLElementProps<"kbd">
-      //keygen: HTMLElementProps<"keygen">
       label: HTMLElementProps<"label">
       legend: HTMLElementProps<"legend">
       li: HTMLElementProps<"li">
@@ -140,7 +144,6 @@ declare global {
       map: HTMLElementProps<"map">
       mark: HTMLElementProps<"mark">
       menu: HTMLElementProps<"menu">
-      //menuitem: HTMLElementProps<"menuitem">
       meta: HTMLElementProps<"meta">
       meter: HTMLElementProps<"meter">
       nav: HTMLElementProps<"nav">
@@ -187,12 +190,11 @@ declare global {
       ul: HTMLElementProps<"ul">
       var: HTMLElementProps<"var">
       video: HTMLElementProps<"video">
-      //wbr: HTMLElementProps<"wbr">
-      //webview: HTMLElementProps<"webview">
+      wbr: HTMLElementProps<"wbr">
 
       // SVG
-      // animate: SVGElementProps<"animate">
-      // animateMotion: SVGElementProps<"animateMotion">
+      animate: SVGElementProps<"animate">
+      animateMotion: SVGElementProps<"animateMotion">
       animateTransform: SVGElementProps<"animateTransform">
       circle: SVGElementProps<"circle">
       clipPath: SVGElementProps<"clipPath">
@@ -200,11 +202,11 @@ declare global {
       desc: SVGElementProps<"desc">
       ellipse: SVGElementProps<"ellipse">
       feBlend: SVGElementProps<"feBlend">
-      //feColorMatrix: SVGElementProps<"feColorMatrix">
+      feColorMatrix: SVGElementProps<"feColorMatrix">
       feComponentTransfer: SVGElementProps<"feComponentTransfer">
-      // feComposite: SVGElementProps<"feComposite">
-      // feConvolveMatrix: SVGElementProps<"feConvolveMatrix">
-      // feDiffuseLighting: SVGElementProps<"feDiffuseLighting">
+      feComposite: SVGElementProps<"feComposite">
+      feConvolveMatrix: SVGElementProps<"feConvolveMatrix">
+      feDiffuseLighting: SVGElementProps<"feDiffuseLighting">
       feDisplacementMap: SVGElementProps<"feDisplacementMap">
       feDropShadow: SVGElementProps<"feDropShadow">
       feFlood: SVGElementProps<"feFlood">
@@ -213,40 +215,41 @@ declare global {
       feFuncG: SVGElementProps<"feFuncG">
       feFuncR: SVGElementProps<"feFuncR">
       feGaussianBlur: SVGElementProps<"feGaussianBlur">
-      // feImage: SVGElementProps<"feImage">
-      // feMerge: SVGElementProps<"feMerge">
-      // feMergeNode: SVGElementProps<"feMergeNode">
-      // feMorphology: SVGElementProps<"feMorphology">
-      // feOffset: SVGElementProps<"feOffset">
-      // feSpecularLighting: SVGElementProps<"feSpecularLighting">
-      // feTile: SVGElementProps<"feTile">
+      feImage: SVGElementProps<"feImage">
+      feMerge: SVGElementProps<"feMerge">
+      feMergeNode: SVGElementProps<"feMergeNode">
+      feMorphology: SVGElementProps<"feMorphology">
+      feOffset: SVGElementProps<"feOffset">
+      feSpotLight: SVGElementProps<"feSpotLight">
+      feSpecularLighting: SVGElementProps<"feSpecularLighting">
+      feTile: SVGElementProps<"feTile">
       feTurbulence: SVGElementProps<"feTurbulence">
       filter: SVGElementProps<"filter">
-      // foreignObject: SVGElementProps<"foreignObject">
+      foreignObject: SVGElementProps<"foreignObject">
       g: SVGElementProps<"g">
       image: SVGElementProps<"image">
       line: SVGElementProps<"line">
       linearGradient: SVGElementProps<"linearGradient">
-      // marker: SVGElementProps<"marker">
+      marker: SVGElementProps<"marker">
       mask: SVGElementProps<"mask">
-      // metadata: SVGElementProps<"metadata">
-      // mpath: SVGElementProps<"mpath">
+      metadata: SVGElementProps<"metadata">
+      mpath: SVGElementProps<"mpath">
       path: SVGElementProps<"path">
       pattern: SVGElementProps<"pattern">
       polygon: SVGElementProps<"polygon">
       polyline: SVGElementProps<"polyline">
       radialGradient: SVGElementProps<"radialGradient">
       rect: SVGElementProps<"rect">
-      // set: SVGElementProps<"set">
+      set: SVGElementProps<"set">
       stop: SVGElementProps<"stop">
-      // switch: SVGElementProps<"switch">
-      // symbol: SVGElementProps<"symbol">
+      switch: SVGElementProps<"switch">
+      symbol: SVGElementProps<"symbol">
       text: SVGElementProps<"text">
       textPath: SVGElementProps<"textPath">
       tspan: SVGElementProps<"tspan">
       svg: SVGElementProps<"svg">
-      // use: SVGElementProps<"use">
-      // view: SVGElementProps<"view">
+      use: SVGElementProps<"use">
+      view: SVGElementProps<"view">
     }
 
     interface IntrinsicAttributes {
@@ -332,6 +335,7 @@ declare global {
       | typeof $FRAGMENT
       | typeof $CONTEXT
       | typeof $ERROR_BOUNDARY
+      | typeof $INLINE_FN
 
     interface Element {
       type:

package/src/types.utils.ts

@@ -1,26 +1,53 @@
-import type { $CONTEXT, $ERROR_BOUNDARY, $FRAGMENT } from "./constants"
-import type { Signal } from "./signals"
-import type { ErrorBoundaryProps } from "./components/errorBoundary"
+import type {
+  $CONTEXT,
+  $ERROR_BOUNDARY,
+  $FRAGMENT,
+  $INLINE_FN,
+} from "./constants.js"
+import type { Signal } from "./signals/base.js"
+import type { ErrorBoundaryProps } from "./components/errorBoundary.js"
 
-export type SomeElement = HTMLElement | SVGElement
-export type SomeDom = HTMLElement | SVGElement | Text
-export type MaybeElement = SomeElement | undefined
-export type MaybeDom = SomeDom | undefined
+export type {
+  SomeElement,
+  SomeDom,
+  MaybeElement,
+  MaybeDom,
+  FunctionVNode,
+  ElementVNode,
+  DomVNode,
+  ContextNode,
+  ErrorBoundaryNode,
+  FragmentNode,
+  InlineFnNode,
+  Prettify,
+  Signalable,
+  AsyncTaskState,
+  Guard,
+  ArrayHas,
+  RecordHas,
+  Falsy,
+  Truthy,
+}
+
+type SomeElement = HTMLElement | SVGElement
+type SomeDom = HTMLElement | SVGElement | Text
+type MaybeElement = SomeElement | undefined
+type MaybeDom = SomeDom | undefined
 
-export interface FunctionVNode extends Kiru.VNode {
+interface FunctionVNode extends Kiru.VNode {
   type: (props: Record<string, unknown>) => JSX.Element
 }
 
-export interface ElementVNode extends Kiru.VNode {
+interface ElementVNode extends Kiru.VNode {
   dom: SomeElement
   type: string
 }
-export interface DomVNode extends Kiru.VNode {
+interface DomVNode extends Kiru.VNode {
   dom: SomeDom
   type: "#text" | (string & {})
 }
 
-export interface ContextNode<T> extends Kiru.VNode {
+interface ContextNode<T> extends Kiru.VNode {
   type: typeof $CONTEXT
   props: Kiru.VNode["props"] & {
     value: T
@@ -28,23 +55,30 @@ export interface ContextNode<T> extends Kiru.VNode {
   }
 }
 
-export interface ErrorBoundaryNode extends Kiru.VNode {
+interface ErrorBoundaryNode extends Kiru.VNode {
   type: typeof $ERROR_BOUNDARY
   props: ErrorBoundaryProps
   error?: Error
 }
 
-export interface FragmentNode extends Kiru.VNode {
+interface FragmentNode extends Kiru.VNode {
   type: typeof $FRAGMENT
 }
 
-export type Prettify<T> = {
+interface InlineFnNode extends Kiru.VNode {
+  type: typeof $INLINE_FN
+  props: {
+    expr: () => JSX.Element
+  }
+}
+
+type Prettify<T> = {
   [K in keyof T]: T[K]
 } & {}
 
-export type Signalable<T> = T | Signal<T>
+type Signalable<T> = T | Signal<T>
 
-export type AsyncTaskState<T, E extends Error = Error> =
+type AsyncTaskState<T, E extends Error = Error> =
   | {
       data: null
       error: null
@@ -61,19 +95,19 @@ export type AsyncTaskState<T, E extends Error = Error> =
       loading: false
     }
 
-export type Guard<T, K extends keyof T> = {
+type Guard<T, K extends keyof T> = {
   [P in K]: T[P]
 }
 
-export type ArrayHas<T extends any[], U> =
+type ArrayHas<T extends any[], U> =
   // does the union of element types intersect U?
   Extract<T[number], U> extends never ? false : true
 
-export type RecordHas<T extends Record<string, any>, U> = [
-  Extract<T[keyof T], U>
+type RecordHas<T extends Record<string, any>, U> = [
+  Extract<T[keyof T], U>,
 ] extends [never]
   ? false
   : true
 
-export type Falsy = false | 0 | 0n | "" | null | undefined
-export type Truthy<T> = Exclude<T, Falsy>
+type Falsy = false | 0 | 0n | "" | null | undefined
+type Truthy<T> = Exclude<T, Falsy>

package/src/utils/vdom.ts

@@ -5,6 +5,7 @@ import {
   FLAG_UPDATE,
   $ERROR_BOUNDARY,
   $CONTEXT,
+  $INLINE_FN,
 } from "../constants.js"
 import { createElement } from "../index.js"
 import { KiruError } from "../error.js"
@@ -70,7 +71,12 @@ function isValidTextChild(thing: unknown): thing is string | number | bigint {
 }
 
 function isExoticType(type: Kiru.VNode["type"]): type is Kiru.ExoticSymbol {
-  return type === $FRAGMENT || type === $CONTEXT || type === $ERROR_BOUNDARY
+  return (
+    type === $FRAGMENT ||
+    type === $CONTEXT ||
+    type === $ERROR_BOUNDARY ||
+    type === $INLINE_FN
+  )
 }
 
 function isFragment(