Update Rollup config to reduce build time and exclude deps

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",

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() {

react-components/package.json

@@ -8,18 +8,23 @@
   ],
   "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",
     "storybook:build": "build-storybook",
     "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",

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;

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 <ErrorAlert error={error} />;

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;

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 {

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;
 

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';

react-components/src/hub/interface-revision.ts

@@ -0,0 +1,5 @@
+import { InterfaceRevision } from "..";
+
+export interface InterfaceRevisionWithKey extends InterfaceRevision {
+  key: string;
+}

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;

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;