@ktjs/jsx 0.6.14 → 0.6.16

package/README.md

@@ -14,7 +14,7 @@ Write UI code with JSX syntax while maintaining KT.js's philosophy of direct DOM
 - 🎯 **Direct DOM Manipulation**: JSX compiles to direct `h()` calls, no virtual DOM
 - 🔧 **Full TypeScript Support**: Complete type safety with IntelliSense
 - ⚡ **Zero Runtime Overhead**: JSX is pure syntax sugar over KT.js's `h` function
-- 🎨 **Event Handler Syntax**: Support for both function props and `@eventName` syntax
+- 🎨 **Event Handler Syntax**: Support for both function props and `on:eventName` syntax
 - 📦 **Multiple Runtime Modes**: Support both automatic and classic JSX transforms
 - 🔌 **Easy Integration**: Works with Babel, TypeScript, and modern build tools
 
@@ -67,7 +67,7 @@ const greeting = <div class="greeting">Hello, KT.js!</div>;
 const button = (
   <button
     class="btn primary"
-    @click={() => alert('Clicked!')}
+    on:click={() => alert('Clicked!')}
   >
     Click me
   </button>
@@ -97,13 +97,13 @@ You can use event handlers in two ways:
 // 1. Function props (automatically converted to event listeners)
 <button click={() => console.log('clicked')}>Button 1</button>
 
-// 2. @-prefixed attributes (explicit event handlers)
-<button @click={(e) => console.log('clicked', e)}>Button 2</button>
+// 2. on:-prefixed attributes (explicit event handlers)
+<button on:click={(e) => console.log('clicked', e)}>Button 2</button>
 
 // 3. Mix both (regular attribute + event listener)
 <input
   change="change-value"          // Regular attribute
-  @change={(e) => console.log(e)} // Event listener
+  on:change={(e) => console.log(e)} // Event listener
 />
 ```
 
@@ -240,7 +240,7 @@ const buttonStyle = css`
 `;
 
 const button = (
-  <button class={buttonStyle} @click={() => alert('Styled!')}>
+  <button class={buttonStyle} on:click={() => alert('Styled!')}>
     Styled Button
   </button>
 );
@@ -263,7 +263,7 @@ function Card({ title, content, onClose }: CardProps) {
       <div class="card-header">
         <h3>{title}</h3>
         {onClose && (
-          <button class="close" @click={onClose}>×</button>
+          <button class="close" on:click={onClose}>×</button>
         )}
       </div>
       <div class="card-body">
@@ -336,7 +336,7 @@ declare global {
 const app = (
   <div class="container">
     <h1>Hello</h1>
-    <button @click={() => alert('Hi')}>Click</button>
+    <button on:click={() => alert('Hi')}>Click</button>
   </div>
 );
 
@@ -345,7 +345,7 @@ import { h, div, button } from '@ktjs/core';
 
 const app = div({ class: 'container' }, [
   h('h1', {}, 'Hello'),
-  button({ '@click': () => alert('Hi') }, 'Click')
+  button({ 'on:click': () => alert('Hi') }, 'Click')
 ]);
 ```
 

package/dist/index.cjs

@@ -1 +1,120 @@
-"use strict";var e=require("@ktjs/core");function t(t,n,...r){const o="string"==typeof n?{class:n}:n;if(null==o)return e.h(t);const s=o.children;delete o.children;const c="ref"in o&&"object"==typeof o.ref&&null!==o.ref,u=c?o.ref:null;c&&delete o.ref;const l=e.h(t,o,s);return c&&(u.value=l),l}const n=t,r=t;Object.defineProperty(exports,"createElement",{enumerable:!0,get:function(){return e.h}}),Object.defineProperty(exports,"h",{enumerable:!0,get:function(){return e.h}}),exports.Fragment=function(e){window.__ktjs__.throws("kt.js doesn't have a Fragment concept")},exports.jsx=t,exports.jsxDEV=n,exports.jsxs=r,exports.ref=function(){return{value:null}};
+'use strict';
+
+var core = require('@ktjs/core');
+
+/**
+ * @param tag html tag
+ * @param props properties/attributes
+ * @param _metadata metadata is ignored
+ */
+function jsx(tag, props, ..._metadata) {
+    const propObj = typeof props === 'string' ? { class: props } : props;
+    if (propObj === undefined || propObj === null) {
+        return core.h(tag);
+    }
+    const children = propObj.children;
+    delete propObj.children;
+    // deal with ref attribute
+    const hasRef = 'ref' in propObj && typeof propObj.ref === 'object' && propObj.ref !== null;
+    const ref = hasRef ? propObj.ref : null;
+    if (hasRef) {
+        delete propObj.ref;
+    }
+    const el = core.h(tag, propObj, children);
+    if (hasRef) {
+        ref.value = el;
+    }
+    return el;
+}
+/**
+ * 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;
+    // }
+    // // If single child, return it directly
+    // if (!Array.isArray(children)) {
+    //   return children as HTMLElement;
+    // }
+    // // For multiple children, create a document fragment wrapper
+    // // This is a limitation - JSX fragments must be wrapped in kt.js
+    // 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;
+}
+/**
+ * JSX Development runtime - same as jsx but with additional dev checks
+ */
+const jsxDEV = (...args) => {
+    console.log('JSX runtime called:', ...args);
+    return jsx(...args);
+};
+/**
+ * JSX runtime for React 17+ automatic runtime
+ * This is called when using jsx: "react-jsx" or "react-jsxdev"
+ */
+const jsxs = jsx;
+
+/**
+ * @ktjs/jsx - JSX/TSX support for KT.js
+ *
+ * This package provides JSX transformation support for KT.js,
+ * allowing you to write UI code with JSX syntax while maintaining
+ * the direct DOM manipulation philosophy of KT.js.
+ *
+ * @example
+ * ```tsx
+ * import { h } from '@ktjs/jsx';
+ *
+ * const App = (
+ *   <div class="app">
+ *     <h1>Hello KT.js with JSX!</h1>
+ *     <button @click={() => alert('Clicked!')}>
+ *       Click me
+ *     </button>
+ *   </div>
+ * );
+ * ```
+ *
+ * ## About
+ * @package @ktjs/jsx
+ * @author Kasukabe Tsumugi <futami16237@gmail.com>
+ * @version 0.6.16 (Last Update: 2025.12.24 22:11:08.516)
+ * @license MIT
+ * @link https://github.com/baendlorel/kt.js
+ * @link https://baendlorel.github.io/ Welcome to my site!
+ * @description JSX/TSX support for KT.js - Build UIs with JSX syntax while keeping direct DOM control
+ * @copyright Copyright (c) 2025 Kasukabe Tsumugi. All rights reserved.
+ */
+// Export JSX runtime functions
+function ref() {
+    return { value: null };
+}
+
+Object.defineProperty(exports, "createElement", {
+    enumerable: true,
+    get: function () { return core.h; }
+});
+Object.defineProperty(exports, "h", {
+    enumerable: true,
+    get: function () { return core.h; }
+});
+exports.Fragment = Fragment;
+exports.jsx = jsx;
+exports.jsxDEV = jsxDEV;
+exports.jsxs = jsxs;
+exports.ref = ref;

package/dist/index.d.ts

@@ -68,7 +68,7 @@ declare global {
  * ## About
  * @package @ktjs/jsx
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.6.14 (Last Update: 2025.12.24 21:43:46.263)
+ * @version 0.6.16 (Last Update: 2025.12.24 22:11:08.516)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!

package/dist/index.mjs

@@ -1 +1,107 @@
-import{h as t}from"@ktjs/core";export{h as createElement,h}from"@ktjs/core";function e(e,n,...o){const r="string"==typeof n?{class:n}:n;if(null==r)return t(e);const c=r.children;delete r.children;const l="ref"in r&&"object"==typeof r.ref&&null!==r.ref,s=l?r.ref:null;l&&delete r.ref;const u=t(e,r,c);return l&&(s.value=u),u}function n(t){window.__ktjs__.throws("kt.js doesn't have a Fragment concept")}const o=e,r=e;function c(){return{value:null}}export{n as Fragment,e as jsx,o as jsxDEV,r as jsxs,c as ref};
+import { h } from '@ktjs/core';
+export { h as createElement, h } from '@ktjs/core';
+
+/**
+ * @param tag html tag
+ * @param props properties/attributes
+ * @param _metadata metadata is ignored
+ */
+function jsx(tag, props, ..._metadata) {
+    const propObj = typeof props === 'string' ? { class: props } : props;
+    if (propObj === undefined || propObj === null) {
+        return h(tag);
+    }
+    const children = propObj.children;
+    delete propObj.children;
+    // deal with ref attribute
+    const hasRef = 'ref' in propObj && typeof propObj.ref === 'object' && propObj.ref !== null;
+    const ref = hasRef ? propObj.ref : null;
+    if (hasRef) {
+        delete propObj.ref;
+    }
+    const el = h(tag, propObj, children);
+    if (hasRef) {
+        ref.value = el;
+    }
+    return el;
+}
+/**
+ * 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;
+    // }
+    // // If single child, return it directly
+    // if (!Array.isArray(children)) {
+    //   return children as HTMLElement;
+    // }
+    // // For multiple children, create a document fragment wrapper
+    // // This is a limitation - JSX fragments must be wrapped in kt.js
+    // 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;
+}
+/**
+ * JSX Development runtime - same as jsx but with additional dev checks
+ */
+const jsxDEV = (...args) => {
+    console.log('JSX runtime called:', ...args);
+    return jsx(...args);
+};
+/**
+ * JSX runtime for React 17+ automatic runtime
+ * This is called when using jsx: "react-jsx" or "react-jsxdev"
+ */
+const jsxs = jsx;
+
+/**
+ * @ktjs/jsx - JSX/TSX support for KT.js
+ *
+ * This package provides JSX transformation support for KT.js,
+ * allowing you to write UI code with JSX syntax while maintaining
+ * the direct DOM manipulation philosophy of KT.js.
+ *
+ * @example
+ * ```tsx
+ * import { h } from '@ktjs/jsx';
+ *
+ * const App = (
+ *   <div class="app">
+ *     <h1>Hello KT.js with JSX!</h1>
+ *     <button @click={() => alert('Clicked!')}>
+ *       Click me
+ *     </button>
+ *   </div>
+ * );
+ * ```
+ *
+ * ## About
+ * @package @ktjs/jsx
+ * @author Kasukabe Tsumugi <futami16237@gmail.com>
+ * @version 0.6.16 (Last Update: 2025.12.24 22:11:08.516)
+ * @license MIT
+ * @link https://github.com/baendlorel/kt.js
+ * @link https://baendlorel.github.io/ Welcome to my site!
+ * @description JSX/TSX support for KT.js - Build UIs with JSX syntax while keeping direct DOM control
+ * @copyright Copyright (c) 2025 Kasukabe Tsumugi. All rights reserved.
+ */
+// Export JSX runtime functions
+function ref() {
+    return { value: null };
+}
+
+export { Fragment, jsx, jsxDEV, jsxs, ref };

package/dist/jsx-runtime.cjs

@@ -8,7 +8,6 @@ var core = require('@ktjs/core');
  * @param _metadata metadata is ignored
  */
 function jsx(tag, props, ..._metadata) {
-    console.log('JSX runtime called:', tag, props, _metadata);
     const propObj = typeof props === 'string' ? { class: props } : props;
     if (propObj === undefined || propObj === null) {
         return core.h(tag);
@@ -60,7 +59,10 @@ function Fragment(props) {
 /**
  * JSX Development runtime - same as jsx but with additional dev checks
  */
-const jsxDEV = jsx;
+const jsxDEV = (...args) => {
+    console.log('JSX runtime called:', ...args);
+    return jsx(...args);
+};
 /**
  * JSX runtime for React 17+ automatic runtime
  * This is called when using jsx: "react-jsx" or "react-jsxdev"

package/dist/jsx-runtime.mjs

@@ -7,7 +7,6 @@ export { h as createElement, h } from '@ktjs/core';
  * @param _metadata metadata is ignored
  */
 function jsx(tag, props, ..._metadata) {
-    console.log('JSX runtime called:', tag, props, _metadata);
     const propObj = typeof props === 'string' ? { class: props } : props;
     if (propObj === undefined || propObj === null) {
         return h(tag);
@@ -59,7 +58,10 @@ function Fragment(props) {
 /**
  * JSX Development runtime - same as jsx but with additional dev checks
  */
-const jsxDEV = jsx;
+const jsxDEV = (...args) => {
+    console.log('JSX runtime called:', ...args);
+    return jsx(...args);
+};
 /**
  * JSX runtime for React 17+ automatic runtime
  * This is called when using jsx: "react-jsx" or "react-jsxdev"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/jsx",
-  "version": "0.6.14",
+  "version": "0.6.16",
   "description": "JSX/TSX support for KT.js - Build UIs with JSX syntax while keeping direct DOM control",
   "author": {
     "name": "Kasukabe Tsumugi",