dorchaouat · dorchaouat · Jul 3, 2025
diff --git a/react/MIGRATION_SUMMARY.md b/react/MIGRATION_SUMMARY.md
@@ -0,0 +1,94 @@
+# Webpack to Vite Migration Summary
+
+This document outlines the migration of the React custom element project from webpack to Vite.
+
+## Changes Made
+
+### 1. Package.json Updates
+
+**Scripts Changed:**
+- `start`: Changed from `custom-element-flow start` to `vite`
+- `build`: Changed from `custom-element-flow build` to `vite build`
+- Added `dev`, `preview`, and `serve` scripts for better development workflow
+
+**Dependencies Updated:**
+- **Removed:** `webpack`, `webpack-cli`, `ts-loader`, `css-loader`, `sass-loader`, `style-loader`, `css-modules-typescript-loader`, `custom-element-flow`
+- **Added:** `vite`, `@vitejs/plugin-react`, `glob`, `@types/node`
+- **Updated:** React from 16.13.0 to 18.2.0, TypeScript from 4.6.0 to 5.2.0
+
+### 2. Configuration Files
+
+**webpack.config.js → vite.config.ts:**
+- Replaced webpack configuration with Vite configuration
+- Maintained support for multiple entry points (dynamic component discovery)
+- Configured CSS modules with SCSS support
+- Set output directory to `dist/statics/scripts` to match existing structure
+
+**tsconfig.json Updates:**
+- Updated for modern TypeScript and ES2020 targets
+- Changed JSX handling from "react" to "react-jsx" for React 18
+- Added Vite-specific settings and path mapping
+- Updated module resolution to "bundler" for better Vite compatibility
+
+### 3. File Structure Changes
+
+**SCSS Modules:**
+- Renamed `Style.scss` to `Style.module.scss` for proper Vite CSS modules recognition
+- Updated corresponding TypeScript definition file
+
+**Component Updates:**
+- Updated React component to use proper TypeScript interfaces
+- Changed import syntax from CommonJS to ES modules
+- Removed duplicate PropTypes definition
+
+**Development Setup:**
+- Added `index.html` for Vite development server
+- Includes example usage of the custom elements
+
+### 4. Build Output
+
+The migration maintains the same build output structure:
+- Main bundles: `dist/statics/scripts/[component-name].bundle.js`
+- CSS assets: `dist/statics/scripts/assets/[name]-[hash].css`
+
+## Development Workflow
+
+### Before (Webpack)
+```bash
+npm start          # custom-element-flow start
+npm run build      # custom-element-flow build
+```
+
+### After (Vite)
+```bash
+npm run dev        # Start Vite dev server
+npm run build      # Build with Vite
+npm run preview    # Preview production build
+npm run serve      # Serve built files with Express
+```
+
+## Benefits of Migration
+
+1. **Faster Development:** Vite's HMR (Hot Module Replacement) is significantly faster than webpack
+2. **Modern Tooling:** Better TypeScript support and modern JavaScript features
+3. **Simplified Configuration:** Less complex configuration compared to webpack
+4. **Better Performance:** Faster builds and smaller bundle sizes
+5. **Active Maintenance:** Vite is actively maintained with regular updates
+
+## Compatibility Notes
+
+- React upgraded from 16.13.0 to 18.2.0 - components should be tested for any breaking changes
+- CSS modules now use Vite's built-in support instead of webpack loaders
+- The custom-element-flow specific scripts (add:component, update:settings) need to be reimplemented for Vite
+
+## Known Issues
+
+- SCSS deprecation warnings (lighten/darken functions) - these are warnings from Sass itself, not related to the migration
+- Custom component addition and settings update scripts are currently placeholder messages
+
+## Next Steps
+
+1. Test all custom elements thoroughly in both development and production
+2. Implement custom scripts for component addition and settings updates for Vite
+3. Consider updating SCSS to use modern color functions to eliminate deprecation warnings
+4. Set up any required CI/CD pipeline updates for the new build process
diff --git a/react/index.html b/react/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Custom Elements Development</title>
+  </head>
+  <body>
+    <h1>Custom Elements Development</h1>
+    <p>This page is for developing and testing custom elements.</p>
+
+    <!-- Example usage of the first-widget custom element -->
+    <div style="margin: 20px 0;">
+      <h2>First Widget Example:</h2>
+      <first-widget 
+        wixconfig='{"some": "config"}' 
+        wixsettings='{"some": "settings"}'
+      ></first-widget>
+    </div>
+
+    <!-- Load the custom element -->
+    <script type="module" src="/src/components/first-widget/index.ts"></script>
+  </body>
+</html>
diff --git a/react/package.json b/react/package.json
@@ -8,10 +8,13 @@
     "email": "author@email.com"
   },
   "scripts": {
-    "start": "custom-element-flow start",
-    "build": "custom-element-flow build",
-    "add:component": "custom-element-flow add",
-    "update:settings": "custom-element-flow update",
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "serve": "node dev/server.js",
+    "add:component": "echo 'Component addition script needs to be updated for Vite'",
+    "update:settings": "echo 'Settings update script needs to be updated for Vite'",
     "lint": ":",
     "test": ":"
   },
@@ -20,33 +23,29 @@
   },
   "devDependencies": {
     "@types/jest": "^27.4.0",
-    "@types/react": "^16.9.15",
-    "@types/react-dom": "^18.0.11",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "glob": "^10.3.0",
     "prettier": "2.8.7",
-    "ts-loader": "^9.4.2",
-    "typescript": "~4.6.0",
-    "webpack-cli": "^5.0.1"
+    "typescript": "~5.2.0",
+    "vite": "^5.0.0"
   },
   "dependencies": {
     "axios": "^1.3.4",
     "chalk": "4",
     "cors": "^2.8.5",
-    "css-loader": "^6.7.3",
-    "css-modules-typescript-loader": "^4.0.1",
-    "custom-element-flow": "^1.0.96",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
     "inquirer": "8",
     "node-fetch": "2",
     "nodemon": "^2.0.22",
     "prop-types": "^15.8.1",
-    "react": "~16.13.0",
-    "react-dom": "~16.13.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-to-webcomponent": "^1.7.3",
     "sass": "^1.60.0",
-    "sass-loader": "^12.6.0",
-    "shelljs": "^0.8.5",
-    "style-loader": "^2.0.0",
-    "webpack": "^5.76.2"
+    "shelljs": "^0.8.5"
   }
 }
diff --git a/react/src/components/first-widget/Style.scss → ...components/first-widget/Style.module.scss b/react/src/components/first-widget/Style.scss → ...components/first-widget/Style.module.scss
diff --git a/...c/components/first-widget/Style.scss.d.ts → ...nents/first-widget/Style.module.scss.d.ts b/...c/components/first-widget/Style.scss.d.ts → ...nents/first-widget/Style.module.scss.d.ts
diff --git a/react/src/components/first-widget/component.tsx b/react/src/components/first-widget/component.tsx
@@ -2,17 +2,22 @@ import React from "react";
 import PropTypes from "prop-types";
 import { IWixSettings } from "./.settings.type";
 import { IWixconfig } from "../../types";
-import s from "./Style.scss";
+import s from "./Style.module.scss";
 
-export class WeatherComponent extends React.Component {
-  static propTypes: {
-    wixconfig: PropTypes.Validator<string>;
-    wixsettings: PropTypes.Validator<string>;
+interface WeatherComponentProps {
+  wixconfig: string;
+  wixsettings: string;
+}
+
+export class WeatherComponent extends React.Component<WeatherComponentProps> {
+  static propTypes = {
+    wixconfig: PropTypes.string.isRequired,
+    wixsettings: PropTypes.string.isRequired,
   };
 
   state: { wixConfig: IWixconfig; wixSettings: IWixSettings };
 
-  constructor(props) {
+  constructor(props: WeatherComponentProps) {
     super(props);
 
     this.state = {
@@ -45,7 +50,4 @@ export class WeatherComponent extends React.Component {
   }
 }
 
-WeatherComponent.propTypes = {
-  wixconfig: PropTypes.string.isRequired,
-  wixsettings: PropTypes.string.isRequired,
-};
+
diff --git a/react/src/components/first-widget/index.ts b/react/src/components/first-widget/index.ts
@@ -1,8 +1,8 @@
 import reactToWebComponent from "react-to-webcomponent";
 import { WeatherComponent } from "./component";
+import React from "react";
+import ReactDOM from "react-dom";
 
-const React = require("react");
-const ReactDOM = require("react-dom");
 const MyComp = reactToWebComponent(WeatherComponent, React, ReactDOM);
 
 customElements.define("first-widget", MyComp);
diff --git a/react/tsconfig.json b/react/tsconfig.json
@@ -1,15 +1,40 @@
 {
   "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
     "esModuleInterop": true,
-    "jsx": "react",
-    "lib": ["es2017", "dom"],
-    "module": "commonjs",
-    "target": "es2018",
-    "outDir": "./dist/statics",
-    "types": ["jest", "node"],
+    "allowSyntheticDefaultImports": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Additional */
+    "types": ["jest", "node", "vite/client"],
     "typeRoots": ["./node_modules/@types"],
-    "skipLibCheck": true
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
-  "include": ["src/**/*.ts", "src/components/first-widget/.settings.type.ts"],
-  "exclude": ["**/*.spec.ts"]
+  "include": [
+    "src/**/*.ts", 
+    "src/**/*.tsx", 
+    "vite.config.ts",
+    "src/components/first-widget/.settings.type.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "node_modules", "dist"]
 }
diff --git a/react/vite.config.ts b/react/vite.config.ts
@@ -0,0 +1,45 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+import { glob } from 'glob'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  css: {
+    modules: {
+      localsConvention: 'camelCase',
+      generateScopedName: '[name]__[local]___[hash:base64:5]'
+    }
+  },
+  build: {
+    outDir: 'dist/statics/scripts',
+    rollupOptions: {
+      input: (() => {
+        const entries = {}
+        const files = glob.sync('./src/components/*/index.ts')
+        files.forEach((file) => {
+          const name = file.split('/').slice(-2, -1)[0]
+          entries[name] = resolve(__dirname, file)
+        })
+        return entries
+      })(),
+      output: {
+        entryFileNames: '[name].bundle.js',
+        chunkFileNames: 'chunks/[name]-[hash].js',
+        assetFileNames: 'assets/[name]-[hash][extname]',
+        format: 'es'
+      }
+    },
+    emptyOutDir: false
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
+  server: {
+    port: 3300,
+    host: true
+  }
+})
diff --git a/react/webpack.config.js b/react/webpack.config.js