trim bundle size even more

Author: jschuler

packages/dev/package.json

@@ -9,7 +9,7 @@
     "serve": "serve public"
   },
   "dependencies": {
-    "@patternfly/quickstarts": "1.0.0-rc.19",
+    "@patternfly/quickstarts": "1.0.0-rc.20",
     "@patternfly/react-core": "^4.101.3",
     "asciidoctor": "^2.2.1",
     "react": "^16.14.0",

packages/module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "1.0.0-rc.19",
+  "version": "1.0.0-rc.20",
   "description": "PatternFly quick starts",
   "files": [
     "dist"
@@ -37,6 +37,7 @@
     "@patternfly/patternfly": ">=4.90.5",
     "@patternfly/react-catalog-view-extension": ">=4.10.13",
     "@patternfly/react-core": ">=4.101.3",
+    "@patternfly/react-icons": ">=4.9.5",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "showdown": ">=1.8.6"
@@ -45,11 +46,11 @@
     "@patternfly/patternfly": "^4.90.5",
     "@patternfly/react-catalog-view-extension": "^4.10.13",
     "@patternfly/react-core": "^4.101.3",
+    "@patternfly/react-icons": "^4.9.5",
     "bootstrap-sass": "^3.3.7",
     "classnames": "^2.2.6",
     "dompurify": "^2.2.6",
     "history": "^5.0.0",
-    "lodash-es": "^4.17.20",
     "showdown": "1.8.6"
   },
   "devDependencies": {
@@ -88,7 +89,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-scss": "^2.6.1",
     "rollup-plugin-typescript2": "^0.29.0",
-    "rollup-plugin-visualizer": "^4.2.0",
+    "rollup-plugin-visualizer": "^5.5.0",
     "tslib": "^2.0.3",
     "typescript": "^4.3.2"
   }

packages/module/rollup.config.js

@@ -1,18 +1,18 @@
+import analyze from "rollup-plugin-analyzer";
 import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
+import json from '@rollup/plugin-json';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import typescript from 'rollup-plugin-typescript2';
+import resolve from '@rollup/plugin-node-resolve';
 import scss from './rollup-plugin-scss';
-import json from '@rollup/plugin-json';
+import typescript from 'rollup-plugin-typescript2';
 import visualizer from 'rollup-plugin-visualizer';
-import analyze from "rollup-plugin-analyzer";
 
 import packageJson from './package.json';
 
 const plugins = (esBundle) => {
   return [
     scss({
-      output: esBundle ? false : 'dist/quickstarts.css',
+      output: 'dist/quickstarts.css',
       includePaths: ['../../node_modules/'],
       importer(path) {
         return { file: path[0] !== '~' ? path : path.slice(1) };
@@ -35,21 +35,21 @@ const plugins = (esBundle) => {
     }),
     json(),
     analyze({ summaryOnly: true, limit: 5 }),
-    visualizer(),
+    visualizer({ template: 'treemap' }), // sunburst, treemap, network
   ];
 };
 
 export default [
-  {
-    input: 'src/index.ts',
-    output: {
-      file: packageJson.main,
-      format: 'cjs',
-      sourcemap: true,
-    },
-    external: ['react', 'react-dom'],
-    plugins: plugins(false),
-  },
+  // {
+  //   input: 'src/index.ts',
+  //   output: {
+  //     file: packageJson.main,
+  //     format: 'cjs',
+  //     sourcemap: true,
+  //   },
+  //   external: ['react', 'react-dom'],
+  //   plugins: plugins(false),
+  // },
   {
     input: 'src/index.ts',
     output: {

packages/module/src/ConsoleInternal/components/markdown-view.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Converter } from 'showdown';
 import { QuickStartContext, QuickStartContextValues } from '../../utils/quick-start-context';
-import _truncate from 'lodash-es/truncate.js';
-import _uniqueId from 'lodash-es/uniqueId.js';
+// import _truncate from 'lodash-es/truncate.js';
+// import _uniqueId from 'lodash-es/uniqueId.js';
 import cx from 'classnames';
 
 import './_markdown-view.scss';
@@ -72,7 +72,7 @@ type SyncMarkdownProps = {
   content?: string;
   emptyMsg?: string;
   exactHeight?: boolean;
-  truncateContent?: boolean;
+  /*truncateContent?: boolean;*/
   extensions?: ShowdownExtension[];
   renderExtension?: (contentDocument: HTMLDocument, rootSelector: string) => React.ReactNode;
   inline?: boolean;
@@ -86,7 +86,7 @@ type InnerSyncMarkdownProps = Pick<SyncMarkdownProps, 'renderExtension' | 'exact
 };
 
 export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
-  truncateContent,
+  // truncateContent,
   content,
   emptyMsg,
   extensions,
@@ -97,32 +97,44 @@ export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
 }) => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
   const markup = React.useMemo(() => {
-    const truncatedContent = truncateContent
+    const truncatedContent = /*truncateContent
       ? _truncate(content, {
           length: 256,
           separator: ' ',
           omission: '\u2026',
         })
-      : content;
-    return markdownConvert(truncatedContent || emptyMsg || getResource('Not available'), extensions);
-  }, [content, emptyMsg, extensions, getResource, truncateContent]);
+      : */ content;
+    return markdownConvert(
+      truncatedContent || emptyMsg || getResource('Not available'),
+      extensions,
+    );
+  }, [content, emptyMsg, extensions, getResource /*, truncateContent*/]);
   const innerProps: InnerSyncMarkdownProps = {
     renderExtension: extensions?.length > 0 ? renderExtension : undefined,
     exactHeight,
     markup,
     isEmpty: !content,
-    className
+    className,
   };
   return inline ? <InlineMarkdownView {...innerProps} /> : <IFrameMarkdownView {...innerProps} />;
 };
 
+const uniqueId = (function () {
+  let num = 0;
+  return function (prefix) {
+    prefix = String(prefix) || '';
+    num += 1;
+    return prefix + num;
+  };
+})();
+
 const InlineMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
   markup,
   isEmpty,
   renderExtension,
   className,
 }) => {
-  const id = React.useMemo(() => _uniqueId('markdown'), []);
+  const id = React.useMemo(() => uniqueId('markdown'), []);
   return (
     <div className={cx('co-markdown-view', { ['is-empty']: isEmpty }, className)} id={id}>
       <div dangerouslySetInnerHTML={{ __html: markup }} />
@@ -176,7 +188,7 @@ const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
 
   // Find the app's stylesheets and inject them into the frame to ensure consistent styling.
   const filteredLinks = Array.from(document.getElementsByTagName('link')).filter((l) =>
-    l.href.includes('app-bundle')
+    l.href.includes('app-bundle'),
   );
 
   const linkRefs = filteredLinks.reduce(

yarn.lock

@@ -194,6 +194,11 @@
   resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.10.7.tgz#fe2eabf88512afe7dab0c0e7c71142ec6e594664"
   integrity sha512-CiHYDOS8jrxNiy/KIxv9vPqg3cie4SzsbQKh+eW8lj41x68IrgILiw3VvjcJeVXXJDRW36T7u3IPKjMI6zuoyA==
 
+"@patternfly/react-icons@^4.9.5":
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.11.0.tgz#26790eeff22dc3204aa8cd094470f0a2f915634a"
+  integrity sha512-WsIX34bO9rhVRmPG0jlV3GoFGfYgPC64TscNV0lxQosiVRnYIA6Z3nBSArtJsxo5Yn6c63glIefC/YTy6D/ZYg==
+
 "@patternfly/react-styles@^4.10.7", "@patternfly/react-styles@^4.7.22":
   version "4.10.7"
   resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.10.7.tgz#3b0ce38f3e12a69cdcbaf1ada163a5b114b919bd"
@@ -10028,10 +10033,10 @@ rollup-plugin-typescript2@^0.29.0:
     resolve "1.17.0"
     tslib "2.0.1"
 
-rollup-plugin-visualizer@^4.2.0:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-4.2.2.tgz#edeb8b3fc6f49b3c95f6cc668f4eba57c6112099"
-  integrity sha512-10/TsugsaQL5rdynl0lrklBngTtkRBESZdxUJy+3fN+xKqNdg5cr7JQU1OoPx4p5mhQ+nspa6EvX3qc8SsBvnA==
+rollup-plugin-visualizer@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.5.0.tgz#dbe9daa3a46576fb697eb62b19ed251112b85d1e"
+  integrity sha512-QUd0ZHGYn6rgogS+yzG08AvMk9J4kR1lO1cpLJCIAQhbyIGSBdqCddKWtxDsdmsxhkY/GCGw8CvoSB3MwMQOIQ==
   dependencies:
     nanoid "^3.1.22"
     open "^7.4.2"