@papack/csr 0.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -0
- package/dist/index.d.cts +171 -0
- package/dist/index.d.mts +172 -0
- package/dist/index.d.mts.map +1 -0
- package/dist/index.mjs +2 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +26 -0
- package/readme.md +245 -0
package/dist/index.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e=[],t=[];function n(){e.push([]),t.push([])}function r(n){let r=e.pop(),i=t.pop();if(!(!r||!i)){for(let e of r)try{let t=e(n);t instanceof Promise&&t.catch(console.error)}catch(e){console.error(e)}if(i.length>0){let e=n.__unmountCbs;e&&Array.isArray(e)?e.push(...i):n.__unmountCbs=[...i]}}}function i(t){let n=e[e.length-1];if(!n)throw Error(`mount(cb) was called outside of a component.`);n.push(t)}function a(e){let n=t[t.length-1];if(!n)throw Error(`unmount(cb) was called outside of a component.`);n.push(e)}async function o(e){let t=e.__unmountCbs;if(!(!t||t.length===0)){for(let e=t.length-1;e>=0;e--){let n=t[e];if(n)try{let e=n();e instanceof Promise&&await e}catch(e){console.error(e)}}e.__unmountCbs=void 0}}async function s(e){let t=Array.from(e.childNodes);for(let e of t)await c(e);await o(e),e.parentNode?e.parentNode.removeChild(e):e.remove()}async function c(e){if(e instanceof Element){let t=Array.from(e.childNodes);for(let e of t)await c(e);await o(e),e.parentNode?e.parentNode.removeChild(e):e.remove();return}e.parentNode&&e.parentNode.removeChild(e)}async function l(e,t){await e(async e=>{await t(e)})}function u(e,...t){return t}function d(e,t,...n){let r=n.flatMap(f);return{kind:typeof e==`string`?`host`:`component`,tag:e,props:t,children:r}}function f(e){return e==null||e===!1||e===!0?[]:typeof e==`function`&&e?.type===`signal`?{kind:`signal`,value:e}:typeof e==`string`||typeof e==`number`?{kind:`text`,value:String(e)}:Array.isArray(e)?e.flatMap(f):e}async function p(e,t){if(e==null)return{el:t.parent};if(Array.isArray(e))for(let n of e)return await p(n,t);if(e.kind===`text`)return{el:_(e,t)};if(e.kind===`signal`)return{el:await v(e,t)};if(e.kind===`component`){let i=e.tag;n();let a=await p(await i({...e.props,ctx:t},e.children),t);return a.el instanceof Element?r(a.el):console.warn(`Component-Root ist kein Element. Mount/Unmount werden ignoriert.`),t.self=a.el,a}let i=await g(e,t),a={...t,parent:i,self:t.self};for(let t of e.children)await p(t,a);return{el:i}}const m=`http://www.w3.org/2000/svg`,h=new Set([`svg`,`path`,`circle`,`rect`,`line`,`polyline`,`polygon`,`g`,`defs`,`linearGradient`,`radialGradient`,`stop`,`mask`,`clipPath`,`pattern`,`text`,`tspan`,`use`,`symbol`,`view`,`ellipse`,`foreignObject`]);async function g(e,t){if(typeof e.tag!=`string`)throw Error(`Host renderer erwartet string-Tag.`);let n=e.tag,r=h.has(n),i=r?document.createElementNS(`http://www.w3.org/2000/svg`,n):document.createElement(n),a=e.props||{};for(let[e,t]of Object.entries(a))if(!(e===`ctx`||e===`children`)){if(e.startsWith(`on`)&&typeof t==`function`){let n=e.slice(2).toLowerCase();i.addEventListener(n,t);continue}if(e===`style`&&t&&typeof t==`object`){for(let[e,n]of Object.entries(t))if(typeof n==`function`&&n.type===`signal`){let t=await n();i.style.setProperty(e,String(t)),await n(async t=>{i.style.setProperty(e,String(t))})}else i.style.setProperty(e,String(n));continue}if(typeof t==`function`&&t.type===`signal`){let n=await t();r?(i.setAttribute(e,String(n)),await t(async t=>{i.setAttribute(e,String(t))})):(i[e]=n,await t(async t=>{i[e]=t}));continue}r?i.setAttribute(e,String(t)):e in i?i[e]=t:i.setAttribute(e,String(t))}return t.parent.appendChild(i),i}function _(e,t){let n=document.createTextNode(e.value);return t.parent.appendChild(n),n}async function v(e,t){let n=document.createTextNode(``);return t.parent.appendChild(n),await e.value(async e=>{if(n instanceof Text)n.nodeValue=String(e);else throw`svg not implemented with number and string`}),n}async function y(e,t){let n=d(`csr-show-host`,{style:{display:`contents`}}),r=d(`csr-show-content`,{style:{display:`contents`}},...t),a=null,o=null;return i(async t=>{let{el:i}=await p(n,{parent:t});a=i;let c=!1;l(e.when,async t=>{if(c=!c,!c)o&&=(await s(o),null);else{let{el:t}=await p(r,{...e.ctx,parent:a});o=t}})}),null}function b(e){a(e)}function x(e){let t=crypto.randomUUID();C.addTopic(t),b(()=>{C.removeTopic(t)});let n=async n=>(n&&(C.registerClbk(t,n),b(()=>{C.removeClbk(t,n)}),await n(e)),e);return n.type=`signal`,[n,async n=>{let r=await n(e);e=r,C&&C.update(t,r)}]}var S=class{topic=new Map;clbkMapping=new Map;addTopic(e){this.topic.set(e,new Set)}removeTopic(e){this.topic.delete(e)}registerClbk(e,t){let n=this.topic.get(e);n&&(this.clbkMapping.set(t,e),n.add(t))}removeClbk(e,t){let n=this.topic.get(e);n&&n.delete(t)}update(e,t){let n=this.topic.get(e);if(n)for(let e of n)e(t)}getUuidByClbk(e){let t=this.clbkMapping.get(e);if(!t)throw Error(`Connector: clbkMapping has no uuid for fn `+e);return t}};const C=new S;exports.Show=y,exports.beginComponentMountSession=n,exports.connector=C,exports.destroy=s,exports.effect=l,exports.endComponentMountSession=r,exports.fragment=u,exports.jsx=d,exports.mount=i,exports.registerUnmount=a,exports.render=p,exports.runUnmountsForElement=o,exports.signal=x,exports.unmount=b;
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
//#region core/destroy.d.ts
|
|
2
|
+
declare function destroy(root: Element): Promise<void>;
|
|
3
|
+
//#endregion
|
|
4
|
+
//#region core/signal.d.ts
|
|
5
|
+
type UUID = string;
|
|
6
|
+
type ReadFn<T> = ((cb?: (value: unknown) => Promise<void>) => Promise<T>) & {
|
|
7
|
+
type: "signal";
|
|
8
|
+
};
|
|
9
|
+
declare function signal<T>(value: T): readonly [ReadFn<T>, (cb: (prev: T) => Promise<T> | T) => Promise<void>];
|
|
10
|
+
interface ConnectorInterface {
|
|
11
|
+
update: (uuid: UUID, value: unknown) => void;
|
|
12
|
+
addTopic: (uuid: UUID) => void;
|
|
13
|
+
removeTopic: (uuid: UUID) => void;
|
|
14
|
+
registerClbk: (uuid: UUID, cb: (value: unknown) => void) => void;
|
|
15
|
+
removeClbk: (uuid: UUID, cb: (value: unknown) => void) => void;
|
|
16
|
+
getUuidByClbk: (cb: (value: unknown) => void) => UUID;
|
|
17
|
+
}
|
|
18
|
+
declare class Connector implements ConnectorInterface {
|
|
19
|
+
private topic;
|
|
20
|
+
private clbkMapping;
|
|
21
|
+
addTopic(uuid: UUID): void;
|
|
22
|
+
removeTopic(uuid: UUID): void;
|
|
23
|
+
registerClbk<T>(uuid: string, cb: (value: T) => void): void;
|
|
24
|
+
removeClbk<T>(uuid: UUID, cb: (value: T) => void): void;
|
|
25
|
+
update<T>(uuid: UUID, value: T): void;
|
|
26
|
+
getUuidByClbk(fn: (value: unknown) => void): string;
|
|
27
|
+
}
|
|
28
|
+
declare const connector: Connector;
|
|
29
|
+
//#endregion
|
|
30
|
+
//#region core/effect.d.ts
|
|
31
|
+
declare function effect<T>(readFn: ReadFn<T>, fn: (value: T) => Promise<unknown> | unknown): Promise<void>;
|
|
32
|
+
//#endregion
|
|
33
|
+
//#region core/fragment.d.ts
|
|
34
|
+
declare function fragment(p: null, ...childs: any): any;
|
|
35
|
+
//#endregion
|
|
36
|
+
//#region core/render.d.ts
|
|
37
|
+
interface RenderCtx {
|
|
38
|
+
parent: Node & ParentNode;
|
|
39
|
+
[k: string]: any;
|
|
40
|
+
}
|
|
41
|
+
interface RenderResult {
|
|
42
|
+
el: Node;
|
|
43
|
+
}
|
|
44
|
+
declare function render(node: JsxChild, ctx: RenderCtx): Promise<RenderResult>;
|
|
45
|
+
//#endregion
|
|
46
|
+
//#region core/jsx.d.ts
|
|
47
|
+
type EventHandler<E extends Event = Event> = (event: E) => void;
|
|
48
|
+
interface DOMEvents {
|
|
49
|
+
onClick?: EventHandler<MouseEvent>;
|
|
50
|
+
onDblClick?: EventHandler<MouseEvent>;
|
|
51
|
+
onMouseDown?: EventHandler<MouseEvent>;
|
|
52
|
+
onMouseUp?: EventHandler<MouseEvent>;
|
|
53
|
+
onMouseMove?: EventHandler<MouseEvent>;
|
|
54
|
+
onMouseEnter?: EventHandler<MouseEvent>;
|
|
55
|
+
onMouseLeave?: EventHandler<MouseEvent>;
|
|
56
|
+
onKeyDown?: EventHandler<KeyboardEvent>;
|
|
57
|
+
onKeyUp?: EventHandler<KeyboardEvent>;
|
|
58
|
+
onInput?: EventHandler<InputEvent>;
|
|
59
|
+
onChange?: EventHandler<Event>;
|
|
60
|
+
onFocus?: EventHandler<FocusEvent>;
|
|
61
|
+
onBlur?: EventHandler<FocusEvent>;
|
|
62
|
+
}
|
|
63
|
+
interface StyleProps {
|
|
64
|
+
[key: string]: string | number | ReadFn<string | number>;
|
|
65
|
+
}
|
|
66
|
+
type MaybeSignal<T> = T | ReadFn<T>;
|
|
67
|
+
interface HTMLAttributes extends DOMEvents {
|
|
68
|
+
id?: string;
|
|
69
|
+
class?: string;
|
|
70
|
+
className?: string;
|
|
71
|
+
title?: string;
|
|
72
|
+
style?: StyleProps;
|
|
73
|
+
value?: MaybeSignal<string | number>;
|
|
74
|
+
checked?: MaybeSignal<boolean>;
|
|
75
|
+
disabled?: MaybeSignal<boolean>;
|
|
76
|
+
children?: any;
|
|
77
|
+
}
|
|
78
|
+
interface SVGAttributes extends DOMEvents {
|
|
79
|
+
id?: string;
|
|
80
|
+
class?: string;
|
|
81
|
+
style?: StyleProps;
|
|
82
|
+
viewBox?: MaybeSignal<string>;
|
|
83
|
+
fill?: MaybeSignal<string>;
|
|
84
|
+
stroke?: MaybeSignal<string>;
|
|
85
|
+
strokeWidth?: MaybeSignal<number>;
|
|
86
|
+
d?: MaybeSignal<string>;
|
|
87
|
+
cx?: MaybeSignal<string | number>;
|
|
88
|
+
cy?: MaybeSignal<string | number>;
|
|
89
|
+
r?: MaybeSignal<string | number>;
|
|
90
|
+
x?: MaybeSignal<string | number>;
|
|
91
|
+
y?: MaybeSignal<string | number>;
|
|
92
|
+
width?: MaybeSignal<string | number>;
|
|
93
|
+
height?: MaybeSignal<string | number>;
|
|
94
|
+
children?: any;
|
|
95
|
+
}
|
|
96
|
+
declare global {
|
|
97
|
+
namespace JSX {
|
|
98
|
+
type Element = JsxNode;
|
|
99
|
+
interface IntrinsicElements {
|
|
100
|
+
div: HTMLAttributes;
|
|
101
|
+
li: HTMLAttributes;
|
|
102
|
+
ul: HTMLAttributes;
|
|
103
|
+
h1: HTMLAttributes;
|
|
104
|
+
h2: HTMLAttributes;
|
|
105
|
+
h3: HTMLAttributes;
|
|
106
|
+
h4: HTMLAttributes;
|
|
107
|
+
h5: HTMLAttributes;
|
|
108
|
+
h6: HTMLAttributes;
|
|
109
|
+
span: HTMLAttributes;
|
|
110
|
+
p: HTMLAttributes;
|
|
111
|
+
button: HTMLAttributes;
|
|
112
|
+
input: HTMLAttributes & {
|
|
113
|
+
type?: string;
|
|
114
|
+
placeholder?: string;
|
|
115
|
+
};
|
|
116
|
+
textarea: HTMLAttributes;
|
|
117
|
+
form: HTMLAttributes;
|
|
118
|
+
label: HTMLAttributes;
|
|
119
|
+
svg: SVGAttributes;
|
|
120
|
+
path: SVGAttributes;
|
|
121
|
+
circle: SVGAttributes;
|
|
122
|
+
rect: SVGAttributes;
|
|
123
|
+
g: SVGAttributes;
|
|
124
|
+
line: SVGAttributes;
|
|
125
|
+
polyline: SVGAttributes;
|
|
126
|
+
polygon: SVGAttributes;
|
|
127
|
+
text: SVGAttributes;
|
|
128
|
+
tspan: SVGAttributes;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
type JsxChild = JsxNode | JsxText | JsxSignal;
|
|
133
|
+
interface JsxText {
|
|
134
|
+
kind: "text";
|
|
135
|
+
value: string;
|
|
136
|
+
}
|
|
137
|
+
interface JsxSignal {
|
|
138
|
+
kind: "signal";
|
|
139
|
+
value: any;
|
|
140
|
+
}
|
|
141
|
+
interface JsxNode {
|
|
142
|
+
kind: "host" | "component" | "signal";
|
|
143
|
+
tag: string | ComponentFn;
|
|
144
|
+
props: any;
|
|
145
|
+
children: JsxChild[];
|
|
146
|
+
}
|
|
147
|
+
interface PropsInterface {
|
|
148
|
+
ctx?: RenderCtx;
|
|
149
|
+
}
|
|
150
|
+
type ComponentFn = (props: PropsInterface, children: JsxChild[]) => Promise<JsxNode>;
|
|
151
|
+
declare function jsx(tag: string | ComponentFn, props: any, ...rawChildren: any[]): JsxNode;
|
|
152
|
+
//#endregion
|
|
153
|
+
//#region core/mount.d.ts
|
|
154
|
+
type MountCallback = (el: Element) => void | Promise<void>;
|
|
155
|
+
type UnmountCallback = () => void | Promise<void>;
|
|
156
|
+
declare function beginComponentMountSession(): void;
|
|
157
|
+
declare function endComponentMountSession(el: Element): void;
|
|
158
|
+
declare function mount(cb: MountCallback): void;
|
|
159
|
+
declare function registerUnmount(cb: UnmountCallback): void;
|
|
160
|
+
declare function runUnmountsForElement(el: Element): Promise<void>;
|
|
161
|
+
//#endregion
|
|
162
|
+
//#region core/show.d.ts
|
|
163
|
+
interface ShowPropsInterface {
|
|
164
|
+
when: ReadFn<boolean>;
|
|
165
|
+
}
|
|
166
|
+
declare function Show(p: ShowPropsInterface, children: any): Promise<null>;
|
|
167
|
+
//#endregion
|
|
168
|
+
//#region core/unmount.d.ts
|
|
169
|
+
declare function unmount(cb: UnmountCallback): void;
|
|
170
|
+
//#endregion
|
|
171
|
+
export { ComponentFn, ConnectorInterface, JsxChild, JsxNode, JsxSignal, JsxText, MountCallback, PropsInterface, ReadFn, RenderCtx, RenderResult, Show, type UnmountCallback, beginComponentMountSession, connector, destroy, effect, endComponentMountSession, fragment, jsx, mount, registerUnmount, render, runUnmountsForElement, signal, unmount };
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
//#region core/destroy.d.ts
|
|
2
|
+
declare function destroy(root: Element): Promise<void>;
|
|
3
|
+
//#endregion
|
|
4
|
+
//#region core/signal.d.ts
|
|
5
|
+
type UUID = string;
|
|
6
|
+
type ReadFn<T> = ((cb?: (value: unknown) => Promise<void>) => Promise<T>) & {
|
|
7
|
+
type: "signal";
|
|
8
|
+
};
|
|
9
|
+
declare function signal<T>(value: T): readonly [ReadFn<T>, (cb: (prev: T) => Promise<T> | T) => Promise<void>];
|
|
10
|
+
interface ConnectorInterface {
|
|
11
|
+
update: (uuid: UUID, value: unknown) => void;
|
|
12
|
+
addTopic: (uuid: UUID) => void;
|
|
13
|
+
removeTopic: (uuid: UUID) => void;
|
|
14
|
+
registerClbk: (uuid: UUID, cb: (value: unknown) => void) => void;
|
|
15
|
+
removeClbk: (uuid: UUID, cb: (value: unknown) => void) => void;
|
|
16
|
+
getUuidByClbk: (cb: (value: unknown) => void) => UUID;
|
|
17
|
+
}
|
|
18
|
+
declare class Connector implements ConnectorInterface {
|
|
19
|
+
private topic;
|
|
20
|
+
private clbkMapping;
|
|
21
|
+
addTopic(uuid: UUID): void;
|
|
22
|
+
removeTopic(uuid: UUID): void;
|
|
23
|
+
registerClbk<T>(uuid: string, cb: (value: T) => void): void;
|
|
24
|
+
removeClbk<T>(uuid: UUID, cb: (value: T) => void): void;
|
|
25
|
+
update<T>(uuid: UUID, value: T): void;
|
|
26
|
+
getUuidByClbk(fn: (value: unknown) => void): string;
|
|
27
|
+
}
|
|
28
|
+
declare const connector: Connector;
|
|
29
|
+
//#endregion
|
|
30
|
+
//#region core/effect.d.ts
|
|
31
|
+
declare function effect<T>(readFn: ReadFn<T>, fn: (value: T) => Promise<unknown> | unknown): Promise<void>;
|
|
32
|
+
//#endregion
|
|
33
|
+
//#region core/fragment.d.ts
|
|
34
|
+
declare function fragment(p: null, ...childs: any): any;
|
|
35
|
+
//#endregion
|
|
36
|
+
//#region core/render.d.ts
|
|
37
|
+
interface RenderCtx {
|
|
38
|
+
parent: Node & ParentNode;
|
|
39
|
+
[k: string]: any;
|
|
40
|
+
}
|
|
41
|
+
interface RenderResult {
|
|
42
|
+
el: Node;
|
|
43
|
+
}
|
|
44
|
+
declare function render(node: JsxChild, ctx: RenderCtx): Promise<RenderResult>;
|
|
45
|
+
//#endregion
|
|
46
|
+
//#region core/jsx.d.ts
|
|
47
|
+
type EventHandler<E extends Event = Event> = (event: E) => void;
|
|
48
|
+
interface DOMEvents {
|
|
49
|
+
onClick?: EventHandler<MouseEvent>;
|
|
50
|
+
onDblClick?: EventHandler<MouseEvent>;
|
|
51
|
+
onMouseDown?: EventHandler<MouseEvent>;
|
|
52
|
+
onMouseUp?: EventHandler<MouseEvent>;
|
|
53
|
+
onMouseMove?: EventHandler<MouseEvent>;
|
|
54
|
+
onMouseEnter?: EventHandler<MouseEvent>;
|
|
55
|
+
onMouseLeave?: EventHandler<MouseEvent>;
|
|
56
|
+
onKeyDown?: EventHandler<KeyboardEvent>;
|
|
57
|
+
onKeyUp?: EventHandler<KeyboardEvent>;
|
|
58
|
+
onInput?: EventHandler<InputEvent>;
|
|
59
|
+
onChange?: EventHandler<Event>;
|
|
60
|
+
onFocus?: EventHandler<FocusEvent>;
|
|
61
|
+
onBlur?: EventHandler<FocusEvent>;
|
|
62
|
+
}
|
|
63
|
+
interface StyleProps {
|
|
64
|
+
[key: string]: string | number | ReadFn<string | number>;
|
|
65
|
+
}
|
|
66
|
+
type MaybeSignal<T> = T | ReadFn<T>;
|
|
67
|
+
interface HTMLAttributes extends DOMEvents {
|
|
68
|
+
id?: string;
|
|
69
|
+
class?: string;
|
|
70
|
+
className?: string;
|
|
71
|
+
title?: string;
|
|
72
|
+
style?: StyleProps;
|
|
73
|
+
value?: MaybeSignal<string | number>;
|
|
74
|
+
checked?: MaybeSignal<boolean>;
|
|
75
|
+
disabled?: MaybeSignal<boolean>;
|
|
76
|
+
children?: any;
|
|
77
|
+
}
|
|
78
|
+
interface SVGAttributes extends DOMEvents {
|
|
79
|
+
id?: string;
|
|
80
|
+
class?: string;
|
|
81
|
+
style?: StyleProps;
|
|
82
|
+
viewBox?: MaybeSignal<string>;
|
|
83
|
+
fill?: MaybeSignal<string>;
|
|
84
|
+
stroke?: MaybeSignal<string>;
|
|
85
|
+
strokeWidth?: MaybeSignal<number>;
|
|
86
|
+
d?: MaybeSignal<string>;
|
|
87
|
+
cx?: MaybeSignal<string | number>;
|
|
88
|
+
cy?: MaybeSignal<string | number>;
|
|
89
|
+
r?: MaybeSignal<string | number>;
|
|
90
|
+
x?: MaybeSignal<string | number>;
|
|
91
|
+
y?: MaybeSignal<string | number>;
|
|
92
|
+
width?: MaybeSignal<string | number>;
|
|
93
|
+
height?: MaybeSignal<string | number>;
|
|
94
|
+
children?: any;
|
|
95
|
+
}
|
|
96
|
+
declare global {
|
|
97
|
+
namespace JSX {
|
|
98
|
+
type Element = JsxNode;
|
|
99
|
+
interface IntrinsicElements {
|
|
100
|
+
div: HTMLAttributes;
|
|
101
|
+
li: HTMLAttributes;
|
|
102
|
+
ul: HTMLAttributes;
|
|
103
|
+
h1: HTMLAttributes;
|
|
104
|
+
h2: HTMLAttributes;
|
|
105
|
+
h3: HTMLAttributes;
|
|
106
|
+
h4: HTMLAttributes;
|
|
107
|
+
h5: HTMLAttributes;
|
|
108
|
+
h6: HTMLAttributes;
|
|
109
|
+
span: HTMLAttributes;
|
|
110
|
+
p: HTMLAttributes;
|
|
111
|
+
button: HTMLAttributes;
|
|
112
|
+
input: HTMLAttributes & {
|
|
113
|
+
type?: string;
|
|
114
|
+
placeholder?: string;
|
|
115
|
+
};
|
|
116
|
+
textarea: HTMLAttributes;
|
|
117
|
+
form: HTMLAttributes;
|
|
118
|
+
label: HTMLAttributes;
|
|
119
|
+
svg: SVGAttributes;
|
|
120
|
+
path: SVGAttributes;
|
|
121
|
+
circle: SVGAttributes;
|
|
122
|
+
rect: SVGAttributes;
|
|
123
|
+
g: SVGAttributes;
|
|
124
|
+
line: SVGAttributes;
|
|
125
|
+
polyline: SVGAttributes;
|
|
126
|
+
polygon: SVGAttributes;
|
|
127
|
+
text: SVGAttributes;
|
|
128
|
+
tspan: SVGAttributes;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
type JsxChild = JsxNode | JsxText | JsxSignal;
|
|
133
|
+
interface JsxText {
|
|
134
|
+
kind: "text";
|
|
135
|
+
value: string;
|
|
136
|
+
}
|
|
137
|
+
interface JsxSignal {
|
|
138
|
+
kind: "signal";
|
|
139
|
+
value: any;
|
|
140
|
+
}
|
|
141
|
+
interface JsxNode {
|
|
142
|
+
kind: "host" | "component" | "signal";
|
|
143
|
+
tag: string | ComponentFn;
|
|
144
|
+
props: any;
|
|
145
|
+
children: JsxChild[];
|
|
146
|
+
}
|
|
147
|
+
interface PropsInterface {
|
|
148
|
+
ctx?: RenderCtx;
|
|
149
|
+
}
|
|
150
|
+
type ComponentFn = (props: PropsInterface, children: JsxChild[]) => Promise<JsxNode>;
|
|
151
|
+
declare function jsx(tag: string | ComponentFn, props: any, ...rawChildren: any[]): JsxNode;
|
|
152
|
+
//#endregion
|
|
153
|
+
//#region core/mount.d.ts
|
|
154
|
+
type MountCallback = (el: Element) => void | Promise<void>;
|
|
155
|
+
type UnmountCallback = () => void | Promise<void>;
|
|
156
|
+
declare function beginComponentMountSession(): void;
|
|
157
|
+
declare function endComponentMountSession(el: Element): void;
|
|
158
|
+
declare function mount(cb: MountCallback): void;
|
|
159
|
+
declare function registerUnmount(cb: UnmountCallback): void;
|
|
160
|
+
declare function runUnmountsForElement(el: Element): Promise<void>;
|
|
161
|
+
//#endregion
|
|
162
|
+
//#region core/show.d.ts
|
|
163
|
+
interface ShowPropsInterface {
|
|
164
|
+
when: ReadFn<boolean>;
|
|
165
|
+
}
|
|
166
|
+
declare function Show(p: ShowPropsInterface, children: any): Promise<null>;
|
|
167
|
+
//#endregion
|
|
168
|
+
//#region core/unmount.d.ts
|
|
169
|
+
declare function unmount(cb: UnmountCallback): void;
|
|
170
|
+
//#endregion
|
|
171
|
+
export { ComponentFn, ConnectorInterface, JsxChild, JsxNode, JsxSignal, JsxText, MountCallback, PropsInterface, ReadFn, RenderCtx, RenderResult, Show, type UnmountCallback, beginComponentMountSession, connector, destroy, effect, endComponentMountSession, fragment, jsx, mount, registerUnmount, render, runUnmountsForElement, signal, unmount };
|
|
172
|
+
//# sourceMappingURL=index.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../core/destroy.ts","../core/signal.ts","../core/effect.ts","../core/fragment.ts","../core/render.ts","../core/jsx.ts","../core/mount.ts","../core/show.tsx","../core/unmount.ts"],"sourcesContent":[],"mappings":"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"}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const e=[],t=[];function n(){e.push([]),t.push([])}function r(n){let r=e.pop(),i=t.pop();if(!(!r||!i)){for(let e of r)try{let t=e(n);t instanceof Promise&&t.catch(console.error)}catch(e){console.error(e)}if(i.length>0){let e=n.__unmountCbs;e&&Array.isArray(e)?e.push(...i):n.__unmountCbs=[...i]}}}function i(t){let n=e[e.length-1];if(!n)throw Error(`mount(cb) was called outside of a component.`);n.push(t)}function a(e){let n=t[t.length-1];if(!n)throw Error(`unmount(cb) was called outside of a component.`);n.push(e)}async function o(e){let t=e.__unmountCbs;if(!(!t||t.length===0)){for(let e=t.length-1;e>=0;e--){let n=t[e];if(n)try{let e=n();e instanceof Promise&&await e}catch(e){console.error(e)}}e.__unmountCbs=void 0}}async function s(e){let t=Array.from(e.childNodes);for(let e of t)await c(e);await o(e),e.parentNode?e.parentNode.removeChild(e):e.remove()}async function c(e){if(e instanceof Element){let t=Array.from(e.childNodes);for(let e of t)await c(e);await o(e),e.parentNode?e.parentNode.removeChild(e):e.remove();return}e.parentNode&&e.parentNode.removeChild(e)}async function l(e,t){await e(async e=>{await t(e)})}function u(e,...t){return t}function d(e,t,...n){let r=n.flatMap(f);return{kind:typeof e==`string`?`host`:`component`,tag:e,props:t,children:r}}function f(e){return e==null||e===!1||e===!0?[]:typeof e==`function`&&e?.type===`signal`?{kind:`signal`,value:e}:typeof e==`string`||typeof e==`number`?{kind:`text`,value:String(e)}:Array.isArray(e)?e.flatMap(f):e}async function p(e,t){if(e==null)return{el:t.parent};if(Array.isArray(e))for(let n of e)return await p(n,t);if(e.kind===`text`)return{el:g(e,t)};if(e.kind===`signal`)return{el:await _(e,t)};if(e.kind===`component`){let i=e.tag;n();let a=await p(await i({...e.props,ctx:t},e.children),t);return a.el instanceof Element?r(a.el):console.warn(`Component-Root ist kein Element. Mount/Unmount werden ignoriert.`),t.self=a.el,a}let i=await h(e,t),a={...t,parent:i,self:t.self};for(let t of e.children)await p(t,a);return{el:i}}const m=new Set([`svg`,`path`,`circle`,`rect`,`line`,`polyline`,`polygon`,`g`,`defs`,`linearGradient`,`radialGradient`,`stop`,`mask`,`clipPath`,`pattern`,`text`,`tspan`,`use`,`symbol`,`view`,`ellipse`,`foreignObject`]);async function h(e,t){if(typeof e.tag!=`string`)throw Error(`Host renderer erwartet string-Tag.`);let n=e.tag,r=m.has(n),i=r?document.createElementNS(`http://www.w3.org/2000/svg`,n):document.createElement(n),a=e.props||{};for(let[e,t]of Object.entries(a))if(!(e===`ctx`||e===`children`)){if(e.startsWith(`on`)&&typeof t==`function`){let n=e.slice(2).toLowerCase();i.addEventListener(n,t);continue}if(e===`style`&&t&&typeof t==`object`){for(let[e,n]of Object.entries(t))if(typeof n==`function`&&n.type===`signal`){let t=await n();i.style.setProperty(e,String(t)),await n(async t=>{i.style.setProperty(e,String(t))})}else i.style.setProperty(e,String(n));continue}if(typeof t==`function`&&t.type===`signal`){let n=await t();r?(i.setAttribute(e,String(n)),await t(async t=>{i.setAttribute(e,String(t))})):(i[e]=n,await t(async t=>{i[e]=t}));continue}r?i.setAttribute(e,String(t)):e in i?i[e]=t:i.setAttribute(e,String(t))}return t.parent.appendChild(i),i}function g(e,t){let n=document.createTextNode(e.value);return t.parent.appendChild(n),n}async function _(e,t){let n=document.createTextNode(``);return t.parent.appendChild(n),await e.value(async e=>{if(n instanceof Text)n.nodeValue=String(e);else throw`svg not implemented with number and string`}),n}async function v(e,t){let n=d(`csr-show-host`,{style:{display:`contents`}}),r=d(`csr-show-content`,{style:{display:`contents`}},...t),a=null,o=null;return i(async t=>{let{el:i}=await p(n,{parent:t});a=i;let c=!1;l(e.when,async t=>{if(c=!c,!c)o&&=(await s(o),null);else{let{el:t}=await p(r,{...e.ctx,parent:a});o=t}})}),null}function y(e){a(e)}function b(e){let t=crypto.randomUUID();x.addTopic(t),y(()=>{x.removeTopic(t)});let n=async n=>(n&&(x.registerClbk(t,n),y(()=>{x.removeClbk(t,n)}),await n(e)),e);return n.type=`signal`,[n,async n=>{let r=await n(e);e=r,x&&x.update(t,r)}]}const x=new class{topic=new Map;clbkMapping=new Map;addTopic(e){this.topic.set(e,new Set)}removeTopic(e){this.topic.delete(e)}registerClbk(e,t){let n=this.topic.get(e);n&&(this.clbkMapping.set(t,e),n.add(t))}removeClbk(e,t){let n=this.topic.get(e);n&&n.delete(t)}update(e,t){let n=this.topic.get(e);if(n)for(let e of n)e(t)}getUuidByClbk(e){let t=this.clbkMapping.get(e);if(!t)throw Error(`Connector: clbkMapping has no uuid for fn `+e);return t}};export{v as Show,n as beginComponentMountSession,x as connector,s as destroy,l as effect,r as endComponentMountSession,u as fragment,d as jsx,i as mount,a as registerUnmount,p as render,o as runUnmountsForElement,b as signal,y as unmount};
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["mountStack: MountCallback[][]","unmountStack: UnmountCallback[][]","childCtx: RenderCtx","hostEl: Element | null","contentEl: Element | null","read: ReadFn<T>","next: T"],"sources":["../core/mount.ts","../core/destroy.ts","../core/effect.ts","../core/fragment.ts","../core/jsx.ts","../core/render.ts","../core/show.tsx","../core/unmount.ts","../core/signal.ts"],"sourcesContent":["export type MountCallback = (el: Element) => void | Promise<void>;\r\nexport type UnmountCallback = () => void | Promise<void>;\r\n\r\n// Stack of mount/unmount callback queues per component render\r\nconst mountStack: MountCallback[][] = [];\r\nconst unmountStack: UnmountCallback[][] = [];\r\n\r\n// Called by the renderer before a component function is executed.\r\n// Initializes a new mount/unmount session for that component.\r\nexport function beginComponentMountSession(): void {\r\n mountStack.push([]);\r\n unmountStack.push([]);\r\n}\r\n\r\n// Called by the renderer once the component's DOM root element is known.\r\n// - Executes all registered mount callbacks\r\n// - Attaches all unmount callbacks to the root element\r\nexport function endComponentMountSession(el: Element): void {\r\n const mounts = mountStack.pop();\r\n const unmounts = unmountStack.pop();\r\n\r\n if (!mounts || !unmounts) return;\r\n\r\n // Execute mount callbacks (fire-and-forget)\r\n for (const cb of mounts) {\r\n try {\r\n const r = cb(el);\r\n if (r instanceof Promise) {\r\n r.catch(console.error);\r\n }\r\n } catch (err) {\r\n console.error(err);\r\n }\r\n }\r\n\r\n // Store unmount callbacks on the element (DOM-first lifecycle)\r\n if (unmounts.length > 0) {\r\n const store = (el as any).__unmountCbs as UnmountCallback[] | undefined;\r\n if (store && Array.isArray(store)) {\r\n store.push(...unmounts);\r\n } else {\r\n (el as any).__unmountCbs = [...unmounts];\r\n }\r\n }\r\n}\r\n\r\n//Used inside components to register an on-mount callback.\r\nexport function mount(cb: MountCallback): void {\r\n const queue = mountStack[mountStack.length - 1];\r\n if (!queue) {\r\n throw new Error(\"mount(cb) was called outside of a component.\");\r\n }\r\n queue.push(cb);\r\n}\r\n\r\n// Used internally to register cleanup logic for the current component session.\r\nexport function registerUnmount(cb: UnmountCallback): void {\r\n const queue = unmountStack[unmountStack.length - 1];\r\n if (!queue) {\r\n throw new Error(\"unmount(cb) was called outside of a component.\");\r\n }\r\n queue.push(cb);\r\n}\r\n\r\n// Used by the destroy() path:\r\n// Executes all unmount callbacks registered on the element (LIFO order).\r\nexport async function runUnmountsForElement(el: Element): Promise<void> {\r\n const list = (el as any).__unmountCbs as UnmountCallback[] | undefined;\r\n if (!list || list.length === 0) return;\r\n\r\n for (let i = list.length - 1; i >= 0; i--) {\r\n const fn = list[i];\r\n if (!fn) continue;\r\n try {\r\n const r = fn();\r\n if (r instanceof Promise) {\r\n await r;\r\n }\r\n } catch (err) {\r\n console.error(err);\r\n }\r\n }\r\n\r\n (el as any).__unmountCbs = undefined;\r\n}\r\n","import { runUnmountsForElement } from \"./mount\";\r\n\r\nexport async function destroy(root: Element): Promise<void> {\r\n const children = Array.from(root.childNodes);\r\n\r\n for (const child of children) {\r\n await destroyChild(child);\r\n }\r\n\r\n await runUnmountsForElement(root);\r\n\r\n if (root.parentNode) {\r\n root.parentNode.removeChild(root);\r\n } else {\r\n root.remove(); // Element hat remove()\r\n }\r\n}\r\n\r\nasync function destroyChild(node: Node): Promise<void> {\r\n if (node instanceof Element) {\r\n const kids = Array.from(node.childNodes);\r\n\r\n for (const k of kids) {\r\n await destroyChild(k);\r\n }\r\n\r\n await runUnmountsForElement(node);\r\n\r\n if (node.parentNode) {\r\n node.parentNode.removeChild(node);\r\n } else {\r\n node.remove();\r\n }\r\n\r\n return;\r\n }\r\n\r\n // Text/Comment etc.\r\n if (node.parentNode) {\r\n node.parentNode.removeChild(node);\r\n }\r\n}\r\n","import type { ReadFn } from \"./signal\";\n\nexport async function effect<T>(\n readFn: ReadFn<T>,\n fn: (value: T) => Promise<unknown> | unknown\n): Promise<void> {\n //call, run fn AND register (register == provide clbk)\n await readFn(async (v) => {\n await fn(v as T);\n });\n}\n","export function fragment(p: null, ...childs: any) {\n return childs;\n}\n","import type { RenderCtx } from \"./render\";\r\nimport type { ReadFn } from \"./signal\";\r\n\r\ntype EventHandler<E extends Event = Event> = (event: E) => void;\r\n\r\ninterface DOMEvents {\r\n onClick?: EventHandler<MouseEvent>;\r\n onDblClick?: EventHandler<MouseEvent>;\r\n onMouseDown?: EventHandler<MouseEvent>;\r\n onMouseUp?: EventHandler<MouseEvent>;\r\n onMouseMove?: EventHandler<MouseEvent>;\r\n onMouseEnter?: EventHandler<MouseEvent>;\r\n onMouseLeave?: EventHandler<MouseEvent>;\r\n\r\n onKeyDown?: EventHandler<KeyboardEvent>;\r\n onKeyUp?: EventHandler<KeyboardEvent>;\r\n onInput?: EventHandler<InputEvent>;\r\n onChange?: EventHandler<Event>;\r\n\r\n onFocus?: EventHandler<FocusEvent>;\r\n onBlur?: EventHandler<FocusEvent>;\r\n}\r\n\r\ninterface StyleProps {\r\n [key: string]: string | number | ReadFn<string | number>;\r\n}\r\n\r\ntype MaybeSignal<T> = T | ReadFn<T>;\r\n\r\ninterface HTMLAttributes extends DOMEvents {\r\n id?: string;\r\n class?: string;\r\n className?: string;\r\n title?: string;\r\n\r\n style?: StyleProps;\r\n\r\n value?: MaybeSignal<string | number>;\r\n checked?: MaybeSignal<boolean>;\r\n disabled?: MaybeSignal<boolean>;\r\n\r\n children?: any;\r\n}\r\n\r\ninterface SVGAttributes extends DOMEvents {\r\n id?: string;\r\n class?: string;\r\n\r\n style?: StyleProps;\r\n\r\n viewBox?: MaybeSignal<string>;\r\n fill?: MaybeSignal<string>;\r\n stroke?: MaybeSignal<string>;\r\n strokeWidth?: MaybeSignal<number>;\r\n\r\n d?: MaybeSignal<string>;\r\n cx?: MaybeSignal<string | number>;\r\n cy?: MaybeSignal<string | number>;\r\n r?: MaybeSignal<string | number>;\r\n\r\n x?: MaybeSignal<string | number>;\r\n y?: MaybeSignal<string | number>;\r\n width?: MaybeSignal<string | number>;\r\n height?: MaybeSignal<string | number>;\r\n\r\n children?: any;\r\n}\r\n\r\ndeclare global {\r\n namespace JSX {\r\n type Element = JsxNode;\r\n\r\n interface IntrinsicElements {\r\n // HTML\r\n div: HTMLAttributes;\r\n li: HTMLAttributes;\r\n ul: HTMLAttributes;\r\n h1: HTMLAttributes;\r\n h2: HTMLAttributes;\r\n h3: HTMLAttributes;\r\n h4: HTMLAttributes;\r\n h5: HTMLAttributes;\r\n h6: HTMLAttributes;\r\n span: HTMLAttributes;\r\n p: HTMLAttributes;\r\n button: HTMLAttributes;\r\n input: HTMLAttributes & {\r\n type?: string;\r\n placeholder?: string;\r\n };\r\n textarea: HTMLAttributes;\r\n form: HTMLAttributes;\r\n label: HTMLAttributes;\r\n\r\n // SVG\r\n svg: SVGAttributes;\r\n path: SVGAttributes;\r\n circle: SVGAttributes;\r\n rect: SVGAttributes;\r\n g: SVGAttributes;\r\n line: SVGAttributes;\r\n polyline: SVGAttributes;\r\n polygon: SVGAttributes;\r\n text: SVGAttributes;\r\n tspan: SVGAttributes;\r\n }\r\n }\r\n}\r\n\r\nexport type JsxChild = JsxNode | JsxText | JsxSignal;\r\n\r\nexport interface JsxText {\r\n kind: \"text\";\r\n value: string;\r\n}\r\n\r\nexport interface JsxSignal {\r\n kind: \"signal\";\r\n value: any;\r\n}\r\n\r\nexport interface JsxNode {\r\n kind: \"host\" | \"component\" | \"signal\";\r\n tag: string | ComponentFn;\r\n props: any;\r\n children: JsxChild[];\r\n}\r\n\r\nexport interface PropsInterface {\r\n ctx?: RenderCtx;\r\n}\r\n\r\nexport type ComponentFn = (\r\n props: PropsInterface,\r\n children: JsxChild[]\r\n) => Promise<JsxNode>;\r\n\r\n// 1) JSX sammelt nur Struktur\r\nexport function jsx(\r\n tag: string | ComponentFn,\r\n props: any,\r\n ...rawChildren: any[]\r\n): JsxNode {\r\n const children = rawChildren.flatMap(normalizeChild);\r\n\r\n return {\r\n kind: typeof tag === \"string\" ? \"host\" : \"component\",\r\n tag,\r\n props,\r\n children,\r\n };\r\n}\r\n\r\nfunction normalizeChild(input: any): JsxChild | JsxChild[] {\r\n if (input == null || input === false || input === true) return [];\r\n\r\n if (typeof input === \"function\" && input?.type === \"signal\") {\r\n return { kind: \"signal\", value: input };\r\n }\r\n\r\n if (typeof input === \"string\" || typeof input === \"number\") {\r\n return { kind: \"text\", value: String(input) };\r\n }\r\n\r\n if (Array.isArray(input)) {\r\n return input.flatMap(normalizeChild);\r\n }\r\n\r\n return input;\r\n}\r\n","import type { ComponentFn, JsxNode, JsxChild, JsxText, JsxSignal } from \"./jsx\";\r\nimport { beginComponentMountSession, endComponentMountSession } from \"./mount\";\r\n\r\nexport interface RenderCtx {\r\n parent: Node & ParentNode;\r\n [k: string]: any;\r\n}\r\n\r\nexport interface RenderResult {\r\n el: Node;\r\n}\r\n\r\nexport async function render(\r\n node: JsxChild,\r\n ctx: RenderCtx\r\n): Promise<RenderResult> {\r\n //nothing\r\n if (node == null) {\r\n return { el: ctx.parent };\r\n }\r\n\r\n //fragement recursive\r\n if (Array.isArray(node)) {\r\n for (const item of node) {\r\n return await render(item, ctx);\r\n }\r\n }\r\n\r\n // TEXT NODE\r\n if (node.kind === \"text\") {\r\n const el = renderText(node as JsxText, ctx);\r\n return { el };\r\n }\r\n\r\n //SIGNAL\r\n if (node.kind === \"signal\") {\r\n const el = await renderSignal(node as JsxSignal, ctx);\r\n return { el };\r\n }\r\n\r\n // COMPONENT NODE\r\n if (node.kind === \"component\") {\r\n const fn = node.tag as ComponentFn;\r\n\r\n // Mount/Unmount-Session für diese Component\r\n beginComponentMountSession();\r\n\r\n // Component-Funktion ausführen\r\n const resolved = await fn({ ...node.props, ctx }, node.children);\r\n\r\n // gerenderten Output rendern\r\n const result = await render(resolved, ctx);\r\n\r\n // Mounts ausführen und Unmounts am Root-Element registrieren\r\n if (result.el instanceof Element) {\r\n endComponentMountSession(result.el);\r\n } else {\r\n console.warn(\r\n \"Component-Root ist kein Element. Mount/Unmount werden ignoriert.\"\r\n );\r\n }\r\n\r\n ctx.self = result.el;\r\n return result;\r\n }\r\n\r\n // HOST NODE\r\n\r\n const el = await renderHost(node as JsxNode, ctx);\r\n\r\n const childCtx: RenderCtx = {\r\n ...ctx,\r\n parent: el,\r\n self: ctx.self,\r\n };\r\n\r\n for (const child of (node as JsxNode).children) {\r\n await render(child, childCtx);\r\n }\r\n\r\n return { el };\r\n}\r\n\r\n// HOST Renderer\r\nconst SVG_NS = \"http://www.w3.org/2000/svg\";\r\n\r\nconst SVG_TAGS = new Set([\r\n \"svg\",\r\n \"path\",\r\n \"circle\",\r\n \"rect\",\r\n \"line\",\r\n \"polyline\",\r\n \"polygon\",\r\n \"g\",\r\n \"defs\",\r\n \"linearGradient\",\r\n \"radialGradient\",\r\n \"stop\",\r\n \"mask\",\r\n \"clipPath\",\r\n \"pattern\",\r\n \"text\",\r\n \"tspan\",\r\n \"use\",\r\n \"symbol\",\r\n \"view\",\r\n \"ellipse\",\r\n \"foreignObject\",\r\n]);\r\n\r\nasync function renderHost(node: JsxNode, ctx: RenderCtx): Promise<Element> {\r\n if (typeof node.tag !== \"string\") {\r\n throw new Error(\"Host renderer erwartet string-Tag.\");\r\n }\r\n\r\n const tag = node.tag;\r\n const isSvg = SVG_TAGS.has(tag);\r\n\r\n const el = isSvg\r\n ? document.createElementNS(SVG_NS, tag)\r\n : document.createElement(tag);\r\n\r\n const props = node.props || {};\r\n\r\n for (const [key, value] of Object.entries(props)) {\r\n if (key === \"ctx\" || key === \"children\") continue;\r\n\r\n // EVENTS\r\n if (key.startsWith(\"on\") && typeof value === \"function\") {\r\n const evt = key.slice(2).toLowerCase();\r\n el.addEventListener(evt, value as EventListener);\r\n continue;\r\n }\r\n\r\n // STYLE (allow Signals)\r\n if (key === \"style\" && value && typeof value === \"object\") {\r\n for (const [k, v] of Object.entries(value as Record<string, any>)) {\r\n if (typeof v === \"function\" && v.type === \"signal\") {\r\n const initial = await v();\r\n el.style.setProperty(k, String(initial));\r\n\r\n await v(async (nv: any) => {\r\n el.style.setProperty(k, String(nv));\r\n });\r\n } else {\r\n el.style.setProperty(k, String(v));\r\n }\r\n }\r\n continue;\r\n }\r\n\r\n // SIGNAL PROPS (HTML + SVG)\r\n //@ts-ignore\r\n if (typeof value === \"function\" && value.type === \"signal\") {\r\n const initial = await value();\r\n\r\n if (isSvg) {\r\n el.setAttribute(key, String(initial));\r\n\r\n await value(async (nv: any) => {\r\n el.setAttribute(key, String(nv));\r\n });\r\n } else {\r\n // @ts-ignore\r\n el[key] = initial;\r\n\r\n await value(async (nv: any) => {\r\n // @ts-ignore\r\n el[key] = nv;\r\n });\r\n }\r\n continue;\r\n }\r\n\r\n // NORMAL PROPS\r\n if (isSvg) {\r\n el.setAttribute(key, String(value));\r\n } else if (key in el) {\r\n // @ts-ignore\r\n el[key] = value;\r\n } else {\r\n el.setAttribute(key, String(value));\r\n }\r\n }\r\n\r\n ctx.parent.appendChild(el);\r\n return el;\r\n}\r\n\r\n// TEXT Renderer\r\nfunction renderText(node: JsxText, ctx: RenderCtx): Text {\r\n const t = document.createTextNode(node.value);\r\n ctx.parent.appendChild(t);\r\n return t;\r\n}\r\n\r\n// SIGNAL Renderer\r\nasync function renderSignal(node: JsxSignal, ctx: RenderCtx): Promise<Text> {\r\n const el = document.createTextNode(\"\");\r\n ctx.parent.appendChild(el);\r\n\r\n await node.value(async (value: any) => {\r\n if (el instanceof Text) {\r\n el.nodeValue = String(value);\r\n } else {\r\n throw \"svg not implemented with number and string\";\r\n }\r\n });\r\n\r\n return el;\r\n}\r\n","import { jsx } from \"./jsx\";\r\nimport { destroy } from \"./destroy\";\r\nimport { render } from \"./render\";\r\nimport { mount } from \"./mount\";\r\nimport type { ReadFn } from \"./signal\";\r\nimport { effect } from \"./effect\";\r\n\r\ninterface ShowPropsInterface {\r\n when: ReadFn<boolean>;\r\n}\r\nexport async function Show(p: ShowPropsInterface, children: any) {\r\n // Stabiler Host-Knoten (NICHT neu erzeugen)\r\n const host = jsx(\"csr-show-host\", { style: { display: \"contents\" } });\r\n\r\n // Stabiles Content-VNode (NICHT neu erzeugen)\r\n const content = jsx(\r\n \"csr-show-content\",\r\n { style: { display: \"contents\" } },\r\n ...children\r\n );\r\n\r\n let hostEl: Element | null = null;\r\n let contentEl: Element | null = null;\r\n\r\n mount(async (parent) => {\r\n // Render ONE Host\r\n const { el: h } = await render(host, { parent });\r\n hostEl = h as Element;\r\n\r\n //init visible must be true.\r\n //let effect decide\r\n let visible = false;\r\n effect(p.when, async (b) => {\r\n visible = !visible;\r\n\r\n if (!visible) {\r\n // on \"hide\". Destroy the whole tree\r\n if (contentEl) {\r\n await destroy(contentEl);\r\n contentEl = null;\r\n }\r\n } else {\r\n // render the whole tree\r\n const { el: c } = await render(content, {\r\n //@ts-expect-error\r\n ...p.ctx,\r\n parent: hostEl!,\r\n });\r\n contentEl = c as Element;\r\n }\r\n });\r\n });\r\n\r\n // Show produce his own structure, an MUST return nothing\r\n return null;\r\n}\r\n","import type { UnmountCallback } from \"./mount\";\r\nimport { registerUnmount } from \"./mount\";\r\n\r\nexport type { UnmountCallback } from \"./mount\";\r\n\r\n// Call this inside components to register cleanup logic for the component.\r\n// The actual association with the component root DOM element\r\n// happens in endComponentMountSession().\r\nexport function unmount(cb: UnmountCallback): void {\r\n registerUnmount(cb);\r\n}\r\n","import { unmount } from \"./unmount\";\ntype UUID = string;\n\nexport type ReadFn<T> = ((\n cb?: (value: unknown) => Promise<void>\n) => Promise<T>) & {\n type: \"signal\";\n};\n\nexport function signal<T>(value: T) {\n const uuid = crypto.randomUUID();\n connector.addTopic(uuid);\n\n unmount(() => {\n connector.removeTopic(uuid);\n });\n\n const read: ReadFn<T> = async (cb?: (v: unknown) => Promise<void>) => {\n if (cb) {\n connector.registerClbk(uuid, cb);\n unmount(() => {\n connector.removeClbk(uuid, cb);\n });\n await cb(value);\n }\n return value;\n };\n read.type = \"signal\";\n\n const write = async (cb: (prev: T) => Promise<T> | T) => {\n //get new value\n const next: T = await cb(value);\n value = next;\n\n //update signals\n if (connector) {\n connector.update(uuid, next);\n }\n };\n\n return [read, write] as const;\n}\n\nexport interface ConnectorInterface {\n update: (uuid: UUID, value: unknown) => void;\n addTopic: (uuid: UUID) => void;\n removeTopic: (uuid: UUID) => void;\n registerClbk: (uuid: UUID, cb: (value: unknown) => void) => void;\n removeClbk: (uuid: UUID, cb: (value: unknown) => void) => void;\n getUuidByClbk: (cb: (value: unknown) => void) => UUID;\n}\n\nclass Connector implements ConnectorInterface {\n //listener is a list of uuids that have a set of callbacks\n //it is possible, that a uuid has NO listener at all. this is by\n //design. uuid will be remove by mount and unmount\n private topic = new Map<UUID, Set<(value: any) => void>>();\n\n //the clbk mapping is to find uuid by fn ref fast\n //we dont want to have search all the listeners. this is the reason for\n //uuidMapping. its just a helper for better performance\n private clbkMapping = new Map<(value: any) => void, UUID>();\n\n public addTopic(uuid: UUID) {\n this.topic.set(uuid, new Set());\n }\n\n public removeTopic(uuid: UUID) {\n this.topic.delete(uuid);\n }\n\n public registerClbk<T>(uuid: string, cb: (value: T) => void) {\n const listeners = this.topic.get(uuid);\n if (!listeners) return;\n\n this.clbkMapping.set(cb, uuid);\n listeners.add(cb);\n }\n\n public removeClbk<T>(uuid: UUID, cb: (value: T) => void) {\n const listeners = this.topic.get(uuid);\n if (!listeners) return;\n listeners.delete(cb);\n }\n\n public update<T>(uuid: UUID, value: T) {\n const listeners = this.topic.get(uuid);\n if (!listeners) return;\n for (const listener of listeners) {\n listener(value);\n }\n }\n public getUuidByClbk(fn: (value: unknown) => void) {\n const uuid = this.clbkMapping.get(fn);\n if (!uuid) {\n throw new Error(\"Connector: clbkMapping has no uuid for fn \" + fn);\n }\n return uuid;\n }\n}\nexport const connector = new Connector();\n"],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@papack/csr",
|
|
3
|
+
"description": "Async UI Dom runtime",
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"author": "Matthias Steiner",
|
|
6
|
+
"repository": "github:papack/csr",
|
|
7
|
+
"homepage": "https://github.com/papack/csr",
|
|
8
|
+
"publishConfig": {
|
|
9
|
+
"access": "public"
|
|
10
|
+
},
|
|
11
|
+
"module": "dist/index.mjs",
|
|
12
|
+
"main": "./dist/index.cjs",
|
|
13
|
+
"types": "./dist/index.d.mts",
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"type": "module",
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"build": "tsdown"
|
|
21
|
+
},
|
|
22
|
+
"devDependencies": {
|
|
23
|
+
"@types/bun": "latest",
|
|
24
|
+
"tsdown": "^0.16.8"
|
|
25
|
+
}
|
|
26
|
+
}
|
package/readme.md
ADDED
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
# @papack/csr
|
|
2
|
+
|
|
3
|
+
Async UI Dom runtime (experimental) .Designed for **predictability over comfort** — which, in practice, _creates_ comfort.
|
|
4
|
+
No Virtual DOM. No content diffing.
|
|
5
|
+
Instead: **real mutation**, **async components**, **deterministic structural updates**.
|
|
6
|
+
|
|
7
|
+
Zero dependencies. Fully TypeScript.
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- Async components (`await` directly inside components)
|
|
12
|
+
- Deterministic rendering without a Virtual DOM
|
|
13
|
+
- `signal` / `effect` as minimal reactivity primitives
|
|
14
|
+
- Explicit lifecycle (`mount`, `unmount`, `destroy`)
|
|
15
|
+
- Keyed `For` with stable DOM identity
|
|
16
|
+
- Structural conditional rendering (`Show`)
|
|
17
|
+
- Mutation is allowed (by design)
|
|
18
|
+
- Fully TypeScript
|
|
19
|
+
|
|
20
|
+
## Core Ideas
|
|
21
|
+
|
|
22
|
+
- **Async components are first-class**
|
|
23
|
+
|
|
24
|
+
```ts
|
|
25
|
+
async function User() {
|
|
26
|
+
const data = await fetch("/api/user").then((r) => r.json());
|
|
27
|
+
return <div>{data.name}</div>;
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
- **Signals are active sources**
|
|
32
|
+
|
|
33
|
+
- no reference equality checks
|
|
34
|
+
- mutation is allowed
|
|
35
|
+
- every `set()` reliably triggers effects
|
|
36
|
+
|
|
37
|
+
- **Lifecycle is bound to real DOM nodes**
|
|
38
|
+
|
|
39
|
+
- `mount` / `unmount` attach to actual elements
|
|
40
|
+
- for: reordering ≠ remounting
|
|
41
|
+
- removal = real `destroy`
|
|
42
|
+
|
|
43
|
+
## Example
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
import { jsx, render, signal } from "../core";
|
|
47
|
+
import { For } from "../core/for";
|
|
48
|
+
|
|
49
|
+
const [items, setItems] = signal([
|
|
50
|
+
{ uuid: "a", name: "A" },
|
|
51
|
+
{ uuid: "b", name: "B" },
|
|
52
|
+
]);
|
|
53
|
+
|
|
54
|
+
render(<App />, { parent: document.body });
|
|
55
|
+
|
|
56
|
+
function App() {
|
|
57
|
+
return (
|
|
58
|
+
<ul>
|
|
59
|
+
<For each={items}>{(item) => <li>{item.name}</li>}</For>
|
|
60
|
+
</ul>
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## `signal`
|
|
68
|
+
|
|
69
|
+
Signals are **active state containers**, not passive values.
|
|
70
|
+
|
|
71
|
+
```ts
|
|
72
|
+
const [count, setCount] = signal(0);
|
|
73
|
+
|
|
74
|
+
setCount((v) => v + 1);
|
|
75
|
+
setCount(() => 42);
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Properties
|
|
79
|
+
|
|
80
|
+
- `set()` **always triggers**
|
|
81
|
+
- no equality checks
|
|
82
|
+
- mutation is allowed
|
|
83
|
+
- async setters are allowed
|
|
84
|
+
|
|
85
|
+
## `effect(readFn, callback)`
|
|
86
|
+
|
|
87
|
+
Subscribes to a signal and reacts to changes.
|
|
88
|
+
|
|
89
|
+
```ts
|
|
90
|
+
effect(count, (value) => {
|
|
91
|
+
console.log(value);
|
|
92
|
+
});
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### Characteristics
|
|
96
|
+
|
|
97
|
+
- runs immediately with the current value
|
|
98
|
+
- runs on **every** `set()`
|
|
99
|
+
- no dependency tracking
|
|
100
|
+
- async callbacks supported
|
|
101
|
+
|
|
102
|
+
```ts
|
|
103
|
+
effect(userId, async (id) => {
|
|
104
|
+
const user = await fetch(`/api/user/${id}`).then((r) => r.json());
|
|
105
|
+
});
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
````md
|
|
109
|
+
## Context Injection
|
|
110
|
+
|
|
111
|
+
`render()` accepts arbitrary values on the top-level context.
|
|
112
|
+
This context is automatically available in **every component** via `props.ctx`.
|
|
113
|
+
|
|
114
|
+
```ts
|
|
115
|
+
render(<App />, {
|
|
116
|
+
parent: document.body,
|
|
117
|
+
api,
|
|
118
|
+
events,
|
|
119
|
+
dummy: 42,
|
|
120
|
+
});
|
|
121
|
+
```
|
|
122
|
+
````
|
|
123
|
+
|
|
124
|
+
```ts
|
|
125
|
+
function Item(p: any) {
|
|
126
|
+
console.log(p.ctx.dummy); // 42
|
|
127
|
+
p.ctx.api.fetch();
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
- no providers
|
|
132
|
+
- no hooks
|
|
133
|
+
- no imports
|
|
134
|
+
- no reactivity
|
|
135
|
+
|
|
136
|
+
Context is for **stable infrastructure** (stores, APIs, event buses),
|
|
137
|
+
not for frequently changing UI state.
|
|
138
|
+
|
|
139
|
+
The context is immutable for the lifetime of the render tree and
|
|
140
|
+
does not trigger re-renders.
|
|
141
|
+
|
|
142
|
+
## Lifecycle Primitives
|
|
143
|
+
|
|
144
|
+
Lifecycle is **explicit** and **structural**.
|
|
145
|
+
|
|
146
|
+
### `mount(fn)`
|
|
147
|
+
|
|
148
|
+
Registers a callback that runs **once**, when the component’s root DOM element
|
|
149
|
+
is attached.
|
|
150
|
+
|
|
151
|
+
```ts
|
|
152
|
+
mount((parent) => {
|
|
153
|
+
// parent === root Element
|
|
154
|
+
});
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
- runs exactly once per component instance
|
|
158
|
+
- runs after the DOM node exists
|
|
159
|
+
- used for subscriptions, timers, imperative DOM work
|
|
160
|
+
|
|
161
|
+
### `unmount(fn)`
|
|
162
|
+
|
|
163
|
+
Registers cleanup logic tied to the component’s root element.
|
|
164
|
+
|
|
165
|
+
```ts
|
|
166
|
+
unmount(() => {
|
|
167
|
+
// cleanup
|
|
168
|
+
});
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
- runs exactly once
|
|
172
|
+
- runs before DOM removal
|
|
173
|
+
- children unmount before parents
|
|
174
|
+
- guaranteed execution
|
|
175
|
+
|
|
176
|
+
## `For` (intentionally restricted)
|
|
177
|
+
|
|
178
|
+
`For` is **not** a general iterator.
|
|
179
|
+
It is a **keyed structural renderer**.
|
|
180
|
+
|
|
181
|
+
### Rules
|
|
182
|
+
|
|
183
|
+
- `each` **must** bet an array
|
|
184
|
+
- each item **must** be an object
|
|
185
|
+
- each object **must** have a stable key field (e.g. `uuid`)
|
|
186
|
+
- no fallbacks, no warnings
|
|
187
|
+
|
|
188
|
+
```ts
|
|
189
|
+
type Item = {
|
|
190
|
+
uuid: string; // required
|
|
191
|
+
[key: string]: any;
|
|
192
|
+
};
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
### What `For` does
|
|
196
|
+
|
|
197
|
+
- detects:
|
|
198
|
+
|
|
199
|
+
- order changes
|
|
200
|
+
- added items
|
|
201
|
+
- removed items
|
|
202
|
+
|
|
203
|
+
- performs:
|
|
204
|
+
|
|
205
|
+
- DOM moves (`insertBefore`)
|
|
206
|
+
- rendering **only** for new keys
|
|
207
|
+
- `destroy()` for removed keys
|
|
208
|
+
|
|
209
|
+
### What `For` does **not** do
|
|
210
|
+
|
|
211
|
+
- no content diffing
|
|
212
|
+
- no re-rendering existing items
|
|
213
|
+
- no prop patching
|
|
214
|
+
- no heuristic matching
|
|
215
|
+
|
|
216
|
+
> If an item’s content changes, the item itself must be reactive.
|
|
217
|
+
|
|
218
|
+
---
|
|
219
|
+
|
|
220
|
+
## Mutation: allowed
|
|
221
|
+
|
|
222
|
+
```ts
|
|
223
|
+
setItems((prev) => {
|
|
224
|
+
prev.push({ uuid: "c", name: "C" });
|
|
225
|
+
return prev;
|
|
226
|
+
});
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
This is **correct**.
|
|
230
|
+
|
|
231
|
+
Why:
|
|
232
|
+
|
|
233
|
+
- `signal` is active
|
|
234
|
+
- effects are not reference-based
|
|
235
|
+
- `For` evaluates only keys and order
|
|
236
|
+
|
|
237
|
+
## `Show` (structural conditional rendering)
|
|
238
|
+
|
|
239
|
+
`Show` controls **existence**, not visibility.
|
|
240
|
+
|
|
241
|
+
```ts
|
|
242
|
+
<Show when={visible}>
|
|
243
|
+
<User />
|
|
244
|
+
</Show>
|
|
245
|
+
```
|