@ktjs/core 0.18.1 → 0.18.3

package/dist/index.d.ts

@@ -21,7 +21,7 @@ interface KTRef<T> {
  * - can alse be used to store normal values, but it is not reactive.
  * @param value mostly an HTMLElement
  */
-declare function ref<T = HTMLElement>(value?: T): KTRef<T>;
+declare function ref<T = HTMLElement>(value?: T, onChange?: ChangeHandler<T>): KTRef<T>;
 
 type Redraw = (props?: KTAttribute, ...args: any[]) => KTHTMLElement;
 type KTHTMLElement<El extends HTMLElement = HTMLElement, R extends Function = Redraw> = El & {
@@ -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.1 (Last Update: 2026.01.30 21:24:36.481)
+ * @version 0.18.3 (Last Update: 2026.01.30 23:10:27.447)
  * @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.1 (Last Update: 2026.01.30 21:24:36.481)
+     * @version 0.18.3 (Last Update: 2026.01.30 23:10:27.447)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -243,9 +243,9 @@ var __ktjs_core__ = (function (exports) {
      * - can alse be used to store normal values, but it is not reactive.
      * @param value mostly an HTMLElement
      */
-    function ref(value) {
+    function ref(value, onChange) {
         let _value = value;
-        let _onChanges = [];
+        let _onChanges = onChange ? [onChange] : [];
         return {
             isKT: true,
             get value() {
@@ -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.1 (Last Update: 2026.01.30 21:24:36.481)
+     * @version 0.18.3 (Last Update: 2026.01.30 23:10:27.447)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -301,9 +301,9 @@ var __ktjs_core__ = (function (exports) {
      * - can alse be used to store normal values, but it is not reactive.
      * @param value mostly an HTMLElement
      */
-    function ref(value) {
+    function ref(value, onChange) {
         var _value = value;
-        var _onChanges = [];
+        var _onChanges = onChange ? [onChange] : [];
         return {
             isKT: true,
             get value() {
@@ -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.1 (Last Update: 2026.01.30 21:24:36.481)
+ * @version 0.18.3 (Last Update: 2026.01.30 23:10:27.447)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -240,9 +240,9 @@ const h = (tag, attr, content) => {
  * - can alse be used to store normal values, but it is not reactive.
  * @param value mostly an HTMLElement
  */
-function ref(value) {
+function ref(value, onChange) {
     let _value = value;
-    let _onChanges = [];
+    let _onChanges = onChange ? [onChange] : [];
     return {
         isKT: true,
         get value() {
@@ -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

@@ -21,7 +21,7 @@ interface KTRef<T> {
  * - can alse be used to store normal values, but it is not reactive.
  * @param value mostly an HTMLElement
  */
-declare function ref<T = HTMLElement>(value?: T): KTRef<T>;
+declare function ref<T = HTMLElement>(value?: T, onChange?: ChangeHandler<T>): KTRef<T>;
 
 type Redraw = (props?: KTAttribute, ...args: any[]) => KTHTMLElement;
 type KTHTMLElement<El extends HTMLElement = HTMLElement, R extends Function = Redraw> = El & {
@@ -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.1 (Last Update: 2026.01.30 21:24:36.481)
+ * @version 0.18.3 (Last Update: 2026.01.30 23:10:27.447)
  * @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.1 (Last Update: 2026.01.30 21:24:36.481)
+ * @version 0.18.3 (Last Update: 2026.01.30 23:10:27.447)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -240,9 +240,9 @@ const h = (tag, attr, content) => {
  * - can alse be used to store normal values, but it is not reactive.
  * @param value mostly an HTMLElement
  */
-function ref(value) {
+function ref(value, onChange) {
     let _value = value;
-    let _onChanges = [];
+    let _onChanges = onChange ? [onChange] : [];
     return {
         isKT: true,
         get value() {
@@ -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.1 (Last Update: 2026.01.30 21:24:36.481)
+ * @version 0.18.3 (Last Update: 2026.01.30 23:10:27.447)
  * @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.1 (Last Update: 2026.01.30 21:24:36.481)
+ * @version 0.18.3 (Last Update: 2026.01.30 23:10:27.447)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -240,7 +240,7 @@ const h = (tag, attr, content) => {
  * - can alse be used to store normal values, but it is not reactive.
  * @param value mostly an HTMLElement
  */
-function ref(value) {
+function ref(value, onChange) {
     let _value = value;
     let _onChanges = [];
     return {
@@ -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.1",
+  "version": "0.18.3",
   "description": "Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support",
   "type": "module",
   "module": "./dist/index.mjs",