@ktjs/core 0.14.1 → 0.14.3

package/dist/index.d.ts

@@ -21,7 +21,7 @@ type KTHTMLElement = HTMLElement & {
    * Automically generate a redraw function if it is not provided
    * @param props
    */
-  redraw: (props?: KTAttribute, children?: KTRawContent) => void;
+  redraw: (props?: KTAttribute, children?: KTRawContent) => KTHTMLElement;
 };
 
 declare global {
@@ -161,7 +161,7 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
+ * @version 0.14.3 (Last Update: 2026.01.16 22:28:22.311)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -193,6 +193,22 @@ declare const jsxDEV: typeof jsx;
  */
 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
+ * @returns created element
+ */
+declare function createRedrawable(creator: () => KTHTMLElement): KTHTMLElement;
+
 /**
  * Extract component props type (excluding ref and children)
  */
@@ -204,5 +220,5 @@ declare function KTAsync<T extends KTComponent>(props: {
     children?: KTRawContent;
 } & ExtractComponentProps<T>): KTHTMLElement;
 
-export { Fragment, KTAsync, h as createElement, h, jsx, jsxDEV, jsxs, ref };
+export { Fragment, KTAsync, h as createElement, createRedrawable, h, jsx, jsxDEV, jsxs, ref };
 export type { EventHandler, HTMLTag, KTAttribute, KTHTMLElement, KTRawAttr, KTRawContent, KTRawContents, KTRef };

package/dist/index.iife.js

@@ -223,7 +223,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
+     * @version 0.14.3 (Last Update: 2026.01.16 22:28:22.311)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -268,6 +268,7 @@ var __ktjs_core__ = (function (exports) {
                         ref.value = el;
                     }
                     old.replaceWith(el);
+                    return el;
                 };
             }
             if (ref) {
@@ -294,6 +295,7 @@ var __ktjs_core__ = (function (exports) {
                     ref.value = el;
                 }
                 old.replaceWith(el);
+                return el;
             };
             return el;
         }
@@ -338,6 +340,32 @@ 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 createRedrawable(() => <div>{aa}</div>);
+     * }
+     * ```
+     * Then the returned element has a `redraw` method to redraw itself with new values.
+     * @param creator
+     * @returns created element
+     */
+    function createRedrawable(creator) {
+        let element = creator();
+        const redraw = () => {
+            const old = element;
+            element = creator();
+            old.replaceWith(element);
+            element.redraw = redraw;
+            return element;
+        };
+        element.redraw = redraw;
+        return element;
+    }
 
     /**
      * Reference to the created HTML element.
@@ -363,6 +391,7 @@ var __ktjs_core__ = (function (exports) {
     exports.Fragment = Fragment;
     exports.KTAsync = KTAsync;
     exports.createElement = h;
+    exports.createRedrawable = createRedrawable;
     exports.h = h;
     exports.jsx = jsx;
     exports.jsxDEV = jsxDEV;

package/dist/index.legacy.js

@@ -248,7 +248,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
+     * @version 0.14.3 (Last Update: 2026.01.16 22:28:22.311)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -330,6 +330,7 @@ var __ktjs_core__ = (function (exports) {
                         ref.value = el_1;
                     }
                     old.replaceWith(el_1);
+                    return el_1;
                 };
             }
             if (ref) {
@@ -356,6 +357,7 @@ var __ktjs_core__ = (function (exports) {
                     ref.value = el_2;
                 }
                 old.replaceWith(el_2);
+                return el_2;
             };
             return el_2;
         }
@@ -404,6 +406,32 @@ 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 createRedrawable(() => <div>{aa}</div>);
+     * }
+     * ```
+     * Then the returned element has a `redraw` method to redraw itself with new values.
+     * @param creator
+     * @returns created element
+     */
+    function createRedrawable(creator) {
+        var element = creator();
+        var redraw = function () {
+            var old = element;
+            element = creator();
+            old.replaceWith(element);
+            element.redraw = redraw;
+            return element;
+        };
+        element.redraw = redraw;
+        return element;
+    }
 
     /**
      * Reference to the created HTML element.
@@ -430,6 +458,7 @@ var __ktjs_core__ = (function (exports) {
     exports.Fragment = Fragment;
     exports.KTAsync = KTAsync;
     exports.createElement = h;
+    exports.createRedrawable = createRedrawable;
     exports.h = h;
     exports.jsx = jsx;
     exports.jsxDEV = jsxDEV;

package/dist/index.mjs

@@ -220,7 +220,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
+ * @version 0.14.3 (Last Update: 2026.01.16 22:28:22.311)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -265,6 +265,7 @@ function jsx(tag, props = {}) {
                     ref.value = el;
                 }
                 old.replaceWith(el);
+                return el;
             };
         }
         if (ref) {
@@ -291,6 +292,7 @@ function jsx(tag, props = {}) {
                 ref.value = el;
             }
             old.replaceWith(el);
+            return el;
         };
         return el;
     }
@@ -335,6 +337,32 @@ 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 createRedrawable(() => <div>{aa}</div>);
+ * }
+ * ```
+ * Then the returned element has a `redraw` method to redraw itself with new values.
+ * @param creator
+ * @returns created element
+ */
+function createRedrawable(creator) {
+    let element = creator();
+    const redraw = () => {
+        const old = element;
+        element = creator();
+        old.replaceWith(element);
+        element.redraw = redraw;
+        return element;
+    };
+    element.redraw = redraw;
+    return element;
+}
 
 /**
  * Reference to the created HTML element.
@@ -357,4 +385,4 @@ function KTAsync(props) {
     return comp;
 }
 
-export { Fragment, KTAsync, h as createElement, h, jsx, jsxDEV, jsxs, ref };
+export { Fragment, KTAsync, h as createElement, createRedrawable, h, jsx, jsxDEV, jsxs, ref };

package/dist/jsx/index.d.ts

@@ -21,7 +21,7 @@ type KTHTMLElement = HTMLElement & {
    * Automically generate a redraw function if it is not provided
    * @param props
    */
-  redraw: (props?: KTAttribute, children?: KTRawContent) => void;
+  redraw: (props?: KTAttribute, children?: KTRawContent) => KTHTMLElement;
 };
 
 declare global {
@@ -147,7 +147,7 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
+ * @version 0.14.3 (Last Update: 2026.01.16 22:28:22.311)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -179,5 +179,21 @@ declare const jsxDEV: typeof jsx;
  */
 declare const jsxs: typeof jsx;
 
-export { Fragment, h as createElement, jsx, jsxDEV, jsxs, ref };
+/**
+ * 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
+ * @returns created element
+ */
+declare function createRedrawable(creator: () => KTHTMLElement): KTHTMLElement;
+
+export { Fragment, h as createElement, createRedrawable, jsx, jsxDEV, jsxs, ref };
 export type { KTHTMLElement, KTRef };

package/dist/jsx/index.mjs

@@ -220,7 +220,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
+ * @version 0.14.3 (Last Update: 2026.01.16 22:28:22.311)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -265,6 +265,7 @@ function jsx(tag, props = {}) {
                     ref.value = el;
                 }
                 old.replaceWith(el);
+                return el;
             };
         }
         if (ref) {
@@ -291,6 +292,7 @@ function jsx(tag, props = {}) {
                 ref.value = el;
             }
             old.replaceWith(el);
+            return el;
         };
         return el;
     }
@@ -335,6 +337,32 @@ 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 createRedrawable(() => <div>{aa}</div>);
+ * }
+ * ```
+ * Then the returned element has a `redraw` method to redraw itself with new values.
+ * @param creator
+ * @returns created element
+ */
+function createRedrawable(creator) {
+    let element = creator();
+    const redraw = () => {
+        const old = element;
+        element = creator();
+        old.replaceWith(element);
+        element.redraw = redraw;
+        return element;
+    };
+    element.redraw = redraw;
+    return element;
+}
 
 /**
  * Reference to the created HTML element.
@@ -345,4 +373,4 @@ function ref(value) {
     return { value: value, isKT: true };
 }
 
-export { Fragment, h as createElement, jsx, jsxDEV, jsxs, ref };
+export { Fragment, h as createElement, createRedrawable, jsx, jsxDEV, jsxs, ref };

package/dist/jsx/jsx-runtime.d.ts

@@ -15,7 +15,7 @@ type KTHTMLElement = HTMLElement & {
    * Automically generate a redraw function if it is not provided
    * @param props
    */
-  redraw: (props?: KTAttribute, children?: KTRawContent) => void;
+  redraw: (props?: KTAttribute, children?: KTRawContent) => KTHTMLElement;
 };
 
 declare global {
@@ -141,7 +141,7 @@ type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent)
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
+ * @version 0.14.3 (Last Update: 2026.01.16 22:28:22.311)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/jsx-runtime.mjs

@@ -220,7 +220,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.14.1 (Last Update: 2026.01.16 22:18:41.846)
+ * @version 0.14.3 (Last Update: 2026.01.16 22:28:22.311)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -265,6 +265,7 @@ function jsx(tag, props = {}) {
                     ref.value = el;
                 }
                 old.replaceWith(el);
+                return el;
             };
         }
         if (ref) {
@@ -291,6 +292,7 @@ function jsx(tag, props = {}) {
                 ref.value = el;
             }
             old.replaceWith(el);
+            return el;
         };
         return el;
     }
@@ -356,6 +358,7 @@ function createRedrawable(creator) {
         element = creator();
         old.replaceWith(element);
         element.redraw = redraw;
+        return element;
     };
     element.redraw = redraw;
     return element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/core",
-  "version": "0.14.1",
+  "version": "0.14.3",
   "description": "Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support",
   "type": "module",
   "module": "./dist/index.mjs",