kt.js 0.17.4 → 0.18.2

package/README.md

@@ -12,7 +12,7 @@ Core DOM manipulation utilities for KT.js framework with built-in JSX/TSX suppor
 
 `@ktjs/core` is the foundation of KT.js, providing the essential `h` function and DOM utilities for building web applications with direct DOM manipulation. It emphasizes performance, type safety, and minimal abstraction over native DOM APIs.
 
-**Current Version:** 0.16.0
+**Current Version:** 0.18.1
 
 ## Features
 
@@ -42,6 +42,10 @@ Core DOM manipulation utilities for KT.js framework with built-in JSX/TSX suppor
   - Update props and children selectively
   - Efficient replacement strategy
   - Works with both native elements and function components
+- **Ref Enhancement**: Change event binding support for `ref` (v0.18.1)
+  - New methods `addOnChange` and `removeOnChange` for listening to value changes
+  - Automatically calls registered callbacks when `ref.value` is updated
+  - When both old and new values are DOM nodes, automatically replaces old node with new one in the DOM
 - **DOM Utilities**: Helper functions for common DOM operations
   - Native method caching for performance
   - Symbol-based private properties for internal state

package/dist/jsx-runtime.mjs

@@ -212,7 +212,7 @@ const svgTempWrapper = document.createElement('div');
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.17.4 (Last Update: 2026.01.29 13:40:17.223)
+ * @version 0.18.2 (Last Update: 2026.01.30 22:52:42.408)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -241,7 +241,41 @@ const h = (tag, attr, content) => {
  * @param value mostly an HTMLElement
  */
 function ref(value) {
-    return { value: value, isKT: true };
+    let _value = value;
+    let _onChanges = [];
+    return {
+        isKT: true,
+        get value() {
+            return _value;
+        },
+        set value(newValue) {
+            if (newValue === _value) {
+                return;
+            }
+            // replace the old node with the new one in the DOM if both are nodes
+            if (_value instanceof Node && newValue instanceof Node) {
+                if (newValue.contains(_value)) {
+                    _value.remove();
+                }
+                _value.replaceWith(newValue);
+            }
+            const oldValue = _value;
+            _value = newValue;
+            for (let i = 0; i < _onChanges.length; i++) {
+                _onChanges[i](newValue, oldValue);
+            }
+        },
+        addOnChange: (callback) => _onChanges.push(callback),
+        removeOnChange: (callback) => {
+            for (let i = _onChanges.length - 1; i >= 0; i--) {
+                if (_onChanges[i] === callback) {
+                    _onChanges.splice(i, 1);
+                    return true;
+                }
+            }
+            return false;
+        },
+    };
 }
 
 const dummyRef = { value: null };
@@ -254,9 +288,10 @@ function jsx(tag, props = {}) {
     let el;
     const redraw = (newProps) => {
         props = newProps ? { ...props, ...newProps } : props;
-        const old = el;
         el = jsx(tag, props);
-        old.replaceWith(el);
+        if (ref !== dummyRef) {
+            ref.value = el; // ref setter automatically replaces old element in DOM
+        }
         return el;
     };
     if ('k-if' in props && !props['k-if']) {
@@ -280,7 +315,7 @@ function jsx(tag, props = {}) {
  * Fragment support - returns an array of children
  * Note: kt.js doesn't have a real Fragment concept,
  */
-function Fragment(props) {
+function Fragment(_props) {
     throw new Error("kt.js doesn't have a Fragment concept");
     // const { children } = props ?? {};
     // if (!children) {
@@ -360,9 +395,7 @@ function createRedrawable(creator) {
     const elRef = ref();
     elRef.value = creator();
     const redraw = () => {
-        const old = elRef.value;
-        elRef.value = creator();
-        old.replaceWith(elRef.value);
+        elRef.value = creator(); // ref setter automatically calls replaceWith
         elRef.value.redraw = redraw;
         return elRef.value;
     };

package/package.json

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