@prokodo/ui 0.0.39 → 0.0.40
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 +15 -3
- package/dist/constants/project.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
## ✨ Features
|
|
20
20
|
|
|
21
|
-
- ✨ **Adaptive
|
|
21
|
+
- ✨ **Adaptive Island Components (AIC)**: A rendering strategy where each component loads only the JavaScript it needs — when needed.
|
|
22
22
|
- ⚡️ **Modern stack**: Vite, React 19, TypeScript, and SCSS Modules
|
|
23
23
|
- 💅 **Design consistency**: Theming via design tokens and BEM-style naming
|
|
24
24
|
- 🧩 **Component-rich**: 35+ reusable UI components
|
|
@@ -27,6 +27,19 @@
|
|
|
27
27
|
- 📦 **Ready-to-install**: Distributed via npm for non-production use under the BUSL-1.1 license
|
|
28
28
|
- 🧱 **Optimized for SSR**: Works great with Next.js and React Server Components
|
|
29
29
|
|
|
30
|
+
## ⚡ Lightweight by Design
|
|
31
|
+
|
|
32
|
+
Addaptial Island Components (AIC) are fully modular and optimized for modern frameworks (Next.js, Remix, etc.).
|
|
33
|
+
Each component is built for **lazy loading**, works seamlessly with **React Server Components (RSC)**, and can be **tree-shaken** out when unused.
|
|
34
|
+
|
|
35
|
+
**Total bundle (all components): ~195 kB gzipped**
|
|
36
|
+
- **Only 5–20 kB** are typically loaded per page
|
|
37
|
+
- **Zero-JS on initial render** for most components
|
|
38
|
+
- **Hydration is deferred** until interaction or visibility
|
|
39
|
+
- Shared styles are minimal: **only ~16.5 kB gzipped**
|
|
40
|
+
|
|
41
|
+
This makes `@prokodo/ui` ideal for modern SSR apps using Next.js or Remix, with excellent Time-to-Interactive (TTI) and Core Web Vitals.
|
|
42
|
+
|
|
30
43
|
---
|
|
31
44
|
|
|
32
45
|
## 🚀 Getting Started
|
|
@@ -130,7 +143,7 @@ export default function GalleryPage() {
|
|
|
130
143
|
✅ = Available as AIC (renders zero-JS RSC and self-hydrates when needed) and can also used as a client‐only entry.
|
|
131
144
|
– = RSC (AIC) only; no client‐side bundle. (Best practice: Use it only in RSC)
|
|
132
145
|
|
|
133
|
-
| Component | ✅ AIC
|
|
146
|
+
| Component | ✅ AIC (RSC + optional client) | ✅ SSR-Compatible (`"use client"`) |
|
|
134
147
|
|-----------------------|:--------------------------------:|:---------------------------------:|
|
|
135
148
|
| Accordion | ✅ | ✅ |
|
|
136
149
|
| Animated | ✅ | ✅ |
|
|
@@ -227,7 +240,6 @@ export default createLazyWrapper<NavbarProps>({
|
|
|
227
240
|
|
|
228
241
|
## 🎯 Next steps
|
|
229
242
|
|
|
230
|
-
- [ ] Make all components **RSC-compatible** and **client-optimized**
|
|
231
243
|
- [ ] Add more ✨ **fancy styling**, UI polish and properties
|
|
232
244
|
- [ ] Improve **accessibility** to meet **WCAG 2.2 AAA** standards
|
|
233
245
|
- [ ] Detailed Documentation about the components
|
package/package.json
CHANGED