@ktjs/core 0.18.0 → 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/index.d.ts

@@ -178,7 +178,7 @@ type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGEl
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.18.0 (Last Update: 2026.01.30 21:16:15.994)
+ * @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!
@@ -197,7 +197,7 @@ declare function jsx(tag: JSXTag, props?: KTAttribute): KTHTMLElement;
  * Fragment support - returns an array of children
  * Note: kt.js doesn't have a real Fragment concept,
  */
-declare function Fragment(props: {
+declare function Fragment(_props: {
     children?: KTRawContent;
 }): HTMLElement;
 /**

package/dist/index.iife.js

@@ -215,7 +215,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.18.0 (Last Update: 2026.01.30 21:16:15.994)
+     * @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!
@@ -291,9 +291,10 @@ var __ktjs_core__ = (function (exports) {
         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']) {
@@ -317,7 +318,7 @@ var __ktjs_core__ = (function (exports) {
      * 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) {
@@ -397,9 +398,7 @@ var __ktjs_core__ = (function (exports) {
         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/dist/index.legacy.js

@@ -240,7 +240,7 @@ var __ktjs_core__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.18.0 (Last Update: 2026.01.30 21:16:15.994)
+     * @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!
@@ -351,9 +351,10 @@ var __ktjs_core__ = (function (exports) {
         var el;
         var redraw = function (newProps) {
             props = newProps ? __assign(__assign({}, props), newProps) : props;
-            var 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']) {
@@ -377,7 +378,7 @@ var __ktjs_core__ = (function (exports) {
      * 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) {
@@ -461,9 +462,7 @@ var __ktjs_core__ = (function (exports) {
         var elRef = ref();
         elRef.value = creator();
         var redraw = function () {
-            var 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/dist/index.mjs

@@ -212,7 +212,7 @@ const svgTempWrapper = document.createElement('div');
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.18.0 (Last Update: 2026.01.30 21:16:15.994)
+ * @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!
@@ -288,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']) {
@@ -314,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) {
@@ -394,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/dist/jsx/index.d.ts

@@ -164,7 +164,7 @@ type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGEl
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.18.0 (Last Update: 2026.01.30 21:16:15.994)
+ * @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!
@@ -183,7 +183,7 @@ declare function jsx(tag: JSXTag, props?: KTAttribute): KTHTMLElement;
  * Fragment support - returns an array of children
  * Note: kt.js doesn't have a real Fragment concept,
  */
-declare function Fragment(props: {
+declare function Fragment(_props: {
     children?: KTRawContent;
 }): HTMLElement;
 /**

package/dist/jsx/index.mjs

@@ -212,7 +212,7 @@ const svgTempWrapper = document.createElement('div');
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.18.0 (Last Update: 2026.01.30 21:16:15.994)
+ * @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!
@@ -288,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']) {
@@ -314,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) {
@@ -394,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/dist/jsx/jsx-runtime.d.ts

@@ -158,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.18.0 (Last Update: 2026.01.30 21:16:15.994)
+ * @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!
@@ -177,7 +177,7 @@ declare function jsx(tag: JSXTag, props?: KTAttribute): KTHTMLElement;
  * Fragment support - returns an array of children
  * Note: kt.js doesn't have a real Fragment concept,
  */
-declare function Fragment(props: {
+declare function Fragment(_props: {
     children?: KTRawContent;
 }): HTMLElement;
 /**

package/dist/jsx/jsx-runtime.mjs

@@ -212,7 +212,7 @@ const svgTempWrapper = document.createElement('div');
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.18.0 (Last Update: 2026.01.30 21:16:15.994)
+ * @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!
@@ -288,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']) {
@@ -314,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) {
@@ -394,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": "@ktjs/core",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support",
   "type": "module",
   "module": "./dist/index.mjs",