From 6e83efb4e5efaec8eacaa168be4c44fc726eea65 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 21 Jun 2023 08:58:54 +0200 Subject: [PATCH 1/9] experiment with exposing registerLanguage --- .../src/syntaxhighlighter/syntaxhighlighter.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx index 4a84d4bda34f..00c5b6629cb1 100644 --- a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx +++ b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx @@ -189,7 +189,7 @@ export interface SyntaxHighlighterState { // copied from @types/react-syntax-highlighter/index.d.ts -export const SyntaxHighlighter: FC = ({ +export const SyntaxHighlighter = ({ children, language = 'jsx', copyable = false, @@ -200,7 +200,7 @@ export const SyntaxHighlighter: FC = ({ className = null, showLineNumbers = false, ...rest -}) => { +}: SyntaxHighlighterProps) => { if (typeof children !== 'string' || !children.trim()) { return null; } @@ -254,4 +254,8 @@ export const SyntaxHighlighter: FC = ({ ); }; +SyntaxHighlighter.registerLanguage = ( + ...args: Parameters +) => ReactSyntaxHighlighter.registerLanguage(...args); + export default SyntaxHighlighter; From 711f2ea66a68753866baf1e4c5fd29d6d8b9275f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 22 Jun 2023 18:42:46 +0200 Subject: [PATCH 2/9] portal the registerLanguage api through the lazy component --- .../lazy-syntaxhighlighter.tsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx b/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx index 9ac7c5314e17..554e45ce81de 100644 --- a/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx +++ b/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx @@ -1,6 +1,11 @@ import type { ComponentProps } from 'react'; import React, { Suspense, lazy } from 'react'; +import type ReactSyntaxHighlighter from './syntaxhighlighter'; + +let languages: Parameters[] = []; +let Comp: typeof ReactSyntaxHighlighter | null = null; + const LazySyntaxHighlighter = lazy(() => import('./syntaxhighlighter')); const LazySyntaxHighlighterWithFormatter = lazy(async () => { const [{ SyntaxHighlighter }, { formatter }] = await Promise.all([ @@ -8,6 +13,17 @@ const LazySyntaxHighlighterWithFormatter = lazy(async () => { import('./formatter'), ]); + if (languages.length > 0) { + languages.forEach((args) => { + SyntaxHighlighter.registerLanguage(...args); + }); + languages = []; + } + + if (Comp === null) { + Comp = SyntaxHighlighter; + } + return { default: (props: ComponentProps) => ( @@ -24,3 +40,13 @@ export const SyntaxHighlighter = (props: ComponentProps ); + +SyntaxHighlighter.registerLanguage = ( + ...args: Parameters +) => { + if (Comp !== null) { + Comp.registerLanguage(...args); + return; + } + languages.push(args); +}; From 7a7eef0e6bff7f893d39c6fc9a8766438c457f4f Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Tue, 27 Jun 2023 20:15:01 +0100 Subject: [PATCH 3/9] register SyntaxHighlighter languages without formatter --- .../lazy-syntaxhighlighter.tsx | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx b/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx index 554e45ce81de..822034aca219 100644 --- a/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx +++ b/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx @@ -1,12 +1,28 @@ -import type { ComponentProps } from 'react'; import React, { Suspense, lazy } from 'react'; +import type { ComponentProps } from 'react'; import type ReactSyntaxHighlighter from './syntaxhighlighter'; let languages: Parameters[] = []; let Comp: typeof ReactSyntaxHighlighter | null = null; -const LazySyntaxHighlighter = lazy(() => import('./syntaxhighlighter')); +const LazySyntaxHighlighter = lazy(async () => { + const { SyntaxHighlighter } = await import('./syntaxhighlighter'); + + if (languages.length > 0) { + languages.forEach((args) => { + SyntaxHighlighter.registerLanguage(...args); + }); + languages = []; + } + + if (Comp === null) Comp = SyntaxHighlighter; + + return { + default: (props: ComponentProps) => , + }; +}); + const LazySyntaxHighlighterWithFormatter = lazy(async () => { const [{ SyntaxHighlighter }, { formatter }] = await Promise.all([ import('./syntaxhighlighter'), @@ -25,13 +41,17 @@ const LazySyntaxHighlighterWithFormatter = lazy(async () => { } return { - default: (props: ComponentProps) => ( + default: (props: ComponentProps) => ( ), }; }); -export const SyntaxHighlighter = (props: ComponentProps) => ( +export const SyntaxHighlighter = ( + props: + | ComponentProps + | ComponentProps +) => ( }> {props.format !== false ? ( From 3975d93ff4750e5e8d0be9ed739387192d26290f Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Tue, 27 Jun 2023 23:26:07 +0100 Subject: [PATCH 4/9] remove unneeded typecast --- code/ui/blocks/src/components/Source.tsx | 34 +++++++++++------------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/code/ui/blocks/src/components/Source.tsx b/code/ui/blocks/src/components/Source.tsx index 4d72f2f45aed..d04c15704e7f 100644 --- a/code/ui/blocks/src/components/Source.tsx +++ b/code/ui/blocks/src/components/Source.tsx @@ -1,27 +1,23 @@ import type { ComponentProps, FunctionComponent } from 'react'; +import { ThemeProvider, convert, ignoreSsrWarning, styled, themes } from '@storybook/theming'; + import React from 'react'; -import { styled, ThemeProvider, convert, themes, ignoreSsrWarning } from '@storybook/theming'; import { SyntaxHighlighter } from '@storybook/components'; - import { EmptyBlock } from './EmptyBlock'; -const StyledSyntaxHighlighter: typeof SyntaxHighlighter = styled(SyntaxHighlighter)( - ({ theme }) => ({ - // DocBlocks-specific styling and overrides - fontSize: `${theme.typography.size.s2 - 1}px`, - lineHeight: '19px', - margin: '25px 0 40px', - borderRadius: theme.appBorderRadius, - boxShadow: - theme.base === 'light' - ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' - : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0', - 'pre.prismjs': { - padding: 20, - background: 'inherit', - }, - }) -); +const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({ + // DocBlocks-specific styling and overrides + fontSize: `${theme.typography.size.s2 - 1}px`, + lineHeight: '19px', + margin: '25px 0 40px', + borderRadius: theme.appBorderRadius, + boxShadow: + theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0', + 'pre.prismjs': { + padding: 20, + background: 'inherit', + }, +})); export enum SourceError { NO_STORY = 'There\u2019s no story here.', From 602a01a0326e9b4954ed8e22cbbd1bfc8b78af0a Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Tue, 27 Jun 2023 23:32:44 +0100 Subject: [PATCH 5/9] Revert "remove unneeded typecast" This reverts commit 3975d93ff4750e5e8d0be9ed739387192d26290f. --- code/ui/blocks/src/components/Source.tsx | 34 +++++++++++++----------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/code/ui/blocks/src/components/Source.tsx b/code/ui/blocks/src/components/Source.tsx index d04c15704e7f..4d72f2f45aed 100644 --- a/code/ui/blocks/src/components/Source.tsx +++ b/code/ui/blocks/src/components/Source.tsx @@ -1,23 +1,27 @@ import type { ComponentProps, FunctionComponent } from 'react'; -import { ThemeProvider, convert, ignoreSsrWarning, styled, themes } from '@storybook/theming'; - import React from 'react'; +import { styled, ThemeProvider, convert, themes, ignoreSsrWarning } from '@storybook/theming'; import { SyntaxHighlighter } from '@storybook/components'; + import { EmptyBlock } from './EmptyBlock'; -const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({ - // DocBlocks-specific styling and overrides - fontSize: `${theme.typography.size.s2 - 1}px`, - lineHeight: '19px', - margin: '25px 0 40px', - borderRadius: theme.appBorderRadius, - boxShadow: - theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0', - 'pre.prismjs': { - padding: 20, - background: 'inherit', - }, -})); +const StyledSyntaxHighlighter: typeof SyntaxHighlighter = styled(SyntaxHighlighter)( + ({ theme }) => ({ + // DocBlocks-specific styling and overrides + fontSize: `${theme.typography.size.s2 - 1}px`, + lineHeight: '19px', + margin: '25px 0 40px', + borderRadius: theme.appBorderRadius, + boxShadow: + theme.base === 'light' + ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' + : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0', + 'pre.prismjs': { + padding: 20, + background: 'inherit', + }, + }) +); export enum SourceError { NO_STORY = 'There\u2019s no story here.', From d4a115d8d15bb4ac9705711c01009d0801cc5944 Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Thu, 29 Jun 2023 21:21:54 +0100 Subject: [PATCH 6/9] recast StyledSyntaxHighlighter type in Source component --- code/ui/blocks/src/components/Source.tsx | 37 ++++++++++++------------ 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/code/ui/blocks/src/components/Source.tsx b/code/ui/blocks/src/components/Source.tsx index 4d72f2f45aed..996a392e4fc6 100644 --- a/code/ui/blocks/src/components/Source.tsx +++ b/code/ui/blocks/src/components/Source.tsx @@ -1,27 +1,26 @@ import type { ComponentProps, FunctionComponent } from 'react'; +import { ThemeProvider, convert, ignoreSsrWarning, styled, themes } from '@storybook/theming'; + import React from 'react'; -import { styled, ThemeProvider, convert, themes, ignoreSsrWarning } from '@storybook/theming'; import { SyntaxHighlighter } from '@storybook/components'; - +import type { SyntaxHighlighterProps } from '@storybook/components'; import { EmptyBlock } from './EmptyBlock'; -const StyledSyntaxHighlighter: typeof SyntaxHighlighter = styled(SyntaxHighlighter)( - ({ theme }) => ({ - // DocBlocks-specific styling and overrides - fontSize: `${theme.typography.size.s2 - 1}px`, - lineHeight: '19px', - margin: '25px 0 40px', - borderRadius: theme.appBorderRadius, - boxShadow: - theme.base === 'light' - ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' - : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0', - 'pre.prismjs': { - padding: 20, - background: 'inherit', - }, - }) -); +const StyledSyntaxHighlighter: React.FunctionComponent = styled( + SyntaxHighlighter +)(({ theme }) => ({ + // DocBlocks-specific styling and overrides + fontSize: `${theme.typography.size.s2 - 1}px`, + lineHeight: '19px', + margin: '25px 0 40px', + borderRadius: theme.appBorderRadius, + boxShadow: + theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0', + 'pre.prismjs': { + padding: 20, + background: 'inherit', + }, +})); export enum SourceError { NO_STORY = 'There\u2019s no story here.', From caff2901218dafb330465e9368c22360cb3b7949 Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Wed, 5 Jul 2023 12:27:58 +0100 Subject: [PATCH 7/9] adds story demonstrating custom language syntax added to highlighter --- .../syntaxhighlighter.stories.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx index 22609a6f5543..5ea762fca063 100644 --- a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx +++ b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx @@ -1,8 +1,13 @@ +import { ThemeProvider, ensure, themes } from '@storybook/theming'; + import type { ComponentProps } from 'react'; import React from 'react'; -import { ThemeProvider, themes, ensure } from '@storybook/theming'; +import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss'; import { SyntaxHighlighter } from './lazy-syntaxhighlighter'; +// Register custom language +SyntaxHighlighter.registerLanguage('scss', scss); + export default { component: SyntaxHighlighter, }; @@ -108,6 +113,18 @@ export const GraphQL = { }, }; +export const CustomSyntax = { + args: { + language: 'scss', + children: `// Custom language syntax registered +div.parent { + div.child { + color: $red; + } +}`, + }, +}; + export const Unsupported = { args: { language: 'C#', From a9d0d223ac0e5dddd4c22cddbeb4d5d3df4239b6 Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Wed, 5 Jul 2023 12:38:02 +0100 Subject: [PATCH 8/9] register custom syntax in a story loader --- .../src/syntaxhighlighter/syntaxhighlighter.stories.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx index 5ea762fca063..d4595d3885d9 100644 --- a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx +++ b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx @@ -5,9 +5,6 @@ import React from 'react'; import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss'; import { SyntaxHighlighter } from './lazy-syntaxhighlighter'; -// Register custom language -SyntaxHighlighter.registerLanguage('scss', scss); - export default { component: SyntaxHighlighter, }; @@ -123,6 +120,7 @@ div.parent { } }`, }, + loaders: [() => SyntaxHighlighter.registerLanguage('scss', scss)], }; export const Unsupported = { From d1c157e5911e916612cd438700e0b68a95f65236 Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Wed, 5 Jul 2023 14:00:37 +0100 Subject: [PATCH 9/9] move import of custom syntax into story loader --- .../src/syntaxhighlighter/syntaxhighlighter.stories.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx index d4595d3885d9..12d76391f6cf 100644 --- a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx +++ b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx @@ -2,7 +2,6 @@ import { ThemeProvider, ensure, themes } from '@storybook/theming'; import type { ComponentProps } from 'react'; import React from 'react'; -import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss'; import { SyntaxHighlighter } from './lazy-syntaxhighlighter'; export default { @@ -120,7 +119,12 @@ div.parent { } }`, }, - loaders: [() => SyntaxHighlighter.registerLanguage('scss', scss)], + loaders: [ + async () => { + const scss = (await import('react-syntax-highlighter/dist/esm/languages/prism/scss')).default; + SyntaxHighlighter.registerLanguage('scss', scss); + }, + ], }; export const Unsupported = {