@ktjs/jsx 0.6.14 → 0.6.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +118 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.mjs +105 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1 +1,118 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var core = require('@ktjs/core');
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @param tag html tag
|
|
7
|
+
* @param props properties/attributes
|
|
8
|
+
* @param _metadata metadata is ignored
|
|
9
|
+
*/
|
|
10
|
+
function jsx(tag, props, ..._metadata) {
|
|
11
|
+
console.log('JSX runtime called:', tag, props, _metadata);
|
|
12
|
+
const propObj = typeof props === 'string' ? { class: props } : props;
|
|
13
|
+
if (propObj === undefined || propObj === null) {
|
|
14
|
+
return core.h(tag);
|
|
15
|
+
}
|
|
16
|
+
const children = propObj.children;
|
|
17
|
+
delete propObj.children;
|
|
18
|
+
// deal with ref attribute
|
|
19
|
+
const hasRef = 'ref' in propObj && typeof propObj.ref === 'object' && propObj.ref !== null;
|
|
20
|
+
const ref = hasRef ? propObj.ref : null;
|
|
21
|
+
if (hasRef) {
|
|
22
|
+
delete propObj.ref;
|
|
23
|
+
}
|
|
24
|
+
const el = core.h(tag, propObj, children);
|
|
25
|
+
if (hasRef) {
|
|
26
|
+
ref.value = el;
|
|
27
|
+
}
|
|
28
|
+
return el;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Fragment support - returns an array of children
|
|
32
|
+
* Note: kt.js doesn't have a real Fragment concept,
|
|
33
|
+
* so we return ktnull for empty fragments or flatten children
|
|
34
|
+
*/
|
|
35
|
+
function Fragment(props) {
|
|
36
|
+
window.__ktjs__.throws("kt.js doesn't have a Fragment concept");
|
|
37
|
+
// const { children } = props || {};
|
|
38
|
+
// if (!children) {
|
|
39
|
+
// return ktnull;
|
|
40
|
+
// }
|
|
41
|
+
// // If single child, return it directly
|
|
42
|
+
// if (!Array.isArray(children)) {
|
|
43
|
+
// return children as HTMLElement;
|
|
44
|
+
// }
|
|
45
|
+
// // For multiple children, create a document fragment wrapper
|
|
46
|
+
// // This is a limitation - JSX fragments must be wrapped in kt.js
|
|
47
|
+
// const wrapper = document.createElement('div');
|
|
48
|
+
// wrapper.setAttribute('data-kt-fragment', 'true');
|
|
49
|
+
// children.forEach((child) => {
|
|
50
|
+
// if (child && child !== ktnull) {
|
|
51
|
+
// if (typeof child === 'string') {
|
|
52
|
+
// wrapper.appendChild(document.createTextNode(child));
|
|
53
|
+
// } else if (child instanceof HTMLElement) {
|
|
54
|
+
// wrapper.appendChild(child);
|
|
55
|
+
// }
|
|
56
|
+
// }
|
|
57
|
+
// });
|
|
58
|
+
// return wrapper;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* JSX Development runtime - same as jsx but with additional dev checks
|
|
62
|
+
*/
|
|
63
|
+
const jsxDEV = jsx;
|
|
64
|
+
/**
|
|
65
|
+
* JSX runtime for React 17+ automatic runtime
|
|
66
|
+
* This is called when using jsx: "react-jsx" or "react-jsxdev"
|
|
67
|
+
*/
|
|
68
|
+
const jsxs = jsx;
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* @ktjs/jsx - JSX/TSX support for KT.js
|
|
72
|
+
*
|
|
73
|
+
* This package provides JSX transformation support for KT.js,
|
|
74
|
+
* allowing you to write UI code with JSX syntax while maintaining
|
|
75
|
+
* the direct DOM manipulation philosophy of KT.js.
|
|
76
|
+
*
|
|
77
|
+
* @example
|
|
78
|
+
* ```tsx
|
|
79
|
+
* import { h } from '@ktjs/jsx';
|
|
80
|
+
*
|
|
81
|
+
* const App = (
|
|
82
|
+
* <div class="app">
|
|
83
|
+
* <h1>Hello KT.js with JSX!</h1>
|
|
84
|
+
* <button @click={() => alert('Clicked!')}>
|
|
85
|
+
* Click me
|
|
86
|
+
* </button>
|
|
87
|
+
* </div>
|
|
88
|
+
* );
|
|
89
|
+
* ```
|
|
90
|
+
*
|
|
91
|
+
* ## About
|
|
92
|
+
* @package @ktjs/jsx
|
|
93
|
+
* @author Kasukabe Tsumugi <futami16237@gmail.com>
|
|
94
|
+
* @version 0.6.15 (Last Update: 2025.12.24 21:47:29.087)
|
|
95
|
+
* @license MIT
|
|
96
|
+
* @link https://github.com/baendlorel/kt.js
|
|
97
|
+
* @link https://baendlorel.github.io/ Welcome to my site!
|
|
98
|
+
* @description JSX/TSX support for KT.js - Build UIs with JSX syntax while keeping direct DOM control
|
|
99
|
+
* @copyright Copyright (c) 2025 Kasukabe Tsumugi. All rights reserved.
|
|
100
|
+
*/
|
|
101
|
+
// Export JSX runtime functions
|
|
102
|
+
function ref() {
|
|
103
|
+
return { value: null };
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
Object.defineProperty(exports, "createElement", {
|
|
107
|
+
enumerable: true,
|
|
108
|
+
get: function () { return core.h; }
|
|
109
|
+
});
|
|
110
|
+
Object.defineProperty(exports, "h", {
|
|
111
|
+
enumerable: true,
|
|
112
|
+
get: function () { return core.h; }
|
|
113
|
+
});
|
|
114
|
+
exports.Fragment = Fragment;
|
|
115
|
+
exports.jsx = jsx;
|
|
116
|
+
exports.jsxDEV = jsxDEV;
|
|
117
|
+
exports.jsxs = jsxs;
|
|
118
|
+
exports.ref = ref;
|
package/dist/index.d.ts
CHANGED
|
@@ -68,7 +68,7 @@ declare global {
|
|
|
68
68
|
* ## About
|
|
69
69
|
* @package @ktjs/jsx
|
|
70
70
|
* @author Kasukabe Tsumugi <futami16237@gmail.com>
|
|
71
|
-
* @version 0.6.
|
|
71
|
+
* @version 0.6.15 (Last Update: 2025.12.24 21:47:29.087)
|
|
72
72
|
* @license MIT
|
|
73
73
|
* @link https://github.com/baendlorel/kt.js
|
|
74
74
|
* @link https://baendlorel.github.io/ Welcome to my site!
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1,105 @@
|
|
|
1
|
-
import{h
|
|
1
|
+
import { h } from '@ktjs/core';
|
|
2
|
+
export { h as createElement, h } from '@ktjs/core';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* @param tag html tag
|
|
6
|
+
* @param props properties/attributes
|
|
7
|
+
* @param _metadata metadata is ignored
|
|
8
|
+
*/
|
|
9
|
+
function jsx(tag, props, ..._metadata) {
|
|
10
|
+
console.log('JSX runtime called:', tag, props, _metadata);
|
|
11
|
+
const propObj = typeof props === 'string' ? { class: props } : props;
|
|
12
|
+
if (propObj === undefined || propObj === null) {
|
|
13
|
+
return h(tag);
|
|
14
|
+
}
|
|
15
|
+
const children = propObj.children;
|
|
16
|
+
delete propObj.children;
|
|
17
|
+
// deal with ref attribute
|
|
18
|
+
const hasRef = 'ref' in propObj && typeof propObj.ref === 'object' && propObj.ref !== null;
|
|
19
|
+
const ref = hasRef ? propObj.ref : null;
|
|
20
|
+
if (hasRef) {
|
|
21
|
+
delete propObj.ref;
|
|
22
|
+
}
|
|
23
|
+
const el = h(tag, propObj, children);
|
|
24
|
+
if (hasRef) {
|
|
25
|
+
ref.value = el;
|
|
26
|
+
}
|
|
27
|
+
return el;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Fragment support - returns an array of children
|
|
31
|
+
* Note: kt.js doesn't have a real Fragment concept,
|
|
32
|
+
* so we return ktnull for empty fragments or flatten children
|
|
33
|
+
*/
|
|
34
|
+
function Fragment(props) {
|
|
35
|
+
window.__ktjs__.throws("kt.js doesn't have a Fragment concept");
|
|
36
|
+
// const { children } = props || {};
|
|
37
|
+
// if (!children) {
|
|
38
|
+
// return ktnull;
|
|
39
|
+
// }
|
|
40
|
+
// // If single child, return it directly
|
|
41
|
+
// if (!Array.isArray(children)) {
|
|
42
|
+
// return children as HTMLElement;
|
|
43
|
+
// }
|
|
44
|
+
// // For multiple children, create a document fragment wrapper
|
|
45
|
+
// // This is a limitation - JSX fragments must be wrapped in kt.js
|
|
46
|
+
// const wrapper = document.createElement('div');
|
|
47
|
+
// wrapper.setAttribute('data-kt-fragment', 'true');
|
|
48
|
+
// children.forEach((child) => {
|
|
49
|
+
// if (child && child !== ktnull) {
|
|
50
|
+
// if (typeof child === 'string') {
|
|
51
|
+
// wrapper.appendChild(document.createTextNode(child));
|
|
52
|
+
// } else if (child instanceof HTMLElement) {
|
|
53
|
+
// wrapper.appendChild(child);
|
|
54
|
+
// }
|
|
55
|
+
// }
|
|
56
|
+
// });
|
|
57
|
+
// return wrapper;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* JSX Development runtime - same as jsx but with additional dev checks
|
|
61
|
+
*/
|
|
62
|
+
const jsxDEV = jsx;
|
|
63
|
+
/**
|
|
64
|
+
* JSX runtime for React 17+ automatic runtime
|
|
65
|
+
* This is called when using jsx: "react-jsx" or "react-jsxdev"
|
|
66
|
+
*/
|
|
67
|
+
const jsxs = jsx;
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* @ktjs/jsx - JSX/TSX support for KT.js
|
|
71
|
+
*
|
|
72
|
+
* This package provides JSX transformation support for KT.js,
|
|
73
|
+
* allowing you to write UI code with JSX syntax while maintaining
|
|
74
|
+
* the direct DOM manipulation philosophy of KT.js.
|
|
75
|
+
*
|
|
76
|
+
* @example
|
|
77
|
+
* ```tsx
|
|
78
|
+
* import { h } from '@ktjs/jsx';
|
|
79
|
+
*
|
|
80
|
+
* const App = (
|
|
81
|
+
* <div class="app">
|
|
82
|
+
* <h1>Hello KT.js with JSX!</h1>
|
|
83
|
+
* <button @click={() => alert('Clicked!')}>
|
|
84
|
+
* Click me
|
|
85
|
+
* </button>
|
|
86
|
+
* </div>
|
|
87
|
+
* );
|
|
88
|
+
* ```
|
|
89
|
+
*
|
|
90
|
+
* ## About
|
|
91
|
+
* @package @ktjs/jsx
|
|
92
|
+
* @author Kasukabe Tsumugi <futami16237@gmail.com>
|
|
93
|
+
* @version 0.6.15 (Last Update: 2025.12.24 21:47:29.087)
|
|
94
|
+
* @license MIT
|
|
95
|
+
* @link https://github.com/baendlorel/kt.js
|
|
96
|
+
* @link https://baendlorel.github.io/ Welcome to my site!
|
|
97
|
+
* @description JSX/TSX support for KT.js - Build UIs with JSX syntax while keeping direct DOM control
|
|
98
|
+
* @copyright Copyright (c) 2025 Kasukabe Tsumugi. All rights reserved.
|
|
99
|
+
*/
|
|
100
|
+
// Export JSX runtime functions
|
|
101
|
+
function ref() {
|
|
102
|
+
return { value: null };
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
export { Fragment, jsx, jsxDEV, jsxs, ref };
|