@clikvn/showroom-visualizer 0.4.1-dev-11 → 0.4.1-dev-13

package/example/CSS_HANDLING.md

@@ -1,141 +1,141 @@
-# 🎨 CSS Handling in Example App
-
-## Vấn đề
-
-```
-Uncaught SyntaxError: The requested module '.../actionsChangeSceneStyles.css' does not provide an export named 'default'
-```
-
-## Nguyên nhân
-
-### Thư viện (Rollup Build)
-
-Thư viện sử dụng Rollup với PostCSS plugin config:
-
-```javascript
-postcss({
-  inject: false,  // ← Không inject CSS vào DOM
-  extract: false, // ← Export CSS as string
-})
-```
-
-Điều này cho phép import CSS như strings:
-
-```typescript
-import styles from './styles.css';
-// styles = "css content as string"
-```
-
-Và render trong component `CssStyles.tsx`:
-
-```tsx
-<style>{styles}</style>
-```
-
-### Vite (Development)
-
-Vite mặc định **inject CSS trực tiếp vào DOM** và không export CSS as strings.
-
-```typescript
-import styles from './styles.css';
-// Vite inject CSS → styles = undefined
-// ❌ Error: does not provide an export named 'default'
-```
-
-## Giải pháp
-
-### Custom Vite Plugin: `cssAsStringPlugin`
-
-Tạo plugin trong `vite.config.ts` để xử lý CSS từ thư viện như strings:
-
-```typescript
-const cssAsStringPlugin = () => ({
-  name: 'css-as-string',
-  enforce: 'pre', // ⭐ Run BEFORE other plugins (critical!)
-  load(id: string) {
-    // Chỉ xử lý CSS từ thư viện
-    if (
-      id.endsWith('.css') &&
-      (id.includes('/src/assets/') || id.includes('/@clikvn/'))
-    ) {
-      const cssContent = fs.readFileSync(id, 'utf-8');
-      return `export default ${JSON.stringify(cssContent)}`;
-    }
-    return null;
-  },
-});
-
-// Plugin order matters!
-plugins: [cssAsStringPlugin(), react()]
-```
-
-**Key Points:**
-- ⭐ **`enforce: 'pre'`**: Chạy trước Vite's built-in CSS plugin
-- ⭐ **`load` hook**: Intercept file loading, không dùng `transform`
-- ⭐ **Plugin order**: `cssAsStringPlugin()` phải đứng TRƯỚC `react()`
-
-### Cách hoạt động
-
-1. **CSS từ thư viện** (`/src/assets/`) → Export as string
-2. **CSS từ @clikvn packages** → Export as string
-3. **CSS khác** (antd, example app CSS) → Vite xử lý bình thường
-
-### Files được xử lý
-
-Plugin chỉ xử lý CSS files trong:
-
-- ✅ `/Users/tungthai/Desktop/Develop/showroom-visualizer/src/assets/*.css`
-- ✅ `node_modules/@clikvn/*/dist/**/*.css`
-- ❌ `node_modules/antd/**/*.css` (Vite xử lý bình thường)
-- ❌ `example/src/**/*.css` (Vite xử lý bình thường)
-
-## Kết quả
-
-### ✅ Trước (Rollup Build):
-
-```typescript
-import styles from './styles.css';
-<style>{styles}</style> // ✅ Works
-```
-
-### ✅ Sau (Vite Dev with Plugin):
-
-```typescript
-import styles from './styles.css';
-<style>{styles}</style> // ✅ Works (plugin export CSS as string)
-```
-
-### ✅ CSS từ example app:
-
-```typescript
-// example/src/App.css
-import './App.css'; // ✅ Vite inject vào DOM bình thường
-```
-
-## 🔍 Debug
-
-Nếu vẫn có lỗi CSS, kiểm tra:
-
-```bash
-# 1. Restart dev server
-cd example
-yarn dev
-
-# 2. Clear Vite cache
-rm -rf node_modules/.vite
-yarn dev
-
-# 3. Kiểm tra plugin đang hoạt động
-# Trong browser console, check xem CSS đã được inject chưa
-```
-
-## 📚 Related Files
-
-- `example/vite.config.ts` - Chứa `cssAsStringPlugin`
-- `src/features/ShowroomVisualizer/CssStyles.tsx` - Render CSS as `<style>` tags
-- `rollup.config.js` - PostCSS config của thư viện
-
----
-
-✅ **Fixed!** CSS từ thư viện giờ được export as strings trong Vite dev mode.
-
+# 🎨 CSS Handling in Example App
+
+## Vấn đề
+
+```
+Uncaught SyntaxError: The requested module '.../actionsChangeSceneStyles.css' does not provide an export named 'default'
+```
+
+## Nguyên nhân
+
+### Thư viện (Rollup Build)
+
+Thư viện sử dụng Rollup với PostCSS plugin config:
+
+```javascript
+postcss({
+  inject: false, // ← Không inject CSS vào DOM
+  extract: false, // ← Export CSS as string
+});
+```
+
+Điều này cho phép import CSS như strings:
+
+```typescript
+import styles from './styles.css';
+// styles = "css content as string"
+```
+
+Và render trong component `CssStyles.tsx`:
+
+```tsx
+<style>{styles}</style>
+```
+
+### Vite (Development)
+
+Vite mặc định **inject CSS trực tiếp vào DOM** và không export CSS as strings.
+
+```typescript
+import styles from './styles.css';
+// Vite inject CSS → styles = undefined
+// ❌ Error: does not provide an export named 'default'
+```
+
+## Giải pháp
+
+### Custom Vite Plugin: `cssAsStringPlugin`
+
+Tạo plugin trong `vite.config.ts` để xử lý CSS từ thư viện như strings:
+
+```typescript
+const cssAsStringPlugin = () => ({
+  name: 'css-as-string',
+  enforce: 'pre', // ⭐ Run BEFORE other plugins (critical!)
+  load(id: string) {
+    // Chỉ xử lý CSS từ thư viện
+    if (
+      id.endsWith('.css') &&
+      (id.includes('/src/assets/') || id.includes('/@clikvn/'))
+    ) {
+      const cssContent = fs.readFileSync(id, 'utf-8');
+      return `export default ${JSON.stringify(cssContent)}`;
+    }
+    return null;
+  },
+});
+
+// Plugin order matters!
+plugins: [cssAsStringPlugin(), react()];
+```
+
+**Key Points:**
+
+- ⭐ **`enforce: 'pre'`**: Chạy trước Vite's built-in CSS plugin
+- ⭐ **`load` hook**: Intercept file loading, không dùng `transform`
+- ⭐ **Plugin order**: `cssAsStringPlugin()` phải đứng TRƯỚC `react()`
+
+### Cách hoạt động
+
+1. **CSS từ thư viện** (`/src/assets/`) → Export as string
+2. **CSS từ @clikvn packages** → Export as string
+3. **CSS khác** (antd, example app CSS) → Vite xử lý bình thường
+
+### Files được xử lý
+
+Plugin chỉ xử lý CSS files trong:
+
+- ✅ `/Users/tungthai/Desktop/Develop/showroom-visualizer/src/assets/*.css`
+- ✅ `node_modules/@clikvn/*/dist/**/*.css`
+- ❌ `node_modules/antd/**/*.css` (Vite xử lý bình thường)
+- ❌ `example/src/**/*.css` (Vite xử lý bình thường)
+
+## Kết quả
+
+### ✅ Trước (Rollup Build):
+
+```typescript
+import styles from './styles.css';
+<style>{styles}</style> // ✅ Works
+```
+
+### ✅ Sau (Vite Dev with Plugin):
+
+```typescript
+import styles from './styles.css';
+<style>{styles}</style> // ✅ Works (plugin export CSS as string)
+```
+
+### ✅ CSS từ example app:
+
+```typescript
+// example/src/App.css
+import './App.css'; // ✅ Vite inject vào DOM bình thường
+```
+
+## 🔍 Debug
+
+Nếu vẫn có lỗi CSS, kiểm tra:
+
+```bash
+# 1. Restart dev server
+cd example
+yarn dev
+
+# 2. Clear Vite cache
+rm -rf node_modules/.vite
+yarn dev
+
+# 3. Kiểm tra plugin đang hoạt động
+# Trong browser console, check xem CSS đã được inject chưa
+```
+
+## 📚 Related Files
+
+- `example/vite.config.ts` - Chứa `cssAsStringPlugin`
+- `src/features/ShowroomVisualizer/CssStyles.tsx` - Render CSS as `<style>` tags
+- `rollup.config.js` - PostCSS config của thư viện
+
+---
+
+✅ **Fixed!** CSS từ thư viện giờ được export as strings trong Vite dev mode.

package/example/FIXES_SUMMARY.md

@@ -1,121 +1,131 @@
-# 🎯 Example App - Fixes Summary
-
-## 2 vấn đề đã được fix:
-
----
-
-## 1️⃣ Path Aliases Resolution ✅
-
-### Lỗi:
-```
-[plugin:vite:import-analysis] Failed to resolve import "commons/SkinLayer/components/Drawer"
-```
-
-### Root Cause:
-Thư viện sử dụng `baseUrl: "./src"` cho phép imports:
-```typescript
-import Drawer from 'commons/SkinLayer/components/Drawer';
-```
-
-Example app không biết về aliases này.
-
-### Fix:
-Thêm 10 path aliases vào `vite.config.ts` và `tsconfig.json`:
-- `commons/*`, `components/*`, `constants/*`, `context/*`, `features/*`
-- `hooks/*`, `models/*`, `services/*`, `types/*`, `utils/*`
-
-### Status: ✅ Fixed
-
----
-
-## 2️⃣ CSS Imports as Strings ✅
-
-### Lỗi:
-```
-Uncaught SyntaxError: The requested module '.../actionsChangeSceneStyles.css' 
-does not provide an export named 'default'
-```
-
-### Root Cause:
-- **Thư viện (Rollup)**: CSS exported as strings với `postcss({ inject: false })`
-- **Vite**: Mặc định inject CSS, không export strings
-- **CssStyles.tsx**: Cần CSS as strings để render `<style>{css}</style>`
-
-### Fix:
-Tạo custom Vite plugin `cssAsStringPlugin` với 3 key points:
-
-```typescript
-const cssAsStringPlugin = () => ({
-  name: 'css-as-string',
-  enforce: 'pre', // ⭐ Critical: Run BEFORE other plugins
-  load(id: string) { // ⭐ Use 'load' hook, not 'transform'
-    if (
-      id.endsWith('.css') &&
-      (id.includes('/src/assets/') || id.includes('/@clikvn/'))
-    ) {
-      const cssContent = fs.readFileSync(id, 'utf-8');
-      return `export default ${JSON.stringify(cssContent)}`;
-    }
-  },
-});
-
-// ⭐ Plugin order matters!
-plugins: [cssAsStringPlugin(), react()]
-```
-
-**3 điều quan trọng:**
-1. `enforce: 'pre'` - Chạy trước Vite CSS plugin
-2. `load()` hook - Intercept file loading sớm
-3. Plugin order - Đặt TRƯỚC `react()`
-
-Plugin chỉ xử lý:
-- ✅ CSS từ `/src/assets/` → Export as string
-- ✅ CSS từ `@clikvn/*` packages → Export as string
-- ❌ CSS khác (antd, example CSS) → Vite xử lý bình thường
-
-### Status: ✅ Fixed
-
----
-
-## 📊 Tổng kết
-
-| Issue | Status | Files Changed |
-|-------|--------|---------------|
-| Path Aliases | ✅ Fixed | `vite.config.ts`, `tsconfig.json` |
-| CSS Imports | ✅ Fixed | `vite.config.ts` (plugin) |
-
----
-
-## 🚀 Kết quả
-
-**Example app giờ hoạt động 100%!**
-
-✅ Dev server: http://localhost:3001  
-✅ Import từ `src/` trực tiếp  
-✅ Hot reload  
-✅ Path aliases  
-✅ CSS handling  
-✅ Test custom layout  
-
----
-
-## 📚 Documents
-
-- [PATH_ALIASES.md](./PATH_ALIASES.md) - Chi tiết về path aliases
-- [CSS_HANDLING.md](./CSS_HANDLING.md) - Chi tiết về CSS plugin
-- [CHANGELOG.md](./CHANGELOG.md) - Lịch sử thay đổi
-- [README.md](./README.md) - Hướng dẫn sử dụng
-
----
-
-## 🎉 Ready to Use!
-
-```bash
-cd example
-yarn dev
-
-# Open: http://localhost:3001
-```
-
-Thay đổi code trong `../src/` → Tự động reload! 🔥
-
+# 🎯 Example App - Fixes Summary
+
+## 2 vấn đề đã được fix:
+
+---
+
+## 1️⃣ Path Aliases Resolution ✅
+
+### Lỗi:
+
+```
+[plugin:vite:import-analysis] Failed to resolve import "commons/SkinLayer/components/Drawer"
+```
+
+### Root Cause:
+
+Thư viện sử dụng `baseUrl: "./src"` cho phép imports:
+
+```typescript
+import Drawer from 'commons/SkinLayer/components/Drawer';
+```
+
+Example app không biết về aliases này.
+
+### Fix:
+
+Thêm 10 path aliases vào `vite.config.ts` và `tsconfig.json`:
+
+- `commons/*`, `components/*`, `constants/*`, `context/*`, `features/*`
+- `hooks/*`, `models/*`, `services/*`, `types/*`, `utils/*`
+
+### Status: ✅ Fixed
+
+---
+
+## 2️⃣ CSS Imports as Strings ✅
+
+### Lỗi:
+
+```
+Uncaught SyntaxError: The requested module '.../actionsChangeSceneStyles.css'
+does not provide an export named 'default'
+```
+
+### Root Cause:
+
+- **Thư viện (Rollup)**: CSS exported as strings với `postcss({ inject: false })`
+- **Vite**: Mặc định inject CSS, không export strings
+- **CssStyles.tsx**: Cần CSS as strings để render `<style>{css}</style>`
+
+### Fix:
+
+Tạo custom Vite plugin `cssAsStringPlugin` với 3 key points:
+
+```typescript
+const cssAsStringPlugin = () => ({
+  name: 'css-as-string',
+  enforce: 'pre', // ⭐ Critical: Run BEFORE other plugins
+  load(id: string) {
+    // ⭐ Use 'load' hook, not 'transform'
+    if (
+      id.endsWith('.css') &&
+      (id.includes('/src/assets/') || id.includes('/@clikvn/'))
+    ) {
+      const cssContent = fs.readFileSync(id, 'utf-8');
+      return `export default ${JSON.stringify(cssContent)}`;
+    }
+  },
+});
+
+// ⭐ Plugin order matters!
+plugins: [cssAsStringPlugin(), react()];
+```
+
+**3 điều quan trọng:**
+
+1. `enforce: 'pre'` - Chạy trước Vite CSS plugin
+2. `load()` hook - Intercept file loading sớm
+3. Plugin order - Đặt TRƯỚC `react()`
+
+Plugin chỉ xử lý:
+
+- ✅ CSS từ `/src/assets/` → Export as string
+- ✅ CSS từ `@clikvn/*` packages → Export as string
+- ❌ CSS khác (antd, example CSS) → Vite xử lý bình thường
+
+### Status: ✅ Fixed
+
+---
+
+## 📊 Tổng kết
+
+| Issue        | Status   | Files Changed                     |
+| ------------ | -------- | --------------------------------- |
+| Path Aliases | ✅ Fixed | `vite.config.ts`, `tsconfig.json` |
+| CSS Imports  | ✅ Fixed | `vite.config.ts` (plugin)         |
+
+---
+
+## 🚀 Kết quả
+
+**Example app giờ hoạt động 100%!**
+
+✅ Dev server: http://localhost:3001  
+✅ Import từ `src/` trực tiếp  
+✅ Hot reload  
+✅ Path aliases  
+✅ CSS handling  
+✅ Test custom layout
+
+---
+
+## 📚 Documents
+
+- [PATH_ALIASES.md](./PATH_ALIASES.md) - Chi tiết về path aliases
+- [CSS_HANDLING.md](./CSS_HANDLING.md) - Chi tiết về CSS plugin
+- [CHANGELOG.md](./CHANGELOG.md) - Lịch sử thay đổi
+- [README.md](./README.md) - Hướng dẫn sử dụng
+
+---
+
+## 🎉 Ready to Use!
+
+```bash
+cd example
+yarn dev
+
+# Open: http://localhost:3001
+```
+
+Thay đổi code trong `../src/` → Tự động reload! 🔥