@ktjs/core 0.20.0 → 0.20.2

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.
Files changed (10) hide show
  1. package/README.md +2 -3
  2. package/dist/index.d.ts +69 -5
  3. package/dist/index.iife.js +32 -8
  4. package/dist/index.legacy.js +34 -9
  5. package/dist/index.mjs +32 -8
  6. package/dist/jsx/index.d.ts +69 -5
  7. package/dist/jsx/index.mjs +32 -8
  8. package/dist/jsx/jsx-runtime.d.ts +5 -4
  9. package/dist/jsx/jsx-runtime.mjs +32 -8
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -21,17 +21,16 @@ KT.js is now a **monorepo** containing multiple packages:
21
21
  - **[kt.js](./packages/kt.js)**: Main entry package that re-exports all functionality
22
22
  - **[@ktjs/core](./packages/core)**: Core DOM manipulation utilities and the `h` function. SX/TSX support with full TypeScript integration (included in kt.js package)
23
23
  - **[@ktjs/router](./packages/router)**: Client-side routing with navigation guards (not included in kt.js package)
24
- - **[@ktjs/shortcuts](./packages/shortcuts)**: Convenient shortcut functions for common operations
25
24
 
26
25
  You can install the full package or individual packages as needed:
27
26
 
28
27
  ```bash
29
- # Install the main package (includes core + jsx + shortcuts)
30
28
  pnpm add kt.js
31
29
 
32
30
  # Or install individual packages
33
31
  pnpm add @ktjs/core # Core DOM utilities (independent)
34
- pnpm add @ktjs/router # Client-side router (independent)
32
+ pnpm add @ktjs/router # Client-side router (requires @ktjs/core)
33
+ pnpm add @ktjs/mui # Material UI components (requires @ktjs/core)
35
34
  pnpm add @ktjs/shortcuts # Shortcuts (requires @ktjs/core)
36
35
  ```
37
36
 
package/dist/index.d.ts CHANGED
@@ -5,6 +5,7 @@ type otherstring = string & {};
5
5
  */
6
6
  type HTMLTag = keyof HTMLElementTagNameMap;
7
7
  type SVGTag = keyof SVGElementTagNameMap;
8
+ type MathMLTag = keyof MathMLElementTagNameMap;
8
9
 
9
10
  type RefChangeHandler<T> = (newValue: T, oldValue: T) => void;
10
11
  declare class KTRef<T> {
@@ -28,7 +29,7 @@ declare class KTRef<T> {
28
29
  * - can alse be used to store normal values, but it is not reactive.
29
30
  * @param value mostly an HTMLElement
30
31
  */
31
- declare function ref<T = HTMLElement>(value?: T, onChange?: RefChangeHandler<T>): KTRef<T>;
32
+ declare function ref<T = JSX.Element>(value?: T, onChange?: RefChangeHandler<T>): KTRef<T>;
32
33
 
33
34
  type SingleContent = KTRef<any> | HTMLElement | Element | Node | string | number | boolean | null | undefined;
34
35
  type KTAvailableContent = SingleContent | KTAvailableContent[];
@@ -118,7 +119,7 @@ type KTComponent = (
118
119
  any,
119
120
  ) => JSX.Element | Promise<JSX.Element> | any;
120
121
 
121
- type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGElementTagNameMap[T] : T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
122
+ type HTML<T extends (HTMLTag | SVGTag | MathMLTag) & otherstring> = T extends SVGTag ? SVGElementTagNameMap[T] : T extends HTMLTag ? HTMLElementTagNameMap[T] : T extends MathMLTag ? MathMLElementTagNameMap[T] : HTMLElement;
122
123
  /**
123
124
  * Create an enhanced HTMLElement.
124
125
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -129,21 +130,21 @@ type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGEl
129
130
  * ## About
130
131
  * @package @ktjs/core
131
132
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
132
- * @version 0.20.0 (Last Update: 2026.02.01 00:47:09.995)
133
+ * @version 0.20.2 (Last Update: 2026.02.01 18:34:51.151)
133
134
  * @license MIT
134
135
  * @link https://github.com/baendlorel/kt.js
135
136
  * @link https://baendlorel.github.io/ Welcome to my site!
136
137
  * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
137
138
  * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
138
139
  */
139
- declare const h: <T extends HTMLTag | SVGTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
140
+ declare const h: <T extends HTMLTag | SVGTag | MathMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
140
141
 
141
142
  type JSXTag = HTMLTag | ((props?: any) => HTMLElement) | ((props?: any) => Promise<HTMLElement>);
142
143
  /**
143
144
  * @param tag html tag or function component
144
145
  * @param props properties/attributes
145
146
  */
146
- declare function jsx(tag: JSXTag, props?: KTAttribute): HTMLElement;
147
+ declare function jsx(tag: JSXTag, props: KTAttribute): JSX.Element;
147
148
  /**
148
149
  * Fragment support - returns an array of children
149
150
  * Note: kt.js doesn't have a real Fragment concept,
@@ -1163,6 +1164,8 @@ declare global {
1163
1164
  type Element = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
1164
1165
 
1165
1166
  interface IntrinsicElements {
1167
+ [k: string]: AttributesMap['div']; // Allow any element with div attributes as fallback
1168
+
1166
1169
  // Document-level & metadata
1167
1170
  html: AttributesMap['html'];
1168
1171
  head: AttributesMap['head'];
@@ -1331,6 +1334,67 @@ declare global {
1331
1334
  tspan: SVGAttributesMap['tspan'];
1332
1335
  use: SVGAttributesMap['use'];
1333
1336
  view: SVGAttributesMap['view'];
1337
+
1338
+ // 'svg:svg': AttributesMap['svg'];
1339
+ // 'svg:a': SVGAttributesMap['a'];
1340
+ // 'svg:animate': SVGAttributesMap['animate'];
1341
+ // 'svg:animateMotion': SVGAttributesMap['animateMotion'];
1342
+ // 'svg:animateTransform': SVGAttributesMap['animateTransform'];
1343
+ // 'svg:circle': SVGAttributesMap['circle'];
1344
+ // 'svg:clipPath': SVGAttributesMap['clipPath'];
1345
+ // 'svg:defs': SVGAttributesMap['defs'];
1346
+ // 'svg:desc': SVGAttributesMap['desc'];
1347
+ // 'svg:ellipse': SVGAttributesMap['ellipse'];
1348
+ // 'svg:feBlend': SVGAttributesMap['feBlend'];
1349
+ // 'svg:feColorMatrix': SVGAttributesMap['feColorMatrix'];
1350
+ // 'svg:feComponentTransfer': SVGAttributesMap['feComponentTransfer'];
1351
+ // 'svg:feComposite': SVGAttributesMap['feComposite'];
1352
+ // 'svg:feConvolveMatrix': SVGAttributesMap['feConvolveMatrix'];
1353
+ // 'svg:feDiffuseLighting': SVGAttributesMap['feDiffuseLighting'];
1354
+ // 'svg:feDisplacementMap': SVGAttributesMap['feDisplacementMap'];
1355
+ // 'svg:feDistantLight': SVGAttributesMap['feDistantLight'];
1356
+ // 'svg:feDropShadow': SVGAttributesMap['feDropShadow'];
1357
+ // 'svg:feFlood': SVGAttributesMap['feFlood'];
1358
+ // 'svg:feFuncA': SVGAttributesMap['feFuncA'];
1359
+ // 'svg:feFuncB': SVGAttributesMap['feFuncB'];
1360
+ // 'svg:feFuncG': SVGAttributesMap['feFuncG'];
1361
+ // 'svg:feFuncR': SVGAttributesMap['feFuncR'];
1362
+ // 'svg:feGaussianBlur': SVGAttributesMap['feGaussianBlur'];
1363
+ // 'svg:feImage': SVGAttributesMap['feImage'];
1364
+ // 'svg:feMerge': SVGAttributesMap['feMerge'];
1365
+ // 'svg:feMergeNode': SVGAttributesMap['feMergeNode'];
1366
+ // 'svg:feMorphology': SVGAttributesMap['feMorphology'];
1367
+ // 'svg:feOffset': SVGAttributesMap['feOffset'];
1368
+ // 'svg:fePointLight': SVGAttributesMap['fePointLight'];
1369
+ // 'svg:feSpecularLighting': SVGAttributesMap['feSpecularLighting'];
1370
+ // 'svg:feSpotLight': SVGAttributesMap['feSpotLight'];
1371
+ // 'svg:feTile': SVGAttributesMap['feTile'];
1372
+ // 'svg:feTurbulence': SVGAttributesMap['feTurbulence'];
1373
+ // 'svg:filter': SVGAttributesMap['filter'];
1374
+ // 'svg:foreignObject': SVGAttributesMap['foreignObject'];
1375
+ // 'svg:g': SVGAttributesMap['g'];
1376
+ // 'svg:image': SVGAttributesMap['image'];
1377
+ // 'svg:line': SVGAttributesMap['line'];
1378
+ // 'svg:linearGradient': SVGAttributesMap['linearGradient'];
1379
+ // 'svg:marker': SVGAttributesMap['marker'];
1380
+ // 'svg:mask': SVGAttributesMap['mask'];
1381
+ // 'svg:metadata': SVGAttributesMap['metadata'];
1382
+ // 'svg:mpath': SVGAttributesMap['mpath'];
1383
+ // 'svg:path': SVGAttributesMap['path'];
1384
+ // 'svg:pattern': SVGAttributesMap['pattern'];
1385
+ // 'svg:polygon': SVGAttributesMap['polygon'];
1386
+ // 'svg:polyline': SVGAttributesMap['polyline'];
1387
+ // 'svg:radialGradient': SVGAttributesMap['radialGradient'];
1388
+ // 'svg:rect': SVGAttributesMap['rect'];
1389
+ // 'svg:set': SVGAttributesMap['set'];
1390
+ // 'svg:stop': SVGAttributesMap['stop'];
1391
+ // 'svg:switch': SVGAttributesMap['switch'];
1392
+ // 'svg:symbol': SVGAttributesMap['symbol'];
1393
+ // 'svg:text': SVGAttributesMap['text'];
1394
+ // 'svg:textPath': SVGAttributesMap['textPath'];
1395
+ // 'svg:tspan': SVGAttributesMap['tspan'];
1396
+ // 'svg:use': SVGAttributesMap['use'];
1397
+ // 'svg:view': SVGAttributesMap['view'];
1334
1398
  }
1335
1399
 
1336
1400
  interface IntrinsicAttributes {
package/dist/index.iife.js CHANGED
@@ -194,7 +194,14 @@ var __ktjs_core__ = (function (exports) {
194
194
  }
195
195
  }
196
196
 
197
- const svgTempWrapper = document.createElement('div');
197
+ document.createElement('div');
198
+ const htmlCreator = (tag) => document.createElement(tag);
199
+ const svgCreator = (tag) => document.createElementNS('http://www.w3.org/2000/svg', tag);
200
+ const mathMLCreator = (tag) => document.createElementNS('http://www.w3.org/1998/Math/MathML', tag);
201
+ let creator = htmlCreator;
202
+ // # consts
203
+ const SVG_ATTR_FLAG = '__kt_svg__';
204
+ const MATHML_ATTR_FLAG = '__kt_mathml__';
198
205
  /**
199
206
  * Create an enhanced HTMLElement.
200
207
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -205,7 +212,7 @@ var __ktjs_core__ = (function (exports) {
205
212
  * ## About
206
213
  * @package @ktjs/core
207
214
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
208
- * @version 0.20.0 (Last Update: 2026.02.01 00:47:09.995)
215
+ * @version 0.20.2 (Last Update: 2026.02.01 18:34:51.151)
209
216
  * @license MIT
210
217
  * @link https://github.com/baendlorel/kt.js
211
218
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -216,15 +223,32 @@ var __ktjs_core__ = (function (exports) {
216
223
  if (typeof tag !== 'string') {
217
224
  $throw('tagName must be a string.');
218
225
  }
226
+ if (attr) {
227
+ if (SVG_ATTR_FLAG in attr) {
228
+ delete attr[SVG_ATTR_FLAG];
229
+ creator = svgCreator;
230
+ }
231
+ else if (MATHML_ATTR_FLAG in attr) {
232
+ delete attr[MATHML_ATTR_FLAG];
233
+ creator = mathMLCreator;
234
+ }
235
+ else {
236
+ creator = htmlCreator;
237
+ }
238
+ }
219
239
  // * start creating the element
220
- const element = document.createElement(tag);
240
+ const element = creator(tag);
221
241
  // * Handle content
222
242
  applyAttr(element, attr);
223
243
  applyContent(element, content);
224
- if (tag === 'svg') {
225
- svgTempWrapper.innerHTML = element.outerHTML;
226
- return svgTempWrapper.firstChild;
227
- }
244
+ // if (tag === 'svg') {
245
+ // tempWrapper.innerHTML = element.outerHTML;
246
+ // return tempWrapper.firstChild as HTML<T>;
247
+ // }
248
+ // if (tag === 'math') {
249
+ // tempWrapper.innerHTML = element.outerHTML;
250
+ // return tempWrapper.firstChild as HTML<T>;
251
+ // }
228
252
  return element;
229
253
  };
230
254
 
@@ -289,7 +313,7 @@ var __ktjs_core__ = (function (exports) {
289
313
  * @param tag html tag or function component
290
314
  * @param props properties/attributes
291
315
  */
292
- function jsx(tag, props = {}) {
316
+ function jsx(tag, props) {
293
317
  const ref = props.ref?.isKT ? props.ref : dummyRef;
294
318
  let el;
295
319
  if ('k-if' in props && !props['k-if']) {
package/dist/index.legacy.js CHANGED
@@ -94,7 +94,9 @@ var __ktjs_core__ = (function (exports) {
94
94
  hidden: function (element, _key, value) { return (element.hidden = !!value); },
95
95
  };
96
96
 
97
- var defaultHandler = function (element, key, value) { return element.setAttribute(key, value); };
97
+ var defaultHandler = function (element, key, value) {
98
+ return element.setAttribute(key, value);
99
+ };
98
100
  function attrIsObject(element, attr) {
99
101
  var classValue = attr.class || attr.className;
100
102
  if (classValue !== undefined) {
@@ -197,7 +199,14 @@ var __ktjs_core__ = (function (exports) {
197
199
  }
198
200
  }
199
201
 
200
- var svgTempWrapper = document.createElement('div');
202
+ document.createElement('div');
203
+ var htmlCreator = function (tag) { return document.createElement(tag); };
204
+ var svgCreator = function (tag) { return document.createElementNS('http://www.w3.org/2000/svg', tag); };
205
+ var mathMLCreator = function (tag) { return document.createElementNS('http://www.w3.org/1998/Math/MathML', tag); };
206
+ var creator = htmlCreator;
207
+ // # consts
208
+ var SVG_ATTR_FLAG = '__kt_svg__';
209
+ var MATHML_ATTR_FLAG = '__kt_mathml__';
201
210
  /**
202
211
  * Create an enhanced HTMLElement.
203
212
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -208,7 +217,7 @@ var __ktjs_core__ = (function (exports) {
208
217
  * ## About
209
218
  * @package @ktjs/core
210
219
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
211
- * @version 0.20.0 (Last Update: 2026.02.01 00:47:09.995)
220
+ * @version 0.20.2 (Last Update: 2026.02.01 18:34:51.151)
212
221
  * @license MIT
213
222
  * @link https://github.com/baendlorel/kt.js
214
223
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -219,15 +228,32 @@ var __ktjs_core__ = (function (exports) {
219
228
  if (typeof tag !== 'string') {
220
229
  $throw('tagName must be a string.');
221
230
  }
231
+ if (attr) {
232
+ if (SVG_ATTR_FLAG in attr) {
233
+ delete attr[SVG_ATTR_FLAG];
234
+ creator = svgCreator;
235
+ }
236
+ else if (MATHML_ATTR_FLAG in attr) {
237
+ delete attr[MATHML_ATTR_FLAG];
238
+ creator = mathMLCreator;
239
+ }
240
+ else {
241
+ creator = htmlCreator;
242
+ }
243
+ }
222
244
  // * start creating the element
223
- var element = document.createElement(tag);
245
+ var element = creator(tag);
224
246
  // * Handle content
225
247
  applyAttr(element, attr);
226
248
  applyContent(element, content);
227
- if (tag === 'svg') {
228
- svgTempWrapper.innerHTML = element.outerHTML;
229
- return svgTempWrapper.firstChild;
230
- }
249
+ // if (tag === 'svg') {
250
+ // tempWrapper.innerHTML = element.outerHTML;
251
+ // return tempWrapper.firstChild as HTML<T>;
252
+ // }
253
+ // if (tag === 'math') {
254
+ // tempWrapper.innerHTML = element.outerHTML;
255
+ // return tempWrapper.firstChild as HTML<T>;
256
+ // }
231
257
  return element;
232
258
  };
233
259
 
@@ -297,7 +323,6 @@ var __ktjs_core__ = (function (exports) {
297
323
  */
298
324
  function jsx(tag, props) {
299
325
  var _a;
300
- if (props === void 0) { props = {}; }
301
326
  var ref = ((_a = props.ref) === null || _a === void 0 ? void 0 : _a.isKT) ? props.ref : dummyRef;
302
327
  var el;
303
328
  if ('k-if' in props && !props['k-if']) {
package/dist/index.mjs CHANGED
@@ -191,7 +191,14 @@ function applyContent(element, content) {
191
191
  }
192
192
  }
193
193
 
194
- const svgTempWrapper = document.createElement('div');
194
+ document.createElement('div');
195
+ const htmlCreator = (tag) => document.createElement(tag);
196
+ const svgCreator = (tag) => document.createElementNS('http://www.w3.org/2000/svg', tag);
197
+ const mathMLCreator = (tag) => document.createElementNS('http://www.w3.org/1998/Math/MathML', tag);
198
+ let creator = htmlCreator;
199
+ // # consts
200
+ const SVG_ATTR_FLAG = '__kt_svg__';
201
+ const MATHML_ATTR_FLAG = '__kt_mathml__';
195
202
  /**
196
203
  * Create an enhanced HTMLElement.
197
204
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -202,7 +209,7 @@ const svgTempWrapper = document.createElement('div');
202
209
  * ## About
203
210
  * @package @ktjs/core
204
211
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
205
- * @version 0.20.0 (Last Update: 2026.02.01 00:47:09.995)
212
+ * @version 0.20.2 (Last Update: 2026.02.01 18:34:51.151)
206
213
  * @license MIT
207
214
  * @link https://github.com/baendlorel/kt.js
208
215
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -213,15 +220,32 @@ const h = (tag, attr, content) => {
213
220
  if (typeof tag !== 'string') {
214
221
  $throw('tagName must be a string.');
215
222
  }
223
+ if (attr) {
224
+ if (SVG_ATTR_FLAG in attr) {
225
+ delete attr[SVG_ATTR_FLAG];
226
+ creator = svgCreator;
227
+ }
228
+ else if (MATHML_ATTR_FLAG in attr) {
229
+ delete attr[MATHML_ATTR_FLAG];
230
+ creator = mathMLCreator;
231
+ }
232
+ else {
233
+ creator = htmlCreator;
234
+ }
235
+ }
216
236
  // * start creating the element
217
- const element = document.createElement(tag);
237
+ const element = creator(tag);
218
238
  // * Handle content
219
239
  applyAttr(element, attr);
220
240
  applyContent(element, content);
221
- if (tag === 'svg') {
222
- svgTempWrapper.innerHTML = element.outerHTML;
223
- return svgTempWrapper.firstChild;
224
- }
241
+ // if (tag === 'svg') {
242
+ // tempWrapper.innerHTML = element.outerHTML;
243
+ // return tempWrapper.firstChild as HTML<T>;
244
+ // }
245
+ // if (tag === 'math') {
246
+ // tempWrapper.innerHTML = element.outerHTML;
247
+ // return tempWrapper.firstChild as HTML<T>;
248
+ // }
225
249
  return element;
226
250
  };
227
251
 
@@ -286,7 +310,7 @@ const dummyRef = { value: null };
286
310
  * @param tag html tag or function component
287
311
  * @param props properties/attributes
288
312
  */
289
- function jsx(tag, props = {}) {
313
+ function jsx(tag, props) {
290
314
  const ref = props.ref?.isKT ? props.ref : dummyRef;
291
315
  let el;
292
316
  if ('k-if' in props && !props['k-if']) {
package/dist/jsx/index.d.ts CHANGED
@@ -5,6 +5,7 @@ type otherstring = string & {};
5
5
  */
6
6
  type HTMLTag = keyof HTMLElementTagNameMap;
7
7
  type SVGTag = keyof SVGElementTagNameMap;
8
+ type MathMLTag = keyof MathMLElementTagNameMap;
8
9
 
9
10
  type RefChangeHandler<T> = (newValue: T, oldValue: T) => void;
10
11
  declare class KTRef<T> {
@@ -28,7 +29,7 @@ declare class KTRef<T> {
28
29
  * - can alse be used to store normal values, but it is not reactive.
29
30
  * @param value mostly an HTMLElement
30
31
  */
31
- declare function ref<T = HTMLElement>(value?: T, onChange?: RefChangeHandler<T>): KTRef<T>;
32
+ declare function ref<T = JSX.Element>(value?: T, onChange?: RefChangeHandler<T>): KTRef<T>;
32
33
 
33
34
  type SingleContent = KTRef<any> | HTMLElement | Element | Node | string | number | boolean | null | undefined;
34
35
  type KTAvailableContent = SingleContent | KTAvailableContent[];
@@ -104,7 +105,7 @@ type KTPrefixedEventHandlers = {
104
105
 
105
106
  type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
106
107
 
107
- type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGElementTagNameMap[T] : T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
108
+ type HTML<T extends (HTMLTag | SVGTag | MathMLTag) & otherstring> = T extends SVGTag ? SVGElementTagNameMap[T] : T extends HTMLTag ? HTMLElementTagNameMap[T] : T extends MathMLTag ? MathMLElementTagNameMap[T] : HTMLElement;
108
109
  /**
109
110
  * Create an enhanced HTMLElement.
110
111
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -115,21 +116,21 @@ type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGEl
115
116
  * ## About
116
117
  * @package @ktjs/core
117
118
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
118
- * @version 0.20.0 (Last Update: 2026.02.01 00:47:09.995)
119
+ * @version 0.20.2 (Last Update: 2026.02.01 18:34:51.151)
119
120
  * @license MIT
120
121
  * @link https://github.com/baendlorel/kt.js
121
122
  * @link https://baendlorel.github.io/ Welcome to my site!
122
123
  * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
123
124
  * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
124
125
  */
125
- declare const h: <T extends HTMLTag | SVGTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
126
+ declare const h: <T extends HTMLTag | SVGTag | MathMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
126
127
 
127
128
  type JSXTag = HTMLTag | ((props?: any) => HTMLElement) | ((props?: any) => Promise<HTMLElement>);
128
129
  /**
129
130
  * @param tag html tag or function component
130
131
  * @param props properties/attributes
131
132
  */
132
- declare function jsx(tag: JSXTag, props?: KTAttribute): HTMLElement;
133
+ declare function jsx(tag: JSXTag, props: KTAttribute): JSX.Element;
133
134
  /**
134
135
  * Fragment support - returns an array of children
135
136
  * Note: kt.js doesn't have a real Fragment concept,
@@ -1149,6 +1150,8 @@ declare global {
1149
1150
  type Element = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
1150
1151
 
1151
1152
  interface IntrinsicElements {
1153
+ [k: string]: AttributesMap['div']; // Allow any element with div attributes as fallback
1154
+
1152
1155
  // Document-level & metadata
1153
1156
  html: AttributesMap['html'];
1154
1157
  head: AttributesMap['head'];
@@ -1317,6 +1320,67 @@ declare global {
1317
1320
  tspan: SVGAttributesMap['tspan'];
1318
1321
  use: SVGAttributesMap['use'];
1319
1322
  view: SVGAttributesMap['view'];
1323
+
1324
+ // 'svg:svg': AttributesMap['svg'];
1325
+ // 'svg:a': SVGAttributesMap['a'];
1326
+ // 'svg:animate': SVGAttributesMap['animate'];
1327
+ // 'svg:animateMotion': SVGAttributesMap['animateMotion'];
1328
+ // 'svg:animateTransform': SVGAttributesMap['animateTransform'];
1329
+ // 'svg:circle': SVGAttributesMap['circle'];
1330
+ // 'svg:clipPath': SVGAttributesMap['clipPath'];
1331
+ // 'svg:defs': SVGAttributesMap['defs'];
1332
+ // 'svg:desc': SVGAttributesMap['desc'];
1333
+ // 'svg:ellipse': SVGAttributesMap['ellipse'];
1334
+ // 'svg:feBlend': SVGAttributesMap['feBlend'];
1335
+ // 'svg:feColorMatrix': SVGAttributesMap['feColorMatrix'];
1336
+ // 'svg:feComponentTransfer': SVGAttributesMap['feComponentTransfer'];
1337
+ // 'svg:feComposite': SVGAttributesMap['feComposite'];
1338
+ // 'svg:feConvolveMatrix': SVGAttributesMap['feConvolveMatrix'];
1339
+ // 'svg:feDiffuseLighting': SVGAttributesMap['feDiffuseLighting'];
1340
+ // 'svg:feDisplacementMap': SVGAttributesMap['feDisplacementMap'];
1341
+ // 'svg:feDistantLight': SVGAttributesMap['feDistantLight'];
1342
+ // 'svg:feDropShadow': SVGAttributesMap['feDropShadow'];
1343
+ // 'svg:feFlood': SVGAttributesMap['feFlood'];
1344
+ // 'svg:feFuncA': SVGAttributesMap['feFuncA'];
1345
+ // 'svg:feFuncB': SVGAttributesMap['feFuncB'];
1346
+ // 'svg:feFuncG': SVGAttributesMap['feFuncG'];
1347
+ // 'svg:feFuncR': SVGAttributesMap['feFuncR'];
1348
+ // 'svg:feGaussianBlur': SVGAttributesMap['feGaussianBlur'];
1349
+ // 'svg:feImage': SVGAttributesMap['feImage'];
1350
+ // 'svg:feMerge': SVGAttributesMap['feMerge'];
1351
+ // 'svg:feMergeNode': SVGAttributesMap['feMergeNode'];
1352
+ // 'svg:feMorphology': SVGAttributesMap['feMorphology'];
1353
+ // 'svg:feOffset': SVGAttributesMap['feOffset'];
1354
+ // 'svg:fePointLight': SVGAttributesMap['fePointLight'];
1355
+ // 'svg:feSpecularLighting': SVGAttributesMap['feSpecularLighting'];
1356
+ // 'svg:feSpotLight': SVGAttributesMap['feSpotLight'];
1357
+ // 'svg:feTile': SVGAttributesMap['feTile'];
1358
+ // 'svg:feTurbulence': SVGAttributesMap['feTurbulence'];
1359
+ // 'svg:filter': SVGAttributesMap['filter'];
1360
+ // 'svg:foreignObject': SVGAttributesMap['foreignObject'];
1361
+ // 'svg:g': SVGAttributesMap['g'];
1362
+ // 'svg:image': SVGAttributesMap['image'];
1363
+ // 'svg:line': SVGAttributesMap['line'];
1364
+ // 'svg:linearGradient': SVGAttributesMap['linearGradient'];
1365
+ // 'svg:marker': SVGAttributesMap['marker'];
1366
+ // 'svg:mask': SVGAttributesMap['mask'];
1367
+ // 'svg:metadata': SVGAttributesMap['metadata'];
1368
+ // 'svg:mpath': SVGAttributesMap['mpath'];
1369
+ // 'svg:path': SVGAttributesMap['path'];
1370
+ // 'svg:pattern': SVGAttributesMap['pattern'];
1371
+ // 'svg:polygon': SVGAttributesMap['polygon'];
1372
+ // 'svg:polyline': SVGAttributesMap['polyline'];
1373
+ // 'svg:radialGradient': SVGAttributesMap['radialGradient'];
1374
+ // 'svg:rect': SVGAttributesMap['rect'];
1375
+ // 'svg:set': SVGAttributesMap['set'];
1376
+ // 'svg:stop': SVGAttributesMap['stop'];
1377
+ // 'svg:switch': SVGAttributesMap['switch'];
1378
+ // 'svg:symbol': SVGAttributesMap['symbol'];
1379
+ // 'svg:text': SVGAttributesMap['text'];
1380
+ // 'svg:textPath': SVGAttributesMap['textPath'];
1381
+ // 'svg:tspan': SVGAttributesMap['tspan'];
1382
+ // 'svg:use': SVGAttributesMap['use'];
1383
+ // 'svg:view': SVGAttributesMap['view'];
1320
1384
  }
1321
1385
 
1322
1386
  interface IntrinsicAttributes {
package/dist/jsx/index.mjs CHANGED
@@ -191,7 +191,14 @@ function applyContent(element, content) {
191
191
  }
192
192
  }
193
193
 
194
- const svgTempWrapper = document.createElement('div');
194
+ document.createElement('div');
195
+ const htmlCreator = (tag) => document.createElement(tag);
196
+ const svgCreator = (tag) => document.createElementNS('http://www.w3.org/2000/svg', tag);
197
+ const mathMLCreator = (tag) => document.createElementNS('http://www.w3.org/1998/Math/MathML', tag);
198
+ let creator = htmlCreator;
199
+ // # consts
200
+ const SVG_ATTR_FLAG = '__kt_svg__';
201
+ const MATHML_ATTR_FLAG = '__kt_mathml__';
195
202
  /**
196
203
  * Create an enhanced HTMLElement.
197
204
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -202,7 +209,7 @@ const svgTempWrapper = document.createElement('div');
202
209
  * ## About
203
210
  * @package @ktjs/core
204
211
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
205
- * @version 0.20.0 (Last Update: 2026.02.01 00:47:09.995)
212
+ * @version 0.20.2 (Last Update: 2026.02.01 18:34:51.151)
206
213
  * @license MIT
207
214
  * @link https://github.com/baendlorel/kt.js
208
215
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -213,15 +220,32 @@ const h = (tag, attr, content) => {
213
220
  if (typeof tag !== 'string') {
214
221
  $throw('tagName must be a string.');
215
222
  }
223
+ if (attr) {
224
+ if (SVG_ATTR_FLAG in attr) {
225
+ delete attr[SVG_ATTR_FLAG];
226
+ creator = svgCreator;
227
+ }
228
+ else if (MATHML_ATTR_FLAG in attr) {
229
+ delete attr[MATHML_ATTR_FLAG];
230
+ creator = mathMLCreator;
231
+ }
232
+ else {
233
+ creator = htmlCreator;
234
+ }
235
+ }
216
236
  // * start creating the element
217
- const element = document.createElement(tag);
237
+ const element = creator(tag);
218
238
  // * Handle content
219
239
  applyAttr(element, attr);
220
240
  applyContent(element, content);
221
- if (tag === 'svg') {
222
- svgTempWrapper.innerHTML = element.outerHTML;
223
- return svgTempWrapper.firstChild;
224
- }
241
+ // if (tag === 'svg') {
242
+ // tempWrapper.innerHTML = element.outerHTML;
243
+ // return tempWrapper.firstChild as HTML<T>;
244
+ // }
245
+ // if (tag === 'math') {
246
+ // tempWrapper.innerHTML = element.outerHTML;
247
+ // return tempWrapper.firstChild as HTML<T>;
248
+ // }
225
249
  return element;
226
250
  };
227
251
 
@@ -286,7 +310,7 @@ const dummyRef = { value: null };
286
310
  * @param tag html tag or function component
287
311
  * @param props properties/attributes
288
312
  */
289
- function jsx(tag, props = {}) {
313
+ function jsx(tag, props) {
290
314
  const ref = props.ref?.isKT ? props.ref : dummyRef;
291
315
  let el;
292
316
  if ('k-if' in props && !props['k-if']) {
package/dist/jsx/jsx-runtime.d.ts CHANGED
@@ -5,6 +5,7 @@ type otherstring = string & {};
5
5
  */
6
6
  type HTMLTag = keyof HTMLElementTagNameMap;
7
7
  type SVGTag = keyof SVGElementTagNameMap;
8
+ type MathMLTag = keyof MathMLElementTagNameMap;
8
9
 
9
10
  type RefChangeHandler<T> = (newValue: T, oldValue: T) => void;
10
11
  declare class KTRef<T> {
@@ -98,7 +99,7 @@ type KTPrefixedEventHandlers = {
98
99
 
99
100
  type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
100
101
 
101
- type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGElementTagNameMap[T] : T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
102
+ type HTML<T extends (HTMLTag | SVGTag | MathMLTag) & otherstring> = T extends SVGTag ? SVGElementTagNameMap[T] : T extends HTMLTag ? HTMLElementTagNameMap[T] : T extends MathMLTag ? MathMLElementTagNameMap[T] : HTMLElement;
102
103
  /**
103
104
  * Create an enhanced HTMLElement.
104
105
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -109,21 +110,21 @@ type HTML<T extends (HTMLTag | SVGTag) & otherstring> = T extends SVGTag ? SVGEl
109
110
  * ## About
110
111
  * @package @ktjs/core
111
112
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
112
- * @version 0.20.0 (Last Update: 2026.02.01 00:47:09.995)
113
+ * @version 0.20.2 (Last Update: 2026.02.01 18:34:51.151)
113
114
  * @license MIT
114
115
  * @link https://github.com/baendlorel/kt.js
115
116
  * @link https://baendlorel.github.io/ Welcome to my site!
116
117
  * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
117
118
  * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
118
119
  */
119
- declare const h: <T extends HTMLTag | SVGTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
120
+ declare const h: <T extends HTMLTag | SVGTag | MathMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
120
121
 
121
122
  type JSXTag = HTMLTag | ((props?: any) => HTMLElement) | ((props?: any) => Promise<HTMLElement>);
122
123
  /**
123
124
  * @param tag html tag or function component
124
125
  * @param props properties/attributes
125
126
  */
126
- declare function jsx(tag: JSXTag, props?: KTAttribute): HTMLElement;
127
+ declare function jsx(tag: JSXTag, props: KTAttribute): JSX.Element;
127
128
  /**
128
129
  * Fragment support - returns an array of children
129
130
  * Note: kt.js doesn't have a real Fragment concept,
package/dist/jsx/jsx-runtime.mjs CHANGED
@@ -191,7 +191,14 @@ function applyContent(element, content) {
191
191
  }
192
192
  }
193
193
 
194
- const svgTempWrapper = document.createElement('div');
194
+ document.createElement('div');
195
+ const htmlCreator = (tag) => document.createElement(tag);
196
+ const svgCreator = (tag) => document.createElementNS('http://www.w3.org/2000/svg', tag);
197
+ const mathMLCreator = (tag) => document.createElementNS('http://www.w3.org/1998/Math/MathML', tag);
198
+ let creator = htmlCreator;
199
+ // # consts
200
+ const SVG_ATTR_FLAG = '__kt_svg__';
201
+ const MATHML_ATTR_FLAG = '__kt_mathml__';
195
202
  /**
196
203
  * Create an enhanced HTMLElement.
197
204
  * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -202,7 +209,7 @@ const svgTempWrapper = document.createElement('div');
202
209
  * ## About
203
210
  * @package @ktjs/core
204
211
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
205
- * @version 0.20.0 (Last Update: 2026.02.01 00:47:09.995)
212
+ * @version 0.20.2 (Last Update: 2026.02.01 18:34:51.151)
206
213
  * @license MIT
207
214
  * @link https://github.com/baendlorel/kt.js
208
215
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -213,15 +220,32 @@ const h = (tag, attr, content) => {
213
220
  if (typeof tag !== 'string') {
214
221
  $throw('tagName must be a string.');
215
222
  }
223
+ if (attr) {
224
+ if (SVG_ATTR_FLAG in attr) {
225
+ delete attr[SVG_ATTR_FLAG];
226
+ creator = svgCreator;
227
+ }
228
+ else if (MATHML_ATTR_FLAG in attr) {
229
+ delete attr[MATHML_ATTR_FLAG];
230
+ creator = mathMLCreator;
231
+ }
232
+ else {
233
+ creator = htmlCreator;
234
+ }
235
+ }
216
236
  // * start creating the element
217
- const element = document.createElement(tag);
237
+ const element = creator(tag);
218
238
  // * Handle content
219
239
  applyAttr(element, attr);
220
240
  applyContent(element, content);
221
- if (tag === 'svg') {
222
- svgTempWrapper.innerHTML = element.outerHTML;
223
- return svgTempWrapper.firstChild;
224
- }
241
+ // if (tag === 'svg') {
242
+ // tempWrapper.innerHTML = element.outerHTML;
243
+ // return tempWrapper.firstChild as HTML<T>;
244
+ // }
245
+ // if (tag === 'math') {
246
+ // tempWrapper.innerHTML = element.outerHTML;
247
+ // return tempWrapper.firstChild as HTML<T>;
248
+ // }
225
249
  return element;
226
250
  };
227
251
 
@@ -286,7 +310,7 @@ const dummyRef = { value: null };
286
310
  * @param tag html tag or function component
287
311
  * @param props properties/attributes
288
312
  */
289
- function jsx(tag, props = {}) {
313
+ function jsx(tag, props) {
290
314
  const ref = props.ref?.isKT ? props.ref : dummyRef;
291
315
  let el;
292
316
  if ('k-if' in props && !props['k-if']) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ktjs/core",
3
- "version": "0.20.0",
3
+ "version": "0.20.2",
4
4
  "description": "Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support",
5
5
  "type": "module",
6
6
  "module": "./dist/index.mjs",