@csszyx/types 0.1.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 ADDED
@@ -0,0 +1,345 @@
1
+ # @csszyx/types
2
+
3
+ Shared TypeScript type definitions for the csszyx framework.
4
+
5
+ ## Features
6
+
7
+ - **Configuration Types**: Complete type definitions for csszyx configuration
8
+ - **Runtime Types**: Types for runtime operations, hydration, and recovery
9
+ - **Compiler Types**: Types for build phases, transformations, and plugins
10
+ - **Comprehensive Documentation**: All types fully documented with JSDoc
11
+ - **Tree-Shakeable**: Import only what you need
12
+
13
+ ## Installation
14
+
15
+ ```bash
16
+ pnpm add @csszyx/types
17
+ ```
18
+
19
+ ## Usage
20
+
21
+ ### Import All Types
22
+
23
+ ```typescript
24
+ import type {
25
+ CsszyxConfig,
26
+ RecoveryManifest,
27
+ BuildResult,
28
+ } from "@csszyx/types";
29
+ ```
30
+
31
+ ### Import from Specific Modules
32
+
33
+ ```typescript
34
+ // Configuration types only
35
+ import type { CsszyxConfig, DevelopmentConfig } from "@csszyx/types/config";
36
+
37
+ // Runtime types only
38
+ import type { RecoveryManifest, MangleMap } from "@csszyx/types/runtime";
39
+
40
+ // Compiler types only
41
+ import type { BuildResult, CompilerOptions } from "@csszyx/types/compiler";
42
+ ```
43
+
44
+ ## Type Categories
45
+
46
+ ### Configuration Types (`/config`)
47
+
48
+ Types for configuring the csszyx framework:
49
+
50
+ ```typescript
51
+ import type {
52
+ CsszyxConfig, // Main configuration interface
53
+ DevelopmentConfig, // Development mode options
54
+ ProductionConfig, // Production mode options
55
+ BuildConfig, // Build pipeline options
56
+ HydrationConfig, // Hydration safety options
57
+ PerformanceConfig, // Performance optimization options
58
+ PartialCsszyxConfig, // Partial config for users
59
+ Environment, // Environment type
60
+ } from "@csszyx/types/config";
61
+
62
+ import {
63
+ DEFAULT_CSSZYX_CONFIG, // Default configuration
64
+ getCurrentEnvironment, // Get current environment
65
+ } from "@csszyx/types/config";
66
+ ```
67
+
68
+ #### Example: Using Configuration Types
69
+
70
+ ```typescript
71
+ import type { CsszyxConfig, PartialCsszyxConfig } from "@csszyx/types";
72
+
73
+ const userConfig: PartialCsszyxConfig = {
74
+ development: {
75
+ debug: true,
76
+ strictMode: false,
77
+ },
78
+ production: {
79
+ mangle: true,
80
+ },
81
+ };
82
+
83
+ // Merge with defaults
84
+ const config: CsszyxConfig = {
85
+ ...DEFAULT_CSSZYX_CONFIG,
86
+ development: {
87
+ ...DEFAULT_CSSZYX_CONFIG.development,
88
+ ...userConfig.development,
89
+ },
90
+ };
91
+ ```
92
+
93
+ ### Runtime Types (`/runtime`)
94
+
95
+ Types for runtime operations:
96
+
97
+ ```typescript
98
+ import type {
99
+ RecoveryManifest, // Recovery token manifest
100
+ MangleMap, // Class name mangle map
101
+ TokenData, // Token metadata
102
+ RecoveryMode, // 'csr' | 'dev-only'
103
+ HydrationError, // Hydration error details
104
+ HydrationErrorType, // Error type enum
105
+ VerificationResult, // Token verification result
106
+ RuntimeState, // Runtime state
107
+ SzProp, // sz prop type
108
+ ComponentPropsWithSz, // Component props with sz
109
+ AuditLogEntry, // Audit log entry
110
+ PerformanceMetrics, // Performance metrics
111
+ CsszyxWindow, // Extended window interface
112
+ } from "@csszyx/types/runtime";
113
+
114
+ import {
115
+ isCsszyxWindow, // Type guard for window
116
+ } from "@csszyx/types/runtime";
117
+ ```
118
+
119
+ #### Example: Using Runtime Types
120
+
121
+ ```typescript
122
+ import type {
123
+ RecoveryManifest,
124
+ MangleMap,
125
+ ComponentPropsWithSz
126
+ } from '@csszyx/types';
127
+
128
+ // Load manifest
129
+ const manifest: RecoveryManifest = {
130
+ buildId: 'abc123',
131
+ checksum: 'def456',
132
+ tokens: {
133
+ token1: {
134
+ mode: 'csr',
135
+ component: 'Button',
136
+ path: 'components/Button.tsx',
137
+ },
138
+ },
139
+ };
140
+
141
+ // Component with sz prop
142
+ interface ButtonProps extends ComponentPropsWithSz {
143
+ onClick: () => void;
144
+ }
145
+
146
+ const Button: React.FC<ButtonProps> = ({ sz, szRecover, onClick }) => {
147
+ return <button sz={sz} szRecover={szRecover} onClick={onClick} />;
148
+ };
149
+ ```
150
+
151
+ ### Compiler Types (`/compiler`)
152
+
153
+ Types for compilation and build:
154
+
155
+ ```typescript
156
+ import type {
157
+ CompilerOptions, // Compiler options
158
+ TransformOptions, // Transform options
159
+ BuildResult, // Build result
160
+ BuildStatistics, // Build statistics
161
+ BuildPhase, // Build phase enum
162
+ BuildPhaseResult, // Phase result
163
+ BuildPhaseStatus, // Phase status
164
+ FileCompilationResult, // File compilation result
165
+ TokenMetadata, // Token metadata
166
+ GeneratedToken, // Generated token
167
+ MangleMapEntry, // Mangle map entry
168
+ CollisionResult, // Collision detection result
169
+ ValidationResult, // Validation result
170
+ ValidationError, // Validation error
171
+ NodeLocation, // AST node location
172
+ CompilerPlugin, // Plugin interface
173
+ CompilerContext, // Plugin context
174
+ CacheManager, // Cache manager interface
175
+ CacheEntry, // Cache entry
176
+ } from "@csszyx/types/compiler";
177
+ ```
178
+
179
+ #### Example: Using Compiler Types
180
+
181
+ ```typescript
182
+ import type {
183
+ CompilerOptions,
184
+ BuildResult,
185
+ CompilerPlugin,
186
+ } from "@csszyx/types";
187
+
188
+ const options: CompilerOptions = {
189
+ buildId: "v1.0.0",
190
+ development: true,
191
+ strictMode: false,
192
+ sourceRoot: "./src",
193
+ outDir: "./dist",
194
+ };
195
+
196
+ // Custom compiler plugin
197
+ const myPlugin: CompilerPlugin = {
198
+ name: "my-plugin",
199
+ version: "1.0.0",
200
+ transform(code, filePath, options) {
201
+ // Transform code
202
+ return code;
203
+ },
204
+ };
205
+ ```
206
+
207
+ ## Type Definitions
208
+
209
+ ### Key Interfaces
210
+
211
+ #### CsszyxConfig
212
+
213
+ Main configuration for the csszyx framework:
214
+
215
+ ```typescript
216
+ interface CsszyxConfig {
217
+ development: DevelopmentConfig;
218
+ production: ProductionConfig;
219
+ build: BuildConfig;
220
+ hydration: HydrationConfig;
221
+ performance: PerformanceConfig;
222
+ }
223
+ ```
224
+
225
+ #### RecoveryManifest
226
+
227
+ Recovery token manifest embedded in build output:
228
+
229
+ ```typescript
230
+ interface RecoveryManifest {
231
+ buildId: string;
232
+ checksum: string;
233
+ tokens: Record<string, TokenData>;
234
+ }
235
+ ```
236
+
237
+ #### MangleMap
238
+
239
+ Maps original class names to minified versions:
240
+
241
+ ```typescript
242
+ interface MangleMap {
243
+ [originalClass: string]: string;
244
+ }
245
+ ```
246
+
247
+ #### BuildResult
248
+
249
+ Result of a complete build:
250
+
251
+ ```typescript
252
+ interface BuildResult {
253
+ success: boolean;
254
+ stats: BuildStatistics;
255
+ phases: BuildPhaseResult[];
256
+ errors: Error[];
257
+ warnings: string[];
258
+ artifacts: Record<string, string>;
259
+ }
260
+ ```
261
+
262
+ ## Enums and Literal Types
263
+
264
+ ### RecoveryMode
265
+
266
+ ```typescript
267
+ type RecoveryMode = "csr" | "dev-only";
268
+ ```
269
+
270
+ ### BuildPhase
271
+
272
+ ```typescript
273
+ type BuildPhase =
274
+ | "type_generation"
275
+ | "jsx_transform"
276
+ | "tailwind_jit"
277
+ | "global_mangling"
278
+ | "output_emit";
279
+ ```
280
+
281
+ ### HydrationErrorType
282
+
283
+ ```typescript
284
+ type HydrationErrorType =
285
+ | "checksum_mismatch"
286
+ | "map_missing"
287
+ | "invalid_token"
288
+ | "abort_failed";
289
+ ```
290
+
291
+ ### Environment
292
+
293
+ ```typescript
294
+ type Environment = "development" | "production" | "test";
295
+ ```
296
+
297
+ ## Default Values
298
+
299
+ The package exports default configurations:
300
+
301
+ ```typescript
302
+ import {
303
+ DEFAULT_CSSZYX_CONFIG,
304
+ DEFAULT_DEVELOPMENT_CONFIG,
305
+ DEFAULT_PRODUCTION_CONFIG,
306
+ DEFAULT_BUILD_CONFIG,
307
+ DEFAULT_HYDRATION_CONFIG,
308
+ DEFAULT_PERFORMANCE_CONFIG,
309
+ } from "@csszyx/types";
310
+ ```
311
+
312
+ ## Type Guards
313
+
314
+ ### isCsszyxWindow
315
+
316
+ Check if window has csszyx extensions:
317
+
318
+ ```typescript
319
+ import { isCsszyxWindow } from "@csszyx/types";
320
+
321
+ if (typeof window !== "undefined" && isCsszyxWindow(window)) {
322
+ // Access csszyx-specific properties
323
+ console.log(window.__SZ_RUNTIME_STATE__);
324
+ }
325
+ ```
326
+
327
+ ## Best Practices
328
+
329
+ 1. **Import Only What You Need**: Use specific imports to improve tree-shaking
330
+ 2. **Use Type Imports**: Use `import type` for type-only imports
331
+ 3. **Extend Interfaces**: Create custom interfaces by extending base types
332
+ 4. **Leverage Defaults**: Use default configurations as starting points
333
+
334
+ ## Contributing
335
+
336
+ When adding new types:
337
+
338
+ 1. Add JSDoc comments to all types
339
+ 2. Group related types in the appropriate module
340
+ 3. Export from the main index
341
+ 4. Update this README with examples
342
+
343
+ ## License
344
+
345
+ MIT
@@ -0,0 +1,57 @@
1
+ // src/config.ts
2
+ var DEFAULT_DEVELOPMENT_CONFIG = {
3
+ autoInjectRecovery: false,
4
+ strictMode: false,
5
+ debug: false,
6
+ allowCSRRecovery: true
7
+ };
8
+ var DEFAULT_PRODUCTION_CONFIG = {
9
+ mangle: true,
10
+ contentHashing: true,
11
+ injectChecksum: true,
12
+ incrementalBuild: true,
13
+ minify: true
14
+ };
15
+ var DEFAULT_BUILD_CONFIG = {
16
+ tailwindConfig: "tailwind.config.js",
17
+ outputDir: ".csszyx",
18
+ cacheDir: ".csszyx/cache",
19
+ astBudgetLimit: 5e4
20
+ };
21
+ var DEFAULT_HYDRATION_CONFIG = {
22
+ strict: true,
23
+ defaultRecoveryMode: null,
24
+ auditLog: true
25
+ };
26
+ var DEFAULT_PERFORMANCE_CONFIG = {
27
+ parallel: true,
28
+ optimizeVariables: true,
29
+ zeroRuntime: true
30
+ };
31
+ var DEFAULT_CSSZYX_CONFIG = {
32
+ development: DEFAULT_DEVELOPMENT_CONFIG,
33
+ production: DEFAULT_PRODUCTION_CONFIG,
34
+ build: DEFAULT_BUILD_CONFIG,
35
+ hydration: DEFAULT_HYDRATION_CONFIG,
36
+ performance: DEFAULT_PERFORMANCE_CONFIG
37
+ };
38
+ function getCurrentEnvironment() {
39
+ const env = process.env.NODE_ENV;
40
+ if (env === "production") {
41
+ return "production";
42
+ }
43
+ if (env === "test") {
44
+ return "test";
45
+ }
46
+ return "development";
47
+ }
48
+
49
+ export {
50
+ DEFAULT_DEVELOPMENT_CONFIG,
51
+ DEFAULT_PRODUCTION_CONFIG,
52
+ DEFAULT_BUILD_CONFIG,
53
+ DEFAULT_HYDRATION_CONFIG,
54
+ DEFAULT_PERFORMANCE_CONFIG,
55
+ DEFAULT_CSSZYX_CONFIG,
56
+ getCurrentEnvironment
57
+ };
@@ -0,0 +1,8 @@
1
+ // src/runtime.ts
2
+ function isCsszyxWindow(win) {
3
+ return "__SZ_RUNTIME_STATE__" in win || "__SZ_ALLOW_CSR_RECOVERY__" in win;
4
+ }
5
+
6
+ export {
7
+ isCsszyxWindow
8
+ };