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

package/rollup.config.js

@@ -1,400 +1,400 @@
-/**
- * ============================================================================
- * SHOWROOM VISUALIZER - ROLLUP BUILD CONFIGURATION
- * ============================================================================
- *
- * 🎯 MỤC TIÊU:
- * Tạo ra 2 build outputs phục vụ 2 use cases khác nhau:
- *
- * 1️⃣ NPM Package (dist/index.js) - EXTERNAL REACT
- *    - Dùng React từ host app (Next.js, React apps)
- *    - ✅ Hỗ trợ Custom Layout overrides
- *    - File nhỏ hơn (~1.8MB)
- *    - Use: import { ShowroomVisualizer } from '@clikvn/showroom-visualizer'
- *
- * 2️⃣ Web Component (dist/web.js) - BUNDLED REACT
- *    - Bundle React 19 vào file
- *    - ❌ KHÔNG hỗ trợ custom layout overrides
- *    - File lớn hơn (~2.0MB)
- *    - Use: <script type="module" src="web.js"></script>
- *
- * ────────────────────────────────────────────────────────────────────────────
- *
- * 📊 SO SÁNH:
- *
- * | Feature              | NPM Package | Web Component |
- * |----------------------|-------------|---------------|
- * | React Source         | Host app    | Bundled       |
- * | Custom Layout        | ✅ Yes      | ❌ No         |
- * | File Size            | ~1.8MB      | ~2.0MB        |
- * | Dependencies         | Need React  | Standalone    |
- * | Use Case             | React apps  | Vanilla JS    |
- *
- * ────────────────────────────────────────────────────────────────────────────
- */
-
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import typescript from '@rollup/plugin-typescript';
-import { terser } from 'rollup-plugin-terser';
-import postcss from 'rollup-plugin-postcss';
-import { babel } from '@rollup/plugin-babel';
-import autoprefixer from 'autoprefixer';
-import { typescriptPaths } from 'rollup-plugin-typescript-paths';
-import json from '@rollup/plugin-json';
-import { uglify } from 'rollup-plugin-uglify';
-import replace from 'rollup-plugin-replace';
-import tailwindcss from 'tailwindcss';
-import copy from '@rollup-extras/plugin-copy';
-
-const extensions = ['.ts', '.tsx', '.js'];
-const isDev =
-  process.env.NODE_ENV === 'development' || process.env.ROLLUP_WATCH === 'true';
-
-// ============================================================================
-// CUSTOM PLUGIN: Fix React-DOM Imports
-// ============================================================================
-// React 18's ESM build không export findDOMNode, nhưng CommonJS build có.
-// Plugin này rewrite code để chỉ dùng default import và access properties,
-// tránh Rollup extract named imports.
-const fixReactDomImports = () => ({
-  name: 'fix-react-dom-imports',
-  renderChunk(code) {
-    let fixed = code;
-
-    // Fix invalid variable declarations with dots in the name
-    // This pattern appears in minified code from third-party libraries
-    fixed = fixed.replace(
-      /var\s+_ReactDOM\$ReactDOM__default\.findDOMNode;/g,
-      'var _ReactDOM$findDOMNode;'
-    );
-
-    // Fix all occurrences of the invalid variable name
-    fixed = fixed.replace(
-      /_ReactDOM\$ReactDOM__default\.findDOMNode/g,
-      '_ReactDOM$findDOMNode'
-    );
-
-    // Fix double ReactDOM__default references
-    fixed = fixed.replace(
-      /ReactDOM__default\.ReactDOM__default\./g,
-      'ReactDOM__default.'
-    );
-
-    // Additional fix for similar patterns with other methods
-    fixed = fixed.replace(
-      /var\s+_ReactDOM\$ReactDOM__default\.(\w+);/g,
-      'var _ReactDOM$$1;'
-    );
-
-    // Fix minified code that creates invalid variable names
-    fixed = fixed.replace(
-      /var\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\$([a-zA-Z_$][a-zA-Z0-9_$]*)\.[a-zA-Z_$][a-zA-Z0-9_$]*;/g,
-      function (match, prefix, suffix) {
-        return `var ${prefix}$${suffix}_temp;`;
-      }
-    );
-
-    // First, remove any findDOMNode from named imports
-    fixed = fixed.replace(
-      /import\s*\{([^}]*)\}\s*from\s*['"]react-dom['"]/g,
-      (match, imports) => {
-        if (imports.includes('findDOMNode')) {
-          const cleanedImports = imports
-            .split(',')
-            .map((imp) => imp.trim())
-            .filter((imp) => !imp.includes('findDOMNode'))
-            .join(', ');
-
-          if (cleanedImports.trim()) {
-            return `import { ${cleanedImports} } from 'react-dom'`;
-          }
-          return '';
-        }
-        return match;
-      }
-    );
-
-    // Handle combined default and named imports
-    fixed = fixed.replace(
-      /import\s+(\w+),\s*\{\s*([^}]+)\s*\}\s*from\s*['"]react-dom['"]/g,
-      (match, defaultImport, namedImports) => {
-        // Check if named imports contains invalid syntax like "ReactDOM__default.createPortal"
-        if (
-          namedImports.includes('ReactDOM__default.') ||
-          namedImports.includes('findDOMNode')
-        ) {
-          // Extract valid imports only
-          const validImports = namedImports
-            .split(',')
-            .map((imp) => imp.trim())
-            .filter((imp) => {
-              // Remove any import that has dots or includes findDOMNode
-              return !imp.includes('.') && !imp.includes('findDOMNode');
-            })
-            .map((imp) => {
-              // Clean up "as" aliases
-              const parts = imp.split(/\s+as\s+/);
-              if (parts.length === 2 && !parts[0].includes('.')) {
-                return imp;
-              }
-              return '';
-            })
-            .filter(Boolean)
-            .join(', ');
-
-          if (validImports) {
-            return `import ${defaultImport}, { ${validImports} } from 'react-dom'`;
-          }
-          return `import ${defaultImport} from 'react-dom'`;
-        }
-        return match;
-      }
-    );
-
-    // Replace all variations of findDOMNode (but not in function declarations)
-    fixed = fixed.replace(/\bfindDOMNode\$?\d*\b/g, (match, offset) => {
-      // Check if this is a function declaration
-      const beforeMatch = fixed.substring(Math.max(0, offset - 20), offset);
-      if (beforeMatch.trim().endsWith('function')) {
-        return match; // Don't replace in function declarations
-      }
-      return 'ReactDOM__default.findDOMNode';
-    });
-
-    // Fix property access patterns
-    fixed = fixed.replace(/(\w+)\.findDOMNode\b/g, (match, obj) => {
-      if (obj === 'ReactDOM__default') return match;
-      return 'ReactDOM__default.findDOMNode';
-    });
-
-    // Replace other methods - but NOT when they're being used in import statements
-    const methodsToReplace = [
-      'createPortal',
-      'unstable_batchedUpdates',
-      'flushSync',
-    ];
-
-    methodsToReplace.forEach((method) => {
-      // Only replace when not in import context
-      const regex = new RegExp(
-        `\\b${method}\\$?\\d*\\b(?![:\\.]|\\s*as\\s*\\w+)`,
-        'g'
-      );
-      fixed = fixed.replace(regex, (match, offset) => {
-        // Check if this is within an import statement
-        const beforeMatch = fixed.substring(Math.max(0, offset - 100), offset);
-        if (beforeMatch.includes('import') && beforeMatch.includes('{')) {
-          return match;
-        }
-        return `ReactDOM__default.${method}`;
-      });
-    });
-
-    return { code: fixed, map: null };
-  },
-});
-
-// ============================================================================
-// CONFIG CHO NPM PACKAGE - External React
-// ============================================================================
-// Dùng khi: import { ShowroomVisualizer } from '@clikvn/showroom-visualizer'
-// - React được external → Dùng React version của host app (Next.js, React app)
-// - Cho phép custom layout overrides vì share cùng React instance
-// - File nhỏ hơn vì không bundle React
-const indexConfig = {
-  context: 'this',
-
-  // ✅ External React - Library sẽ dùng React từ host app
-  external: ['react', 'react-dom', 'react/jsx-runtime', 'react-dom/client'],
-
-  onwarn(warning, warn) {
-    // Bỏ qua warning về "use client" directive
-    if (
-      warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
-      warning.message.includes('"use client"')
-    ) {
-      return;
-    }
-    // Hiển thị các warning khác
-    warn(warning);
-  },
-  plugins: [
-    resolve({
-      extensions,
-      browser: true,
-      preferBuiltins: false,
-      dedupe: [
-        'react',
-        'react-dom',
-        'useTranslation',
-        'i18n',
-        'I18nextProvider',
-      ],
-    }),
-    commonjs({
-      esmExternals: true,
-      requireReturnsDefault: 'auto',
-      // Không extract named imports từ external modules
-      ignoreDynamicRequires: false,
-    }),
-    // Skip uglify in dev mode - tốn thời gian
-    // uglify does not support ES2015+ properly — and React’s ESM builds rely heavily on ES2015+ semantics
-    // !isDev && uglify(),
-    json(),
-    // Skip babel in dev mode - giảm thời gian compile
-    !isDev &&
-      babel({
-        babelHelpers: 'bundled',
-        exclude: 'node_modules/**',
-        extensions,
-      }),
-    replace({
-      'process.env.NODE_ENV': JSON.stringify(
-        isDev ? 'development' : 'production'
-      ),
-    }),
-    postcss({
-      plugins: [autoprefixer(), tailwindcss()],
-      extract: false,
-      modules: false,
-      autoModules: false,
-      minimize: !isDev, // Skip minify CSS trong dev
-      inject: false,
-    }),
-    typescript({
-      sourceMap: isDev, // Source map chỉ trong dev
-      inlineSources: isDev,
-    }),
-    typescriptPaths({ preserveExtensions: true }),
-    // Skip terser trong dev - tốn rất nhiều thời gian
-    !isDev && terser({ output: { comments: false } }),
-    // ⚠️ QUAN TRỌNG: Fix react-dom imports sau khi bundle
-    // Phải đặt ở cuối để chạy sau tất cả transformations
-    fixReactDomImports(),
-  ].filter(Boolean), // Remove false values
-};
-
-// ============================================================================
-// CONFIG CHO WEB COMPONENT - Bundled React
-// ============================================================================
-// Dùng khi: <script src="web.js"> hoặc dynamic import('web.js')
-// - React được BUNDLE vào → Standalone, không cần dependencies
-// - KHÔNG hỗ trợ custom layout overrides (vì khác React instance với host app)
-// - File lớn hơn vì bundle React (~200KB extra)
-// - Phù hợp cho vanilla JS/HTML projects
-const browserConfig = {
-  context: 'this',
-  // ❌ KHÔNG external React - Bundle React version 19 vào file
-  // external: [],  // Không khai báo external = bundle tất cả
-  onwarn: indexConfig.onwarn,
-  plugins: [
-    resolve({
-      browser: true,
-      extensions: ['.ts', '.tsx', '.js'],
-      dedupe: ['react', 'react-dom'],
-      preferBuiltins: false,
-    }),
-
-    commonjs({
-      esmExternals: true,
-      requireReturnsDefault: 'auto',
-    }),
-
-    json(),
-    !isDev &&
-      babel({
-        babelHelpers: 'bundled',
-        extensions: ['.ts', '.tsx', '.js'],
-        exclude: 'node_modules/**',
-      }),
-
-    replace({
-      'process.env.NODE_ENV': JSON.stringify(
-        isDev ? 'development' : 'production'
-      ),
-      preventAssignment: true,
-    }),
-
-    postcss({
-      plugins: [autoprefixer(), tailwindcss()],
-      extract: false,
-      modules: false,
-      autoModules: false,
-      minimize: !isDev,
-      inject: false,
-    }),
-
-    typescript({
-      sourceMap: isDev,
-      inlineSources: isDev,
-    }),
-
-    typescriptPaths({ preserveExtensions: true }),
-    !isDev &&
-      terser({
-        format: { comments: false },
-      }),
-  ].filter(Boolean),
-};
-
-// ============================================================================
-// DUAL BUILD STRATEGY
-// ============================================================================
-const configs = [
-  // ────────────────────────────────────────────────────────────────────────
-  // BUILD 1: NPM Package (dist/index.js)
-  // ────────────────────────────────────────────────────────────────────────
-  // 📦 Sử dụng: import { ShowroomVisualizer } from '@clikvn/showroom-visualizer'
-  //
-  // ✅ Ưu điểm:
-  //    - Dùng React version của host app (Next.js, React app)
-  //    - Cho phép SWIZZLE components (share React instance)
-  //    - File nhỏ (~1.8MB) vì không bundle React
-  //
-  // 📝 Use cases:
-  //    - React/Next.js applications
-  //    - Cần customize components qua custom layout overrides
-  //    - Muốn kiểm soát React version
-  {
-    input: './src/index.ts', // ⭐ IMPORTANT: Do NOT bundle react / react-dom
-    external: ['react', 'react-dom', 'react/jsx-runtime'],
-    output: {
-      file: 'dist/index.js',
-      format: 'esm',
-      inlineDynamicImports: true,
-    },
-    ...indexConfig, // ✅ External React dependencies
-  },
-
-  // ────────────────────────────────────────────────────────────────────────
-  // BUILD 2: Web Component (dist/web.js)
-  // ────────────────────────────────────────────────────────────────────────
-  // 🌐 Sử dụng: <script type="module" src="web.js"></script>
-  //            hoặc: await import('web.js')
-  //
-  // ✅ Ưu điểm:
-  //    - Standalone, không cần install dependencies
-  //    - Hoạt động trong vanilla JS/HTML
-  //    - Không cần build tools
-  //
-  // ❌ Hạn chế:
-  //    - KHÔNG hỗ trợ custom layout overrides (khác React instance)
-  //    - File lớn hơn (~2.0MB) vì bundle React
-  //
-  // 📝 Use cases:
-  //    - Vanilla JS/HTML projects
-  //    - Không cần customize UI
-  //    - Quick integration
-  {
-    input: './src/web.ts',
-    output: {
-      file: 'dist/web.js',
-      format: 'esm',
-      inlineDynamicImports: true,
-    },
-    ...browserConfig, // ✅ Bundle React version 19
-  },
-];
-
-export default configs;
+/**
+ * ============================================================================
+ * SHOWROOM VISUALIZER - ROLLUP BUILD CONFIGURATION
+ * ============================================================================
+ *
+ * 🎯 MỤC TIÊU:
+ * Tạo ra 2 build outputs phục vụ 2 use cases khác nhau:
+ *
+ * 1️⃣ NPM Package (dist/index.js) - EXTERNAL REACT
+ *    - Dùng React từ host app (Next.js, React apps)
+ *    - ✅ Hỗ trợ Custom Layout overrides
+ *    - File nhỏ hơn (~1.8MB)
+ *    - Use: import { ShowroomVisualizer } from '@clikvn/showroom-visualizer'
+ *
+ * 2️⃣ Web Component (dist/web.js) - BUNDLED REACT
+ *    - Bundle React 19 vào file
+ *    - ❌ KHÔNG hỗ trợ custom layout overrides
+ *    - File lớn hơn (~2.0MB)
+ *    - Use: <script type="module" src="web.js"></script>
+ *
+ * ────────────────────────────────────────────────────────────────────────────
+ *
+ * 📊 SO SÁNH:
+ *
+ * | Feature              | NPM Package | Web Component |
+ * |----------------------|-------------|---------------|
+ * | React Source         | Host app    | Bundled       |
+ * | Custom Layout        | ✅ Yes      | ❌ No         |
+ * | File Size            | ~1.8MB      | ~2.0MB        |
+ * | Dependencies         | Need React  | Standalone    |
+ * | Use Case             | React apps  | Vanilla JS    |
+ *
+ * ────────────────────────────────────────────────────────────────────────────
+ */
+
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import { terser } from 'rollup-plugin-terser';
+import postcss from 'rollup-plugin-postcss';
+import { babel } from '@rollup/plugin-babel';
+import autoprefixer from 'autoprefixer';
+import { typescriptPaths } from 'rollup-plugin-typescript-paths';
+import json from '@rollup/plugin-json';
+import { uglify } from 'rollup-plugin-uglify';
+import replace from 'rollup-plugin-replace';
+import tailwindcss from 'tailwindcss';
+import copy from '@rollup-extras/plugin-copy';
+
+const extensions = ['.ts', '.tsx', '.js'];
+const isDev =
+  process.env.NODE_ENV === 'development' || process.env.ROLLUP_WATCH === 'true';
+
+// ============================================================================
+// CUSTOM PLUGIN: Fix React-DOM Imports
+// ============================================================================
+// React 18's ESM build không export findDOMNode, nhưng CommonJS build có.
+// Plugin này rewrite code để chỉ dùng default import và access properties,
+// tránh Rollup extract named imports.
+const fixReactDomImports = () => ({
+  name: 'fix-react-dom-imports',
+  renderChunk(code) {
+    let fixed = code;
+
+    // Fix invalid variable declarations with dots in the name
+    // This pattern appears in minified code from third-party libraries
+    fixed = fixed.replace(
+      /var\s+_ReactDOM\$ReactDOM__default\.findDOMNode;/g,
+      'var _ReactDOM$findDOMNode;'
+    );
+
+    // Fix all occurrences of the invalid variable name
+    fixed = fixed.replace(
+      /_ReactDOM\$ReactDOM__default\.findDOMNode/g,
+      '_ReactDOM$findDOMNode'
+    );
+
+    // Fix double ReactDOM__default references
+    fixed = fixed.replace(
+      /ReactDOM__default\.ReactDOM__default\./g,
+      'ReactDOM__default.'
+    );
+
+    // Additional fix for similar patterns with other methods
+    fixed = fixed.replace(
+      /var\s+_ReactDOM\$ReactDOM__default\.(\w+);/g,
+      'var _ReactDOM$$1;'
+    );
+
+    // Fix minified code that creates invalid variable names
+    fixed = fixed.replace(
+      /var\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\$([a-zA-Z_$][a-zA-Z0-9_$]*)\.[a-zA-Z_$][a-zA-Z0-9_$]*;/g,
+      function (match, prefix, suffix) {
+        return `var ${prefix}$${suffix}_temp;`;
+      }
+    );
+
+    // First, remove any findDOMNode from named imports
+    fixed = fixed.replace(
+      /import\s*\{([^}]*)\}\s*from\s*['"]react-dom['"]/g,
+      (match, imports) => {
+        if (imports.includes('findDOMNode')) {
+          const cleanedImports = imports
+            .split(',')
+            .map((imp) => imp.trim())
+            .filter((imp) => !imp.includes('findDOMNode'))
+            .join(', ');
+
+          if (cleanedImports.trim()) {
+            return `import { ${cleanedImports} } from 'react-dom'`;
+          }
+          return '';
+        }
+        return match;
+      }
+    );
+
+    // Handle combined default and named imports
+    fixed = fixed.replace(
+      /import\s+(\w+),\s*\{\s*([^}]+)\s*\}\s*from\s*['"]react-dom['"]/g,
+      (match, defaultImport, namedImports) => {
+        // Check if named imports contains invalid syntax like "ReactDOM__default.createPortal"
+        if (
+          namedImports.includes('ReactDOM__default.') ||
+          namedImports.includes('findDOMNode')
+        ) {
+          // Extract valid imports only
+          const validImports = namedImports
+            .split(',')
+            .map((imp) => imp.trim())
+            .filter((imp) => {
+              // Remove any import that has dots or includes findDOMNode
+              return !imp.includes('.') && !imp.includes('findDOMNode');
+            })
+            .map((imp) => {
+              // Clean up "as" aliases
+              const parts = imp.split(/\s+as\s+/);
+              if (parts.length === 2 && !parts[0].includes('.')) {
+                return imp;
+              }
+              return '';
+            })
+            .filter(Boolean)
+            .join(', ');
+
+          if (validImports) {
+            return `import ${defaultImport}, { ${validImports} } from 'react-dom'`;
+          }
+          return `import ${defaultImport} from 'react-dom'`;
+        }
+        return match;
+      }
+    );
+
+    // Replace all variations of findDOMNode (but not in function declarations)
+    fixed = fixed.replace(/\bfindDOMNode\$?\d*\b/g, (match, offset) => {
+      // Check if this is a function declaration
+      const beforeMatch = fixed.substring(Math.max(0, offset - 20), offset);
+      if (beforeMatch.trim().endsWith('function')) {
+        return match; // Don't replace in function declarations
+      }
+      return 'ReactDOM__default.findDOMNode';
+    });
+
+    // Fix property access patterns
+    fixed = fixed.replace(/(\w+)\.findDOMNode\b/g, (match, obj) => {
+      if (obj === 'ReactDOM__default') return match;
+      return 'ReactDOM__default.findDOMNode';
+    });
+
+    // Replace other methods - but NOT when they're being used in import statements
+    const methodsToReplace = [
+      'createPortal',
+      'unstable_batchedUpdates',
+      'flushSync',
+    ];
+
+    methodsToReplace.forEach((method) => {
+      // Only replace when not in import context
+      const regex = new RegExp(
+        `\\b${method}\\$?\\d*\\b(?![:\\.]|\\s*as\\s*\\w+)`,
+        'g'
+      );
+      fixed = fixed.replace(regex, (match, offset) => {
+        // Check if this is within an import statement
+        const beforeMatch = fixed.substring(Math.max(0, offset - 100), offset);
+        if (beforeMatch.includes('import') && beforeMatch.includes('{')) {
+          return match;
+        }
+        return `ReactDOM__default.${method}`;
+      });
+    });
+
+    return { code: fixed, map: null };
+  },
+});
+
+// ============================================================================
+// CONFIG CHO NPM PACKAGE - External React
+// ============================================================================
+// Dùng khi: import { ShowroomVisualizer } from '@clikvn/showroom-visualizer'
+// - React được external → Dùng React version của host app (Next.js, React app)
+// - Cho phép custom layout overrides vì share cùng React instance
+// - File nhỏ hơn vì không bundle React
+const indexConfig = {
+  context: 'this',
+
+  // ✅ External React - Library sẽ dùng React từ host app
+  external: ['react', 'react-dom', 'react/jsx-runtime', 'react-dom/client'],
+
+  onwarn(warning, warn) {
+    // Bỏ qua warning về "use client" directive
+    if (
+      warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
+      warning.message.includes('"use client"')
+    ) {
+      return;
+    }
+    // Hiển thị các warning khác
+    warn(warning);
+  },
+  plugins: [
+    resolve({
+      extensions,
+      browser: true,
+      preferBuiltins: false,
+      dedupe: [
+        'react',
+        'react-dom',
+        'useTranslation',
+        'i18n',
+        'I18nextProvider',
+      ],
+    }),
+    commonjs({
+      esmExternals: true,
+      requireReturnsDefault: 'auto',
+      // Không extract named imports từ external modules
+      ignoreDynamicRequires: false,
+    }),
+    // Skip uglify in dev mode - tốn thời gian
+    // uglify does not support ES2015+ properly — and React’s ESM builds rely heavily on ES2015+ semantics
+    // !isDev && uglify(),
+    json(),
+    // Skip babel in dev mode - giảm thời gian compile
+    !isDev &&
+      babel({
+        babelHelpers: 'bundled',
+        exclude: 'node_modules/**',
+        extensions,
+      }),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify(
+        isDev ? 'development' : 'production'
+      ),
+    }),
+    postcss({
+      plugins: [autoprefixer(), tailwindcss()],
+      extract: false,
+      modules: false,
+      autoModules: false,
+      minimize: !isDev, // Skip minify CSS trong dev
+      inject: false,
+    }),
+    typescript({
+      sourceMap: isDev, // Source map chỉ trong dev
+      inlineSources: isDev,
+    }),
+    typescriptPaths({ preserveExtensions: true }),
+    // Skip terser trong dev - tốn rất nhiều thời gian
+    !isDev && terser({ output: { comments: false } }),
+    // ⚠️ QUAN TRỌNG: Fix react-dom imports sau khi bundle
+    // Phải đặt ở cuối để chạy sau tất cả transformations
+    fixReactDomImports(),
+  ].filter(Boolean), // Remove false values
+};
+
+// ============================================================================
+// CONFIG CHO WEB COMPONENT - Bundled React
+// ============================================================================
+// Dùng khi: <script src="web.js"> hoặc dynamic import('web.js')
+// - React được BUNDLE vào → Standalone, không cần dependencies
+// - KHÔNG hỗ trợ custom layout overrides (vì khác React instance với host app)
+// - File lớn hơn vì bundle React (~200KB extra)
+// - Phù hợp cho vanilla JS/HTML projects
+const browserConfig = {
+  context: 'this',
+  // ❌ KHÔNG external React - Bundle React version 19 vào file
+  // external: [],  // Không khai báo external = bundle tất cả
+  onwarn: indexConfig.onwarn,
+  plugins: [
+    resolve({
+      browser: true,
+      extensions: ['.ts', '.tsx', '.js'],
+      dedupe: ['react', 'react-dom'],
+      preferBuiltins: false,
+    }),
+
+    commonjs({
+      esmExternals: true,
+      requireReturnsDefault: 'auto',
+    }),
+
+    json(),
+    !isDev &&
+      babel({
+        babelHelpers: 'bundled',
+        extensions: ['.ts', '.tsx', '.js'],
+        exclude: 'node_modules/**',
+      }),
+
+    replace({
+      'process.env.NODE_ENV': JSON.stringify(
+        isDev ? 'development' : 'production'
+      ),
+      preventAssignment: true,
+    }),
+
+    postcss({
+      plugins: [autoprefixer(), tailwindcss()],
+      extract: false,
+      modules: false,
+      autoModules: false,
+      minimize: !isDev,
+      inject: false,
+    }),
+
+    typescript({
+      sourceMap: isDev,
+      inlineSources: isDev,
+    }),
+
+    typescriptPaths({ preserveExtensions: true }),
+    !isDev &&
+      terser({
+        format: { comments: false },
+      }),
+  ].filter(Boolean),
+};
+
+// ============================================================================
+// DUAL BUILD STRATEGY
+// ============================================================================
+const configs = [
+  // ────────────────────────────────────────────────────────────────────────
+  // BUILD 1: NPM Package (dist/index.js)
+  // ────────────────────────────────────────────────────────────────────────
+  // 📦 Sử dụng: import { ShowroomVisualizer } from '@clikvn/showroom-visualizer'
+  //
+  // ✅ Ưu điểm:
+  //    - Dùng React version của host app (Next.js, React app)
+  //    - Cho phép SWIZZLE components (share React instance)
+  //    - File nhỏ (~1.8MB) vì không bundle React
+  //
+  // 📝 Use cases:
+  //    - React/Next.js applications
+  //    - Cần customize components qua custom layout overrides
+  //    - Muốn kiểm soát React version
+  {
+    input: './src/index.ts', // ⭐ IMPORTANT: Do NOT bundle react / react-dom
+    external: ['react', 'react-dom', 'react/jsx-runtime'],
+    output: {
+      file: 'dist/index.js',
+      format: 'esm',
+      inlineDynamicImports: true,
+    },
+    ...indexConfig, // ✅ External React dependencies
+  },
+
+  // ────────────────────────────────────────────────────────────────────────
+  // BUILD 2: Web Component (dist/web.js)
+  // ────────────────────────────────────────────────────────────────────────
+  // 🌐 Sử dụng: <script type="module" src="web.js"></script>
+  //            hoặc: await import('web.js')
+  //
+  // ✅ Ưu điểm:
+  //    - Standalone, không cần install dependencies
+  //    - Hoạt động trong vanilla JS/HTML
+  //    - Không cần build tools
+  //
+  // ❌ Hạn chế:
+  //    - KHÔNG hỗ trợ custom layout overrides (khác React instance)
+  //    - File lớn hơn (~2.0MB) vì bundle React
+  //
+  // 📝 Use cases:
+  //    - Vanilla JS/HTML projects
+  //    - Không cần customize UI
+  //    - Quick integration
+  {
+    input: './src/web.ts',
+    output: {
+      file: 'dist/web.js',
+      format: 'esm',
+      inlineDynamicImports: true,
+    },
+    ...browserConfig, // ✅ Bundle React version 19
+  },
+];
+
+export default configs;