@getforma/core 0.1.0 → 0.2.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/README.md +7 -7
- package/dist/{chunk-DB2ULMOM.js → chunk-VKKPX4YU.js} +18 -9
- package/dist/chunk-VKKPX4YU.js.map +1 -0
- package/dist/{chunk-27QSSN4E.cjs → chunk-VP5EOGM5.cjs} +18 -8
- package/dist/chunk-VP5EOGM5.cjs.map +1 -0
- package/dist/formajs.global.js +1 -1
- package/dist/formajs.global.js.map +1 -1
- package/dist/index.cjs +48 -44
- package/dist/index.d.cts +13 -1
- package/dist/index.d.ts +13 -1
- package/dist/index.js +2 -2
- package/dist/jsx.d.ts +428 -0
- package/dist/runtime.cjs +22 -22
- package/dist/runtime.js +1 -1
- package/package.json +3 -3
- package/dist/chunk-27QSSN4E.cjs.map +0 -1
- package/dist/chunk-DB2ULMOM.js.map +0 -1
package/dist/jsx.d.ts
ADDED
|
@@ -0,0 +1,428 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Forma JSX Type Definitions
|
|
3
|
+
*
|
|
4
|
+
* Enables TypeScript checking for JSX syntax.
|
|
5
|
+
* Every attribute accepts MaybeReactive<T> — a value or signal getter.
|
|
6
|
+
*
|
|
7
|
+
* esbuild transforms JSX into h() calls:
|
|
8
|
+
* <div class="x">hi</div> → h("div", { class: "x" }, "hi")
|
|
9
|
+
* <>a b</> → h(Fragment, null, "a", " ", "b")
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
type MaybeReactive<T> = T | (() => T);
|
|
13
|
+
|
|
14
|
+
declare global {
|
|
15
|
+
namespace JSX {
|
|
16
|
+
// JSX expressions return whatever h() returns
|
|
17
|
+
type Element = HTMLElement | DocumentFragment;
|
|
18
|
+
|
|
19
|
+
interface ElementChildrenAttribute {
|
|
20
|
+
children: {};
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// -----------------------------------------------------------------------
|
|
24
|
+
// Base attribute interfaces
|
|
25
|
+
// -----------------------------------------------------------------------
|
|
26
|
+
|
|
27
|
+
interface HTMLAttributes<T extends EventTarget = HTMLElement> {
|
|
28
|
+
// Core
|
|
29
|
+
class?: MaybeReactive<string>;
|
|
30
|
+
className?: MaybeReactive<string>;
|
|
31
|
+
id?: MaybeReactive<string>;
|
|
32
|
+
style?: MaybeReactive<string | Record<string, string>>;
|
|
33
|
+
title?: MaybeReactive<string>;
|
|
34
|
+
tabIndex?: MaybeReactive<number>;
|
|
35
|
+
hidden?: MaybeReactive<boolean>;
|
|
36
|
+
role?: MaybeReactive<string>;
|
|
37
|
+
slot?: string;
|
|
38
|
+
dir?: MaybeReactive<string>;
|
|
39
|
+
lang?: MaybeReactive<string>;
|
|
40
|
+
draggable?: MaybeReactive<boolean>;
|
|
41
|
+
contentEditable?: MaybeReactive<boolean | 'true' | 'false' | 'inherit'>;
|
|
42
|
+
|
|
43
|
+
// Data attributes
|
|
44
|
+
[key: `data-${string}`]: MaybeReactive<string | number | boolean>;
|
|
45
|
+
|
|
46
|
+
// ARIA attributes
|
|
47
|
+
[key: `aria-${string}`]: MaybeReactive<string | number | boolean>;
|
|
48
|
+
|
|
49
|
+
// Mouse events
|
|
50
|
+
onClick?: (e: MouseEvent) => void;
|
|
51
|
+
onDblClick?: (e: MouseEvent) => void;
|
|
52
|
+
onMouseDown?: (e: MouseEvent) => void;
|
|
53
|
+
onMouseUp?: (e: MouseEvent) => void;
|
|
54
|
+
onMouseEnter?: (e: MouseEvent) => void;
|
|
55
|
+
onMouseLeave?: (e: MouseEvent) => void;
|
|
56
|
+
onMouseMove?: (e: MouseEvent) => void;
|
|
57
|
+
onContextMenu?: (e: MouseEvent) => void;
|
|
58
|
+
|
|
59
|
+
// Keyboard events
|
|
60
|
+
onKeyDown?: (e: KeyboardEvent) => void;
|
|
61
|
+
onKeyUp?: (e: KeyboardEvent) => void;
|
|
62
|
+
onKeyPress?: (e: KeyboardEvent) => void;
|
|
63
|
+
|
|
64
|
+
// Focus events
|
|
65
|
+
onFocus?: (e: FocusEvent) => void;
|
|
66
|
+
onBlur?: (e: FocusEvent) => void;
|
|
67
|
+
onFocusIn?: (e: FocusEvent) => void;
|
|
68
|
+
onFocusOut?: (e: FocusEvent) => void;
|
|
69
|
+
|
|
70
|
+
// Form events
|
|
71
|
+
onInput?: (e: InputEvent) => void;
|
|
72
|
+
onChange?: (e: Event) => void;
|
|
73
|
+
onSubmit?: (e: SubmitEvent) => void;
|
|
74
|
+
onReset?: (e: Event) => void;
|
|
75
|
+
onInvalid?: (e: Event) => void;
|
|
76
|
+
|
|
77
|
+
// Clipboard events
|
|
78
|
+
onCopy?: (e: ClipboardEvent) => void;
|
|
79
|
+
onCut?: (e: ClipboardEvent) => void;
|
|
80
|
+
onPaste?: (e: ClipboardEvent) => void;
|
|
81
|
+
|
|
82
|
+
// Touch events
|
|
83
|
+
onTouchStart?: (e: TouchEvent) => void;
|
|
84
|
+
onTouchEnd?: (e: TouchEvent) => void;
|
|
85
|
+
onTouchMove?: (e: TouchEvent) => void;
|
|
86
|
+
onTouchCancel?: (e: TouchEvent) => void;
|
|
87
|
+
|
|
88
|
+
// Pointer events
|
|
89
|
+
onPointerDown?: (e: PointerEvent) => void;
|
|
90
|
+
onPointerUp?: (e: PointerEvent) => void;
|
|
91
|
+
onPointerMove?: (e: PointerEvent) => void;
|
|
92
|
+
onPointerEnter?: (e: PointerEvent) => void;
|
|
93
|
+
onPointerLeave?: (e: PointerEvent) => void;
|
|
94
|
+
onPointerCancel?: (e: PointerEvent) => void;
|
|
95
|
+
|
|
96
|
+
// UI events
|
|
97
|
+
onScroll?: (e: Event) => void;
|
|
98
|
+
onWheel?: (e: WheelEvent) => void;
|
|
99
|
+
onResize?: (e: UIEvent) => void;
|
|
100
|
+
|
|
101
|
+
// Animation/Transition
|
|
102
|
+
onAnimationStart?: (e: AnimationEvent) => void;
|
|
103
|
+
onAnimationEnd?: (e: AnimationEvent) => void;
|
|
104
|
+
onAnimationIteration?: (e: AnimationEvent) => void;
|
|
105
|
+
onTransitionEnd?: (e: TransitionEvent) => void;
|
|
106
|
+
|
|
107
|
+
// Media events
|
|
108
|
+
onLoad?: (e: Event) => void;
|
|
109
|
+
onError?: (e: Event) => void;
|
|
110
|
+
|
|
111
|
+
// Ref callback
|
|
112
|
+
ref?: (el: T) => void;
|
|
113
|
+
|
|
114
|
+
// Children (passed as rest args by esbuild, but TS needs this)
|
|
115
|
+
children?: unknown;
|
|
116
|
+
|
|
117
|
+
// FormaJS-specific
|
|
118
|
+
'data-forma-island'?: string;
|
|
119
|
+
'data-forma-component'?: string;
|
|
120
|
+
'data-forma-status'?: string;
|
|
121
|
+
|
|
122
|
+
// dangerouslySetInnerHTML
|
|
123
|
+
dangerouslySetInnerHTML?: { __html: string };
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// -----------------------------------------------------------------------
|
|
127
|
+
// Element-specific attribute interfaces
|
|
128
|
+
// -----------------------------------------------------------------------
|
|
129
|
+
|
|
130
|
+
interface InputHTMLAttributes extends HTMLAttributes<HTMLInputElement> {
|
|
131
|
+
type?: MaybeReactive<string>;
|
|
132
|
+
value?: MaybeReactive<string | number>;
|
|
133
|
+
placeholder?: MaybeReactive<string>;
|
|
134
|
+
disabled?: MaybeReactive<boolean>;
|
|
135
|
+
checked?: MaybeReactive<boolean>;
|
|
136
|
+
name?: string;
|
|
137
|
+
autocomplete?: string;
|
|
138
|
+
required?: MaybeReactive<boolean>;
|
|
139
|
+
readonly?: MaybeReactive<boolean>;
|
|
140
|
+
min?: MaybeReactive<string | number>;
|
|
141
|
+
max?: MaybeReactive<string | number>;
|
|
142
|
+
step?: MaybeReactive<string | number>;
|
|
143
|
+
pattern?: string;
|
|
144
|
+
maxLength?: number;
|
|
145
|
+
minLength?: number;
|
|
146
|
+
accept?: string;
|
|
147
|
+
multiple?: boolean;
|
|
148
|
+
autofocus?: boolean;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
interface SelectHTMLAttributes extends HTMLAttributes<HTMLSelectElement> {
|
|
152
|
+
value?: MaybeReactive<string>;
|
|
153
|
+
disabled?: MaybeReactive<boolean>;
|
|
154
|
+
multiple?: boolean;
|
|
155
|
+
name?: string;
|
|
156
|
+
required?: MaybeReactive<boolean>;
|
|
157
|
+
size?: number;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
interface TextareaHTMLAttributes extends HTMLAttributes<HTMLTextAreaElement> {
|
|
161
|
+
value?: MaybeReactive<string>;
|
|
162
|
+
placeholder?: MaybeReactive<string>;
|
|
163
|
+
disabled?: MaybeReactive<boolean>;
|
|
164
|
+
readonly?: MaybeReactive<boolean>;
|
|
165
|
+
rows?: number;
|
|
166
|
+
cols?: number;
|
|
167
|
+
name?: string;
|
|
168
|
+
required?: MaybeReactive<boolean>;
|
|
169
|
+
maxLength?: number;
|
|
170
|
+
wrap?: string;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
interface FormHTMLAttributes extends HTMLAttributes<HTMLFormElement> {
|
|
174
|
+
action?: string;
|
|
175
|
+
method?: string;
|
|
176
|
+
enctype?: string;
|
|
177
|
+
target?: string;
|
|
178
|
+
noValidate?: boolean;
|
|
179
|
+
autocomplete?: string;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
interface AnchorHTMLAttributes extends HTMLAttributes<HTMLAnchorElement> {
|
|
183
|
+
href?: MaybeReactive<string>;
|
|
184
|
+
target?: string;
|
|
185
|
+
rel?: string;
|
|
186
|
+
download?: string | boolean;
|
|
187
|
+
hreflang?: string;
|
|
188
|
+
type?: string;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
interface ImgHTMLAttributes extends HTMLAttributes<HTMLImageElement> {
|
|
192
|
+
src?: MaybeReactive<string>;
|
|
193
|
+
alt?: MaybeReactive<string>;
|
|
194
|
+
loading?: 'lazy' | 'eager';
|
|
195
|
+
decoding?: 'sync' | 'async' | 'auto';
|
|
196
|
+
width?: number | string;
|
|
197
|
+
height?: number | string;
|
|
198
|
+
srcset?: string;
|
|
199
|
+
sizes?: string;
|
|
200
|
+
crossOrigin?: string;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
interface VideoHTMLAttributes extends HTMLAttributes<HTMLVideoElement> {
|
|
204
|
+
src?: MaybeReactive<string>;
|
|
205
|
+
preload?: 'none' | 'metadata' | 'auto';
|
|
206
|
+
autoplay?: boolean;
|
|
207
|
+
loop?: boolean;
|
|
208
|
+
muted?: MaybeReactive<boolean>;
|
|
209
|
+
controls?: boolean;
|
|
210
|
+
width?: number | string;
|
|
211
|
+
height?: number | string;
|
|
212
|
+
poster?: string;
|
|
213
|
+
playsInline?: boolean;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
interface LabelHTMLAttributes extends HTMLAttributes<HTMLLabelElement> {
|
|
217
|
+
for?: string;
|
|
218
|
+
htmlFor?: string;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
interface ButtonHTMLAttributes extends HTMLAttributes<HTMLButtonElement> {
|
|
222
|
+
type?: 'button' | 'submit' | 'reset';
|
|
223
|
+
disabled?: MaybeReactive<boolean>;
|
|
224
|
+
name?: string;
|
|
225
|
+
value?: string;
|
|
226
|
+
form?: string;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
interface OptionHTMLAttributes extends HTMLAttributes<HTMLOptionElement> {
|
|
230
|
+
value?: string;
|
|
231
|
+
selected?: MaybeReactive<boolean>;
|
|
232
|
+
disabled?: MaybeReactive<boolean>;
|
|
233
|
+
label?: string;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
interface IframeHTMLAttributes extends HTMLAttributes<HTMLIFrameElement> {
|
|
237
|
+
src?: MaybeReactive<string>;
|
|
238
|
+
srcdoc?: string;
|
|
239
|
+
sandbox?: string;
|
|
240
|
+
allow?: string;
|
|
241
|
+
width?: number | string;
|
|
242
|
+
height?: number | string;
|
|
243
|
+
loading?: 'lazy' | 'eager';
|
|
244
|
+
name?: string;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
interface DialogHTMLAttributes extends HTMLAttributes<HTMLDialogElement> {
|
|
248
|
+
open?: MaybeReactive<boolean>;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
interface CanvasHTMLAttributes extends HTMLAttributes<HTMLCanvasElement> {
|
|
252
|
+
width?: number | string;
|
|
253
|
+
height?: number | string;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
interface TableCellHTMLAttributes extends HTMLAttributes<HTMLTableCellElement> {
|
|
257
|
+
colSpan?: number;
|
|
258
|
+
rowSpan?: number;
|
|
259
|
+
scope?: string;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
// -----------------------------------------------------------------------
|
|
263
|
+
// SVG attributes (minimal set for common usage)
|
|
264
|
+
// -----------------------------------------------------------------------
|
|
265
|
+
|
|
266
|
+
interface SVGAttributes extends HTMLAttributes<SVGElement> {
|
|
267
|
+
viewBox?: string;
|
|
268
|
+
xmlns?: string;
|
|
269
|
+
fill?: MaybeReactive<string>;
|
|
270
|
+
stroke?: MaybeReactive<string>;
|
|
271
|
+
strokeWidth?: MaybeReactive<string | number>;
|
|
272
|
+
strokeLinecap?: string;
|
|
273
|
+
strokeLinejoin?: string;
|
|
274
|
+
d?: MaybeReactive<string>;
|
|
275
|
+
cx?: MaybeReactive<string | number>;
|
|
276
|
+
cy?: MaybeReactive<string | number>;
|
|
277
|
+
r?: MaybeReactive<string | number>;
|
|
278
|
+
rx?: MaybeReactive<string | number>;
|
|
279
|
+
ry?: MaybeReactive<string | number>;
|
|
280
|
+
x?: MaybeReactive<string | number>;
|
|
281
|
+
y?: MaybeReactive<string | number>;
|
|
282
|
+
x1?: MaybeReactive<string | number>;
|
|
283
|
+
y1?: MaybeReactive<string | number>;
|
|
284
|
+
x2?: MaybeReactive<string | number>;
|
|
285
|
+
y2?: MaybeReactive<string | number>;
|
|
286
|
+
width?: MaybeReactive<string | number>;
|
|
287
|
+
height?: MaybeReactive<string | number>;
|
|
288
|
+
transform?: MaybeReactive<string>;
|
|
289
|
+
opacity?: MaybeReactive<string | number>;
|
|
290
|
+
clipPath?: string;
|
|
291
|
+
points?: MaybeReactive<string>;
|
|
292
|
+
pathLength?: number;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
// -----------------------------------------------------------------------
|
|
296
|
+
// IntrinsicElements — maps tag names to their attribute types
|
|
297
|
+
// -----------------------------------------------------------------------
|
|
298
|
+
|
|
299
|
+
interface IntrinsicElements {
|
|
300
|
+
// Block elements
|
|
301
|
+
div: HTMLAttributes<HTMLDivElement>;
|
|
302
|
+
section: HTMLAttributes<HTMLElement>;
|
|
303
|
+
article: HTMLAttributes<HTMLElement>;
|
|
304
|
+
aside: HTMLAttributes<HTMLElement>;
|
|
305
|
+
header: HTMLAttributes<HTMLElement>;
|
|
306
|
+
footer: HTMLAttributes<HTMLElement>;
|
|
307
|
+
main: HTMLAttributes<HTMLElement>;
|
|
308
|
+
nav: HTMLAttributes<HTMLElement>;
|
|
309
|
+
|
|
310
|
+
// Headings
|
|
311
|
+
h1: HTMLAttributes<HTMLHeadingElement>;
|
|
312
|
+
h2: HTMLAttributes<HTMLHeadingElement>;
|
|
313
|
+
h3: HTMLAttributes<HTMLHeadingElement>;
|
|
314
|
+
h4: HTMLAttributes<HTMLHeadingElement>;
|
|
315
|
+
h5: HTMLAttributes<HTMLHeadingElement>;
|
|
316
|
+
h6: HTMLAttributes<HTMLHeadingElement>;
|
|
317
|
+
|
|
318
|
+
// Text
|
|
319
|
+
p: HTMLAttributes<HTMLParagraphElement>;
|
|
320
|
+
span: HTMLAttributes<HTMLSpanElement>;
|
|
321
|
+
strong: HTMLAttributes<HTMLElement>;
|
|
322
|
+
em: HTMLAttributes<HTMLElement>;
|
|
323
|
+
b: HTMLAttributes<HTMLElement>;
|
|
324
|
+
i: HTMLAttributes<HTMLElement>;
|
|
325
|
+
small: HTMLAttributes<HTMLElement>;
|
|
326
|
+
code: HTMLAttributes<HTMLElement>;
|
|
327
|
+
pre: HTMLAttributes<HTMLPreElement>;
|
|
328
|
+
blockquote: HTMLAttributes<HTMLQuoteElement>;
|
|
329
|
+
abbr: HTMLAttributes<HTMLElement>;
|
|
330
|
+
cite: HTMLAttributes<HTMLElement>;
|
|
331
|
+
mark: HTMLAttributes<HTMLElement>;
|
|
332
|
+
sub: HTMLAttributes<HTMLElement>;
|
|
333
|
+
sup: HTMLAttributes<HTMLElement>;
|
|
334
|
+
del: HTMLAttributes<HTMLElement>;
|
|
335
|
+
ins: HTMLAttributes<HTMLElement>;
|
|
336
|
+
time: HTMLAttributes<HTMLTimeElement>;
|
|
337
|
+
|
|
338
|
+
// Lists
|
|
339
|
+
ul: HTMLAttributes<HTMLUListElement>;
|
|
340
|
+
ol: HTMLAttributes<HTMLOListElement>;
|
|
341
|
+
li: HTMLAttributes<HTMLLIElement>;
|
|
342
|
+
dl: HTMLAttributes<HTMLDListElement>;
|
|
343
|
+
dt: HTMLAttributes<HTMLElement>;
|
|
344
|
+
dd: HTMLAttributes<HTMLElement>;
|
|
345
|
+
|
|
346
|
+
// Forms
|
|
347
|
+
form: FormHTMLAttributes;
|
|
348
|
+
input: InputHTMLAttributes;
|
|
349
|
+
select: SelectHTMLAttributes;
|
|
350
|
+
textarea: TextareaHTMLAttributes;
|
|
351
|
+
button: ButtonHTMLAttributes;
|
|
352
|
+
label: LabelHTMLAttributes;
|
|
353
|
+
option: OptionHTMLAttributes;
|
|
354
|
+
optgroup: HTMLAttributes<HTMLOptGroupElement>;
|
|
355
|
+
fieldset: HTMLAttributes<HTMLFieldSetElement>;
|
|
356
|
+
legend: HTMLAttributes<HTMLLegendElement>;
|
|
357
|
+
output: HTMLAttributes<HTMLOutputElement>;
|
|
358
|
+
progress: HTMLAttributes<HTMLProgressElement>;
|
|
359
|
+
meter: HTMLAttributes<HTMLMeterElement>;
|
|
360
|
+
|
|
361
|
+
// Table
|
|
362
|
+
table: HTMLAttributes<HTMLTableElement>;
|
|
363
|
+
caption: HTMLAttributes<HTMLTableCaptionElement>;
|
|
364
|
+
colgroup: HTMLAttributes<HTMLTableColElement>;
|
|
365
|
+
col: HTMLAttributes<HTMLTableColElement>;
|
|
366
|
+
thead: HTMLAttributes<HTMLTableSectionElement>;
|
|
367
|
+
tbody: HTMLAttributes<HTMLTableSectionElement>;
|
|
368
|
+
tfoot: HTMLAttributes<HTMLTableSectionElement>;
|
|
369
|
+
tr: HTMLAttributes<HTMLTableRowElement>;
|
|
370
|
+
th: TableCellHTMLAttributes;
|
|
371
|
+
td: TableCellHTMLAttributes;
|
|
372
|
+
|
|
373
|
+
// Media
|
|
374
|
+
img: ImgHTMLAttributes;
|
|
375
|
+
video: VideoHTMLAttributes;
|
|
376
|
+
audio: HTMLAttributes<HTMLAudioElement>;
|
|
377
|
+
source: HTMLAttributes<HTMLSourceElement>;
|
|
378
|
+
picture: HTMLAttributes<HTMLPictureElement>;
|
|
379
|
+
canvas: CanvasHTMLAttributes;
|
|
380
|
+
|
|
381
|
+
// SVG
|
|
382
|
+
svg: SVGAttributes;
|
|
383
|
+
path: SVGAttributes;
|
|
384
|
+
circle: SVGAttributes;
|
|
385
|
+
rect: SVGAttributes;
|
|
386
|
+
line: SVGAttributes;
|
|
387
|
+
polyline: SVGAttributes;
|
|
388
|
+
polygon: SVGAttributes;
|
|
389
|
+
ellipse: SVGAttributes;
|
|
390
|
+
g: SVGAttributes;
|
|
391
|
+
defs: SVGAttributes;
|
|
392
|
+
use: SVGAttributes;
|
|
393
|
+
clipPath: SVGAttributes;
|
|
394
|
+
mask: SVGAttributes;
|
|
395
|
+
text: SVGAttributes;
|
|
396
|
+
tspan: SVGAttributes;
|
|
397
|
+
|
|
398
|
+
// Links & Embeds
|
|
399
|
+
a: AnchorHTMLAttributes;
|
|
400
|
+
iframe: IframeHTMLAttributes;
|
|
401
|
+
|
|
402
|
+
// Interactive
|
|
403
|
+
dialog: DialogHTMLAttributes;
|
|
404
|
+
details: HTMLAttributes<HTMLDetailsElement>;
|
|
405
|
+
summary: HTMLAttributes<HTMLElement>;
|
|
406
|
+
|
|
407
|
+
// Void elements
|
|
408
|
+
br: HTMLAttributes<HTMLBRElement>;
|
|
409
|
+
hr: HTMLAttributes<HTMLHRElement>;
|
|
410
|
+
wbr: HTMLAttributes<HTMLElement>;
|
|
411
|
+
|
|
412
|
+
// Semantic
|
|
413
|
+
address: HTMLAttributes<HTMLElement>;
|
|
414
|
+
figure: HTMLAttributes<HTMLElement>;
|
|
415
|
+
figcaption: HTMLAttributes<HTMLElement>;
|
|
416
|
+
|
|
417
|
+
// Head elements (rarely used in h(), but valid)
|
|
418
|
+
link: HTMLAttributes<HTMLLinkElement>;
|
|
419
|
+
meta: HTMLAttributes<HTMLMetaElement>;
|
|
420
|
+
style: HTMLAttributes<HTMLStyleElement>;
|
|
421
|
+
script: HTMLAttributes<HTMLScriptElement>;
|
|
422
|
+
noscript: HTMLAttributes<HTMLElement>;
|
|
423
|
+
template: HTMLAttributes<HTMLTemplateElement>;
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
export {};
|
package/dist/runtime.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkVP5EOGM5_cjs = require('./chunk-VP5EOGM5.cjs');
|
|
4
4
|
var chunkFPSLC62A_cjs = require('./chunk-FPSLC62A.cjs');
|
|
5
5
|
|
|
6
6
|
// src/dom/reconcile.ts
|
|
@@ -897,7 +897,7 @@ function parseIfHandler(expr, scope) {
|
|
|
897
897
|
}
|
|
898
898
|
if (rest.length > 0) return null;
|
|
899
899
|
return (e) => {
|
|
900
|
-
|
|
900
|
+
chunkVP5EOGM5_cjs.batch(() => {
|
|
901
901
|
if (condExpr()) thenHandler(e);
|
|
902
902
|
else elseHandler?.(e);
|
|
903
903
|
});
|
|
@@ -1582,7 +1582,7 @@ function parseHandler(expr, scope) {
|
|
|
1582
1582
|
const handlers = stmts.map((s) => parseHandler(s, scope));
|
|
1583
1583
|
if (handlers.every((h) => h !== null)) {
|
|
1584
1584
|
return (e) => {
|
|
1585
|
-
|
|
1585
|
+
chunkVP5EOGM5_cjs.batch(() => {
|
|
1586
1586
|
for (const h of handlers) h(e);
|
|
1587
1587
|
});
|
|
1588
1588
|
};
|
|
@@ -1595,7 +1595,7 @@ function parseHandler(expr, scope) {
|
|
|
1595
1595
|
const name = incrMatch[1];
|
|
1596
1596
|
const op = incrMatch[2];
|
|
1597
1597
|
return () => {
|
|
1598
|
-
|
|
1598
|
+
chunkVP5EOGM5_cjs.batch(() => {
|
|
1599
1599
|
const val = scope.getters[name]?.() ?? 0;
|
|
1600
1600
|
scope.setters[name]?.(op === "++" ? val + 1 : val - 1);
|
|
1601
1601
|
});
|
|
@@ -1606,7 +1606,7 @@ function parseHandler(expr, scope) {
|
|
|
1606
1606
|
const op = preIncrMatch[1];
|
|
1607
1607
|
const name = preIncrMatch[2];
|
|
1608
1608
|
return () => {
|
|
1609
|
-
|
|
1609
|
+
chunkVP5EOGM5_cjs.batch(() => {
|
|
1610
1610
|
const val = scope.getters[name]?.() ?? 0;
|
|
1611
1611
|
scope.setters[name]?.(op === "++" ? val + 1 : val - 1);
|
|
1612
1612
|
});
|
|
@@ -1616,7 +1616,7 @@ function parseHandler(expr, scope) {
|
|
|
1616
1616
|
if (toggleMatch && toggleMatch[1] === toggleMatch[2]) {
|
|
1617
1617
|
const name = toggleMatch[1];
|
|
1618
1618
|
return () => {
|
|
1619
|
-
|
|
1619
|
+
chunkVP5EOGM5_cjs.batch(() => {
|
|
1620
1620
|
scope.setters[name]?.(!scope.getters[name]?.());
|
|
1621
1621
|
});
|
|
1622
1622
|
};
|
|
@@ -1628,7 +1628,7 @@ function parseHandler(expr, scope) {
|
|
|
1628
1628
|
if (valExpr) {
|
|
1629
1629
|
if (_debug) dbg(`parseHandler: assignment "${name} = ..." \u2014 setter exists:`, !!scope.setters[name], ", getter exists:", !!scope.getters[name]);
|
|
1630
1630
|
return () => {
|
|
1631
|
-
|
|
1631
|
+
chunkVP5EOGM5_cjs.batch(() => {
|
|
1632
1632
|
const val = valExpr();
|
|
1633
1633
|
if (_debug) dbg(`SETTER: ${name} = ${val} (was: ${scope.getters[name]?.()})`);
|
|
1634
1634
|
scope.setters[name]?.(val);
|
|
@@ -1643,7 +1643,7 @@ function parseHandler(expr, scope) {
|
|
|
1643
1643
|
const valExpr = parseExpression(compoundMatch[3].trim(), scope);
|
|
1644
1644
|
if (valExpr) {
|
|
1645
1645
|
return () => {
|
|
1646
|
-
|
|
1646
|
+
chunkVP5EOGM5_cjs.batch(() => {
|
|
1647
1647
|
const current = scope.getters[name]?.() ?? 0;
|
|
1648
1648
|
const val = valExpr();
|
|
1649
1649
|
switch (op) {
|
|
@@ -1711,7 +1711,7 @@ function buildHandler(expr, scope) {
|
|
|
1711
1711
|
}
|
|
1712
1712
|
});
|
|
1713
1713
|
const unsafeHandler = (e) => {
|
|
1714
|
-
|
|
1714
|
+
chunkVP5EOGM5_cjs.batch(() => fn(proxy, e, e));
|
|
1715
1715
|
};
|
|
1716
1716
|
const result = {
|
|
1717
1717
|
handler: unsafeHandler,
|
|
@@ -1787,7 +1787,7 @@ function bindElement(el, scope, disposers) {
|
|
|
1787
1787
|
const textExpr = !known || known.has("data-text") ? el.getAttribute("data-text") : null;
|
|
1788
1788
|
if (textExpr) {
|
|
1789
1789
|
const evaluate = buildEvaluator(textExpr, scope);
|
|
1790
|
-
const dispose =
|
|
1790
|
+
const dispose = chunkVP5EOGM5_cjs.internalEffect(() => {
|
|
1791
1791
|
setElementTextFast(el, toTextValue(evaluate()));
|
|
1792
1792
|
});
|
|
1793
1793
|
disposers.push(dispose);
|
|
@@ -1802,7 +1802,7 @@ function bindElement(el, scope, disposers) {
|
|
|
1802
1802
|
dbg(`bindElement: data-show="${showExpr}" on <${tag}${cls}>`);
|
|
1803
1803
|
}
|
|
1804
1804
|
let initialized = false;
|
|
1805
|
-
const dispose =
|
|
1805
|
+
const dispose = chunkVP5EOGM5_cjs.internalEffect(() => {
|
|
1806
1806
|
const visible = !!evaluate();
|
|
1807
1807
|
if (_debug) dbg(`data-show effect: "${showExpr}" \u2192 ${visible}`);
|
|
1808
1808
|
applyShowVisibility(el, visible, transition, !initialized);
|
|
@@ -1821,7 +1821,7 @@ function bindElement(el, scope, disposers) {
|
|
|
1821
1821
|
const parent = el.parentNode;
|
|
1822
1822
|
let inserted = true;
|
|
1823
1823
|
let initialized = false;
|
|
1824
|
-
const dispose =
|
|
1824
|
+
const dispose = chunkVP5EOGM5_cjs.internalEffect(() => {
|
|
1825
1825
|
const show = !!evaluate();
|
|
1826
1826
|
if (show && !inserted) {
|
|
1827
1827
|
clearTransitionState(el);
|
|
@@ -1860,7 +1860,7 @@ function bindElement(el, scope, disposers) {
|
|
|
1860
1860
|
const setter = scope.setters[prop];
|
|
1861
1861
|
if (getter && setter) {
|
|
1862
1862
|
const input = el;
|
|
1863
|
-
const dispose =
|
|
1863
|
+
const dispose = chunkVP5EOGM5_cjs.internalEffect(() => {
|
|
1864
1864
|
const val = getter();
|
|
1865
1865
|
if (input.type === "checkbox") {
|
|
1866
1866
|
input.checked = !!val;
|
|
@@ -1924,14 +1924,14 @@ function bindElement(el, scope, disposers) {
|
|
|
1924
1924
|
} else if (name.startsWith("data-class:")) {
|
|
1925
1925
|
const cls = name.slice(11);
|
|
1926
1926
|
const evaluate = buildEvaluator(attr.value, scope);
|
|
1927
|
-
const dispose =
|
|
1927
|
+
const dispose = chunkVP5EOGM5_cjs.internalEffect(() => {
|
|
1928
1928
|
el.classList.toggle(cls, !!evaluate());
|
|
1929
1929
|
});
|
|
1930
1930
|
disposers.push(dispose);
|
|
1931
1931
|
} else if (name.startsWith("data-bind:")) {
|
|
1932
1932
|
const attrName = name.slice(10);
|
|
1933
1933
|
const evaluate = buildEvaluator(attr.value, scope);
|
|
1934
|
-
const dispose =
|
|
1934
|
+
const dispose = chunkVP5EOGM5_cjs.internalEffect(() => {
|
|
1935
1935
|
const val = evaluate();
|
|
1936
1936
|
if (val == null || val === false) {
|
|
1937
1937
|
el.removeAttribute(attrName);
|
|
@@ -1954,7 +1954,7 @@ function bindElement(el, scope, disposers) {
|
|
|
1954
1954
|
if (saved !== null) setter(JSON.parse(saved));
|
|
1955
1955
|
} catch {
|
|
1956
1956
|
}
|
|
1957
|
-
const dispose =
|
|
1957
|
+
const dispose = chunkVP5EOGM5_cjs.internalEffect(() => {
|
|
1958
1958
|
try {
|
|
1959
1959
|
localStorage.setItem(key, JSON.stringify(getter()));
|
|
1960
1960
|
} catch {
|
|
@@ -2041,7 +2041,7 @@ function bindElement(el, scope, disposers) {
|
|
|
2041
2041
|
});
|
|
2042
2042
|
}
|
|
2043
2043
|
} : void 0;
|
|
2044
|
-
const dispose =
|
|
2044
|
+
const dispose = chunkVP5EOGM5_cjs.internalEffect(() => {
|
|
2045
2045
|
const rawItems = evaluate();
|
|
2046
2046
|
if (!Array.isArray(rawItems)) {
|
|
2047
2047
|
for (const n of oldNodes) {
|
|
@@ -2062,7 +2062,7 @@ function bindElement(el, scope, disposers) {
|
|
|
2062
2062
|
}
|
|
2063
2063
|
const prevNodes = new Set(oldNodes);
|
|
2064
2064
|
if (keyProp) {
|
|
2065
|
-
const result =
|
|
2065
|
+
const result = chunkVP5EOGM5_cjs.reconcileList(
|
|
2066
2066
|
el,
|
|
2067
2067
|
oldItems,
|
|
2068
2068
|
rawItems,
|
|
@@ -2092,7 +2092,7 @@ function bindElement(el, scope, disposers) {
|
|
|
2092
2092
|
} else {
|
|
2093
2093
|
const wrapped = rawItems.map((item, i) => ({ __idx: i, __item: item }));
|
|
2094
2094
|
const oldWrapped = oldItems;
|
|
2095
|
-
const result =
|
|
2095
|
+
const result = chunkVP5EOGM5_cjs.reconcileList(
|
|
2096
2096
|
el,
|
|
2097
2097
|
oldWrapped,
|
|
2098
2098
|
wrapped,
|
|
@@ -2461,7 +2461,7 @@ function getScopes() {
|
|
|
2461
2461
|
function setScopeValue(element, key, value) {
|
|
2462
2462
|
const scope = element.__formaScope;
|
|
2463
2463
|
if (!scope?.setters[key]) return;
|
|
2464
|
-
|
|
2464
|
+
chunkVP5EOGM5_cjs.batch(() => {
|
|
2465
2465
|
scope.setters[key](value);
|
|
2466
2466
|
});
|
|
2467
2467
|
}
|
|
@@ -2470,7 +2470,7 @@ function resetScope(element) {
|
|
|
2470
2470
|
const initialJSON = element.__formaInitialState;
|
|
2471
2471
|
if (!scope || !initialJSON) return;
|
|
2472
2472
|
const initial = parseState(initialJSON);
|
|
2473
|
-
|
|
2473
|
+
chunkVP5EOGM5_cjs.batch(() => {
|
|
2474
2474
|
for (const [key, val] of Object.entries(initial)) {
|
|
2475
2475
|
scope.setters[key]?.(val);
|
|
2476
2476
|
}
|
|
@@ -2500,7 +2500,7 @@ function getReconciler() {
|
|
|
2500
2500
|
}
|
|
2501
2501
|
}
|
|
2502
2502
|
},
|
|
2503
|
-
batch:
|
|
2503
|
+
batch: chunkVP5EOGM5_cjs.batch
|
|
2504
2504
|
});
|
|
2505
2505
|
}
|
|
2506
2506
|
return _reconciler;
|
package/dist/runtime.js
CHANGED
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@getforma/core",
|
|
3
3
|
"author": "Forma <victor@getforma.dev>",
|
|
4
|
-
"version": "0.
|
|
5
|
-
"description": "
|
|
4
|
+
"version": "0.2.0",
|
|
5
|
+
"description": "Real DOM reactive library — fine-grained signals, islands architecture, SSR hydration. No virtual DOM, no diffing. ~15KB gzipped.",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/index.cjs",
|
|
8
8
|
"module": "./dist/index.js",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"./dist/formajs-runtime-hardened.global.js"
|
|
73
73
|
],
|
|
74
74
|
"scripts": {
|
|
75
|
-
"build": "tsup",
|
|
75
|
+
"build": "tsup && node scripts/post-build.mjs",
|
|
76
76
|
"pack:release": "npm run build && npm pack --pack-destination releases",
|
|
77
77
|
"typecheck": "tsc --noEmit",
|
|
78
78
|
"test": "vitest run",
|