@ktjs/core 0.17.2 → 0.17.4

package/README.md

@@ -81,6 +81,10 @@ const card = h('div', { class: 'card' }, [
   h('p', {}, 'Description'),
   h('button', {}, 'Click me'),
 ]);
+
+// Note: attr parameter must be an object
+// String className shorthand is NOT supported:
+// h('div', 'my-class') ❌ - This will throw an error
 ```
 
 ### Event Handlers
@@ -344,7 +348,7 @@ Creates an HTMLElement with the specified tag, attributes, and content.
 **Parameters:**
 
 - `tag` (string): HTML tag name (e.g., 'div', 'span', 'button')
-- `attributes` (object, optional): Element attributes and event handlers
+- `attributes` (object, optional): Element attributes and event handlers. **Must be an object** - string className shorthand is not supported.
 - `content` (string | HTMLElement | Array, optional): Element content
 
 **Returns:** HTMLElement
@@ -354,8 +358,9 @@ Creates an HTMLElement with the specified tag, attributes, and content.
 The package includes comprehensive TypeScript definitions:
 
 - `HTMLTag`: Union type of all valid HTML tag names
-- `KAttribute`: Attribute object type with string or function values
-- `KContent`: Valid content types (string, Element, Array, etc.)
+- `KTAttribute`: Attribute object type for element attributes and event handlers
+- `KTRawAttr`: Union type for raw attribute parameter (`KTAttribute | null | undefined | '' | false`)
+- `KTRawContent`: Valid content types (string, Element, Array, Promise, etc.)
 - Event handler types with proper event object types
 
 ## Performance Considerations

package/dist/index.d.ts

@@ -48,7 +48,7 @@ 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 | string;
+type KTRawAttr = KTAttribute | null | undefined | '' | false;
 type KTRawContents = KTAvailableContent;
 
 /**
@@ -69,6 +69,7 @@ interface KTBaseAttribute {
   // # normal HTML attributes
   id?: string;
   class?: string;
+  className?: string;
   style?: string | Partial<CSSStyleDeclaration>;
 
   type?:
@@ -171,7 +172,7 @@ type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGEl
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
+ * @version 0.17.4 (Last Update: 2026.01.29 13:40:17.223)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/index.iife.js

@@ -56,7 +56,7 @@ var __ktjs_core__ = (function (exports) {
 
     const defaultHandler = (element, key, value) => element.setAttribute(key, value);
     function attrIsObject(element, attr) {
-        const classValue = attr.class;
+        const classValue = attr.class || attr.className;
         if (classValue !== undefined) {
             element.setAttribute('class', classValue);
         }
@@ -72,7 +72,12 @@ var __ktjs_core__ = (function (exports) {
             }
         }
         for (const key in attr) {
-            if (key === 'class' || key === 'style' || key === 'children' || key === 'k-if' || key === 'ref') {
+            if (key === 'class' ||
+                key === 'className' ||
+                key === 'style' ||
+                key === 'children' ||
+                key === 'k-if' ||
+                key === 'ref') {
                 continue;
             }
             const o = attr[key];
@@ -92,14 +97,14 @@ var __ktjs_core__ = (function (exports) {
         }
     }
     function applyAttr(element, attr) {
+        if (!attr) {
+            return;
+        }
         if (typeof attr === 'object' && attr !== null) {
             attrIsObject(element, attr);
         }
-        else if (typeof attr === 'string') {
-            element.className = attr;
-        }
         else {
-            throw new Error('kt.js: attr must be an object/string.');
+            throw new Error('kt.js: attr must be an object.');
         }
     }
 
@@ -199,8 +204,7 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
-    const defaultCreator = (tag) => document.createElement(tag);
-    let creator = defaultCreator;
+    const svgTempWrapper = document.createElement('div');
     /**
      * Create an enhanced HTMLElement.
      * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -211,7 +215,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
+     * @version 0.17.4 (Last Update: 2026.01.29 13:40:17.223)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -223,14 +227,13 @@ var __ktjs_core__ = (function (exports) {
             $throw('tagName must be a string.');
         }
         // * start creating the element
-        const element = creator(tag);
+        const element = document.createElement(tag);
         // * Handle content
         applyAttr(element, attr);
         applyContent(element, content);
         if (tag === 'svg') {
-            const div = document.createElement('div');
-            div.innerHTML = element.outerHTML;
-            return div.firstChild;
+            svgTempWrapper.innerHTML = element.outerHTML;
+            return svgTempWrapper.firstChild;
         }
         return element;
     };
@@ -245,7 +248,6 @@ var __ktjs_core__ = (function (exports) {
     }
 
     const dummyRef = { value: null };
-    // todo 是否进一步削减h函数的分支，比如去掉string为attr的情况
     /**
      * @param tag html tag or function component
      * @param props properties/attributes

package/dist/index.legacy.js

@@ -68,7 +68,7 @@ var __ktjs_core__ = (function (exports) {
 
     var defaultHandler = function (element, key, value) { return element.setAttribute(key, value); };
     function attrIsObject(element, attr) {
-        var classValue = attr.class;
+        var classValue = attr.class || attr.className;
         if (classValue !== undefined) {
             element.setAttribute('class', classValue);
         }
@@ -84,7 +84,12 @@ var __ktjs_core__ = (function (exports) {
             }
         }
         for (var key in attr) {
-            if (key === 'class' || key === 'style' || key === 'children' || key === 'k-if' || key === 'ref') {
+            if (key === 'class' ||
+                key === 'className' ||
+                key === 'style' ||
+                key === 'children' ||
+                key === 'k-if' ||
+                key === 'ref') {
                 continue;
             }
             var o = attr[key];
@@ -104,14 +109,14 @@ var __ktjs_core__ = (function (exports) {
         }
     }
     function applyAttr(element, attr) {
+        if (!attr) {
+            return;
+        }
         if (typeof attr === 'object' && attr !== null) {
             attrIsObject(element, attr);
         }
-        else if (typeof attr === 'string') {
-            element.className = attr;
-        }
         else {
-            throw new Error('kt.js: attr must be an object/string.');
+            throw new Error('kt.js: attr must be an object.');
         }
     }
 
@@ -224,8 +229,7 @@ var __ktjs_core__ = (function (exports) {
         }
     }
 
-    var defaultCreator = function (tag) { return document.createElement(tag); };
-    var creator = defaultCreator;
+    var svgTempWrapper = document.createElement('div');
     /**
      * Create an enhanced HTMLElement.
      * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -236,7 +240,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
+     * @version 0.17.4 (Last Update: 2026.01.29 13:40:17.223)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -248,14 +252,13 @@ var __ktjs_core__ = (function (exports) {
             $throw('tagName must be a string.');
         }
         // * start creating the element
-        var element = creator(tag);
+        var element = document.createElement(tag);
         // * Handle content
         applyAttr(element, attr);
         applyContent(element, content);
         if (tag === 'svg') {
-            var div = document.createElement('div');
-            div.innerHTML = element.outerHTML;
-            return div.firstChild;
+            svgTempWrapper.innerHTML = element.outerHTML;
+            return svgTempWrapper.firstChild;
         }
         return element;
     };
@@ -303,7 +306,6 @@ var __ktjs_core__ = (function (exports) {
     }
 
     var dummyRef = { value: null };
-    // todo 是否进一步削减h函数的分支，比如去掉string为attr的情况
     /**
      * @param tag html tag or function component
      * @param props properties/attributes

package/dist/index.mjs

@@ -53,7 +53,7 @@ const ktEventHandlers = {
 
 const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
-    const classValue = attr.class;
+    const classValue = attr.class || attr.className;
     if (classValue !== undefined) {
         element.setAttribute('class', classValue);
     }
@@ -69,7 +69,12 @@ function attrIsObject(element, attr) {
         }
     }
     for (const key in attr) {
-        if (key === 'class' || key === 'style' || key === 'children' || key === 'k-if' || key === 'ref') {
+        if (key === 'class' ||
+            key === 'className' ||
+            key === 'style' ||
+            key === 'children' ||
+            key === 'k-if' ||
+            key === 'ref') {
             continue;
         }
         const o = attr[key];
@@ -89,14 +94,14 @@ function attrIsObject(element, attr) {
     }
 }
 function applyAttr(element, attr) {
+    if (!attr) {
+        return;
+    }
     if (typeof attr === 'object' && attr !== null) {
         attrIsObject(element, attr);
     }
-    else if (typeof attr === 'string') {
-        element.className = attr;
-    }
     else {
-        throw new Error('kt.js: attr must be an object/string.');
+        throw new Error('kt.js: attr must be an object.');
     }
 }
 
@@ -196,8 +201,7 @@ function applyContent(element, content) {
     }
 }
 
-const defaultCreator = (tag) => document.createElement(tag);
-let creator = defaultCreator;
+const svgTempWrapper = document.createElement('div');
 /**
  * Create an enhanced HTMLElement.
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -208,7 +212,7 @@ let creator = defaultCreator;
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
+ * @version 0.17.4 (Last Update: 2026.01.29 13:40:17.223)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -220,14 +224,13 @@ const h = (tag, attr, content) => {
         $throw('tagName must be a string.');
     }
     // * start creating the element
-    const element = creator(tag);
+    const element = document.createElement(tag);
     // * Handle content
     applyAttr(element, attr);
     applyContent(element, content);
     if (tag === 'svg') {
-        const div = document.createElement('div');
-        div.innerHTML = element.outerHTML;
-        return div.firstChild;
+        svgTempWrapper.innerHTML = element.outerHTML;
+        return svgTempWrapper.firstChild;
     }
     return element;
 };
@@ -242,7 +245,6 @@ function ref(value) {
 }
 
 const dummyRef = { value: null };
-// todo 是否进一步削减h函数的分支，比如去掉string为attr的情况
 /**
  * @param tag html tag or function component
  * @param props properties/attributes

package/dist/jsx/index.d.ts

@@ -48,7 +48,7 @@ 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 | string;
+type KTRawAttr = KTAttribute | null | undefined | '' | false;
 
 /**
  * Used to create enhanced HTML elements
@@ -63,6 +63,7 @@ interface KTBaseAttribute {
   // # normal HTML attributes
   id?: string;
   class?: string;
+  className?: string;
   style?: string | Partial<CSSStyleDeclaration>;
 
   type?:
@@ -157,7 +158,7 @@ type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGEl
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
+ * @version 0.17.4 (Last Update: 2026.01.29 13:40:17.223)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/index.mjs

@@ -53,7 +53,7 @@ const ktEventHandlers = {
 
 const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
-    const classValue = attr.class;
+    const classValue = attr.class || attr.className;
     if (classValue !== undefined) {
         element.setAttribute('class', classValue);
     }
@@ -69,7 +69,12 @@ function attrIsObject(element, attr) {
         }
     }
     for (const key in attr) {
-        if (key === 'class' || key === 'style' || key === 'children' || key === 'k-if' || key === 'ref') {
+        if (key === 'class' ||
+            key === 'className' ||
+            key === 'style' ||
+            key === 'children' ||
+            key === 'k-if' ||
+            key === 'ref') {
             continue;
         }
         const o = attr[key];
@@ -89,14 +94,14 @@ function attrIsObject(element, attr) {
     }
 }
 function applyAttr(element, attr) {
+    if (!attr) {
+        return;
+    }
     if (typeof attr === 'object' && attr !== null) {
         attrIsObject(element, attr);
     }
-    else if (typeof attr === 'string') {
-        element.className = attr;
-    }
     else {
-        throw new Error('kt.js: attr must be an object/string.');
+        throw new Error('kt.js: attr must be an object.');
     }
 }
 
@@ -196,8 +201,7 @@ function applyContent(element, content) {
     }
 }
 
-const defaultCreator = (tag) => document.createElement(tag);
-let creator = defaultCreator;
+const svgTempWrapper = document.createElement('div');
 /**
  * Create an enhanced HTMLElement.
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -208,7 +212,7 @@ let creator = defaultCreator;
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
+ * @version 0.17.4 (Last Update: 2026.01.29 13:40:17.223)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -220,14 +224,13 @@ const h = (tag, attr, content) => {
         $throw('tagName must be a string.');
     }
     // * start creating the element
-    const element = creator(tag);
+    const element = document.createElement(tag);
     // * Handle content
     applyAttr(element, attr);
     applyContent(element, content);
     if (tag === 'svg') {
-        const div = document.createElement('div');
-        div.innerHTML = element.outerHTML;
-        return div.firstChild;
+        svgTempWrapper.innerHTML = element.outerHTML;
+        return svgTempWrapper.firstChild;
     }
     return element;
 };
@@ -242,7 +245,6 @@ function ref(value) {
 }
 
 const dummyRef = { value: null };
-// todo 是否进一步削减h函数的分支，比如去掉string为attr的情况
 /**
  * @param tag html tag or function component
  * @param props properties/attributes

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

@@ -42,7 +42,7 @@ 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 | string;
+type KTRawAttr = KTAttribute | null | undefined | '' | false;
 
 /**
  * Used to create enhanced HTML elements
@@ -57,6 +57,7 @@ interface KTBaseAttribute {
   // # normal HTML attributes
   id?: string;
   class?: string;
+  className?: string;
   style?: string | Partial<CSSStyleDeclaration>;
 
   type?:
@@ -151,7 +152,7 @@ type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGEl
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
+ * @version 0.17.4 (Last Update: 2026.01.29 13:40:17.223)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/jsx/jsx-runtime.mjs

@@ -53,7 +53,7 @@ const ktEventHandlers = {
 
 const defaultHandler = (element, key, value) => element.setAttribute(key, value);
 function attrIsObject(element, attr) {
-    const classValue = attr.class;
+    const classValue = attr.class || attr.className;
     if (classValue !== undefined) {
         element.setAttribute('class', classValue);
     }
@@ -69,7 +69,12 @@ function attrIsObject(element, attr) {
         }
     }
     for (const key in attr) {
-        if (key === 'class' || key === 'style' || key === 'children' || key === 'k-if' || key === 'ref') {
+        if (key === 'class' ||
+            key === 'className' ||
+            key === 'style' ||
+            key === 'children' ||
+            key === 'k-if' ||
+            key === 'ref') {
             continue;
         }
         const o = attr[key];
@@ -89,14 +94,14 @@ function attrIsObject(element, attr) {
     }
 }
 function applyAttr(element, attr) {
+    if (!attr) {
+        return;
+    }
     if (typeof attr === 'object' && attr !== null) {
         attrIsObject(element, attr);
     }
-    else if (typeof attr === 'string') {
-        element.className = attr;
-    }
     else {
-        throw new Error('kt.js: attr must be an object/string.');
+        throw new Error('kt.js: attr must be an object.');
     }
 }
 
@@ -196,8 +201,7 @@ function applyContent(element, content) {
     }
 }
 
-const defaultCreator = (tag) => document.createElement(tag);
-let creator = defaultCreator;
+const svgTempWrapper = document.createElement('div');
 /**
  * Create an enhanced HTMLElement.
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -208,7 +212,7 @@ let creator = defaultCreator;
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.17.2 (Last Update: 2026.01.28 15:54:29.326)
+ * @version 0.17.4 (Last Update: 2026.01.29 13:40:17.223)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -220,14 +224,13 @@ const h = (tag, attr, content) => {
         $throw('tagName must be a string.');
     }
     // * start creating the element
-    const element = creator(tag);
+    const element = document.createElement(tag);
     // * Handle content
     applyAttr(element, attr);
     applyContent(element, content);
     if (tag === 'svg') {
-        const div = document.createElement('div');
-        div.innerHTML = element.outerHTML;
-        return div.firstChild;
+        svgTempWrapper.innerHTML = element.outerHTML;
+        return svgTempWrapper.firstChild;
     }
     return element;
 };
@@ -242,7 +245,6 @@ function ref(value) {
 }
 
 const dummyRef = { value: null };
-// todo 是否进一步削减h函数的分支，比如去掉string为attr的情况
 /**
  * @param tag html tag or function component
  * @param props properties/attributes

package/package.json

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