Skip to content
This repository has been archived by the owner on Jul 12, 2023. It is now read-only.

Use Vite for speed and simplicity #609

Merged
merged 10 commits into from
Oct 25, 2022
Merged
Show file tree
Hide file tree
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/gentle-drinks-rest.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@guardian/discussion-rendering': patch
---

Use Vite’s library mode for bundling the package. No expected change.
4 changes: 2 additions & 2 deletions .github/workflows/deps.yml
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
name: 🕵‍♀
name: 📦
on: [push]

jobs:
typescript:
deps:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
Expand Down
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

# production
/build
/test-page/dist
/storybook-static

# misc
.DS_Store
Expand Down
36 changes: 0 additions & 36 deletions .storybook/main.js

This file was deleted.

32 changes: 32 additions & 0 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -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;
3 changes: 3 additions & 0 deletions .storybook/preview-head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<script>
window.global = window;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this do?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

</script>
5 changes: 2 additions & 3 deletions .storybook/preview.js → .storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
39 changes: 39 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -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>
39 changes: 15 additions & 24 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
39 changes: 0 additions & 39 deletions rollup.config.js

This file was deleted.

1 change: 0 additions & 1 deletion src/react-app-env.d.ts

This file was deleted.

24 changes: 3 additions & 21 deletions test-page/index.tsx → src/test-page.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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{' '}
Expand Down
1 change: 1 addition & 0 deletions src/vite-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="vite/client" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this mean?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

49 changes: 0 additions & 49 deletions test-page/rollup.config.js

This file was deleted.

Loading