@ktjs/core 0.19.1 → 0.20.1

package/README.md

@@ -21,17 +21,16 @@ KT.js is now a **monorepo** containing multiple packages:
 - **[kt.js](./packages/kt.js)**: Main entry package that re-exports all functionality
 - **[@ktjs/core](./packages/core)**: Core DOM manipulation utilities and the `h` function. SX/TSX support with full TypeScript integration (included in kt.js package)
 - **[@ktjs/router](./packages/router)**: Client-side routing with navigation guards (not included in kt.js package)
-- **[@ktjs/shortcuts](./packages/shortcuts)**: Convenient shortcut functions for common operations
 
 You can install the full package or individual packages as needed:
 
 ```bash
-# Install the main package (includes core + jsx + shortcuts)
 pnpm add kt.js
 
 # Or install individual packages
 pnpm add @ktjs/core       # Core DOM utilities (independent)
-pnpm add @ktjs/router     # Client-side router (independent)
+pnpm add @ktjs/router     # Client-side router (requires @ktjs/core)
+pnpm add @ktjs/mui        # Material UI components (requires @ktjs/core)
 pnpm add @ktjs/shortcuts  # Shortcuts (requires @ktjs/core)
 ```
 

package/dist/index.d.ts

@@ -5,6 +5,7 @@ type otherstring = string & {};
  */
 type HTMLTag = keyof HTMLElementTagNameMap;
 type SVGTag = keyof SVGElementTagNameMap;
+type MathMLTag = keyof MathMLElementTagNameMap;
 
 type RefChangeHandler<T> = (newValue: T, oldValue: T) => void;
 declare class KTRef<T> {
@@ -28,7 +29,156 @@ declare class KTRef<T> {
  * - 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?: RefChangeHandler<T>): KTRef<T>;
+declare function ref<T = JSX.Element>(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 | MathMLTag) & otherstring> = T extends SVGTag ? SVGElementTagNameMap[T] : T extends HTMLTag ? HTMLElementTagNameMap[T] : T extends MathMLTag ? MathMLElementTagNameMap[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.1 (Last Update: 2026.02.01 16:38:49.148)
+ * @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 | MathMLTag>(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): JSX.Element;
+/**
+ * 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 {
@@ -1009,19 +1159,13 @@ 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 {
+      [k: string]: AttributesMap['div']; // Allow any element with div attributes as fallback
+
       // Document-level & metadata
       html: AttributesMap['html'];
       head: AttributesMap['head'];
@@ -1190,10 +1334,71 @@ declare global {
       tspan: SVGAttributesMap['tspan'];
       use: SVGAttributesMap['use'];
       view: SVGAttributesMap['view'];
+
+      // 'svg:svg': AttributesMap['svg'];
+      // 'svg:a': SVGAttributesMap['a'];
+      // 'svg:animate': SVGAttributesMap['animate'];
+      // 'svg:animateMotion': SVGAttributesMap['animateMotion'];
+      // 'svg:animateTransform': SVGAttributesMap['animateTransform'];
+      // 'svg:circle': SVGAttributesMap['circle'];
+      // 'svg:clipPath': SVGAttributesMap['clipPath'];
+      // 'svg:defs': SVGAttributesMap['defs'];
+      // 'svg:desc': SVGAttributesMap['desc'];
+      // 'svg:ellipse': SVGAttributesMap['ellipse'];
+      // 'svg:feBlend': SVGAttributesMap['feBlend'];
+      // 'svg:feColorMatrix': SVGAttributesMap['feColorMatrix'];
+      // 'svg:feComponentTransfer': SVGAttributesMap['feComponentTransfer'];
+      // 'svg:feComposite': SVGAttributesMap['feComposite'];
+      // 'svg:feConvolveMatrix': SVGAttributesMap['feConvolveMatrix'];
+      // 'svg:feDiffuseLighting': SVGAttributesMap['feDiffuseLighting'];
+      // 'svg:feDisplacementMap': SVGAttributesMap['feDisplacementMap'];
+      // 'svg:feDistantLight': SVGAttributesMap['feDistantLight'];
+      // 'svg:feDropShadow': SVGAttributesMap['feDropShadow'];
+      // 'svg:feFlood': SVGAttributesMap['feFlood'];
+      // 'svg:feFuncA': SVGAttributesMap['feFuncA'];
+      // 'svg:feFuncB': SVGAttributesMap['feFuncB'];
+      // 'svg:feFuncG': SVGAttributesMap['feFuncG'];
+      // 'svg:feFuncR': SVGAttributesMap['feFuncR'];
+      // 'svg:feGaussianBlur': SVGAttributesMap['feGaussianBlur'];
+      // 'svg:feImage': SVGAttributesMap['feImage'];
+      // 'svg:feMerge': SVGAttributesMap['feMerge'];
+      // 'svg:feMergeNode': SVGAttributesMap['feMergeNode'];
+      // 'svg:feMorphology': SVGAttributesMap['feMorphology'];
+      // 'svg:feOffset': SVGAttributesMap['feOffset'];
+      // 'svg:fePointLight': SVGAttributesMap['fePointLight'];
+      // 'svg:feSpecularLighting': SVGAttributesMap['feSpecularLighting'];
+      // 'svg:feSpotLight': SVGAttributesMap['feSpotLight'];
+      // 'svg:feTile': SVGAttributesMap['feTile'];
+      // 'svg:feTurbulence': SVGAttributesMap['feTurbulence'];
+      // 'svg:filter': SVGAttributesMap['filter'];
+      // 'svg:foreignObject': SVGAttributesMap['foreignObject'];
+      // 'svg:g': SVGAttributesMap['g'];
+      // 'svg:image': SVGAttributesMap['image'];
+      // 'svg:line': SVGAttributesMap['line'];
+      // 'svg:linearGradient': SVGAttributesMap['linearGradient'];
+      // 'svg:marker': SVGAttributesMap['marker'];
+      // 'svg:mask': SVGAttributesMap['mask'];
+      // 'svg:metadata': SVGAttributesMap['metadata'];
+      // 'svg:mpath': SVGAttributesMap['mpath'];
+      // 'svg:path': SVGAttributesMap['path'];
+      // 'svg:pattern': SVGAttributesMap['pattern'];
+      // 'svg:polygon': SVGAttributesMap['polygon'];
+      // 'svg:polyline': SVGAttributesMap['polyline'];
+      // 'svg:radialGradient': SVGAttributesMap['radialGradient'];
+      // 'svg:rect': SVGAttributesMap['rect'];
+      // 'svg:set': SVGAttributesMap['set'];
+      // 'svg:stop': SVGAttributesMap['stop'];
+      // 'svg:switch': SVGAttributesMap['switch'];
+      // 'svg:symbol': SVGAttributesMap['symbol'];
+      // 'svg:text': SVGAttributesMap['text'];
+      // 'svg:textPath': SVGAttributesMap['textPath'];
+      // 'svg:tspan': SVGAttributesMap['tspan'];
+      // 'svg:use': SVGAttributesMap['use'];
+      // 'svg:view': SVGAttributesMap['view'];
     }
 
     interface IntrinsicAttributes {
-      ref?: KTRef<HTMLElement>;
+      ref?: KTRef<any>;
       'k-if'?: any;
       children?: KTRawContent;
     }
@@ -1204,184 +1409,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 +1433,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) {
@@ -192,7 +194,14 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
-    const svgTempWrapper = document.createElement('div');
+    document.createElement('div');
+    const htmlCreator = (tag) => document.createElement(tag);
+    const svgCreator = (tag) => document.createElementNS('http://www.w3.org/2000/svg', tag);
+    const mathMLCreator = (tag) => document.createElementNS('http://www.w3.org/1998/Math/MathML', tag);
+    let creator = htmlCreator;
+    // # consts
+    const SVG_ATTR_FLAG = '__kt_svg__';
+    const MATHML_ATTR_FLAG = '__kt_mathml__';
     /**
      * Create an enhanced HTMLElement.
      * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -203,7 +212,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.1 (Last Update: 2026.02.01 16:38:49.148)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -214,15 +223,32 @@ var __ktjs_core__ = (function (exports) {
         if (typeof tag !== 'string') {
             $throw('tagName must be a string.');
         }
+        if (attr) {
+            if (SVG_ATTR_FLAG in attr) {
+                delete attr[SVG_ATTR_FLAG];
+                creator = svgCreator;
+            }
+            else if (MATHML_ATTR_FLAG in attr) {
+                delete attr[MATHML_ATTR_FLAG];
+                creator = mathMLCreator;
+            }
+            else {
+                creator = htmlCreator;
+            }
+        }
         // * start creating the element
-        const element = document.createElement(tag);
+        const element = creator(tag);
         // * Handle content
         applyAttr(element, attr);
         applyContent(element, content);
-        if (tag === 'svg') {
-            svgTempWrapper.innerHTML = element.outerHTML;
-            return svgTempWrapper.firstChild;
-        }
+        // if (tag === 'svg') {
+        //   tempWrapper.innerHTML = element.outerHTML;
+        //   return tempWrapper.firstChild as HTML<T>;
+        // }
+        // if (tag === 'math') {
+        //   tempWrapper.innerHTML = element.outerHTML;
+        //   return tempWrapper.firstChild as HTML<T>;
+        // }
         return element;
     };
 
@@ -287,21 +313,13 @@ var __ktjs_core__ = (function (exports) {
      * @param tag html tag or function component
      * @param props properties/attributes
      */
-    function jsx(tag, props = {}) {
+    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 +329,6 @@ var __ktjs_core__ = (function (exports) {
         else {
             el = h(tag, props, props.children);
         }
-        el.redraw ??= redraw;
         ref.value = el;
         return el;
     }
@@ -355,32 +372,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 +388,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 +627,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;