@ktjs/core 0.18.8 → 0.19.0

package/dist/index.d.ts

@@ -6,25 +6,32 @@ type otherstring = string & {};
 type HTMLTag = keyof HTMLElementTagNameMap;
 type SVGTag = keyof SVGElementTagNameMap;
 
-type ChangeHandler<T> = (newValue: T, oldValue: T) => void;
-interface KTRef<T> {
+type RefChangeHandler<T> = (newValue: T, oldValue: T) => void;
+declare class KTRef<T> {
+    /**
+     * Indicates that this is a KTRef instance
+     */
+    isKT: boolean;
+    private _value;
+    private _onChanges;
+    constructor(_value: T, _onChanges: Array<RefChangeHandler<T>>);
     /**
      * If new value and old value are both nodes, the old one will be replaced in the DOM
      */
-    value: T;
-    isKT: true;
-    addOnChange: (callback: ChangeHandler<T>) => void;
-    removeOnChange: (callback: ChangeHandler<T>) => void;
+    get value(): T;
+    set value(newValue: T);
+    addOnChange(callback: RefChangeHandler<T>): void;
+    removeOnChange(callback: RefChangeHandler<T>): boolean;
 }
 /**
  * Reference to the created HTML element.
  * - can alse be used to store normal values, but it is not reactive.
  * @param value mostly an HTMLElement
  */
-declare function ref<T = HTMLElement>(value?: T, onChange?: ChangeHandler<T>): KTRef<T>;
+declare function ref<T = HTMLElement>(value?: T, onChange?: RefChangeHandler<T>): KTRef<T>;
 
 // Base events available to all HTML elements
-type BaseAttr = {
+interface BaseAttr {
   [k: string]: any;
 
   // # base attributes
@@ -43,7 +50,7 @@ type BaseAttr = {
   'on:mouseleave'?: (ev: MouseEvent) => void;
   'on:mouseover'?: (ev: MouseEvent) => void;
   'on:mouseout'?: (ev: MouseEvent) => void;
-  'on:contextmenu'?: (ev: MouseEvent) => void;
+  'on:contextmenu'?: (ev: PointerEvent) => void;
 
   // Keyboard events
   'on:keydown'?: (ev: KeyboardEvent) => void;
@@ -116,7 +123,7 @@ type BaseAttr = {
 
   // Resize event
   'on:resize'?: (ev: UIEvent) => void;
-};
+}
 
 // Form-specific events
 interface FormElementEvents {
@@ -760,7 +767,7 @@ interface AttributesMap {
 
   svg: BaseAttr & {
     class?: string;
-    style?: string;
+    style?: string | Partial<CSSStyleDeclaration>;
     width?: number | string;
     height?: number | string;
     viewBox?: string;
@@ -1215,7 +1222,7 @@ interface KTBaseAttribute {
   [k: string]: any;
 
   // # kt-specific attributes
-  ref?: KTRef<HTMLElement>;
+  ref?: KTRef<KTHTMLElement>;
   'k-if'?: any;
 
   // # normal HTML attributes
@@ -1296,7 +1303,7 @@ type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGEl
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.18.8 (Last Update: 2026.01.31 14:28:10.930)
+ * @version 0.19.0 (Last Update: 2026.01.31 22:50:55.987)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -1342,7 +1349,7 @@ declare const jsxs: typeof jsx;
  * @param creator a simple creator function that returns an element
  * @returns created element
  */
-declare function createRedrawableNoref(creator: () => KTHTMLElement): KTHTMLElement;
+declare function createRedrawableNoref<T extends KTHTMLElement>(creator: () => T): T;
 /**
  * A helper to create redrawable elements
  * ```tsx
@@ -1357,7 +1364,7 @@ declare function createRedrawableNoref(creator: () => KTHTMLElement): KTHTMLElem
  * @param creator a simple creator function that returns an element
  * @returns created element's ref
  */
-declare function createRedrawable(creator: () => KTHTMLElement): KTRef<KTHTMLElement>;
+declare function createRedrawable<T extends KTHTMLElement>(creator: () => T): KTRef<T>;
 
 /**
  * Extract component props type (excluding ref and children)
@@ -1385,5 +1392,5 @@ interface KTForProps<T> {
  */
 declare function KTFor<T>(props: KTForProps<T>): KForElement;
 
-export { Fragment, KTAsync, KTFor, h as createElement, createRedrawable, createRedrawableNoref, h, jsx, jsxDEV, jsxs, ref };
-export type { EventHandler, HTMLTag, KTAttribute, KTForProps, KTHTMLElement, KTRawAttr, KTRawContent, KTRawContents, KTRef };
+export { Fragment, KTAsync, KTFor, KTRef, h as createElement, createRedrawable, createRedrawableNoref, h, jsx, jsxDEV, jsxs, ref };
+export type { EventHandler, HTMLTag, KTAttribute, KTForProps, KTHTMLElement, KTRawAttr, KTRawContent, KTRawContents };

package/dist/index.iife.js

@@ -1,10 +1,56 @@
 var __ktjs_core__ = (function (exports) {
     'use strict';
 
+    // Cached native methods for performance optimization
+    const $isArray = Array.isArray;
+    const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
+
+    // Error handling utilities
     const $throw = (message) => {
-        throw new Error('kt.js: ' + message);
+        throw new Error('@ktjs/shared: ' + message);
     };
 
+    // DOM manipulation utilities
+    /**
+     * & Remove `bind` because it is shockingly slower than wrapper
+     * & `window.document` is safe because it is not configurable and its setter is undefined
+     */
+    const $appendChild = HTMLElement.prototype.appendChild;
+    const originAppend = HTMLElement.prototype.append;
+    const $append = // for ie 9/10/11
+     typeof originAppend === 'function'
+        ? originAppend
+        : function (...nodes) {
+            if (nodes.length < 50) {
+                for (let i = 0; i < nodes.length; i++) {
+                    const node = nodes[i];
+                    if (typeof node === 'string') {
+                        $appendChild.call(this, document.createTextNode(node));
+                    }
+                    else {
+                        $appendChild.call(this, node);
+                    }
+                }
+            }
+            else {
+                const fragment = document.createDocumentFragment();
+                for (let i = 0; i < nodes.length; i++) {
+                    const node = nodes[i];
+                    if (typeof node === 'string') {
+                        $appendChild.call(fragment, document.createTextNode(node));
+                    }
+                    else {
+                        $appendChild.call(fragment, node);
+                    }
+                }
+                $appendChild.call(this, fragment);
+            }
+        };
+
+    // Shared utilities and cached native methods for kt.js framework
+    // Re-export all utilities
+    Object.defineProperty(window, '@ktjs/shared', { value: '0.19.0' });
+
     const booleanHandler = (element, key, value) => {
         if (key in element) {
             element[key] = !!value;
@@ -75,7 +121,7 @@ var __ktjs_core__ = (function (exports) {
             const o = attr[key];
             // normal event handler
             if (key.startsWith('on:')) {
-                element.addEventListener(key.slice(3), o); // chop off the `@`
+                element.addEventListener(key.slice(3), o); // chop off the `on:`
             }
             // normal attributes
             else {
@@ -95,51 +141,6 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
-    /**
-     * & Remove `bind` because it is shockingly slower than wrapper
-     * & `window.document` is safe because it is not configurable and its setter is undefined
-     */
-    const $appendChild = HTMLElement.prototype.appendChild;
-    const originAppend = HTMLElement.prototype.append;
-    const $append = // for ie 9/10/11
-     typeof originAppend === 'function'
-        ? function (...args) {
-            return originAppend.apply(this, args);
-        }
-        : function (...nodes) {
-            if (nodes.length < 50) {
-                for (let i = 0; i < nodes.length; i++) {
-                    const node = nodes[i];
-                    if (typeof node === 'string') {
-                        $appendChild.call(this, document.createTextNode(node));
-                    }
-                    else {
-                        $appendChild.call(this, node);
-                    }
-                }
-            }
-            else {
-                const fragment = document.createDocumentFragment();
-                for (let i = 0; i < nodes.length; i++) {
-                    const node = nodes[i];
-                    if (typeof node === 'string') {
-                        $appendChild.call(fragment, document.createTextNode(node));
-                    }
-                    else {
-                        $appendChild.call(fragment, node);
-                    }
-                }
-                $appendChild.call(this, fragment);
-            }
-        };
-
-    const $isArray = Array.isArray;
-    const emptyPromiseHandler = () => ({});
-    if (typeof Promise === 'undefined') {
-        window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
-    }
-    const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
-
     function apdSingle(element, c) {
         // & JSX should ignore false, undefined, and null
         if (c === false || c === undefined || c === null) {
@@ -202,7 +203,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.18.8 (Last Update: 2026.01.31 14:28:10.930)
+     * @version 0.19.0 (Last Update: 2026.01.31 22:50:55.987)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -225,47 +226,60 @@ var __ktjs_core__ = (function (exports) {
         return element;
     };
 
+    class KTRef {
+        /**
+         * Indicates that this is a KTRef instance
+         */
+        isKT = true;
+        _value;
+        _onChanges;
+        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 (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);
+            }
+            const oldValue = this._value;
+            this._value = newValue;
+            for (let i = 0; i < this._onChanges.length; i++) {
+                this._onChanges[i](newValue, oldValue);
+            }
+        }
+        addOnChange(callback) {
+            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;
+        }
+    }
     /**
      * Reference to the created HTML element.
      * - can alse be used to store normal values, but it is not reactive.
      * @param value mostly an HTMLElement
      */
     function ref(value, onChange) {
-        let _value = value;
-        let _onChanges = onChange ? [onChange] : [];
-        return {
-            isKT: true,
-            get value() {
-                return _value;
-            },
-            set value(newValue) {
-                if (newValue === _value) {
-                    return;
-                }
-                // replace the old node with the new one in the DOM if both are nodes
-                if (_value instanceof Node && newValue instanceof Node) {
-                    if (newValue.contains(_value)) {
-                        _value.remove();
-                    }
-                    _value.replaceWith(newValue);
-                }
-                const oldValue = _value;
-                _value = newValue;
-                for (let i = 0; i < _onChanges.length; i++) {
-                    _onChanges[i](newValue, oldValue);
-                }
-            },
-            addOnChange: (callback) => _onChanges.push(callback),
-            removeOnChange: (callback) => {
-                for (let i = _onChanges.length - 1; i >= 0; i--) {
-                    if (_onChanges[i] === callback) {
-                        _onChanges.splice(i, 1);
-                        return true;
-                    }
-                }
-                return false;
-            },
-        };
+        return new KTRef(value, onChange ? [onChange] : []);
     }
 
     const dummyRef = { value: null };
@@ -280,13 +294,13 @@ var __ktjs_core__ = (function (exports) {
             props = newProps ? { ...props, ...newProps } : props;
             el = jsx(tag, props);
             if (ref !== dummyRef) {
-                ref.value = el; // ref setter automatically replaces old element in DOM
+                ref.value = el; // & ref setter automatically replaces old element in DOM
             }
             return el;
         };
         if ('k-if' in props && !props['k-if']) {
             el = document.createComment('k-if');
-            ref.value = el;
+            ref.value = el; // & ref setter automatically replaces old element in DOM
             el.redraw = redraw;
             return el;
         }
@@ -432,10 +446,10 @@ var __ktjs_core__ = (function (exports) {
         // Attach elements array to anchor
         anchor.__kt_for_list__ = elements;
         // Redraw function for updates
-        anchor.redraw = (newProps = props) => {
-            const newList = (newProps.list ?? currentList);
-            const newKey = (newProps.key ?? currentKey);
-            const newMap = (newProps.map ?? currentMap);
+        anchor.redraw = (newProps) => {
+            const newList = (newProps?.list ?? currentList);
+            const newKey = (newProps?.key ?? currentKey);
+            const newMap = (newProps?.map ?? currentMap);
             // Update stored values
             currentList = newList;
             currentKey = newKey;
@@ -620,6 +634,7 @@ var __ktjs_core__ = (function (exports) {
     exports.Fragment = Fragment;
     exports.KTAsync = KTAsync;
     exports.KTFor = KTFor;
+    exports.KTRef = KTRef;
     exports.createElement = h;
     exports.createRedrawable = createRedrawable;
     exports.createRedrawableNoref = createRedrawableNoref;

package/dist/index.legacy.js

@@ -1,10 +1,56 @@
 var __ktjs_core__ = (function (exports) {
     'use strict';
 
-    var $throw = function (message) {
-        throw new Error('kt.js: ' + message);
+    // Cached native methods for performance optimization
+    const $isArray = Array.isArray;
+    const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
+
+    // Error handling utilities
+    const $throw = (message) => {
+        throw new Error('@ktjs/shared: ' + message);
     };
 
+    // DOM manipulation utilities
+    /**
+     * & Remove `bind` because it is shockingly slower than wrapper
+     * & `window.document` is safe because it is not configurable and its setter is undefined
+     */
+    const $appendChild = HTMLElement.prototype.appendChild;
+    const originAppend = HTMLElement.prototype.append;
+    const $append = // for ie 9/10/11
+     typeof originAppend === 'function'
+        ? originAppend
+        : function (...nodes) {
+            if (nodes.length < 50) {
+                for (let i = 0; i < nodes.length; i++) {
+                    const node = nodes[i];
+                    if (typeof node === 'string') {
+                        $appendChild.call(this, document.createTextNode(node));
+                    }
+                    else {
+                        $appendChild.call(this, node);
+                    }
+                }
+            }
+            else {
+                const fragment = document.createDocumentFragment();
+                for (let i = 0; i < nodes.length; i++) {
+                    const node = nodes[i];
+                    if (typeof node === 'string') {
+                        $appendChild.call(fragment, document.createTextNode(node));
+                    }
+                    else {
+                        $appendChild.call(fragment, node);
+                    }
+                }
+                $appendChild.call(this, fragment);
+            }
+        };
+
+    // Shared utilities and cached native methods for kt.js framework
+    // Re-export all utilities
+    Object.defineProperty(window, '@ktjs/shared', { value: '0.19.0' });
+
     var booleanHandler = function (element, key, value) {
         if (key in element) {
             element[key] = !!value;
@@ -75,7 +121,7 @@ var __ktjs_core__ = (function (exports) {
             var o = attr[key];
             // normal event handler
             if (key.startsWith('on:')) {
-                element.addEventListener(key.slice(3), o); // chop off the `@`
+                element.addEventListener(key.slice(3), o); // chop off the `on:`
             }
             // normal attributes
             else {
@@ -95,61 +141,6 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
-    /**
-     * & Remove `bind` because it is shockingly slower than wrapper
-     * & `window.document` is safe because it is not configurable and its setter is undefined
-     */
-    var $appendChild = HTMLElement.prototype.appendChild;
-    var originAppend = HTMLElement.prototype.append;
-    var $append = // for ie 9/10/11
-     typeof originAppend === 'function'
-        ? function () {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
-            return originAppend.apply(this, args);
-        }
-        : function () {
-            var nodes = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                nodes[_i] = arguments[_i];
-            }
-            if (nodes.length < 50) {
-                for (var i = 0; i < nodes.length; i++) {
-                    var node = nodes[i];
-                    if (typeof node === 'string') {
-                        $appendChild.call(this, document.createTextNode(node));
-                    }
-                    else {
-                        $appendChild.call(this, node);
-                    }
-                }
-            }
-            else {
-                var fragment = document.createDocumentFragment();
-                for (var i = 0; i < nodes.length; i++) {
-                    var node = nodes[i];
-                    if (typeof node === 'string') {
-                        $appendChild.call(fragment, document.createTextNode(node));
-                    }
-                    else {
-                        $appendChild.call(fragment, node);
-                    }
-                }
-                $appendChild.call(this, fragment);
-            }
-        };
-
-    var $isArray = Array.isArray;
-    var emptyPromiseHandler = function () { return ({}); };
-    if (typeof Promise === 'undefined') {
-        window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
-    }
-    var $isThenable = function (o) {
-        return typeof o === 'object' && o !== null && typeof o.then === 'function';
-    };
-
     function apdSingle(element, c) {
         // & JSX should ignore false, undefined, and null
         if (c === false || c === undefined || c === null) {
@@ -215,7 +206,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.18.8 (Last Update: 2026.01.31 14:28:10.930)
+     * @version 0.19.0 (Last Update: 2026.01.31 22:50:55.987)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -271,47 +262,63 @@ var __ktjs_core__ = (function (exports) {
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
-    /**
-     * Reference to the created HTML element.
-     * - can alse be used to store normal values, but it is not reactive.
-     * @param value mostly an HTMLElement
-     */
-    function ref(value, onChange) {
-        var _value = value;
-        var _onChanges = onChange ? [onChange] : [];
-        return {
-            isKT: true,
-            get value() {
-                return _value;
+    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 value(newValue) {
-                if (newValue === _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 (_value instanceof Node && newValue instanceof Node) {
-                    if (newValue.contains(_value)) {
-                        _value.remove();
+                if (this._value instanceof Node && newValue instanceof Node) {
+                    if (newValue.contains(this._value)) {
+                        this._value.remove();
                     }
-                    _value.replaceWith(newValue);
+                    this._value.replaceWith(newValue);
                 }
-                var oldValue = _value;
-                _value = newValue;
-                for (var i = 0; i < _onChanges.length; i++) {
-                    _onChanges[i](newValue, oldValue);
+                var oldValue = this._value;
+                this._value = newValue;
+                for (var i = 0; i < this._onChanges.length; i++) {
+                    this._onChanges[i](newValue, oldValue);
                 }
             },
-            addOnChange: function (callback) { return _onChanges.push(callback); },
-            removeOnChange: function (callback) {
-                for (var i = _onChanges.length - 1; i >= 0; i--) {
-                    if (_onChanges[i] === callback) {
-                        _onChanges.splice(i, 1);
-                        return true;
-                    }
+            enumerable: false,
+            configurable: true
+        });
+        KTRef.prototype.addOnChange = function (callback) {
+            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 false;
         };
+        return KTRef;
+    }());
+    /**
+     * Reference to the created HTML element.
+     * - can alse be used to store normal values, but it is not reactive.
+     * @param value mostly an HTMLElement
+     */
+    function ref(value, onChange) {
+        return new KTRef(value, onChange ? [onChange] : []);
     }
 
     var dummyRef = { value: null };
@@ -328,13 +335,13 @@ var __ktjs_core__ = (function (exports) {
             props = newProps ? __assign(__assign({}, props), newProps) : props;
             el = jsx(tag, props);
             if (ref !== dummyRef) {
-                ref.value = el; // ref setter automatically replaces old element in DOM
+                ref.value = el; // & ref setter automatically replaces old element in DOM
             }
             return el;
         };
         if ('k-if' in props && !props['k-if']) {
             el = document.createComment('k-if');
-            ref.value = el;
+            ref.value = el; // & ref setter automatically replaces old element in DOM
             el.redraw = redraw;
             return el;
         }
@@ -488,10 +495,9 @@ var __ktjs_core__ = (function (exports) {
         // Redraw function for updates
         anchor.redraw = function (newProps) {
             var _a, _b, _c;
-            if (newProps === void 0) { newProps = props; }
-            var newList = ((_a = newProps.list) !== null && _a !== void 0 ? _a : currentList);
-            var newKey = ((_b = newProps.key) !== null && _b !== void 0 ? _b : currentKey);
-            var newMap = ((_c = newProps.map) !== null && _c !== void 0 ? _c : currentMap);
+            var newList = ((_a = newProps === null || newProps === void 0 ? void 0 : newProps.list) !== null && _a !== void 0 ? _a : currentList);
+            var newKey = ((_b = newProps === null || newProps === void 0 ? void 0 : newProps.key) !== null && _b !== void 0 ? _b : currentKey);
+            var newMap = ((_c = newProps === null || newProps === void 0 ? void 0 : newProps.map) !== null && _c !== void 0 ? _c : currentMap);
             // Update stored values
             currentList = newList;
             currentKey = newKey;
@@ -676,6 +682,7 @@ var __ktjs_core__ = (function (exports) {
     exports.Fragment = Fragment;
     exports.KTAsync = KTAsync;
     exports.KTFor = KTFor;
+    exports.KTRef = KTRef;
     exports.createElement = h;
     exports.createRedrawable = createRedrawable;
     exports.createRedrawableNoref = createRedrawableNoref;