Build with Vite

Vite is a significantly faster builder than Webpack which the JS ecosystem seems to be adopting widely. We're already using for Compound Web, and Storybook makes it pretty simple to swap it out for Webpack, so that's what I've done here.

Author: robintown

.storybook/main.ts

@@ -28,7 +28,7 @@ export default {
   ],
   staticDirs: ["../public"],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: "@storybook/react-vite",
     options: {},
   },
   docs: {

.storybook/preview-head.html

@@ -1,5 +1 @@
-<style>
-  /*
-    CSS for Storybook Docs 
-  */
-</style>
+<link rel="stylesheet" href="/global.css" />

.storybook/preview.tsx

@@ -16,8 +16,7 @@
 
 import React from "react";
 
-import "!style-loader!css-loader!@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
-import "!style-loader!css-loader!../public/global.css";
+import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
 
 // import { Body, H1, H2, H3, H4, H5, H6 } from "@vector-im/compound-web";
 

package.json

@@ -22,16 +22,16 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
-    "@storybook/addon-actions": "^7.0.11",
-    "@storybook/addon-essentials": "^7.0.11",
-    "@storybook/addon-interactions": "^7.0.11",
-    "@storybook/addon-links": "^7.0.11",
-    "@storybook/addon-mdx-gfm": "^7.0.11",
-    "@storybook/manager-api": "^7.0.11",
-    "@storybook/react": "^7.0.11",
-    "@storybook/react-webpack5": "^7.0.11",
+    "@storybook/addon-actions": "^7.6.12",
+    "@storybook/addon-essentials": "^7.6.12",
+    "@storybook/addon-interactions": "^7.6.12",
+    "@storybook/addon-links": "^7.6.12",
+    "@storybook/addon-mdx-gfm": "^7.6.12",
+    "@storybook/manager-api": "^7.6.12",
+    "@storybook/react": "^7.6.12",
+    "@storybook/react-vite": "^7.6.12",
     "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.11",
+    "@storybook/theming": "^7.6.12",
     "babel-loader": "^9.1.2",
     "chokidar-cli": "^3.0.0",
     "eslint": "^8.32.0",
@@ -41,11 +41,12 @@
     "lodash": "^4.17.21",
     "prettier": "^2.8.3",
     "sharp": "^0.31.0",
-    "storybook": "^7.0.11",
+    "storybook": "^7.6.12",
     "style-dictionary": "^3.7.1",
     "svg2vectordrawable": "^2.9.1",
     "tinycolor2": "^1.4.2",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "vite": "^5.0.12"
   },
   "dependencies": {
     "@vector-im/compound-design-tokens": "https://github.com/vector-im/compound-design-tokens#0.1.0",

stories/src/utils/Icon.tsx

@@ -1,8 +1,21 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
-export const Icon: React.FC<{iconName: string}> = ({ iconName }) => {
-    return <div className="cpdIconItem">
-        <img className="cpdIcon" alt={iconName} src={require(`@vector-im/compound-design-tokens/icons/${iconName}.svg`)}/>
-        <p>{iconName}</p>
+const icons = import.meta.glob(
+  `../../../node_modules/@vector-im/compound-design-tokens/icons/*.svg`
+);
+
+export const Icon: React.FC<{ iconName: string }> = ({ iconName }) => {
+  const [src, setSrc] = useState<string | undefined>(undefined);
+  useEffect(() => {
+    icons[
+      `../../../node_modules/@vector-im/compound-design-tokens/icons/${iconName}.svg`
+    ]().then((src) => setSrc((src as { default: string }).default));
+  }, [iconName]);
+
+  return (
+    <div className="cpdIconItem">
+      <img className="cpdIcon" alt={iconName} src={src} />
+      <p>{iconName}</p>
     </div>
-}
+  );
+};

tsconfig.json

@@ -9,7 +9,7 @@
     "jsx": "react",
 
     /* Modules */
-    "module": "commonjs" /* Specify what module code is generated. */,
+    "module": "es2022" /* Specify what module code is generated. */,
 
     /* Emit */
     "declaration": true,
@@ -23,6 +23,7 @@
     /* Type Checking */
     "strict": true /* Enable all strict type-checking options. */,
     "rootDir": "./",
+    "types": ["vite/client"],
 
     /* Completeness */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */