🔧(react) adapt script and config to use the watch mode of vite

If we work from an app perspective, it is nice to have a watch mode
on our packages to see the changes in real time. Better to use the
watch mode of vite (rollup) compare to nodemon because it is faster,
we re-transpile only the files that have changed.
Possility to use the wath mode by polling as well, on a remote machine
the HMR does not work well, the polling mode helps to solve this issue.

packages/react/package.json

@@ -26,8 +26,10 @@
   ],
   "scripts": {
     "lint": "eslint . 'src/**/*.{ts,tsx}'",
-    "dev": "yarn storybook & nodemon --watch src --ext '*' --ignore src/cunningham-tokens.ts --ignore src/cunningham-tokens.js --ignore src/cunningham-tokens.css --exec npm run build",
+    "dev": "yarn storybook",
     "build": "bash ./build",
+    "build:watch": "yarn build && vite build --mode watch",
+    "build:watch-polling": "yarn build && vite build --mode watch-polling",
     "build-fonts": "vite build -c vite.fonts.config.ts && rm -rf dist/fonts.js && make-dir dist/sass && cp src/fonts.scss dist/sass/",
     "build-icons": "vite build -c vite.icons.config.ts && rm -rf dist/icons.js && make-dir dist/sass && cp src/icons.scss dist/sass/",
     "build-theme": "cunningham -o src -g css,ts,js",

packages/react/vite.config.ts

@@ -3,61 +3,88 @@ import { defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
 import dts from "vite-plugin-dts";
 import tsconfigPaths from "vite-tsconfig-paths";
+import { BuildOptions } from "vite";
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => {
-  build: {
+  let buildOptions: { watch: BuildOptions["watch"] };
-    emptyOutDir: true,
+  let emptyOutDir = true;
-    outDir: "dist",
+  if (mode.includes("watch")) {
-    sourcemap: true,
+    emptyOutDir = false;
-    lib: {
+    buildOptions = {
-      entry: {
+      watch: {
-        index: "./src/index.ts",
+        include: ["src/**/*"],
       },
-      formats: ["es", "cjs"],
+    };
-    },
+
-    rollupOptions: {
+    if (mode.includes("polling")) {
-      external: ["react", "react-dom"],
+      buildOptions = {
-      output: {
+        watch: {
-        globals: {
+          ...buildOptions.watch,
-          react: "React",
+          chokidar: {
-          "react-dom": "ReactDOM",
+            usePolling: true,
+            interval: 1000,
+          },
+        },
+      };
+    }
+  }
+
+  return {
+    build: {
+      emptyOutDir,
+      outDir: "dist",
+      sourcemap: true,
+      lib: {
+        entry: {
+          index: "./src/index.ts",
+        },
+        formats: ["es", "cjs"],
+      },
+      rollupOptions: {
+        external: ["react", "react-dom"],
+        output: {
+          globals: {
+            react: "React",
+            "react-dom": "ReactDOM",
+          },
         },
       },
+      ...buildOptions,
     },
-  },
+    plugins: [
-  plugins: [
+      tsconfigPaths(),
-    tsconfigPaths(),
+      dts({
-    dts({
+        rollupTypes: true,
-      rollupTypes: true,
+        beforeWriteFile: (filePath, content) => {
-      beforeWriteFile: (filePath, content) => {
+          return {
-        return {
+            filePath,
-          filePath,
+            content: content.replace("../../locales", "./locales"),
-          content: content.replace("../../locales", "./locales"),
+          };
-        };
+        },
-      },
+      }),
-    }),
+      react(),
-    react(),
-  ],
-  test: {
-    environment: "jsdom",
-    reporters: "verbose",
-    globals: true,
-    watchExclude: ["**/cunningham-tokens.js"],
-    coverage: {
-      all: true,
-      include: ["src/**/*.{ts,tsx}"],
-      exclude: ["**/*.stories.tsx", "**/*.spec.tsx"],
-    },
-    globalSetup: ["src/tests/Global.ts"],
-    setupFiles: ["src/tests/Setup.ts"],
-  },
-  resolve: {
-    alias: [
-      {
-        find: ":",
-        replacement: resolve(__dirname, "./src"),
-      },
     ],
-  },
+    test: {
+      environment: "jsdom",
+      reporters: "verbose",
+      globals: true,
+      watchExclude: ["**/cunningham-tokens.js"],
+      coverage: {
+        all: true,
+        include: ["src/**/*.{ts,tsx}"],
+        exclude: ["**/*.stories.tsx", "**/*.spec.tsx"],
+      },
+      globalSetup: ["src/tests/Global.ts"],
+      setupFiles: ["src/tests/Setup.ts"],
+    },
+    resolve: {
+      alias: [
+        {
+          find: ":",
+          replacement: resolve(__dirname, "./src"),
+        },
+      ],
+    },
+  };
 });