@minejs/jsx 0.0.4 → 0.0.5
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/README.md +1 -1
- package/dist/index.d.cts +4 -84
- package/dist/index.d.ts +4 -84
- package/dist/jsx-dev-runtime-Cf8gl1gB.d.cts +85 -0
- package/dist/jsx-dev-runtime-Cf8gl1gB.d.ts +85 -0
- package/dist/jsx-dev-runtime.cjs +2 -0
- package/dist/jsx-dev-runtime.cjs.map +1 -0
- package/dist/jsx-dev-runtime.d.cts +2 -0
- package/dist/jsx-dev-runtime.d.ts +2 -0
- package/dist/jsx-dev-runtime.js +2 -0
- package/dist/jsx-dev-runtime.js.map +1 -0
- package/dist/jsx-runtime.cjs +2 -0
- package/dist/jsx-runtime.cjs.map +1 -0
- package/dist/jsx-runtime.d.cts +2 -0
- package/dist/jsx-runtime.d.ts +2 -0
- package/dist/jsx-runtime.js +2 -0
- package/dist/jsx-runtime.js.map +1 -0
- package/package.json +11 -1
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
</div>
|
|
9
9
|
|
|
10
10
|
<div align="center">
|
|
11
|
-
<img src="https://img.shields.io/badge/v-0.0.
|
|
11
|
+
<img src="https://img.shields.io/badge/v-0.0.5-black"/>
|
|
12
12
|
<img src="https://img.shields.io/badge/🔥-@minejs-black"/>
|
|
13
13
|
<br>
|
|
14
14
|
<img src="https://img.shields.io/badge/coverage-97.59%25-brightgreen" alt="Test Coverage" />
|
package/dist/index.d.cts
CHANGED
|
@@ -1,86 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
type ComponentFunction<P = any> = (props: P) => JSXElement | null;
|
|
5
|
-
interface JSXProps {
|
|
6
|
-
children?: any;
|
|
7
|
-
ref?: Signal<HTMLElement | null>;
|
|
8
|
-
[key: string]: any;
|
|
9
|
-
}
|
|
10
|
-
interface RenderOptions {
|
|
11
|
-
root?: HTMLElement;
|
|
12
|
-
mode?: 'replace' | 'append' | 'prepend';
|
|
13
|
-
onMount?: () => void;
|
|
14
|
-
onUnmount?: () => void;
|
|
15
|
-
}
|
|
16
|
-
interface MountedComponent {
|
|
17
|
-
element: Element | DocumentFragment;
|
|
18
|
-
unmount: () => void;
|
|
19
|
-
update: (newElement: JSXElement) => void;
|
|
20
|
-
}
|
|
21
|
-
declare global {
|
|
22
|
-
namespace JSX {
|
|
23
|
-
type Element = JSXElement;
|
|
24
|
-
type IntrinsicElements = Record<string, any>;
|
|
25
|
-
interface ElementChildrenAttribute {
|
|
26
|
-
children: object;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* Creates a DOM element from JSX
|
|
33
|
-
* This is called automatically by TypeScript when it sees JSX syntax
|
|
34
|
-
*/
|
|
35
|
-
declare function jsx(type: string | ComponentFunction, props: JSXProps | null): JSXElement | null;
|
|
36
|
-
/**
|
|
37
|
-
* Same as jsx() but for elements with multiple children
|
|
38
|
-
* (Used by TypeScript JSX transform)
|
|
39
|
-
*/
|
|
40
|
-
declare const jsxs: typeof jsx;
|
|
41
|
-
/**
|
|
42
|
-
* Fragment component (like React.Fragment)
|
|
43
|
-
*/
|
|
44
|
-
declare function Fragment(props: {
|
|
45
|
-
children?: any;
|
|
46
|
-
}): DocumentFragment;
|
|
47
|
-
/**
|
|
48
|
-
* Create a component from a function
|
|
49
|
-
* Provides a cleaner API than raw JSX
|
|
50
|
-
*/
|
|
51
|
-
declare function component<P = any>(fn: (props: P) => JSXElement | null): ComponentFunction<P>;
|
|
52
|
-
/**
|
|
53
|
-
* Create a component with setup function
|
|
54
|
-
* Similar to Vue's Composition API
|
|
55
|
-
*/
|
|
56
|
-
declare function defineComponent<P = any>(setup: (props: P) => () => JSXElement | null): ComponentFunction<P>;
|
|
57
|
-
/**
|
|
58
|
-
* Create multiple elements at once
|
|
59
|
-
*/
|
|
60
|
-
declare function createElements(elements: any[]): DocumentFragment;
|
|
61
|
-
/**
|
|
62
|
-
* Show/hide element based on condition
|
|
63
|
-
*/
|
|
64
|
-
declare function Show(props: {
|
|
65
|
-
when: boolean | Signal<boolean>;
|
|
66
|
-
children: any;
|
|
67
|
-
}): JSXElement | null;
|
|
68
|
-
/**
|
|
69
|
-
* Render different elements based on condition
|
|
70
|
-
*/
|
|
71
|
-
declare function Switch(props: {
|
|
72
|
-
children: {
|
|
73
|
-
when: boolean | Signal<boolean>;
|
|
74
|
-
children: any;
|
|
75
|
-
}[];
|
|
76
|
-
}): JSXElement | null;
|
|
77
|
-
/**
|
|
78
|
-
* Iterate over array and render elements
|
|
79
|
-
*/
|
|
80
|
-
declare function For<T>(props: {
|
|
81
|
-
each: T[] | Signal<T[]>;
|
|
82
|
-
children: (item: T, index: number) => JSXElement;
|
|
83
|
-
}): JSXElement;
|
|
1
|
+
import { J as JSXElement, R as RenderOptions, M as MountedComponent } from './jsx-dev-runtime-Cf8gl1gB.cjs';
|
|
2
|
+
export { C as ComponentFunction, f as For, F as Fragment, a as JSXProps, S as Show, e as Switch, c as component, g as createElements, d as defineComponent, j as jsx, b as jsxs } from './jsx-dev-runtime-Cf8gl1gB.cjs';
|
|
3
|
+
import '@minejs/signals';
|
|
84
4
|
|
|
85
5
|
/**
|
|
86
6
|
* Render a component to the DOM
|
|
@@ -160,4 +80,4 @@ declare function createRoot(container: HTMLElement | string): {
|
|
|
160
80
|
unmount(): void;
|
|
161
81
|
};
|
|
162
82
|
|
|
163
|
-
export {
|
|
83
|
+
export { ErrorBoundary, JSXElement, MountedComponent, RenderOptions, Suspense, Teleport, createPortal, createRoot, hydrate, isBrowser, lazy, mount, onDOMReady, queueUpdate, render };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,86 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
type ComponentFunction<P = any> = (props: P) => JSXElement | null;
|
|
5
|
-
interface JSXProps {
|
|
6
|
-
children?: any;
|
|
7
|
-
ref?: Signal<HTMLElement | null>;
|
|
8
|
-
[key: string]: any;
|
|
9
|
-
}
|
|
10
|
-
interface RenderOptions {
|
|
11
|
-
root?: HTMLElement;
|
|
12
|
-
mode?: 'replace' | 'append' | 'prepend';
|
|
13
|
-
onMount?: () => void;
|
|
14
|
-
onUnmount?: () => void;
|
|
15
|
-
}
|
|
16
|
-
interface MountedComponent {
|
|
17
|
-
element: Element | DocumentFragment;
|
|
18
|
-
unmount: () => void;
|
|
19
|
-
update: (newElement: JSXElement) => void;
|
|
20
|
-
}
|
|
21
|
-
declare global {
|
|
22
|
-
namespace JSX {
|
|
23
|
-
type Element = JSXElement;
|
|
24
|
-
type IntrinsicElements = Record<string, any>;
|
|
25
|
-
interface ElementChildrenAttribute {
|
|
26
|
-
children: object;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* Creates a DOM element from JSX
|
|
33
|
-
* This is called automatically by TypeScript when it sees JSX syntax
|
|
34
|
-
*/
|
|
35
|
-
declare function jsx(type: string | ComponentFunction, props: JSXProps | null): JSXElement | null;
|
|
36
|
-
/**
|
|
37
|
-
* Same as jsx() but for elements with multiple children
|
|
38
|
-
* (Used by TypeScript JSX transform)
|
|
39
|
-
*/
|
|
40
|
-
declare const jsxs: typeof jsx;
|
|
41
|
-
/**
|
|
42
|
-
* Fragment component (like React.Fragment)
|
|
43
|
-
*/
|
|
44
|
-
declare function Fragment(props: {
|
|
45
|
-
children?: any;
|
|
46
|
-
}): DocumentFragment;
|
|
47
|
-
/**
|
|
48
|
-
* Create a component from a function
|
|
49
|
-
* Provides a cleaner API than raw JSX
|
|
50
|
-
*/
|
|
51
|
-
declare function component<P = any>(fn: (props: P) => JSXElement | null): ComponentFunction<P>;
|
|
52
|
-
/**
|
|
53
|
-
* Create a component with setup function
|
|
54
|
-
* Similar to Vue's Composition API
|
|
55
|
-
*/
|
|
56
|
-
declare function defineComponent<P = any>(setup: (props: P) => () => JSXElement | null): ComponentFunction<P>;
|
|
57
|
-
/**
|
|
58
|
-
* Create multiple elements at once
|
|
59
|
-
*/
|
|
60
|
-
declare function createElements(elements: any[]): DocumentFragment;
|
|
61
|
-
/**
|
|
62
|
-
* Show/hide element based on condition
|
|
63
|
-
*/
|
|
64
|
-
declare function Show(props: {
|
|
65
|
-
when: boolean | Signal<boolean>;
|
|
66
|
-
children: any;
|
|
67
|
-
}): JSXElement | null;
|
|
68
|
-
/**
|
|
69
|
-
* Render different elements based on condition
|
|
70
|
-
*/
|
|
71
|
-
declare function Switch(props: {
|
|
72
|
-
children: {
|
|
73
|
-
when: boolean | Signal<boolean>;
|
|
74
|
-
children: any;
|
|
75
|
-
}[];
|
|
76
|
-
}): JSXElement | null;
|
|
77
|
-
/**
|
|
78
|
-
* Iterate over array and render elements
|
|
79
|
-
*/
|
|
80
|
-
declare function For<T>(props: {
|
|
81
|
-
each: T[] | Signal<T[]>;
|
|
82
|
-
children: (item: T, index: number) => JSXElement;
|
|
83
|
-
}): JSXElement;
|
|
1
|
+
import { J as JSXElement, R as RenderOptions, M as MountedComponent } from './jsx-dev-runtime-Cf8gl1gB.js';
|
|
2
|
+
export { C as ComponentFunction, f as For, F as Fragment, a as JSXProps, S as Show, e as Switch, c as component, g as createElements, d as defineComponent, j as jsx, b as jsxs } from './jsx-dev-runtime-Cf8gl1gB.js';
|
|
3
|
+
import '@minejs/signals';
|
|
84
4
|
|
|
85
5
|
/**
|
|
86
6
|
* Render a component to the DOM
|
|
@@ -160,4 +80,4 @@ declare function createRoot(container: HTMLElement | string): {
|
|
|
160
80
|
unmount(): void;
|
|
161
81
|
};
|
|
162
82
|
|
|
163
|
-
export {
|
|
83
|
+
export { ErrorBoundary, JSXElement, MountedComponent, RenderOptions, Suspense, Teleport, createPortal, createRoot, hydrate, isBrowser, lazy, mount, onDOMReady, queueUpdate, render };
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { Signal } from '@minejs/signals';
|
|
2
|
+
|
|
3
|
+
type JSXElement = Element | Text | DocumentFragment;
|
|
4
|
+
type ComponentFunction<P = any> = (props: P) => JSXElement | null;
|
|
5
|
+
interface JSXProps {
|
|
6
|
+
children?: any;
|
|
7
|
+
ref?: Signal<HTMLElement | null>;
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
}
|
|
10
|
+
interface RenderOptions {
|
|
11
|
+
root?: HTMLElement;
|
|
12
|
+
mode?: 'replace' | 'append' | 'prepend';
|
|
13
|
+
onMount?: () => void;
|
|
14
|
+
onUnmount?: () => void;
|
|
15
|
+
}
|
|
16
|
+
interface MountedComponent {
|
|
17
|
+
element: Element | DocumentFragment;
|
|
18
|
+
unmount: () => void;
|
|
19
|
+
update: (newElement: JSXElement) => void;
|
|
20
|
+
}
|
|
21
|
+
declare global {
|
|
22
|
+
namespace JSX {
|
|
23
|
+
type Element = JSXElement;
|
|
24
|
+
type IntrinsicElements = Record<string, any>;
|
|
25
|
+
interface ElementChildrenAttribute {
|
|
26
|
+
children: object;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Creates a DOM element from JSX
|
|
33
|
+
* This is called automatically by TypeScript when it sees JSX syntax
|
|
34
|
+
*/
|
|
35
|
+
declare function jsx(type: string | ComponentFunction, props: JSXProps | null): JSXElement | null;
|
|
36
|
+
/**
|
|
37
|
+
* Same as jsx() but for elements with multiple children
|
|
38
|
+
* (Used by TypeScript JSX transform)
|
|
39
|
+
*/
|
|
40
|
+
declare const jsxs: typeof jsx;
|
|
41
|
+
/**
|
|
42
|
+
* Fragment component (like React.Fragment)
|
|
43
|
+
*/
|
|
44
|
+
declare function Fragment(props: {
|
|
45
|
+
children?: any;
|
|
46
|
+
}): DocumentFragment;
|
|
47
|
+
/**
|
|
48
|
+
* Create a component from a function
|
|
49
|
+
* Provides a cleaner API than raw JSX
|
|
50
|
+
*/
|
|
51
|
+
declare function component<P = any>(fn: (props: P) => JSXElement | null): ComponentFunction<P>;
|
|
52
|
+
/**
|
|
53
|
+
* Create a component with setup function
|
|
54
|
+
* Similar to Vue's Composition API
|
|
55
|
+
*/
|
|
56
|
+
declare function defineComponent<P = any>(setup: (props: P) => () => JSXElement | null): ComponentFunction<P>;
|
|
57
|
+
/**
|
|
58
|
+
* Create multiple elements at once
|
|
59
|
+
*/
|
|
60
|
+
declare function createElements(elements: any[]): DocumentFragment;
|
|
61
|
+
/**
|
|
62
|
+
* Show/hide element based on condition
|
|
63
|
+
*/
|
|
64
|
+
declare function Show(props: {
|
|
65
|
+
when: boolean | Signal<boolean>;
|
|
66
|
+
children: any;
|
|
67
|
+
}): JSXElement | null;
|
|
68
|
+
/**
|
|
69
|
+
* Render different elements based on condition
|
|
70
|
+
*/
|
|
71
|
+
declare function Switch(props: {
|
|
72
|
+
children: {
|
|
73
|
+
when: boolean | Signal<boolean>;
|
|
74
|
+
children: any;
|
|
75
|
+
}[];
|
|
76
|
+
}): JSXElement | null;
|
|
77
|
+
/**
|
|
78
|
+
* Iterate over array and render elements
|
|
79
|
+
*/
|
|
80
|
+
declare function For<T>(props: {
|
|
81
|
+
each: T[] | Signal<T[]>;
|
|
82
|
+
children: (item: T, index: number) => JSXElement;
|
|
83
|
+
}): JSXElement;
|
|
84
|
+
|
|
85
|
+
export { type ComponentFunction as C, Fragment as F, type JSXElement as J, type MountedComponent as M, type RenderOptions as R, Show as S, type JSXProps as a, jsxs as b, component as c, defineComponent as d, Switch as e, For as f, createElements as g, jsx as j };
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { Signal } from '@minejs/signals';
|
|
2
|
+
|
|
3
|
+
type JSXElement = Element | Text | DocumentFragment;
|
|
4
|
+
type ComponentFunction<P = any> = (props: P) => JSXElement | null;
|
|
5
|
+
interface JSXProps {
|
|
6
|
+
children?: any;
|
|
7
|
+
ref?: Signal<HTMLElement | null>;
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
}
|
|
10
|
+
interface RenderOptions {
|
|
11
|
+
root?: HTMLElement;
|
|
12
|
+
mode?: 'replace' | 'append' | 'prepend';
|
|
13
|
+
onMount?: () => void;
|
|
14
|
+
onUnmount?: () => void;
|
|
15
|
+
}
|
|
16
|
+
interface MountedComponent {
|
|
17
|
+
element: Element | DocumentFragment;
|
|
18
|
+
unmount: () => void;
|
|
19
|
+
update: (newElement: JSXElement) => void;
|
|
20
|
+
}
|
|
21
|
+
declare global {
|
|
22
|
+
namespace JSX {
|
|
23
|
+
type Element = JSXElement;
|
|
24
|
+
type IntrinsicElements = Record<string, any>;
|
|
25
|
+
interface ElementChildrenAttribute {
|
|
26
|
+
children: object;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Creates a DOM element from JSX
|
|
33
|
+
* This is called automatically by TypeScript when it sees JSX syntax
|
|
34
|
+
*/
|
|
35
|
+
declare function jsx(type: string | ComponentFunction, props: JSXProps | null): JSXElement | null;
|
|
36
|
+
/**
|
|
37
|
+
* Same as jsx() but for elements with multiple children
|
|
38
|
+
* (Used by TypeScript JSX transform)
|
|
39
|
+
*/
|
|
40
|
+
declare const jsxs: typeof jsx;
|
|
41
|
+
/**
|
|
42
|
+
* Fragment component (like React.Fragment)
|
|
43
|
+
*/
|
|
44
|
+
declare function Fragment(props: {
|
|
45
|
+
children?: any;
|
|
46
|
+
}): DocumentFragment;
|
|
47
|
+
/**
|
|
48
|
+
* Create a component from a function
|
|
49
|
+
* Provides a cleaner API than raw JSX
|
|
50
|
+
*/
|
|
51
|
+
declare function component<P = any>(fn: (props: P) => JSXElement | null): ComponentFunction<P>;
|
|
52
|
+
/**
|
|
53
|
+
* Create a component with setup function
|
|
54
|
+
* Similar to Vue's Composition API
|
|
55
|
+
*/
|
|
56
|
+
declare function defineComponent<P = any>(setup: (props: P) => () => JSXElement | null): ComponentFunction<P>;
|
|
57
|
+
/**
|
|
58
|
+
* Create multiple elements at once
|
|
59
|
+
*/
|
|
60
|
+
declare function createElements(elements: any[]): DocumentFragment;
|
|
61
|
+
/**
|
|
62
|
+
* Show/hide element based on condition
|
|
63
|
+
*/
|
|
64
|
+
declare function Show(props: {
|
|
65
|
+
when: boolean | Signal<boolean>;
|
|
66
|
+
children: any;
|
|
67
|
+
}): JSXElement | null;
|
|
68
|
+
/**
|
|
69
|
+
* Render different elements based on condition
|
|
70
|
+
*/
|
|
71
|
+
declare function Switch(props: {
|
|
72
|
+
children: {
|
|
73
|
+
when: boolean | Signal<boolean>;
|
|
74
|
+
children: any;
|
|
75
|
+
}[];
|
|
76
|
+
}): JSXElement | null;
|
|
77
|
+
/**
|
|
78
|
+
* Iterate over array and render elements
|
|
79
|
+
*/
|
|
80
|
+
declare function For<T>(props: {
|
|
81
|
+
each: T[] | Signal<T[]>;
|
|
82
|
+
children: (item: T, index: number) => JSXElement;
|
|
83
|
+
}): JSXElement;
|
|
84
|
+
|
|
85
|
+
export { type ComponentFunction as C, Fragment as F, type JSXElement as J, type MountedComponent as M, type RenderOptions as R, Show as S, type JSXProps as a, jsxs as b, component as c, defineComponent as d, Switch as e, For as f, createElements as g, jsx as j };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var signals=require('@minejs/signals');function s(e,n){return typeof e=="function"?e(n||{}):m(e,n||{})}var u=s;function d(e){let n=document.createDocumentFragment();return a(e.children).forEach(t=>{t instanceof Node&&n.appendChild(t);}),n}function m(e,n){let o=document.createElement(e);for(let[t,i]of Object.entries(n))t==="children"?h(o,i):t==="ref"?p(o,i):t.startsWith("on")?y(o,t,i):t==="className"||t==="class"?E(o,i):t==="style"?g(o,i):signals.isSignal(i)?S(o,t,i):typeof i=="boolean"?i&&o.setAttribute(t,""):i!=null&&o.setAttribute(t,String(i));return o}function h(e,n){a(n).forEach(t=>{if(t instanceof Node)e.appendChild(t);else if(signals.isSignal(t)){let i=document.createTextNode("");signals.effect(()=>{i.textContent=String(t());}),e.appendChild(i);}else t!=null&&t!==false&&e.appendChild(document.createTextNode(String(t)));});}function a(e){return e==null||e===false?[]:Array.isArray(e)?e.flatMap(a):[e]}function p(e,n){signals.isSignal(n)?n.set(e):typeof n=="function"&&n(e);}function y(e,n,o){if(typeof o!="function")return;let t=n.slice(2).toLowerCase();e.addEventListener(t,o);}function E(e,n){signals.isSignal(n)?signals.effect(()=>{let o=n();o!=null&&(e.className=String(o));}):n!=null&&(e.className=String(n));}function g(e,n){signals.isSignal(n)?signals.effect(()=>{let o=n();c(e,o);}):c(e,n);}function c(e,n){typeof n=="string"?e.style.cssText=n:typeof n=="object"&&n!=null&&Object.entries(n).forEach(([o,t])=>{if(t!=null){let i=o.replace(/[A-Z]/g,f=>`-${f.toLowerCase()}`);e.style.setProperty(i,String(t));}});}function S(e,n,o){signals.effect(()=>{let t=o();t!=null?n in e?e[n]=t:e.setAttribute(n,String(t)):e.removeAttribute(n);});}exports.Fragment=d;exports.jsxDEV=s;exports.jsxs=u;//# sourceMappingURL=jsx-dev-runtime.cjs.map
|
|
2
|
+
//# sourceMappingURL=jsx-dev-runtime.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/mod/runtime.ts"],"names":["jsx","type","props","createHTMLElement","jsxs","Fragment","fragment","normalizeChildren","child","element","key","value","appendChildren","handleRef","handleEvent","handleClassName","handleStyle","isSignal","handleReactiveProp","parent","children","textNode","effect","ref","eventName","handler","event","className","styles","applyStyles","cssKey","m","signal"],"mappings":"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","file":"jsx-dev-runtime.cjs","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n// src/mod/runtime.ts\n//\n// Made with ❤️ by Maysara.\n\n\n\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\n\n import { effect, isSignal, type Signal } from '@minejs/signals';\n import type { JSXElement, JSXProps, ComponentFunction } from '../types';\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\n\n\n\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\n\n /**\n * Creates a DOM element from JSX\n * This is called automatically by TypeScript when it sees JSX syntax\n */\n export function jsx(\n type: string | ComponentFunction,\n props: JSXProps | null\n ): JSXElement | null {\n // Handle component (function)\n if (typeof type === 'function') {\n return type(props || {});\n }\n\n // Handle HTML element (string)\n return createHTMLElement(type, props || {});\n }\n\n /**\n * Same as jsx() but for elements with multiple children\n * (Used by TypeScript JSX transform)\n */\n export const jsxs = jsx;\n\n /**\n * Fragment component (like React.Fragment)\n */\n export function Fragment(props: { children?: any }): DocumentFragment {\n const fragment = document.createDocumentFragment();\n const children = normalizeChildren(props.children);\n\n children.forEach(child => {\n if (child instanceof Node) {\n fragment.appendChild(child);\n }\n });\n\n return fragment;\n }\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\n\n\n\n// ╔════════════════════════════════════════ ════ ════════════════════════════════════════╗\n\n // ============================================================================\n // HTML ELEMENT CREATION\n // ============================================================================\n\n function createHTMLElement(type: string, props: JSXProps): Element {\n const element = document.createElement(type);\n\n // Set properties and attributes\n for (const [key, value] of Object.entries(props)) {\n if (key === 'children') {\n // Handle children separately\n appendChildren(element, value);\n } else if (key === 'ref') {\n // Handle ref\n handleRef(element as HTMLElement, value);\n } else if (key.startsWith('on')) {\n // Handle events (onClick, onInput, etc)\n handleEvent(element, key, value);\n } else if (key === 'className' || key === 'class') {\n // Handle className/class\n handleClassName(element, value);\n } else if (key === 'style') {\n // Handle inline styles\n handleStyle(element as HTMLElement, value);\n } else if (isSignal(value)) {\n // Handle reactive props\n handleReactiveProp(element, key, value);\n } else if (typeof value === 'boolean') {\n // Handle boolean attributes (disabled, checked, etc)\n if (value) {\n element.setAttribute(key, '');\n }\n } else if (value != null) {\n // Handle static props\n element.setAttribute(key, String(value));\n }\n }\n\n return element;\n }\n\n // ============================================================================\n // CHILDREN HANDLING\n // ============================================================================\n\n function appendChildren(parent: Element, children: any): void {\n const normalized = normalizeChildren(children);\n\n normalized.forEach(child => {\n if (child instanceof Node) {\n parent.appendChild(child);\n } else if (isSignal(child)) {\n // Reactive text node\n const textNode = document.createTextNode('');\n effect(() => {\n textNode.textContent = String(child());\n });\n parent.appendChild(textNode);\n } else if (child != null && child !== false) {\n // Static text node\n parent.appendChild(document.createTextNode(String(child)));\n }\n });\n }\n\n function normalizeChildren(children: any): any[] {\n if (children == null || children === false) {\n return [];\n }\n\n if (Array.isArray(children)) {\n return children.flatMap(normalizeChildren);\n }\n\n return [children];\n }\n\n // ============================================================================\n // REF HANDLING\n // ============================================================================\n\n function handleRef(element: HTMLElement, ref: any): void {\n if (isSignal(ref)) {\n ref.set(element);\n } else if (typeof ref === 'function') {\n ref(element);\n }\n }\n\n // ============================================================================\n // EVENT HANDLING\n // ============================================================================\n\n function handleEvent(element: Element, eventName: string, handler: any): void {\n if (typeof handler !== 'function') return;\n\n // Convert onClick → click, onInput → input, etc\n const event = eventName.slice(2).toLowerCase();\n\n element.addEventListener(event, handler);\n }\n\n // ============================================================================\n // CLASS NAME HANDLING\n // ============================================================================\n\n function handleClassName(element: Element, value: any): void {\n if (isSignal(value)) {\n // Reactive className\n effect(() => {\n const className = value();\n if (className != null) {\n element.className = String(className);\n }\n });\n } else if (value != null) {\n // Static className\n element.className = String(value);\n }\n }\n\n // ============================================================================\n // STYLE HANDLING\n // ============================================================================\n\n function handleStyle(element: HTMLElement, value: any): void {\n if (isSignal(value)) {\n // Reactive style object\n effect(() => {\n const styles = value();\n applyStyles(element, styles);\n });\n } else {\n // Static style\n applyStyles(element, value);\n }\n }\n\n function applyStyles(element: HTMLElement, styles: any): void {\n if (typeof styles === 'string') {\n element.style.cssText = styles;\n } else if (typeof styles === 'object' && styles != null) {\n Object.entries(styles).forEach(([key, value]) => {\n if (value != null) {\n // Convert camelCase to kebab-case\n const cssKey = key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);\n element.style.setProperty(cssKey, String(value));\n }\n });\n }\n }\n\n // ============================================================================\n // REACTIVE PROP HANDLING\n // ============================================================================\n\n function handleReactiveProp(element: Element, key: string, signal: Signal<any>): void {\n effect(() => {\n const value = signal();\n\n if (value != null) {\n if (key in element) {\n // Set as property (for input.value, etc)\n ;(element as any)[key] = value;\n } else {\n // Set as attribute\n element.setAttribute(key, String(value));\n }\n } else {\n element.removeAttribute(key);\n }\n });\n }\n\n /**\n * Create a component from a function\n * Provides a cleaner API than raw JSX\n */\n export function component<P = any>(\n fn: (props: P) => JSXElement | null\n ): ComponentFunction<P> {\n return fn;\n }\n\n /**\n * Create a component with setup function\n * Similar to Vue's Composition API\n */\n export function defineComponent<P = any>(\n setup: (props: P) => () => JSXElement | null\n ): ComponentFunction<P> {\n return (props: P) => {\n const render = setup(props);\n return render();\n };\n }\n\n // ============================================================================\n // UTILITY FUNCTIONS\n // ============================================================================\n\n /**\n * Create multiple elements at once\n */\n export function createElements(elements: any[]): DocumentFragment {\n const fragment = document.createDocumentFragment();\n\n elements.forEach(el => {\n if (el instanceof Node) {\n fragment.appendChild(el);\n }\n });\n\n return fragment;\n }\n\n /**\n * Show/hide element based on condition\n */\n export function Show(props: {\n when: boolean | Signal<boolean>\n children: any\n }): JSXElement | null {\n if (isSignal(props.when)) {\n const placeholder = document.createComment('show');\n const parent = document.createDocumentFragment();\n parent.appendChild(placeholder);\n\n let currentElement: Element | null = null;\n\n effect(() => {\n const when = props.when as Signal<boolean>;\n const condition = when();\n\n if (condition && !currentElement) {\n // Show: create and insert element\n const children = normalizeChildren(props.children);\n currentElement = children[0] as Element;\n\n if (currentElement instanceof Node) {\n placeholder.parentNode?.insertBefore(currentElement, placeholder);\n }\n } else if (!condition && currentElement) {\n // Hide: remove element\n currentElement.remove();\n currentElement = null;\n }\n });\n\n return parent as any;\n } else {\n // Static condition\n return (props.when as boolean) ? jsx(Fragment, { children: props.children }) : null;\n }\n }\n\n /**\n * Render different elements based on condition\n */\n export function Switch(props: {\n children: { when: boolean | Signal<boolean>; children: any }[]\n }): JSXElement | null {\n // Find first matching case\n for (const caseItem of props.children) {\n const condition = isSignal(caseItem.when) ? caseItem.when() : caseItem.when;\n\n if (condition) {\n return jsx(Fragment, { children: caseItem.children });\n }\n }\n\n return null;\n }\n\n /**\n * Iterate over array and render elements\n */\n export function For<T>(props: {\n each: T[] | Signal<T[]>\n children: (item: T, index: number) => JSXElement\n }): JSXElement {\n const fragment = document.createDocumentFragment();\n\n if (isSignal(props.each)) {\n // Reactive list\n const container = document.createElement('div');\n container.style.display = 'contents'; // Don't affect layout\n\n effect(() => {\n const each = props.each as Signal<T[]>;\n const items = each();\n container.innerHTML = ''; // Clear\n\n items.forEach((item: any, index: any) => {\n const element = props.children(item, index);\n if (element instanceof Node) {\n container.appendChild(element);\n }\n });\n });\n\n fragment.appendChild(container);\n } else {\n // Static list\n const each = props.each as T[];\n each.forEach((item, index) => {\n const element = props.children(item, index);\n if (element instanceof Node) {\n fragment.appendChild(element);\n }\n });\n }\n\n return fragment as any;\n }\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\n\n\n\n// ╔════════════════════════════════════════ ════ ════════════════════════════════════════╗\n\n export default {\n jsx,\n jsxs,\n Fragment,\n component,\n defineComponent,\n Show,\n Switch,\n For,\n createElements\n };\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {isSignal,effect}from'@minejs/signals';function s(e,n){return typeof e=="function"?e(n||{}):m(e,n||{})}var u=s;function d(e){let n=document.createDocumentFragment();return a(e.children).forEach(t=>{t instanceof Node&&n.appendChild(t);}),n}function m(e,n){let o=document.createElement(e);for(let[t,i]of Object.entries(n))t==="children"?h(o,i):t==="ref"?p(o,i):t.startsWith("on")?y(o,t,i):t==="className"||t==="class"?E(o,i):t==="style"?g(o,i):isSignal(i)?S(o,t,i):typeof i=="boolean"?i&&o.setAttribute(t,""):i!=null&&o.setAttribute(t,String(i));return o}function h(e,n){a(n).forEach(t=>{if(t instanceof Node)e.appendChild(t);else if(isSignal(t)){let i=document.createTextNode("");effect(()=>{i.textContent=String(t());}),e.appendChild(i);}else t!=null&&t!==false&&e.appendChild(document.createTextNode(String(t)));});}function a(e){return e==null||e===false?[]:Array.isArray(e)?e.flatMap(a):[e]}function p(e,n){isSignal(n)?n.set(e):typeof n=="function"&&n(e);}function y(e,n,o){if(typeof o!="function")return;let t=n.slice(2).toLowerCase();e.addEventListener(t,o);}function E(e,n){isSignal(n)?effect(()=>{let o=n();o!=null&&(e.className=String(o));}):n!=null&&(e.className=String(n));}function g(e,n){isSignal(n)?effect(()=>{let o=n();c(e,o);}):c(e,n);}function c(e,n){typeof n=="string"?e.style.cssText=n:typeof n=="object"&&n!=null&&Object.entries(n).forEach(([o,t])=>{if(t!=null){let i=o.replace(/[A-Z]/g,f=>`-${f.toLowerCase()}`);e.style.setProperty(i,String(t));}});}function S(e,n,o){effect(()=>{let t=o();t!=null?n in e?e[n]=t:e.setAttribute(n,String(t)):e.removeAttribute(n);});}export{d as Fragment,s as jsxDEV,u as jsxs};//# sourceMappingURL=jsx-dev-runtime.js.map
|
|
2
|
+
//# sourceMappingURL=jsx-dev-runtime.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/mod/runtime.ts"],"names":["jsx","type","props","createHTMLElement","jsxs","Fragment","fragment","normalizeChildren","child","element","key","value","appendChildren","handleRef","handleEvent","handleClassName","handleStyle","isSignal","handleReactiveProp","parent","children","textNode","effect","ref","eventName","handler","event","className","styles","applyStyles","cssKey","m","signal"],"mappings":"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","file":"jsx-dev-runtime.js","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n// src/mod/runtime.ts\n//\n// Made with ❤️ by Maysara.\n\n\n\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\n\n import { effect, isSignal, type Signal } from '@minejs/signals';\n import type { JSXElement, JSXProps, ComponentFunction } from '../types';\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\n\n\n\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\n\n /**\n * Creates a DOM element from JSX\n * This is called automatically by TypeScript when it sees JSX syntax\n */\n export function jsx(\n type: string | ComponentFunction,\n props: JSXProps | null\n ): JSXElement | null {\n // Handle component (function)\n if (typeof type === 'function') {\n return type(props || {});\n }\n\n // Handle HTML element (string)\n return createHTMLElement(type, props || {});\n }\n\n /**\n * Same as jsx() but for elements with multiple children\n * (Used by TypeScript JSX transform)\n */\n export const jsxs = jsx;\n\n /**\n * Fragment component (like React.Fragment)\n */\n export function Fragment(props: { children?: any }): DocumentFragment {\n const fragment = document.createDocumentFragment();\n const children = normalizeChildren(props.children);\n\n children.forEach(child => {\n if (child instanceof Node) {\n fragment.appendChild(child);\n }\n });\n\n return fragment;\n }\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\n\n\n\n// ╔════════════════════════════════════════ ════ ════════════════════════════════════════╗\n\n // ============================================================================\n // HTML ELEMENT CREATION\n // ============================================================================\n\n function createHTMLElement(type: string, props: JSXProps): Element {\n const element = document.createElement(type);\n\n // Set properties and attributes\n for (const [key, value] of Object.entries(props)) {\n if (key === 'children') {\n // Handle children separately\n appendChildren(element, value);\n } else if (key === 'ref') {\n // Handle ref\n handleRef(element as HTMLElement, value);\n } else if (key.startsWith('on')) {\n // Handle events (onClick, onInput, etc)\n handleEvent(element, key, value);\n } else if (key === 'className' || key === 'class') {\n // Handle className/class\n handleClassName(element, value);\n } else if (key === 'style') {\n // Handle inline styles\n handleStyle(element as HTMLElement, value);\n } else if (isSignal(value)) {\n // Handle reactive props\n handleReactiveProp(element, key, value);\n } else if (typeof value === 'boolean') {\n // Handle boolean attributes (disabled, checked, etc)\n if (value) {\n element.setAttribute(key, '');\n }\n } else if (value != null) {\n // Handle static props\n element.setAttribute(key, String(value));\n }\n }\n\n return element;\n }\n\n // ============================================================================\n // CHILDREN HANDLING\n // ============================================================================\n\n function appendChildren(parent: Element, children: any): void {\n const normalized = normalizeChildren(children);\n\n normalized.forEach(child => {\n if (child instanceof Node) {\n parent.appendChild(child);\n } else if (isSignal(child)) {\n // Reactive text node\n const textNode = document.createTextNode('');\n effect(() => {\n textNode.textContent = String(child());\n });\n parent.appendChild(textNode);\n } else if (child != null && child !== false) {\n // Static text node\n parent.appendChild(document.createTextNode(String(child)));\n }\n });\n }\n\n function normalizeChildren(children: any): any[] {\n if (children == null || children === false) {\n return [];\n }\n\n if (Array.isArray(children)) {\n return children.flatMap(normalizeChildren);\n }\n\n return [children];\n }\n\n // ============================================================================\n // REF HANDLING\n // ============================================================================\n\n function handleRef(element: HTMLElement, ref: any): void {\n if (isSignal(ref)) {\n ref.set(element);\n } else if (typeof ref === 'function') {\n ref(element);\n }\n }\n\n // ============================================================================\n // EVENT HANDLING\n // ============================================================================\n\n function handleEvent(element: Element, eventName: string, handler: any): void {\n if (typeof handler !== 'function') return;\n\n // Convert onClick → click, onInput → input, etc\n const event = eventName.slice(2).toLowerCase();\n\n element.addEventListener(event, handler);\n }\n\n // ============================================================================\n // CLASS NAME HANDLING\n // ============================================================================\n\n function handleClassName(element: Element, value: any): void {\n if (isSignal(value)) {\n // Reactive className\n effect(() => {\n const className = value();\n if (className != null) {\n element.className = String(className);\n }\n });\n } else if (value != null) {\n // Static className\n element.className = String(value);\n }\n }\n\n // ============================================================================\n // STYLE HANDLING\n // ============================================================================\n\n function handleStyle(element: HTMLElement, value: any): void {\n if (isSignal(value)) {\n // Reactive style object\n effect(() => {\n const styles = value();\n applyStyles(element, styles);\n });\n } else {\n // Static style\n applyStyles(element, value);\n }\n }\n\n function applyStyles(element: HTMLElement, styles: any): void {\n if (typeof styles === 'string') {\n element.style.cssText = styles;\n } else if (typeof styles === 'object' && styles != null) {\n Object.entries(styles).forEach(([key, value]) => {\n if (value != null) {\n // Convert camelCase to kebab-case\n const cssKey = key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);\n element.style.setProperty(cssKey, String(value));\n }\n });\n }\n }\n\n // ============================================================================\n // REACTIVE PROP HANDLING\n // ============================================================================\n\n function handleReactiveProp(element: Element, key: string, signal: Signal<any>): void {\n effect(() => {\n const value = signal();\n\n if (value != null) {\n if (key in element) {\n // Set as property (for input.value, etc)\n ;(element as any)[key] = value;\n } else {\n // Set as attribute\n element.setAttribute(key, String(value));\n }\n } else {\n element.removeAttribute(key);\n }\n });\n }\n\n /**\n * Create a component from a function\n * Provides a cleaner API than raw JSX\n */\n export function component<P = any>(\n fn: (props: P) => JSXElement | null\n ): ComponentFunction<P> {\n return fn;\n }\n\n /**\n * Create a component with setup function\n * Similar to Vue's Composition API\n */\n export function defineComponent<P = any>(\n setup: (props: P) => () => JSXElement | null\n ): ComponentFunction<P> {\n return (props: P) => {\n const render = setup(props);\n return render();\n };\n }\n\n // ============================================================================\n // UTILITY FUNCTIONS\n // ============================================================================\n\n /**\n * Create multiple elements at once\n */\n export function createElements(elements: any[]): DocumentFragment {\n const fragment = document.createDocumentFragment();\n\n elements.forEach(el => {\n if (el instanceof Node) {\n fragment.appendChild(el);\n }\n });\n\n return fragment;\n }\n\n /**\n * Show/hide element based on condition\n */\n export function Show(props: {\n when: boolean | Signal<boolean>\n children: any\n }): JSXElement | null {\n if (isSignal(props.when)) {\n const placeholder = document.createComment('show');\n const parent = document.createDocumentFragment();\n parent.appendChild(placeholder);\n\n let currentElement: Element | null = null;\n\n effect(() => {\n const when = props.when as Signal<boolean>;\n const condition = when();\n\n if (condition && !currentElement) {\n // Show: create and insert element\n const children = normalizeChildren(props.children);\n currentElement = children[0] as Element;\n\n if (currentElement instanceof Node) {\n placeholder.parentNode?.insertBefore(currentElement, placeholder);\n }\n } else if (!condition && currentElement) {\n // Hide: remove element\n currentElement.remove();\n currentElement = null;\n }\n });\n\n return parent as any;\n } else {\n // Static condition\n return (props.when as boolean) ? jsx(Fragment, { children: props.children }) : null;\n }\n }\n\n /**\n * Render different elements based on condition\n */\n export function Switch(props: {\n children: { when: boolean | Signal<boolean>; children: any }[]\n }): JSXElement | null {\n // Find first matching case\n for (const caseItem of props.children) {\n const condition = isSignal(caseItem.when) ? caseItem.when() : caseItem.when;\n\n if (condition) {\n return jsx(Fragment, { children: caseItem.children });\n }\n }\n\n return null;\n }\n\n /**\n * Iterate over array and render elements\n */\n export function For<T>(props: {\n each: T[] | Signal<T[]>\n children: (item: T, index: number) => JSXElement\n }): JSXElement {\n const fragment = document.createDocumentFragment();\n\n if (isSignal(props.each)) {\n // Reactive list\n const container = document.createElement('div');\n container.style.display = 'contents'; // Don't affect layout\n\n effect(() => {\n const each = props.each as Signal<T[]>;\n const items = each();\n container.innerHTML = ''; // Clear\n\n items.forEach((item: any, index: any) => {\n const element = props.children(item, index);\n if (element instanceof Node) {\n container.appendChild(element);\n }\n });\n });\n\n fragment.appendChild(container);\n } else {\n // Static list\n const each = props.each as T[];\n each.forEach((item, index) => {\n const element = props.children(item, index);\n if (element instanceof Node) {\n fragment.appendChild(element);\n }\n });\n }\n\n return fragment as any;\n }\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\n\n\n\n// ╔════════════════════════════════════════ ════ ════════════════════════════════════════╗\n\n export default {\n jsx,\n jsxs,\n Fragment,\n component,\n defineComponent,\n Show,\n Switch,\n For,\n createElements\n };\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var signals=require('@minejs/signals');function s(e,n){return typeof e=="function"?e(n||{}):m(e,n||{})}var u=s;function d(e){let n=document.createDocumentFragment();return c(e.children).forEach(t=>{t instanceof Node&&n.appendChild(t);}),n}function m(e,n){let o=document.createElement(e);for(let[t,i]of Object.entries(n))t==="children"?h(o,i):t==="ref"?p(o,i):t.startsWith("on")?y(o,t,i):t==="className"||t==="class"?E(o,i):t==="style"?g(o,i):signals.isSignal(i)?S(o,t,i):typeof i=="boolean"?i&&o.setAttribute(t,""):i!=null&&o.setAttribute(t,String(i));return o}function h(e,n){c(n).forEach(t=>{if(t instanceof Node)e.appendChild(t);else if(signals.isSignal(t)){let i=document.createTextNode("");signals.effect(()=>{i.textContent=String(t());}),e.appendChild(i);}else t!=null&&t!==false&&e.appendChild(document.createTextNode(String(t)));});}function c(e){return e==null||e===false?[]:Array.isArray(e)?e.flatMap(c):[e]}function p(e,n){signals.isSignal(n)?n.set(e):typeof n=="function"&&n(e);}function y(e,n,o){if(typeof o!="function")return;let t=n.slice(2).toLowerCase();e.addEventListener(t,o);}function E(e,n){signals.isSignal(n)?signals.effect(()=>{let o=n();o!=null&&(e.className=String(o));}):n!=null&&(e.className=String(n));}function g(e,n){signals.isSignal(n)?signals.effect(()=>{let o=n();a(e,o);}):a(e,n);}function a(e,n){typeof n=="string"?e.style.cssText=n:typeof n=="object"&&n!=null&&Object.entries(n).forEach(([o,t])=>{if(t!=null){let i=o.replace(/[A-Z]/g,f=>`-${f.toLowerCase()}`);e.style.setProperty(i,String(t));}});}function S(e,n,o){signals.effect(()=>{let t=o();t!=null?n in e?e[n]=t:e.setAttribute(n,String(t)):e.removeAttribute(n);});}exports.Fragment=d;exports.jsx=s;exports.jsxs=u;//# sourceMappingURL=jsx-runtime.cjs.map
|
|
2
|
+
//# sourceMappingURL=jsx-runtime.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/mod/runtime.ts"],"names":["jsx","type","props","createHTMLElement","jsxs","Fragment","fragment","normalizeChildren","child","element","key","value","appendChildren","handleRef","handleEvent","handleClassName","handleStyle","isSignal","handleReactiveProp","parent","children","textNode","effect","ref","eventName","handler","event","className","styles","applyStyles","cssKey","m","signal"],"mappings":"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","file":"jsx-runtime.cjs","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n// src/mod/runtime.ts\n//\n// Made with ❤️ by Maysara.\n\n\n\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\n\n import { effect, isSignal, type Signal } from '@minejs/signals';\n import type { JSXElement, JSXProps, ComponentFunction } from '../types';\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\n\n\n\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\n\n /**\n * Creates a DOM element from JSX\n * This is called automatically by TypeScript when it sees JSX syntax\n */\n export function jsx(\n type: string | ComponentFunction,\n props: JSXProps | null\n ): JSXElement | null {\n // Handle component (function)\n if (typeof type === 'function') {\n return type(props || {});\n }\n\n // Handle HTML element (string)\n return createHTMLElement(type, props || {});\n }\n\n /**\n * Same as jsx() but for elements with multiple children\n * (Used by TypeScript JSX transform)\n */\n export const jsxs = jsx;\n\n /**\n * Fragment component (like React.Fragment)\n */\n export function Fragment(props: { children?: any }): DocumentFragment {\n const fragment = document.createDocumentFragment();\n const children = normalizeChildren(props.children);\n\n children.forEach(child => {\n if (child instanceof Node) {\n fragment.appendChild(child);\n }\n });\n\n return fragment;\n }\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\n\n\n\n// ╔════════════════════════════════════════ ════ ════════════════════════════════════════╗\n\n // ============================================================================\n // HTML ELEMENT CREATION\n // ============================================================================\n\n function createHTMLElement(type: string, props: JSXProps): Element {\n const element = document.createElement(type);\n\n // Set properties and attributes\n for (const [key, value] of Object.entries(props)) {\n if (key === 'children') {\n // Handle children separately\n appendChildren(element, value);\n } else if (key === 'ref') {\n // Handle ref\n handleRef(element as HTMLElement, value);\n } else if (key.startsWith('on')) {\n // Handle events (onClick, onInput, etc)\n handleEvent(element, key, value);\n } else if (key === 'className' || key === 'class') {\n // Handle className/class\n handleClassName(element, value);\n } else if (key === 'style') {\n // Handle inline styles\n handleStyle(element as HTMLElement, value);\n } else if (isSignal(value)) {\n // Handle reactive props\n handleReactiveProp(element, key, value);\n } else if (typeof value === 'boolean') {\n // Handle boolean attributes (disabled, checked, etc)\n if (value) {\n element.setAttribute(key, '');\n }\n } else if (value != null) {\n // Handle static props\n element.setAttribute(key, String(value));\n }\n }\n\n return element;\n }\n\n // ============================================================================\n // CHILDREN HANDLING\n // ============================================================================\n\n function appendChildren(parent: Element, children: any): void {\n const normalized = normalizeChildren(children);\n\n normalized.forEach(child => {\n if (child instanceof Node) {\n parent.appendChild(child);\n } else if (isSignal(child)) {\n // Reactive text node\n const textNode = document.createTextNode('');\n effect(() => {\n textNode.textContent = String(child());\n });\n parent.appendChild(textNode);\n } else if (child != null && child !== false) {\n // Static text node\n parent.appendChild(document.createTextNode(String(child)));\n }\n });\n }\n\n function normalizeChildren(children: any): any[] {\n if (children == null || children === false) {\n return [];\n }\n\n if (Array.isArray(children)) {\n return children.flatMap(normalizeChildren);\n }\n\n return [children];\n }\n\n // ============================================================================\n // REF HANDLING\n // ============================================================================\n\n function handleRef(element: HTMLElement, ref: any): void {\n if (isSignal(ref)) {\n ref.set(element);\n } else if (typeof ref === 'function') {\n ref(element);\n }\n }\n\n // ============================================================================\n // EVENT HANDLING\n // ============================================================================\n\n function handleEvent(element: Element, eventName: string, handler: any): void {\n if (typeof handler !== 'function') return;\n\n // Convert onClick → click, onInput → input, etc\n const event = eventName.slice(2).toLowerCase();\n\n element.addEventListener(event, handler);\n }\n\n // ============================================================================\n // CLASS NAME HANDLING\n // ============================================================================\n\n function handleClassName(element: Element, value: any): void {\n if (isSignal(value)) {\n // Reactive className\n effect(() => {\n const className = value();\n if (className != null) {\n element.className = String(className);\n }\n });\n } else if (value != null) {\n // Static className\n element.className = String(value);\n }\n }\n\n // ============================================================================\n // STYLE HANDLING\n // ============================================================================\n\n function handleStyle(element: HTMLElement, value: any): void {\n if (isSignal(value)) {\n // Reactive style object\n effect(() => {\n const styles = value();\n applyStyles(element, styles);\n });\n } else {\n // Static style\n applyStyles(element, value);\n }\n }\n\n function applyStyles(element: HTMLElement, styles: any): void {\n if (typeof styles === 'string') {\n element.style.cssText = styles;\n } else if (typeof styles === 'object' && styles != null) {\n Object.entries(styles).forEach(([key, value]) => {\n if (value != null) {\n // Convert camelCase to kebab-case\n const cssKey = key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);\n element.style.setProperty(cssKey, String(value));\n }\n });\n }\n }\n\n // ============================================================================\n // REACTIVE PROP HANDLING\n // ============================================================================\n\n function handleReactiveProp(element: Element, key: string, signal: Signal<any>): void {\n effect(() => {\n const value = signal();\n\n if (value != null) {\n if (key in element) {\n // Set as property (for input.value, etc)\n ;(element as any)[key] = value;\n } else {\n // Set as attribute\n element.setAttribute(key, String(value));\n }\n } else {\n element.removeAttribute(key);\n }\n });\n }\n\n /**\n * Create a component from a function\n * Provides a cleaner API than raw JSX\n */\n export function component<P = any>(\n fn: (props: P) => JSXElement | null\n ): ComponentFunction<P> {\n return fn;\n }\n\n /**\n * Create a component with setup function\n * Similar to Vue's Composition API\n */\n export function defineComponent<P = any>(\n setup: (props: P) => () => JSXElement | null\n ): ComponentFunction<P> {\n return (props: P) => {\n const render = setup(props);\n return render();\n };\n }\n\n // ============================================================================\n // UTILITY FUNCTIONS\n // ============================================================================\n\n /**\n * Create multiple elements at once\n */\n export function createElements(elements: any[]): DocumentFragment {\n const fragment = document.createDocumentFragment();\n\n elements.forEach(el => {\n if (el instanceof Node) {\n fragment.appendChild(el);\n }\n });\n\n return fragment;\n }\n\n /**\n * Show/hide element based on condition\n */\n export function Show(props: {\n when: boolean | Signal<boolean>\n children: any\n }): JSXElement | null {\n if (isSignal(props.when)) {\n const placeholder = document.createComment('show');\n const parent = document.createDocumentFragment();\n parent.appendChild(placeholder);\n\n let currentElement: Element | null = null;\n\n effect(() => {\n const when = props.when as Signal<boolean>;\n const condition = when();\n\n if (condition && !currentElement) {\n // Show: create and insert element\n const children = normalizeChildren(props.children);\n currentElement = children[0] as Element;\n\n if (currentElement instanceof Node) {\n placeholder.parentNode?.insertBefore(currentElement, placeholder);\n }\n } else if (!condition && currentElement) {\n // Hide: remove element\n currentElement.remove();\n currentElement = null;\n }\n });\n\n return parent as any;\n } else {\n // Static condition\n return (props.when as boolean) ? jsx(Fragment, { children: props.children }) : null;\n }\n }\n\n /**\n * Render different elements based on condition\n */\n export function Switch(props: {\n children: { when: boolean | Signal<boolean>; children: any }[]\n }): JSXElement | null {\n // Find first matching case\n for (const caseItem of props.children) {\n const condition = isSignal(caseItem.when) ? caseItem.when() : caseItem.when;\n\n if (condition) {\n return jsx(Fragment, { children: caseItem.children });\n }\n }\n\n return null;\n }\n\n /**\n * Iterate over array and render elements\n */\n export function For<T>(props: {\n each: T[] | Signal<T[]>\n children: (item: T, index: number) => JSXElement\n }): JSXElement {\n const fragment = document.createDocumentFragment();\n\n if (isSignal(props.each)) {\n // Reactive list\n const container = document.createElement('div');\n container.style.display = 'contents'; // Don't affect layout\n\n effect(() => {\n const each = props.each as Signal<T[]>;\n const items = each();\n container.innerHTML = ''; // Clear\n\n items.forEach((item: any, index: any) => {\n const element = props.children(item, index);\n if (element instanceof Node) {\n container.appendChild(element);\n }\n });\n });\n\n fragment.appendChild(container);\n } else {\n // Static list\n const each = props.each as T[];\n each.forEach((item, index) => {\n const element = props.children(item, index);\n if (element instanceof Node) {\n fragment.appendChild(element);\n }\n });\n }\n\n return fragment as any;\n }\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\n\n\n\n// ╔════════════════════════════════════════ ════ ════════════════════════════════════════╗\n\n export default {\n jsx,\n jsxs,\n Fragment,\n component,\n defineComponent,\n Show,\n Switch,\n For,\n createElements\n };\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {isSignal,effect}from'@minejs/signals';function s(e,n){return typeof e=="function"?e(n||{}):m(e,n||{})}var u=s;function d(e){let n=document.createDocumentFragment();return c(e.children).forEach(t=>{t instanceof Node&&n.appendChild(t);}),n}function m(e,n){let o=document.createElement(e);for(let[t,i]of Object.entries(n))t==="children"?h(o,i):t==="ref"?p(o,i):t.startsWith("on")?y(o,t,i):t==="className"||t==="class"?E(o,i):t==="style"?g(o,i):isSignal(i)?S(o,t,i):typeof i=="boolean"?i&&o.setAttribute(t,""):i!=null&&o.setAttribute(t,String(i));return o}function h(e,n){c(n).forEach(t=>{if(t instanceof Node)e.appendChild(t);else if(isSignal(t)){let i=document.createTextNode("");effect(()=>{i.textContent=String(t());}),e.appendChild(i);}else t!=null&&t!==false&&e.appendChild(document.createTextNode(String(t)));});}function c(e){return e==null||e===false?[]:Array.isArray(e)?e.flatMap(c):[e]}function p(e,n){isSignal(n)?n.set(e):typeof n=="function"&&n(e);}function y(e,n,o){if(typeof o!="function")return;let t=n.slice(2).toLowerCase();e.addEventListener(t,o);}function E(e,n){isSignal(n)?effect(()=>{let o=n();o!=null&&(e.className=String(o));}):n!=null&&(e.className=String(n));}function g(e,n){isSignal(n)?effect(()=>{let o=n();a(e,o);}):a(e,n);}function a(e,n){typeof n=="string"?e.style.cssText=n:typeof n=="object"&&n!=null&&Object.entries(n).forEach(([o,t])=>{if(t!=null){let i=o.replace(/[A-Z]/g,f=>`-${f.toLowerCase()}`);e.style.setProperty(i,String(t));}});}function S(e,n,o){effect(()=>{let t=o();t!=null?n in e?e[n]=t:e.setAttribute(n,String(t)):e.removeAttribute(n);});}export{d as Fragment,s as jsx,u as jsxs};//# sourceMappingURL=jsx-runtime.js.map
|
|
2
|
+
//# sourceMappingURL=jsx-runtime.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/mod/runtime.ts"],"names":["jsx","type","props","createHTMLElement","jsxs","Fragment","fragment","normalizeChildren","child","element","key","value","appendChildren","handleRef","handleEvent","handleClassName","handleStyle","isSignal","handleReactiveProp","parent","children","textNode","effect","ref","eventName","handler","event","className","styles","applyStyles","cssKey","m","signal"],"mappings":"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","file":"jsx-runtime.js","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n// src/mod/runtime.ts\n//\n// Made with ❤️ by Maysara.\n\n\n\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\n\n import { effect, isSignal, type Signal } from '@minejs/signals';\n import type { JSXElement, JSXProps, ComponentFunction } from '../types';\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\n\n\n\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\n\n /**\n * Creates a DOM element from JSX\n * This is called automatically by TypeScript when it sees JSX syntax\n */\n export function jsx(\n type: string | ComponentFunction,\n props: JSXProps | null\n ): JSXElement | null {\n // Handle component (function)\n if (typeof type === 'function') {\n return type(props || {});\n }\n\n // Handle HTML element (string)\n return createHTMLElement(type, props || {});\n }\n\n /**\n * Same as jsx() but for elements with multiple children\n * (Used by TypeScript JSX transform)\n */\n export const jsxs = jsx;\n\n /**\n * Fragment component (like React.Fragment)\n */\n export function Fragment(props: { children?: any }): DocumentFragment {\n const fragment = document.createDocumentFragment();\n const children = normalizeChildren(props.children);\n\n children.forEach(child => {\n if (child instanceof Node) {\n fragment.appendChild(child);\n }\n });\n\n return fragment;\n }\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\n\n\n\n// ╔════════════════════════════════════════ ════ ════════════════════════════════════════╗\n\n // ============================================================================\n // HTML ELEMENT CREATION\n // ============================================================================\n\n function createHTMLElement(type: string, props: JSXProps): Element {\n const element = document.createElement(type);\n\n // Set properties and attributes\n for (const [key, value] of Object.entries(props)) {\n if (key === 'children') {\n // Handle children separately\n appendChildren(element, value);\n } else if (key === 'ref') {\n // Handle ref\n handleRef(element as HTMLElement, value);\n } else if (key.startsWith('on')) {\n // Handle events (onClick, onInput, etc)\n handleEvent(element, key, value);\n } else if (key === 'className' || key === 'class') {\n // Handle className/class\n handleClassName(element, value);\n } else if (key === 'style') {\n // Handle inline styles\n handleStyle(element as HTMLElement, value);\n } else if (isSignal(value)) {\n // Handle reactive props\n handleReactiveProp(element, key, value);\n } else if (typeof value === 'boolean') {\n // Handle boolean attributes (disabled, checked, etc)\n if (value) {\n element.setAttribute(key, '');\n }\n } else if (value != null) {\n // Handle static props\n element.setAttribute(key, String(value));\n }\n }\n\n return element;\n }\n\n // ============================================================================\n // CHILDREN HANDLING\n // ============================================================================\n\n function appendChildren(parent: Element, children: any): void {\n const normalized = normalizeChildren(children);\n\n normalized.forEach(child => {\n if (child instanceof Node) {\n parent.appendChild(child);\n } else if (isSignal(child)) {\n // Reactive text node\n const textNode = document.createTextNode('');\n effect(() => {\n textNode.textContent = String(child());\n });\n parent.appendChild(textNode);\n } else if (child != null && child !== false) {\n // Static text node\n parent.appendChild(document.createTextNode(String(child)));\n }\n });\n }\n\n function normalizeChildren(children: any): any[] {\n if (children == null || children === false) {\n return [];\n }\n\n if (Array.isArray(children)) {\n return children.flatMap(normalizeChildren);\n }\n\n return [children];\n }\n\n // ============================================================================\n // REF HANDLING\n // ============================================================================\n\n function handleRef(element: HTMLElement, ref: any): void {\n if (isSignal(ref)) {\n ref.set(element);\n } else if (typeof ref === 'function') {\n ref(element);\n }\n }\n\n // ============================================================================\n // EVENT HANDLING\n // ============================================================================\n\n function handleEvent(element: Element, eventName: string, handler: any): void {\n if (typeof handler !== 'function') return;\n\n // Convert onClick → click, onInput → input, etc\n const event = eventName.slice(2).toLowerCase();\n\n element.addEventListener(event, handler);\n }\n\n // ============================================================================\n // CLASS NAME HANDLING\n // ============================================================================\n\n function handleClassName(element: Element, value: any): void {\n if (isSignal(value)) {\n // Reactive className\n effect(() => {\n const className = value();\n if (className != null) {\n element.className = String(className);\n }\n });\n } else if (value != null) {\n // Static className\n element.className = String(value);\n }\n }\n\n // ============================================================================\n // STYLE HANDLING\n // ============================================================================\n\n function handleStyle(element: HTMLElement, value: any): void {\n if (isSignal(value)) {\n // Reactive style object\n effect(() => {\n const styles = value();\n applyStyles(element, styles);\n });\n } else {\n // Static style\n applyStyles(element, value);\n }\n }\n\n function applyStyles(element: HTMLElement, styles: any): void {\n if (typeof styles === 'string') {\n element.style.cssText = styles;\n } else if (typeof styles === 'object' && styles != null) {\n Object.entries(styles).forEach(([key, value]) => {\n if (value != null) {\n // Convert camelCase to kebab-case\n const cssKey = key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);\n element.style.setProperty(cssKey, String(value));\n }\n });\n }\n }\n\n // ============================================================================\n // REACTIVE PROP HANDLING\n // ============================================================================\n\n function handleReactiveProp(element: Element, key: string, signal: Signal<any>): void {\n effect(() => {\n const value = signal();\n\n if (value != null) {\n if (key in element) {\n // Set as property (for input.value, etc)\n ;(element as any)[key] = value;\n } else {\n // Set as attribute\n element.setAttribute(key, String(value));\n }\n } else {\n element.removeAttribute(key);\n }\n });\n }\n\n /**\n * Create a component from a function\n * Provides a cleaner API than raw JSX\n */\n export function component<P = any>(\n fn: (props: P) => JSXElement | null\n ): ComponentFunction<P> {\n return fn;\n }\n\n /**\n * Create a component with setup function\n * Similar to Vue's Composition API\n */\n export function defineComponent<P = any>(\n setup: (props: P) => () => JSXElement | null\n ): ComponentFunction<P> {\n return (props: P) => {\n const render = setup(props);\n return render();\n };\n }\n\n // ============================================================================\n // UTILITY FUNCTIONS\n // ============================================================================\n\n /**\n * Create multiple elements at once\n */\n export function createElements(elements: any[]): DocumentFragment {\n const fragment = document.createDocumentFragment();\n\n elements.forEach(el => {\n if (el instanceof Node) {\n fragment.appendChild(el);\n }\n });\n\n return fragment;\n }\n\n /**\n * Show/hide element based on condition\n */\n export function Show(props: {\n when: boolean | Signal<boolean>\n children: any\n }): JSXElement | null {\n if (isSignal(props.when)) {\n const placeholder = document.createComment('show');\n const parent = document.createDocumentFragment();\n parent.appendChild(placeholder);\n\n let currentElement: Element | null = null;\n\n effect(() => {\n const when = props.when as Signal<boolean>;\n const condition = when();\n\n if (condition && !currentElement) {\n // Show: create and insert element\n const children = normalizeChildren(props.children);\n currentElement = children[0] as Element;\n\n if (currentElement instanceof Node) {\n placeholder.parentNode?.insertBefore(currentElement, placeholder);\n }\n } else if (!condition && currentElement) {\n // Hide: remove element\n currentElement.remove();\n currentElement = null;\n }\n });\n\n return parent as any;\n } else {\n // Static condition\n return (props.when as boolean) ? jsx(Fragment, { children: props.children }) : null;\n }\n }\n\n /**\n * Render different elements based on condition\n */\n export function Switch(props: {\n children: { when: boolean | Signal<boolean>; children: any }[]\n }): JSXElement | null {\n // Find first matching case\n for (const caseItem of props.children) {\n const condition = isSignal(caseItem.when) ? caseItem.when() : caseItem.when;\n\n if (condition) {\n return jsx(Fragment, { children: caseItem.children });\n }\n }\n\n return null;\n }\n\n /**\n * Iterate over array and render elements\n */\n export function For<T>(props: {\n each: T[] | Signal<T[]>\n children: (item: T, index: number) => JSXElement\n }): JSXElement {\n const fragment = document.createDocumentFragment();\n\n if (isSignal(props.each)) {\n // Reactive list\n const container = document.createElement('div');\n container.style.display = 'contents'; // Don't affect layout\n\n effect(() => {\n const each = props.each as Signal<T[]>;\n const items = each();\n container.innerHTML = ''; // Clear\n\n items.forEach((item: any, index: any) => {\n const element = props.children(item, index);\n if (element instanceof Node) {\n container.appendChild(element);\n }\n });\n });\n\n fragment.appendChild(container);\n } else {\n // Static list\n const each = props.each as T[];\n each.forEach((item, index) => {\n const element = props.children(item, index);\n if (element instanceof Node) {\n fragment.appendChild(element);\n }\n });\n }\n\n return fragment as any;\n }\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\n\n\n\n// ╔════════════════════════════════════════ ════ ════════════════════════════════════════╗\n\n export default {\n jsx,\n jsxs,\n Fragment,\n component,\n defineComponent,\n Show,\n Switch,\n For,\n createElements\n };\n\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@minejs/jsx",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"description": "Lightweight JSX runtime with fine-grained reactivity.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"minejs",
|
|
@@ -31,6 +31,16 @@
|
|
|
31
31
|
"types": "./dist/index.d.ts",
|
|
32
32
|
"import": "./dist/index.js",
|
|
33
33
|
"require": "./dist/index.js"
|
|
34
|
+
},
|
|
35
|
+
"./jsx-runtime": {
|
|
36
|
+
"types": "./dist/jsx-runtime.d.ts",
|
|
37
|
+
"import": "./dist/jsx-runtime.js",
|
|
38
|
+
"require": "./dist/jsx-runtime.js"
|
|
39
|
+
},
|
|
40
|
+
"./jsx-dev-runtime": {
|
|
41
|
+
"types": "./dist/jsx-dev-runtime.d.ts",
|
|
42
|
+
"import": "./dist/jsx-dev-runtime.js",
|
|
43
|
+
"require": "./dist/jsx-dev-runtime.js"
|
|
34
44
|
}
|
|
35
45
|
},
|
|
36
46
|
"scripts": {
|