@petit-kit/scoped 0.0.6 → 0.0.8-beta.1

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.
@@ -0,0 +1,693 @@
1
+ export * from './plugins';
2
+ /**
3
+ * Scope - A lightweight, framework-agnostic library for building web components
4
+ *
5
+ * @module scope
6
+ * @description Provides a minimal abstraction over Custom Elements API, making it easy
7
+ * to create reusable, encapsulated components with reactive state, lifecycle hooks,
8
+ * and a simple template-based rendering system.
9
+ *
10
+ * @example Basic component
11
+ * ```javascript
12
+ * import { define } from './scope.js';
13
+ *
14
+ * define("c-slider", {
15
+ * props: { value: { type: Number, default: 0 } }
16
+ * }, ({ link, emit, actions, host }) => {
17
+ * link("value", "value")
18
+ *
19
+ * actions.handleChange = event => {
20
+ * host.updateState({ value: event.target.valueAsNumber })
21
+ * emit("on-change", { value: event.target.valueAsNumber })
22
+ * }
23
+ *
24
+ * return () => `
25
+ * <div>
26
+ * <input
27
+ * type="range"
28
+ * min="0" max="100" step="1"
29
+ * bind:value="value"
30
+ * on:input="handleChange"
31
+ * />
32
+ * <c-number ref="number" bind:value="value"></c-number>
33
+ * </div>
34
+ * `
35
+ * })
36
+ *
37
+
38
+ * ```
39
+ *
40
+ * @example Component with shadow DOM
41
+ * ```javascript
42
+ * define('styled-button', {
43
+ * shadow: true,
44
+ * styles: 'button { background: blue; color: white; }'
45
+ * }, () => {
46
+ * return () => '<button>Click me</button>';
47
+ * });
48
+ * ```
49
+ *
50
+ * @see {@link ComponentContext} for available context properties
51
+ * @see {@link ComponentOptions} for configuration options
52
+ */
53
+ /**
54
+ * Library version.
55
+ *
56
+ * @constant {string}
57
+ */
58
+ declare const SCOPE_VERSION: string;
59
+ /**
60
+ * Logs version and repository info for @petit-kit/scoped.
61
+ * Useful for debugging or confirming library presence.
62
+ */
63
+ export declare const happy: () => void;
64
+ /**
65
+ * Supported prop types for type checking and parsing
66
+ *
67
+ * @typedef {StringConstructor|NumberConstructor|BooleanConstructor|ObjectConstructor|ArrayConstructor} PropType
68
+ */
69
+ export type PropType = StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor | ArrayConstructor;
70
+ /**
71
+ * Definition for a single prop, including type, default value, and reflection behavior
72
+ *
73
+ * @template T - The type of the prop value
74
+ * @interface PropDefinition
75
+ *
76
+ * @example
77
+ * ```typescript
78
+ * const propDef: PropDefinition<number> = {
79
+ * type: Number,
80
+ * default: 0,
81
+ * reflect: true
82
+ * };
83
+ * ```
84
+ */
85
+ export interface PropDefinition<T = any> {
86
+ /**
87
+ * Type constructor for parsing the prop value from attributes
88
+ * @type {PropType}
89
+ */
90
+ type?: PropType;
91
+ /**
92
+ * Default value if prop is not provided
93
+ * @type {T}
94
+ */
95
+ default?: T;
96
+ /**
97
+ * Whether to reflect prop changes back to HTML attributes
98
+ * @type {boolean}
99
+ * @default false
100
+ */
101
+ reflect?: boolean;
102
+ }
103
+ /**
104
+ * Props definition object mapping prop names to their definitions or default values
105
+ *
106
+ * @typedef {Record<string, PropDefinition | any>} PropsDefinition
107
+ *
108
+ * @example
109
+ * ```typescript
110
+ * const props: PropsDefinition = {
111
+ * count: { type: Number, default: 0 },
112
+ * name: { type: String, default: 'World' },
113
+ * active: { type: Boolean, default: false }
114
+ * };
115
+ * ```
116
+ */
117
+ export type PropsDefinition = Record<string, PropDefinition | any>;
118
+ /**
119
+ * Plugin for extending the component context.
120
+ */
121
+ export type ComponentPlugin<Ext extends Record<string, any> = {}> = {
122
+ /** Optional plugin name for debugging */
123
+ name?: string;
124
+ /**
125
+ * Extend the component context with new capabilities.
126
+ */
127
+ extend: (context: ComponentContextBase<any, any, any, any>, host: ComponentHost) => Ext;
128
+ };
129
+ /**
130
+ * Options for component definition
131
+ *
132
+ * @interface ComponentOptions
133
+ *
134
+ * @example
135
+ * ```typescript
136
+ * const options: ComponentOptions = {
137
+ * props: { count: { type: Number, default: 0 } },
138
+ * shadow: true,
139
+ * styles: 'div { color: red; }'
140
+ * };
141
+ * ```
142
+ */
143
+ export interface ComponentOptions<Plugins extends readonly ComponentPlugin<any>[] = ComponentPlugin<any>[]> {
144
+ /**
145
+ * Prop definitions for the component
146
+ * @type {PropsDefinition}
147
+ */
148
+ props?: PropsDefinition;
149
+ /**
150
+ * Whether to use Shadow DOM (default: false, uses light DOM)
151
+ * @type {boolean}
152
+ * @default false
153
+ */
154
+ shadow?: boolean;
155
+ /**
156
+ * CSS styles to inject into document head (for shadow DOM components)
157
+ * @type {string}
158
+ */
159
+ styles?: string;
160
+ /**
161
+ * Plugins that extend the component context.
162
+ * @type {Plugins}
163
+ */
164
+ plugins?: Plugins;
165
+ }
166
+ /**
167
+ * Methods available on the component host element
168
+ *
169
+ * @interface ComponentHost
170
+ *
171
+ * @example
172
+ * ```typescript
173
+ * define('my-component', {}, ({ host }) => {
174
+ * host.setState({ count: 5 });
175
+ * host.updateState({ scrollY: 100 });
176
+ * host.setProps({ title: 'New Title' });
177
+ * });
178
+ * ```
179
+ */
180
+ export interface ComponentHost {
181
+ /**
182
+ * Update state and trigger full re-render
183
+ * @method setState
184
+ * @param {Partial<State>} partial - Partial state object to merge
185
+ * @template State
186
+ *
187
+ * @example
188
+ * ```typescript
189
+ * host.setState({ count: 5, name: 'Updated' });
190
+ * ```
191
+ */
192
+ setState: <State>(partial: Partial<State>) => void;
193
+ /**
194
+ * Update state without re-render (triggers effects only)
195
+ * @method updateState
196
+ * @param {Partial<State>} partial - Partial state object to merge
197
+ * @template State
198
+ *
199
+ * @example
200
+ * ```typescript
201
+ * // Update scroll position without re-rendering
202
+ * host.updateState({ scrollY: window.scrollY });
203
+ * ```
204
+ */
205
+ updateState: <State>(partial: Partial<State>) => void;
206
+ /**
207
+ * Update props programmatically
208
+ * @method setProps
209
+ * @param {Partial<Props>} partial - Partial props object to merge
210
+ * @template Props
211
+ *
212
+ * @example
213
+ * ```typescript
214
+ * // Pass large data (recommended for objects/arrays)
215
+ * element.setProps({ data: largeArray, config: complexObject });
216
+ * ```
217
+ */
218
+ setProps: <Props>(partial: Partial<Props>) => void;
219
+ /**
220
+ * Schedule a partial update (effects only)
221
+ * @method scheduleUpdate
222
+ *
223
+ * @example
224
+ * ```typescript
225
+ * host.scheduleUpdate(); // Runs effects on next animation frame
226
+ * ```
227
+ */
228
+ scheduleUpdate: () => void;
229
+ /**
230
+ * Force an update (full or partial render)
231
+ * @method update
232
+ * @param {boolean} fullRender - Whether to perform full render or effects only
233
+ *
234
+ * @example
235
+ * ```typescript
236
+ * host.update(true); // Full render
237
+ * host.update(false); // Effects only
238
+ * ```
239
+ */
240
+ update: (fullRender: boolean) => void;
241
+ /**
242
+ * Force a full re-render even if template is unchanged
243
+ * @method forceRender
244
+ *
245
+ * @example
246
+ * ```typescript
247
+ * host.forceRender(); // Forces DOM update even if template string matches
248
+ * ```
249
+ */
250
+ forceRender: () => void;
251
+ /**
252
+ * Clean up component and run destroy callbacks
253
+ * @method destroy
254
+ *
255
+ * @example
256
+ * ```typescript
257
+ * host.destroy(); // Cleans up effects, events, and runs onDestroy hooks
258
+ * ```
259
+ */
260
+ destroy: () => void;
261
+ /**
262
+ * Remove the component from the DOM
263
+ * @method remove
264
+ *
265
+ * @example
266
+ * ```typescript
267
+ * host.remove(); // Removes element and triggers cleanup via disconnectedCallback
268
+ * ```
269
+ */
270
+ remove: () => void;
271
+ /**
272
+ * Select DOM elements within the component.
273
+ * Returns a single element, or an array of elements if multiple match.
274
+ * @method $
275
+ * @param {string} selector - CSS selector to match elements
276
+ * @returns {Element | Element[] | null} Single element, array of elements, or null if none match
277
+ *
278
+ * @example
279
+ * ```typescript
280
+ * const btn = host.$('button.primary'); // single element or null
281
+ * const items = host.$('.list-item'); // array when multiple match
282
+ * const first = Array.isArray(items) ? items[0] : items;
283
+ * ```
284
+ */
285
+ $: (selector: string) => Element | Element[] | null;
286
+ }
287
+ /**
288
+ * Context object passed to the setup function, providing access to component APIs
289
+ *
290
+ * @template Props - Type of component props
291
+ * @template State - Type of component state
292
+ * @template Actions - Type of action methods
293
+ * @template Refs - Type of DOM refs
294
+ * @interface ComponentContext
295
+ *
296
+ * @example Basic usage
297
+ * ```typescript
298
+ * define('counter', {}, ({ props, state, actions, host }) => {
299
+ * state.count = 0;
300
+ * actions.increment = () => host.setState({ count: state.count + 1 });
301
+ * return () => `<div>${state.count}</div>`;
302
+ * });
303
+ * ```
304
+ *
305
+ * @example With lifecycle hooks
306
+ * ```typescript
307
+ * define('component', {}, ({ onMount, onDestroy, effect }) => {
308
+ * onMount(() => console.log('Mounted'));
309
+ * onDestroy(() => console.log('Destroyed'));
310
+ * effect((deps) => {
311
+ * const timer = setInterval(() => {}, 1000);
312
+ * return () => clearInterval(timer);
313
+ * }, []);
314
+ * return () => '<div>Hello</div>';
315
+ * });
316
+ * ```
317
+ *
318
+ * @see {@link ComponentHost} for host methods
319
+ * @see {@link ComponentOptions} for component configuration
320
+ */
321
+ export interface ComponentContextBase<Props = Record<string, any>, State = Record<string, any>, Actions = Record<string, Function>, Refs = Record<string, HTMLElement | HTMLElement[]>> {
322
+ /**
323
+ * Component props (read-only, updated via attributes or setProps)
324
+ * @type {Props}
325
+ * @readonly
326
+ */
327
+ props: Props;
328
+ /**
329
+ * Component state (mutable, updated via setState/updateState)
330
+ * @type {State}
331
+ */
332
+ state: State;
333
+ /**
334
+ * Action methods that can be called from event handlers
335
+ * @type {Actions}
336
+ *
337
+ * @example
338
+ * ```typescript
339
+ * actions.handleClick = () => { /* ... *\/ };
340
+ * // Use in template: <button on:click="handleClick">
341
+ * ```
342
+ */
343
+ actions: Actions;
344
+ /**
345
+ * DOM element references (populated after render)
346
+ * @type {Refs}
347
+ *
348
+ * @example
349
+ * ```typescript
350
+ * // In template: <div ref="myDiv"></div>
351
+ * // Access: refs.myDiv
352
+ * ```
353
+ */
354
+ refs: Refs;
355
+ /**
356
+ * Emit custom events that bubble up the DOM tree
357
+ * @method emit
358
+ * @param {string} name - Event name
359
+ * @param {any} [detail] - Optional event detail data
360
+ *
361
+ * @example
362
+ * ```typescript
363
+ * emit('item-clicked', { id: 123, name: 'Item' });
364
+ * ```
365
+ */
366
+ emit: (name: string, detail?: any) => void;
367
+ /**
368
+ * Listen to a custom event from a given target
369
+ * @method listen
370
+ * @param {EventTarget} target - Target to attach the listener to
371
+ * @param {string} name - Custom event name to listen for
372
+ * @param {function(CustomEvent): void} handler - Event handler
373
+ * @param {AddEventListenerOptions} [options] - Listener options
374
+ * @returns {() => void} Cleanup function to remove the listener
375
+ *
376
+ * @example
377
+ * ```typescript
378
+ * const cleanup = listen(window, 'theme-change', (e) => {
379
+ * console.log(e.detail);
380
+ * });
381
+ * ```
382
+ */
383
+ listen: (target: EventTarget, name: string, handler: (event: CustomEvent<any>) => void, options?: AddEventListenerOptions) => () => void;
384
+ /**
385
+ * Update state without triggering a re-render (triggers effects only)
386
+ * @method updateState
387
+ * @param {Partial<State>} partial - Partial state object to merge
388
+ *
389
+ * @example
390
+ * ```typescript
391
+ * updateState({ count: 5 }); // Updates state, runs effects, but doesn't re-render
392
+ * ```
393
+ */
394
+ updateState: (partial: Partial<State>) => void;
395
+ /**
396
+ * Select DOM elements within the component.
397
+ * Returns a single element, or an iterable array if multiple match.
398
+ * @method $
399
+ * @param {string} selector - CSS selector to match elements
400
+ * @returns {Element | Element[] | null} Single element, array of elements, or null if none match
401
+ *
402
+ * @example
403
+ * ```typescript
404
+ * const btn = $('button.primary'); // single element or null
405
+ * const items = $('.list-item'); // array when multiple match
406
+ * for (const el of Array.isArray(items) ? items : (items ? [items] : [])) { ... }
407
+ * ```
408
+ */
409
+ $: (selector: string) => Element | Element[] | null;
410
+ /**
411
+ * The component host element with all host methods
412
+ * @type {HTMLElement & ComponentHost}
413
+ *
414
+ * @see {@link ComponentHost}
415
+ */
416
+ host: HTMLElement & ComponentHost;
417
+ /**
418
+ * Register callback to run after component is mounted
419
+ * @method onMount
420
+ * @param {function(): void} callback - Callback function
421
+ */
422
+ onMount: (callback: () => void) => void;
423
+ /**
424
+ * Register callback to run when component is destroyed
425
+ * @method onDestroy
426
+ * @param {function(): void} callback - Callback function
427
+ */
428
+ onDestroy: (callback: () => void) => void;
429
+ /**
430
+ * Register callback to run after each update/re-render
431
+ * @method onUpdate
432
+ * @param {function(): void} callback - Callback function
433
+ */
434
+ onUpdate: (callback: () => void) => void;
435
+ /**
436
+ * Register callback to run before each update/re-render
437
+ * @method onBeforeUpdate
438
+ * @param {function(): void} callback - Callback function
439
+ */
440
+ onBeforeUpdate: (callback: () => void) => void;
441
+ /**
442
+ * Register callback to run only on the first update (after mount)
443
+ * @method onFirstUpdate
444
+ * @param {function(): void} callback - Callback function
445
+ */
446
+ onFirstUpdate: (callback: () => void) => void;
447
+ /**
448
+ * Register callback to run when props change
449
+ * @method onPropsChanged
450
+ * @param {function(string, any, any): void} callback - Callback function
451
+ *
452
+ * @example
453
+ * ```typescript
454
+ * onPropsChanged((propName, oldValue, newValue) => {
455
+ * console.log(`${propName} changed from ${oldValue} to ${newValue}`);
456
+ * });
457
+ * ```
458
+ */
459
+ onPropsChanged: (callback: (propName: string, oldValue: any, newValue: any) => void) => void;
460
+ /**
461
+ * Register a predicate to conditionally skip full renders.
462
+ *
463
+ * When the callback returns false, the template is not executed and the DOM
464
+ * is not updated. Effects and onUpdate hooks still run.
465
+ *
466
+ * @method shouldRender
467
+ * @param {function(ShouldRenderContext): boolean} callback - Predicate returning false to skip render
468
+ *
469
+ * @example
470
+ * ```typescript
471
+ * shouldRender((ctx) => {
472
+ * if (ctx.reason === 'props') return true;
473
+ * if (ctx.reason === 'state' && ctx.changedKeys?.includes('scrollY')) return false;
474
+ * return true;
475
+ * });
476
+ * ```
477
+ */
478
+ shouldRender: (callback: (ctx: ShouldRenderContext) => boolean) => void;
479
+ /**
480
+ * Link a prop and a state key (two-way, no extra render)
481
+ *
482
+ * Updates state when the prop changes, and updates the prop/attribute
483
+ * when the state changes without triggering a render. Attribute
484
+ * reflection is forced even if the prop is not marked reflect: true.
485
+ *
486
+ * @method link
487
+ * @param {string} propName - Prop name to link
488
+ * @param {string} [stateKey] - State key to link (defaults to propName)
489
+ *
490
+ * @example
491
+ * ```typescript
492
+ * link('value'); // state.value <-> props.value
493
+ * link('title', 'text'); // state.text <-> props.title
494
+ * ```
495
+ */
496
+ link: (propName: string, stateKey?: string) => void;
497
+ /**
498
+ * Register effect function that runs after renders (with optional cleanup)
499
+ * @method effect
500
+ * @param {function(any[]): (void|function())} fn - Effect function that can return cleanup
501
+ * @param {any[] | (() => any[])} [deps] - Optional dependency array or deps getter
502
+ * @returns {() => void} Cleanup function to remove the effect
503
+ *
504
+ * @example
505
+ * ```typescript
506
+ * const cleanup = effect((deps) => {
507
+ * const timer = setInterval(() => {}, 1000);
508
+ * return () => clearInterval(timer); // Cleanup function
509
+ * }, []);
510
+ * ```
511
+ */
512
+ effect: (fn: EffectFn, deps?: any[] | (() => any[])) => () => void;
513
+ /**
514
+ * Register a computed value that updates before renders.
515
+ *
516
+ * @method computed
517
+ * @param {function(any[]): *} getter - Function that returns the computed value
518
+ * @param {any[] | (() => any[])} [deps] - Optional dependency array or deps getter
519
+ * @returns {() => T} Getter for the current computed value
520
+ *
521
+ * @example
522
+ * ```typescript
523
+ * const fullName = computed((deps) => `${props.first} ${state.last}`, () => [props.first, state.last]);
524
+ * return () => `<div>${fullName()}</div>`;
525
+ * ```
526
+ */
527
+ computed: <T>(getter: ComputedGetter<T>, deps?: ComputedDeps) => () => T;
528
+ /**
529
+ * Set up event delegation for dynamic content
530
+ * @method delegate
531
+ * @param {string} eventType - The event type (e.g., 'click', 'input')
532
+ * @param {string} selector - CSS selector to match target elements
533
+ * @param {function(Event, Element): void} handler - Handler function
534
+ * @returns {() => void} Cleanup function to remove the delegation
535
+ *
536
+ * @example
537
+ * ```typescript
538
+ * const cleanup = delegate('click', '.item', (e, target) => {
539
+ * console.log('Item clicked:', target);
540
+ * });
541
+ * ```
542
+ */
543
+ delegate: (eventType: string, selector: string, handler: (event: Event, target: Element) => void) => () => void;
544
+ /**
545
+ * Escapes HTML special characters to prevent XSS when rendering user content.
546
+ * Use with `bind:text` or when building safe HTML strings.
547
+ *
548
+ * @param str - String to escape (falsy values return empty string)
549
+ * @returns Escaped string safe for HTML context
550
+ *
551
+ * @example
552
+ * ```typescript
553
+ * return () => `<span>${escapeHtml(userInput)}</span>`;
554
+ * ```
555
+ */
556
+ escapeHtml: (str: unknown) => string;
557
+ }
558
+ /**
559
+ * Component context including plugin-provided extensions.
560
+ */
561
+ export type ComponentContext<Props = Record<string, any>, State = Record<string, any>, Actions = Record<string, Function>, Refs = Record<string, HTMLElement | HTMLElement[]>, Ext = {}> = ComponentContextBase<Props, State, Actions, Refs> & Ext;
562
+ type UnionToIntersection<U> = (U extends any ? (arg: U) => void : never) extends (arg: infer I) => void ? I : never;
563
+ type PluginExtensions<Plugins extends readonly ComponentPlugin<any>[]> = UnionToIntersection<Plugins[number] extends ComponentPlugin<infer Ext> ? Ext : {}>;
564
+ /**
565
+ * Setup function that receives component context and returns a render function
566
+ *
567
+ * @template Props - Type of component props
568
+ * @template State - Type of component state
569
+ * @template Actions - Type of action methods
570
+ * @template Refs - Type of DOM refs
571
+ * @typedef {function} SetupFunction
572
+ * @param {ComponentContext<Props, State, Actions, Refs, Ext>} context - Component context
573
+ * @returns {() => string} Render function that returns HTML template string
574
+ *
575
+ * @example
576
+ * ```typescript
577
+ * const setup: SetupFunction = ({ props, state, actions }) => {
578
+ * state.count = 0;
579
+ * actions.increment = () => state.count++;
580
+ * return () => `<div>Count: ${state.count}</div>`;
581
+ * };
582
+ * ```
583
+ *
584
+ * @see {@link ComponentContext}
585
+ */
586
+ export type SetupFunction<Props = Record<string, any>, State = Record<string, any>, Actions = Record<string, Function>, Refs = Record<string, HTMLElement | HTMLElement[]>, Ext = {}> = (context: ComponentContext<Props, State, Actions, Refs, Ext>) => () => string;
587
+ /**
588
+ * Information about a delegated event handler
589
+ */
590
+ export type DelegatedEventInfo = {
591
+ /** The event type (e.g., 'click', 'input') */
592
+ eventType: string;
593
+ /** CSS selector to match elements */
594
+ selector: string;
595
+ /** The actual event listener attached to the root */
596
+ listener: (e: Event) => void;
597
+ /** Set of handler functions registered for this delegation */
598
+ handlers: Set<(e: Event, target: Element) => void>;
599
+ };
600
+ /**
601
+ * Context passed to shouldRender callback.
602
+ *
603
+ * @example
604
+ * ```typescript
605
+ * shouldRender((ctx) => {
606
+ * if (ctx.reason === 'props') return true;
607
+ * if (ctx.reason === 'state' && ctx.changedKeys?.includes('scrollY')) return false;
608
+ * return true;
609
+ * });
610
+ * ```
611
+ */
612
+ export type ShouldRenderContext = {
613
+ /** The event that triggered the render */
614
+ reason: 'mount' | 'props' | 'state' | 'force';
615
+ /** For props/state: which keys changed (if known) */
616
+ changedKeys?: string[];
617
+ };
618
+ export type EffectDeps = any[] | (() => any[]);
619
+ export type ComputedDeps = any[] | (() => any[]);
620
+ export type EffectFn = (deps?: any[]) => void | (() => void);
621
+ export type ComputedGetter<T = any> = (deps?: any[]) => T;
622
+ export type EffectRecord = {
623
+ fn: EffectFn;
624
+ deps?: EffectDeps;
625
+ prevDeps?: any[];
626
+ cleanup?: () => void;
627
+ };
628
+ export type ComputedRecord<T = any> = {
629
+ getter: ComputedGetter<T>;
630
+ deps?: ComputedDeps;
631
+ prevDeps?: any[];
632
+ value: T;
633
+ };
634
+ /**
635
+ * Defines a new custom element component
636
+ *
637
+ * @function define
638
+ * @template Props - Type of component props
639
+ * @template State - Type of component state
640
+ * @template Actions - Type of action methods
641
+ * @template Refs - Type of DOM refs
642
+ *
643
+ * @param {string} tagName - The custom element tag name (must contain a hyphen, e.g., 'my-component')
644
+ * @param {ComponentOptions} [options={}] - Component configuration options
645
+ * @param {SetupFunction<Props, State, Actions, Refs, PluginExtensions<Plugins>>} [setup] - Optional setup function that receives context and returns render function
646
+ * @returns {Function} The custom element class constructor
647
+ *
648
+ * @throws {Error} If tagName doesn't contain a hyphen (required by Custom Elements spec)
649
+ * @throws {Error} If component is already defined (logs warning instead of throwing)
650
+ *
651
+ * @example Basic component
652
+ * ```javascript
653
+ * define('my-counter', {
654
+ * props: { initialValue: { type: Number, default: 0 } }
655
+ * }, ({ props, state, actions, host }) => {
656
+ * state.count = props.initialValue;
657
+ * actions.increment = () => host.setState({ count: state.count + 1 });
658
+ * return () => `<div>Count: ${state.count}</div>`;
659
+ * });
660
+ * ```
661
+ *
662
+ * @example Component with shadow DOM
663
+ * ```javascript
664
+ * define('styled-button', {
665
+ * shadow: true,
666
+ * styles: 'button { background: blue; color: white; }'
667
+ * }, () => {
668
+ * return () => '<button>Click me</button>';
669
+ * });
670
+ * ```
671
+ *
672
+ * @example Component with TypeScript types
673
+ * ```typescript
674
+ * interface MyProps { count: number }
675
+ * interface MyState { value: string }
676
+ * interface MyActions { handleClick: () => void }
677
+ *
678
+ * define<MyProps, MyState, MyActions>('typed-component', {
679
+ * props: { count: { type: Number, default: 0 } }
680
+ * }, ({ props, state, actions }) => {
681
+ * state.value = `Count: ${props.count}`;
682
+ * actions.handleClick = () => console.log('clicked');
683
+ * return () => `<div>${state.value}</div>`;
684
+ * });
685
+ * ```
686
+ *
687
+ * @see {@link ComponentContext} for available context properties
688
+ * @see {@link ComponentOptions} for configuration options
689
+ * @see {@link SetupFunction} for setup function signature
690
+ */
691
+ declare function define<Props = Record<string, any>, State = Record<string, any>, Actions = Record<string, Function>, Refs = Record<string, HTMLElement | HTMLElement[]>, Plugins extends readonly ComponentPlugin<any>[] = []>(tagName: string, options?: ComponentOptions<Plugins>, setup?: SetupFunction<Props, State, Actions, Refs, PluginExtensions<Plugins>>): typeof HTMLElement;
692
+ export { define, SCOPE_VERSION };
693
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}