From 9ae57ed82c89e37ced68945478919f3a1e204559 Mon Sep 17 00:00:00 2001 From: Rodrigo Pombo Date: Wed, 30 Apr 2025 11:41:16 +0200 Subject: [PATCH 1/2] More flexible !from directive --- .changeset/silent-shoes-add.md | 5 ++ apps/web/content/docs/concepts/code.mdx | 2 +- .../src/mdx/0.import-code-from-path.ts | 26 +++++---- packages/codehike/tests/md-suite/_readme.md | 7 +++ .../codehike/tests/md-suite/assets/test.py | 5 +- .../codehike/tests/md-suite/import-code.0.mdx | 11 ++++ .../tests/md-suite/import-code.0.render.tsx | 21 ++++++++ .../md-suite/import-code.7.compiled-jsx.jsx | 12 +++-- .../md-suite/import-code.9.rendered.html | 53 +++++++++++++++++++ 9 files changed, 124 insertions(+), 18 deletions(-) create mode 100644 .changeset/silent-shoes-add.md create mode 100644 packages/codehike/tests/md-suite/import-code.0.render.tsx create mode 100644 packages/codehike/tests/md-suite/import-code.9.rendered.html diff --git a/.changeset/silent-shoes-add.md b/.changeset/silent-shoes-add.md new file mode 100644 index 00000000..ba028c66 --- /dev/null +++ b/.changeset/silent-shoes-add.md @@ -0,0 +1,5 @@ +--- +"codehike": patch +--- + +More flexible `!from` directive diff --git a/apps/web/content/docs/concepts/code.mdx b/apps/web/content/docs/concepts/code.mdx index 2ee60e27..7b97cdeb 100644 --- a/apps/web/content/docs/concepts/code.mdx +++ b/apps/web/content/docs/concepts/code.mdx @@ -129,7 +129,7 @@ You can use the [Theme Editor](https://themes.codehike.org/editor) to customize To include code from a file in your markdown codeblocks, you can use the `!from` directive followed by the path to the file (relative to the markdown file). ````txt -```js index.js +```js !from ./assets/index.js ``` ```` diff --git a/packages/codehike/src/mdx/0.import-code-from-path.ts b/packages/codehike/src/mdx/0.import-code-from-path.ts index 4129c399..addb211b 100644 --- a/packages/codehike/src/mdx/0.import-code-from-path.ts +++ b/packages/codehike/src/mdx/0.import-code-from-path.ts @@ -1,13 +1,8 @@ import { Code, Root } from "mdast" import { visit } from "unist-util-visit" - /** - * Find all codeblocks like: - * - * ```jsx - * !from ./foo/bar.js - * ``` - * and replace the value with the content of the referenced file. + * Find all codeblocks that contain lines starting with !from + * and replace those lines with the content from the referenced files. */ export async function transformImportedCode( tree: Root, @@ -15,7 +10,7 @@ export async function transformImportedCode( ) { const nodes: Code[] = [] visit(tree, "code", (node) => { - if (node.value?.startsWith("!from ")) { + if (node.value?.includes("\n!from ") || node.value?.startsWith("!from ")) { nodes.push(node) } }) @@ -27,9 +22,18 @@ export async function transformImportedCode( const mdxPath = file?.history ? file.history[file.history.length - 1] : null await Promise.all( nodes.map(async (code) => { - const fromData = code.value.slice(6).trim() - const [codepath, range] = fromData?.split(/\s+/) || [] - code.value = await readFile(codepath, mdxPath, range) + const lines = code.value.split("\n") + const newLines = await Promise.all( + lines.map(async (line) => { + if (line.startsWith("!from ")) { + const fromData = line.slice(6).trim() + const [codepath, range] = fromData?.split(/\s+/) || [] + return await readFile(codepath, mdxPath, range) + } + return line + }), + ) + code.value = newLines.join("\n") }), ) diff --git a/packages/codehike/tests/md-suite/_readme.md b/packages/codehike/tests/md-suite/_readme.md index 16a104d8..0e2fe35b 100644 --- a/packages/codehike/tests/md-suite/_readme.md +++ b/packages/codehike/tests/md-suite/_readme.md @@ -13,13 +13,20 @@ snapshots: - after-rehype - before-recma-compiled-js - before-recma-compiled-jsx + - before-recma-compiled-function - before-recma-js + - before-recma-js-dev - before-recma-jsx - after-recma-js + - after-recma-js-dev - after-recma-jsx - compiled-js + - compiled-js-dev - compiled-jsx + - compiled-function - parsed-jsx + - rendered + - rendered-dev --- ``` diff --git a/packages/codehike/tests/md-suite/assets/test.py b/packages/codehike/tests/md-suite/assets/test.py index 91a4fc94..dde0f6d5 100644 --- a/packages/codehike/tests/md-suite/assets/test.py +++ b/packages/codehike/tests/md-suite/assets/test.py @@ -1,4 +1,3 @@ +# !mark inside import random - -my_list = [1, 'a', 32, 'c', 'd', 31] -print(random.choice(my_list)) \ No newline at end of file +my_list = [] \ No newline at end of file diff --git a/packages/codehike/tests/md-suite/import-code.0.mdx b/packages/codehike/tests/md-suite/import-code.0.mdx index a2d2556c..15928f99 100644 --- a/packages/codehike/tests/md-suite/import-code.0.mdx +++ b/packages/codehike/tests/md-suite/import-code.0.mdx @@ -1,6 +1,7 @@ --- snapshots: - compiled-jsx + - rendered --- hello @@ -12,3 +13,13 @@ hello ```py ! !from ./assets/test.py ``` + +```py +# !mark(2) bar +!from ./assets/test.py + +def hello(): + print("hello") + +!from ./assets/test.py +``` diff --git a/packages/codehike/tests/md-suite/import-code.0.render.tsx b/packages/codehike/tests/md-suite/import-code.0.render.tsx new file mode 100644 index 00000000..091c9917 --- /dev/null +++ b/packages/codehike/tests/md-suite/import-code.0.render.tsx @@ -0,0 +1,21 @@ +import { MDXContent } from "mdx/types" +import { AnnotationHandler, highlight, Pre, RawCode } from "../../src/code" +import React from "react" + +export function render(Content: MDXContent) { + // @ts-ignore + return +} + +async function MyCode({ codeblock }: { codeblock: RawCode }) { + const highlighted = await highlight(codeblock, "github-dark") + return 
+}
+
+const mark: AnnotationHandler = {
+  name: "mark",
+  Pre: ({ _stack, ...props }) => 
,
+  Block: ({ children, annotation }) => (
+    {children}
+  ),
+}
diff --git a/packages/codehike/tests/md-suite/import-code.7.compiled-jsx.jsx b/packages/codehike/tests/md-suite/import-code.7.compiled-jsx.jsx
index 10141e78..5dbb03be 100644
--- a/packages/codehike/tests/md-suite/import-code.7.compiled-jsx.jsx
+++ b/packages/codehike/tests/md-suite/import-code.7.compiled-jsx.jsx
@@ -11,10 +11,17 @@ function _createMdxContent(props) {
     children: (
       <>
         <_components.p>{"hello"}
+        
         hello

+

+  
+    

+      import
+      random
+    

+  
+  

+    my_list
+    =
+    []
+  

+

+

+  
+    

+      import
+      random
+    

+  
+  
+    

+      my_list
+      =
+      []
+    

+  
+  

+  

+    def
+    hello
+    ():
+  

+  

+    print
+    (
+    "hello"
+    )
+  

+  

+  
+    

+      import
+      random
+    

+  
+  

+    my_list
+    =
+    []
+  

+


From 6f221af07e8037820c68eeb6d51876c9578281d0 Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo 
Date: Wed, 30 Apr 2025 11:53:24 +0200
Subject: [PATCH 2/2] Add fake imported file

---
 apps/web/content/docs/concepts/assets/index.js | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 apps/web/content/docs/concepts/assets/index.js

diff --git a/apps/web/content/docs/concepts/assets/index.js b/apps/web/content/docs/concepts/assets/index.js
new file mode 100644
index 00000000..6fa78b74
--- /dev/null
+++ b/apps/web/content/docs/concepts/assets/index.js
@@ -0,0 +1 @@
+!from ./assets/index.js
\ No newline at end of file