kt.js 0.12.0 → 0.13.1

package/README.md

@@ -4,7 +4,9 @@
 
 [![npm version](https://img.shields.io/npm/v/kt.js.svg)](https://www.npmjs.com/package/kt.js) [![license](https://img.shields.io/github/license/baendlorel/kt.js.svg)](https://github.com/baendlorel/kt.js/blob/main/LICENSE)
 
-[CHANGLOG✨](CHANGELOG.md)
+[CHANGLOG✨](../../CHANGELOG.md)
+
+**Current Version:** 0.13.x
 
 > Note: This framework is still under development. APIs, type declarations, and other parts **may change frequently**. If you use it, please watch for updates in the near future. Feel free to mail me if you have any questions!
 
@@ -50,8 +52,8 @@ KT.js follows one rule: **full control of DOM and avoid unnecessary repainting**
 - **JSX/TSX Support**: Full JSX syntax support with TypeScript integration
   - Zero virtual DOM - JSX compiles directly to `h()` function calls
   - Full HTML element type inference (`<button>` returns `HTMLButtonElement`)
-  - Support for `@click` event handler syntax
-  - No Fragment support - KT.js doesn't have a Fragment concept
+  - Support for `on:click` event handler syntax
+  - **NEW**: `redraw()` method for controlled component updates
 - **Async Components**: Built-in support for Promise-based components
   - `KTAsync` component for handling async operations
   - Automatic placeholder management during loading

package/dist/jsx-runtime.mjs

@@ -2,16 +2,6 @@ const $throw = (message) => {
     throw new Error('kt.js: ' + message);
 };
 
-const $isArray = Array.isArray;
-const $keys = Object.keys;
-const $defines = Object.defineProperties;
-const $mark = (func, tag) => $defines(func, { __ktjs_h__: { value: tag, configurable: true } });
-const emptyPromiseHandler = () => ({});
-if (typeof Promise === 'undefined') {
-    window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
-}
-const $isThenable = (o) => typeof o === 'object' && o !== null && 'then' in o && typeof o.then === 'function';
-
 /**
  * & Remove `bind` because it is shockingly slower than wrapper
  * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -50,6 +40,14 @@ const $append = // for ie 9/10/11
         }
     };
 
+const $isArray = Array.isArray;
+const $keys = Object.keys;
+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 booleanHandler(element, key, value) {
     if (key in element) {
         element[key] = !!value;
@@ -205,7 +203,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.12.0 (Last Update: 2026.01.14 15:48:26.320)
+ * @version 0.13.0 (Last Update: 2026.01.15 16:05:51.084)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -223,45 +221,67 @@ const h = ((tag, attr = '', content = '') => {
     applyContent(element, content);
     return element;
 });
-$mark(h, 'h');
 
 /**
  * @param tag html tag or function component
  * @param props properties/attributes
- * @param _metadata metadata is ignored
  */
-function jsx(tag, props, ..._metadata) {
+function jsx(tag, props = {}) {
+    const ref = props.ref?.isKT ? props.ref : null;
+    if (ref) {
+        delete props.ref;
+    }
     // Handle function components
     if (typeof tag === 'function') {
-        const propObj = typeof props === 'string' ? { class: props } : props || {};
-        const children = propObj.children;
-        return tag({ ...propObj, children });
-    }
-    // Handle regular HTML tags
-    const propObj = typeof props === 'string' ? { class: props } : props;
-    if (propObj === undefined || propObj === null) {
-        return h(tag);
-    }
-    const children = propObj.children;
-    delete propObj.children;
-    // deal with ref attribute
-    const ref = propObj.ref?.isKT ? propObj.ref : null;
-    if (ref) {
-        delete propObj.ref;
+        let el = tag(props);
+        if (!el.redraw) {
+            el.redraw = (newProps) => {
+                props = newProps ? { ...props, ...newProps } : props;
+                // $ same as below
+                const old = el;
+                el = tag(props);
+                el.redraw = old.redraw; // inherit redraw
+                if (ref) {
+                    ref.value = el;
+                }
+                old.replaceWith(el);
+            };
+        }
+        if (ref) {
+            ref.value = el;
+        }
+        return el;
     }
-    const el = h(tag, propObj, children);
-    if (ref) {
-        ref.value = el;
+    else {
+        // & deal children here
+        let children = props.children;
+        delete props.children;
+        let el = h(tag, props, children);
+        if (ref) {
+            ref.value = el;
+        }
+        el.redraw = (newProps, newChildren) => {
+            props = newProps ? { ...props, ...newProps } : props;
+            children = (newChildren ?? children);
+            // $ same as above
+            const old = el;
+            el = h(tag, props, children);
+            el.redraw = old.redraw; // inherit redraw
+            if (ref) {
+                ref.value = el;
+            }
+            old.replaceWith(el);
+        };
+        return el;
     }
-    return el;
 }
 /**
  * Fragment support - returns an array of children
  * Note: kt.js doesn't have a real Fragment concept,
  */
 function Fragment(props) {
-    window.__ktjs__.throws("kt.js doesn't have a Fragment concept");
-    // const { children } = props || {};
+    throw new Error("kt.js doesn't have a Fragment concept");
+    // const { children } = props ?? {};
     // if (!children) {
     //   return ;
     // }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kt.js",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "author": {
     "name": "Kasukabe Tsumugi",
     "email": "futami16237@gmail.com"
@@ -41,7 +41,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@ktjs/core": "0.12.0",
+    "@ktjs/core": "0.13.0",
     "@ktjs/shortcuts": "0.7.3"
   },
   "scripts": {