@ktjs/core 0.19.0 → 0.20.0

package/dist/index.mjs

@@ -8,6 +8,7 @@ const $throw = (message) => {
 };
 
 // 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
@@ -43,10 +44,11 @@ const $append = // for ie 9/10/11
             $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) {
@@ -200,7 +202,7 @@ const svgTempWrapper = document.createElement('div');
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.19.0 (Last Update: 2026.01.31 22:50:55.987)
+ * @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!
@@ -287,18 +289,10 @@ const dummyRef = { value: null };
 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
@@ -308,7 +302,6 @@ function jsx(tag, props = {}) {
     else {
         el = h(tag, props, props.children);
     }
-    el.redraw ??= redraw;
     ref.value = el;
     return el;
 }
@@ -352,32 +345,6 @@ const jsxDEV = (...args) => {
  * 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
@@ -394,13 +361,12 @@ function createRedrawableNoref(creator) {
  */
 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;
 }
 
@@ -628,4 +594,4 @@ function getSequence(arr) {
     return result;
 }
 
-export { Fragment, KTAsync, KTFor, KTRef, h as createElement, createRedrawable, createRedrawableNoref, h, jsx, jsxDEV, jsxs, ref };
+export { Fragment, KTAsync, KTFor, KTRef, h as createElement, createRedrawable, h, jsx, jsxDEV, jsxs, ref };

package/dist/jsx/index.d.ts

@@ -30,6 +30,141 @@ 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;
+
+/**
+ * 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 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 +1144,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 +1320,7 @@ declare global {
     }
 
     interface IntrinsicAttributes {
-      ref?: KTRef<HTMLElement>;
+      ref?: KTRef<any>;
       'k-if'?: any;
       children?: KTRawContent;
     }
@@ -1204,153 +1331,4 @@ 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;
-
-/**
- * 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 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.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!
- * @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>;
-
-export { Fragment, KTRef, h as createElement, createRedrawable, createRedrawableNoref, jsx, jsxDEV, jsxs, ref };
-export type { KTHTMLElement };
+export { Fragment, KTRef, h as createElement, createRedrawable, jsx, jsxDEV, jsxs, ref };

package/dist/jsx/index.mjs

@@ -8,6 +8,7 @@ const $throw = (message) => {
 };
 
 // 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
@@ -43,10 +44,11 @@ const $append = // for ie 9/10/11
             $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) {
@@ -200,7 +202,7 @@ const svgTempWrapper = document.createElement('div');
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.19.0 (Last Update: 2026.01.31 22:50:55.987)
+ * @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!
@@ -287,18 +289,10 @@ const dummyRef = { value: null };
 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
@@ -308,7 +302,6 @@ function jsx(tag, props = {}) {
     else {
         el = h(tag, props, props.children);
     }
-    el.redraw ??= redraw;
     ref.value = el;
     return el;
 }
@@ -352,32 +345,6 @@ const jsxDEV = (...args) => {
  * 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
@@ -394,14 +361,13 @@ function createRedrawableNoref(creator) {
  */
 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;
 }
 
-export { Fragment, KTRef, h as createElement, createRedrawable, createRedrawableNoref, jsx, jsxDEV, jsxs, ref };
+export { Fragment, KTRef, h as createElement, createRedrawable, jsx, jsxDEV, jsxs, ref };