@ktjs/core 0.13.0 → 0.14.0

package/dist/index.mjs

@@ -2,68 +2,22 @@ const $throw = (message) => {
     throw new Error('kt.js: ' + message);
 };
 
-/**
- * & Remove `bind` because it is shockingly slower than wrapper
- * & `window.document` is safe because it is not configurable and its setter is undefined
- */
-const $appendChild = HTMLElement.prototype.appendChild;
-const originAppend = HTMLElement.prototype.append;
-const $append = // for ie 9/10/11
- typeof originAppend === 'function'
-    ? function (...args) {
-        return originAppend.apply(this, args);
-    }
-    : function (...nodes) {
-        if (nodes.length < 50) {
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
-                if (typeof node === 'string') {
-                    $appendChild.call(this, document.createTextNode(node));
-                }
-                else {
-                    $appendChild.call(this, node);
-                }
-            }
-        }
-        else {
-            const fragment = document.createDocumentFragment();
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
-                if (typeof node === 'string') {
-                    $appendChild.call(fragment, document.createTextNode(node));
-                }
-                else {
-                    $appendChild.call(fragment, node);
-                }
-            }
-            $appendChild.call(this, fragment);
-        }
-    };
-
-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) {
+const booleanHandler = (element, key, value) => {
     if (key in element) {
         element[key] = !!value;
     }
     else {
         element.setAttribute(key, value);
     }
-}
-function valueHandler(element, key, value) {
+};
+const valueHandler = (element, key, value) => {
     if (key in element) {
         element[key] = value;
     }
     else {
         element.setAttribute(key, value);
     }
-}
+};
 // Attribute handlers map for optimized lookup
 const handlers = {
     checked: booleanHandler,
@@ -86,14 +40,25 @@ const handlers = {
     muted: booleanHandler,
     defer: booleanHandler,
     async: booleanHandler,
-    hidden: function (element, _key, value) {
-        element.hidden = !!value;
-    },
+    hidden: (element, _key, value) => (element.hidden = !!value),
 };
-const defaultHandler = function (element, key, value) {
-    return element.setAttribute(key, value);
+const ktEventHandlers = {
+    'on:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value)),
+    'ontrim:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value.trim())),
+    'on:ktchangenumber': (element, handler) => element.addEventListener('change', () => handler(Number(element.value))),
+    'on:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value)),
+    'ontrim:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value.trim())),
+    'on:ktinputnumber': (element, handler) => element.addEventListener('input', () => handler(Number(element.value))),
 };
+
+const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
+    // & deal k-if first
+    if ('k-if' in attr) {
+        if (!attr['k-if']) {
+            return false;
+        }
+    }
     const classValue = attr.class;
     const style = attr.style;
     if (classValue !== undefined) {
@@ -111,12 +76,17 @@ function attrIsObject(element, attr) {
         }
         delete attr.style;
     }
-    const keys = $keys(attr);
-    for (let i = keys.length - 1; i >= 0; i--) {
-        const key = keys[i];
+    for (const key in attr) {
         const o = attr[key];
         // force register on:xxx as an event handler
         // !if o is not valid, the throwing job will be done by `on`, not kt.js
+        // # special handling for kt.js specific events
+        const ktEvent = ktEventHandlers[key];
+        if (ktEvent) {
+            ktEvent(element, o);
+            continue;
+        }
+        // # normal event handler
         if (key.startsWith('on:')) {
             element.addEventListener(key.slice(3), o); // chop off the `@`
             continue;
@@ -134,19 +104,66 @@ function attrIsObject(element, attr) {
     if (style !== undefined) {
         attr.style = style;
     }
+    return true;
 }
 function applyAttr(element, attr) {
     if (typeof attr === 'string') {
         element.className = attr;
+        return true;
     }
     else if (typeof attr === 'object' && attr !== null) {
-        attrIsObject(element, attr);
+        return attrIsObject(element, attr);
     }
     else {
-        $throw('attr must be an object/string.');
+        throw new Error('kt.js: attr must be an object/string.');
     }
 }
 
+/**
+ * & Remove `bind` because it is shockingly slower than wrapper
+ * & `window.document` is safe because it is not configurable and its setter is undefined
+ */
+const $appendChild = HTMLElement.prototype.appendChild;
+const originAppend = HTMLElement.prototype.append;
+const $append = // for ie 9/10/11
+ typeof originAppend === 'function'
+    ? function (...args) {
+        return originAppend.apply(this, args);
+    }
+    : function (...nodes) {
+        if (nodes.length < 50) {
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (typeof node === 'string') {
+                    $appendChild.call(this, document.createTextNode(node));
+                }
+                else {
+                    $appendChild.call(this, node);
+                }
+            }
+        }
+        else {
+            const fragment = document.createDocumentFragment();
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (typeof node === 'string') {
+                    $appendChild.call(fragment, document.createTextNode(node));
+                }
+                else {
+                    $appendChild.call(fragment, node);
+                }
+            }
+            $appendChild.call(this, fragment);
+        }
+    };
+
+const $isArray = Array.isArray;
+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 apdSingle(element, c) {
     // & JSX should ignore false, undefined, and null
     if (c === false || c === undefined || c === null) {
@@ -203,7 +220,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.13.0 (Last Update: 2026.01.15 16:05:51.084)
+ * @version 0.14.0 (Last Update: 2026.01.16 20:08:50.505)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -217,7 +234,10 @@ const h = ((tag, attr = '', content = '') => {
     // * start creating the element
     const element = document.createElement(tag);
     // * Handle content
-    applyAttr(element, attr);
+    const kif = applyAttr(element, attr);
+    if (!kif) {
+        return document.createComment('k-if');
+    }
     applyContent(element, content);
     return element;
 });

package/dist/jsx/index.d.ts

@@ -16,6 +16,33 @@ interface KTRef<T> {
  */
 declare function ref<T = HTMLElement>(value?: T): KTRef<T>;
 
+type KTHTMLElement = HTMLElement & {
+  /**
+   * Automically generate a redraw function if it is not provided
+   * @param props
+   */
+  redraw: (props?: KTAttribute, children?: KTRawContent) => void;
+};
+
+declare global {
+  namespace JSX {
+    type Element = KTHTMLElement;
+
+    interface IntrinsicElements {
+      [tag: string]: KTAttribute & { children?: KTRawContent };
+    }
+
+    // interface IntrinsicAttributes {
+    //   key?: string | number;
+    // }
+    type IntrinsicAttributes = KTAttribute;
+
+    interface ElementChildrenAttribute {
+      children: {};
+    }
+  }
+}
+
 type KTAvailableContent =
   | KTRef<any>
   | HTMLElement
@@ -36,6 +63,7 @@ interface KTBaseAttribute {
   [k: string]: any;
 
   ref?: KTRef<HTMLElement>;
+  'k-if'?: any;
 
   id?: string;
   class?: string;
@@ -92,34 +120,17 @@ type KTPrefixedEventHandlers = {
   [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
 };
 
-type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
+type KTSpecialEventHandlers = {
+  'on:ktchange'?: (value: string) => void;
+  'ontrim:ktchange'?: (value: string) => void;
+  'on:ktchangenumber'?: (value: number) => void;
 
-type KTHTMLElement = HTMLElement & {
-  /**
-   * Automically generate a redraw function if it is not provided
-   * @param props
-   */
-  redraw: (props?: KTAttribute, children?: KTRawContent) => void;
+  'on:ktinput'?: (value: string) => void;
+  'ontrim:ktinput'?: (value: string) => void;
+  'on:ktinputnumber'?: (value: number) => void;
 };
 
-declare global {
-  namespace JSX {
-    type Element = KTHTMLElement;
-
-    interface IntrinsicElements {
-      [tag: string]: KTAttribute & { children?: KTRawContent };
-    }
-
-    // interface IntrinsicAttributes {
-    //   key?: string | number;
-    // }
-    type IntrinsicAttributes = KTAttribute;
-
-    interface ElementChildrenAttribute {
-      children: {};
-    }
-  }
-}
+type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers & KTSpecialEventHandlers;
 
 type HTML<T extends HTMLTag & otherstring> = T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
 type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>) & {
@@ -136,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.13.0 (Last Update: 2026.01.15 16:05:51.084)
+ * @version 0.14.0 (Last Update: 2026.01.16 20:08:50.505)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/index.mjs

@@ -2,68 +2,22 @@ const $throw = (message) => {
     throw new Error('kt.js: ' + message);
 };
 
-/**
- * & Remove `bind` because it is shockingly slower than wrapper
- * & `window.document` is safe because it is not configurable and its setter is undefined
- */
-const $appendChild = HTMLElement.prototype.appendChild;
-const originAppend = HTMLElement.prototype.append;
-const $append = // for ie 9/10/11
- typeof originAppend === 'function'
-    ? function (...args) {
-        return originAppend.apply(this, args);
-    }
-    : function (...nodes) {
-        if (nodes.length < 50) {
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
-                if (typeof node === 'string') {
-                    $appendChild.call(this, document.createTextNode(node));
-                }
-                else {
-                    $appendChild.call(this, node);
-                }
-            }
-        }
-        else {
-            const fragment = document.createDocumentFragment();
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
-                if (typeof node === 'string') {
-                    $appendChild.call(fragment, document.createTextNode(node));
-                }
-                else {
-                    $appendChild.call(fragment, node);
-                }
-            }
-            $appendChild.call(this, fragment);
-        }
-    };
-
-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) {
+const booleanHandler = (element, key, value) => {
     if (key in element) {
         element[key] = !!value;
     }
     else {
         element.setAttribute(key, value);
     }
-}
-function valueHandler(element, key, value) {
+};
+const valueHandler = (element, key, value) => {
     if (key in element) {
         element[key] = value;
     }
     else {
         element.setAttribute(key, value);
     }
-}
+};
 // Attribute handlers map for optimized lookup
 const handlers = {
     checked: booleanHandler,
@@ -86,14 +40,25 @@ const handlers = {
     muted: booleanHandler,
     defer: booleanHandler,
     async: booleanHandler,
-    hidden: function (element, _key, value) {
-        element.hidden = !!value;
-    },
+    hidden: (element, _key, value) => (element.hidden = !!value),
 };
-const defaultHandler = function (element, key, value) {
-    return element.setAttribute(key, value);
+const ktEventHandlers = {
+    'on:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value)),
+    'ontrim:ktchange': (element, handler) => element.addEventListener('change', () => handler(element.value.trim())),
+    'on:ktchangenumber': (element, handler) => element.addEventListener('change', () => handler(Number(element.value))),
+    'on:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value)),
+    'ontrim:ktinput': (element, handler) => element.addEventListener('input', () => handler(element.value.trim())),
+    'on:ktinputnumber': (element, handler) => element.addEventListener('input', () => handler(Number(element.value))),
 };
+
+const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
+    // & deal k-if first
+    if ('k-if' in attr) {
+        if (!attr['k-if']) {
+            return false;
+        }
+    }
     const classValue = attr.class;
     const style = attr.style;
     if (classValue !== undefined) {
@@ -111,12 +76,17 @@ function attrIsObject(element, attr) {
         }
         delete attr.style;
     }
-    const keys = $keys(attr);
-    for (let i = keys.length - 1; i >= 0; i--) {
-        const key = keys[i];
+    for (const key in attr) {
         const o = attr[key];
         // force register on:xxx as an event handler
         // !if o is not valid, the throwing job will be done by `on`, not kt.js
+        // # special handling for kt.js specific events
+        const ktEvent = ktEventHandlers[key];
+        if (ktEvent) {
+            ktEvent(element, o);
+            continue;
+        }
+        // # normal event handler
         if (key.startsWith('on:')) {
             element.addEventListener(key.slice(3), o); // chop off the `@`
             continue;
@@ -134,19 +104,66 @@ function attrIsObject(element, attr) {
     if (style !== undefined) {
         attr.style = style;
     }
+    return true;
 }
 function applyAttr(element, attr) {
     if (typeof attr === 'string') {
         element.className = attr;
+        return true;
     }
     else if (typeof attr === 'object' && attr !== null) {
-        attrIsObject(element, attr);
+        return attrIsObject(element, attr);
     }
     else {
-        $throw('attr must be an object/string.');
+        throw new Error('kt.js: attr must be an object/string.');
     }
 }
 
+/**
+ * & Remove `bind` because it is shockingly slower than wrapper
+ * & `window.document` is safe because it is not configurable and its setter is undefined
+ */
+const $appendChild = HTMLElement.prototype.appendChild;
+const originAppend = HTMLElement.prototype.append;
+const $append = // for ie 9/10/11
+ typeof originAppend === 'function'
+    ? function (...args) {
+        return originAppend.apply(this, args);
+    }
+    : function (...nodes) {
+        if (nodes.length < 50) {
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (typeof node === 'string') {
+                    $appendChild.call(this, document.createTextNode(node));
+                }
+                else {
+                    $appendChild.call(this, node);
+                }
+            }
+        }
+        else {
+            const fragment = document.createDocumentFragment();
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (typeof node === 'string') {
+                    $appendChild.call(fragment, document.createTextNode(node));
+                }
+                else {
+                    $appendChild.call(fragment, node);
+                }
+            }
+            $appendChild.call(this, fragment);
+        }
+    };
+
+const $isArray = Array.isArray;
+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 apdSingle(element, c) {
     // & JSX should ignore false, undefined, and null
     if (c === false || c === undefined || c === null) {
@@ -203,7 +220,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.13.0 (Last Update: 2026.01.15 16:05:51.084)
+ * @version 0.14.0 (Last Update: 2026.01.16 20:08:50.505)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -217,7 +234,10 @@ const h = ((tag, attr = '', content = '') => {
     // * start creating the element
     const element = document.createElement(tag);
     // * Handle content
-    applyAttr(element, attr);
+    const kif = applyAttr(element, attr);
+    if (!kif) {
+        return document.createComment('k-if');
+    }
     applyContent(element, content);
     return element;
 });

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

@@ -10,6 +10,33 @@ interface KTRef<T> {
     isKT: true;
 }
 
+type KTHTMLElement = HTMLElement & {
+  /**
+   * Automically generate a redraw function if it is not provided
+   * @param props
+   */
+  redraw: (props?: KTAttribute, children?: KTRawContent) => void;
+};
+
+declare global {
+  namespace JSX {
+    type Element = KTHTMLElement;
+
+    interface IntrinsicElements {
+      [tag: string]: KTAttribute & { children?: KTRawContent };
+    }
+
+    // interface IntrinsicAttributes {
+    //   key?: string | number;
+    // }
+    type IntrinsicAttributes = KTAttribute;
+
+    interface ElementChildrenAttribute {
+      children: {};
+    }
+  }
+}
+
 type KTAvailableContent =
   | KTRef<any>
   | HTMLElement
@@ -30,6 +57,7 @@ interface KTBaseAttribute {
   [k: string]: any;
 
   ref?: KTRef<HTMLElement>;
+  'k-if'?: any;
 
   id?: string;
   class?: string;
@@ -86,34 +114,17 @@ type KTPrefixedEventHandlers = {
   [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
 };
 
-type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
+type KTSpecialEventHandlers = {
+  'on:ktchange'?: (value: string) => void;
+  'ontrim:ktchange'?: (value: string) => void;
+  'on:ktchangenumber'?: (value: number) => void;
 
-type KTHTMLElement = HTMLElement & {
-  /**
-   * Automically generate a redraw function if it is not provided
-   * @param props
-   */
-  redraw: (props?: KTAttribute, children?: KTRawContent) => void;
+  'on:ktinput'?: (value: string) => void;
+  'ontrim:ktinput'?: (value: string) => void;
+  'on:ktinputnumber'?: (value: number) => void;
 };
 
-declare global {
-  namespace JSX {
-    type Element = KTHTMLElement;
-
-    interface IntrinsicElements {
-      [tag: string]: KTAttribute & { children?: KTRawContent };
-    }
-
-    // interface IntrinsicAttributes {
-    //   key?: string | number;
-    // }
-    type IntrinsicAttributes = KTAttribute;
-
-    interface ElementChildrenAttribute {
-      children: {};
-    }
-  }
-}
+type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers & KTSpecialEventHandlers;
 
 type HTML<T extends HTMLTag & otherstring> = T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
 type H = (<T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>) & {
@@ -130,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.13.0 (Last Update: 2026.01.15 16:05:51.084)
+ * @version 0.14.0 (Last Update: 2026.01.16 20:08:50.505)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!