-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
32 changed files
with
1,639 additions
and
852 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| --- | ||
| 'scoobie': major | ||
| --- | ||
|
|
||
| Upgrade to MDX v3 (from v1). scoobie has attempted to patch over any breaking changes, so it may not require manual changes in your package. However: | ||
|
|
||
| - MDX v2/v3 have syntactical differences, so you may need to update your MDX files. Review https://mdxjs.com/migrating/v2/#update-mdx-content. | ||
| - If you previously installed `@mdx-js/loader` v1 as a peer dependency, remove it. It's now bundled as a dependency in scoobie. | ||
| - Any custom tooling or setups, such as plugins, are highly likely to be broken. You may need to update and test. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| dist-storybook-tmp/ | ||
| lib/ | ||
| mermaid/ | ||
| /mermaid/ | ||
| node_modules/ | ||
|
|
||
| .DS_Store | ||
|
|
||
4 changes: 2 additions & 2 deletions
4
.loki/reference/chrome_laptop_MDX_MdxProvider_Mermaid_Sequence.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import type { PrivateIdentifier, Program, Property } from 'estree'; | ||
| import type { Plugin, Transformer } from 'unified'; | ||
|
|
||
| // TODO: I've committed React crimes here with no keys | ||
|
|
||
| function recmaPluginMarkdownArrays(): Transformer<Program> { | ||
| return async function transformer(ast) { | ||
| const { walk } = await import('estree-walker'); | ||
|
|
||
| walk(ast, { | ||
| enter(node) { | ||
| // Avoid wrapping arrays in fragments so our react elements can pass arrays to <Stack /> for Braid to be happy | ||
| if ( | ||
| node.type === 'CallExpression' && | ||
| node.callee.type === 'Identifier' && | ||
| node.callee.name.includes('jsx') | ||
| ) { | ||
| if ( | ||
| node.arguments[0].type === 'Identifier' && | ||
| node.arguments[0].name === '_createMdxContent' | ||
| ) { | ||
| node.callee = { | ||
| type: 'Identifier', | ||
| name: '_createMdxContent', | ||
| }; | ||
| node.arguments = [ | ||
| { | ||
| type: 'Identifier', | ||
| name: 'props', | ||
| }, | ||
| ]; | ||
| } else if ( | ||
| node.arguments[0].type === 'Identifier' && | ||
| node.arguments[0].name === '_Fragment' && | ||
| node.arguments[1].type === 'ObjectExpression' | ||
| ) { | ||
| const children = node.arguments[1].properties.find( | ||
| (prop): prop is Property => | ||
| prop.type === 'Property' && | ||
| (prop.key as PrivateIdentifier).name === 'children', | ||
| ); | ||
| // @ts-expect-error -- | ||
| delete node.arguments; | ||
| // @ts-expect-error | ||
| delete node.callee; | ||
| // @ts-expect-error | ||
| node.type = 'ArrayExpression'; | ||
| // @ts-expect-error | ||
| node.elements = children?.value?.elements; | ||
| } | ||
| } | ||
|
|
||
| if (node.type === 'ArrayExpression') { | ||
| node.elements = node.elements.filter( | ||
| (elem) => elem?.type !== 'Literal' || elem.value !== '\n', | ||
| ); | ||
| } | ||
| }, | ||
| }); | ||
| }; | ||
| } | ||
|
|
||
| export const recmaPlugins: Array<Plugin<[], Program>> = [ | ||
| recmaPluginMarkdownArrays, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| // Stolen from https://github.com/remcohaszing/rehype-mdx-code-props/blob/main/src/rehype-mdx-code-props.ts to get back old behaviour of passing meta | ||
|
|
||
| import type { | ||
| ExpressionStatement, | ||
| JSXAttribute, | ||
| JSXElement, | ||
| JSXSpreadAttribute, | ||
| Program, | ||
| } from 'estree-jsx'; | ||
| import type { Root } from 'hast'; | ||
| import { toEstree } from 'hast-util-to-estree'; | ||
| import type { Plugin } from 'unified'; | ||
| import { visitParents } from 'unist-util-visit-parents'; | ||
|
|
||
| /** | ||
| * @internal | ||
| */ | ||
| declare module 'hast' { | ||
| interface ElementData { | ||
| /** | ||
| * Code meta defined by the mdast. | ||
| */ | ||
| meta?: string; | ||
| } | ||
| } | ||
|
|
||
| type JSXAttributes = Array<JSXAttribute | JSXSpreadAttribute>; | ||
|
|
||
| /** | ||
| * Get the JSX attributes for an estree program containing just a single JSX element. | ||
| * | ||
| * @param program | ||
| * The estree program | ||
| * @returns | ||
| * The JSX attributes of the JSX element. | ||
| */ | ||
| function getOpeningAttributes(program: Program): JSXAttributes { | ||
| const { expression } = program.body[0] as ExpressionStatement; | ||
| const { openingElement } = expression as JSXElement; | ||
| return openingElement.attributes; | ||
| } | ||
|
|
||
| export interface RehypeMdxCodePropsOptions { | ||
| /** | ||
| * The tag name to add the attributes to. | ||
| * | ||
| * @default 'pre' | ||
| */ | ||
| tagName?: 'code' | 'pre'; | ||
| } | ||
|
|
||
| /** | ||
| * An MDX rehype plugin for transforming markdown code meta into JSX props. | ||
| */ | ||
| const rehypeMdxCodeProps: Plugin<[RehypeMdxCodePropsOptions?], Root> = ({ | ||
| tagName = 'pre', | ||
| } = {}) => { | ||
| if (tagName !== 'code' && tagName !== 'pre') { | ||
| throw new Error(`Expected tagName to be 'code' or 'pre', got: ${tagName}`); | ||
| } | ||
|
|
||
| return (ast) => { | ||
| visitParents(ast, 'element', (node, ancestors) => { | ||
| if (node.tagName !== 'code') { | ||
| return; | ||
| } | ||
|
|
||
| const meta = node.data?.meta; | ||
| if (typeof meta !== 'string') { | ||
| return; | ||
| } | ||
|
|
||
| if (!meta) { | ||
| return; | ||
| } | ||
|
|
||
| let child = node; | ||
| let parent = ancestors.at(-1)!; | ||
|
|
||
| if (tagName === 'pre') { | ||
| if (parent.type !== 'element') { | ||
| return; | ||
| } | ||
|
|
||
| if (parent.tagName !== 'pre') { | ||
| return; | ||
| } | ||
|
|
||
| if (parent.children.length !== 1) { | ||
| return; | ||
| } | ||
|
|
||
| child = parent; | ||
| parent = ancestors.at(-2)!; | ||
| } | ||
|
|
||
| const attribute: JSXAttribute = { | ||
| type: 'JSXAttribute', | ||
| name: { type: 'JSXIdentifier', name: 'meta' }, | ||
| value: { | ||
| type: 'Literal', | ||
| value: meta, | ||
| }, | ||
| }; | ||
|
|
||
| const estree = toEstree(child); | ||
| getOpeningAttributes(estree).push(attribute); | ||
|
|
||
| parent.children[parent.children.indexOf(child)] = { | ||
| type: 'mdxFlowExpression', | ||
| value: '', | ||
| data: { estree }, | ||
| }; | ||
| }); | ||
| }; | ||
| }; | ||
|
|
||
| export const rehypePlugins = [rehypeMdxCodeProps]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.