From 882101cd9b9857b7fd693867b32ffddaaa7ceb42 Mon Sep 17 00:00:00 2001 From: Mitchell Hentges Date: Thu, 22 Sep 2022 12:06:41 +0200 Subject: [PATCH] Deep-import LightAsync to improve module-import time in tests `LightAsync` is a `react-syntax-highlighter` that defers the computation of some fancy syntax-parsing logic. However, `react-syntax-highlighter` exposes a `Light` variant that does this computation up-front. In runtime, tree-shaking ensures that we only import `LightAsync`, but tree-shaking doesn't happen in tests (because it's slow). So, deep-import to avoid incurring the syntax-parsing penalty when that functionality isn't used in the test itself. Signed-off-by: Mitchell Hentges --- .changeset/eleven-apples-accept.md | 5 +++++ .../src/components/CodeSnippet/CodeSnippet.tsx | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/eleven-apples-accept.md diff --git a/.changeset/eleven-apples-accept.md b/.changeset/eleven-apples-accept.md new file mode 100644 index 0000000000..f46bf4fe0c --- /dev/null +++ b/.changeset/eleven-apples-accept.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Deep-import LightAsync component to improve module-import speed diff --git a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx index 0e4b12defc..fd83797a88 100644 --- a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx +++ b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx @@ -18,7 +18,8 @@ import React from 'react'; import { useTheme } from '@material-ui/core/styles'; import { BackstageTheme } from '@backstage/theme'; import { CopyTextButton } from '../CopyTextButton'; -import { LightAsync } from 'react-syntax-highlighter'; +import type {} from 'react-syntax-highlighter'; +import { default as LightAsync } from 'react-syntax-highlighter/dist/esm/light-async'; import dark from 'react-syntax-highlighter/dist/esm/styles/hljs/dark'; import docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';