From 386f51e53a1506fdfec6d242a950e6311831da76 Mon Sep 17 00:00:00 2001
From: Manoj Vivek
Date: Thu, 27 Jun 2024 15:33:07 +0530
Subject: [PATCH] ui: CRA -> Vite migration (#4796)
* cra to vite
* Unit test and binary embedding fixed
* [pre-commit.ci lite] apply automatic fixes
* Moved vite dep to root
* Unit test imports fixed
* [pre-commit.ci lite] apply automatic fixes
* Linter fixes
* [pre-commit.ci lite] apply automatic fixes
* More performance improvements
* [pre-commit.ci lite] apply automatic fixes
* Improved tailwind config
* Storybook vite builder
* Storybook version upgrade
---------
Co-authored-by: pre-commit-ci-lite[bot] <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
---
ui/.storybook/main.cjs | 31 -
ui/.storybook/main.js | 27 +
ui/.storybook/preview.js | 1 +
ui/README.md | 2 +-
ui/config/next.tsconfig.json | 3 +-
ui/package.json | 38 +-
ui/packages/app/web/.env.local-dev | 2 +-
ui/packages/app/web/.swcrc | 13 -
ui/packages/app/web/craco.config.js | 30 -
ui/packages/app/web/{public => }/index.html | 17 +-
ui/packages/app/web/package.json | 17 +-
ui/packages/app/web/postcss.config.js | 14 +-
.../web/src/components/Targets/utils.test.ts | 2 +
ui/packages/app/web/src/pages/index.tsx | 2 +-
ui/packages/app/web/src/pages/targets.tsx | 2 +-
ui/packages/app/web/tailwind.config.js | 16 +-
ui/packages/app/web/tsconfig.json | 3 +-
ui/packages/app/web/vite.config.ts | 27 +
.../components/src/NoDataPrompt/index.tsx | 11 +-
ui/packages/shared/icons/package.json | 3 +-
ui/packages/shared/icons/src/index.tsx | 22 +-
ui/packages/shared/parser/src/index.test.ts | 2 +
ui/packages/shared/parser/src/index.ts | 2 +-
ui/packages/shared/parser/src/selector.js | 16 +-
.../src/__tests__/suffix_params.test.ts | 2 +
ui/packages/shared/store/src/store.ts | 2 +-
.../shared/utilities/src/bigint.spec.ts | 2 +
.../shared/utilities/src/index.spec.ts | 2 +
ui/packages/shared/utilities/src/index.ts | 4 +-
ui/pnpm-lock.yaml | 19072 +++++-----------
ui/tsconfig.json | 6 +-
31 files changed, 5304 insertions(+), 14089 deletions(-)
delete mode 100644 ui/.storybook/main.cjs
create mode 100644 ui/.storybook/main.js
delete mode 100644 ui/packages/app/web/.swcrc
delete mode 100644 ui/packages/app/web/craco.config.js
rename ui/packages/app/web/{public => }/index.html (68%)
create mode 100644 ui/packages/app/web/vite.config.ts
diff --git a/ui/.storybook/main.cjs b/ui/.storybook/main.cjs
deleted file mode 100644
index f82fa125272..00000000000
--- a/ui/.storybook/main.cjs
+++ /dev/null
@@ -1,31 +0,0 @@
-const path = require('path');
-module.exports = {
- stories: ['../packages/shared/**/src/**/*.stories.@(js|jsx|ts|tsx)'],
- addons: [
- '@storybook/addon-links',
- '@storybook/addon-essentials',
- '@storybook/addon-interactions',
- '@storybook/preset-typescript',
- {
- name: '@storybook/addon-styling',
- options: {
- // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md
- // For more details on this addon's options.
- postCss: true,
- },
- },
- '@storybook/addon-mdx-gfm',
- 'storybook-dark-mode',
- 'storybook-css-modules-preset',
- ],
- core: {
- disableTelemetry: true,
- },
- framework: {
- name: '@storybook/react-webpack5',
- options: {},
- },
- docs: {
- autodocs: true,
- },
-};
diff --git a/ui/.storybook/main.js b/ui/.storybook/main.js
new file mode 100644
index 00000000000..8d786b225f3
--- /dev/null
+++ b/ui/.storybook/main.js
@@ -0,0 +1,27 @@
+export default {
+ stories: ['../packages/shared/**/src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ '@storybook/addon-mdx-gfm',
+ 'storybook-dark-mode',
+ '@chromatic-com/storybook',
+ ],
+
+ core: {
+ disableTelemetry: true,
+ },
+
+ docs: {},
+
+ framework: {
+ name: '@storybook/react-vite',
+ options: {},
+ },
+
+ typescript: {
+ reactDocgen: 'react-docgen-typescript',
+ },
+};
diff --git a/ui/.storybook/preview.js b/ui/.storybook/preview.js
index 6d8cc96a3e0..5654f2e60d2 100644
--- a/ui/.storybook/preview.js
+++ b/ui/.storybook/preview.js
@@ -14,3 +14,4 @@ export const parameters = {
classTarget: 'html',
},
};
+export const tags = ['autodocs'];
diff --git a/ui/README.md b/ui/README.md
index 8b6c1738e1d..2b8f8833259 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -7,7 +7,7 @@ This is a [Create React App](https://create-react-app.dev/) project that utilize
The React app requires an environment variable for the API endpoint so as to talk to the Parca backend. Create a file named `.env.local` in `packages/app/web/` to add the environment variable for the API endpoint.
```shell
-REACT_APP_PUBLIC_API_ENDPOINT=http://localhost:7070
+VITE_API_ENDPOINT=http://localhost:7070
```
Then, start the Parca backend by running the command below. The `--cors-allowed-origins='*'` flag allows for enabling CORS headers on Parca.
diff --git a/ui/config/next.tsconfig.json b/ui/config/next.tsconfig.json
index b95f1a65338..bad1b91522e 100644
--- a/ui/config/next.tsconfig.json
+++ b/ui/config/next.tsconfig.json
@@ -16,6 +16,7 @@
"paths": {
"@parca/*": ["../packages/shared/*"]
},
- "strictNullChecks": true
+ "strictNullChecks": true,
+ "types": ["vite/client", "vitest/globals"]
}
}
diff --git a/ui/package.json b/ui/package.json
index 8f4a0afa5fb..96df493bad3 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -7,7 +7,7 @@
"lint": "eslint --ext .ts,.tsx,.js packages/*",
"fix": "eslint --fix --ext .ts,.tsx,.js packages/*",
"type-check": "tsc --noEmit",
- "test": "jest --coverage --config jest.config.cjs",
+ "test": "vitest --run",
"build": "lerna run build",
"build-swc-lerna": "lerna run build-swc",
"watch": "lerna run --parallel watch",
@@ -35,28 +35,23 @@
"@babel/plugin-proposal-export-default-from": "7.24.7",
"@babel/plugin-proposal-private-property-in-object": "7.21.11",
"@babel/preset-env": "7.24.7",
+ "@chromatic-com/storybook": "^1",
"@ianvs/prettier-plugin-sort-imports": "3.7.2",
"@mdx-js/loader": "2.3.0",
"@next/bundle-analyzer": "12.3.4",
"@next/eslint-plugin-next": "12.3.4",
"@next/mdx": "12.3.4",
- "@storybook/addon-actions": "7.6.19",
- "@storybook/addon-docs": "7.6.19",
- "@storybook/addon-essentials": "7.6.19",
- "@storybook/addon-interactions": "7.6.19",
- "@storybook/addon-links": "7.6.19",
- "@storybook/addon-mdx-gfm": "7.6.19",
- "@storybook/addon-outline": "7.6.19",
- "@storybook/addon-postcss": "2.0.0",
- "@storybook/addon-storyshots": "7.6.17",
- "@storybook/addon-styling": "0.3.2",
- "@storybook/node-logger": "7.6.19",
- "@storybook/preset-create-react-app": "7.6.19",
- "@storybook/preset-typescript": "3.0.0",
- "@storybook/react": "7.6.19",
- "@storybook/react-webpack5": "7.6.19",
- "@storybook/testing-library": "0.2.2",
- "@svgr/webpack": "6.5.1",
+ "@storybook/addon-actions": "^8.1.11",
+ "@storybook/addon-docs": "^8.1.11",
+ "@storybook/addon-essentials": "^8.1.11",
+ "@storybook/addon-interactions": "^8.1.11",
+ "@storybook/addon-links": "^8.1.11",
+ "@storybook/addon-mdx-gfm": "^8.1.11",
+ "@storybook/addon-outline": "^8.1.11",
+ "@storybook/node-logger": "^8.1.11",
+ "@storybook/react": "^8.1.11",
+ "@storybook/react-vite": "^8.1.11",
+ "@storybook/test": "^8.1.11",
"@swc/cli": "0.3.12",
"@swc/core": "1.6.1",
"@swc/jest": "0.2.36",
@@ -111,14 +106,15 @@
"rimraf": "3.0.2",
"sass": "1.77.6",
"sass-loader": "13.3.3",
- "storybook": "7.6.19",
- "storybook-dark-mode": "2.1.1",
+ "storybook": "^8.1.11",
+ "storybook-dark-mode": "4.0.2",
"style-loader": "3.3.4",
"ts-jest": "29.1.5",
"ts-node": "10.9.2",
"tsc-watch": "6.2.0",
"typescript": "5.4.5",
- "webpack": "5.92.1"
+ "vite": "^5.3.1",
+ "vitest": "^1.6.0"
},
"eslintConfig": {
"overrides": [
diff --git a/ui/packages/app/web/.env.local-dev b/ui/packages/app/web/.env.local-dev
index 1aa2b2ab700..c11a3ce515b 100644
--- a/ui/packages/app/web/.env.local-dev
+++ b/ui/packages/app/web/.env.local-dev
@@ -1 +1 @@
-REACT_APP_PUBLIC_API_ENDPOINT=http://localhost:7070
+VITE_API_ENDPOINT=http://localhost:7070
diff --git a/ui/packages/app/web/.swcrc b/ui/packages/app/web/.swcrc
deleted file mode 100644
index f2f3f4145bc..00000000000
--- a/ui/packages/app/web/.swcrc
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "jsc": {
- "parser": {
- "syntax": "typescript",
- "jsx": true,
- },
- "transform": {
- "react": {
- "runtime": "automatic",
- },
- },
- },
-}
diff --git a/ui/packages/app/web/craco.config.js b/ui/packages/app/web/craco.config.js
deleted file mode 100644
index d8866f3aed8..00000000000
--- a/ui/packages/app/web/craco.config.js
+++ /dev/null
@@ -1,30 +0,0 @@
-const path = require('path');
-const {loaderByName, addAfterLoader, removeLoaders} = require('@craco/craco');
-
-const packages = [__dirname];
-packages.push(path.join(__dirname, '../../shared/client'));
-packages.push(path.join(__dirname, '../../shared/components'));
-packages.push(path.join(__dirname, '../../shared/dynamicsize'));
-packages.push(path.join(__dirname, '../../shared/functions'));
-packages.push(path.join(__dirname, '../../shared/icons'));
-packages.push(path.join(__dirname, '../../shared/parser'));
-packages.push(path.join(__dirname, '../../shared/profile'));
-packages.push(path.join(__dirname, '../../shared/store'));
-packages.push(path.join(__dirname, '../../shared/hooks'));
-packages.push(path.join(__dirname, '../../shared/utilities'));
-
-module.exports = {
- webpack: {
- configure: (webpackConfig, arg) => {
- addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
- test: /\.(js|mjs|jsx|ts|tsx)$/,
- include: packages,
- loader: require.resolve('swc-loader'),
- });
-
- removeLoaders(webpackConfig, loaderByName('babel-loader'));
-
- return webpackConfig;
- },
- },
-};
diff --git a/ui/packages/app/web/public/index.html b/ui/packages/app/web/index.html
similarity index 68%
rename from ui/packages/app/web/public/index.html
rename to ui/packages/app/web/index.html
index 10bb35ed01e..abdb2fcc5e4 100644
--- a/ui/packages/app/web/public/index.html
+++ b/ui/packages/app/web/index.html
@@ -6,16 +6,16 @@
window.APP_VERSION = '{{.Version}}';
-
+
-
+
-
+
+