kt.js 0.20.3 → 0.22.0

package/README.md

@@ -2,11 +2,7 @@
 
 [![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)
-
-## What's New (v0.19.x)
-
-- Release `0.19.0` (2026-01-31): build & packaging fixes, TypeScript and lint cleanups, MUI-focused fixes (JSX handling, `jsxImportSource` set to `@ktjs/core`, radio/checkbox/TextField fixes), and repo cleanup (removed alias detection, moved shared utilities into `shared`). See the full details in the CHANGELOG.
+[CHANGLOG✨](../../CHANGELOG.md)
 
 > 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!
 
@@ -21,6 +17,7 @@ KT.js is now a **monorepo** containing multiple packages:
 - **[kt.js](./packages/kt.js)**: Main entry package that re-exports all functionality
 - **[@ktjs/core](./packages/core)**: Core DOM manipulation utilities and the `h` function. SX/TSX support with full TypeScript integration (included in kt.js package)
 - **[@ktjs/router](./packages/router)**: Client-side routing with navigation guards (not included in kt.js package)
+- **[@ktjs/mui](./packages/mui)**: Material UI components built on top of KT.js (not included in kt.js package)
 
 You can install the full package or individual packages as needed:
 
@@ -28,10 +25,8 @@ You can install the full package or individual packages as needed:
 pnpm add kt.js
 
 # Or install individual packages
-pnpm add @ktjs/core       # Core DOM utilities (independent)
 pnpm add @ktjs/router     # Client-side router (requires @ktjs/core)
 pnpm add @ktjs/mui        # Material UI components (requires @ktjs/core)
-pnpm add @ktjs/shortcuts  # Shortcuts (requires @ktjs/core)
 ```
 
 ## Philosophy
@@ -40,78 +35,9 @@ As a web framework, repeatedly creating a large number of variables and objects
 
 KT.js follows one rule: **full control of DOM and avoid unnecessary repainting**.
 
-## Key Features
-
-- **Monorepo Architecture**: Modular packages that can be installed independently or together
-- **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 `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 `on:click` event handler syntax
-  - `redraw()` method for controlled component updates (v0.11+)
-  - `k-if` directive for conditional rendering (v0.14.6+)
-  - Array children support for seamless `.map()` integration (v0.14.1+)
-- **List Rendering**: Efficient list rendering with `KTFor` component (v0.16.0+)
-  - Comment anchor with `__kt_for_list__` array property
-  - Key-based DOM reuse for minimal updates
-  - Auto-appends list items when anchor added to parent
-- **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 only (simplified from v0.14.7+)
-  - Async navigation guards with Promise support
-  - Dynamic route parameters and query string parsing
-  - RouterView component for declarative routing
-  - Pure routing logic - no rendering, no dependencies
-- **Shortcuts & Utilities**:
-  - `withDefaults`: Wrap element creation functions with default properties
-  - Convenient shorthand functions for common operations
-  - Form helpers and layout utilities
-- **Full ES5 Compatibility**: Works in IE9+ and all modern browsers
-  - Transpiled to ES5 with no modern syntax
-  - Optional minimal Promise polyfill for older environments
-- **Shared Runtime**: Efficient code sharing across packages with zero overhead
-
-## Getting started
-
-Install via package managers:
-
-```bash
-npm install kt.js
-# or
-pnpm add kt.js
-```
-
-```ts
-import { h, div } from 'kt.js';
-
-const container = div('container', [div('header'), div('body', 'something'), div('footer')]);
-const app = h('section', { id: 'app' }, container);
-```
-
-This will create the following DOM structure:
-
-```html
-<section id="app">
-  <div class="container">
-    <div class="header"></div>
-    <div class="body">something</div>
-    <div class="footer"></div>
-  </div>
-</section>
-```
-
-### Using JSX/TSX
-
-KT.js now has full JSX support! With the `@ktjs/jsx` package (included in the main `kt.js` package), you can write components using familiar JSX syntax:
+## Configuration
 
-**TypeScript Configuration** (`tsconfig.json`):
+for TSX/JSX support, add this to your `tsconfig.json`:
 
 ```json
 {
@@ -122,332 +48,193 @@ KT.js now has full JSX support! With the `@ktjs/jsx` package (included in the ma
 }
 ```
 
-**Basic JSX Example**:
-
-```tsx
-import { jsx } from 'kt.js';
-
-function Counter() {
-  const count = 0;
+## Core Features (@ktjs/core)
 
-  return (
-    <div class="counter">
-      <h1>Counter: {count}</h1>
-      <button on:click={() => console.log('Clicked!')}>Increment</button>
-    </div>
-  );
-}
-
-// JSX compiles to direct h() function calls - no virtual DOM!
-const counterElement = <Counter />;
-```
+### JSX/TSX Support
 
-**Event Handling with @ Syntax**:
+KT.js provides first-class JSX/TSX support with zero virtual DOM overhead. JSX compiles directly to `h()` function calls.
 
 ```tsx
-function App() {
-  const handleClick = () => alert('Button clicked!');
+// Function components
+const Button = ({ onClick, children }) => (
+  <button on:click={onClick} class="btn">
+    {children}
+  </button>
+);
 
-  return (
-    <div>
-      <button on:click={handleClick}>Click me</button>
+// Conditional rendering with k-if
+const UserCard = ({ user, showDetails }) => (
+  <div class="card">
+    <h3>{user.name}</h3>
+    <div k-if={showDetails}>
+      <p>Email: {user.email}</p>
+      <p>Role: {user.role}</p>
     </div>
-  );
-}
-```
-
-**Type Safety**:
-
-```tsx
-// TypeScript knows this is an HTMLButtonElement
-const button: HTMLButtonElement = <button>Click</button>;
+  </div>
+);
 
-// TypeScript knows this is an HTMLInputElement
-const input: HTMLInputElement = <input type="text" value="hello" />;
+// List rendering with KTFor
+const UserList = ({ users }) => <KTFor list={users} key={(user) => user.id} map={(user) => <UserCard user={user} />} />;
 
-// TypeScript provides autocomplete for HTML attributes
-const div: HTMLDivElement = <div className="container" id="main" />;
+// Async components
+const AsyncContent = async () => {
+  const data = await fetchData();
+  return <div>{data}</div>;
+};
 ```
 
-**Important Notes**:
+### Directives
 
-- KT.js JSX has **no Fragment support** - we don't have a Fragment concept
-- JSX compiles directly to `h()` function calls - **zero virtual DOM overhead**
-- Use `on:click` syntax for event handlers to avoid conflicts with existing attributes
-- All JSX elements have proper HTML element type inference in TypeScript
-- Use `k-if` attribute for conditional rendering (v0.14.6+)
-- Children can be arrays for easy `.map()` integration (v0.14.1+)
-
-**Conditional Rendering with k-if** (v0.14.6+):
+#### `k-if`: Conditional rendering.
 
 ```tsx
-import { jsx } from 'kt.js';
-
-function UserProfile({ user, isLoggedIn }: { user: any; isLoggedIn: boolean }) {
-  return (
-    <div>
-      <h1>Profile</h1>
-      {/* Element only created if condition is true */}
-      <div k-if={isLoggedIn}>
-        <p>Welcome, {user.name}!</p>
-        <button>Logout</button>
-      </div>
-      {/* Element only created if condition is true */}
-      <div k-if={!isLoggedIn}>
-        <p>Please log in</p>
-        <button>Login</button>
-      </div>
-    </div>
-  );
-}
+<div k-if={condition}>This will render only if condition is true.</div>
 ```
 
-**Array Children Support** (v0.14.1+):
-
-```tsx
-import { jsx } from 'kt.js';
-
-function TodoList({ todos }: { todos: string[] }) {
-  return (
-    <div>
-      <h2>Todo List</h2>
-      <ul>
-        {/* Map arrays directly as children */}
-        {todos.map((todo) => (
-          <li>{todo}</li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-// Mix mapped elements with other elements
-function MixedList({ items }: { items: string[] }) {
-  return (
-    <ul>
-      <li>Header Item</li>
-      {items.map((item) => (
-        <li>{item}</li>
-      ))}
-      <li>Footer Item</li>
-    </ul>
-  );
-}
-```
+If a `ref` instance is bound, the element will automatically redraw on changes.
 
-### Async Components with KTAsync
+#### `k-model`: Two-way data binding for form elements.
 
-KT.js provides built-in support for async components through the `KTAsync` component:
+Must bind to a `ref` instance.
 
 ```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>
-    ));
-};
+import { ref } from 'kt.js';
+const name = ref('');
 
-// Use KTAsync to handle the async component
-function App() {
+function NameInput() {
   return (
-    <div class="app">
-      <h1>User Profile</h1>
-      <KTAsync component={AsyncUserCard} />
+    <div>
+      <input type="text" k-model={name} />
     </div>
   );
 }
 
-// The component starts with a placeholder comment node
-// When the Promise resolves, it automatically replaces with the actual element
+name.value = 'New Name'; // Updates input value
 ```
 
-**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
+### CreateRedrawable
 
-**Example with dynamic updates:**
+Create redrawable components with `createRedrawable()`.
 
 ```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>
-);
+import { createRedrawable } from '@ktjs/core';
+let text = 'aa';
+const el = createRedrawable(() => <div>{text}</div>);
+// el is now `<div>aa</div>`
+text = 'bb';
+el.redraw();
+// el is now `<div>bb</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:
+### Reactive References
 
-```ts
-const button = btn(
-  {
-    dblclick: '22',
-    'on:dblclick': function trueHandler() {
-      /* ... */
-    },
-  },
-  'Click me',
-);
+Create reactive values with `ref()` and listen to changes.
 
-// This is equivalent to:
-const button = btn(undefined, 'Click me');
-button.setAttribute('dblclick', '22');
-button.addEventListener('click', () => alert('Clicked!'));
-button.addEventListener('dblclick', function trueHandler() {
-  /* ... */
-});
-```
+```typescript
+import { ref } from '@ktjs/core';
 
-### Working with CSS-in-JS Libraries
+const count = ref(0);
+count.addOnChange((newVal, oldVal) => {
+  console.log(`Count changed from ${oldVal} to ${newVal}`);
+});
 
-KT.js works seamlessly with CSS-in-JS libraries like `@emotion/css`:
+// Update triggers change listeners
+count.value = 1;
+```
 
-```ts
-import { css } from '@emotion/css';
-import { h, div } from 'kt.js';
+#### Surface Reactive Objects
 
-const className = css`
-  color: red;
-  font-size: 20px;
-`;
+Create depth-1 reactive objects with `surfaceRef()`.
+Basically a helper of wrapping each property with `ref()`.
 
-// Pass class name as attribute
-h('div', { class: className }, 'Styled text');
+```tsx
+const obj = surfaceRef({ a: 1, b: 2 });
+obj.a.value = 3; // Triggers change listeners for obj.a
 
-// Or as the first string argument
-div(className, 'Styled text');
+const data = obj.kcollect(); // Deref to the original object { a: 3, b: 2 }
 ```
 
-### Using Shortcuts with Default Values
-
-The `withDefaults` function allows you to create element factories with predefined properties:
+### Redraw Mechanism
 
-```ts
-import { withDefaults, div, button } from 'kt.js';
+`<KTFor... />` elements in-place with `redraw()` for minimal DOM updates.
 
-// Create a styled div factory
-const card = withDefaults(div, { class: 'card' });
-const blueCard = withDefaults(card, { style: 'background: blue' });
-
-// Use them
-const myCard = card('card-body', 'Content'); // <div class="card"><div class="card-body">Content</div></div>
-const myBlueCard = blueCard('title', 'Blue!'); // <div class="card" style="background: blue"><div class="title">Blue!</div></div>
+```tsx
+const element = <KTFor list={someArray} map={(v) => 2 * v} />;
+element.redraw({ list: [1, 2, 3] });
 ```
 
-## Router
+## Router (@ktjs/router)
+
+Client-side hash-based routing with async navigation guards.
 
-The router is available as a separate package `@ktjs/router`:
+### Basic Routing
 
-```ts
+```typescript
 import { createRouter } from '@ktjs/router';
-import { div, h1 } from 'kt.js';
 
 const router = createRouter({
   routes: [
     {
       path: '/',
       name: 'home',
-      beforeEnter: (to) => {
-        // Render your page here
-        document.getElementById('app')!.innerHTML = '';
-        document.getElementById('app')!.appendChild(div({}, [h1({}, 'Home Page')]));
-      },
+      component: () => <HomePage />
     },
     {
       path: '/user/:id',
       name: 'user',
-      beforeEnter: (to) => {
-        // Route-specific guard and rendering
-        console.log('Entering user page');
-        document.getElementById('app')!.innerHTML = '';
-        document.getElementById('app')!.appendChild(div({}, [h1({}, `User ${to.params.id}`)]));
-        return true;
-      },
-    },
+      component: (to) => <UserPage id={to.params.id} />
+    }
   ],
   beforeEach: async (to, from) => {
-    // Global navigation guard - return false to block navigation
-    console.log('Navigating to:', to.path);
-    return true;
-  },
-  afterEach: (to) => {
-    // Called after successful navigation
-    document.title = to.name || to.path;
-  },
-  onError: (error) => {
-    console.error('Router error:', error);
-  },
+    // Auth check
+    if (to.path === '/admin' && !isAdmin()) {
+      return '/login';
+    }
+  }
 });
+```
 
-// Navigate programmatically
-router.push('/user/123');
-router.push('/user/456?page=2');
+### Navigation
 
-// Navigate by route name
-router.push({ name: 'user', params: { id: '789' } });
+```typescript
+// Programmatic navigation
+router.push('/user/123');
+router.push({ name: 'user', params: { id: '456' } });
 
-// Get current route
-console.log(router.current?.path, router.current?.params, router.current?.query);
+// Access current route
+console.log(router.current?.path, router.current?.params);
 ```
 
-### Router Features
-
-- **Hash-based Routing Only** (v0.14.7+): Uses URL hash for client-side navigation (`#/path`)
-- **Dynamic Parameters**: Support for dynamic route segments (`/user/:id`)
-- **Query Strings**: Automatic parsing of query parameters (`?key=value`)
-- **Named Routes**: Navigate using route names instead of paths
-- **Async Navigation Guards**:
-  - `beforeEach`: Global guard before navigation (async)
-  - `beforeEnter`: Per-route guard (can also be used for rendering, async)
-  - `afterEach`: Global hook after navigation
-  - All guards support Promise-based async operations
-  - Guards can return `false` to cancel, string/object to redirect
-  - `GuardLevel` for fine-grained control over guard execution
-- **Error Handling**: `onError` and `onNotFound` callbacks
-- **Optimized Performance**: Pre-flattened routes and efficient matching algorithm
-- **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
-- **Automatic Initialization**: Router auto-initializes on creation (v0.14.7+)
+## Installation
 
-## Browser Compatibility
+```bash
+# Full package (includes core)
+pnpm add kt.js
 
-KT.js is transpiled to ES5 and works in all modern browsers as well as legacy browsers including IE9+.
+# Individual packages
+pnpm add @ktjs/core @ktjs/router
+```
 
-### Promise Polyfill
+## TypeScript Configuration
 
-For environments without native `Promise` support (like IE).
+For JSX/TSX support, configure your `tsconfig.json`:
 
-```js
-import 'some promise polyfill'; // Will fallback to sync version if Promise is not available
-import { h, div, createRouter } from 'kt.js';
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@ktjs/core"
+  }
+}
 ```
 
+## Philosophy
+
+- **Direct DOM Manipulation**: No virtual DOM, minimal abstraction
+- **Zero Re-renders**: Update only what changes, avoid full component re-renders
+- **Type Safety**: Full TypeScript support with accurate type inference
+- **Lightweight**: Small bundle size, no unnecessary dependencies
+
 ## License
 
 MIT

package/dist/jsx-runtime.mjs

@@ -6,9 +6,6 @@ const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then
 const $throw = (message) => {
     throw new Error('@ktjs/shared: ' + message);
 };
-
-// DOM manipulation utilities
-// # dom natives
 /**
  * & Remove `bind` because it is shockingly slower than wrapper
  * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -48,7 +45,73 @@ const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwn
 
 // Shared utilities and cached native methods for kt.js framework
 // Re-export all utilities
-Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
+Object.defineProperty(window, '@ktjs/shared', { value: '0.20.2' });
+
+class KTRef {
+    /**
+     * Indicates that this is a KTRef instance
+     */
+    isKT = true;
+    /**
+     * @internal
+     */
+    _value;
+    /**
+     * @internal
+     */
+    _onChanges;
+    constructor(_value, _onChanges) {
+        this._value = _value;
+        this._onChanges = _onChanges;
+    }
+    /**
+     * If new value and old value are both nodes, the old one will be replaced in the DOM
+     */
+    get value() {
+        return this._value;
+    }
+    set value(newValue) {
+        if (newValue === this._value) {
+            return;
+        }
+        // replace the old node with the new one in the DOM if both are nodes
+        if (this._value instanceof Node && newValue instanceof Node) {
+            if (newValue.contains(this._value)) {
+                this._value.remove();
+            }
+            this._value.replaceWith(newValue);
+        }
+        const oldValue = this._value;
+        this._value = newValue;
+        for (let i = 0; i < this._onChanges.length; i++) {
+            this._onChanges[i](newValue, oldValue);
+        }
+    }
+    addOnChange(callback) {
+        this._onChanges.push(callback);
+    }
+    removeOnChange(callback) {
+        for (let i = this._onChanges.length - 1; i >= 0; i--) {
+            if (this._onChanges[i] === callback) {
+                this._onChanges.splice(i, 1);
+                return true;
+            }
+        }
+        return false;
+    }
+}
+const isKTRef = (obj) => {
+    return typeof obj === 'object' && obj !== null && obj.isKT === true;
+};
+/**
+ * Reference to the created HTML element.
+ * - **Only** respond to `ref.value` changes, not reactive to internal changes of the element.
+ * - can alse be used to store normal values, but it is not reactive.
+ * @param value mostly an HTMLElement
+ */
+function ref(value, onChange) {
+    return new KTRef(value, []);
+}
 
 const booleanHandler = (element, key, value) => {
     if (key in element) {
@@ -114,6 +177,7 @@ function attrIsObject(element, attr) {
             key === 'style' ||
             key === 'children' ||
             key === 'k-if' ||
+            key.startsWith('k-model') ||
             key === 'ref') {
             continue;
         }
@@ -191,7 +255,29 @@ function applyContent(element, content) {
     }
 }
 
-document.createElement('div');
+function register(element, valueRef, propName, eventName) {
+    element[propName] = valueRef.value; // initialize
+    valueRef.addOnChange((newValue) => (element[propName] = newValue));
+    element.addEventListener(eventName, () => (valueRef.value = element[propName]));
+}
+function applyModel(element, valueRef) {
+    if (element instanceof HTMLInputElement) {
+        if (element.type === 'radio' || element.type === 'checkbox') {
+            register(element, valueRef, 'checked', 'change');
+        }
+        else {
+            register(element, valueRef, 'value', 'input');
+        }
+    }
+    else if (element instanceof HTMLSelectElement) {
+        register(element, valueRef, 'value', 'change');
+    }
+    else if (element instanceof HTMLTextAreaElement) {
+        register(element, valueRef, 'value', 'input');
+    }
+    console.warn('[kt.js warn] not supported element for k-model:', element.tagName);
+}
+
 const htmlCreator = (tag) => document.createElement(tag);
 const svgCreator = (tag) => document.createElementNS('http://www.w3.org/2000/svg', tag);
 const mathMLCreator = (tag) => document.createElementNS('http://www.w3.org/1998/Math/MathML', tag);
@@ -209,7 +295,7 @@ const MATHML_ATTR_FLAG = '__kt_mathml__';
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.20.3 (Last Update: 2026.02.01 18:38:02.198)
+ * @version 0.22.0 (Last Update: 2026.02.02 17:11:04.703)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -238,101 +324,60 @@ const h = (tag, attr, content) => {
     // * Handle content
     applyAttr(element, attr);
     applyContent(element, content);
-    // if (tag === 'svg') {
-    //   tempWrapper.innerHTML = element.outerHTML;
-    //   return tempWrapper.firstChild as HTML<T>;
-    // }
-    // if (tag === 'math') {
-    //   tempWrapper.innerHTML = element.outerHTML;
-    //   return tempWrapper.firstChild as HTML<T>;
-    // }
-    return element;
-};
-
-class KTRef {
-    /**
-     * Indicates that this is a KTRef instance
-     */
-    isKT = true;
-    /**
-     * @internal
-     */
-    _value;
-    /**
-     * @internal
-     */
-    _onChanges;
-    constructor(_value, _onChanges) {
-        this._value = _value;
-        this._onChanges = _onChanges;
-    }
-    /**
-     * If new value and old value are both nodes, the old one will be replaced in the DOM
-     */
-    get value() {
-        return this._value;
-    }
-    set value(newValue) {
-        if (newValue === this._value) {
-            return;
+    if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
+        const kmodel = attr['k-model'];
+        if (isKTRef(kmodel)) {
+            applyModel(element, kmodel);
         }
-        // replace the old node with the new one in the DOM if both are nodes
-        if (this._value instanceof Node && newValue instanceof Node) {
-            if (newValue.contains(this._value)) {
-                this._value.remove();
-            }
-            this._value.replaceWith(newValue);
-        }
-        const oldValue = this._value;
-        this._value = newValue;
-        for (let i = 0; i < this._onChanges.length; i++) {
-            this._onChanges[i](newValue, oldValue);
-        }
-    }
-    addOnChange(callback) {
-        this._onChanges.push(callback);
-    }
-    removeOnChange(callback) {
-        for (let i = this._onChanges.length - 1; i >= 0; i--) {
-            if (this._onChanges[i] === callback) {
-                this._onChanges.splice(i, 1);
-                return true;
-            }
+        else {
+            $throw('k-model value must be a KTRef.');
         }
-        return false;
     }
-}
-/**
- * Reference to the created HTML element.
- * - can alse be used to store normal values, but it is not reactive.
- * @param value mostly an HTMLElement
- */
-function ref(value, onChange) {
-    return new KTRef(value, []);
-}
+    return element;
+};
 
 const dummyRef = { value: null };
+const create = (tag, props) => {
+    if (typeof tag === 'function') {
+        return tag(props);
+    }
+    else {
+        return h(tag, props, props.children);
+    }
+};
+const placeholder = () => document.createComment('k-if');
 /**
  * @param tag html tag or function component
  * @param props properties/attributes
  */
 function jsx(tag, props) {
-    const ref = props.ref?.isKT ? props.ref : dummyRef;
+    const maybeDummyRef = isKTRef(props.ref) ? props.ref : dummyRef;
     let el;
-    if ('k-if' in props && !props['k-if']) {
-        // & make comment placeholder in case that ref might be redrawn later
-        el = document.createComment('k-if');
-        ref.value = el;
-        return el;
-    }
-    // Handle function components
-    if (typeof tag === 'function') {
-        el = tag(props);
-    }
-    else {
-        el = h(tag, props, props.children);
+    if ('k-if' in props) {
+        const kif = props['k-if'];
+        let condition = kif; // assume boolean by default
+        // Handle reactive k-if
+        if (isKTRef(kif)) {
+            kif.addOnChange((newValue, oldValue) => {
+                if (newValue === oldValue) {
+                    return;
+                }
+                const oldEl = el;
+                el = newValue ? create(tag, props) : placeholder();
+                oldEl.replaceWith(el);
+                maybeDummyRef.value = el;
+            });
+            condition = kif.value;
+        }
+        if (!condition) {
+            // & make comment placeholder in case that ref might be redrawn later
+            el = placeholder();
+            maybeDummyRef.value = el;
+            return el;
+        }
     }
-    ref.value = el;
+    el = create(tag, props);
+    maybeDummyRef.value = el;
     return el;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kt.js",
-  "version": "0.20.3",
+  "version": "0.22.0",
   "author": {
     "name": "Kasukabe Tsumugi",
     "email": "futami16237@gmail.com"
@@ -41,7 +41,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@ktjs/core": "0.20.3"
+    "@ktjs/core": "0.22.0"
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",