chore: port Webpack 5 to Vite (WIP)

.npmignore

@@ -12,4 +12,4 @@ preview
 release-canditate.sh
 release.sh
 scripts
-webpack.config.js
+vite.config.js

.storybook/main.ts

@@ -1,16 +1,10 @@
-const path = require("path");
+import type { StorybookConfig } from "@storybook/react-vite";
 
-/** @type { import('@storybook/react-webpack5').StorybookConfig } */
-const config = {
+const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  staticDirs: ["../public"],
   framework: {
-    name: "@storybook/react-webpack5",
-    options: {
-      builder: {
-        useSWC: true,
-      },
-    },
+    name: "@storybook/react-vite",
+    options: {},
   },
   core: {
     disableTelemetry: true,
@@ -19,39 +13,6 @@ const config = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@storybook/addon-styling-webpack",
-    {
-      name: "@storybook/addon-styling-webpack",
-
-      options: {
-        rules: [
-          {
-            test: /\.css$/,
-            sideEffects: true,
-            use: [
-              require.resolve("style-loader"),
-              {
-                loader: require.resolve("css-loader"),
-                options: {
-                  importLoaders: 1,
-                },
-              },
-              {
-                loader: require.resolve("postcss-loader"),
-                options: {
-                  postcssOptions: {
-                    config: path.resolve(
-                      __dirname,
-                      "postcss.storybook.config.js"
-                    ),
-                  },
-                },
-              },
-            ],
-          },
-        ],
-      },
-    },
   ],
   docs: {
     autodocs: "tag",

.storybook/preview.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { DocsContainer } from "@storybook/blocks";
-import { rest } from "msw";
 import { initialize, mswDecorator } from "msw-storybook-addon";
 
 import "./styles.css";

package.json

@@ -20,16 +20,17 @@
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.5",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-interactions": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
-    "@storybook/addon-styling-webpack": "^0.0.5",
-    "@storybook/blocks": "^7.6.4",
-    "@storybook/react": "^7.6.4",
-    "@storybook/react-webpack5": "^7.6.4",
+    "@spiriit/vite-plugin-svg-spritemap": "^2.2.4",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
     "@storybook/test": "^7.6.4",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.0.2",
     "babel-loader": "^8.2.0",
     "blink-diff": "^1.0.13",
@@ -41,26 +42,16 @@
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-storybook": "^0.6.15",
-    "extra-watch-webpack-plugin": "^1.0.3",
     "find-imports": "^1.1.0",
-    "lite-server": "^2.6.1",
-    "mini-css-extract-plugin": "^1.2.1",
     "msw": "1.3.2",
     "msw-storybook-addon": "^1.10.0",
-    "null-loader": "^4.0.1",
-    "postcss": "^8.1.10",
-    "postcss-calc": "^7.0.5",
-    "postcss-custom-properties": "^10.0.0",
+    "postcss": "^8.4.35",
     "postcss-import": "^13.0.0",
-    "postcss-loader": "^4.0.4",
     "prettier": "^2.3.0",
     "storybook": "^7.6.4",
-    "style-loader": "^3.3.3",
-    "svg-spritemap-webpack-plugin": "^3.7.1",
     "tailwindcss": "^3.3.6",
     "typescript": "5.3.3",
-    "webpack": "^5.3.2",
-    "webpack-cli": "^4.2.0",
+    "vite": "^4.5.2",
     "yargs": "^16.2.0"
   },
   "scripts": {
@@ -75,7 +66,7 @@
     "update:all": "./scripts/update-dependents.sh",
     "pre-release": "./scripts/pre-release.sh",
     "release": "./scripts/release.sh",
-    "start": "lite-server -- port 5000",
+    "start": "vite --port 5000      ",
     "storybook": "storybook dev -p 6006 --no-version-updates",
     "build-storybook": "storybook build"
   },

src/core/icons.js

@@ -1,4 +1,4 @@
-import { loadSprites } from "../../core/scripts";
+import { loadSprites } from "../core/scripts";
 
 import sprites from "../../core/sprites.svg";
 

vite.config.ts

@@ -0,0 +1,19 @@
+import { resolve } from "path";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import VitePluginSvgSpritemap from "@spiriit/vite-plugin-svg-spritemap";
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/core/scripts.js"),
+      fileName: "core/scripts.js",
+    },
+  },
+  plugins: [
+    react(),
+    VitePluginSvgSpritemap("./src/core/icons/*.svg", {
+      output: "core/sprites.svg",
+    }),
+  ],
+});