feat: Add support for simplified interactive demo syntax using code blocks #7907
Conversation
| function transform(opts = {}) { | ||
| const transforms = Array.isArray(opts.transforms) ? opts.transforms.filter(Boolean) : defaultTransforms; | ||
| - return (code) => (0, import_sucrase.transform)(code, { transforms }).code; | ||
| + return (code) => (0, import_sucrase.transform)(code, { transforms, jsxPragma: 'jsx' }).code; |
There was a problem hiding this comment.
This is needed temporarily because react-live doesn't support passing arguments to sucrase (the client-side JS/TS transpiler). I'm planning to add this functionality to react-live in a PR after we finish this milestone.
Defining jsxPragma here configures sucrase to emit jsx([...]) instead of the regular React.createElement([...]) and control what the jsx is - in our case it's the Emotion jsx wrapper. We inject the custom jsx here.
There was a problem hiding this comment.
So awesome this patching functionality!
| const style = { | ||
| '--docs-demo-preview-padding': paddingSize, | ||
| } as CSSProperties; |
There was a problem hiding this comment.
Passing this with a CSS variable is technically more performant than recomputing and reapplying the whole style with Emotion. Not that it matters here, but I was experimenting with the approaches of passing dynamic data to CSS without Emotion and really liked this solution.
There are many optimizations browsers could do with this to reduce style recalculations when the value changes. It would be faster to define the property using element.style.setProperty but it's more painful to maintain, so yeah, inline styles it is.
| function transform(opts = {}) { | ||
| const transforms = Array.isArray(opts.transforms) ? opts.transforms.filter(Boolean) : defaultTransforms; | ||
| - return (code) => (0, import_sucrase.transform)(code, { transforms }).code; | ||
| + return (code) => (0, import_sucrase.transform)(code, { transforms, jsxPragma: 'jsx' }).code; |
There was a problem hiding this comment.
So awesome this patching functionality!
| @@ -118,6 +118,31 @@ declare module '@theme-original/EditThisPage' { | |||
| export default function EditThisPage(props: Props): JSX.Element; | |||
| } | |||
|
|
|||
| // original: https://github.com/facebook/docusaurus/blob/fa743c81defd24e22eae45c81bd79eb8ec2c4ef0/packages/docusaurus-theme-classic/src/theme-classic.d.ts#L364 | |||
| declare module '@theme/CodeBlock' { | |||
There was a problem hiding this comment.
❓ So far I've used the @theme-original alias to align with other imports as we import everything else from @theme-original when swizzled. Do you think that makes sense and should we update this here too?
There was a problem hiding this comment.
I specifically used @theme/CodeBlock to access our swizzled CodeBlock component or any other higher-level swizzled CodeBlock in an additional theme package or in website's src/theme directory. This makes it more reusable and customizable for other users.
Here's the documentation on differences between @theme-init, @theme-original, and @theme - https://docusaurus.io/docs/advanced/client
There was a problem hiding this comment.
I think for the types we could update the other cases that I added with @theme-original to @theme too eventually as they are just adding the types that are not available when swizzled.
But I think it there is no hurry for this.
…a and inject Emotion's jsx wrapper
…ractive` metastring on markdown codeblocks
…ive component examples syntax
tkajtoch
force-pushed
the
feat/demo-codeblock
branch
from
ce2dbb8 to
1d4b1e7
Compare
|
@mgadewoll I included a usage example here https://github.com/elastic/eui/pull/7907/files#diff-aeb591005eb563a650b20cef4214d958b31c62e91d92718beb0f318995084c77 |
💚 Build Succeeded
History
cc @tkajtoch |
Summary
Resolves #7899.
This PR adds support for creating interactive component examples without the need to wrap code blocks with
<Demo>in MDX. Now we can define simple interactive examples like this (ignore//at the beginning of each line):An added benefit to that is greatly increased Github preview readability
QA