@ktjs/core 0.23.0 → 0.24.0

package/dist/index.legacy.js

@@ -1,14 +1,38 @@
 var __ktjs_core__ = (function (exports) {
     'use strict';
 
+    // Shared constants
+    // Empty for now - can be extended with framework-wide constants
+    /**
+     * Mark the attribute as SVG to handle special cases during rendering.
+     */
+    const SVG_ATTR_FLAG = '__kt_svg__';
+    /**
+     * Mark the attribute as MathML to handle special cases during rendering.
+     */
+    const MATHML_ATTR_FLAG = '__kt_mathml__';
+
     // Cached native methods for performance optimization
     const $isArray = Array.isArray;
+    const $is = Object.is;
     const $entries = Object.entries;
-    const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
+    const $random = Math.random;
+    const $isThenable = (o) => typeof o?.then === 'function';
 
     // DOM manipulation utilities
     // # dom natives
     const $isNode = (x) => x?.nodeType > 0;
+    /**
+     * Safe replace `oldNode` With `newNode`
+     */
+    const $replaceNode = (oldNode, newNode) => {
+        if ($isNode(oldNode) && $isNode(newNode)) {
+            if (newNode.contains(oldNode)) {
+                newNode.remove();
+            }
+            oldNode.replaceWith(newNode);
+        }
+    };
     /**
      * & Remove `bind` because it is shockingly slower than wrapper
      * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -54,127 +78,21 @@ var __ktjs_core__ = (function (exports) {
         element.addEventListener(eventName, () => (valueRef.value = element[propName]));
     };
 
-    // Shared utilities and cached native methods for kt.js framework
-    // import './misc/symbol-polyfill.js';
-    // Re-export all utilities
-    Object.defineProperty(window, '__ktjs__', { value: '0.22.3' });
-
-    var KTRef = /** @class */ (function () {
-        function KTRef(_value, _onChanges) {
-            /**
-             * Indicates that this is a KTRef instance
-             */
-            this.isKT = true;
-            this._value = _value;
-            this._onChanges = _onChanges;
-        }
-        Object.defineProperty(KTRef.prototype, "value", {
-            /**
-             * If new value and old value are both nodes, the old one will be replaced in the DOM
-             */
-            get: function () {
-                return this._value;
-            },
-            set: function (newValue) {
-                if (newValue === this._value) {
-                    return;
-                }
-                // replace the old node with the new one in the DOM if both are nodes
-                if (this._value instanceof Node && newValue instanceof Node) {
-                    if (newValue.contains(this._value)) {
-                        this._value.remove();
-                    }
-                    this._value.replaceWith(newValue);
-                }
-                var oldValue = this._value;
-                this._value = newValue;
-                for (var i = 0; i < this._onChanges.length; i++) {
-                    this._onChanges[i](newValue, oldValue);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Register a callback when the value changes
-         * @param callback (newValue, oldValue) => xxx
-         */
-        KTRef.prototype.addOnChange = function (callback) {
-            if (typeof callback !== 'function') {
-                throw new Error('[kt.js error] KTRef.addOnChange: callback must be a function');
-            }
-            this._onChanges.push(callback);
+    if (typeof Symbol === 'undefined') {
+        window.Symbol = function Symbol(description) {
+            return `@@SYMBOL_${description || ''}_${$random().toString(36).slice(2)}`;
         };
-        KTRef.prototype.removeOnChange = function (callback) {
-            for (var i = this._onChanges.length - 1; i >= 0; i--) {
-                if (this._onChanges[i] === callback) {
-                    this._onChanges.splice(i, 1);
-                    return true;
-                }
-            }
-            return false;
-        };
-        return KTRef;
-    }());
-    var isKTRef = function (obj) { return (obj === null || obj === void 0 ? void 0 : obj.isKT) === true; };
-    /**
-     * Reference to the created HTML element.
-     * - **Only** respond to `ref.value` changes, not reactive to internal changes of the element.
-     * - can alse be used to store normal values, but it is not reactive.
-     * - if the value is already a `KTRef`, it will be returned **directly**.
-     * @param value mostly an HTMLElement
-     */
-    function ref(value, onChange) {
-        if (isKTRef(value)) {
-            if (onChange) {
-                value.addOnChange(onChange);
-            }
-            return value;
-        }
-        return new KTRef(value, onChange ? [onChange] : []);
-    }
-    function deref(value) {
-        return isKTRef(value) ? value.value : value;
-    }
-    function kcollect() {
-        var newObj = {};
-        var entries = $entries(this);
-        for (var i = 0; i < entries.length; i++) {
-            var key = entries[i][0];
-            if (key === 'kcollect') {
-                continue;
-            }
-            newObj[key] = entries[i][1].value;
-        }
-        return newObj;
     }
-    /**
-     * Make all first-level properties of the object a `KTRef`.
-     * - `obj.a.b` is not reactive
-     */
-    var surfaceRef = function (obj) {
-        var entries = $entries(obj);
-        var newObj = { kcollect: kcollect };
-        for (var i = 0; i < entries.length; i++) {
-            newObj[entries[i][0]] = ref(entries[i][1]);
-        }
-        return newObj;
-    };
-    // # asserts
-    /**
-     * Assert k-model to be a ref object
-     */
-    var $modelOrRef = function (props, defaultValue) {
-        // & props is an object. Won't use it in any other place
-        if ('k-model' in props) {
-            var kmodel = props['k-model'];
-            if (!(kmodel === null || kmodel === void 0 ? void 0 : kmodel.isKT)) {
-                throw new Error("[kt.js error] k-model data must be a KTRef object, please use 'ref(...)' to wrap it.");
-            }
-            return kmodel;
-        }
-        return ref(defaultValue);
-    };
+
+    // Shared utilities and cached native methods for kt.js framework
+    Object.defineProperty(window, '__ktjs__', { value: '0.22.6' });
+
+    // export const KT_TYPE_REF = 1 as const;
+    // export const KT_TYPE_COMPUTED = 2 as const;
+    // export type KTReactiveTypeEnum = typeof KT_TYPE_REF | typeof KT_TYPE_COMPUTED;
+    var isKT = function (obj) { return obj === null || obj === void 0 ? void 0 : obj.isKT; };
+    var isRef = function (obj) { return (obj === null || obj === void 0 ? void 0 : obj.ktType) === 1 /* KTReactiveType.REF */; };
+    var isComputed = function (obj) { return (obj === null || obj === void 0 ? void 0 : obj.ktType) === 2 /* KTReactiveType.COMPUTED */; };
 
     var booleanHandler = function (element, key, value) {
         if (key in element) {
@@ -238,7 +156,7 @@ var __ktjs_core__ = (function (exports) {
         }
         if ('k-html' in attr) {
             var html = attr['k-html'];
-            if (isKTRef(html)) {
+            if (isKT(html)) {
                 element.innerHTML = html.value;
                 html.addOnChange(function (v) { return (element.innerHTML = v); });
             }
@@ -247,14 +165,14 @@ var __ktjs_core__ = (function (exports) {
             }
         }
         for (var key in attr) {
-            if (key === 'class' ||
+            if (key === 'k-if' ||
+                key === 'k-model' ||
+                key === 'ref' ||
+                key === 'class' ||
                 key === 'className' ||
                 key === 'style' ||
                 key === 'children' ||
-                key === 'k-if' ||
-                key === 'k-model' ||
-                key === 'k-html' ||
-                key === 'ref') {
+                key === 'k-html') {
                 continue;
             }
             var o = attr[key];
@@ -287,7 +205,7 @@ var __ktjs_core__ = (function (exports) {
         if (c === false || c === undefined || c === null) {
             return;
         }
-        if (isKTRef(c)) {
+        if (isKT(c)) {
             var node_1 = assureNode(c.value);
             $append.call(element, node_1);
             c.addOnChange(function (newValue, oldValue) {
@@ -347,8 +265,213 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
+    var KTRef = /** @class */ (function () {
+        function KTRef(_value, _onChanges) {
+            /**
+             * Indicates that this is a KTRef instance
+             */
+            this.isKT = true;
+            this.ktType = 1 /* KTReactiveType.REF */;
+            this._value = _value;
+            this._onChanges = _onChanges;
+        }
+        Object.defineProperty(KTRef.prototype, "value", {
+            /**
+             * If new value and old value are both nodes, the old one will be replaced in the DOM
+             */
+            get: function () {
+                return this._value;
+            },
+            set: function (newValue) {
+                if ($is(newValue, this._value)) {
+                    return;
+                }
+                var oldValue = this._value;
+                $replaceNode(oldValue, newValue);
+                this._value = newValue;
+                for (var i = 0; i < this._onChanges.length; i++) {
+                    this._onChanges[i](newValue, oldValue);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * Register a callback when the value changes
+         * @param callback (newValue, oldValue) => xxx
+         */
+        KTRef.prototype.addOnChange = function (callback) {
+            if (typeof callback !== 'function') {
+                throw new Error('[kt.js error] KTRef.addOnChange: callback must be a function');
+            }
+            this._onChanges.push(callback);
+        };
+        KTRef.prototype.removeOnChange = function (callback) {
+            for (var i = this._onChanges.length - 1; i >= 0; i--) {
+                if (this._onChanges[i] === callback) {
+                    this._onChanges.splice(i, 1);
+                    return true;
+                }
+            }
+            return false;
+        };
+        return KTRef;
+    }());
+    /**
+     * Reference to the created HTML element.
+     * - **Only** respond to `ref.value` changes, not reactive to internal changes of the element.
+     * - can alse be used to store normal values, but it is not reactive.
+     * - if the value is already a `KTRef`, it will be returned **directly**.
+     * @param value mostly an HTMLElement
+     */
+    function ref(value, onChange) {
+        return new KTRef(value, onChange ? [onChange] : []);
+    }
+    /**
+     * Convert a value to `KTRef`.
+     * - Returns the original value if it is already a `KTRef`.
+     * - Throws error if the value is a `KTComputed`.
+     * - Otherwise wraps the value with `ref()`.
+     * @param o value to convert
+     */
+    var toRef = function (o) {
+        if (isRef(o)) {
+            return o;
+        }
+        else if (isComputed(o)) {
+            throw new Error('[kt.js error] Computed values cannot be used as KTRef.');
+        }
+        else {
+            return ref(o);
+        }
+    };
+    function deref(value) {
+        return isKT(value) ? value.value : value;
+    }
+    function kcollect() {
+        var newObj = {};
+        var entries = $entries(this);
+        for (var i = 0; i < entries.length; i++) {
+            var key = entries[i][0];
+            if (key === 'kcollect') {
+                continue;
+            }
+            newObj[key] = entries[i][1].value;
+        }
+        return newObj;
+    }
+    /**
+     * Make all first-level properties of the object a `KTRef`.
+     * - `obj.a.b` is not reactive
+     */
+    var surfaceRef = function (obj) {
+        var entries = $entries(obj);
+        var newObj = { kcollect: kcollect };
+        for (var i = 0; i < entries.length; i++) {
+            newObj[entries[i][0]] = ref(entries[i][1]);
+        }
+        return newObj;
+    };
+    // # asserts
+    /**
+     * Assert k-model to be a ref object
+     */
+    var $modelOrRef = function (props, defaultValue) {
+        // & props is an object. Won't use it in any other place
+        if ('k-model' in props) {
+            var kmodel = props['k-model'];
+            if (!(kmodel === null || kmodel === void 0 ? void 0 : kmodel.isKT)) {
+                throw new Error("[kt.js error] k-model data must be a KTRef object, please use 'ref(...)' to wrap it.");
+            }
+            return kmodel;
+        }
+        return ref(defaultValue);
+    };
+
+    var KTComputed = /** @class */ (function () {
+        function KTComputed(_calculator, reactives) {
+            /**
+             * Indicates that this is a KTRef instance
+             */
+            this.isKT = true;
+            this.ktType = 2 /* KTReactiveType.COMPUTED */;
+            /**
+             * @internal
+             */
+            this._onChanges = [];
+            this._calculator = _calculator;
+            this._value = _calculator();
+            this._subscribe(reactives);
+        }
+        KTComputed.prototype._subscribe = function (reactives) {
+            var _this = this;
+            for (var i = 0; i < reactives.length; i++) {
+                var reactive = reactives[i];
+                reactive.addOnChange(function () {
+                    var oldValue = _this._value;
+                    _this._value = _this._calculator();
+                    if (oldValue === _this._value) {
+                        return;
+                    }
+                    $replaceNode(oldValue, _this._value);
+                    for (var i_1 = 0; i_1 < _this._onChanges.length; i_1++) {
+                        _this._onChanges[i_1](_this._value, oldValue);
+                    }
+                });
+            }
+        };
+        Object.defineProperty(KTComputed.prototype, "value", {
+            /**
+             * If new value and old value are both nodes, the old one will be replaced in the DOM
+             */
+            get: function () {
+                return this._value;
+            },
+            set: function (_newValue) {
+                throw new Error('[kt.js error] KTComputed: cannot set value of a computed value');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * Register a callback when the value changes
+         * @param callback (newValue, oldValue) => xxx
+         */
+        KTComputed.prototype.addOnChange = function (callback) {
+            if (typeof callback !== 'function') {
+                throw new Error('[kt.js error] KTRef.addOnChange: callback must be a function');
+            }
+            this._onChanges.push(callback);
+        };
+        /**
+         * Unregister a callback
+         * @param callback (newValue, oldValue) => xxx
+         */
+        KTComputed.prototype.removeOnChange = function (callback) {
+            for (var i = this._onChanges.length - 1; i >= 0; i--) {
+                if (this._onChanges[i] === callback) {
+                    this._onChanges.splice(i, 1);
+                    return true;
+                }
+            }
+            return false;
+        };
+        return KTComputed;
+    }());
+    /**
+     * Create a reactive computed value
+     * @param computeFn
+     * @param reactives refs and computeds that this computed depends on
+     */
+    function computed(computeFn, reactives) {
+        if (reactives.some(function (v) { return !isKT(v); })) {
+            throw new Error('[kt.js error] computed: all reactives must be KTRef or KTComputed instances');
+        }
+        return new KTComputed(computeFn, reactives);
+    }
+
     function applyKModel(element, valueRef) {
-        if (!isKTRef(valueRef)) {
+        if (!isKT(valueRef)) {
             console.warn('[kt.js warn] k-model value must be a KTRef.');
             return;
         }
@@ -375,9 +498,6 @@ var __ktjs_core__ = (function (exports) {
     var svgCreator = function (tag) { return document.createElementNS('http://www.w3.org/2000/svg', tag); };
     var mathMLCreator = function (tag) { return document.createElementNS('http://www.w3.org/1998/Math/MathML', tag); };
     var creator = htmlCreator;
-    // # consts
-    var SVG_ATTR_FLAG = '__kt_svg__';
-    var MATHML_ATTR_FLAG = '__kt_mathml__';
     /**
      * Create an enhanced HTMLElement.
      * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -388,7 +508,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.23.0 (Last Update: 2026.02.03 17:15:01.812)
+     * @version 0.24.0 (Last Update: 2026.02.05 12:08:54.164)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -418,13 +538,7 @@ var __ktjs_core__ = (function (exports) {
         applyAttr(element, attr);
         applyContent(element, content);
         if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
-            var kmodel = attr['k-model'];
-            if (isKTRef(kmodel)) {
-                applyKModel(element, kmodel);
-            }
-            else {
-                throw new Error('[kt.js error] k-model value must be a KTRef.');
-            }
+            applyKModel(element, attr['k-model']);
         }
         return element;
     };
@@ -444,20 +558,23 @@ var __ktjs_core__ = (function (exports) {
      * @param props properties/attributes
      */
     function jsx(tag, props) {
-        var maybeDummyRef = isKTRef(props.ref) ? props.ref : dummyRef;
+        if (isComputed(props.ref)) {
+            throw new Error('[kt.js error] Cannot assign a computed value to an element.');
+        }
+        var maybeDummyRef = isRef(props.ref) ? props.ref : dummyRef;
         var el;
         if ('k-if' in props) {
             var kif = props['k-if'];
             var condition = kif; // assume boolean by default
             // Handle reactive k-if
-            if (isKTRef(kif)) {
+            if (isKT(kif)) {
                 kif.addOnChange(function (newValue, oldValue) {
                     if (newValue === oldValue) {
                         return;
                     }
                     var oldEl = el;
                     el = newValue ? create(tag, props) : placeholder();
-                    oldEl.replaceWith(el);
+                    $replaceNode(oldEl, el);
                     maybeDummyRef.value = el;
                 });
                 condition = kif.value;
@@ -560,7 +677,7 @@ var __ktjs_core__ = (function (exports) {
      * Returns a Comment anchor node with rendered elements in __kt_for_list__
      */
     function KTFor(props) {
-        var _a, _b;
+        var _a;
         var list = props.list, map = props.map;
         var key = (_a = props.key) !== null && _a !== void 0 ? _a : (function (item) { return item; });
         // Create anchor comment node
@@ -721,7 +838,7 @@ var __ktjs_core__ = (function (exports) {
             return anchor;
         };
         // Set ref if provided
-        if ((_b = props.ref) === null || _b === void 0 ? void 0 : _b.isKT) {
+        if (isRef(props.ref)) {
             props.ref.value = anchor;
         }
         return anchor;
@@ -772,18 +889,23 @@ var __ktjs_core__ = (function (exports) {
     exports.$modelOrRef = $modelOrRef;
     exports.Fragment = Fragment;
     exports.KTAsync = KTAsync;
+    exports.KTComputed = KTComputed;
     exports.KTFor = KTFor;
     exports.KTRef = KTRef;
+    exports.computed = computed;
     exports.createElement = h;
     exports.createRedrawable = createRedrawable;
     exports.deref = deref;
     exports.h = h;
-    exports.isKTRef = isKTRef;
+    exports.isComputed = isComputed;
+    exports.isKT = isKT;
+    exports.isRef = isRef;
     exports.jsx = jsx;
     exports.jsxDEV = jsxDEV;
     exports.jsxs = jsxs;
     exports.ref = ref;
     exports.surfaceRef = surfaceRef;
+    exports.toRef = toRef;
 
     return exports;