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 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/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", 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
+    =
+    []
+  

+

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": "*"
+  }
+}
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: