@ktjs/core 0.19.1 → 0.20.0

package/dist/index.d.ts

@@ -30,6 +30,155 @@ declare class KTRef<T> {
  */
 declare function ref<T = HTMLElement>(value?: T, onChange?: RefChangeHandler<T>): KTRef<T>;
 
+type SingleContent = KTRef<any> | HTMLElement | Element | Node | string | number | boolean | null | undefined;
+type KTAvailableContent = SingleContent | KTAvailableContent[];
+type KTRawContent = KTAvailableContent | Promise<KTAvailableContent>;
+type KTRawAttr = KTAttribute | null | undefined | '' | false;
+type KTRawContents = KTAvailableContent;
+
+/**
+ * Event handler type for DOM events
+ */
+type EventHandler<T extends Event = Event> = (this: HTMLElement, ev: T) => any;
+
+/**
+ * Used to create enhanced HTML elements
+ */
+interface KTBaseAttribute {
+  [k: string]: any;
+
+  // # kt-specific attributes
+  ref?: KTRef<JSX.Element>;
+  'k-if'?: any;
+
+  // # normal HTML attributes
+  id?: string;
+  class?: string;
+  className?: string;
+  style?: string | Partial<CSSStyleDeclaration>;
+
+  type?:
+    | 'text'
+    | 'password'
+    | 'email'
+    | 'number'
+    | 'tel'
+    | 'url'
+    | 'search'
+    | 'date'
+    | 'datetime-local'
+    | 'time'
+    | 'month'
+    | 'week'
+    | 'color'
+    | 'range'
+    | 'file'
+    | 'checkbox'
+    | 'radio'
+    | 'hidden'
+    | 'submit'
+    | 'reset'
+    | 'button'
+    | 'image'
+    | otherstring;
+  for?: string;
+
+  name?: string;
+  title?: string;
+  placeholder?: string;
+  contenteditable?: boolean;
+  value?: any;
+  valueAsDate?: Date;
+  valueAsNumber?: number;
+  label?: string;
+  disabled?: boolean;
+
+  min?: string | number;
+  max?: string | number;
+  step?: string | number;
+
+  selected?: boolean;
+  checked?: boolean;
+
+  action?: string;
+  method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
+}
+
+type KTPrefixedEventHandlers = {
+  [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
+};
+
+type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
+
+type KTComponent = (
+  props: {
+    ref?: KTRef<JSX.Element>;
+    children?: KTRawContent;
+  } & KTAttribute &
+    any,
+) => JSX.Element | Promise<JSX.Element> | any;
+
+type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGElementTagNameMap[T] : T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
+/**
+ * Create an enhanced HTMLElement.
+ * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
+ * @param tag tag of an `HTMLElement`
+ * @param attr attribute object or className
+ * @param content a string or an array of HTMLEnhancedElement as child nodes
+ *
+ * ## About
+ * @package @ktjs/core
+ * @author Kasukabe Tsumugi <futami16237@gmail.com>
+ * @version 0.20.0 (Last Update: 2026.02.01 00:47:09.995)
+ * @license MIT
+ * @link https://github.com/baendlorel/kt.js
+ * @link https://baendlorel.github.io/ Welcome to my site!
+ * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
+ * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
+ */
+declare const h: <T extends HTMLTag | SVGTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
+
+type JSXTag = HTMLTag | ((props?: any) => HTMLElement) | ((props?: any) => Promise<HTMLElement>);
+/**
+ * @param tag html tag or function component
+ * @param props properties/attributes
+ */
+declare function jsx(tag: JSXTag, props?: KTAttribute): HTMLElement;
+/**
+ * Fragment support - returns an array of children
+ * Note: kt.js doesn't have a real Fragment concept,
+ */
+declare function Fragment(_props: {
+    children?: KTRawContent;
+}): HTMLElement;
+/**
+ * JSX Development runtime - same as jsx but with additional dev checks
+ */
+declare const jsxDEV: typeof jsx;
+/**
+ * JSX runtime for React 17+ automatic runtime
+ * This is called when using jsx: "react-jsx" or "react-jsxdev"
+ */
+declare const jsxs: typeof jsx;
+
+/**
+ * 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
+ */
+declare function createRedrawable<T>(creator: () => T): KTRef<T> & {
+    redraw: () => T;
+};
+
 // Base events available to all HTML elements
 interface BaseAttr {
   [k: string]: any;
@@ -1009,17 +1158,9 @@ interface SVGAttributesMap {
   view: AttributesMap['svg'] & { viewBox?: string; preserveAspectRatio?: string };
 }
 
-type KTHTMLElement<El extends HTMLElement = HTMLElement> = El & {
-  /**
-   * Automically generate a redraw function if it is not provided
-   * @param props
-   */
-  redraw: (props?: KTAttribute, ...args: any[]) => KTHTMLElement;
-};
-
 declare global {
   namespace JSX {
-    type Element = KTHTMLElement;
+    type Element = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
 
     interface IntrinsicElements {
       // Document-level & metadata
@@ -1193,7 +1334,7 @@ declare global {
     }
 
     interface IntrinsicAttributes {
-      ref?: KTRef<HTMLElement>;
+      ref?: KTRef<any>;
       'k-if'?: any;
       children?: KTRawContent;
     }
@@ -1204,184 +1345,22 @@ declare global {
   }
 }
 
-type SingleContent = KTRef<any> | HTMLElement | Element | Node | string | number | boolean | null | undefined;
-type KTAvailableContent = SingleContent | KTAvailableContent[];
-type KTRawContent = KTAvailableContent | Promise<KTAvailableContent>;
-type KTRawAttr = KTAttribute | null | undefined | '' | false;
-type KTRawContents = KTAvailableContent;
-
-/**
- * Event handler type for DOM events
- */
-type EventHandler<T extends Event = Event> = (this: HTMLElement, ev: T) => any;
-
-/**
- * Used to create enhanced HTML elements
- */
-interface KTBaseAttribute {
-  [k: string]: any;
-
-  // # kt-specific attributes
-  ref?: KTRef<KTHTMLElement>;
-  'k-if'?: any;
-
-  // # normal HTML attributes
-  id?: string;
-  class?: string;
-  className?: string;
-  style?: string | Partial<CSSStyleDeclaration>;
-
-  type?:
-    | 'text'
-    | 'password'
-    | 'email'
-    | 'number'
-    | 'tel'
-    | 'url'
-    | 'search'
-    | 'date'
-    | 'datetime-local'
-    | 'time'
-    | 'month'
-    | 'week'
-    | 'color'
-    | 'range'
-    | 'file'
-    | 'checkbox'
-    | 'radio'
-    | 'hidden'
-    | 'submit'
-    | 'reset'
-    | 'button'
-    | 'image'
-    | otherstring;
-  for?: string;
-
-  name?: string;
-  title?: string;
-  placeholder?: string;
-  contenteditable?: boolean;
-  value?: any;
-  valueAsDate?: Date;
-  valueAsNumber?: number;
-  label?: string;
-  disabled?: boolean;
-
-  min?: string | number;
-  max?: string | number;
-  step?: string | number;
-
-  selected?: boolean;
-  checked?: boolean;
-
-  action?: string;
-  method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
-}
-
-type KTPrefixedEventHandlers = {
-  [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
-};
-
-type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
-
-type KTComponent = (
-  props: {
-    ref?: KTRef<KTHTMLElement>;
-    children?: KTRawContent;
-  } & KTAttribute &
-    any,
-) => KTHTMLElement | Promise<KTHTMLElement> | any;
-
-type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGElementTagNameMap[T] : T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
-/**
- * Create an enhanced HTMLElement.
- * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
- * @param tag tag of an `HTMLElement`
- * @param attr attribute object or className
- * @param content a string or an array of HTMLEnhancedElement as child nodes
- *
- * ## About
- * @package @ktjs/core
- * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.19.1 (Last Update: 2026.01.31 23:07:55.249)
- * @license MIT
- * @link https://github.com/baendlorel/kt.js
- * @link https://baendlorel.github.io/ Welcome to my site!
- * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
- * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
- */
-declare const h: <T extends HTMLTag | SVGTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
-
-type JSXTag = HTMLTag | ((props?: any) => HTMLElement) | ((props?: any) => Promise<HTMLElement>) | ((props?: any) => KTHTMLElement) | ((props?: any) => Promise<KTHTMLElement>);
-/**
- * @param tag html tag or function component
- * @param props properties/attributes
- */
-declare function jsx(tag: JSXTag, props?: KTAttribute): KTHTMLElement;
-/**
- * Fragment support - returns an array of children
- * Note: kt.js doesn't have a real Fragment concept,
- */
-declare function Fragment(_props: {
-    children?: KTRawContent;
-}): HTMLElement;
-/**
- * JSX Development runtime - same as jsx but with additional dev checks
- */
-declare const jsxDEV: typeof jsx;
-/**
- * JSX runtime for React 17+ automatic runtime
- * This is called when using jsx: "react-jsx" or "react-jsxdev"
- */
-declare const jsxs: typeof jsx;
-
-/**
- * A helper to create redrawable elements
- * ```tsx
- * export function MyComponent() {
- *    let aa = 10;
- *    // ...
- *    // aa might be changed
- *    return createRedrawableNoref(() => <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
- */
-declare function createRedrawableNoref<T extends KTHTMLElement>(creator: () => T): T;
-/**
- * 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
- */
-declare function createRedrawable<T extends KTHTMLElement>(creator: () => T): KTRef<T>;
-
 /**
  * Extract component props type (excluding ref and children)
  */
 type ExtractComponentProps<T> = T extends (props: infer P) => any ? Omit<P, 'ref' | 'children'> : {};
 declare function KTAsync<T extends KTComponent>(props: {
-    ref?: KTRef<KTHTMLElement>;
-    skeleton?: KTHTMLElement;
+    ref?: KTRef<JSX.Element>;
+    skeleton?: JSX.Element;
     component: T;
     children?: KTRawContent;
-} & ExtractComponentProps<T>): KTHTMLElement;
+} & ExtractComponentProps<T>): JSX.Element;
 
-type KForElement = KTHTMLElement & {
+type KTForElement = JSX.Element & {
     redraw: (newProps?: KTAttribute) => void;
 };
 interface KTForProps<T> {
-    ref?: KTRef<KForElement>;
+    ref?: KTRef<KTForElement>;
     list: T[];
     key?: (item: T, index: number, array: T[]) => any;
     map: (item: T, index: number, array: T[]) => HTMLElement;
@@ -1390,7 +1369,7 @@ interface KTForProps<T> {
  * KTFor - List rendering component with key-based optimization
  * Returns a Comment anchor node with rendered elements in __kt_for_list__
  */
-declare function KTFor<T>(props: KTForProps<T>): KForElement;
+declare function KTFor<T>(props: KTForProps<T>): KTForElement;
 
-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 };
+export { Fragment, KTAsync, KTFor, KTRef, h as createElement, createRedrawable, h, jsx, jsxDEV, jsxs, ref };
+export type { EventHandler, HTMLTag, KTAttribute, KTForElement, KTForProps, KTRawAttr, KTRawContent, KTRawContents };

package/dist/index.iife.js

@@ -11,6 +11,7 @@ var __ktjs_core__ = (function (exports) {
     };
 
     // DOM manipulation utilities
+    // # dom natives
     /**
      * & Remove `bind` because it is shockingly slower than wrapper
      * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -46,10 +47,11 @@ var __ktjs_core__ = (function (exports) {
                 $appendChild.call(this, fragment);
             }
         };
+    const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
 
     // Shared utilities and cached native methods for kt.js framework
     // Re-export all utilities
-    Object.defineProperty(window, '@ktjs/shared', { value: '0.19.0' });
+    Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
 
     const booleanHandler = (element, key, value) => {
         if (key in element) {
@@ -203,7 +205,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.19.1 (Last Update: 2026.01.31 23:07:55.249)
+     * @version 0.20.0 (Last Update: 2026.02.01 00:47:09.995)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -290,18 +292,10 @@ var __ktjs_core__ = (function (exports) {
     function jsx(tag, props = {}) {
         const ref = props.ref?.isKT ? props.ref : dummyRef;
         let el;
-        const redraw = (newProps) => {
-            props = newProps ? { ...props, ...newProps } : props;
-            el = jsx(tag, props);
-            if (ref !== dummyRef) {
-                ref.value = el; // & ref setter automatically replaces old element in DOM
-            }
-            return el;
-        };
         if ('k-if' in props && !props['k-if']) {
+            // & make comment placeholder in case that ref might be redrawn later
             el = document.createComment('k-if');
-            ref.value = el; // & ref setter automatically replaces old element in DOM
-            el.redraw = redraw;
+            ref.value = el;
             return el;
         }
         // Handle function components
@@ -311,7 +305,6 @@ var __ktjs_core__ = (function (exports) {
         else {
             el = h(tag, props, props.children);
         }
-        el.redraw ??= redraw;
         ref.value = el;
         return el;
     }
@@ -355,32 +348,6 @@ var __ktjs_core__ = (function (exports) {
      * This is called when using jsx: "react-jsx" or "react-jsxdev"
      */
     const jsxs = jsx;
-    /**
-     * A helper to create redrawable elements
-     * ```tsx
-     * export function MyComponent() {
-     *    let aa = 10;
-     *    // ...
-     *    // aa might be changed
-     *    return createRedrawableNoref(() => <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
-     */
-    function createRedrawableNoref(creator) {
-        let el = creator();
-        const redraw = () => {
-            const old = el;
-            el = creator();
-            old.replaceWith(el);
-            el.redraw = redraw;
-            return el;
-        };
-        el.redraw = redraw;
-        return el;
-    }
     /**
      * A helper to create redrawable elements
      * ```tsx
@@ -397,13 +364,12 @@ var __ktjs_core__ = (function (exports) {
      */
     function createRedrawable(creator) {
         const elRef = ref();
-        elRef.value = creator();
         const redraw = () => {
             elRef.value = creator(); // ref setter automatically calls replaceWith
-            elRef.value.redraw = redraw;
+            elRef.redraw = redraw;
             return elRef.value;
         };
-        elRef.value.redraw = redraw;
+        redraw();
         return elRef;
     }
 
@@ -637,7 +603,6 @@ var __ktjs_core__ = (function (exports) {
     exports.KTRef = KTRef;
     exports.createElement = h;
     exports.createRedrawable = createRedrawable;
-    exports.createRedrawableNoref = createRedrawableNoref;
     exports.h = h;
     exports.jsx = jsx;
     exports.jsxDEV = jsxDEV;

package/dist/index.legacy.js

@@ -11,6 +11,7 @@ var __ktjs_core__ = (function (exports) {
     };
 
     // DOM manipulation utilities
+    // # dom natives
     /**
      * & Remove `bind` because it is shockingly slower than wrapper
      * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -46,10 +47,11 @@ var __ktjs_core__ = (function (exports) {
                 $appendChild.call(this, fragment);
             }
         };
+    const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
 
     // Shared utilities and cached native methods for kt.js framework
     // Re-export all utilities
-    Object.defineProperty(window, '@ktjs/shared', { value: '0.19.0' });
+    Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
 
     var booleanHandler = function (element, key, value) {
         if (key in element) {
@@ -206,7 +208,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.19.1 (Last Update: 2026.01.31 23:07:55.249)
+     * @version 0.20.0 (Last Update: 2026.02.01 00:47:09.995)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -229,39 +231,6 @@ var __ktjs_core__ = (function (exports) {
         return element;
     };
 
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-    var __assign = function() {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-        var e = new Error(message);
-        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
-
     var KTRef = /** @class */ (function () {
         function KTRef(_value, _onChanges) {
             /**
@@ -327,22 +296,14 @@ var __ktjs_core__ = (function (exports) {
      * @param props properties/attributes
      */
     function jsx(tag, props) {
-        var _a, _b;
+        var _a;
         if (props === void 0) { props = {}; }
         var ref = ((_a = props.ref) === null || _a === void 0 ? void 0 : _a.isKT) ? props.ref : dummyRef;
         var el;
-        var redraw = function (newProps) {
-            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
-            }
-            return el;
-        };
         if ('k-if' in props && !props['k-if']) {
+            // & make comment placeholder in case that ref might be redrawn later
             el = document.createComment('k-if');
-            ref.value = el; // & ref setter automatically replaces old element in DOM
-            el.redraw = redraw;
+            ref.value = el;
             return el;
         }
         // Handle function components
@@ -352,7 +313,6 @@ var __ktjs_core__ = (function (exports) {
         else {
             el = h(tag, props, props.children);
         }
-        (_b = el.redraw) !== null && _b !== void 0 ? _b : (el.redraw = redraw);
         ref.value = el;
         return el;
     }
@@ -400,32 +360,6 @@ var __ktjs_core__ = (function (exports) {
      * This is called when using jsx: "react-jsx" or "react-jsxdev"
      */
     var jsxs = jsx;
-    /**
-     * A helper to create redrawable elements
-     * ```tsx
-     * export function MyComponent() {
-     *    let aa = 10;
-     *    // ...
-     *    // aa might be changed
-     *    return createRedrawableNoref(() => <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
-     */
-    function createRedrawableNoref(creator) {
-        var el = creator();
-        var redraw = function () {
-            var old = el;
-            el = creator();
-            old.replaceWith(el);
-            el.redraw = redraw;
-            return el;
-        };
-        el.redraw = redraw;
-        return el;
-    }
     /**
      * A helper to create redrawable elements
      * ```tsx
@@ -442,13 +376,12 @@ var __ktjs_core__ = (function (exports) {
      */
     function createRedrawable(creator) {
         var elRef = ref();
-        elRef.value = creator();
         var redraw = function () {
             elRef.value = creator(); // ref setter automatically calls replaceWith
-            elRef.value.redraw = redraw;
+            elRef.redraw = redraw;
             return elRef.value;
         };
-        elRef.value.redraw = redraw;
+        redraw();
         return elRef;
     }
 
@@ -685,7 +618,6 @@ var __ktjs_core__ = (function (exports) {
     exports.KTRef = KTRef;
     exports.createElement = h;
     exports.createRedrawable = createRedrawable;
-    exports.createRedrawableNoref = createRedrawableNoref;
     exports.h = h;
     exports.jsx = jsx;
     exports.jsxDEV = jsxDEV;