From 350679652b45084c3586834c51c78abcd76ea266 Mon Sep 17 00:00:00 2001 From: Rodrigo Pombo Date: Sat, 7 May 2022 12:38:57 +0000 Subject: [PATCH 1/7] Change plugin folder --- contributing.md | 11 ++ packages/mdx/src/index.tsx | 2 +- packages/mdx/src/mdx-plugin/ch-usage.ts | 19 --- .../__snapshots__/comment-data.test.ts.snap | 0 .../src/{mdx-plugin => remark}/annotations.ts | 0 .../code-files-reducer.tsx | 0 .../mdx/src/{mdx-plugin => remark}/code.ts | 0 .../comment-data.test.ts | 0 .../{mdx-plugin => remark}/comment-data.ts | 0 .../mdx/src/{mdx-plugin => remark}/editor.tsx | 0 .../src/{mdx-plugin => remark}/inline-code.ts | 0 .../mdx/src/{mdx-plugin => remark}/links.tsx | 0 .../mdx/src/{mdx-plugin => remark}/nodes.ts | 0 .../mdx/src/{mdx-plugin => remark}/preview.ts | 0 .../{mdx-plugin => remark}/scrollycoding.ts | 0 .../mdx/src/{mdx-plugin => remark}/section.ts | 0 .../src/{mdx-plugin => remark}/slideshow.ts | 0 .../src/{mdx-plugin => remark}/spotlight.ts | 0 .../mdx/src/{mdx-plugin => remark}/steps.tsx | 0 .../src/{mdx-plugin => remark}/to-estree.ts | 0 .../plugin.ts => remark/transform.ts} | 138 +++++++++--------- .../src/{mdx-plugin => remark}/unist-utils.ts | 0 22 files changed, 79 insertions(+), 91 deletions(-) create mode 100644 contributing.md delete mode 100644 packages/mdx/src/mdx-plugin/ch-usage.ts rename packages/mdx/src/{mdx-plugin => remark}/__snapshots__/comment-data.test.ts.snap (100%) rename packages/mdx/src/{mdx-plugin => remark}/annotations.ts (100%) rename packages/mdx/src/{mdx-plugin => remark}/code-files-reducer.tsx (100%) rename packages/mdx/src/{mdx-plugin => remark}/code.ts (100%) rename packages/mdx/src/{mdx-plugin => remark}/comment-data.test.ts (100%) rename packages/mdx/src/{mdx-plugin => remark}/comment-data.ts (100%) rename packages/mdx/src/{mdx-plugin => remark}/editor.tsx (100%) rename packages/mdx/src/{mdx-plugin => remark}/inline-code.ts (100%) rename packages/mdx/src/{mdx-plugin => remark}/links.tsx (100%) rename packages/mdx/src/{mdx-plugin => remark}/nodes.ts (100%) rename packages/mdx/src/{mdx-plugin => remark}/preview.ts (100%) rename packages/mdx/src/{mdx-plugin => remark}/scrollycoding.ts (100%) rename packages/mdx/src/{mdx-plugin => remark}/section.ts (100%) rename packages/mdx/src/{mdx-plugin => remark}/slideshow.ts (100%) rename packages/mdx/src/{mdx-plugin => remark}/spotlight.ts (100%) rename packages/mdx/src/{mdx-plugin => remark}/steps.tsx (100%) rename packages/mdx/src/{mdx-plugin => remark}/to-estree.ts (100%) rename packages/mdx/src/{mdx-plugin/plugin.ts => remark/transform.ts} (68%) rename packages/mdx/src/{mdx-plugin => remark}/unist-utils.ts (100%) diff --git a/contributing.md b/contributing.md new file mode 100644 index 00000000..be0928f3 --- /dev/null +++ b/contributing.md @@ -0,0 +1,11 @@ +## Files and Folders + +- `packages/mdx`: the npm package +- `packages/mdx/vite.config.js`: we only use vite for testing with vitest +- `packages/mdx/rollup.config.js`: rollup builds the thing we release to npm +- `packages/mdx/next.config.js`: we have a nextjs testing site, our poor man's storybook +- `packages/mdx/pages`: the pages for the nextjs test site +- `packages/mdx/dev`: code and content used by the nextjs test site +- `packages/mdx/src/remark`: the code that runs at build time when you compile an mdx file +- `examples`: a list of examples, most of them use the Code Hike version from `packages/mdx/dist` +- `examples/bundle-test`: this one is used by `.github/workflows/bundle-analysis.yml` diff --git a/packages/mdx/src/index.tsx b/packages/mdx/src/index.tsx index 63facbbb..7a6cc334 100644 --- a/packages/mdx/src/index.tsx +++ b/packages/mdx/src/index.tsx @@ -1,3 +1,3 @@ -export { remarkCodeHike } from "./mdx-plugin/plugin" +export { transform as remarkCodeHike } from "./remark/transform" export { highlight } from "./highlighter" diff --git a/packages/mdx/src/mdx-plugin/ch-usage.ts b/packages/mdx/src/mdx-plugin/ch-usage.ts deleted file mode 100644 index 579214d8..00000000 --- a/packages/mdx/src/mdx-plugin/ch-usage.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { JsxNode, SuperNode, visit } from "./nodes" - -export function chUsage(tree: SuperNode) { - const usage = [] - visit( - tree, - ["mdxJsxFlowElement", "mdxJsxTextElement"], - (node: JsxNode) => { - if ( - node.name && - node.name.startsWith("CH.") && - !usage.includes(node.name) - ) { - usage.push(node.name) - } - } - ) - return usage -} diff --git a/packages/mdx/src/mdx-plugin/__snapshots__/comment-data.test.ts.snap b/packages/mdx/src/remark/__snapshots__/comment-data.test.ts.snap similarity index 100% rename from packages/mdx/src/mdx-plugin/__snapshots__/comment-data.test.ts.snap rename to packages/mdx/src/remark/__snapshots__/comment-data.test.ts.snap diff --git a/packages/mdx/src/mdx-plugin/annotations.ts b/packages/mdx/src/remark/annotations.ts similarity index 100% rename from packages/mdx/src/mdx-plugin/annotations.ts rename to packages/mdx/src/remark/annotations.ts diff --git a/packages/mdx/src/mdx-plugin/code-files-reducer.tsx b/packages/mdx/src/remark/code-files-reducer.tsx similarity index 100% rename from packages/mdx/src/mdx-plugin/code-files-reducer.tsx rename to packages/mdx/src/remark/code-files-reducer.tsx diff --git a/packages/mdx/src/mdx-plugin/code.ts b/packages/mdx/src/remark/code.ts similarity index 100% rename from packages/mdx/src/mdx-plugin/code.ts rename to packages/mdx/src/remark/code.ts diff --git a/packages/mdx/src/mdx-plugin/comment-data.test.ts b/packages/mdx/src/remark/comment-data.test.ts similarity index 100% rename from packages/mdx/src/mdx-plugin/comment-data.test.ts rename to packages/mdx/src/remark/comment-data.test.ts diff --git a/packages/mdx/src/mdx-plugin/comment-data.ts b/packages/mdx/src/remark/comment-data.ts similarity index 100% rename from packages/mdx/src/mdx-plugin/comment-data.ts rename to packages/mdx/src/remark/comment-data.ts diff --git a/packages/mdx/src/mdx-plugin/editor.tsx b/packages/mdx/src/remark/editor.tsx similarity index 100% rename from packages/mdx/src/mdx-plugin/editor.tsx rename to packages/mdx/src/remark/editor.tsx diff --git a/packages/mdx/src/mdx-plugin/inline-code.ts b/packages/mdx/src/remark/inline-code.ts similarity index 100% rename from packages/mdx/src/mdx-plugin/inline-code.ts rename to packages/mdx/src/remark/inline-code.ts diff --git a/packages/mdx/src/mdx-plugin/links.tsx b/packages/mdx/src/remark/links.tsx similarity index 100% rename from packages/mdx/src/mdx-plugin/links.tsx rename to packages/mdx/src/remark/links.tsx diff --git a/packages/mdx/src/mdx-plugin/nodes.ts b/packages/mdx/src/remark/nodes.ts similarity index 100% rename from packages/mdx/src/mdx-plugin/nodes.ts rename to packages/mdx/src/remark/nodes.ts diff --git a/packages/mdx/src/mdx-plugin/preview.ts b/packages/mdx/src/remark/preview.ts similarity index 100% rename from packages/mdx/src/mdx-plugin/preview.ts rename to packages/mdx/src/remark/preview.ts diff --git a/packages/mdx/src/mdx-plugin/scrollycoding.ts b/packages/mdx/src/remark/scrollycoding.ts similarity index 100% rename from packages/mdx/src/mdx-plugin/scrollycoding.ts rename to packages/mdx/src/remark/scrollycoding.ts diff --git a/packages/mdx/src/mdx-plugin/section.ts b/packages/mdx/src/remark/section.ts similarity index 100% rename from packages/mdx/src/mdx-plugin/section.ts rename to packages/mdx/src/remark/section.ts diff --git a/packages/mdx/src/mdx-plugin/slideshow.ts b/packages/mdx/src/remark/slideshow.ts similarity index 100% rename from packages/mdx/src/mdx-plugin/slideshow.ts rename to packages/mdx/src/remark/slideshow.ts diff --git a/packages/mdx/src/mdx-plugin/spotlight.ts b/packages/mdx/src/remark/spotlight.ts similarity index 100% rename from packages/mdx/src/mdx-plugin/spotlight.ts rename to packages/mdx/src/remark/spotlight.ts diff --git a/packages/mdx/src/mdx-plugin/steps.tsx b/packages/mdx/src/remark/steps.tsx similarity index 100% rename from packages/mdx/src/mdx-plugin/steps.tsx rename to packages/mdx/src/remark/steps.tsx diff --git a/packages/mdx/src/mdx-plugin/to-estree.ts b/packages/mdx/src/remark/to-estree.ts similarity index 100% rename from packages/mdx/src/mdx-plugin/to-estree.ts rename to packages/mdx/src/remark/to-estree.ts diff --git a/packages/mdx/src/mdx-plugin/plugin.ts b/packages/mdx/src/remark/transform.ts similarity index 68% rename from packages/mdx/src/mdx-plugin/plugin.ts rename to packages/mdx/src/remark/transform.ts index 427e6b1e..91d3f619 100644 --- a/packages/mdx/src/mdx-plugin/plugin.ts +++ b/packages/mdx/src/remark/transform.ts @@ -4,12 +4,12 @@ import { transformSections } from "./section" import { transformSpotlights } from "./spotlight" import { transformScrollycodings } from "./scrollycoding" import { transformSlideshows } from "./slideshow" +import { transformInlineCodes } from "./inline-code" +import { transformPreviews } from "./preview" + import { valueToEstree } from "./to-estree" import { CH_CODE_CONFIG_VAR_NAME } from "./unist-utils" -import { transformPreviews } from "./preview" -import { transformInlineCodes } from "./inline-code" -import { EsmNode, SuperNode, visit } from "./nodes" -import { chUsage } from "./ch-usage" +import { JsxNode, SuperNode, visit } from "./nodes" type CodeHikeConfig = { theme: any @@ -18,52 +18,50 @@ type CodeHikeConfig = { showCopyButton?: boolean } -export function remarkCodeHike( - unsafeConfig: CodeHikeConfig -) { +const transforms = [ + transformPreviews, + transformScrollycodings, + transformSpotlights, + transformSlideshows, + transformSections, + transformInlineCodes, + transformEditorNodes, + transformCodeNodes, +] + +export function transform(unsafeConfig: CodeHikeConfig) { return async (tree: SuperNode) => { const config = addConfigDefaults(unsafeConfig) - // TODO add opt-in config - let hasCodeHikeImport = false - visit(tree, "mdxjsEsm", (node: EsmNode) => { - if ( - node.value.startsWith( - `import { CH } from "@code-hike/mdx` - ) - ) { - hasCodeHikeImport = true - } - }) try { - await transformPreviews(tree) - await transformScrollycodings(tree, config) - await transformSpotlights(tree, config) - await transformSlideshows(tree, config) - await transformSections(tree, config) - await transformInlineCodes(tree, config) - await transformEditorNodes(tree, config) - await transformCodeNodes(tree, config) + for (const transform of transforms) { + await transform(tree, config) + } } catch (e) { console.error("error running remarkCodeHike", e) throw e } - const usage = chUsage(tree) + const usedCodeHikeComponents = + getUsedCodeHikeComponentNames(tree) - if (usage.length > 0) { + if (usedCodeHikeComponents.length > 0) { addConfig(tree, config) - if (config.autoImport && !hasCodeHikeImport) { - addSmartImport(tree, usage) + if (config.autoImport) { + addSmartImport(tree, usedCodeHikeComponents) } } } } +/** + * Add defaults and normalize config + */ function addConfigDefaults( config: Partial | undefined ): CodeHikeConfig { + // TODO warn when config looks weird return { ...config, theme: config?.theme || {}, @@ -71,13 +69,42 @@ function addConfigDefaults( } } +/** + * Returns a the list of component names + * used inside the tree + * that looks like `` + */ +function getUsedCodeHikeComponentNames( + tree: SuperNode +): string[] { + const usage = [] + visit( + tree, + ["mdxJsxFlowElement", "mdxJsxTextElement"], + (node: JsxNode) => { + if ( + node.name && + node.name.startsWith("CH.") && + !usage.includes(node.name) + ) { + usage.push(node.name) + } + } + ) + return usage +} + +/** + * Creates a `chCodeConfig` variable node in the tree + * so that the components can access the config + */ function addConfig( tree: SuperNode, config: CodeHikeConfig ) { tree.children.unshift({ type: "mdxjsEsm", - value: "export const chCodeConfig = {}", + value: `export const ${CH_CODE_CONFIG_VAR_NAME} = {}`, data: { estree: { type: "Program", @@ -108,10 +135,17 @@ function addConfig( }) } -function addSmartImport(tree: SuperNode, usage: string[]) { +/** + * Add an import node at the start of the tree + * importing all the components used + */ +function addSmartImport( + tree: SuperNode, + componentNames: string[] +) { const specifiers = [ "annotations", - ...usage.map(name => name.slice("CH.".length)), + ...componentNames.map(name => name.slice("CH.".length)), ] tree.children.unshift({ @@ -202,41 +236,3 @@ function addSmartImport(tree: SuperNode, usage: string[]) { }, }) } - -function addImportNode(tree: SuperNode) { - tree.children.unshift({ - type: "mdxjsEsm", - value: - 'import { CH } from "@code-hike/mdx/dist/components.cjs.js"', - data: { - estree: { - type: "Program", - body: [ - { - type: "ImportDeclaration", - specifiers: [ - { - type: "ImportSpecifier", - imported: { - type: "Identifier", - name: "CH", - }, - local: { - type: "Identifier", - name: "CH", - }, - }, - ], - source: { - type: "Literal", - value: - "@code-hike/mdx/dist/components.cjs.js", - raw: '"@code-hike/mdx/dist/components.cjs.js"', - }, - }, - ], - sourceType: "module", - }, - }, - }) -} diff --git a/packages/mdx/src/mdx-plugin/unist-utils.ts b/packages/mdx/src/remark/unist-utils.ts similarity index 100% rename from packages/mdx/src/mdx-plugin/unist-utils.ts rename to packages/mdx/src/remark/unist-utils.ts From e91717ea8cd3b30d04af21a8a8d902ee444604be Mon Sep 17 00:00:00 2001 From: Rodrigo Pombo Date: Mon, 9 May 2022 09:52:17 +0000 Subject: [PATCH 2/7] Remark refactor --- packages/mdx/src/remark/code.ts | 17 ++-- packages/mdx/src/remark/config.ts | 20 ++++ packages/mdx/src/remark/editor.tsx | 5 +- packages/mdx/src/remark/inline-code.ts | 3 +- packages/mdx/src/remark/scrollycoding.ts | 9 +- packages/mdx/src/remark/section.ts | 5 +- packages/mdx/src/remark/slideshow.ts | 9 +- packages/mdx/src/remark/spotlight.ts | 9 +- packages/mdx/src/remark/steps.tsx | 3 +- .../{preview.ts => transform.preview.ts} | 0 packages/mdx/src/remark/transform.ts | 24 +---- packages/mdx/src/remark/unist-utils.ts | 91 ++++++++++--------- 12 files changed, 104 insertions(+), 91 deletions(-) create mode 100644 packages/mdx/src/remark/config.ts rename packages/mdx/src/remark/{preview.ts => transform.preview.ts} (100%) diff --git a/packages/mdx/src/remark/code.ts b/packages/mdx/src/remark/code.ts index d88e79e1..e14fd7b7 100644 --- a/packages/mdx/src/remark/code.ts +++ b/packages/mdx/src/remark/code.ts @@ -16,10 +16,11 @@ import { } from "./annotations" import { mergeFocus } from "../utils" import { CodeNode, SuperNode } from "./nodes" +import { CodeHikeConfig } from "./config" export async function transformCodeNodes( tree: SuperNode, - { theme }: { theme: any } + config: CodeHikeConfig ) { await visitAsync( tree, @@ -27,7 +28,7 @@ export async function transformCodeNodes( async (node: CodeNode, index, parent) => { await transformCode( { node, index, parent: parent! }, - { theme } + config ) } ) @@ -43,7 +44,7 @@ export function isEditorNode(node: SuperNode) { async function transformCode( nodeInfo: NodeInfo, - config: { theme: any } + config: CodeHikeConfig ) { toJSX(nodeInfo.node, { name: "CH.Code", @@ -52,7 +53,7 @@ async function transformCode( } export async function transformEditor( nodeInfo: NodeInfo, - config: { theme: any } + config: CodeHikeConfig ) { toJSX(nodeInfo.node, { name: "CH.Code", @@ -62,7 +63,7 @@ export async function transformEditor( export async function mapAnyCodeNode( nodeInfo: NodeInfo, - config: { theme: any } + config: CodeHikeConfig ) { const { node } = nodeInfo if (node.type === "code") { @@ -74,7 +75,7 @@ export async function mapAnyCodeNode( async function mapCode( nodeInfo: NodeInfo, - config: { theme: any } + config: CodeHikeConfig ): Promise { const file = await mapFile(nodeInfo, config) const props: EditorProps = { @@ -91,7 +92,7 @@ async function mapCode( export async function mapEditor( { node }: NodeInfo, - config: { theme: any } + config: CodeHikeConfig ): Promise { const [northNodes, southNodes = []] = splitChildren( node, @@ -146,7 +147,7 @@ export async function mapEditor( async function mapFile( { node, index, parent }: NodeInfo, - config: { theme: any } + config: CodeHikeConfig ): Promise { const { theme } = config diff --git a/packages/mdx/src/remark/config.ts b/packages/mdx/src/remark/config.ts new file mode 100644 index 00000000..82b6ec05 --- /dev/null +++ b/packages/mdx/src/remark/config.ts @@ -0,0 +1,20 @@ +export type CodeHikeConfig = { + theme: any + lineNumbers?: boolean + autoImport?: boolean + showCopyButton?: boolean +} + +/** + * Add defaults and normalize config + */ +export function addConfigDefaults( + config: Partial | undefined +): CodeHikeConfig { + // TODO warn when config looks weird + return { + ...config, + theme: config?.theme || {}, + autoImport: config?.autoImport === false ? false : true, + } +} diff --git a/packages/mdx/src/remark/editor.tsx b/packages/mdx/src/remark/editor.tsx index f323dbf1..04ab687d 100644 --- a/packages/mdx/src/remark/editor.tsx +++ b/packages/mdx/src/remark/editor.tsx @@ -1,10 +1,11 @@ import { visitAsync } from "./unist-utils" import { transformEditor } from "./code" import { JsxNode, SuperNode } from "./nodes" +import { CodeHikeConfig } from "./config" export async function transformEditorNodes( tree: SuperNode, - { theme }: { theme: any } + config: CodeHikeConfig ) { await visitAsync( tree, @@ -13,7 +14,7 @@ export async function transformEditorNodes( if (node.name === "CH.Code") { await transformEditor( { node, index, parent: parent! }, - { theme } + config ) } } diff --git a/packages/mdx/src/remark/inline-code.ts b/packages/mdx/src/remark/inline-code.ts index 567a469c..f635d04b 100644 --- a/packages/mdx/src/remark/inline-code.ts +++ b/packages/mdx/src/remark/inline-code.ts @@ -8,10 +8,11 @@ import { EditorStep } from "../mini-editor" import { Code } from "../utils" import { SuperNode, visit } from "./nodes" import visitParents from "unist-util-visit-parents" +import { CodeHikeConfig } from "./config" export async function transformInlineCodes( tree: SuperNode, - { theme }: { theme: any } + { theme }: CodeHikeConfig ) { // transform *`foo`* to foo visit(tree, "emphasis", (node: any) => { diff --git a/packages/mdx/src/remark/scrollycoding.ts b/packages/mdx/src/remark/scrollycoding.ts index 73cf0d9a..00c7537b 100644 --- a/packages/mdx/src/remark/scrollycoding.ts +++ b/packages/mdx/src/remark/scrollycoding.ts @@ -4,13 +4,14 @@ import { CH_CODE_CONFIG_PLACEHOLDER, } from "./unist-utils" import { extractStepsInfo } from "./steps" -import { getPresetConfig } from "./preview" +import { getPresetConfig } from "./transform.preview" import { transformLinks } from "./section" import { SuperNode } from "./nodes" +import { CodeHikeConfig } from "./config" export async function transformScrollycodings( tree: SuperNode, - config: { theme: any } + config: CodeHikeConfig ) { await visitAsync( tree, @@ -24,11 +25,11 @@ export async function transformScrollycodings( } async function transformScrollycoding( node: SuperNode, - { theme }: { theme: any } + config: CodeHikeConfig ) { const editorSteps = await extractStepsInfo( node, - { theme }, + config, "merge step with previous" ) diff --git a/packages/mdx/src/remark/section.ts b/packages/mdx/src/remark/section.ts index 125949cd..0446881e 100644 --- a/packages/mdx/src/remark/section.ts +++ b/packages/mdx/src/remark/section.ts @@ -1,10 +1,11 @@ import { visitAsync, toJSX } from "./unist-utils" import { isEditorNode, mapAnyCodeNode } from "./code" import { SuperNode, visit } from "./nodes" +import { CodeHikeConfig } from "./config" export async function transformSections( tree: SuperNode, - config: { theme: any } + config: CodeHikeConfig ) { await visitAsync( tree, @@ -19,7 +20,7 @@ export async function transformSections( async function transformSection( node: SuperNode, - config: { theme: any } + config: CodeHikeConfig ) { let props await visitAsync( diff --git a/packages/mdx/src/remark/slideshow.ts b/packages/mdx/src/remark/slideshow.ts index 9483e5a7..7896ba3b 100644 --- a/packages/mdx/src/remark/slideshow.ts +++ b/packages/mdx/src/remark/slideshow.ts @@ -4,12 +4,13 @@ import { CH_CODE_CONFIG_PLACEHOLDER, } from "./unist-utils" import { extractStepsInfo } from "./steps" -import { getPresetConfig } from "./preview" +import { getPresetConfig } from "./transform.preview" import { JsxNode, SuperNode } from "./nodes" +import { CodeHikeConfig } from "./config" export async function transformSlideshows( tree: SuperNode, - config: { theme: any } + config: CodeHikeConfig ) { await visitAsync( tree, @@ -23,11 +24,11 @@ export async function transformSlideshows( } async function transformSlideshow( node: SuperNode, - { theme }: { theme: any } + config: CodeHikeConfig ) { const editorSteps = await extractStepsInfo( node, - { theme }, + config, "merge step with previous" ) diff --git a/packages/mdx/src/remark/spotlight.ts b/packages/mdx/src/remark/spotlight.ts index 30d7c58f..011e72c6 100644 --- a/packages/mdx/src/remark/spotlight.ts +++ b/packages/mdx/src/remark/spotlight.ts @@ -4,12 +4,13 @@ import { CH_CODE_CONFIG_PLACEHOLDER, } from "./unist-utils" import { extractStepsInfo } from "./steps" -import { getPresetConfig } from "./preview" +import { getPresetConfig } from "./transform.preview" import { JsxNode, SuperNode } from "./nodes" +import { CodeHikeConfig } from "./config" export async function transformSpotlights( tree: SuperNode, - config: { theme: any } + config: CodeHikeConfig ) { await visitAsync( tree, @@ -24,11 +25,11 @@ export async function transformSpotlights( async function transformSpotlight( node: JsxNode, - { theme }: { theme: any } + config: CodeHikeConfig ) { const editorSteps = await extractStepsInfo( node, - { theme }, + config, "merge steps with header" ) diff --git a/packages/mdx/src/remark/steps.tsx b/packages/mdx/src/remark/steps.tsx index 01f52d96..3f893c6c 100644 --- a/packages/mdx/src/remark/steps.tsx +++ b/packages/mdx/src/remark/steps.tsx @@ -1,13 +1,14 @@ import { EditorStep } from "../mini-editor" import { isEditorNode, mapAnyCodeNode } from "./code" import { reduceSteps } from "./code-files-reducer" +import { CodeHikeConfig } from "./config" import { SuperNode } from "./nodes" // extract step info export async function extractStepsInfo( parent: SuperNode, - config: { theme: any }, + config: CodeHikeConfig, merge: | "merge steps with header" | "merge step with previous" diff --git a/packages/mdx/src/remark/preview.ts b/packages/mdx/src/remark/transform.preview.ts similarity index 100% rename from packages/mdx/src/remark/preview.ts rename to packages/mdx/src/remark/transform.preview.ts diff --git a/packages/mdx/src/remark/transform.ts b/packages/mdx/src/remark/transform.ts index 91d3f619..dc390a96 100644 --- a/packages/mdx/src/remark/transform.ts +++ b/packages/mdx/src/remark/transform.ts @@ -5,18 +5,12 @@ import { transformSpotlights } from "./spotlight" import { transformScrollycodings } from "./scrollycoding" import { transformSlideshows } from "./slideshow" import { transformInlineCodes } from "./inline-code" -import { transformPreviews } from "./preview" +import { transformPreviews } from "./transform.preview" import { valueToEstree } from "./to-estree" import { CH_CODE_CONFIG_VAR_NAME } from "./unist-utils" import { JsxNode, SuperNode, visit } from "./nodes" - -type CodeHikeConfig = { - theme: any - lineNumbers?: boolean - autoImport?: boolean - showCopyButton?: boolean -} +import { addConfigDefaults, CodeHikeConfig } from "./config" const transforms = [ transformPreviews, @@ -55,20 +49,6 @@ export function transform(unsafeConfig: CodeHikeConfig) { } } -/** - * Add defaults and normalize config - */ -function addConfigDefaults( - config: Partial | undefined -): CodeHikeConfig { - // TODO warn when config looks weird - return { - ...config, - theme: config?.theme || {}, - autoImport: config?.autoImport === false ? false : true, - } -} - /** * Returns a the list of component names * used inside the tree diff --git a/packages/mdx/src/remark/unist-utils.ts b/packages/mdx/src/remark/unist-utils.ts index 89bbc00b..7a209ef1 100644 --- a/packages/mdx/src/remark/unist-utils.ts +++ b/packages/mdx/src/remark/unist-utils.ts @@ -1,5 +1,6 @@ import { SuperNode, visit } from "./nodes" import { valueToEstree } from "./to-estree" +import { Expression } from "estree" export type NodeInfo = { node: N @@ -45,10 +46,17 @@ export async function visitAsync( await Promise.all(promises) } +// if one of the props in a toJSX call has the CH_CODE_CONFIG_PLACEHOLDER value +// it will be replaced with a reference to the CH_CODE_CONFIG_VAR_NAME var export const CH_CODE_CONFIG_PLACEHOLDER = "CH_CodeConfig" as any export const CH_CODE_CONFIG_VAR_NAME = "chCodeConfig" +/** + * Transforms a node into a JSX Flow ELement (or another given type). + * Most of the work is transforming the props object into an array + * of mdxJsxAttribute. + */ export function toJSX( node: any, { @@ -79,50 +87,47 @@ export function toJSX( return } if (props[key] === CH_CODE_CONFIG_PLACEHOLDER) { - ;(node as any).attributes.push({ - type: "mdxJsxAttribute", - name: key, - value: { - type: "mdxJsxAttributeValueExpression", - value: CH_CODE_CONFIG_VAR_NAME, - data: { - estree: { - type: "Program", - body: [ - { - type: "ExpressionStatement", - expression: { - type: "Identifier", - name: CH_CODE_CONFIG_VAR_NAME, - }, - }, - ], - sourceType: "module", - }, - }, - }, - }) + node.attributes.push( + toAttribute(key, CH_CODE_CONFIG_VAR_NAME, { + type: "Identifier", + name: CH_CODE_CONFIG_VAR_NAME, + }) + ) } else { - ;(node as any).attributes.push({ - type: "mdxJsxAttribute", - name: key, - value: { - type: "mdxJsxAttributeValueExpression", - value: JSON.stringify(props[key]), - data: { - estree: { - type: "Program", - body: [ - { - type: "ExpressionStatement", - expression: valueToEstree(props[key]), - }, - ], - sourceType: "module", - }, - }, - }, - }) + node.attributes.push( + toAttribute( + key, + JSON.stringify(props[key]), + valueToEstree(props[key]) + ) + ) } }) } + +function toAttribute( + key: string, + stringValue: string, + expression: Expression +) { + return { + type: "mdxJsxAttribute", + name: key, + value: { + type: "mdxJsxAttributeValueExpression", + value: stringValue, + data: { + estree: { + type: "Program", + body: [ + { + type: "ExpressionStatement", + expression: expression, + }, + ], + sourceType: "module", + }, + }, + }, + } +} From b01b1d068860a16fcc86c67a8724152e6afb9242 Mon Sep 17 00:00:00 2001 From: Rodrigo Pombo Date: Mon, 9 May 2022 10:20:10 +0000 Subject: [PATCH 3/7] Rename transform files --- packages/mdx/src/remark/code.ts | 35 ------------------ packages/mdx/src/remark/editor.tsx | 22 ------------ packages/mdx/src/remark/transform.code.ts | 36 +++++++++++++++++++ ...nline-code.ts => transform.inline-code.ts} | 0 ...lycoding.ts => transform.scrollycoding.ts} | 2 +- .../{section.ts => transform.section.ts} | 0 .../{slideshow.ts => transform.slideshow.ts} | 0 .../{spotlight.ts => transform.spotlight.ts} | 0 packages/mdx/src/remark/transform.ts | 36 +++++++++---------- 9 files changed, 54 insertions(+), 77 deletions(-) delete mode 100644 packages/mdx/src/remark/editor.tsx create mode 100644 packages/mdx/src/remark/transform.code.ts rename packages/mdx/src/remark/{inline-code.ts => transform.inline-code.ts} (100%) rename packages/mdx/src/remark/{scrollycoding.ts => transform.scrollycoding.ts} (95%) rename packages/mdx/src/remark/{section.ts => transform.section.ts} (100%) rename packages/mdx/src/remark/{slideshow.ts => transform.slideshow.ts} (100%) rename packages/mdx/src/remark/{spotlight.ts => transform.spotlight.ts} (100%) diff --git a/packages/mdx/src/remark/code.ts b/packages/mdx/src/remark/code.ts index e14fd7b7..3a3f7d72 100644 --- a/packages/mdx/src/remark/code.ts +++ b/packages/mdx/src/remark/code.ts @@ -18,22 +18,6 @@ import { mergeFocus } from "../utils" import { CodeNode, SuperNode } from "./nodes" import { CodeHikeConfig } from "./config" -export async function transformCodeNodes( - tree: SuperNode, - config: CodeHikeConfig -) { - await visitAsync( - tree, - "code", - async (node: CodeNode, index, parent) => { - await transformCode( - { node, index, parent: parent! }, - config - ) - } - ) -} - export function isEditorNode(node: SuperNode) { return ( node.type === "code" || @@ -42,25 +26,6 @@ export function isEditorNode(node: SuperNode) { ) } -async function transformCode( - nodeInfo: NodeInfo, - config: CodeHikeConfig -) { - toJSX(nodeInfo.node, { - name: "CH.Code", - props: await mapCode(nodeInfo, config), - }) -} -export async function transformEditor( - nodeInfo: NodeInfo, - config: CodeHikeConfig -) { - toJSX(nodeInfo.node, { - name: "CH.Code", - props: await mapEditor(nodeInfo, config), - }) -} - export async function mapAnyCodeNode( nodeInfo: NodeInfo, config: CodeHikeConfig diff --git a/packages/mdx/src/remark/editor.tsx b/packages/mdx/src/remark/editor.tsx deleted file mode 100644 index 04ab687d..00000000 --- a/packages/mdx/src/remark/editor.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { visitAsync } from "./unist-utils" -import { transformEditor } from "./code" -import { JsxNode, SuperNode } from "./nodes" -import { CodeHikeConfig } from "./config" - -export async function transformEditorNodes( - tree: SuperNode, - config: CodeHikeConfig -) { - await visitAsync( - tree, - "mdxJsxFlowElement", - async (node: JsxNode, index, parent) => { - if (node.name === "CH.Code") { - await transformEditor( - { node, index, parent: parent! }, - config - ) - } - } - ) -} diff --git a/packages/mdx/src/remark/transform.code.ts b/packages/mdx/src/remark/transform.code.ts new file mode 100644 index 00000000..125f4b94 --- /dev/null +++ b/packages/mdx/src/remark/transform.code.ts @@ -0,0 +1,36 @@ +import { NodeInfo, toJSX, visitAsync } from "./unist-utils" +import { mapEditor } from "./code" +import { CodeNode, JsxNode, SuperNode } from "./nodes" +import { CodeHikeConfig } from "./config" + +export async function transformCodes( + tree: SuperNode, + config: CodeHikeConfig +) { + await visitAsync( + tree, + "mdxJsxFlowElement", + async (node: JsxNode, index, parent) => { + if (node.name === "CH.Code") { + await transformCode({ node, index, parent }, config) + } + } + ) + await visitAsync( + tree, + "code", + async (node: CodeNode, index, parent) => { + await transformCode({ node, index, parent }, config) + } + ) +} + +async function transformCode( + nodeInfo: NodeInfo, + config: CodeHikeConfig +) { + toJSX(nodeInfo.node, { + name: "CH.Code", + props: await mapEditor(nodeInfo, config), + }) +} diff --git a/packages/mdx/src/remark/inline-code.ts b/packages/mdx/src/remark/transform.inline-code.ts similarity index 100% rename from packages/mdx/src/remark/inline-code.ts rename to packages/mdx/src/remark/transform.inline-code.ts diff --git a/packages/mdx/src/remark/scrollycoding.ts b/packages/mdx/src/remark/transform.scrollycoding.ts similarity index 95% rename from packages/mdx/src/remark/scrollycoding.ts rename to packages/mdx/src/remark/transform.scrollycoding.ts index 00c7537b..fe538a1a 100644 --- a/packages/mdx/src/remark/scrollycoding.ts +++ b/packages/mdx/src/remark/transform.scrollycoding.ts @@ -5,7 +5,7 @@ import { } from "./unist-utils" import { extractStepsInfo } from "./steps" import { getPresetConfig } from "./transform.preview" -import { transformLinks } from "./section" +import { transformLinks } from "./transform.section" import { SuperNode } from "./nodes" import { CodeHikeConfig } from "./config" diff --git a/packages/mdx/src/remark/section.ts b/packages/mdx/src/remark/transform.section.ts similarity index 100% rename from packages/mdx/src/remark/section.ts rename to packages/mdx/src/remark/transform.section.ts diff --git a/packages/mdx/src/remark/slideshow.ts b/packages/mdx/src/remark/transform.slideshow.ts similarity index 100% rename from packages/mdx/src/remark/slideshow.ts rename to packages/mdx/src/remark/transform.slideshow.ts diff --git a/packages/mdx/src/remark/spotlight.ts b/packages/mdx/src/remark/transform.spotlight.ts similarity index 100% rename from packages/mdx/src/remark/spotlight.ts rename to packages/mdx/src/remark/transform.spotlight.ts diff --git a/packages/mdx/src/remark/transform.ts b/packages/mdx/src/remark/transform.ts index dc390a96..7b5f130f 100644 --- a/packages/mdx/src/remark/transform.ts +++ b/packages/mdx/src/remark/transform.ts @@ -1,10 +1,9 @@ -import { transformCodeNodes } from "./code" -import { transformEditorNodes } from "./editor" -import { transformSections } from "./section" -import { transformSpotlights } from "./spotlight" -import { transformScrollycodings } from "./scrollycoding" -import { transformSlideshows } from "./slideshow" -import { transformInlineCodes } from "./inline-code" +import { transformCodes } from "./transform.code" +import { transformSections } from "./transform.section" +import { transformSpotlights } from "./transform.spotlight" +import { transformScrollycodings } from "./transform.scrollycoding" +import { transformSlideshows } from "./transform.slideshow" +import { transformInlineCodes } from "./transform.inline-code" import { transformPreviews } from "./transform.preview" import { valueToEstree } from "./to-estree" @@ -19,8 +18,7 @@ const transforms = [ transformSlideshows, transformSections, transformInlineCodes, - transformEditorNodes, - transformCodeNodes, + transformCodes, ] export function transform(unsafeConfig: CodeHikeConfig) { @@ -31,20 +29,20 @@ export function transform(unsafeConfig: CodeHikeConfig) { for (const transform of transforms) { await transform(tree, config) } - } catch (e) { - console.error("error running remarkCodeHike", e) - throw e - } - const usedCodeHikeComponents = - getUsedCodeHikeComponentNames(tree) + const usedCodeHikeComponents = + getUsedCodeHikeComponentNames(tree) - if (usedCodeHikeComponents.length > 0) { - addConfig(tree, config) + if (usedCodeHikeComponents.length > 0) { + addConfig(tree, config) - if (config.autoImport) { - addSmartImport(tree, usedCodeHikeComponents) + if (config.autoImport) { + addSmartImport(tree, usedCodeHikeComponents) + } } + } catch (e) { + console.error("error running remarkCodeHike", e) + throw e } } } From 71ab3ca0865522f5928d6f5f826d7e4f99a6d2d5 Mon Sep 17 00:00:00 2001 From: Rodrigo Pombo Date: Mon, 9 May 2022 11:08:35 +0000 Subject: [PATCH 4/7] Remove config placeholder --- packages/mdx/src/remark/code.ts | 18 +++------ packages/mdx/src/remark/steps.tsx | 9 ++--- packages/mdx/src/remark/transform.code.ts | 5 ++- .../mdx/src/remark/transform.inline-code.ts | 8 +--- packages/mdx/src/remark/transform.preview.ts | 11 ++---- .../mdx/src/remark/transform.scrollycoding.ts | 8 +--- packages/mdx/src/remark/transform.section.ts | 8 +++- .../mdx/src/remark/transform.slideshow.ts | 8 +--- .../mdx/src/remark/transform.spotlight.ts | 8 +--- packages/mdx/src/remark/unist-utils.ts | 37 +++++++++---------- 10 files changed, 47 insertions(+), 73 deletions(-) diff --git a/packages/mdx/src/remark/code.ts b/packages/mdx/src/remark/code.ts index 3a3f7d72..c8d406fb 100644 --- a/packages/mdx/src/remark/code.ts +++ b/packages/mdx/src/remark/code.ts @@ -1,12 +1,6 @@ import { highlight } from "../highlighter" import { extractLinks } from "./links" -import { - visitAsync, - toJSX, - NodeInfo, - splitChildren, - CH_CODE_CONFIG_PLACEHOLDER, -} from "./unist-utils" +import { NodeInfo, splitChildren } from "./unist-utils" import { CodeStep } from "../smooth-code" import { EditorProps } from "../mini-editor" import { @@ -38,19 +32,20 @@ export async function mapAnyCodeNode( } } +type Props = Omit + async function mapCode( nodeInfo: NodeInfo, config: CodeHikeConfig -): Promise { +): Promise { const file = await mapFile(nodeInfo, config) - const props: EditorProps = { + const props: Props = { northPanel: { tabs: [file.name], active: file.name, heightRatio: 1, }, files: [file], - codeConfig: CH_CODE_CONFIG_PLACEHOLDER, } return props } @@ -58,7 +53,7 @@ async function mapCode( export async function mapEditor( { node }: NodeInfo, config: CodeHikeConfig -): Promise { +): Promise { const [northNodes, southNodes = []] = splitChildren( node, "thematicBreak" @@ -105,7 +100,6 @@ export async function mapEditor( } : undefined, files: allFiles as any, - codeConfig: CH_CODE_CONFIG_PLACEHOLDER, } return props } diff --git a/packages/mdx/src/remark/steps.tsx b/packages/mdx/src/remark/steps.tsx index 3f893c6c..2dbd0383 100644 --- a/packages/mdx/src/remark/steps.tsx +++ b/packages/mdx/src/remark/steps.tsx @@ -30,11 +30,10 @@ export async function extractStepsInfo( steps[stepIndex] = steps[stepIndex] || { children: [] } const step = steps[stepIndex] if (!step.editorStep && isEditorNode(child)) { - const { codeConfig, ...editorStep } = - await mapAnyCodeNode( - { node: child, parent, index: i }, - config - ) + const editorStep = await mapAnyCodeNode( + { node: child, parent, index: i }, + config + ) if (stepIndex === 0) { // for the header props, keep it as it is diff --git a/packages/mdx/src/remark/transform.code.ts b/packages/mdx/src/remark/transform.code.ts index 125f4b94..9ee747bd 100644 --- a/packages/mdx/src/remark/transform.code.ts +++ b/packages/mdx/src/remark/transform.code.ts @@ -1,5 +1,5 @@ import { NodeInfo, toJSX, visitAsync } from "./unist-utils" -import { mapEditor } from "./code" +import { mapAnyCodeNode, mapEditor } from "./code" import { CodeNode, JsxNode, SuperNode } from "./nodes" import { CodeHikeConfig } from "./config" @@ -31,6 +31,7 @@ async function transformCode( ) { toJSX(nodeInfo.node, { name: "CH.Code", - props: await mapEditor(nodeInfo, config), + props: await mapAnyCodeNode(nodeInfo, config), + addConfigProp: true, }) } diff --git a/packages/mdx/src/remark/transform.inline-code.ts b/packages/mdx/src/remark/transform.inline-code.ts index f635d04b..9ffb0b5d 100644 --- a/packages/mdx/src/remark/transform.inline-code.ts +++ b/packages/mdx/src/remark/transform.inline-code.ts @@ -1,8 +1,4 @@ -import { - visitAsync, - toJSX, - CH_CODE_CONFIG_PLACEHOLDER, -} from "./unist-utils" +import { visitAsync, toJSX } from "./unist-utils" import { highlight } from "../highlighter" import { EditorStep } from "../mini-editor" import { Code } from "../utils" @@ -46,9 +42,9 @@ export async function transformInlineCodes( lang, theme ), - codeConfig: CH_CODE_CONFIG_PLACEHOLDER, }, appendProps: true, + addConfigProp: true, }) } } diff --git a/packages/mdx/src/remark/transform.preview.ts b/packages/mdx/src/remark/transform.preview.ts index 2f1c709f..6253a3ce 100644 --- a/packages/mdx/src/remark/transform.preview.ts +++ b/packages/mdx/src/remark/transform.preview.ts @@ -1,9 +1,5 @@ import fetch from "node-fetch" -import { - visitAsync, - toJSX, - CH_CODE_CONFIG_PLACEHOLDER, -} from "./unist-utils" +import { visitAsync, toJSX } from "./unist-utils" import { JsxNode, SuperNode } from "./nodes" export async function getPresetConfig( @@ -36,9 +32,8 @@ export async function transformPreviews(tree: SuperNode) { async function transformPreview(node: Node) { toJSX(node, { - props: { - codeConfig: CH_CODE_CONFIG_PLACEHOLDER, - }, + props: {}, appendProps: true, + addConfigProp: true, }) } diff --git a/packages/mdx/src/remark/transform.scrollycoding.ts b/packages/mdx/src/remark/transform.scrollycoding.ts index fe538a1a..5385028b 100644 --- a/packages/mdx/src/remark/transform.scrollycoding.ts +++ b/packages/mdx/src/remark/transform.scrollycoding.ts @@ -1,8 +1,4 @@ -import { - visitAsync, - toJSX, - CH_CODE_CONFIG_PLACEHOLDER, -} from "./unist-utils" +import { visitAsync, toJSX } from "./unist-utils" import { extractStepsInfo } from "./steps" import { getPresetConfig } from "./transform.preview" import { transformLinks } from "./transform.section" @@ -41,10 +37,10 @@ async function transformScrollycoding( toJSX(node, { props: { - codeConfig: CH_CODE_CONFIG_PLACEHOLDER, editorSteps: editorSteps, presetConfig, }, appendProps: true, + addConfigProp: true, }) } diff --git a/packages/mdx/src/remark/transform.section.ts b/packages/mdx/src/remark/transform.section.ts index 0446881e..1b93ae7a 100644 --- a/packages/mdx/src/remark/transform.section.ts +++ b/packages/mdx/src/remark/transform.section.ts @@ -29,7 +29,7 @@ async function transformSection( async (editorNode, index, parent) => { if (isEditorNode(editorNode)) { props = await mapAnyCodeNode( - { node: editorNode, index, parent: parent! }, + { node: editorNode, index, parent }, config ) toJSX(editorNode, { @@ -43,7 +43,11 @@ async function transformSection( transformLinks(node) if (props) { - toJSX(node, { name: "CH.Section", props: props as any }) + toJSX(node, { + name: "CH.Section", + props: props as any, + addConfigProp: true, + }) } else { toJSX(node, { name: "div", props: {} }) } diff --git a/packages/mdx/src/remark/transform.slideshow.ts b/packages/mdx/src/remark/transform.slideshow.ts index 7896ba3b..db6006b3 100644 --- a/packages/mdx/src/remark/transform.slideshow.ts +++ b/packages/mdx/src/remark/transform.slideshow.ts @@ -1,8 +1,4 @@ -import { - visitAsync, - toJSX, - CH_CODE_CONFIG_PLACEHOLDER, -} from "./unist-utils" +import { visitAsync, toJSX } from "./unist-utils" import { extractStepsInfo } from "./steps" import { getPresetConfig } from "./transform.preview" import { JsxNode, SuperNode } from "./nodes" @@ -38,10 +34,10 @@ async function transformSlideshow( toJSX(node, { props: { - codeConfig: CH_CODE_CONFIG_PLACEHOLDER, editorSteps: editorSteps, presetConfig, }, appendProps: true, + addConfigProp: true, }) } diff --git a/packages/mdx/src/remark/transform.spotlight.ts b/packages/mdx/src/remark/transform.spotlight.ts index 011e72c6..d141359a 100644 --- a/packages/mdx/src/remark/transform.spotlight.ts +++ b/packages/mdx/src/remark/transform.spotlight.ts @@ -1,8 +1,4 @@ -import { - visitAsync, - toJSX, - CH_CODE_CONFIG_PLACEHOLDER, -} from "./unist-utils" +import { visitAsync, toJSX } from "./unist-utils" import { extractStepsInfo } from "./steps" import { getPresetConfig } from "./transform.preview" import { JsxNode, SuperNode } from "./nodes" @@ -39,10 +35,10 @@ async function transformSpotlight( toJSX(node, { props: { - codeConfig: CH_CODE_CONFIG_PLACEHOLDER, editorSteps: editorSteps, presetConfig, }, appendProps: true, + addConfigProp: true, }) } diff --git a/packages/mdx/src/remark/unist-utils.ts b/packages/mdx/src/remark/unist-utils.ts index 7a209ef1..8e83ac4a 100644 --- a/packages/mdx/src/remark/unist-utils.ts +++ b/packages/mdx/src/remark/unist-utils.ts @@ -46,10 +46,6 @@ export async function visitAsync( await Promise.all(promises) } -// if one of the props in a toJSX call has the CH_CODE_CONFIG_PLACEHOLDER value -// it will be replaced with a reference to the CH_CODE_CONFIG_VAR_NAME var -export const CH_CODE_CONFIG_PLACEHOLDER = - "CH_CodeConfig" as any export const CH_CODE_CONFIG_VAR_NAME = "chCodeConfig" /** @@ -64,14 +60,15 @@ export function toJSX( props, name, appendProps = false, + addConfigProp = false, }: { type?: string props: Record name?: string appendProps?: boolean + addConfigProp?: boolean } ) { - // console.log(`transforming ${node.name} to ${name}`) node.type = type if (name) { node.name = name @@ -82,26 +79,26 @@ export function toJSX( node.attributes = node.attributes || [] } + if (addConfigProp) { + node.attributes.push( + toAttribute("codeConfig", CH_CODE_CONFIG_VAR_NAME, { + type: "Identifier", + name: CH_CODE_CONFIG_VAR_NAME, + }) + ) + } + Object.keys(props).forEach(key => { if (props[key] === undefined) { return } - if (props[key] === CH_CODE_CONFIG_PLACEHOLDER) { - node.attributes.push( - toAttribute(key, CH_CODE_CONFIG_VAR_NAME, { - type: "Identifier", - name: CH_CODE_CONFIG_VAR_NAME, - }) + node.attributes.push( + toAttribute( + key, + JSON.stringify(props[key]), + valueToEstree(props[key]) ) - } else { - node.attributes.push( - toAttribute( - key, - JSON.stringify(props[key]), - valueToEstree(props[key]) - ) - ) - } + ) }) } From 6e6e539f312968ad36c583f3aee72698c9ea7ee9 Mon Sep 17 00:00:00 2001 From: Rodrigo Pombo Date: Tue, 10 May 2022 12:29:45 +0000 Subject: [PATCH 5/7] Support more props in CH.Code --- packages/mdx/dev/content/passing-props.mdx | 48 ++++++++++++++++++++++ packages/mdx/src/mdx-client/code.tsx | 47 +++++++++++++++++---- packages/mdx/src/remark/transform.code.ts | 1 + 3 files changed, 88 insertions(+), 8 deletions(-) create mode 100644 packages/mdx/dev/content/passing-props.mdx diff --git a/packages/mdx/dev/content/passing-props.mdx b/packages/mdx/dev/content/passing-props.mdx new file mode 100644 index 00000000..7fba616d --- /dev/null +++ b/packages/mdx/dev/content/passing-props.mdx @@ -0,0 +1,48 @@ +`` + + + +```js +console.log(1) +``` + + + +`` + + + +```js index.js +console.log(2) +``` + +```python foo.py +print(3) +``` + +--- + +```html index.html +
Hi
+``` + + + +`` + + + +```js index.js +console.log(2) +console.log(2) +console.log(2) +console.log(2) +console.log(2) +console.log(2) +console.log(2) +console.log(2) +console.log(2) +console.log(2) +``` + + diff --git a/packages/mdx/src/mdx-client/code.tsx b/packages/mdx/src/mdx-client/code.tsx index f0326cae..672508b2 100644 --- a/packages/mdx/src/mdx-client/code.tsx +++ b/packages/mdx/src/mdx-client/code.tsx @@ -5,8 +5,11 @@ import { EditorProps, EditorStep, } from "../mini-editor" +import { CodeHikeConfig } from "remark/config" -export function Code(props: EditorProps) { +export function Code( + props: EditorProps & Partial +) { const [step, setStep] = React.useState(props) function onTabClick(filename: string) { @@ -22,29 +25,57 @@ export function InnerCode({ ...props }: EditorProps & { onTabClick?: (filename: string) => void -}) { +} & Partial) { + const { + lineNumbers, + showCopyButton, + className, + style, + ...editorProps + } = props + + const codeConfig = { + ...props.codeConfig, + lineNumbers, + showCopyButton, + } + if ( !props.southPanel && props.files.length === 1 && !props.files[0].name ) { return ( -
+
) } else { const frameProps = { - ...props?.frameProps, + ...editorProps?.frameProps, onTabClick, } return ( -
- +
+
) } diff --git a/packages/mdx/src/remark/transform.code.ts b/packages/mdx/src/remark/transform.code.ts index 9ee747bd..f25727e8 100644 --- a/packages/mdx/src/remark/transform.code.ts +++ b/packages/mdx/src/remark/transform.code.ts @@ -32,6 +32,7 @@ async function transformCode( toJSX(nodeInfo.node, { name: "CH.Code", props: await mapAnyCodeNode(nodeInfo, config), + appendProps: true, addConfigProp: true, }) } From 89722cc3b697373225ffaf6dddad25899f1267ac Mon Sep 17 00:00:00 2001 From: Rodrigo Pombo Date: Tue, 10 May 2022 12:30:20 +0000 Subject: [PATCH 6/7] Fix wrong text --- packages/mdx/dev/content/passing-props.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mdx/dev/content/passing-props.mdx b/packages/mdx/dev/content/passing-props.mdx index 7fba616d..5ed06a3e 100644 --- a/packages/mdx/dev/content/passing-props.mdx +++ b/packages/mdx/dev/content/passing-props.mdx @@ -28,7 +28,7 @@ print(3) -`` +`` From 33473023f324aa928e61b10e8b7b8d7eb5050a13 Mon Sep 17 00:00:00 2001 From: Rodrigo Pombo Date: Tue, 10 May 2022 13:00:39 +0000 Subject: [PATCH 7/7] Fix parent config --- packages/mdx/src/mdx-client/code.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/mdx/src/mdx-client/code.tsx b/packages/mdx/src/mdx-client/code.tsx index 672508b2..899f6880 100644 --- a/packages/mdx/src/mdx-client/code.tsx +++ b/packages/mdx/src/mdx-client/code.tsx @@ -36,8 +36,14 @@ export function InnerCode({ const codeConfig = { ...props.codeConfig, - lineNumbers, - showCopyButton, + lineNumbers: + lineNumbers == null + ? props.codeConfig?.lineNumbers + : lineNumbers, + showCopyButton: + showCopyButton == null + ? props.codeConfig?.showCopyButton + : showCopyButton, } if (