Skip to content

Commit ced86ac

Browse files
pomberpomber
authored
Merge pull request #189 from code-hike/next
v0.5.2
2 parents b09b2af + 71d5ea2 commit ced86ac

29 files changed

+1254
-24
lines changed

‎examples/browser/index.html

+16-8
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Code Hike in the browser</title>
55
<link
66
rel="stylesheet"
7-
href="https://esm.sh/@code-hike/mdx@0.4.0-next.1/dist/index.css"
7+
href="https://esm.sh/@code-hike/mdx@0.5.2-next.2/dist/index.css"
88
/>
99
</head>
1010
<body>
@@ -13,18 +13,26 @@
1313
<script type="module">
1414
import React from "https://esm.sh/react"
1515
import ReactDOM from "https://esm.sh/react-dom"
16-
import { evaluate } from "https://esm.sh/@mdx-js/mdx?dev"
16+
import { evaluate } from "https://esm.sh/@mdx-js/mdx?bundle"
1717
import * as runtime from "https://esm.sh/react/jsx-runtime.js"
1818

19-
import { remarkCodeHike } from "https://esm.sh/@code-hike/mdx@0.4.0-next.1/dist/index.browser.mjs"
20-
import { CH } from "https://esm.sh/@code-hike/mdx@0.4.0-next.1/components"
21-
import theme from "https://esm.sh/[email protected]/themes/nord.json" assert { type: "json" }
19+
import { remarkCodeHike } from "https://esm.sh/@code-hike/mdx@0.5.2-next.2/dist/index.browser.mjs?bundle"
20+
import { CH } from "https://esm.sh/@code-hike/mdx@0.5.2-next.2/components"
21+
import theme from "https://esm.sh/[email protected]/themes/dracula.json" assert { type: "json" }
2222

2323
const mdx = `# Test
2424
25-
~~~python hello.py mark=1[22:30]
26-
print("Rendered with Code Hike")
27-
~~~
25+
<CH.Code>
26+
27+
~~~python hello.py mark=1[22:30]
28+
print("Rendered with Code Hike")
29+
~~~
30+
31+
~~~js hello.js mark=1[23:36]
32+
console.log("Rendered with Code Hike")
33+
~~~
34+
35+
</CH.Code>
2836
`
2937

3038
const { default: Content } = await evaluate(mdx, {

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@
44
"packages": [
55
"packages/mdx",
66
"examples/*",
7+
"playground",
78
"site"
89
]
910
},
1011
"scripts": {
1112
"build": "lerna run --stream build",
1213
"build:lib": "lerna run --stream --scope @*/mdx build",
14+
"build:playground": "lerna run --stream --scope playground build",
1315
"test": "lerna run --stream test",
1416
"dev": "lerna run --stream --scope @*/mdx dev",
1517
"release": "auto shipit"

‎packages/mdx/dev/content/markdown.mdx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
Test nested syntax highlighting
2+
3+
````md hi.md
4+
# Hi
5+
6+
```js
7+
export default {
8+
data() {
9+
return {
10+
greeting: "Hello World!",
11+
}
12+
},
13+
}
14+
```
15+
16+
[lorem](https://loremipsum.com)
17+
````
18+
19+
```js hi.js
20+
export default {
21+
data() {
22+
return {
23+
greeting: "Hello World!",
24+
}
25+
},
26+
}
27+
```

‎packages/mdx/dev/files.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import fs from "fs"
22
import { remarkCodeHike } from "../src/index"
33
import { compile } from "@mdx-js/mdx"
4-
import theme from "shiki/themes/nord.json"
4+
import theme from "shiki/themes/rose-pine-moon.json"
55
import { withDebugger } from "mdx-debugger"
66

77
export async function getFiles() {

‎packages/mdx/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"scripts": {
3535
"dev": "next",
3636
"build": "rollup -c rollup.config.js",
37+
"watch": "rollup --watch -c rollup.config.js",
3738
"test": "vitest",
3839
"coverage": "vitest run --coverage"
3940
},
@@ -71,6 +72,7 @@
7172
"react-json-view": "^1.21.3",
7273
"rollup": "^2.41.2",
7374
"rollup-plugin-delete": "^2.0.0",
75+
"rollup-plugin-dts": "^4.2.1",
7476
"rollup-plugin-postcss": "^4.0.0",
7577
"rollup-plugin-typescript2": "^0.27.1",
7678
"sass": "^1.49.9",

‎packages/mdx/rollup.config.js

+15
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import path from "path"
88
import json from "@rollup/plugin-json"
99
import del from "rollup-plugin-delete"
1010
import replace from "@rollup/plugin-replace"
11+
import dts from "rollup-plugin-dts"
1112
import { nodeResolve } from "@rollup/plugin-node-resolve"
1213
// import { terser } from "rollup-plugin-terser"
1314
import commonjs from "@rollup/plugin-commonjs"
@@ -72,6 +73,12 @@ export default function makeConfig(commandOptions) {
7273
}),
7374
],
7475
},
76+
{
77+
input: `src/index.tsx`,
78+
output: [{ file: `./dist/index.d.ts`, format: "es" }],
79+
external: [...remarkExternal, "shiki"],
80+
plugins: [dts()],
81+
},
7582
// for the browser esm we need to replace shiki with shiki/dist/index.browser.mjs
7683
// https://github.com/shikijs/shiki/issues/131#issuecomment-1094281851
7784
{
@@ -125,5 +132,13 @@ export default function makeConfig(commandOptions) {
125132
}),
126133
],
127134
},
135+
{
136+
input: `src/components.tsx`,
137+
output: [
138+
{ file: `./dist/components.d.ts`, format: "es" },
139+
],
140+
external: clientExternal,
141+
plugins: [dts()],
142+
},
128143
]
129144
}

‎packages/mdx/src/highlighter/index.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,17 @@ export async function highlight({
3333
}
3434
}
3535
if (highlighterPromise === null) {
36+
const isBrowser = typeof window !== "undefined"
37+
// if we are on the server we load all the languages
38+
// if we are on the browser just load the first language
39+
// subsequent calls with different languages will lazy load
40+
const langs = isBrowser ? [lang as Lang] : undefined
41+
3642
// TODO add version
3743
setCDN("https://unpkg.com/shiki/")
3844
highlighterPromise = getHighlighter({
3945
theme: theme as IShikiTheme,
40-
// langs: [lang as Lang], // TODO change lang from string to Lang
46+
langs,
4147
})
4248
}
4349

‎packages/mdx/src/mdx-client/code.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
EditorProps,
66
EditorStep,
77
} from "../mini-editor"
8-
import { CodeHikeConfig } from "remark/config"
8+
import { CodeHikeConfig } from "../remark/config"
99

1010
export function Code(
1111
props: EditorProps & Partial<CodeHikeConfig>

‎packages/mdx/src/mini-editor/editor-frame.tsx

+9-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const EditorFrame = React.forwardRef<
6363
style={{
6464
background: getColor(
6565
theme,
66-
ColorName.EditorGroupHeaderBackground
66+
ColorName.EditorBackground
6767
),
6868
...style,
6969
}}
@@ -72,6 +72,10 @@ export const EditorFrame = React.forwardRef<
7272
className={"ch-frame-title-bar"}
7373
style={{
7474
color: getColor(theme, ColorName.IconForeground),
75+
background: getColor(
76+
theme,
77+
ColorName.EditorGroupHeaderBackground
78+
),
7579
}}
7680
>
7781
<TabsContainer
@@ -98,6 +102,10 @@ export const EditorFrame = React.forwardRef<
98102
theme,
99103
ColorName.IconForeground
100104
),
105+
background: getColor(
106+
theme,
107+
ColorName.EditorGroupHeaderBackground
108+
),
101109
}}
102110
>
103111
<TabsContainer

‎packages/mdx/src/remark/comment-data.ts

+18-6
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,25 @@ export function getCommentData(
2828
}
2929
}
3030

31+
function getTextAfter(
32+
line: Code["lines"][0],
33+
prefix: string
34+
) {
35+
const firstIndex = line.tokens.findIndex(t =>
36+
t.content.trim().startsWith(prefix)
37+
)
38+
if (firstIndex === -1) {
39+
return undefined
40+
}
41+
return line.tokens
42+
.slice(firstIndex)
43+
.map(t => t.content)
44+
.join("")
45+
}
46+
3147
const commentRegex = /\/\/\s+(\w+)(\S*)\s*(.*)/
3248
function otherComment(line: Code["lines"][0]) {
33-
const comment = line.tokens.find(t =>
34-
t.content.trim().startsWith("//")
35-
)?.content
49+
const comment = getTextAfter(line, "//")
3650

3751
if (!comment) {
3852
return []
@@ -56,9 +70,7 @@ const bashLikeLangs = [
5670
]
5771
const bashLikeCommentRegex = /#\s+(\w+)(\S*)\s*(.*)/
5872
function bashLikeComment(line: Code["lines"][0]) {
59-
const comment = line.tokens.find(t =>
60-
t.content.trim().startsWith("#")
61-
)?.content
73+
const comment = getTextAfter(line, "#")
6274

6375
if (!comment) {
6476
return []

‎packages/mdx/src/remark/transform.preview.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import fetch from "node-fetch"
21
import { visitAsync, toJSX } from "./unist-utils"
32
import { JsxNode, SuperNode } from "./nodes"
43

@@ -14,6 +13,7 @@ export async function getPresetConfig(
1413
const prefix = "https://codesandbox.io/s/"
1514
const csbid = url.slice(prefix.length)
1615
const configUrl = `https://codesandbox.io/api/v1/sandboxes/${csbid}/sandpack`
16+
const { default: fetch } = await import("node-fetch")
1717
const res = await fetch(configUrl)
1818
return await res.json()
1919
}

‎packages/mdx/tsconfig.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"esnext"
1313
],
1414
"importHelpers": true,
15-
"declaration": true,
15+
"declaration": false,
1616
"sourceMap": true,
1717
"strict": false,
1818
"noUnusedLocals": false,
@@ -39,7 +39,8 @@
3939
"forceConsistentCasingInFileNames": true,
4040
"noEmit": true,
4141
"isolatedModules": true,
42-
"incremental": true
42+
"incremental": true,
43+
"tsBuildInfoFile": "./dist/tsbuildinfo.json"
4344
},
4445
"exclude": [
4546
"node_modules"

‎playground/.gitignore

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
27+
# Contentlayer
28+
.contentlayer

‎playground/index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/src/favicon.ico" />
6+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
7+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
8+
<meta
9+
property="description"
10+
content="Try Code Hike directly in your browser"
11+
/>
12+
<meta property="og:title" content="Code Hike Playground" />
13+
<meta
14+
property="og:description"
15+
content="Try Code Hike directly in your browser"
16+
/>
17+
<meta name="twitter:site" content="@codehike_" />
18+
<!-- <meta name="twitter:card" content="summary_large_image" />
19+
<meta name="image" content="{imageUrl}" />
20+
<meta itemprop="image" content="{imageUrl}" />
21+
<meta name="twitter:image" content="{imageUrl}" />
22+
<meta property="og:image" content="{imageUrl}" /> -->
23+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
24+
<title>Code Hike Playground</title>
25+
</head>
26+
<body>
27+
<div id="root"></div>
28+
<script type="module" src="/src/main.jsx"></script>
29+
</body>
30+
</html>

‎playground/package.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "playground",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"@code-hike/mdx": "^0.5.1",
12+
"@mdx-js/mdx": "^2.1.1",
13+
"@monaco-editor/react": "^4.4.5",
14+
"lz-string": "^1.4.4",
15+
"react": "^17.0.2",
16+
"react-dom": "^17.0.2",
17+
"react-error-boundary": "^3.1.4",
18+
"react-split-pane": "^0.1.92"
19+
},
20+
"devDependencies": {
21+
"@types/react": "^17.0.2",
22+
"@types/react-dom": "^17.0.2",
23+
"@vitejs/plugin-react": "^1.3.0",
24+
"vite": "^2.9.9"
25+
}
26+
}

0 commit comments

Comments
 (0)