sibujs 1.5.0 → 2.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.
Files changed (207) hide show
  1. package/dist/browser.cjs +238 -69
  2. package/dist/browser.d.cts +5 -0
  3. package/dist/browser.d.ts +5 -0
  4. package/dist/browser.js +6 -6
  5. package/dist/build.cjs +916 -292
  6. package/dist/build.js +15 -13
  7. package/dist/cdn.global.js +17 -16
  8. package/dist/chunk-2RA7SHDA.js +65 -0
  9. package/dist/chunk-2UPRY23K.js +80 -0
  10. package/dist/chunk-3JHCYHWN.js +125 -0
  11. package/dist/{chunk-VAPYJN4X.js → chunk-3LR7GLWQ.js} +93 -23
  12. package/dist/{chunk-RJ46C3CS.js → chunk-3NSGB5JN.js} +71 -20
  13. package/dist/{chunk-XUEEGU5O.js → chunk-52YJLLRO.js} +16 -4
  14. package/dist/{chunk-XHK6BDAJ.js → chunk-54EDRCEF.js} +25 -8
  15. package/dist/chunk-7JDB7I65.js +1327 -0
  16. package/dist/{chunk-WZSPOOER.js → chunk-CC65Y57T.js} +8 -5
  17. package/dist/{chunk-23VV7YD3.js → chunk-DFPFITST.js} +25 -30
  18. package/dist/{chunk-BGN5ZMP4.js → chunk-GTBNNBJ6.js} +14 -2
  19. package/dist/chunk-HB24TBAF.js +121 -0
  20. package/dist/{chunk-CZUGLNJS.js → chunk-ITX6OO3F.js} +3 -3
  21. package/dist/{chunk-BGTHZHJ5.js → chunk-JA6667UN.js} +188 -44
  22. package/dist/{chunk-7GRNSCFT.js → chunk-JXMMDLBY.js} +306 -183
  23. package/dist/{chunk-3X2YG6YM.js → chunk-JYD2PWXH.js} +59 -28
  24. package/dist/{chunk-SFKNRVCU.js → chunk-KLRMB5ZS.js} +135 -79
  25. package/dist/{chunk-5X6PP2UK.js → chunk-LMLD24FC.js} +2 -2
  26. package/dist/{chunk-M4NLBH4I.js → chunk-LYTCUZ7H.js} +3 -2
  27. package/dist/{chunk-BMPL52BF.js → chunk-MIUAXB7K.js} +118 -66
  28. package/dist/{chunk-JCDUJN2F.js → chunk-ND2664SF.js} +486 -153
  29. package/dist/{chunk-VQDZK23A.js → chunk-O2MNQFLP.js} +181 -66
  30. package/dist/{chunk-NHUC2QWH.js → chunk-R73P76YZ.js} +1 -1
  31. package/dist/{chunk-2BYQDGN3.js → chunk-SAHNHTFC.js} +234 -63
  32. package/dist/chunk-UCS6AMJ7.js +79 -0
  33. package/dist/{chunk-K4G4ZQNR.js → chunk-VLPPXTYG.js} +84 -38
  34. package/dist/{chunk-OUZZEE4S.js → chunk-WOMYAHHI.js} +17 -11
  35. package/dist/{customElement-BL3Uo8dL.d.cts → customElement-CPfIrbvg.d.cts} +14 -10
  36. package/dist/{customElement-BL3Uo8dL.d.ts → customElement-CPfIrbvg.d.ts} +14 -10
  37. package/dist/data.cjs +410 -99
  38. package/dist/data.d.cts +20 -2
  39. package/dist/data.d.ts +20 -2
  40. package/dist/data.js +11 -9
  41. package/dist/devtools.cjs +513 -223
  42. package/dist/devtools.d.cts +1 -1
  43. package/dist/devtools.d.ts +1 -1
  44. package/dist/devtools.js +12 -6
  45. package/dist/ecosystem.cjs +475 -144
  46. package/dist/ecosystem.d.cts +9 -7
  47. package/dist/ecosystem.d.ts +9 -7
  48. package/dist/ecosystem.js +12 -11
  49. package/dist/extras.cjs +3355 -1541
  50. package/dist/extras.d.cts +9 -9
  51. package/dist/extras.d.ts +9 -9
  52. package/dist/extras.js +58 -45
  53. package/dist/index.cjs +920 -292
  54. package/dist/index.d.cts +71 -8
  55. package/dist/index.d.ts +71 -8
  56. package/dist/index.js +28 -16
  57. package/dist/{introspect-BumjnBKr.d.cts → introspect-BWNjNw64.d.cts} +22 -2
  58. package/dist/{introspect-CZrlcaYy.d.ts → introspect-cY2pg9pW.d.ts} +22 -2
  59. package/dist/motion.cjs +77 -34
  60. package/dist/motion.js +4 -4
  61. package/dist/patterns.cjs +335 -69
  62. package/dist/patterns.d.cts +11 -12
  63. package/dist/patterns.d.ts +11 -12
  64. package/dist/patterns.js +7 -7
  65. package/dist/performance.cjs +279 -108
  66. package/dist/performance.d.cts +23 -16
  67. package/dist/performance.d.ts +23 -16
  68. package/dist/performance.js +13 -8
  69. package/dist/plugin-D30wlGW5.d.cts +71 -0
  70. package/dist/plugin-D30wlGW5.d.ts +71 -0
  71. package/dist/plugins.cjs +635 -260
  72. package/dist/plugins.d.cts +10 -3
  73. package/dist/plugins.d.ts +10 -3
  74. package/dist/plugins.js +106 -38
  75. package/dist/{ssr-Do_SiVoL.d.cts → ssr-CrVNy6Pa.d.cts} +9 -15
  76. package/dist/{ssr-Do_SiVoL.d.ts → ssr-CrVNy6Pa.d.ts} +9 -15
  77. package/dist/{ssr-4PBXAOO3.js → ssr-FXD2PPMC.js} +4 -3
  78. package/dist/ssr.cjs +642 -222
  79. package/dist/ssr.d.cts +26 -6
  80. package/dist/ssr.d.ts +26 -6
  81. package/dist/ssr.js +12 -11
  82. package/dist/{tagFactory-DaJ0YWX6.d.cts → tagFactory-S17H2qxu.d.cts} +9 -1
  83. package/dist/{tagFactory-DaJ0YWX6.d.ts → tagFactory-S17H2qxu.d.ts} +9 -1
  84. package/dist/testing.cjs +252 -63
  85. package/dist/testing.d.cts +17 -4
  86. package/dist/testing.d.ts +17 -4
  87. package/dist/testing.js +100 -44
  88. package/dist/ui.cjs +463 -137
  89. package/dist/ui.d.cts +1 -1
  90. package/dist/ui.d.ts +1 -1
  91. package/dist/ui.js +20 -17
  92. package/dist/widgets.cjs +977 -94
  93. package/dist/widgets.d.cts +104 -2
  94. package/dist/widgets.d.ts +104 -2
  95. package/dist/widgets.js +9 -7
  96. package/package.json +8 -2
  97. package/dist/chunk-32DY64NT.js +0 -282
  98. package/dist/chunk-3AIRKM3B.js +0 -1263
  99. package/dist/chunk-3ARAQO7B.js +0 -398
  100. package/dist/chunk-3CRQALYP.js +0 -877
  101. package/dist/chunk-4EI4AG32.js +0 -482
  102. package/dist/chunk-4MYMUBRS.js +0 -21
  103. package/dist/chunk-5ZYQ6KDD.js +0 -154
  104. package/dist/chunk-6BMPXPUW.js +0 -26
  105. package/dist/chunk-6HLLIF3K.js +0 -398
  106. package/dist/chunk-6LSNVCS2.js +0 -937
  107. package/dist/chunk-6SA3QQES.js +0 -61
  108. package/dist/chunk-77L6NL3X.js +0 -1097
  109. package/dist/chunk-7BF6TK55.js +0 -1097
  110. package/dist/chunk-7TQKR4PP.js +0 -294
  111. package/dist/chunk-7V26P53V.js +0 -712
  112. package/dist/chunk-AZ3ISID5.js +0 -298
  113. package/dist/chunk-B7SWRFUT.js +0 -332
  114. package/dist/chunk-BTU3TJDS.js +0 -365
  115. package/dist/chunk-BW3WT46K.js +0 -937
  116. package/dist/chunk-C6KFWOFV.js +0 -616
  117. package/dist/chunk-CHF5OHIA.js +0 -61
  118. package/dist/chunk-CHJ27IGK.js +0 -26
  119. package/dist/chunk-CMBFNA7L.js +0 -27
  120. package/dist/chunk-DAHRH4ON.js +0 -331
  121. package/dist/chunk-DKOHBI74.js +0 -924
  122. package/dist/chunk-DTCOOBMX.js +0 -725
  123. package/dist/chunk-EBGIRKQY.js +0 -616
  124. package/dist/chunk-EUZND3CB.js +0 -27
  125. package/dist/chunk-EVCZO745.js +0 -365
  126. package/dist/chunk-EWFVA3TJ.js +0 -282
  127. package/dist/chunk-F3FA4F32.js +0 -292
  128. package/dist/chunk-FGOEVHY3.js +0 -60
  129. package/dist/chunk-G3BOQPVO.js +0 -365
  130. package/dist/chunk-GCOK2LC3.js +0 -282
  131. package/dist/chunk-GJPXRJ45.js +0 -37
  132. package/dist/chunk-HGMJFBC7.js +0 -654
  133. package/dist/chunk-JAKHTMQU.js +0 -1000
  134. package/dist/chunk-JCI5M6U6.js +0 -956
  135. package/dist/chunk-K5ZUMYVS.js +0 -89
  136. package/dist/chunk-KQPDEVVS.js +0 -398
  137. package/dist/chunk-L6JRBDNS.js +0 -60
  138. package/dist/chunk-LA6KQEDU.js +0 -712
  139. package/dist/chunk-MB6QFH3I.js +0 -2776
  140. package/dist/chunk-MDVXJWFN.js +0 -304
  141. package/dist/chunk-MEZVEBPN.js +0 -2008
  142. package/dist/chunk-MK4ERFYL.js +0 -2249
  143. package/dist/chunk-MLKGABMK.js +0 -9
  144. package/dist/chunk-MQ5GOYPH.js +0 -2249
  145. package/dist/chunk-MYRV7VDM.js +0 -742
  146. package/dist/chunk-N6IZB6KJ.js +0 -567
  147. package/dist/chunk-NEKUBFPT.js +0 -60
  148. package/dist/chunk-NMRUZALC.js +0 -1097
  149. package/dist/chunk-NYVAC6P5.js +0 -37
  150. package/dist/chunk-NZIIMDWI.js +0 -84
  151. package/dist/chunk-OF7UZIVB.js +0 -725
  152. package/dist/chunk-P3XWXJZU.js +0 -282
  153. package/dist/chunk-P6W3STU4.js +0 -2249
  154. package/dist/chunk-PBHF5WKN.js +0 -616
  155. package/dist/chunk-PDZQY43A.js +0 -616
  156. package/dist/chunk-PTQJDMRT.js +0 -146
  157. package/dist/chunk-PZEGYCF5.js +0 -61
  158. package/dist/chunk-QBMDLBU2.js +0 -975
  159. package/dist/chunk-QWZG56ET.js +0 -2744
  160. package/dist/chunk-RQGQSLQK.js +0 -725
  161. package/dist/chunk-SDLZDHKP.js +0 -107
  162. package/dist/chunk-TDGZL5CU.js +0 -365
  163. package/dist/chunk-TNQWPPE6.js +0 -37
  164. package/dist/chunk-TSOKIX5Z.js +0 -654
  165. package/dist/chunk-UHNL42EF.js +0 -2730
  166. package/dist/chunk-UNXCEF6S.js +0 -21
  167. package/dist/chunk-V2XTI523.js +0 -347
  168. package/dist/chunk-VAU366PN.js +0 -2241
  169. package/dist/chunk-VMVDTCXB.js +0 -712
  170. package/dist/chunk-VQNQZCWJ.js +0 -61
  171. package/dist/chunk-VRW3FULF.js +0 -725
  172. package/dist/chunk-WADYRCO2.js +0 -304
  173. package/dist/chunk-WILQZRO4.js +0 -282
  174. package/dist/chunk-WR5D4EGH.js +0 -26
  175. package/dist/chunk-WUHJISPP.js +0 -298
  176. package/dist/chunk-XYU6TZOW.js +0 -182
  177. package/dist/chunk-Y6GP4QGG.js +0 -276
  178. package/dist/chunk-YECR7UIA.js +0 -347
  179. package/dist/chunk-YUTWTI4B.js +0 -654
  180. package/dist/chunk-Z65KYU7I.js +0 -26
  181. package/dist/chunk-Z6POF5YC.js +0 -975
  182. package/dist/chunk-ZBJP6WFL.js +0 -482
  183. package/dist/chunk-ZD6OAMTH.js +0 -277
  184. package/dist/chunk-ZWKZCBO6.js +0 -317
  185. package/dist/contracts-DDrwxvJ-.d.cts +0 -245
  186. package/dist/contracts-DDrwxvJ-.d.ts +0 -245
  187. package/dist/contracts-DOrhwbke.d.cts +0 -245
  188. package/dist/contracts-DOrhwbke.d.ts +0 -245
  189. package/dist/contracts-xo5ckdRP.d.cts +0 -240
  190. package/dist/contracts-xo5ckdRP.d.ts +0 -240
  191. package/dist/customElement-BKQfbSZQ.d.cts +0 -262
  192. package/dist/customElement-BKQfbSZQ.d.ts +0 -262
  193. package/dist/customElement-D2DJp_xn.d.cts +0 -313
  194. package/dist/customElement-D2DJp_xn.d.ts +0 -313
  195. package/dist/customElement-yz8uyk-0.d.cts +0 -308
  196. package/dist/customElement-yz8uyk-0.d.ts +0 -308
  197. package/dist/introspect-Cb0zgpi2.d.cts +0 -477
  198. package/dist/introspect-Y2xNXGSf.d.ts +0 -477
  199. package/dist/plugin-Bek4RhJY.d.cts +0 -43
  200. package/dist/plugin-Bek4RhJY.d.ts +0 -43
  201. package/dist/ssr-3RXHP5ES.js +0 -38
  202. package/dist/ssr-6GIMY5MX.js +0 -38
  203. package/dist/ssr-BA6sxxUd.d.cts +0 -135
  204. package/dist/ssr-BA6sxxUd.d.ts +0 -135
  205. package/dist/ssr-WKUPVSSK.js +0 -36
  206. package/dist/tagFactory-Dl8QCLga.d.cts +0 -23
  207. package/dist/tagFactory-Dl8QCLga.d.ts +0 -23
@@ -1,240 +0,0 @@
1
- /**
2
- * Higher-order component utilities for SibuJS.
3
- * These functions wrap or compose components to add behavior.
4
- */
5
- type Component<P = unknown> = (props: P) => HTMLElement;
6
- /**
7
- * Wraps a component with additional behavior that runs before/after rendering.
8
- *
9
- * @param WrappedComponent The component to wrap
10
- * @param wrapper Function that receives the component and its props, returns enhanced element
11
- * @returns A new component function
12
- *
13
- * @example
14
- * ```ts
15
- * const WithLogging = withWrapper(MyComponent, (Comp, props) => {
16
- * console.log("Rendering with props:", props);
17
- * return Comp(props);
18
- * });
19
- * ```
20
- */
21
- declare function withWrapper<P>(WrappedComponent: Component<P>, wrapper: (component: Component<P>, props: P) => HTMLElement): Component<P>;
22
- /**
23
- * Adds default props to a component. Missing props are filled from defaults.
24
- *
25
- * @param component The component to wrap
26
- * @param defaults Default prop values
27
- * @returns A new component with defaults applied
28
- *
29
- * @example
30
- * ```ts
31
- * const Button = withDefaults(RawButton, { type: "button", disabled: false });
32
- * Button({ nodes: "Click" }); // type="button", disabled=false automatically
33
- * ```
34
- */
35
- declare function withDefaults<P extends Record<string, unknown>>(component: Component<P>, defaults: Partial<P>): Component<Partial<P>>;
36
- /**
37
- * Composes multiple HOC wrappers into a single wrapper.
38
- * Applied from right to left (like function composition).
39
- *
40
- * @param wrappers Array of HOC functions
41
- * @returns A function that applies all wrappers to a component
42
- *
43
- * @example
44
- * ```ts
45
- * const enhance = compose(withAuth, withLogging, withTheme);
46
- * const EnhancedPage = enhance(Page);
47
- * ```
48
- */
49
- declare function compose(...wrappers: Array<(component: Component) => Component>): (component: Component) => Component;
50
-
51
- /**
52
- * RenderProp implements the render-prop pattern.
53
- * The render function receives data and returns DOM nodes.
54
- */
55
- declare function RenderProp<T>(props: {
56
- data: () => T;
57
- render: (data: T) => HTMLElement;
58
- }): HTMLElement;
59
- /**
60
- * withBoundary creates an isolated component boundary for debugging.
61
- * Wraps component output in a named container with error isolation.
62
- */
63
- declare function withBoundary(name: string, component: (props?: unknown) => HTMLElement): (props?: unknown) => HTMLElement;
64
- /**
65
- * Slot pattern — provides named slots for component composition.
66
- */
67
- declare function createSlots(slots: Record<string, () => HTMLElement | HTMLElement[] | null>): {
68
- renderSlot: (name: string, fallback?: () => HTMLElement) => HTMLElement | null;
69
- hasSlot: (name: string) => boolean;
70
- };
71
-
72
- /**
73
- * Functional component props with TypeScript inference for SibuJS.
74
- *
75
- * Provides utilities to define typed components with prop defaults,
76
- * nodes slots, and prop mapping — all with full TypeScript inference.
77
- */
78
- /**
79
- * Extract the props type from a component defined with defineComponent.
80
- *
81
- * @example
82
- * ```ts
83
- * const Button = defineComponent<{ label: string }>({
84
- * setup(props) { ... }
85
- * });
86
- * type ButtonProps = ComponentProps<typeof Button>; // { label: string }
87
- * ```
88
- */
89
- type ComponentProps<T> = T extends (props: infer P) => HTMLElement ? P : never;
90
- /**
91
- * Props that include an optional nodes slot.
92
- */
93
- type WithNodes<Props> = Props & {
94
- nodes?: Node | Node[];
95
- };
96
- /**
97
- * Define a typed component with props inference, defaults, and a setup function.
98
- *
99
- * The `setup` function receives merged props (defaults + provided) and must
100
- * return an HTMLElement. TypeScript infers the full props type from the generic.
101
- *
102
- * @param config Component configuration with optional defaults and a setup function
103
- * @returns A component function that accepts props and returns an HTMLElement
104
- *
105
- * @example
106
- * ```ts
107
- * const Button = defineComponent<{ label: string; variant?: 'primary' | 'secondary'; disabled?: boolean }>({
108
- * defaults: { variant: 'primary', disabled: false },
109
- * setup(props) {
110
- * return button({
111
- * class: `btn btn-${props.variant}`,
112
- * disabled: props.disabled,
113
- * nodes: props.label
114
- * });
115
- * }
116
- * });
117
- *
118
- * // Usage: Button({ label: 'Click me' }) — TypeScript infers props
119
- * ```
120
- */
121
- declare function defineComponent<Props extends Record<string, unknown>>(config: {
122
- defaults?: Partial<Props>;
123
- setup: (props: Props) => HTMLElement;
124
- }): (props: Props) => HTMLElement;
125
- /**
126
- * Create a component with nodes slot support.
127
- *
128
- * Nodes are passed as a special `nodes` prop alongside the component's
129
- * own props. This enables composition patterns where a parent component
130
- * wraps arbitrary child content.
131
- *
132
- * @param config Component configuration with optional defaults and a setup function
133
- * @returns A component function that accepts props (including nodes) and returns an HTMLElement
134
- *
135
- * @example
136
- * ```ts
137
- * const Card = defineSlottedComponent<{ title: string }>({
138
- * setup(props) {
139
- * const el = div({ class: 'card' });
140
- * el.appendChild(h2({ nodes: props.title }));
141
- * if (props.nodes) {
142
- * const nodes = Array.isArray(props.nodes) ? props.nodes : [props.nodes];
143
- * nodes.forEach(child => el.appendChild(child));
144
- * }
145
- * return el;
146
- * }
147
- * });
148
- *
149
- * // Usage: Card({ title: 'Hello', nodes: p({ nodes: 'World' }) })
150
- * ```
151
- */
152
- declare function defineSlottedComponent<Props extends Record<string, unknown>>(config: {
153
- defaults?: Partial<Props>;
154
- setup: (props: WithNodes<Props>) => HTMLElement;
155
- }): (props: WithNodes<Props>) => HTMLElement;
156
- /**
157
- * Higher-order helper to create a component that maps outer props to inner props.
158
- *
159
- * Useful for adapting a generic component to a specific use case by transforming
160
- * the prop interface without modifying the original component.
161
- *
162
- * @param component The inner component to forward mapped props to
163
- * @param mapProps A function that transforms outer props into inner props
164
- * @returns A new component that accepts outer props
165
- *
166
- * @example
167
- * ```ts
168
- * const IconButton = defineComponent<{ icon: string; label: string; size: number }>({
169
- * setup(props) { ... }
170
- * });
171
- *
172
- * const SmallIconButton = withProps(IconButton, (outer: { icon: string; label: string }) => ({
173
- * icon: outer.icon,
174
- * label: outer.label,
175
- * size: 16
176
- * }));
177
- *
178
- * // Usage: SmallIconButton({ icon: 'star', label: 'Favorite' })
179
- * ```
180
- */
181
- declare function withProps<OuterProps extends Record<string, unknown>, InnerProps extends Record<string, unknown>>(component: (props: InnerProps) => HTMLElement, mapProps: (outer: OuterProps) => InnerProps): (props: OuterProps) => HTMLElement;
182
-
183
- /**
184
- * Runtime prop validation and strict typing contracts for SibuJS.
185
- * Provides runtime type checking for component props in development mode.
186
- */
187
- /** Validator function: returns true if valid, or an error message string. */
188
- type Validator<T = unknown> = (value: T, propName: string) => true | string;
189
- /** Built-in validators */
190
- declare const validators: {
191
- string: Validator;
192
- number: Validator;
193
- boolean: Validator;
194
- function: Validator;
195
- object: Validator;
196
- array: Validator;
197
- required: Validator;
198
- oneOf: <T>(...values: T[]) => Validator<T>;
199
- instanceOf: <T>(ctor: new (...args: unknown[]) => T) => Validator<T>;
200
- arrayOf: (itemValidator: Validator) => Validator<unknown[]>;
201
- shape: (schema: Record<string, Validator>) => Validator<Record<string, unknown>>;
202
- optional: (validator: Validator) => Validator;
203
- range: (min: number, max: number) => Validator<number>;
204
- pattern: (regex: RegExp) => Validator<string>;
205
- };
206
- interface PropDef<T = unknown> {
207
- type?: Validator<T>;
208
- required?: boolean;
209
- default?: T | (() => T);
210
- validator?: Validator<T>;
211
- }
212
- type PropSchema<Props> = {
213
- [K in keyof Props]: PropDef<Props[K]> | Validator<Props[K]>;
214
- };
215
- /**
216
- * Validate props against a schema. Returns validated props with defaults applied.
217
- * In production mode (process.env.NODE_ENV === 'production'), validation is skipped
218
- * and only defaults are applied for performance.
219
- */
220
- declare function validateProps<Props extends Record<string, unknown>>(props: Partial<Props>, schema: PropSchema<Props>): Props;
221
- /**
222
- * Define a component with runtime prop validation.
223
- * Validates props in development mode, applies defaults, then calls setup.
224
- */
225
- declare function defineStrictComponent<Props extends Record<string, unknown>>(config: {
226
- name: string;
227
- props: PropSchema<Props>;
228
- setup: (props: Props) => HTMLElement;
229
- }): (props: Partial<Props>) => HTMLElement;
230
- /**
231
- * Assert that a value satisfies a contract at runtime.
232
- * No-op in production builds.
233
- */
234
- declare function assertType<T>(value: unknown, validator: Validator<T>, label?: string): asserts value is T;
235
- /**
236
- * Create a type guard function from a validator.
237
- */
238
- declare function createGuard<T>(validator: Validator<T>): (value: unknown) => value is T;
239
-
240
- export { type ComponentProps as C, type PropDef as P, RenderProp as R, type Validator as V, type PropSchema as a, assertType as b, compose as c, createGuard as d, createSlots as e, defineComponent as f, defineSlottedComponent as g, defineStrictComponent as h, validators as i, withDefaults as j, withProps as k, withWrapper as l, validateProps as v, withBoundary as w };
@@ -1,240 +0,0 @@
1
- /**
2
- * Higher-order component utilities for SibuJS.
3
- * These functions wrap or compose components to add behavior.
4
- */
5
- type Component<P = unknown> = (props: P) => HTMLElement;
6
- /**
7
- * Wraps a component with additional behavior that runs before/after rendering.
8
- *
9
- * @param WrappedComponent The component to wrap
10
- * @param wrapper Function that receives the component and its props, returns enhanced element
11
- * @returns A new component function
12
- *
13
- * @example
14
- * ```ts
15
- * const WithLogging = withWrapper(MyComponent, (Comp, props) => {
16
- * console.log("Rendering with props:", props);
17
- * return Comp(props);
18
- * });
19
- * ```
20
- */
21
- declare function withWrapper<P>(WrappedComponent: Component<P>, wrapper: (component: Component<P>, props: P) => HTMLElement): Component<P>;
22
- /**
23
- * Adds default props to a component. Missing props are filled from defaults.
24
- *
25
- * @param component The component to wrap
26
- * @param defaults Default prop values
27
- * @returns A new component with defaults applied
28
- *
29
- * @example
30
- * ```ts
31
- * const Button = withDefaults(RawButton, { type: "button", disabled: false });
32
- * Button({ nodes: "Click" }); // type="button", disabled=false automatically
33
- * ```
34
- */
35
- declare function withDefaults<P extends Record<string, unknown>>(component: Component<P>, defaults: Partial<P>): Component<Partial<P>>;
36
- /**
37
- * Composes multiple HOC wrappers into a single wrapper.
38
- * Applied from right to left (like function composition).
39
- *
40
- * @param wrappers Array of HOC functions
41
- * @returns A function that applies all wrappers to a component
42
- *
43
- * @example
44
- * ```ts
45
- * const enhance = compose(withAuth, withLogging, withTheme);
46
- * const EnhancedPage = enhance(Page);
47
- * ```
48
- */
49
- declare function compose(...wrappers: Array<(component: Component) => Component>): (component: Component) => Component;
50
-
51
- /**
52
- * RenderProp implements the render-prop pattern.
53
- * The render function receives data and returns DOM nodes.
54
- */
55
- declare function RenderProp<T>(props: {
56
- data: () => T;
57
- render: (data: T) => HTMLElement;
58
- }): HTMLElement;
59
- /**
60
- * withBoundary creates an isolated component boundary for debugging.
61
- * Wraps component output in a named container with error isolation.
62
- */
63
- declare function withBoundary(name: string, component: (props?: unknown) => HTMLElement): (props?: unknown) => HTMLElement;
64
- /**
65
- * Slot pattern — provides named slots for component composition.
66
- */
67
- declare function createSlots(slots: Record<string, () => HTMLElement | HTMLElement[] | null>): {
68
- renderSlot: (name: string, fallback?: () => HTMLElement) => HTMLElement | null;
69
- hasSlot: (name: string) => boolean;
70
- };
71
-
72
- /**
73
- * Functional component props with TypeScript inference for SibuJS.
74
- *
75
- * Provides utilities to define typed components with prop defaults,
76
- * nodes slots, and prop mapping — all with full TypeScript inference.
77
- */
78
- /**
79
- * Extract the props type from a component defined with defineComponent.
80
- *
81
- * @example
82
- * ```ts
83
- * const Button = defineComponent<{ label: string }>({
84
- * setup(props) { ... }
85
- * });
86
- * type ButtonProps = ComponentProps<typeof Button>; // { label: string }
87
- * ```
88
- */
89
- type ComponentProps<T> = T extends (props: infer P) => HTMLElement ? P : never;
90
- /**
91
- * Props that include an optional nodes slot.
92
- */
93
- type WithNodes<Props> = Props & {
94
- nodes?: Node | Node[];
95
- };
96
- /**
97
- * Define a typed component with props inference, defaults, and a setup function.
98
- *
99
- * The `setup` function receives merged props (defaults + provided) and must
100
- * return an HTMLElement. TypeScript infers the full props type from the generic.
101
- *
102
- * @param config Component configuration with optional defaults and a setup function
103
- * @returns A component function that accepts props and returns an HTMLElement
104
- *
105
- * @example
106
- * ```ts
107
- * const Button = defineComponent<{ label: string; variant?: 'primary' | 'secondary'; disabled?: boolean }>({
108
- * defaults: { variant: 'primary', disabled: false },
109
- * setup(props) {
110
- * return button({
111
- * class: `btn btn-${props.variant}`,
112
- * disabled: props.disabled,
113
- * nodes: props.label
114
- * });
115
- * }
116
- * });
117
- *
118
- * // Usage: Button({ label: 'Click me' }) — TypeScript infers props
119
- * ```
120
- */
121
- declare function defineComponent<Props extends Record<string, unknown>>(config: {
122
- defaults?: Partial<Props>;
123
- setup: (props: Props) => HTMLElement;
124
- }): (props: Props) => HTMLElement;
125
- /**
126
- * Create a component with nodes slot support.
127
- *
128
- * Nodes are passed as a special `nodes` prop alongside the component's
129
- * own props. This enables composition patterns where a parent component
130
- * wraps arbitrary child content.
131
- *
132
- * @param config Component configuration with optional defaults and a setup function
133
- * @returns A component function that accepts props (including nodes) and returns an HTMLElement
134
- *
135
- * @example
136
- * ```ts
137
- * const Card = defineSlottedComponent<{ title: string }>({
138
- * setup(props) {
139
- * const el = div({ class: 'card' });
140
- * el.appendChild(h2({ nodes: props.title }));
141
- * if (props.nodes) {
142
- * const nodes = Array.isArray(props.nodes) ? props.nodes : [props.nodes];
143
- * nodes.forEach(child => el.appendChild(child));
144
- * }
145
- * return el;
146
- * }
147
- * });
148
- *
149
- * // Usage: Card({ title: 'Hello', nodes: p({ nodes: 'World' }) })
150
- * ```
151
- */
152
- declare function defineSlottedComponent<Props extends Record<string, unknown>>(config: {
153
- defaults?: Partial<Props>;
154
- setup: (props: WithNodes<Props>) => HTMLElement;
155
- }): (props: WithNodes<Props>) => HTMLElement;
156
- /**
157
- * Higher-order helper to create a component that maps outer props to inner props.
158
- *
159
- * Useful for adapting a generic component to a specific use case by transforming
160
- * the prop interface without modifying the original component.
161
- *
162
- * @param component The inner component to forward mapped props to
163
- * @param mapProps A function that transforms outer props into inner props
164
- * @returns A new component that accepts outer props
165
- *
166
- * @example
167
- * ```ts
168
- * const IconButton = defineComponent<{ icon: string; label: string; size: number }>({
169
- * setup(props) { ... }
170
- * });
171
- *
172
- * const SmallIconButton = withProps(IconButton, (outer: { icon: string; label: string }) => ({
173
- * icon: outer.icon,
174
- * label: outer.label,
175
- * size: 16
176
- * }));
177
- *
178
- * // Usage: SmallIconButton({ icon: 'star', label: 'Favorite' })
179
- * ```
180
- */
181
- declare function withProps<OuterProps extends Record<string, unknown>, InnerProps extends Record<string, unknown>>(component: (props: InnerProps) => HTMLElement, mapProps: (outer: OuterProps) => InnerProps): (props: OuterProps) => HTMLElement;
182
-
183
- /**
184
- * Runtime prop validation and strict typing contracts for SibuJS.
185
- * Provides runtime type checking for component props in development mode.
186
- */
187
- /** Validator function: returns true if valid, or an error message string. */
188
- type Validator<T = unknown> = (value: T, propName: string) => true | string;
189
- /** Built-in validators */
190
- declare const validators: {
191
- string: Validator;
192
- number: Validator;
193
- boolean: Validator;
194
- function: Validator;
195
- object: Validator;
196
- array: Validator;
197
- required: Validator;
198
- oneOf: <T>(...values: T[]) => Validator<T>;
199
- instanceOf: <T>(ctor: new (...args: unknown[]) => T) => Validator<T>;
200
- arrayOf: (itemValidator: Validator) => Validator<unknown[]>;
201
- shape: (schema: Record<string, Validator>) => Validator<Record<string, unknown>>;
202
- optional: (validator: Validator) => Validator;
203
- range: (min: number, max: number) => Validator<number>;
204
- pattern: (regex: RegExp) => Validator<string>;
205
- };
206
- interface PropDef<T = unknown> {
207
- type?: Validator<T>;
208
- required?: boolean;
209
- default?: T | (() => T);
210
- validator?: Validator<T>;
211
- }
212
- type PropSchema<Props> = {
213
- [K in keyof Props]: PropDef<Props[K]> | Validator<Props[K]>;
214
- };
215
- /**
216
- * Validate props against a schema. Returns validated props with defaults applied.
217
- * In production mode (process.env.NODE_ENV === 'production'), validation is skipped
218
- * and only defaults are applied for performance.
219
- */
220
- declare function validateProps<Props extends Record<string, unknown>>(props: Partial<Props>, schema: PropSchema<Props>): Props;
221
- /**
222
- * Define a component with runtime prop validation.
223
- * Validates props in development mode, applies defaults, then calls setup.
224
- */
225
- declare function defineStrictComponent<Props extends Record<string, unknown>>(config: {
226
- name: string;
227
- props: PropSchema<Props>;
228
- setup: (props: Props) => HTMLElement;
229
- }): (props: Partial<Props>) => HTMLElement;
230
- /**
231
- * Assert that a value satisfies a contract at runtime.
232
- * No-op in production builds.
233
- */
234
- declare function assertType<T>(value: unknown, validator: Validator<T>, label?: string): asserts value is T;
235
- /**
236
- * Create a type guard function from a validator.
237
- */
238
- declare function createGuard<T>(validator: Validator<T>): (value: unknown) => value is T;
239
-
240
- export { type ComponentProps as C, type PropDef as P, RenderProp as R, type Validator as V, type PropSchema as a, assertType as b, compose as c, createGuard as d, createSlots as e, defineComponent as f, defineSlottedComponent as g, defineStrictComponent as h, validators as i, withDefaults as j, withProps as k, withWrapper as l, validateProps as v, withBoundary as w };