@ktjs/core 0.7.1 → 0.8.0

package/dist/jsx/jsx-runtime.d.ts

@@ -0,0 +1,128 @@
+type otherstring = string & {};
+
+/**
+ * Normal HTML tags like `div`, `span`, `a`, etc.
+ */
+type HTMLTag = keyof HTMLElementTagNameMap & otherstring;
+
+declare class Ref<T> {
+    value: T;
+    update: () => T;
+    constructor(value: T);
+}
+
+type Ctt = Ref<any> | HTMLElement | string | number | undefined;
+type KTRawContent = Ctt[] | Ctt;
+type KTRawAttr = KTAttribute | string;
+
+/**
+ * Used to create enhanced HTML elements
+ */
+interface KTBaseAttribute {
+  [k: string]: any;
+
+  id?: string;
+  class?: string;
+  style?: string | Partial<CSSStyleDeclaration>;
+
+  type?:
+    | 'text'
+    | 'password'
+    | 'email'
+    | 'number'
+    | 'tel'
+    | 'url'
+    | 'search'
+    | 'date'
+    | 'datetime-local'
+    | 'time'
+    | 'month'
+    | 'week'
+    | 'color'
+    | 'range'
+    | 'file'
+    | 'checkbox'
+    | 'radio'
+    | 'hidden'
+    | 'submit'
+    | 'reset'
+    | 'button'
+    | 'image'
+    | otherstring;
+  for?: string;
+
+  name?: string;
+  value?: string;
+  valueAsDate?: Date;
+  valueAsNumber?: number;
+  label?: string;
+  disabled?: boolean;
+
+  min?: string | number;
+  max?: string | number;
+  step?: string | number;
+
+  selected?: boolean;
+  checked?: boolean;
+
+  action?: string;
+  method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
+}
+
+type KTPrefixedEventHandlers = {
+  [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
+};
+
+type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
+
+type HTML<T extends HTMLTag & otherstring> = T extends HTMLTag ? HTMLElementTagNameMap[T] : HTMLElement;
+/**
+ * Create an enhanced HTMLElement.
+ * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
+ * @param tag tag of an `HTMLElement`
+ * @param attr attribute object or className
+ * @param content a string or an array of HTMLEnhancedElement as child nodes
+ *
+ * ## About
+ * @package @ktjs/core
+ * @author Kasukabe Tsumugi <futami16237@gmail.com>
+ * @version 0.8.0 (Last Update: 2025.12.25 11:01:24.676)
+ * @license MIT
+ * @link https://github.com/baendlorel/kt.js
+ * @link https://baendlorel.github.io/ Welcome to my site!
+ * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
+ * @copyright Copyright (c) 2025 Kasukabe Tsumugi. All rights reserved.
+ */
+declare const h: <T extends HTMLTag>(tag: T, attr?: KTRawAttr, content?: KTRawContent) => HTML<T>;
+
+/**
+ * This is a `falsy` value used to indicate "no node" in `h` function.
+ * - It's an object, so it's guaranteed to be unique and no need for polyfill of `symbol`.
+ */
+declare const ktnull: any;
+
+/**
+ * @param tag html tag
+ * @param props properties/attributes
+ * @param _metadata metadata is ignored
+ */
+declare function jsx<T extends HTMLTag>(tag: T, props: KTRawAttr, ..._metadata: any[]): HTMLElementTagNameMap[T];
+/**
+ * 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
+ */
+declare function Fragment(props: {
+    children?: KTRawContent;
+}): HTMLElement | typeof ktnull;
+/**
+ * JSX Development runtime - same as jsx but with additional dev checks
+ */
+declare const jsxDEV: typeof jsx;
+/**
+ * JSX runtime for React 17+ automatic runtime
+ * This is called when using jsx: "react-jsx" or "react-jsxdev"
+ */
+declare const jsxs: typeof jsx;
+
+export { Fragment, h as createElement, h, jsx, jsxDEV, jsxs };

package/dist/jsx/jsx-runtime.mjs

@@ -0,0 +1,293 @@
+const $throw = (message) => {
+    throw new Error('kt.js: ' + message);
+};
+
+const $isArray = Array.isArray;
+const $keys = Object.keys;
+const $defines = Object.defineProperties;
+const $mark = (func, tag) => $defines(func, { __ktjs_h__: { value: tag, configurable: true } });
+const emptyPromiseHandler = () => ({});
+if (typeof Promise === 'undefined') {
+    window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
+}
+
+/**
+ * This is a `falsy` value used to indicate "no node" in `h` function.
+ * - It's an object, so it's guaranteed to be unique and no need for polyfill of `symbol`.
+ */
+const ktnull = Object.create(null);
+
+/**
+ * & Remove `bind` because it is shockingly slower than wrapper
+ * & `window.document` is safe because it is not configurable and its setter is undefined
+ */
+const $appendChild = HTMLElement.prototype.appendChild;
+const originAppend = HTMLElement.prototype.append;
+const $append = // for ie 9/10/11
+ typeof originAppend === 'function'
+    ? function (...args) {
+        const nodes = args.filter((a) => a !== ktnull);
+        return originAppend.apply(this, nodes);
+    }
+    : function (...nodes) {
+        if (nodes.length < 50) {
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (typeof node === 'string') {
+                    $appendChild.call(this, document.createTextNode(node));
+                }
+                else if (node !== ktnull) {
+                    $appendChild.call(this, node);
+                }
+            }
+        }
+        else {
+            const fragment = document.createDocumentFragment();
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (typeof node === 'string') {
+                    $appendChild.call(fragment, document.createTextNode(node));
+                }
+                else if (node !== ktnull) {
+                    $appendChild.call(fragment, node);
+                }
+            }
+            $appendChild.call(this, fragment);
+        }
+    };
+
+function booleanHandler(element, key, value) {
+    if (key in element) {
+        element[key] = !!value;
+    }
+    else {
+        element.setAttribute(key, value);
+    }
+}
+function valueHandler(element, key, value) {
+    if (key in element) {
+        element[key] = value;
+    }
+    else {
+        element.setAttribute(key, value);
+    }
+}
+// Attribute handlers map for optimized lookup
+const handlers = {
+    checked: booleanHandler,
+    selected: booleanHandler,
+    value: valueHandler,
+    valueAsDate: valueHandler,
+    valueAsNumber: valueHandler,
+    defaultValue: valueHandler,
+    defaultChecked: booleanHandler,
+    defaultSelected: booleanHandler,
+    disabled: booleanHandler,
+    readOnly: booleanHandler,
+    multiple: booleanHandler,
+    required: booleanHandler,
+    autofocus: booleanHandler,
+    open: booleanHandler,
+    controls: booleanHandler,
+    autoplay: booleanHandler,
+    loop: booleanHandler,
+    muted: booleanHandler,
+    defer: booleanHandler,
+    async: booleanHandler,
+    hidden: function (element, _key, value) {
+        element.hidden = !!value;
+    },
+};
+const defaultHandler = function (element, key, value) {
+    return element.setAttribute(key, value);
+};
+function attrIsObject(element, attr) {
+    const classValue = attr.class;
+    const style = attr.style;
+    if (classValue !== undefined) {
+        element.className = classValue;
+        delete attr.class;
+    }
+    if (style) {
+        if (typeof style === 'string') {
+            element.setAttribute('style', style);
+        }
+        else if (typeof style === 'object') {
+            for (const key in style) {
+                element.style[key] = style[key];
+            }
+        }
+        delete attr.style;
+    }
+    const keys = $keys(attr);
+    for (let i = keys.length - 1; i >= 0; i--) {
+        const key = keys[i];
+        const o = attr[key];
+        // force register on:xxx as an event handler
+        // !if o is not valid, the throwing job will be done by `on`, not kt.js
+        if (key.startsWith('on:')) {
+            element.addEventListener(key.slice(3), o); // chop off the `@`
+            continue;
+        }
+        if (typeof o === 'function') {
+            (handlers[key] || defaultHandler)(element, key, o());
+        }
+        else {
+            (handlers[key] || defaultHandler)(element, key, o);
+        }
+    }
+    if (classValue !== undefined) {
+        attr.class = classValue;
+    }
+    if (style !== undefined) {
+        attr.style = style;
+    }
+}
+function applyAttr(element, attr) {
+    if (typeof attr === 'string') {
+        element.className = attr;
+    }
+    else if (typeof attr === 'object' && attr !== null) {
+        attrIsObject(element, attr);
+    }
+    else {
+        $throw('attr must be an object/string.');
+    }
+}
+
+const noop = () => ({});
+class Ref {
+    value;
+    update;
+    constructor(value) {
+        this.value = value;
+        this.update = noop;
+    }
+}
+
+function applyContent(element, content) {
+    if ($isArray(content)) {
+        for (let i = 0; i < content.length; i++) {
+            let c = content[i];
+            if (c instanceof Ref) {
+                $append.call(element, c.value);
+            }
+            else {
+                $append.call(element, c);
+            }
+        }
+    }
+    else {
+        if (content instanceof Ref) {
+            $append.call(element, content.value);
+        }
+        else {
+            $append.call(element, content);
+        }
+    }
+}
+
+/**
+ * Create an enhanced HTMLElement.
+ * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
+ * @param tag tag of an `HTMLElement`
+ * @param attr attribute object or className
+ * @param content a string or an array of HTMLEnhancedElement as child nodes
+ *
+ * ## About
+ * @package @ktjs/core
+ * @author Kasukabe Tsumugi <futami16237@gmail.com>
+ * @version 0.8.0 (Last Update: 2025.12.25 11:01:24.676)
+ * @license MIT
+ * @link https://github.com/baendlorel/kt.js
+ * @link https://baendlorel.github.io/ Welcome to my site!
+ * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
+ * @copyright Copyright (c) 2025 Kasukabe Tsumugi. All rights reserved.
+ */
+const h = (tag, attr = '', content = '') => {
+    if (typeof tag !== 'string') {
+        $throw('__func__ tagName must be a string.');
+    }
+    // * start creating the element
+    const element = document.createElement(tag);
+    // * Handle content
+    applyAttr(element, attr);
+    applyContent(element, content);
+    return element;
+};
+$mark(h, 'h');
+
+/**
+ * @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 ref = 'ref' in propObj && propObj.ref instanceof Ref ? propObj.ref : null;
+    if (ref) {
+        delete propObj.ref;
+    }
+    const el = h(tag, propObj, children);
+    if (ref) {
+        ref.value = el;
+        ref.update = () => {
+            const old = ref.value;
+            ref.value = h(tag, propObj, children);
+            old.replaceWith(ref.value);
+            return ref.value;
+        };
+    }
+    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 DEV called:', ...args);
+    console.log('chilren', args[1]?.children);
+    return jsx(...args);
+};
+/**
+ * JSX runtime for React 17+ automatic runtime
+ * This is called when using jsx: "react-jsx" or "react-jsxdev"
+ */
+const jsxs = jsx;
+
+export { Fragment, h as createElement, h, jsx, jsxDEV, jsxs };

package/package.json

@@ -1,14 +1,28 @@
 {
   "name": "@ktjs/core",
-  "version": "0.7.1",
-  "description": "Core functionality for kt.js - DOM manipulation utilities",
+  "version": "0.8.0",
+  "description": "Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support",
   "type": "module",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
-    "types": "./dist/index.d.ts",
-    "import": "./dist/index.mjs",
-    "default": "./dist/index.mjs"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    },
+    "./jsx": {
+      "types": "./dist/jsx/index.d.ts",
+      "import": "./dist/jsx/index.mjs"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx/jsx-runtime.d.ts",
+      "import": "./dist/jsx/jsx-runtime.mjs"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx/jsx-runtime.d.ts",
+      "import": "./dist/jsx/jsx-runtime.mjs"
+    }
   },
   "files": [
     "dist"