From 8e6bd0fbf5b7988b3431857f045e89f6971d739f Mon Sep 17 00:00:00 2001 From: Pawel Kosiec Date: Fri, 11 Feb 2022 21:26:05 +0100 Subject: [PATCH] Update Rollup config to reduce build time and exclude deps --- dashboard/package.json | 7 +- dashboard/src/layout/Header.tsx | 2 +- package-lock.json | 15 ++++ react-components/package.json | 13 +++- react-components/rollup.config.js | 73 +++++++++++-------- react-components/src/actions/ActionList.tsx | 1 - .../src/hub/Interfaces.container.tsx | 6 +- react-components/src/hub/InterfacesCard.tsx | 6 +- react-components/src/hub/InterfacesList.tsx | 6 +- react-components/src/hub/index.ts | 1 + .../src/hub/interface-revision.ts | 5 ++ .../src/typeinstances/TypeInstanceDetails.tsx | 3 +- .../SelectImplAdditionalInput.tsx | 5 +- 13 files changed, 86 insertions(+), 57 deletions(-) create mode 100644 react-components/src/hub/interface-revision.ts diff --git a/dashboard/package.json b/dashboard/package.json index 83607c3..3a250e0 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -6,8 +6,6 @@ "dependencies": { "@ant-design/icons": "^4.7.0", "@capactio/react-components": "^0.1.0", - "@rjsf/antd": "^3.2.1", - "@rjsf/core": "^3.2.1", "@testing-library/jest-dom": "^5.15.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", @@ -22,8 +20,11 @@ "react-scripts": "5.0.0", "styled-components": "^5.3.3", "typescript": "^4.5.5", + "web-vitals": "^2.1.2", + "@rjsf/antd": "^3.2.1", + "@rjsf/core": "^3.2.1", "unique-names-generator": "^4.6.0", - "web-vitals": "^2.1.2" + "react-query": "^3.33.7" }, "scripts": { "start": "react-scripts --max_old_space_size=4096 start", diff --git a/dashboard/src/layout/Header.tsx b/dashboard/src/layout/Header.tsx index d012b42..1513252 100644 --- a/dashboard/src/layout/Header.tsx +++ b/dashboard/src/layout/Header.tsx @@ -8,9 +8,9 @@ import { QuestionCircleOutlined, UserOutlined, } from "@ant-design/icons"; -import SubMenu from "antd/lib/menu/SubMenu"; import { Link } from "react-router-dom"; +const { SubMenu } = Menu; const { Header: AntHeader } = Layout; function Header() { diff --git a/package-lock.json b/package-lock.json index 6d0803b..e732352 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,6 +52,7 @@ "react-scripts": "5.0.0", "rollup": "^2.67.0", "rollup-plugin-dts": "^4.1.0", + "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-terser": "^7.0.2", "rollup-watch": "^4.3.1", @@ -32093,6 +32094,14 @@ "typescript": "~4.1 || ~4.2 || ~4.3 || ~4.4 || ~4.5" } }, + "node_modules/rollup-plugin-peer-deps-external": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/rollup-plugin-peer-deps-external/-/rollup-plugin-peer-deps-external-2.2.4.tgz", + "integrity": "sha512-AWdukIM1+k5JDdAqV/Cxd+nejvno2FVLVeZ74NKggm3Q5s9cbbcOgUPGdbxPi4BXu7xGaZ8HG12F+thImYu/0g==", + "peerDependencies": { + "rollup": "*" + } + }, "node_modules/rollup-plugin-postcss": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.2.tgz", @@ -62317,6 +62326,12 @@ "magic-string": "^0.25.7" } }, + "rollup-plugin-peer-deps-external": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/rollup-plugin-peer-deps-external/-/rollup-plugin-peer-deps-external-2.2.4.tgz", + "integrity": "sha512-AWdukIM1+k5JDdAqV/Cxd+nejvno2FVLVeZ74NKggm3Q5s9cbbcOgUPGdbxPi4BXu7xGaZ8HG12F+thImYu/0g==", + "requires": {} + }, "rollup-plugin-postcss": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.2.tgz", diff --git a/react-components/package.json b/react-components/package.json index af5be53..5f1b1c6 100644 --- a/react-components/package.json +++ b/react-components/package.json @@ -8,8 +8,8 @@ ], "types": "dist/index.d.ts", "scripts": { - "start": "npm run build -- --watch", - "build": "NODE_OPTIONS=--max_old_space_size=4096 rollup -c", + "start": "NODE_OPTIONS=--max_old_space_size=4096 rollup -c --watch", + "build": "NODE_ENV=production NODE_OPTIONS=--max_old_space_size=4096 rollup -c", "test": "jest", "test:watch": "jest --watch", "storybook": "start-storybook -p 6006", @@ -17,9 +17,14 @@ "generate-graphql-hooks": "set -o allexport;. .env; set +o allexport; graphql-codegen --config codegen.yml; prettier --write 'src/generated/**/*.{js,jsx,ts,tsx,json,css,scss,md,graphql}' 'graphql.schema.json'" }, "peerDependencies": { + "@ant-design/icons": "^4.7.0", "antd": "^4.18.5", "react": "^17.0.2", - "styled-components": "^5.3.3" + "styled-components": "^5.3.3", + "@rjsf/antd": "^3.2.1", + "@rjsf/core": "^3.2.1", + "unique-names-generator": "^4.6.0", + "react-query": "^3.33.7" }, "devDependencies": { "@babel/core": "^7.17.0", @@ -53,9 +58,9 @@ "graphql": "^16.2.0", "identity-obj-proxy": "^3.0.0", "jest": "^27.5.1", - "react-query": "^3.33.7", "rollup": "^2.67.0", "rollup-plugin-dts": "^4.1.0", + "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-terser": "^7.0.2", "rollup-watch": "^4.3.1", diff --git a/react-components/rollup.config.js b/react-components/rollup.config.js index ba8541c..a12a999 100644 --- a/react-components/rollup.config.js +++ b/react-components/rollup.config.js @@ -1,23 +1,54 @@ +import { defineConfig } from "rollup"; import resolve from "@rollup/plugin-node-resolve"; -import replace from '@rollup/plugin-replace'; +import replace from "@rollup/plugin-replace"; import commonJS from "@rollup/plugin-commonjs"; import postcss from "rollup-plugin-postcss"; import typescript from "@rollup/plugin-typescript"; import dts from "rollup-plugin-dts"; import { terser } from "rollup-plugin-terser"; import json from "@rollup/plugin-json"; +import peerDepsExternal from "rollup-plugin-peer-deps-external"; // eslint-disable-next-line @typescript-eslint/no-var-requires const packageJSON = require("./package.json"); -const external = [ - ...Object.keys(packageJSON.dependencies || {}), - ...Object.keys(packageJSON.peerDependencies || {}), +const isDevMode = process.env.NODE_ENV !== "production"; +const plugins = [ + peerDepsExternal({ includeDependencies: false }), + resolve({ + browser: true, + moduleDirectories: ["node_modules", "../node_modules"], + }), + replace({ + preventAssignment: true, + "process.env.NODE_ENV": JSON.stringify( + process.env.NODE_ENV || "development" + ), + }), + commonJS(), + typescript({ + tsconfig: "./tsconfig.json", + exclude: [ + "**/*.test.ts", + "**/*.test.tsx", + "**/*.stories.mdx", + "**/*.stories.ts", + ], + }), + postcss(), + json(), ]; +if (!isDevMode) { + plugins.push(...[terser()]); +} + const config = [ - { + defineConfig({ input: "src/index.ts", + treeshake: { + moduleSideEffects: true, + }, output: [ { file: packageJSON.main, @@ -30,36 +61,14 @@ const config = [ sourcemap: true, }, ], - plugins: [ - resolve({ - browser: true, - }), - replace({ - preventAssignment: true, - 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) - }), - commonJS(), - typescript({ - tsconfig: "./tsconfig.json", - exclude: [ - "**/*.test.ts", - "**/*.test.tsx", - "**/*.stories.mdx", - "**/*.stories.ts", - ], - }), - postcss(), - json(), - terser(), - ], - external, - }, - { + plugins, + }), + defineConfig({ input: "dist/esm/types/index.d.ts", output: [{ file: "dist/index.d.ts", format: "esm" }], plugins: [dts()], - external: [/\.css$/, ...external], - }, + external: [/\.css$/], + }), ]; export default config; diff --git a/react-components/src/actions/ActionList.tsx b/react-components/src/actions/ActionList.tsx index 972b4ac..8e938e6 100644 --- a/react-components/src/actions/ActionList.tsx +++ b/react-components/src/actions/ActionList.tsx @@ -22,7 +22,6 @@ export interface ActionListProps { onActionClick: (name: string) => void; } - export function ActionList({ data, isLoading, error, onActionClick }: ActionListProps) { if (error) { return ; diff --git a/react-components/src/hub/Interfaces.container.tsx b/react-components/src/hub/Interfaces.container.tsx index c3fd466..ede1716 100644 --- a/react-components/src/hub/Interfaces.container.tsx +++ b/react-components/src/hub/Interfaces.container.tsx @@ -1,22 +1,18 @@ import React from "react"; import { - InterfaceRevision, useListInterfacesFromInterfaceGroupQuery, } from "../generated/graphql"; import { InterfacesCard } from "./InterfacesCard"; import { ResourceReference } from "../wizard/ResourceRef"; import { InterfacesList } from "./InterfacesList"; import { Result } from "antd"; +import { InterfaceRevisionWithKey } from "."; export enum InterfacesView { Card, List, } -export interface InterfaceRevisionWithKey extends InterfaceRevision { - key: string; -} - export interface InterfacesContainerProps { path: string; view: InterfacesView; diff --git a/react-components/src/hub/InterfacesCard.tsx b/react-components/src/hub/InterfacesCard.tsx index f3a0052..272f136 100644 --- a/react-components/src/hub/InterfacesCard.tsx +++ b/react-components/src/hub/InterfacesCard.tsx @@ -1,10 +1,8 @@ import { Card, Col, Row, Statistic } from "antd"; import React from "react"; -import { renderInterfaceActionsButtons } from "."; +import { renderInterfaceActionsButtons } from "./render-interface-action-buttons"; +import { InterfaceRevisionWithKey } from "./interface-revision"; import { CenteredSpinner, ErrorAlert } from "../layout"; -import { - InterfaceRevisionWithKey, -} from "./Interfaces.container"; import "./InterfacesCard.css"; export interface InterfacesCardProps { diff --git a/react-components/src/hub/InterfacesList.tsx b/react-components/src/hub/InterfacesList.tsx index de3d70b..0a95483 100644 --- a/react-components/src/hub/InterfacesList.tsx +++ b/react-components/src/hub/InterfacesList.tsx @@ -3,11 +3,9 @@ import "./InterfacesList.css"; import React, { useState } from "react"; import { CenteredSpinner, ErrorAlert } from "../layout"; import { SearchOutlined } from "@ant-design/icons"; -import { - InterfaceRevisionWithKey, -} from "./Interfaces.container"; import { TypeReference } from "../generated/graphql"; -import { renderInterfaceActionsButtons } from "."; +import { renderInterfaceActionsButtons } from "./render-interface-action-buttons"; +import { InterfaceRevisionWithKey } from "./interface-revision"; const { Item } = List; diff --git a/react-components/src/hub/index.ts b/react-components/src/hub/index.ts index 097f9ba..9de3ffa 100644 --- a/react-components/src/hub/index.ts +++ b/react-components/src/hub/index.ts @@ -4,3 +4,4 @@ export * from './InterfaceGroupCards.container'; export * from './Interfaces.container'; export * from './InterfacesCard'; export * from './InterfacesList'; +export * from './interface-revision'; diff --git a/react-components/src/hub/interface-revision.ts b/react-components/src/hub/interface-revision.ts new file mode 100644 index 0000000..e8c535d --- /dev/null +++ b/react-components/src/hub/interface-revision.ts @@ -0,0 +1,5 @@ +import { InterfaceRevision } from ".."; + +export interface InterfaceRevisionWithKey extends InterfaceRevision { + key: string; +} diff --git a/react-components/src/typeinstances/TypeInstanceDetails.tsx b/react-components/src/typeinstances/TypeInstanceDetails.tsx index 066ba16..79583fa 100644 --- a/react-components/src/typeinstances/TypeInstanceDetails.tsx +++ b/react-components/src/typeinstances/TypeInstanceDetails.tsx @@ -3,11 +3,10 @@ import { Button, Descriptions, List, Modal, Typography } from "antd"; import { ErrorAlert } from "../layout"; import { CenteredSpinner } from "../layout/CenteredSpinner"; import { TypeInstanceQuery } from "../generated/graphql"; -import Paragraph from "antd/lib/typography/Paragraph"; import "./TypeInstanceDetails.css"; -const { Text } = Typography; +const { Text, Paragraph } = Typography; export interface TypeInstanceDetailsProps { visible: boolean; diff --git a/react-components/src/wizard/actionSummary/SelectImplAdditionalInput.tsx b/react-components/src/wizard/actionSummary/SelectImplAdditionalInput.tsx index 9617899..f1ab483 100644 --- a/react-components/src/wizard/actionSummary/SelectImplAdditionalInput.tsx +++ b/react-components/src/wizard/actionSummary/SelectImplAdditionalInput.tsx @@ -4,7 +4,10 @@ import { Button, Modal, Space } from "antd"; import { CheckCircleOutlined } from "@ant-design/icons"; import { AdditionalInputSchema } from "./SelectImplAdditionalInput.container"; import { ErrorAlert, Form, CenteredSpinner } from "../../layout"; -import Title from "antd/lib/typography/Title"; + +import { Typography } from "antd"; + +const { Title } = Typography; export interface ImplAdditionalInputSectionProps { additionalInputSchema: AdditionalInputSchema;