@ktjs/core 0.29.6 → 0.29.8

package/dist/index.mjs

@@ -1,315 +1,6 @@
-import { $isArray, $isThenable, $append, $isNode, $emptyFn, $is, $replaceNode, $entries, $applyModel, $forEach } from '@ktjs/shared';
-
-var KTReactiveType = /* @__PURE__ */ ((KTReactiveType2) => {
-  KTReactiveType2[KTReactiveType2["REF"] = 1] = "REF";
-  KTReactiveType2[KTReactiveType2["COMPUTED"] = 2] = "COMPUTED";
-  return KTReactiveType2;
-})(KTReactiveType || {});
-const isKT = (obj) => obj?.isKT;
-const isRef = (obj) => obj?.ktType === 1 /* REF */;
-const isComputed = (obj) => obj?.ktType === 2 /* COMPUTED */;
-
-const booleanHandler = (element, key, value) => {
-  if (key in element) {
-    element[key] = !!value;
-  } else {
-    element.setAttribute(key, value);
-  }
-};
-const valueHandler = (element, key, value) => {
-  if (key in element) {
-    element[key] = value;
-  } else {
-    element.setAttribute(key, value);
-  }
-};
-const handlers = {
-  checked: booleanHandler,
-  selected: booleanHandler,
-  value: valueHandler,
-  valueAsDate: valueHandler,
-  valueAsNumber: valueHandler,
-  defaultValue: valueHandler,
-  defaultChecked: booleanHandler,
-  defaultSelected: booleanHandler,
-  disabled: booleanHandler,
-  readOnly: booleanHandler,
-  multiple: booleanHandler,
-  required: booleanHandler,
-  autofocus: booleanHandler,
-  open: booleanHandler,
-  controls: booleanHandler,
-  autoplay: booleanHandler,
-  loop: booleanHandler,
-  muted: booleanHandler,
-  defer: booleanHandler,
-  async: booleanHandler,
-  hidden: (element, _key, value) => element.hidden = !!value
-};
-
-const defaultHandler = (element, key, value) => element.setAttribute(key, value);
-const setElementStyle = (element, style) => {
-  if (typeof style === "string") {
-    element.style.cssText = style;
-    return;
-  }
-  for (const key in style) {
-    element.style[key] = style[key];
-  }
-};
-function attrIsObject(element, attr) {
-  const classValue = attr.class || attr.className;
-  if (classValue !== void 0) {
-    if (isKT(classValue)) {
-      element.setAttribute("class", classValue.value);
-      classValue.addOnChange((v) => element.setAttribute("class", v));
-    } else {
-      element.setAttribute("class", classValue);
-    }
-  }
-  const style = attr.style;
-  if (style) {
-    if (typeof style === "string") {
-      element.setAttribute("style", style);
-    } else if (typeof style === "object") {
-      if (isKT(style)) {
-        setElementStyle(element, style.value);
-        style.addOnChange((v) => setElementStyle(element, v));
-      } else {
-        setElementStyle(element, style);
-      }
-    }
-  }
-  if ("k-html" in attr) {
-    const html = attr["k-html"];
-    if (isKT(html)) {
-      element.innerHTML = html.value;
-      html.addOnChange((v) => element.innerHTML = v);
-    } else {
-      element.innerHTML = html;
-    }
-  }
-  for (const key in attr) {
-    if (key === "k-if" || key === "k-model" || key === "k-for" || key === "k-key" || key === "ref" || key === "class" || key === "className" || key === "style" || key === "children" || key === "k-html" || key === "k-else") {
-      continue;
-    }
-    const o = attr[key];
-    if (key.startsWith("on:")) {
-      element.addEventListener(key.slice(3), o);
-    } else {
-      const handler = handlers[key] || defaultHandler;
-      if (isKT(o)) {
-        handler(element, key, o.value);
-        o.addOnChange((v) => handler(element, key, v));
-      } else {
-        handler(element, key, o);
-      }
-    }
-  }
-}
-function applyAttr(element, attr) {
-  if (!attr) {
-    return;
-  }
-  if (typeof attr === "object" && attr !== null) {
-    attrIsObject(element, attr);
-  } else {
-    throw new Error("[@ktjs/core error] attr must be an object.");
-  }
-}
-
-const assureNode = (o) => $isNode(o) ? o : document.createTextNode(o);
-function apdSingle(element, c) {
-  if (c === false || c === void 0 || c === null) {
-    return;
-  }
-  if (isKT(c)) {
-    let node = assureNode(c.value);
-    $append.call(element, node);
-    c.addOnChange((newValue, oldValue) => {
-      if ($isNode(newValue) && $isNode(oldValue)) {
-        return;
-      }
-      const oldNode = node;
-      node = assureNode(newValue);
-      oldNode.replaceWith(node);
-    });
-  } else {
-    $append.call(element, c);
-    const list = c.__kt_for_list__;
-    if ($isArray(list)) {
-      apd(element, list);
-    }
-  }
-}
-function apd(element, c) {
-  if ($isThenable(c)) {
-    c.then((r) => apd(element, r));
-  } else if ($isArray(c)) {
-    for (let i = 0; i < c.length; i++) {
-      const ci = c[i];
-      if ($isThenable(ci)) {
-        const comment = document.createComment("ktjs-promise-placeholder");
-        $append.call(element, comment);
-        ci.then((awaited) => comment.replaceWith(awaited));
-      } else {
-        apdSingle(element, ci);
-      }
-    }
-  } else {
-    apdSingle(element, c);
-  }
-}
-function applyContent(element, content) {
-  if ($isArray(content)) {
-    for (let i = 0; i < content.length; i++) {
-      apd(element, content[i]);
-    }
-  } else {
-    apd(element, content);
-  }
-}
-
-class KTRef {
-  /**
-   * Indicates that this is a KTRef instance
-   */
-  isKT = true;
-  ktType = KTReactiveType.REF;
-  /**
-   * @internal
-   */
-  _value;
-  /**
-   * @internal
-   */
-  _onChanges;
-  /**
-   * @internal
-   */
-  _emit(newValue, oldValue) {
-    for (let i = 0; i < this._onChanges.length; i++) {
-      this._onChanges[i](newValue, oldValue);
-    }
-  }
-  constructor(_value, _onChanges) {
-    this._value = _value;
-    this._onChanges = _onChanges;
-  }
-  /**
-   * If new value and old value are both nodes, the old one will be replaced in the DOM
-   */
-  get value() {
-    return this._value;
-  }
-  set value(newValue) {
-    if ($is(newValue, this._value)) {
-      return;
-    }
-    const oldValue = this._value;
-    $replaceNode(oldValue, newValue);
-    this._value = newValue;
-    this._emit(newValue, oldValue);
-  }
-  /**
-   * Force all listeners to run even when reference identity has not changed.
-   * Useful for in-place array/object mutations.
-   */
-  notify() {
-    this._emit(this._value, this._value);
-  }
-  /**
-   * Mutate current value in-place and notify listeners once.
-   *
-   * @example
-   * const items = ref<number[]>([1, 2]);
-   * items.mutate((list) => list.push(3));
-   */
-  mutate(mutator) {
-    if (typeof mutator !== "function") {
-      throw new Error("[@ktjs/core error] KTRef.mutate: mutator must be a function");
-    }
-    const oldValue = this._value;
-    const result = mutator(this._value);
-    this._emit(this._value, oldValue);
-    return result;
-  }
-  /**
-   * Register a callback when the value changes
-   * @param callback (newValue, oldValue) => xxx
-   */
-  addOnChange(callback) {
-    if (typeof callback !== "function") {
-      throw new Error("[@ktjs/core error] KTRef.addOnChange: callback must be a function");
-    }
-    this._onChanges.push(callback);
-  }
-  removeOnChange(callback) {
-    for (let i = this._onChanges.length - 1; i >= 0; i--) {
-      if (this._onChanges[i] === callback) {
-        this._onChanges.splice(i, 1);
-        return true;
-      }
-    }
-    return false;
-  }
-}
-function ref(value, onChange) {
-  return new KTRef(value, onChange ? [onChange] : []);
-}
-const toRef = (o) => {
-  if (isRef(o)) {
-    return o;
-  } else if (isComputed(o)) {
-    throw new Error("[@ktjs/core error] Computed values cannot be used as KTRef.");
-  } else {
-    return ref(o);
-  }
-};
-function kcollect() {
-  const newObj = {};
-  const entries = $entries(this);
-  for (let i = 0; i < entries.length; i++) {
-    const key = entries[i][0];
-    if (key === "kcollect") {
-      continue;
-    }
-    newObj[key] = entries[i][1].value;
-  }
-  return newObj;
-}
-const surfaceRef = (obj) => {
-  const entries = $entries(obj);
-  const newObj = { kcollect };
-  for (let i = 0; i < entries.length; i++) {
-    newObj[entries[i][0]] = ref(entries[i][1]);
-  }
-  return newObj;
-};
-const $modelOrRef = (props, defaultValue) => {
-  if ("k-model" in props) {
-    const kmodel = props["k-model"];
-    if (isRef(kmodel)) {
-      return kmodel;
-    } else {
-      throw new Error(`[@ktjs/core error] k-model data must be a KTRef object, please use 'ref(...)' to wrap it.`);
-    }
-  }
-  return ref(defaultValue);
-};
-const $refSetter = (props, node) => props.ref.value = node;
-const $initRef = (props, node) => {
-  if (!("ref" in props)) {
-    return $emptyFn;
-  }
-  const r = props.ref;
-  if (isRef(r)) {
-    r.value = node;
-    return $refSetter;
-  } else {
-    throw new Error("[@ktjs/core error] Fragment: ref must be a KTRef");
-  }
-};
+import { $replaceNode, $emptyFn, $isThenable } from '@ktjs/shared';
+import { K as KTReactiveType, i as isKT, t as toReactive, $ as $initRef } from './jsx-runtime-DGJHUQEM.js';
+export { d as $modelOrRef, F as Fragment, e as KTRef, h as createElement, c as createRedrawable, f as dereactive, h, g as isComputed, k as isRef, j as jsx, a as jsxDEV, b as jsxs, r as ref, s as surfaceRef, l as toRef } from './jsx-runtime-DGJHUQEM.js';
 
 class KTComputed {
   /**
@@ -452,292 +143,6 @@ function effect(effectFn, reactives, options) {
   };
 }
 
-const toReactive = (value, onChange) => {
-  if (isKT(value)) {
-    if (onChange) {
-      value.addOnChange(onChange);
-    }
-    return value;
-  } else {
-    return ref(value, onChange);
-  }
-};
-function dereactive(value) {
-  return isKT(value) ? value.value : value;
-}
-
-function applyKModel(element, valueRef) {
-  if (!isKT(valueRef)) {
-    console.warn('[@ktjs/core warn]',"k-model value must be a KTRef.");
-    return;
-  }
-  if (element instanceof HTMLInputElement) {
-    if (element.type === "radio" || element.type === "checkbox") {
-      $applyModel(element, valueRef, "checked", "change");
-    } else {
-      $applyModel(element, valueRef, "value", "input");
-    }
-  } else if (element instanceof HTMLSelectElement) {
-    $applyModel(element, valueRef, "value", "change");
-  } else if (element instanceof HTMLTextAreaElement) {
-    $applyModel(element, valueRef, "value", "input");
-  } else {
-    console.warn('[@ktjs/core warn]',"not supported element for k-model:");
-  }
-}
-
-const htmlCreator = (tag) => document.createElement(tag);
-const svgCreator = (tag) => document.createElementNS("http://www.w3.org/2000/svg", tag);
-const mathMLCreator = (tag) => document.createElementNS("http://www.w3.org/1998/Math/MathML", tag);
-let creator = htmlCreator;
-const h = (tag, attr, content) => {
-  if (typeof tag !== "string") {
-    throw new Error("[@ktjs/core error] tagName must be a string.");
-  }
-  if (attr) {
-    if ("__svg" in attr) {
-      delete attr["__svg"];
-      creator = svgCreator;
-    } else if ("__mathml" in attr) {
-      delete attr["__mathml"];
-      creator = mathMLCreator;
-    } else {
-      creator = htmlCreator;
-    }
-  }
-  const element = creator(tag);
-  applyAttr(element, attr);
-  applyContent(element, content);
-  if (typeof attr === "object" && attr !== null && "k-model" in attr) {
-    applyKModel(element, attr["k-model"]);
-  }
-  return element;
-};
-
-const FRAGMENT_MOUNT_PATCHED = "__kt_fragment_mount_patched__";
-const FRAGMENT_MOUNT = "__kt_fragment_mount__";
-if (typeof Node !== "undefined" && !globalThis[FRAGMENT_MOUNT_PATCHED]) {
-  globalThis[FRAGMENT_MOUNT_PATCHED] = true;
-  const originAppendChild = Node.prototype.appendChild;
-  Node.prototype.appendChild = function(node) {
-    const result = originAppendChild.call(this, node);
-    const mount = node[FRAGMENT_MOUNT];
-    if (typeof mount === "function") {
-      mount();
-    }
-    return result;
-  };
-  const originInsertBefore = Node.prototype.insertBefore;
-  Node.prototype.insertBefore = function(node, child) {
-    const result = originInsertBefore.call(this, node, child);
-    const mount = node[FRAGMENT_MOUNT];
-    if (typeof mount === "function") {
-      mount();
-    }
-    return result;
-  };
-}
-function Fragment$1(props) {
-  const elements = [];
-  const anchor = document.createComment("kt-fragment");
-  let inserted = false;
-  let observer;
-  const redraw = () => {
-    const newElements = childrenRef.value;
-    const parent = anchor.parentNode;
-    if (!parent) {
-      elements.length = 0;
-      for (let i = 0; i < newElements.length; i++) {
-        elements.push(newElements[i]);
-      }
-      anchor.__kt_fragment_list__ = elements;
-      return;
-    }
-    for (let i = 0; i < elements.length; i++) {
-      elements[i].remove();
-    }
-    const fragment = document.createDocumentFragment();
-    elements.length = 0;
-    for (let i = 0; i < newElements.length; i++) {
-      const element = newElements[i];
-      elements.push(element);
-      fragment.appendChild(element);
-    }
-    parent.insertBefore(fragment, anchor.nextSibling);
-    inserted = true;
-    delete anchor[FRAGMENT_MOUNT];
-    observer?.disconnect();
-    observer = void 0;
-    anchor.__kt_fragment_list__ = elements;
-  };
-  const childrenRef = toReactive(props.children, redraw);
-  const renderInitial = () => {
-    const current = childrenRef.value;
-    elements.length = 0;
-    const fragment = document.createDocumentFragment();
-    for (let i = 0; i < current.length; i++) {
-      const element = current[i];
-      elements.push(element);
-      fragment.appendChild(element);
-    }
-    anchor.__kt_fragment_list__ = elements;
-    const parent = anchor.parentNode;
-    if (parent && !inserted) {
-      parent.insertBefore(fragment, anchor.nextSibling);
-      inserted = true;
-    }
-  };
-  renderInitial();
-  anchor[FRAGMENT_MOUNT] = () => {
-    if (!inserted && anchor.parentNode) {
-      redraw();
-    }
-  };
-  observer = new MutationObserver(() => {
-    if (anchor.parentNode && !inserted) {
-      redraw();
-      observer?.disconnect();
-      observer = void 0;
-    }
-  });
-  observer.observe(document.body, { childList: true, subtree: true });
-  $initRef(props, anchor);
-  return anchor;
-}
-function convertChildrenToElements(children) {
-  const elements = [];
-  const processChild = (child) => {
-    if (child === void 0 || child === null || child === false || child === true) {
-      return;
-    }
-    if ($isArray(child)) {
-      $forEach(child, processChild);
-      return;
-    }
-    if (typeof child === "string" || typeof child === "number") {
-      const span = document.createElement("span");
-      span.textContent = String(child);
-      elements.push(span);
-      return;
-    }
-    if (child instanceof HTMLElement) {
-      elements.push(child);
-      return;
-    }
-    if (isKT(child)) {
-      processChild(child.value);
-      return;
-    }
-    console.warn("Fragment: unsupported child type", child);
-  };
-  processChild(children);
-  return elements;
-}
-
-const jsxh = (tag, props) => {
-  if (typeof tag === "function") {
-    return tag(props);
-  } else {
-    return h(tag, props, props.children);
-  }
-};
-const placeholder = (data) => document.createComment(data);
-
-function kif(tag, props) {
-  const kif2 = toReactive(props["k-if"]);
-  let el = kif2.value ? jsxh(tag, props) : placeholder("k-if");
-  el.__kif__ = kif2;
-  const setter = $initRef(props, el);
-  kif2.addOnChange((newValue) => {
-    const old = el;
-    el = newValue ? jsxh(tag, props) : placeholder("k-if");
-    el.__kif__ = kif2;
-    setter(props, el);
-    $replaceNode(old, el);
-  });
-  return el;
-}
-function kelse(tag, props) {
-  let el = placeholder("k-else");
-  const setter = $initRef(props, el);
-  el.__kelse__ = (newValue) => {
-    const old = el;
-    el = newValue ? placeholder("k-else") : jsxh(tag, props);
-    el.__kelse__ = old.__kelse__;
-    setter(props, el);
-    $replaceNode(old, el);
-  };
-  return el;
-}
-function kifelseApply(el) {
-  const childNodes = el.childNodes;
-  if (childNodes.length === 0) {
-    return;
-  }
-  if (childNodes[0].__kelse__) {
-    throw new Error("[@ktjs/core error] k-else cannot be the first child of its parent element.");
-  }
-  for (let i = 1; i < childNodes.length; i++) {
-    const child = childNodes[i];
-    if (!child.__kelse__) {
-      continue;
-    }
-    const last = childNodes[i - 1];
-    if (!("__kif__" in last)) {
-      throw new Error("[@ktjs/core error] k-else must be immediately preceded by a k-if element.");
-    }
-    const kif2 = last.__kif__;
-    if (!kif2) {
-      continue;
-    }
-    if (!isKT(kif2)) {
-      continue;
-    }
-    kif2.addOnChange(child.__kelse__);
-    if (!kif2.value) {
-      child.__kelse__(false);
-    }
-  }
-}
-
-function jsx(tag, props) {
-  if (isComputed(props.ref)) {
-    throw new Error("[@ktjs/core error] Cannot assign a computed value to an element.");
-  }
-  if ("k-if" in props) {
-    return kif(tag, props);
-  }
-  if ("k-else" in props) {
-    return kelse(tag, props);
-  }
-  const el = jsxh(tag, props);
-  $initRef(props, el);
-  kifelseApply(el);
-  return el;
-}
-function Fragment(props) {
-  const { children } = props ?? {};
-  if (!children) {
-    return placeholder("kt-fragment-empty");
-  }
-  const elements = convertChildrenToElements(children);
-  return Fragment$1({ children: elements });
-}
-const jsxDEV = (...args) => {
-  return jsx(...args);
-};
-const jsxs = jsx;
-function createRedrawable(creator) {
-  const elRef = ref();
-  const redraw = () => {
-    elRef.value = creator();
-    elRef.redraw = redraw;
-    return elRef.value;
-  };
-  redraw();
-  return elRef;
-}
-
 function KTAsync(props) {
   const raw = props.component(props);
   let comp = props.skeleton ?? document.createComment("ktjs-suspense-placeholder");
@@ -915,4 +320,4 @@ function getSequence(arr) {
   return result;
 }
 
-export { $initRef, $modelOrRef, Fragment, KTAsync, KTComputed, KTFor, KTReactiveType, KTRef, computed, h as createElement, createRedrawable, dereactive, effect, h, isComputed, isKT, isRef, jsx, jsxDEV, jsxs, ref, surfaceRef, toReactive, toRef };
+export { $initRef, KTAsync, KTComputed, KTFor, KTReactiveType, computed, effect, isKT, toReactive };

package/dist/jsx/async.d.ts

@@ -0,0 +1,13 @@
+import { KTComponent, KTRawContent } from '../types/h.js';
+import { KTRef } from '../reactive/ref.js';
+/**
+ * Extract component props type (excluding ref and children)
+ */
+type ExtractComponentProps<T> = T extends (props: infer P) => any ? Omit<P, 'ref' | 'children'> : {};
+export declare function KTAsync<T extends KTComponent>(props: {
+    ref?: KTRef<JSX.Element>;
+    skeleton?: JSX.Element;
+    component: T;
+    children?: KTRawContent;
+} & ExtractComponentProps<T>): JSX.Element;
+export {};

package/dist/jsx/common.d.ts

@@ -0,0 +1,4 @@
+import { JSXTag } from '@ktjs/shared';
+import { KTAttribute } from '../types/h.js';
+export declare const jsxh: (tag: JSXTag, props: KTAttribute) => HTMLElement;
+export declare const placeholder: (data: string) => JSX.Element;

package/dist/jsx/for.d.ts

@@ -0,0 +1,14 @@
+import { KTRef } from '../reactive/ref.js';
+import { KTReactive } from '../types/reactive.js';
+export type KTForElement = JSX.Element;
+export interface KTForProps<T> {
+    ref?: KTRef<KTForElement>;
+    list: T[] | KTReactive<T[]>;
+    key?: (item: T, index: number, array: T[]) => any;
+    map: (item: T, index: number, array: T[]) => HTMLElement;
+}
+/**
+ * KTFor - List rendering component with key-based optimization
+ * Returns a Comment anchor node with rendered elements in __kt_for_list__
+ */
+export declare function KTFor<T>(props: KTForProps<T>): KTForElement;

package/dist/jsx/fragment.d.ts

@@ -0,0 +1,35 @@
+import { KTRef } from '../reactive/ref.js';
+import { KTReactive } from '../types/reactive.js';
+import { KTRawContent } from '../types/h.js';
+export interface FragmentProps<T extends HTMLElement = HTMLElement> {
+    /** Array of child elements, supports reactive arrays */
+    children: T[] | KTReactive<T[]>;
+    /** element key function for optimization (future enhancement) */
+    key?: (element: T, index: number, array: T[]) => any;
+    /** ref to get the anchor node */
+    ref?: KTRef<JSX.Element>;
+}
+/**
+ * Fragment - Container component for managing arrays of child elements
+ *
+ * Features:
+ * 1. Returns a comment anchor node, child elements are inserted after the anchor
+ * 2. Supports reactive arrays, automatically updates DOM when array changes
+ * 3. Basic version uses simple replacement algorithm (remove all old elements, insert all new elements)
+ * 4. Future enhancement: key-based optimization
+ *
+ * Usage example:
+ * ```tsx
+ * const children = ref([<div>A</div>, <div>B</div>]);
+ * const fragment = <Fragment children={children} />;
+ * document.body.appendChild(fragment);
+ *
+ * // Automatic update
+ * children.value = [<div>C</div>, <div>D</div>];
+ * ```
+ */
+export declare function Fragment<T extends HTMLElement = HTMLElement>(props: FragmentProps<T>): JSX.Element;
+/**
+ * Convert KTRawContent to HTMLElement array
+ */
+export declare function convertChildrenToElements(children: KTRawContent): HTMLElement[];

package/dist/jsx/if.d.ts

@@ -0,0 +1,10 @@
+import { JSXTag } from '@ktjs/shared';
+import { KTAttribute } from '../types/h.js';
+import { KElseElement, KIfElement } from '../types/directives.js';
+export declare function kif(tag: JSXTag, props: KTAttribute): KIfElement;
+export declare function kelse(tag: JSXTag, props: KTAttribute): KElseElement;
+/**
+ * Deal with `k-if` and `k-else`, checking syntax and applying listeners
+ * @param el parent element
+ */
+export declare function kifelseApply(el: HTMLElement): void;

package/dist/jsx/index.d.ts

@@ -0,0 +1,2 @@
+export { jsx, jsxs, jsxDEV, Fragment, createElement, createRedrawable } from './jsx-runtime.js';
+export type * from '../types/jsx.js';

package/dist/jsx/index.mjs

@@ -0,0 +1 @@
+export { F as Fragment, h as createElement, c as createRedrawable, j as jsx, a as jsxDEV, b as jsxs } from '../jsx-runtime-DGJHUQEM.js';