Merge pull request #609 from guardian/mxdvl/vite-loader

Use Vite for speed and simplicity
guardian · Oct 25, 2022 · fb44baf · fb44baf
2 parents 57c259d + 9679bb7
commit fb44baf
Show file tree

Hide file tree

Showing 16 changed files with 2,844 additions and 3,343 deletions.
diff --git a/.changeset/gentle-drinks-rest.md b/.changeset/gentle-drinks-rest.md
@@ -0,0 +1,5 @@
+---
+'@guardian/discussion-rendering': patch
+---
+
+Use Vite’s library mode for bundling the package. No expected change.
diff --git a/.github/workflows/deps.yml b/.github/workflows/deps.yml
@@ -1,8 +1,8 @@
-name: 🕵‍♀
+name: 📦
 on: [push]
 
 jobs:
-  typescript:
+  deps:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3

diff --git a/.gitignore b/.gitignore
@@ -10,7 +10,7 @@
 
 # production
 /build
-/test-page/dist
+/storybook-static
 
 # misc
 .DS_Store

diff --git a/.storybook/main.js b/.storybook/main.js
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,32 @@
+import { mergeConfig } from 'vite';
+import type { StorybookViteConfig } from '@storybook/builder-vite';
+import react from '@vitejs/plugin-react';
+
+const config: StorybookViteConfig = {
+  stories: [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  async viteFinal(config) {
+    config.plugins = config.plugins?.filter(
+      (plugin) => 
+        //@ts-expect-error -- https://github.com/storybookjs/builder-vite/issues/210
+        !(Array.isArray(plugin) && plugin[0]?.name.includes("vite:react"))
+    );
+
+    return mergeConfig(config, {
+      plugins: [react({
+        jsxImportSource: "@emotion/react",
+      })],
+    })
+  }
+}
+
+export default config;
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,3 @@
+<script>
+    window.global = window;
+</script>
diff --git a/.storybook/preview.js → .storybook/preview.tsx b/.storybook/preview.js → .storybook/preview.tsx
@@ -6,10 +6,9 @@ import { mockFetchCalls } from '../src/lib/mockFetchCalls';
 MockDate.set('Fri March 27 2020 12:00:00 GMT+0000 (Greenwich Mean Time)');
 
 // Add global CSS styles
-let head = document.querySelector('head');
-let style = document.createElement('style');
-head.appendChild(style);
+const style = document.createElement('style');
 style.appendChild(document.createTextNode(resets.resetCSS));
+document.head.appendChild(style);
 
 mockFetchCalls();
 

diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>discussion-rendering</title>
+
+    <style>
+        body {
+            padding: 0 10px;
+            font-family: monospace;
+            max-width: 1300px;
+            margin: auto;
+        }
+
+        .options {
+            display: flex;
+            gap: 20px
+        }
+
+        main {
+            margin-block: 10px
+        }
+
+        hr {
+            border: solid 1px
+        }
+    </style>
+</head>
+
+<body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+</body>
+
+<script type="module" src="/src/test-page.tsx"></script>
+
+</html>
diff --git a/package.json b/package.json
@@ -26,8 +26,7 @@
     "@guardian/source-foundations": "^4.2.1",
     "@guardian/source-react-components": "^4.4.0",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "typescript": "^4.1.3"
+    "react-dom": "^17.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -44,27 +43,23 @@
     "@guardian/prettier": "^0.4.2",
     "@guardian/source-foundations": "^4.2.1",
     "@guardian/source-react-components": "^4.4.0",
-    "@jridgewell/gen-mapping": "^0.3.2",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-html": "^0.2.4",
-    "@rollup/plugin-node-resolve": "^11.2.0",
-    "@rollup/plugin-replace": "^4.0.0",
-    "@storybook/addon-actions": "^6.1.18",
-    "@storybook/addon-essentials": "^6.1.18",
-    "@storybook/addon-links": "^6.1.18",
-    "@storybook/react": "^6.1.18",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-vite": "^0.2.4",
+    "@storybook/core-common": "^6.5.13",
+    "@storybook/core-server": "^6.5.13",
+    "@storybook/react": "^6.5.13",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.0",
     "@types/jest": "^26.0.0",
     "@types/node": "^14.10.2",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-const-enum": "^1.0.1",
-    "babel-plugin-emotion": "^10.0.33",
-    "customize-cra": "^1.0.0",
+    "@types/rollup-plugin-visualizer": "^4.2.1",
+    "@vitejs/plugin-react": "^2.1.0",
+    "babel-plugin-const-enum": "^1.2.0",
     "eslint": "^8.26.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-react-hooks": "^4.0.4",
@@ -79,19 +74,15 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rollup": "^2.40.0",
-    "rollup-plugin-clear": "^2.0.7",
-    "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-serve": "^1.1.0",
-    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^4.2.0",
     "storybook-chromatic": "^4.0.2",
     "ts-jest": "^26.5.0",
-    "ts-loader": "^8.0.14",
-    "typescript": "^4.1.3"
+    "typescript": "^4.8.4",
+    "vite": "^3.1.8"
   },
   "scripts": {
-    "build": "rollup --config && yarn createTsDec",
-    "dev": "rollup --watch --config test-page/rollup.config.js",
+    "build": "vite build && yarn createTsDec",
+    "dev": "vite",
     "test": "jest",
     "tsc": "tsc",
     "validate": "yarn tsc && yarn test && yarn lint",

diff --git a/rollup.config.js b/rollup.config.js
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
diff --git a/test-page/index.tsx → src/test-page.tsx b/test-page/index.tsx → src/test-page.tsx
@@ -1,27 +1,10 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 
-import { pillarToEnum } from '../src/lib/pillarToEnum';
-import { CAPIPillar } from '../src/types';
+import { pillarToEnum } from './lib/pillarToEnum';
+import { CAPIPillar } from './types';
 
-import { App } from '../src/App';
-
-const styles = `
-body {
-	padding: 0 10px;
-	font-family: monospace;
-	max-width: 1300px;
-	margin: auto;
-}
-
-.options {
-	display: flex;
-	gap: 20px
-}
-
-main { margin-block: 10px }
-
-hr { border: solid 1px }`;
+import { App } from './App';
 
 const getQueryParam = (queryParam: string, defaultValue: string): string =>
 	new URLSearchParams(window.location.search).get(queryParam) ?? defaultValue;
@@ -60,7 +43,6 @@ const IndexPageWrapper = () => {
 
 	return (
 		<>
-			<style>{styles}</style>
 			<h1>Discussion-rendering Test Page</h1>
 			<p>
 				Set a specific discussion using the id in a query param like{' '}

diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/test-page/rollup.config.js b/test-page/rollup.config.js