kt.js 0.9.0 → 0.10.1

package/README.md

@@ -45,13 +45,17 @@ KT.js follows one rule: **full control of DOM and avoid unnecessary repainting**
 - **Tiny Bundle Size**: Minimal runtime overhead with aggressive tree-shaking
 - **`h` function**: Create DOM elements with a simple, flexible API
   - Shortcut functions for all HTML elements (`div`, `span`, `button`, etc.)
-  - Event handlers with `@<eventName>` syntax or function attributes
+  - Event handlers with `on:<eventName>` syntax or function attributes
   - Full TypeScript support with intelligent type inference
 - **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
+- **Async Components**: Built-in support for Promise-based components
+  - `KTAsync` component for handling async operations
+  - Automatic placeholder management during loading
+  - Seamless integration with JSX/TSX syntax
 - **Client-Side Router** (separate package):
   - Hash-based routing with dynamic parameters
   - Navigation guards with async/sync auto-adaptation
@@ -64,7 +68,6 @@ KT.js follows one rule: **full control of DOM and avoid unnecessary repainting**
 - **Full ES5 Compatibility**: Works in IE9+ and all modern browsers
   - Transpiled to ES5 with no modern syntax
   - Optional minimal Promise polyfill for older environments
-- **`ktnull`**: A special value for filtering null/undefined while preserving native DOM behavior
 - **Shared Runtime**: Efficient code sharing across packages with zero overhead
 
 ## Getting started
@@ -106,7 +109,7 @@ KT.js now has full JSX support! With the `@ktjs/jsx` package (included in the ma
 {
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "@ktjs/jsx"
+    "jsxImportSource": "kt.js"
   }
 }
 ```
@@ -122,9 +125,7 @@ function Counter() {
   return (
     <div class="counter">
       <h1>Counter: {count}</h1>
-      <button @click={() => console.log('Clicked!')}>
-        Increment
-      </button>
+      <button on:click={() => console.log('Clicked!')}>Increment</button>
     </div>
   );
 }
@@ -141,8 +142,7 @@ function App() {
 
   return (
     <div>
-      <button @click={handleClick}>Click me</button>
-      <button onclick={handleClick}>Also works</button>
+      <button on:click={handleClick}>Click me</button>
     </div>
   );
 }
@@ -168,14 +168,80 @@ const div: HTMLDivElement = <div className="container" id="main" />;
 - Use `@click` syntax for event handlers to avoid conflicts with existing attributes
 - All JSX elements have proper HTML element type inference in TypeScript
 
+### Async Components with KTAsync
+
+KT.js provides built-in support for async components through the `KTAsync` component:
+
+```tsx
+import { KTAsync, ref } from 'kt.js';
+
+// Define an async component that returns a Promise<HTMLElement>
+const AsyncUserCard = function () {
+  return fetch('/api/user')
+    .then((res) => res.json())
+    .then((user) => (
+      <div class="user-card">
+        <h2>{user.name}</h2>
+        <p>{user.email}</p>
+      </div>
+    ));
+};
+
+// Use KTAsync to handle the async component
+function App() {
+  return (
+    <div class="app">
+      <h1>User Profile</h1>
+      <KTAsync component={AsyncUserCard} />
+    </div>
+  );
+}
+
+// The component starts with a placeholder comment node
+// When the Promise resolves, it automatically replaces with the actual element
+```
+
+**How KTAsync works:**
+
+1. Creates a placeholder comment node (`ktjs-suspense-placeholder`) immediately
+2. Calls your component function (which should return a `Promise<HTMLElement>` or `HTMLElement`)
+3. When the Promise resolves, automatically replaces the placeholder with the resolved element
+4. If your component returns a non-Promise value, it's used directly without async handling
+
+**Example with dynamic updates:**
+
+```tsx
+const DynamicContent = function () {
+  const count = ref(0);
+  const container = (
+    <div>
+      <p>Count: {count}</p>
+      <button on:click={() => count.value++}>Increment</button>
+    </div>
+  );
+
+  // Simulate async data loading
+  return new Promise<HTMLElement>((resolve) => {
+    setTimeout(() => resolve(container), 500);
+  });
+};
+
+// Usage
+const app = (
+  <div>
+    <h1>Loading async content...</h1>
+    <KTAsync component={DynamicContent} />
+  </div>
+);
+```
+
 If you give a function in attributes, it will be treated as an event listener, and the key will be considered as the event name. `@<eventName>` will also be considered as the handler to avoid conflicts with existing attributes:
 
 ```ts
 const button = btn(
   {
-    click: () => alert('Clicked!'),
     dblclick: '22',
-    '@dblclick': function trueHandler() {
+    'on:dblclick': function trueHandler() {
       /* ... */
     },
   },
@@ -301,26 +367,6 @@ console.log(router.current?.path, router.current?.params, router.current?.query)
 - **Zero Dependencies**: Fully self-contained router implementation (does not require `@ktjs/core` for runtime, only for TypeScript types)
 - **Pure Routing**: No rendering logic - you control the DOM
 
-## `ktnull`
-
-`ktnull`, assigned by `Object.create(null)`, is a falsy value.
-It is used for filtering, you can do like this:
-
-```ts
-import { div, ktnull } from 'kt.js';
-const list = div('', [false ? div('', 'item 1') : ktnull, div('', 'Item 2'), undefined]);
-```
-
-Then it will create:
-
-```html
-<div>
-  <!-- there won't be <div>Item 1</div> -->
-  <div>Item 2</div>
-  undefined
-</div>
-```
-
 ## Browser Compatibility
 
 KT.js is transpiled to ES5 and works in all modern browsers as well as legacy browsers including IE9+.

package/dist/jsx-runtime.mjs

@@ -10,12 +10,7 @@ const emptyPromiseHandler = () => ({});
 if (typeof Promise === 'undefined') {
     window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
 }
-
-/**
- * This is a `falsy` value used to indicate "no node" in `h` function.
- * - It's an object, so it's guaranteed to be unique and no need for polyfill of `symbol`.
- */
-const ktnull = Object.create(null);
+const $isThenable = (o) => typeof o === 'object' && o !== null && 'then' in o && typeof o.then === 'function';
 
 /**
  * & Remove `bind` because it is shockingly slower than wrapper
@@ -26,8 +21,7 @@ const originAppend = HTMLElement.prototype.append;
 const $append = // for ie 9/10/11
  typeof originAppend === 'function'
     ? function (...args) {
-        const nodes = args.filter((a) => a !== ktnull);
-        return originAppend.apply(this, nodes);
+        return originAppend.apply(this, args);
     }
     : function (...nodes) {
         if (nodes.length < 50) {
@@ -36,7 +30,7 @@ const $append = // for ie 9/10/11
                 if (typeof node === 'string') {
                     $appendChild.call(this, document.createTextNode(node));
                 }
-                else if (node !== ktnull) {
+                else {
                     $appendChild.call(this, node);
                 }
             }
@@ -48,7 +42,7 @@ const $append = // for ie 9/10/11
                 if (typeof node === 'string') {
                     $appendChild.call(fragment, document.createTextNode(node));
                 }
-                else if (node !== ktnull) {
+                else {
                     $appendChild.call(fragment, node);
                 }
             }
@@ -155,12 +149,35 @@ function applyAttr(element, attr) {
     }
 }
 
-function apd(element, content) {
-    if (content && content.isKT) {
-        $append.call(element, content.value);
+function apdSingle(element, c) {
+    if (typeof c === 'object' && c !== null && 'isKT' in c) {
+        $append.call(element, c.value);
+    }
+    else {
+        $append.call(element, c);
+    }
+}
+function apd(element, c) {
+    if ($isThenable(c)) {
+        c.then((r) => apd(element, r));
+    }
+    else if ($isArray(c)) {
+        for (let i = 0; i < c.length; i++) {
+            // & might be thenable here too
+            const ci = c[i];
+            if ($isThenable(ci)) {
+                const comment = document.createComment('ktjs-promise-placeholder');
+                $append.call(element, comment);
+                ci.then((awaited) => comment.replaceWith(awaited));
+            }
+            else {
+                apdSingle(element, ci);
+            }
+        }
     }
     else {
-        $append.call(element, content);
+        // & here is thened, so must be a simple elementj
+        apdSingle(element, c);
     }
 }
 function applyContent(element, content) {
@@ -184,7 +201,7 @@ function applyContent(element, content) {
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.9.0 (Last Update: 2025.12.29 11:09:49.983)
+ * @version 0.10.1 (Last Update: 2025.12.30 14:45:59.803)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -193,7 +210,7 @@ function applyContent(element, content) {
  */
 const h = ((tag, attr = '', content = '') => {
     if (typeof tag !== 'string') {
-        $throw('__func__ tagName must be a string.');
+        $throw('tagName must be a string.');
     }
     // * start creating the element
     const element = document.createElement(tag);
@@ -237,13 +254,12 @@ function jsx(tag, props, ..._metadata) {
 /**
  * Fragment support - returns an array of children
  * Note: kt.js doesn't have a real Fragment concept,
- * so we return ktnull for empty fragments or flatten children
  */
 function Fragment(props) {
     window.__ktjs__.throws("kt.js doesn't have a Fragment concept");
     // const { children } = props || {};
     // if (!children) {
-    //   return ktnull;
+    //   return ;
     // }
     // // If single child, return it directly
     // if (!Array.isArray(children)) {
@@ -254,13 +270,11 @@ function Fragment(props) {
     // const wrapper = document.createElement('div');
     // wrapper.setAttribute('data-kt-fragment', 'true');
     // children.forEach((child) => {
-    //   if (child && child !== ktnull) {
     //     if (typeof child === 'string') {
     //       wrapper.appendChild(document.createTextNode(child));
     //     } else if (child instanceof HTMLElement) {
     //       wrapper.appendChild(child);
     //     }
-    //   }
     // });
     // return wrapper;
 }
@@ -268,8 +282,8 @@ function Fragment(props) {
  * JSX Development runtime - same as jsx but with additional dev checks
  */
 const jsxDEV = (...args) => {
-    console.log('JSX DEV called:', ...args);
-    console.log('chilren', args[1]?.children);
+    // console.log('JSX DEV called:', ...args);
+    // console.log('children', (args[1] as any)?.children);
     return jsx(...args);
 };
 /**

package/package.json

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