@clikvn/showroom-visualizer 0.4.1-dev-02 → 0.4.1-dev-04

package/example/CSS_HANDLING.md

@@ -14,9 +14,9 @@ Thư viện sử dụng Rollup với PostCSS plugin config:
 
 ```javascript
 postcss({
-  inject: false,  // ← Không inject CSS vào DOM
+  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:
@@ -66,10 +66,11 @@ const cssAsStringPlugin = () => ({
 });
 
 // Plugin order matters!
-plugins: [cssAsStringPlugin(), react()]
+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()`
@@ -138,4 +139,3 @@ yarn dev
 ---
 
 ✅ **Fixed!** CSS từ thư viện giờ được export as strings trong Vite dev mode.
-

package/example/FIXES_SUMMARY.md

@@ -7,12 +7,15 @@
 ## 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';
 ```
@@ -20,7 +23,9 @@ 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/*`
 
@@ -31,24 +36,28 @@ Thêm 10 path aliases vào `vite.config.ts` và `tsconfig.json`:
 ## 2️⃣ CSS Imports as Strings ✅
 
 ### Lỗi:
+
 ```
-Uncaught SyntaxError: The requested module '.../actionsChangeSceneStyles.css' 
+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'
+  load(id: string) {
+    // ⭐ Use 'load' hook, not 'transform'
     if (
       id.endsWith('.css') &&
       (id.includes('/src/assets/') || id.includes('/@clikvn/'))
@@ -60,15 +69,17 @@ const cssAsStringPlugin = () => ({
 });
 
 // ⭐ Plugin order matters!
-plugins: [cssAsStringPlugin(), react()]
+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
@@ -79,10 +90,10 @@ Plugin chỉ xử lý:
 
 ## 📊 Tổng kết
 
-| Issue | Status | Files Changed |
-|-------|--------|---------------|
+| Issue        | Status   | Files Changed                     |
+| ------------ | -------- | --------------------------------- |
 | Path Aliases | ✅ Fixed | `vite.config.ts`, `tsconfig.json` |
-| CSS Imports | ✅ Fixed | `vite.config.ts` (plugin) |
+| CSS Imports  | ✅ Fixed | `vite.config.ts` (plugin)         |
 
 ---
 
@@ -95,7 +106,7 @@ Plugin chỉ xử lý:
 ✅ Hot reload  
 ✅ Path aliases  
 ✅ CSS handling  
-✅ Test custom layout  
+✅ Test custom layout
 
 ---
 
@@ -118,4 +129,3 @@ yarn dev
 ```
 
 Thay đổi code trong `../src/` → Tự động reload! 🔥
-

package/example/PATH_ALIASES.md

@@ -46,7 +46,7 @@ resolve: {
       "commons": ["../src/commons"],
       "commons/*": ["../src/commons/*"],
       "components": ["../src/components"],
-      "components/*": ["../src/components/*"],
+      "components/*": ["../src/components/*"]
       // ... các aliases khác
     }
   }
@@ -55,18 +55,18 @@ resolve: {
 
 ## Các Aliases Được Hỗ Trợ
 
-| Alias | Trỏ đến | Ví dụ |
-|-------|---------|-------|
-| `commons/*` | `../src/commons/*` | `import Drawer from 'commons/SkinLayer/components/Drawer'` |
-| `components/*` | `../src/components/*` | `import Layout from 'components/SkinLayer/Layout'` |
-| `constants/*` | `../src/constants/*` | `import { WIDTH_SLIDE_IN } from 'constants/SkinLayer'` |
-| `context/*` | `../src/context/*` | `import { useCustomLayout } from 'context/CustomLayoutContext'` |
-| `features/*` | `../src/features/*` | `import Visualizer from 'features/ShowroomVisualizer'` |
-| `hooks/*` | `../src/hooks/*` | `import { useStore } from 'hooks/useStore'` |
-| `models/*` | `../src/models/*` | `import PoiItemInfo from 'models/Visualizer/Poi/PoiItemInfo'` |
-| `services/*` | `../src/services/*` | `import ApiService from 'services/Visualizer/ApiService'` |
-| `types/*` | `../src/types/*` | `import { CustomLayoutConfig } from 'types/custom-layout'` |
-| `utils/*` | `../src/utils/*` | `import { formatDate } from 'utils/Visualizer/date'` |
+| Alias          | Trỏ đến               | Ví dụ                                                           |
+| -------------- | --------------------- | --------------------------------------------------------------- |
+| `commons/*`    | `../src/commons/*`    | `import Drawer from 'commons/SkinLayer/components/Drawer'`      |
+| `components/*` | `../src/components/*` | `import Layout from 'components/SkinLayer/Layout'`              |
+| `constants/*`  | `../src/constants/*`  | `import { WIDTH_SLIDE_IN } from 'constants/SkinLayer'`          |
+| `context/*`    | `../src/context/*`    | `import { useCustomLayout } from 'context/CustomLayoutContext'` |
+| `features/*`   | `../src/features/*`   | `import Visualizer from 'features/ShowroomVisualizer'`          |
+| `hooks/*`      | `../src/hooks/*`      | `import { useStore } from 'hooks/useStore'`                     |
+| `models/*`     | `../src/models/*`     | `import PoiItemInfo from 'models/Visualizer/Poi/PoiItemInfo'`   |
+| `services/*`   | `../src/services/*`   | `import ApiService from 'services/Visualizer/ApiService'`       |
+| `types/*`      | `../src/types/*`      | `import { CustomLayoutConfig } from 'types/custom-layout'`      |
+| `utils/*`      | `../src/utils/*`      | `import { formatDate } from 'utils/Visualizer/date'`            |
 
 ## ⚠️ Lưu ý
 
@@ -100,4 +100,3 @@ cat example/tsconfig.json
 ---
 
 ✅ Đã cấu hình xong! Example app giờ có thể import từ source code giống như thư viện chính.
-

package/example/README.md

@@ -61,4 +61,3 @@ Nên bạn có thể import như thật:
 ```typescript
 import { ShowroomVisualizer } from '@clikvn/showroom-visualizer';
 ```
-

package/example/index.html

@@ -10,4 +10,3 @@
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
-

package/example/postcss.config.cjs

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+};

package/example/tsconfig.node.json

@@ -9,4 +9,3 @@
   },
   "include": ["vite.config.ts"]
 }
-

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clikvn/showroom-visualizer",
   "description": "Showroom Visualizer",
-  "version": "0.4.1-dev-02",
+  "version": "0.4.1-dev-04",
   "author": "Clik JSC",
   "license": "ISC",
   "type": "module",