@ktjs/jsx 0.6.15 → 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

@@ -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"
@@ -91,7 +93,7 @@ const jsxs = jsx;
  * ## About
  * @package @ktjs/jsx
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.6.15 (Last Update: 2025.12.24 21:47:29.087)
+ * @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.d.ts

@@ -68,7 +68,7 @@ declare global {
  * ## About
  * @package @ktjs/jsx
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.6.15 (Last Update: 2025.12.24 21:47:29.087)
+ * @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

@@ -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"
@@ -90,7 +92,7 @@ const jsxs = jsx;
  * ## About
  * @package @ktjs/jsx
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.6.15 (Last Update: 2025.12.24 21:47:29.087)
+ * @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/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.15",
+  "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",