Skip to content

Commit

Permalink
ui: CRA -> Vite migration (#4796)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
manojVivek and pre-commit-ci-lite[bot] authored Jun 27, 2024
1 parent 6c04fc4 commit 386f51e
Show file tree
Hide file tree
Showing 31 changed files with 5,304 additions and 14,089 deletions.
31 changes: 0 additions & 31 deletions ui/.storybook/main.cjs

This file was deleted.

27 changes: 27 additions & 0 deletions ui/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -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',
},
};
1 change: 1 addition & 0 deletions ui/.storybook/preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,4 @@ export const parameters = {
classTarget: 'html',
},
};
export const tags = ['autodocs'];
2 changes: 1 addition & 1 deletion ui/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
3 changes: 2 additions & 1 deletion ui/config/next.tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"paths": {
"@parca/*": ["../packages/shared/*"]
},
"strictNullChecks": true
"strictNullChecks": true,
"types": ["vite/client", "vitest/globals"]
}
}
38 changes: 17 additions & 21 deletions ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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": [
Expand Down
2 changes: 1 addition & 1 deletion ui/packages/app/web/.env.local-dev
Original file line number Diff line number Diff line change
@@ -1 +1 @@
REACT_APP_PUBLIC_API_ENDPOINT=http://localhost:7070
VITE_API_ENDPOINT=http://localhost:7070
13 changes: 0 additions & 13 deletions ui/packages/app/web/.swcrc

This file was deleted.

30 changes: 0 additions & 30 deletions ui/packages/app/web/craco.config.js

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@
window.APP_VERSION = '{{.Version}}';
</script>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
<link rel="icon" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Open Source Infrastructure-wide continuous profiling" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="apple-touch-icon" href="/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="manifest" href="/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Expand All @@ -30,15 +30,6 @@
<body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script type="module" src="./src/index.tsx"></script>
</body>
</html>
17 changes: 5 additions & 12 deletions ui/packages/app/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,14 @@
"private": true,
"version": "0.16.702",
"description": "Parca Web Interface",
"type": "module",
"scripts": {
"lint": "eslint --no-error-on-unmatched-pattern --ext .ts,.tsx,.js src/*",
"nextjs-dev": "../../../node_modules/.bin/next dev",
"clean": "rimraf .next && rimraf out",
"test": "jest --coverage --config ../../../jest.config.js ./src/**/* ./__tests__/**/*",
"dev": "craco start",
"build": "craco build",
"build-swc": "craco build",
"eject": "craco eject"
"dev": "vite",
"build": "vite build"
},
"config": {
"port": 3000,
Expand Down Expand Up @@ -63,25 +62,19 @@
"web-vitals": "3.5.2"
},
"devDependencies": {
"@craco/craco": "7.1.0",
"@swc/cli": "0.3.12",
"@swc/core": "1.6.1",
"@swc/jest": "0.2.36",
"@types/lodash.throttle": "4.1.9",
"@vitejs/plugin-react-swc": "^3.7.0",
"css-loader": "6.11.0",
"eslint-config-prettier": "8.10.0",
"eslint-plugin-import": "2.29.1",
"jest": "29.7.0",
"jest-runtime": "29.7.0",
"pm2": "5.4.0",
"react-scripts": "5.0.1",
"sass": "1.77.6",
"sass-loader": "13.3.3",
"tslint": "6.1.3",
"tslint-config-prettier": "1.18.0",
"tslint-plugin-prettier": "2.3.0",
"tslint-react": "5.0.0",
"webpack": "5.92.1"
"vite-plugin-svgr": "^4.2.0"
},
"eslintConfig": {
"extends": [
Expand Down
14 changes: 9 additions & 5 deletions ui/packages/app/web/postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
import autoprefixer from 'autoprefixer';
import tailwind from 'tailwindcss';

import tailwindConfig from './tailwind.config.js';

const config = {
plugins: [tailwind(tailwindConfig), autoprefixer],
};

export default config;
2 changes: 2 additions & 0 deletions ui/packages/app/web/src/components/Targets/utils.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.

import {describe, expect, it} from 'vitest';

import {getHealthStatus} from './utils';

describe('getHealthStatus', () => {
Expand Down
2 changes: 1 addition & 1 deletion ui/packages/app/web/src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {ProfileExplorer} from '@parca/profile';
import {selectDarkMode, useAppSelector} from '@parca/store';
import {convertToQueryParams, parseParams} from '@parca/utilities';

const apiEndpoint = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
const apiEndpoint = import.meta.env.VITE_API_ENDPOINT;

const queryClient = new QueryServiceClient(
new GrpcWebFetchTransport({
Expand Down
2 changes: 1 addition & 1 deletion ui/packages/app/web/src/pages/targets.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import {EmptyState} from '@parca/components';
import AgentsTable from '../components/Targets/AgentsTable';
import TargetsTable from '../components/Targets/TargetsTable';

const apiEndpoint = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
const apiEndpoint = import.meta.env.VITE_API_ENDPOINT;

export interface ITargetsResult {
response: TargetsResponse | null;
Expand Down
16 changes: 11 additions & 5 deletions ui/packages/app/web/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
const defaultTheme = require('tailwindcss/defaultTheme');
const typography = require('@tailwindcss/typography');
import typography from '@tailwindcss/typography';
import defaultConfig from 'tailwindcss/stubs/defaultConfig.stub.js';

module.exports = {
import parcaComponentsConfig from '@parca/components/tailwind.config.js';
import parcaProfileConfig from '@parca/profile/tailwind.config.js';

const config = {
presets: [parcaComponentsConfig, parcaProfileConfig],
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'../../shared/**/*.{js,ts,jsx,tsx,mdx}',
'../../shared/*/dist/**/*.{js,ts,jsx,tsx,mdx}',
],
darkMode: 'class',
theme: {
extend: {
fontFamily: {
robotoMono: ['Roboto Mono', 'monospace'],
sans: ['Poppins', ...defaultTheme.fontFamily.sans],
sans: ['Poppins', ...defaultConfig.theme.fontFamily.sans],
},
maxWidth: {
'1/2': '50%',
Expand Down Expand Up @@ -43,3 +47,5 @@ module.exports = {
variants: {},
plugins: [typography],
};

export default config;
3 changes: 2 additions & 1 deletion ui/packages/app/web/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
"noImplicitAny": false,
"downlevelIteration": true,
"noEmit": true,
"jsx": "react-jsx"
"jsx": "react-jsx",
"types": ["vite/client", "vitest/globals"]
},
"include": ["src", "../../shared/*"]
}
27 changes: 27 additions & 0 deletions ui/packages/app/web/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
// Copyright 2022 The Parca Authors
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import react from '@vitejs/plugin-react-swc';
import {defineConfig} from 'vite';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), svgr()],
server: {
port: 3000,
},
build: {
outDir: 'build',
},
});
Loading

0 comments on commit 386f51e

Please sign in to comment.