@ktjs/core 0.29.7 → 0.29.9

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 };