@barocss/browser 0.0.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.
Files changed (15) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +273 -0
  3. package/dist/baro-boot.d.ts +8 -0
  4. package/dist/browser-runtime.d.ts +119 -0
  5. package/dist/cdn/barocss.js +8799 -0
  6. package/dist/cdn/barocss.js.map +1 -0
  7. package/dist/cdn/barocss.umd.cjs +2 -0
  8. package/dist/cdn/barocss.umd.cjs.map +1 -0
  9. package/dist/change-detector.d.ts +80 -0
  10. package/dist/index.d.ts +5 -0
  11. package/dist/index.es.js +425 -0
  12. package/dist/index.umd.js +7 -0
  13. package/dist/style-partition-manager.d.ts +51 -0
  14. package/dist/utils.d.ts +2 -0
  15. package/package.json +41 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 jinho park(cyberuls@gmail.com)
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,273 @@
1
+ # @barocss/browser
2
+
3
+ [![npm version](https://img.shields.io/npm/v/@barocss/browser.svg)](https://www.npmjs.com/package/@barocss/browser)
4
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5
+ [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
6
+
7
+ **Browser Runtime** - Real-time CSS generation for browsers
8
+
9
+ @barocss/browser provides a browser-specific runtime that automatically detects DOM changes and generates CSS in real-time. It includes DOM change detection, style injection, and performance optimizations for browser environments.
10
+
11
+ ## ✨ Key Features
12
+
13
+ - **🚀 Real-time DOM Detection** - Automatically detects and processes class changes
14
+ - **⚡ Instant Style Injection** - Injects generated CSS into the page immediately
15
+ - **🧠 Smart Caching** - Caches generated styles for optimal performance
16
+ - **📱 Style Partitioning** - Organizes CSS into efficient partitions
17
+ - **🎯 MutationObserver Integration** - Uses native browser APIs for change detection
18
+
19
+ ## 🚀 Quick Start
20
+
21
+ ### NPM Installation
22
+
23
+ ```bash
24
+ # npm
25
+ npm install @barocss/browser
26
+
27
+ # pnpm
28
+ pnpm add @barocss/browser
29
+
30
+ # yarn
31
+ yarn add @barocss/browser
32
+ ```
33
+
34
+ ### Basic Usage
35
+
36
+ ```typescript
37
+ import { BrowserRuntime } from '@barocss/browser';
38
+
39
+ // Initialize runtime
40
+ const runtime = new BrowserRuntime();
41
+
42
+ // Watch DOM changes and auto-style
43
+ runtime.observe(document.body, { scan: true });
44
+
45
+ // Add classes dynamically
46
+ document.body.innerHTML = `
47
+ <div class="bg-blue-500 text-white p-4 rounded-lg">
48
+ <h1 class="text-2xl font-bold">Hello BaroCSS!</h1>
49
+ <p class="text-lg opacity-90">This gets styled instantly!</p>
50
+ </div>
51
+ `;
52
+ ```
53
+
54
+ ### CDN Usage
55
+
56
+ ```html
57
+ <!DOCTYPE html>
58
+ <html>
59
+ <head>
60
+ <meta charset="utf-8">
61
+ <meta name="viewport" content="width=device-width, initial-scale=1">
62
+ <title>BaroCSS App</title>
63
+ </head>
64
+ <body>
65
+ <div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-8 rounded-xl">
66
+ <h1 class="text-4xl font-bold mb-6">Hello BaroCSS!</h1>
67
+ <p class="text-xl opacity-90">Instant styling without build</p>
68
+ </div>
69
+
70
+ <script type="module">
71
+ import { BrowserRuntime } from 'https://unpkg.com/@barocss/browser/dist/index.es.js';
72
+
73
+ const runtime = new BrowserRuntime();
74
+ runtime.observe(document.body, { scan: true });
75
+ </script>
76
+ </body>
77
+ </html>
78
+ ```
79
+
80
+ ## 🎯 How It Works
81
+
82
+ The browser runtime provides real-time CSS generation:
83
+
84
+ 1. **DOM Monitoring** - Uses MutationObserver to watch for class changes
85
+ 2. **Class Detection** - Automatically detects new Tailwind classes
86
+ 3. **CSS Generation** - Generates CSS using @barocss/kit engine
87
+ 4. **Style Injection** - Injects CSS into the page in real-time
88
+ 5. **Performance Optimization** - Caches and partitions styles efficiently
89
+
90
+ ```typescript
91
+ import { BrowserRuntime } from '@barocss/browser';
92
+
93
+ const runtime = new BrowserRuntime();
94
+
95
+ // Automatically detects and processes these changes:
96
+ document.body.innerHTML = `
97
+ <div class="bg-red-500 text-white p-4 rounded-lg shadow-md">
98
+ <h2 class="text-xl font-semibold">Dynamic Content</h2>
99
+ <p class="text-sm opacity-80">Generated instantly!</p>
100
+ </div>
101
+ `;
102
+
103
+ // BaroCSS automatically:
104
+ // ✅ Detects new classes
105
+ // ✅ Generates CSS
106
+ // ✅ Applies styles
107
+ // ✅ Caches results
108
+ ```
109
+
110
+ ## 🛠️ Usage Examples
111
+
112
+ ### Basic DOM Observation
113
+
114
+ ```typescript
115
+ import { BrowserRuntime } from '@barocss/browser';
116
+
117
+ const runtime = new BrowserRuntime();
118
+
119
+ // Watch entire document
120
+ runtime.observe(document.body, { scan: true });
121
+
122
+ // Watch specific container
123
+ const container = document.querySelector('#app');
124
+ runtime.observe(container, { scan: true });
125
+ ```
126
+
127
+ ### Advanced Configuration
128
+
129
+ ```typescript
130
+ import { BrowserRuntime } from '@barocss/browser';
131
+
132
+ const runtime = new BrowserRuntime({
133
+ config: {
134
+ theme: {
135
+ extend: {
136
+ colors: {
137
+ 'brand': {
138
+ 50: '#f0f9ff',
139
+ 500: '#0ea5e9',
140
+ 900: '#0c4a6e',
141
+ }
142
+ }
143
+ }
144
+ },
145
+ darkMode: 'class'
146
+ },
147
+ maxRulesPerPartition: 50,
148
+ debounceTime: 16
149
+ });
150
+ ```
151
+
152
+ ### Performance Monitoring
153
+
154
+ ```typescript
155
+ import { BrowserRuntime } from '@barocss/browser';
156
+
157
+ const runtime = new BrowserRuntime();
158
+
159
+ // Get runtime statistics
160
+ const stats = runtime.getStats();
161
+ console.log('Generated classes:', stats.totalClasses);
162
+ console.log('Cache hit rate:', stats.cacheHitRate);
163
+
164
+ // Clear caches when needed
165
+ runtime.clearCaches();
166
+ ```
167
+
168
+ ## 🔧 Configuration
169
+
170
+ ### Runtime Options
171
+
172
+ ```typescript
173
+ interface BrowserRuntimeOptions {
174
+ config?: Config;
175
+ styleId?: string;
176
+ insertionPoint?: 'head' | 'body' | HTMLElement;
177
+ maxRulesPerPartition?: number;
178
+ }
179
+ ```
180
+
181
+ ## 🌐 API Reference
182
+
183
+ ### BrowserRuntime
184
+
185
+ ```typescript
186
+ class BrowserRuntime {
187
+ constructor(options?: BrowserRuntimeOptions)
188
+
189
+ // Watch DOM changes
190
+ observe(root: HTMLElement, options?: { scan?: boolean }): MutationObserver
191
+
192
+ // Stop watching
193
+ disconnect(): void
194
+
195
+ // Get runtime statistics
196
+ getStats(): RuntimeStats
197
+
198
+ // Clear caches
199
+ clearCaches(): void
200
+
201
+ // Destroy runtime
202
+ destroy(): void
203
+ }
204
+ ```
205
+
206
+ ### ChangeDetector
207
+
208
+ ```typescript
209
+ class ChangeDetector {
210
+ constructor(parser: IncrementalParser, runtime: BrowserRuntime)
211
+
212
+ // Process mutations
213
+ processMutations(mutations: MutationRecord[]): void
214
+ }
215
+ ```
216
+
217
+ ### StylePartitionManager
218
+
219
+ ```typescript
220
+ class StylePartitionManager {
221
+ constructor(insertionPoint: HTMLElement, maxRulesPerPartition: number, styleId: string)
222
+
223
+ // Add CSS to partition
224
+ addCSS(css: string): void
225
+
226
+ // Clear partitions
227
+ clear(): void
228
+ }
229
+ ```
230
+
231
+ ## 🚀 Performance Features
232
+
233
+ - **JIT Generation** - Only generates CSS you actually use
234
+ - **Smart Caching** - Avoids regenerating existing styles
235
+ - **Style Partitioning** - Organizes CSS for optimal performance
236
+ - **Memory Management** - Efficient memory usage with cleanup
237
+
238
+ ## 🤝 Contributing
239
+
240
+ We welcome contributions! Please see our [Contributing Guide](../../CONTRIBUTING.md) for details.
241
+
242
+ ### Development
243
+
244
+ ```bash
245
+ # Clone repository
246
+ git clone https://github.com/easylogic/barocss.git
247
+ cd barocss
248
+
249
+ # Install dependencies
250
+ pnpm install
251
+
252
+ # Start development server
253
+ pnpm dev
254
+
255
+ # Run tests
256
+ pnpm test
257
+
258
+ # Build packages
259
+ pnpm build
260
+ ```
261
+
262
+ ## 📄 License
263
+
264
+ This project is licensed under the MIT License - see the [LICENSE](../../LICENSE) file for details.
265
+
266
+ ## 🙏 Acknowledgments
267
+
268
+ - **Tailwind CSS** - For the amazing utility-first approach and JIT inspiration
269
+ - **UnoCSS** - For ideas around on-demand, utility-first generation at runtime
270
+
271
+ ---
272
+
273
+ **@barocss/browser** - Real-time CSS generation for browsers.
package/dist/baro-boot.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { BrowserRuntime, BrowserRuntimeOptions } from './browser-runtime';
2
+ export declare function getRuntime(options: BrowserRuntimeOptions): BrowserRuntime;
3
+ type BaroBootOptions = BrowserRuntimeOptions & {
4
+ loadingClassName?: string;
5
+ };
6
+ export declare function baroBoot({ loadingClassName, ...options }?: BaroBootOptions): void;
7
+ export declare const baroStart: typeof baroBoot;
8
+ export {};
package/dist/browser-runtime.d.ts ADDED
@@ -0,0 +1,119 @@
1
+ import { GenerateCssRulesResult, Config } from '@barocss/kit';
2
+ export interface BrowserRuntimeOptions {
3
+ config?: Config;
4
+ styleId?: string;
5
+ insertionPoint?: 'head' | 'body' | HTMLElement;
6
+ maxRulesPerPartition?: number;
7
+ }
8
+ export declare class BrowserRuntime {
9
+ private cache;
10
+ private rootCache;
11
+ private context;
12
+ private options;
13
+ private isDestroyed;
14
+ private incrementalParser;
15
+ private changeDetector;
16
+ private stylePartitionManager;
17
+ constructor(options?: BrowserRuntimeOptions);
18
+ /**
19
+ * Add debug logs (by level)
20
+ */
21
+ private debugLog;
22
+ private init;
23
+ private injectPreflightCSS;
24
+ private ensureCssVars;
25
+ private getInsertionPoint;
26
+ /**
27
+ * Dynamically add one or more class names and generate/insert CSS
28
+ */
29
+ addClass(classes: string | string[]): void;
30
+ /**
31
+ * Process classes
32
+ */
33
+ private processClasses;
34
+ /**
35
+ * Process classes using incremental parsing
36
+ */
37
+ private processClassesIncremental;
38
+ /**
39
+ * Public method to apply parser results, update internal caches, and inject CSS
40
+ */
41
+ applyParseResults(results: Array<GenerateCssRulesResult>, _opts?: {
42
+ isBrowser?: boolean;
43
+ }): void;
44
+ /**
45
+ * MutationObserver instance method to automatically call addClass when class attributes change in DOM
46
+ */
47
+ observe(root?: HTMLElement, options?: {
48
+ scan?: boolean;
49
+ onReady?: () => void;
50
+ }): MutationObserver;
51
+ private normalizeClasses;
52
+ has(cls: string): boolean;
53
+ getCss(cls: string): string | undefined;
54
+ getAllCss(): string;
55
+ getClasses(): string[];
56
+ /**
57
+ * Get comprehensive cache statistics
58
+ */
59
+ getCacheStats(): {
60
+ runtime: {
61
+ cachedClasses: number;
62
+ rootCacheSize: number;
63
+ };
64
+ ast: {
65
+ size: number;
66
+ maxSize: number;
67
+ hitRate: number;
68
+ };
69
+ incremental: {
70
+ processedClasses: number;
71
+ pendingClasses: number;
72
+ cacheStats: {
73
+ ast: {
74
+ size: number;
75
+ maxSize: number;
76
+ hitRate: number;
77
+ };
78
+ css: {};
79
+ };
80
+ };
81
+ };
82
+ /**
83
+ * Clear all caches (useful for debugging or memory management)
84
+ */
85
+ clearCaches(): void;
86
+ reset(): void;
87
+ updateConfig(newConfig: Config): void;
88
+ removeClass(classes: string | string[]): void;
89
+ destroy(): void;
90
+ getStats(): {
91
+ cachedClasses: number;
92
+ styleElementId: string;
93
+ isDestroyed: boolean;
94
+ config: Config;
95
+ cacheStats: {
96
+ runtime: {
97
+ cachedClasses: number;
98
+ rootCacheSize: number;
99
+ };
100
+ ast: {
101
+ size: number;
102
+ maxSize: number;
103
+ hitRate: number;
104
+ };
105
+ incremental: {
106
+ processedClasses: number;
107
+ pendingClasses: number;
108
+ cacheStats: {
109
+ ast: {
110
+ size: number;
111
+ maxSize: number;
112
+ hitRate: number;
113
+ };
114
+ css: {};
115
+ };
116
+ };
117
+ };
118
+ };
119
+ }