@ktjs/core 0.24.4 → 0.26.1

package/dist/index.iife.js

@@ -78,6 +78,12 @@ var __ktjs_core__ = (function (exports) {
         element.addEventListener(eventName, () => (valueRef.value = element[propName]));
     };
 
+    // String manipulation utilities
+    /**
+     * Default empty function
+     */
+    const $emptyFn = (() => true);
+
     if (typeof Symbol === 'undefined') {
         window.Symbol = function Symbol(description) {
             return `@@SYMBOL_${description || ''}_${$random().toString(36).slice(2)}`;
@@ -85,7 +91,7 @@ var __ktjs_core__ = (function (exports) {
     }
 
     // Shared utilities and cached native methods for kt.js framework
-    Object.defineProperty(window, '__ktjs__', { value: '0.22.6' });
+    Object.defineProperty(window, '__ktjs__', { value: '0.22.8' });
 
     // export const KT_TYPE_REF = 1 as const;
     // export const KT_TYPE_COMPUTED = 2 as const;
@@ -136,19 +142,41 @@ var __ktjs_core__ = (function (exports) {
     };
 
     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 !== undefined) {
-            element.setAttribute('class', classValue);
+            if (isKT(classValue)) {
+                element.setAttribute('class', classValue.value);
+                classValue.addOnChange((v) => element.setAttribute('class', v));
+            }
+            else {
+                // todo 这里要让undefined 排除出reactify类型工具之外
+                element.setAttribute('class', classValue);
+            }
         }
+        // todo 这里加入reactive支持
+        // todo 类型定义也要支持reactive响应式
         const style = attr.style;
         if (style) {
             if (typeof style === 'string') {
                 element.setAttribute('style', style);
             }
             else if (typeof style === 'object') {
-                for (const key in style) {
-                    element.style[key] = style[key];
+                if (isKT(style)) {
+                    setElementStyle(element, style.value);
+                    style.addOnChange((v) => setElementStyle(element, v));
+                }
+                else {
+                    setElementStyle(element, style);
                 }
             }
         }
@@ -180,8 +208,14 @@ var __ktjs_core__ = (function (exports) {
             }
             // normal attributes
             else {
-                // todo 这里也可以绑定ref的
-                (handlers[key] || defaultHandler)(element, key, o);
+                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);
+                }
             }
         }
     }
@@ -470,6 +504,51 @@ var __ktjs_core__ = (function (exports) {
         return new KTComputed(computeFn, reactives);
     }
 
+    /**
+     * Register a reactive effect with options.
+     * @param effectFn The effect function to run when dependencies change
+     * @param reactives The reactive dependencies
+     * @param options Effect options: lazy, onCleanup, debugName
+     * @returns stop function to remove all listeners
+     */
+    function effect(effectFn, reactives, options) {
+        const { lazy = false, onCleanup = $emptyFn, debugName = '' } = Object(options);
+        let active = true;
+        const run = () => {
+            if (!active) {
+                return;
+            }
+            // cleanup before rerun
+            onCleanup();
+            try {
+                effectFn();
+            }
+            catch (err) {
+                console.debug('[kt.js debug]','effect error:', debugName, err);
+            }
+        };
+        // subscribe to dependencies
+        for (let i = 0; i < reactives.length; i++) {
+            reactives[i].addOnChange(run);
+        }
+        // auto run unless lazy
+        if (!lazy) {
+            run();
+        }
+        // stop function
+        return () => {
+            if (!active) {
+                return;
+            }
+            active = false;
+            for (let i = 0; i < reactives.length; i++) {
+                reactives[i].removeOnChange(run);
+            }
+            // final cleanup
+            onCleanup();
+        };
+    }
+
     const toReactive = (value, onChange) => {
         if (isKT(value)) {
             if (onChange) {
@@ -484,7 +563,7 @@ var __ktjs_core__ = (function (exports) {
 
     function applyKModel(element, valueRef) {
         if (!isKT(valueRef)) {
-            console.warn('[kt.js warn] k-model value must be a KTRef.');
+            console.warn('[kt.js warn]','k-model value must be a KTRef.');
             return;
         }
         if (element instanceof HTMLInputElement) {
@@ -502,7 +581,7 @@ var __ktjs_core__ = (function (exports) {
             applyModel(element, valueRef, 'value', 'input');
         }
         else {
-            console.warn('[kt.js warn] not supported element for k-model:');
+            console.warn('[kt.js warn]','not supported element for k-model:');
         }
     }
 
@@ -520,7 +599,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.24.4 (Last Update: 2026.02.05 13:57:50.861)
+     * @version 0.26.1 (Last Update: 2026.02.05 17:35:29.547)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -901,6 +980,7 @@ var __ktjs_core__ = (function (exports) {
     exports.createElement = h;
     exports.createRedrawable = createRedrawable;
     exports.deref = deref;
+    exports.effect = effect;
     exports.h = h;
     exports.isComputed = isComputed;
     exports.isKT = isKT;

package/dist/index.legacy.js

@@ -78,6 +78,12 @@ var __ktjs_core__ = (function (exports) {
         element.addEventListener(eventName, () => (valueRef.value = element[propName]));
     };
 
+    // String manipulation utilities
+    /**
+     * Default empty function
+     */
+    const $emptyFn = (() => true);
+
     if (typeof Symbol === 'undefined') {
         window.Symbol = function Symbol(description) {
             return `@@SYMBOL_${description || ''}_${$random().toString(36).slice(2)}`;
@@ -85,7 +91,7 @@ var __ktjs_core__ = (function (exports) {
     }
 
     // Shared utilities and cached native methods for kt.js framework
-    Object.defineProperty(window, '__ktjs__', { value: '0.22.6' });
+    Object.defineProperty(window, '__ktjs__', { value: '0.22.8' });
 
     // export const KT_TYPE_REF = 1 as const;
     // export const KT_TYPE_COMPUTED = 2 as const;
@@ -138,19 +144,41 @@ var __ktjs_core__ = (function (exports) {
     var defaultHandler = function (element, key, value) {
         return element.setAttribute(key, value);
     };
+    var setElementStyle = function (element, style) {
+        if (typeof style === 'string') {
+            element.style.cssText = style;
+            return;
+        }
+        for (var key in style) {
+            element.style[key] = style[key];
+        }
+    };
     function attrIsObject(element, attr) {
         var classValue = attr.class || attr.className;
         if (classValue !== undefined) {
-            element.setAttribute('class', classValue);
+            if (isKT(classValue)) {
+                element.setAttribute('class', classValue.value);
+                classValue.addOnChange(function (v) { return element.setAttribute('class', v); });
+            }
+            else {
+                // todo 这里要让undefined 排除出reactify类型工具之外
+                element.setAttribute('class', classValue);
+            }
         }
+        // todo 这里加入reactive支持
+        // todo 类型定义也要支持reactive响应式
         var style = attr.style;
         if (style) {
             if (typeof style === 'string') {
                 element.setAttribute('style', style);
             }
             else if (typeof style === 'object') {
-                for (var key in style) {
-                    element.style[key] = style[key];
+                if (isKT(style)) {
+                    setElementStyle(element, style.value);
+                    style.addOnChange(function (v) { return setElementStyle(element, v); });
+                }
+                else {
+                    setElementStyle(element, style);
                 }
             }
         }
@@ -164,7 +192,7 @@ var __ktjs_core__ = (function (exports) {
                 element.innerHTML = html;
             }
         }
-        for (var key in attr) {
+        var _loop_1 = function (key) {
             if (key === 'k-if' ||
                 key === 'k-model' ||
                 key === 'ref' ||
@@ -173,7 +201,7 @@ var __ktjs_core__ = (function (exports) {
                 key === 'style' ||
                 key === 'children' ||
                 key === 'k-html') {
-                continue;
+                return "continue";
             }
             var o = attr[key];
             // normal event handler
@@ -182,9 +210,18 @@ var __ktjs_core__ = (function (exports) {
             }
             // normal attributes
             else {
-                // todo 这里也可以绑定ref的
-                (handlers[key] || defaultHandler)(element, key, o);
+                var handler_1 = handlers[key] || defaultHandler;
+                if (isKT(o)) {
+                    handler_1(element, key, o.value);
+                    o.addOnChange(function (v) { return handler_1(element, key, v); });
+                }
+                else {
+                    handler_1(element, key, o);
+                }
             }
+        };
+        for (var key in attr) {
+            _loop_1(key);
         }
     }
     function applyAttr(element, attr) {
@@ -470,6 +507,51 @@ var __ktjs_core__ = (function (exports) {
         return new KTComputed(computeFn, reactives);
     }
 
+    /**
+     * Register a reactive effect with options.
+     * @param effectFn The effect function to run when dependencies change
+     * @param reactives The reactive dependencies
+     * @param options Effect options: lazy, onCleanup, debugName
+     * @returns stop function to remove all listeners
+     */
+    function effect(effectFn, reactives, options) {
+        var _a = Object(options), _b = _a.lazy, lazy = _b === void 0 ? false : _b, _c = _a.onCleanup, onCleanup = _c === void 0 ? $emptyFn : _c, _d = _a.debugName, debugName = _d === void 0 ? '' : _d;
+        var active = true;
+        var run = function () {
+            if (!active) {
+                return;
+            }
+            // cleanup before rerun
+            onCleanup();
+            try {
+                effectFn();
+            }
+            catch (err) {
+                console.debug('[kt.js debug]','effect error:', debugName, err);
+            }
+        };
+        // subscribe to dependencies
+        for (var i = 0; i < reactives.length; i++) {
+            reactives[i].addOnChange(run);
+        }
+        // auto run unless lazy
+        if (!lazy) {
+            run();
+        }
+        // stop function
+        return function () {
+            if (!active) {
+                return;
+            }
+            active = false;
+            for (var i = 0; i < reactives.length; i++) {
+                reactives[i].removeOnChange(run);
+            }
+            // final cleanup
+            onCleanup();
+        };
+    }
+
     var toReactive = function (value, onChange) {
         if (isKT(value)) {
             if (onChange) {
@@ -484,7 +566,7 @@ var __ktjs_core__ = (function (exports) {
 
     function applyKModel(element, valueRef) {
         if (!isKT(valueRef)) {
-            console.warn('[kt.js warn] k-model value must be a KTRef.');
+            console.warn('[kt.js warn]','k-model value must be a KTRef.');
             return;
         }
         if (element instanceof HTMLInputElement) {
@@ -502,7 +584,7 @@ var __ktjs_core__ = (function (exports) {
             applyModel(element, valueRef, 'value', 'input');
         }
         else {
-            console.warn('[kt.js warn] not supported element for k-model:');
+            console.warn('[kt.js warn]','not supported element for k-model:');
         }
     }
 
@@ -520,7 +602,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.24.4 (Last Update: 2026.02.05 13:57:50.861)
+     * @version 0.26.1 (Last Update: 2026.02.05 17:35:29.547)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -908,6 +990,7 @@ var __ktjs_core__ = (function (exports) {
     exports.createElement = h;
     exports.createRedrawable = createRedrawable;
     exports.deref = deref;
+    exports.effect = effect;
     exports.h = h;
     exports.isComputed = isComputed;
     exports.isKT = isKT;

package/dist/index.mjs

@@ -75,6 +75,12 @@ const applyModel = (element, valueRef, propName, eventName) => {
     element.addEventListener(eventName, () => (valueRef.value = element[propName]));
 };
 
+// String manipulation utilities
+/**
+ * Default empty function
+ */
+const $emptyFn = (() => true);
+
 if (typeof Symbol === 'undefined') {
     window.Symbol = function Symbol(description) {
         return `@@SYMBOL_${description || ''}_${$random().toString(36).slice(2)}`;
@@ -82,7 +88,7 @@ if (typeof Symbol === 'undefined') {
 }
 
 // Shared utilities and cached native methods for kt.js framework
-Object.defineProperty(window, '__ktjs__', { value: '0.22.6' });
+Object.defineProperty(window, '__ktjs__', { value: '0.22.8' });
 
 // export const KT_TYPE_REF = 1 as const;
 // export const KT_TYPE_COMPUTED = 2 as const;
@@ -133,19 +139,41 @@ const handlers = {
 };
 
 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 !== undefined) {
-        element.setAttribute('class', classValue);
+        if (isKT(classValue)) {
+            element.setAttribute('class', classValue.value);
+            classValue.addOnChange((v) => element.setAttribute('class', v));
+        }
+        else {
+            // todo 这里要让undefined 排除出reactify类型工具之外
+            element.setAttribute('class', classValue);
+        }
     }
+    // todo 这里加入reactive支持
+    // todo 类型定义也要支持reactive响应式
     const style = attr.style;
     if (style) {
         if (typeof style === 'string') {
             element.setAttribute('style', style);
         }
         else if (typeof style === 'object') {
-            for (const key in style) {
-                element.style[key] = style[key];
+            if (isKT(style)) {
+                setElementStyle(element, style.value);
+                style.addOnChange((v) => setElementStyle(element, v));
+            }
+            else {
+                setElementStyle(element, style);
             }
         }
     }
@@ -177,8 +205,14 @@ function attrIsObject(element, attr) {
         }
         // normal attributes
         else {
-            // todo 这里也可以绑定ref的
-            (handlers[key] || defaultHandler)(element, key, o);
+            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);
+            }
         }
     }
 }
@@ -467,6 +501,51 @@ function computed(computeFn, reactives) {
     return new KTComputed(computeFn, reactives);
 }
 
+/**
+ * Register a reactive effect with options.
+ * @param effectFn The effect function to run when dependencies change
+ * @param reactives The reactive dependencies
+ * @param options Effect options: lazy, onCleanup, debugName
+ * @returns stop function to remove all listeners
+ */
+function effect(effectFn, reactives, options) {
+    const { lazy = false, onCleanup = $emptyFn, debugName = '' } = Object(options);
+    let active = true;
+    const run = () => {
+        if (!active) {
+            return;
+        }
+        // cleanup before rerun
+        onCleanup();
+        try {
+            effectFn();
+        }
+        catch (err) {
+            console.debug('[kt.js debug]','effect error:', debugName, err);
+        }
+    };
+    // subscribe to dependencies
+    for (let i = 0; i < reactives.length; i++) {
+        reactives[i].addOnChange(run);
+    }
+    // auto run unless lazy
+    if (!lazy) {
+        run();
+    }
+    // stop function
+    return () => {
+        if (!active) {
+            return;
+        }
+        active = false;
+        for (let i = 0; i < reactives.length; i++) {
+            reactives[i].removeOnChange(run);
+        }
+        // final cleanup
+        onCleanup();
+    };
+}
+
 const toReactive = (value, onChange) => {
     if (isKT(value)) {
         if (onChange) {
@@ -481,7 +560,7 @@ const toReactive = (value, onChange) => {
 
 function applyKModel(element, valueRef) {
     if (!isKT(valueRef)) {
-        console.warn('[kt.js warn] k-model value must be a KTRef.');
+        console.warn('[kt.js warn]','k-model value must be a KTRef.');
         return;
     }
     if (element instanceof HTMLInputElement) {
@@ -499,7 +578,7 @@ function applyKModel(element, valueRef) {
         applyModel(element, valueRef, 'value', 'input');
     }
     else {
-        console.warn('[kt.js warn] not supported element for k-model:');
+        console.warn('[kt.js warn]','not supported element for k-model:');
     }
 }
 
@@ -517,7 +596,7 @@ let creator = htmlCreator;
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.24.4 (Last Update: 2026.02.05 13:57:50.861)
+ * @version 0.26.1 (Last Update: 2026.02.05 17:35:29.547)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -888,4 +967,4 @@ function getSequence(arr) {
     return result;
 }
 
-export { $modelOrRef, Fragment, KTAsync, KTComputed, KTFor, KTRef, computed, h as createElement, createRedrawable, deref, h, isComputed, isKT, isRef, jsx, jsxDEV, jsxs, ref, surfaceRef, toReactive, toRef };
+export { $modelOrRef, Fragment, KTAsync, KTComputed, KTFor, KTRef, computed, h as createElement, createRedrawable, deref, effect, h, isComputed, isKT, isRef, jsx, jsxDEV, jsxs, ref, surfaceRef, toReactive, toRef };