From 9ae57ed82c89e37ced68945478919f3a1e204559 Mon Sep 17 00:00:00 2001 From: Rodrigo Pombo Date: Wed, 30 Apr 2025 11:41:16 +0200 Subject: [PATCH 1/5] 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/5] 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

From c8815fa63f1b1ece57f3aac7f73f30dfb710ac81 Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo 
Date: Thu, 1 May 2025 11:10:00 +0200
Subject: [PATCH 3/5] Better turbopack support

---
 .changeset/rotten-stingrays-play.md |  5 +++++
 packages/recma/index.js             |  2 ++
 packages/recma/package.json         | 12 ++++++++++++
 packages/remark/index.js            |  2 ++
 packages/remark/package.json        | 12 ++++++++++++
 5 files changed, 33 insertions(+)
 create mode 100644 .changeset/rotten-stingrays-play.md
 create mode 100644 packages/recma/index.js
 create mode 100644 packages/recma/package.json
 create mode 100644 packages/remark/index.js
 create mode 100644 packages/remark/package.json

diff --git a/.changeset/rotten-stingrays-play.md b/.changeset/rotten-stingrays-play.md
new file mode 100644
index 00000000..b59ef88c
--- /dev/null
+++ b/.changeset/rotten-stingrays-play.md
@@ -0,0 +1,5 @@
+---
+"codehike": patch
+---
+
+Better turbopack support
diff --git a/packages/recma/index.js b/packages/recma/index.js
new file mode 100644
index 00000000..1dc0ba08
--- /dev/null
+++ b/packages/recma/index.js
@@ -0,0 +1,2 @@
+import { recmaCodeHike } from "codehike/mdx"
+export default recmaCodeHike
diff --git a/packages/recma/package.json b/packages/recma/package.json
new file mode 100644
index 00000000..3bdab687
--- /dev/null
+++ b/packages/recma/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "recma-codehike",
+  "version": "0.0.1",
+  "main": "index.js",
+  "type": "module",
+  "sideEffects": false,
+  "license": "MIT",
+  "repository": "code-hike/codehike",
+  "dependencies": {
+    "codehike": "*"
+  }
+}
diff --git a/packages/remark/index.js b/packages/remark/index.js
new file mode 100644
index 00000000..f5c9dc16
--- /dev/null
+++ b/packages/remark/index.js
@@ -0,0 +1,2 @@
+import { remarkCodeHike } from "codehike/mdx"
+export default remarkCodeHike
diff --git a/packages/remark/package.json b/packages/remark/package.json
new file mode 100644
index 00000000..3e4b11cc
--- /dev/null
+++ b/packages/remark/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "remark-codehike",
+  "version": "0.0.1",
+  "main": "index.js",
+  "type": "module",
+  "sideEffects": false,
+  "license": "MIT",
+  "repository": "code-hike/codehike",
+  "dependencies": {
+    "codehike": "*"
+  }
+}

From f71f54dbe61ec447a299083a47e61587cd7327c4 Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo 
Date: Thu, 1 May 2025 11:12:11 +0200
Subject: [PATCH 4/5] Update lockfile

---
 pnpm-lock.yaml | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 90afdf7a..e766e637 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -254,6 +254,18 @@ importers:
         specifier: ^3.22.4
         version: 3.22.4
 
+  packages/recma:
+    dependencies:
+      codehike:
+        specifier: '*'
+        version: 1.0.5
+
+  packages/remark:
+    dependencies:
+      codehike:
+        specifier: '*'
+        version: 1.0.5
+
 packages:
 
   '@actions/exec@1.1.1':
@@ -2107,6 +2119,9 @@ packages:
     resolution: {integrity: sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==}
     engines: {node: '>= 4.0'}
 
+  codehike@1.0.5:
+    resolution: {integrity: sha512-y3lL/3nPcvT7GNuEKw687AIip1Mg864lA/knWcCGn7Yp2FBQovsPqPTCpf/aodzWZ12HjWGfli+oxaSeuSyFXg==}
+
   collapse-white-space@2.1.0:
     resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
 
@@ -6519,6 +6534,16 @@ snapshots:
       chalk: 2.4.2
       q: 1.5.1
 
+  codehike@1.0.5:
+    dependencies:
+      '@code-hike/lighter': 1.0.1
+      diff: 5.1.0
+      estree-util-visit: 2.0.0
+      mdast-util-mdx-jsx: 3.0.0
+      unist-util-visit: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   collapse-white-space@2.1.0: {}
 
   color-convert@1.9.3:

From 4b5484de0aa063f6617a5e3de0e3a96812090fcd Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" 
Date: Thu, 1 May 2025 09:16:55 +0000
Subject: [PATCH 5/5] codehike@1.0.6

---
 .changeset/rotten-stingrays-play.md | 5 -----
 .changeset/silent-shoes-add.md      | 5 -----
 packages/codehike/CHANGELOG.md      | 8 ++++++++
 packages/codehike/package.json      | 2 +-
 4 files changed, 9 insertions(+), 11 deletions(-)
 delete mode 100644 .changeset/rotten-stingrays-play.md
 delete mode 100644 .changeset/silent-shoes-add.md

diff --git a/.changeset/rotten-stingrays-play.md b/.changeset/rotten-stingrays-play.md
deleted file mode 100644
index b59ef88c..00000000
--- a/.changeset/rotten-stingrays-play.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"codehike": patch
----
-
-Better turbopack support
diff --git a/.changeset/silent-shoes-add.md b/.changeset/silent-shoes-add.md
deleted file mode 100644
index ba028c66..00000000
--- a/.changeset/silent-shoes-add.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"codehike": patch
----
-
-More flexible `!from` directive
diff --git a/packages/codehike/CHANGELOG.md b/packages/codehike/CHANGELOG.md
index a5246ad8..3b52c94e 100644
--- a/packages/codehike/CHANGELOG.md
+++ b/packages/codehike/CHANGELOG.md
@@ -1,5 +1,13 @@
 # codehike
 
+## 1.0.6
+
+### Patch Changes
+
+- [#513](https://github.com/code-hike/codehike/pull/513) [`c8815fa`](https://github.com/code-hike/codehike/commit/c8815fa63f1b1ece57f3aac7f73f30dfb710ac81) Thanks [@pomber](https://github.com/pomber)! - Better turbopack support
+
+- [#510](https://github.com/code-hike/codehike/pull/510) [`9ae57ed`](https://github.com/code-hike/codehike/commit/9ae57ed82c89e37ced68945478919f3a1e204559) Thanks [@pomber](https://github.com/pomber)! - More flexible `!from` directive
+
 ## 1.0.5
 
 ### Patch Changes
diff --git a/packages/codehike/package.json b/packages/codehike/package.json
index f8eb0164..9fe5a12d 100644
--- a/packages/codehike/package.json
+++ b/packages/codehike/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codehike",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Build rich content websites with Markdown and React",
   "keywords": [
     "react",