@ktjs/core 0.29.6 → 0.29.8

package/dist/jsx/jsx-runtime.d.ts

@@ -0,0 +1,43 @@
+import { JSXTag } from '@ktjs/shared';
+import { KTAttribute, KTRawContent } from '../types/h.js';
+import { h } from '../h/index.js';
+import { KTRef } from '../reactive/index.js';
+/**
+ * @param tag html tag or function component
+ * @param props properties/attributes
+ */
+export declare function jsx(tag: JSXTag, props: KTAttribute): JSX.Element;
+/**
+ * Fragment support - returns an array of children
+ * Enhanced Fragment component that manages arrays of elements
+ */
+export declare function Fragment(props: {
+    children?: KTRawContent;
+}): JSX.Element;
+/**
+ * JSX Development runtime - same as jsx but with additional dev checks
+ */
+export declare const jsxDEV: typeof jsx;
+/**
+ * JSX runtime for React 17+ automatic runtime
+ * This is called when using jsx: "react-jsx" or "react-jsxdev"
+ */
+export declare const jsxs: typeof jsx;
+export { h, h as createElement };
+/**
+ * A helper to create redrawable elements
+ * ```tsx
+ * export function MyComponent() {
+ *    let aa = 10;
+ *    // ...
+ *    // aa might be changed
+ *    return createRedrawable(() => <div>{aa}</div>);
+ * }
+ * ```
+ * Then the returned element has a `redraw` method to redraw itself with new values.
+ * @param creator a simple creator function that returns an element
+ * @returns created element's ref
+ */
+export declare function createRedrawable<T>(creator: () => T): KTRef<T> & {
+    redraw: () => T;
+};

package/dist/jsx/jsx-runtime.mjs

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

package/dist/jsx-runtime-DGJHUQEM.js

@@ -0,0 +1,600 @@
+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");
+  }
+};
+
+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;
+}
+
+export { $initRef as $, Fragment as F, KTReactiveType as K, jsxDEV as a, jsxs as b, createRedrawable as c, $modelOrRef as d, KTRef as e, dereactive as f, isComputed as g, h, isKT as i, jsx as j, isRef as k, toRef as l, ref as r, surfaceRef as s, toReactive as t };

package/dist/reactive/computed.d.ts

@@ -0,0 +1,63 @@
+import { KTReactive, ReactiveChangeHandler } from '../types/reactive.js';
+import { KTReactiveType } from './core.js';
+export declare class KTComputed<T> implements KTReactive<T> {
+    /**
+     * Indicates that this is a KTRef instance
+     */
+    isKT: true;
+    ktType: KTReactiveType;
+    /**
+     * @internal
+     */
+    private _calculator;
+    /**
+     * @internal
+     */
+    private _value;
+    /**
+     * @internal
+     */
+    private _onChanges;
+    /**
+     * @internal
+     */
+    private _emit;
+    /**
+     * @internal
+     */
+    private _recalculate;
+    /**
+     * @internal
+     */
+    private _subscribe;
+    constructor(_calculator: () => T, reactives: Array<KTReactive<unknown>>);
+    /**
+     * If new value and old value are both nodes, the old one will be replaced in the DOM
+     */
+    get value(): T;
+    set value(_newValue: T);
+    /**
+     * Force listeners to run once with the latest computed result.
+     */
+    notify(): void;
+    /**
+     * Computed values are derived from dependencies and should not be mutated manually.
+     */
+    mutate<R = void>(): R;
+    /**
+     * Register a callback when the value changes
+     * @param callback (newValue, oldValue) => xxx
+     */
+    addOnChange(callback: ReactiveChangeHandler<T>): void;
+    /**
+     * Unregister a callback
+     * @param callback (newValue, oldValue) => xxx
+     */
+    removeOnChange(callback: ReactiveChangeHandler<T>): boolean;
+}
+/**
+ * Create a reactive computed value
+ * @param computeFn
+ * @param reactives refs and computeds that this computed depends on
+ */
+export declare function computed<T = JSX.Element>(computeFn: () => T, reactives: Array<KTReactive<any>>): KTComputed<T>;