Skip to content

Commit f752074

Browse files
pomberpomber
authored
Merge pull request #111 from code-hike/line-numbers
Line numbers
2 parents ea217c7 + a1cf9e4 commit f752074

28 files changed

+740
-228
lines changed

‎packages/mdx/src/client/annotations.tsx

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,10 @@ function Box({
3131
tc.scope?.includes("string")
3232
)?.settings?.foreground || "yellow"
3333
return (
34-
<span style={{ outline: `2px solid ${border}` }}>
34+
<span
35+
className="ch-code-box-annotation"
36+
style={{ outline: `2px solid ${border}` }}
37+
>
3538
{children}
3639
</span>
3740
)
@@ -63,8 +66,18 @@ function Background({
6366
background: bg,
6467
// cursor: "pointer",
6568
}}
66-
// onClick={_ => alert("clicked")}
69+
className="ch-code-bg-annotation"
6770
>
71+
<span
72+
className="ch-code-bg-annotation-border"
73+
style={{
74+
background: "#00a2d3",
75+
width: "3px",
76+
height: "100%",
77+
position: "absolute",
78+
left: 0,
79+
}}
80+
/>
6881
{children}
6982
</div>
7083
)

‎packages/mdx/src/plugin.ts

Lines changed: 50 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,15 @@ import { transformSpotlights } from "./plugin/spotlight"
66
import { transformScrollycodings } from "./plugin/scrollycoding"
77
import visit from "unist-util-visit"
88
import { transformSlideshows } from "./plugin/slideshow"
9+
import { valueToEstree } from "./plugin/to-estree"
10+
import { CH_CODE_CONFIG_VAR_NAME } from "./plugin/unist-utils"
911

10-
export function remarkCodeHike({ theme }: { theme: any }) {
12+
type CodeHikeConfig = {
13+
theme: any
14+
lineNumbers?: boolean
15+
}
16+
17+
export function remarkCodeHike(config: CodeHikeConfig) {
1118
return async (tree: Node) => {
1219
// TODO add opt-in config
1320
let hasCodeHikeImport = false
@@ -21,24 +28,60 @@ export function remarkCodeHike({ theme }: { theme: any }) {
2128
}
2229
})
2330

31+
addConfig(tree as Parent, config)
32+
2433
if (!hasCodeHikeImport) {
2534
addImportNode(tree as Parent)
2635
}
2736

2837
try {
29-
await transformScrollycodings(tree, { theme })
30-
await transformSpotlights(tree, { theme })
31-
await transformSlideshows(tree, { theme })
32-
await transformSections(tree, { theme })
33-
await transformEditorNodes(tree, { theme })
34-
await transformCodeNodes(tree, { theme })
38+
await transformScrollycodings(tree, config)
39+
await transformSpotlights(tree, config)
40+
await transformSlideshows(tree, config)
41+
await transformSections(tree, config)
42+
await transformEditorNodes(tree, config)
43+
await transformCodeNodes(tree, config)
3544
} catch (e) {
3645
console.error("error running remarkCodeHike", e)
3746
throw e
3847
}
3948
}
4049
}
4150

51+
function addConfig(tree: Parent, config: CodeHikeConfig) {
52+
tree.children.unshift({
53+
type: "mdxjsEsm",
54+
value: "export const chCodeConfig = {}",
55+
data: {
56+
estree: {
57+
type: "Program",
58+
body: [
59+
{
60+
type: "ExportNamedDeclaration",
61+
declaration: {
62+
type: "VariableDeclaration",
63+
declarations: [
64+
{
65+
type: "VariableDeclarator",
66+
id: {
67+
type: "Identifier",
68+
name: CH_CODE_CONFIG_VAR_NAME,
69+
},
70+
init: valueToEstree(config),
71+
},
72+
],
73+
kind: "const",
74+
},
75+
specifiers: [],
76+
source: null,
77+
},
78+
],
79+
sourceType: "module",
80+
},
81+
},
82+
})
83+
}
84+
4285
function addImportNode(tree: Parent) {
4386
tree.children.unshift({
4487
type: "mdxjsEsm",

‎packages/mdx/src/plugin/code.ts

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
toJSX,
77
NodeInfo,
88
splitChildren,
9+
CH_CODE_CONFIG_PLACEHOLDER,
910
} from "./unist-utils"
1011
import { CodeStep } from "@code-hike/smooth-code"
1112
import { EditorProps } from "@code-hike/mini-editor"
@@ -83,9 +84,7 @@ async function mapCode(
8384
heightRatio: 1,
8485
},
8586
files: [file],
86-
codeConfig: {
87-
theme: config.theme,
88-
},
87+
codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
8988
}
9089
return props
9190
}
@@ -136,9 +135,7 @@ export async function mapEditor(
136135
}
137136
: undefined,
138137
files: allFiles as any,
139-
codeConfig: {
140-
theme: config.theme,
141-
},
138+
codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
142139
}
143140
return props
144141
}

‎packages/mdx/src/plugin/scrollycoding.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { visitAsync, toJSX } from "./unist-utils"
1+
import {
2+
visitAsync,
3+
toJSX,
4+
CH_CODE_CONFIG_PLACEHOLDER,
5+
} from "./unist-utils"
26
import { Node, Parent } from "unist"
37
import { extractStepsInfo } from "./steps"
48
import { getPresetConfig } from "./preview"
@@ -33,7 +37,7 @@ async function transformScrollycoding(
3337

3438
toJSX(node, {
3539
props: {
36-
codeConfig: { theme },
40+
codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
3741
editorSteps: editorSteps,
3842
presetConfig,
3943
},

‎packages/mdx/src/plugin/slideshow.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { visitAsync, toJSX } from "./unist-utils"
1+
import {
2+
visitAsync,
3+
toJSX,
4+
CH_CODE_CONFIG_PLACEHOLDER,
5+
} from "./unist-utils"
26
import { Node, Parent } from "unist"
37
import { extractStepsInfo } from "./steps"
48
import { getPresetConfig } from "./preview"
@@ -33,7 +37,7 @@ async function transformSlideshow(
3337

3438
toJSX(node, {
3539
props: {
36-
codeConfig: { theme },
40+
codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
3741
editorSteps: editorSteps,
3842
presetConfig,
3943
},

‎packages/mdx/src/plugin/spotlight.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { visitAsync, toJSX } from "./unist-utils"
1+
import {
2+
visitAsync,
3+
toJSX,
4+
CH_CODE_CONFIG_PLACEHOLDER,
5+
} from "./unist-utils"
26
import { Node, Parent } from "unist"
37
import { extractStepsInfo } from "./steps"
48
import { getPresetConfig } from "./preview"
@@ -34,7 +38,7 @@ async function transformSpotlight(
3438

3539
toJSX(node, {
3640
props: {
37-
codeConfig: { theme },
41+
codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
3842
editorSteps: editorSteps,
3943
presetConfig,
4044
},

‎packages/mdx/src/plugin/unist-utils.ts

Lines changed: 47 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@ export async function visitAsync(
4646
await Promise.all(promises)
4747
}
4848

49+
export const CH_CODE_CONFIG_PLACEHOLDER = "CH_CodeConfig" as any
50+
export const CH_CODE_CONFIG_VAR_NAME = "chCodeConfig"
51+
4952
export function toJSX(
5053
node: Node,
5154
{
@@ -73,25 +76,51 @@ export function toJSX(
7376
if (props[key] === undefined) {
7477
return
7578
}
76-
;(node as any).attributes.push({
77-
type: "mdxJsxAttribute",
78-
name: key,
79-
value: {
80-
type: "mdxJsxAttributeValueExpression",
81-
value: JSON.stringify(props[key]),
82-
data: {
83-
estree: {
84-
type: "Program",
85-
body: [
86-
{
87-
type: "ExpressionStatement",
88-
expression: valueToEstree(props[key]),
89-
},
90-
],
91-
sourceType: "module",
79+
if (props[key] === CH_CODE_CONFIG_PLACEHOLDER) {
80+
;(node as any).attributes.push({
81+
type: "mdxJsxAttribute",
82+
name: key,
83+
value: {
84+
type: "mdxJsxAttributeValueExpression",
85+
value: CH_CODE_CONFIG_VAR_NAME,
86+
data: {
87+
estree: {
88+
type: "Program",
89+
body: [
90+
{
91+
type: "ExpressionStatement",
92+
expression: {
93+
type: "Identifier",
94+
name: CH_CODE_CONFIG_VAR_NAME,
95+
},
96+
},
97+
],
98+
sourceType: "module",
99+
},
92100
},
93101
},
94-
},
95-
})
102+
})
103+
} else {
104+
;(node as any).attributes.push({
105+
type: "mdxJsxAttribute",
106+
name: key,
107+
value: {
108+
type: "mdxJsxAttributeValueExpression",
109+
value: JSON.stringify(props[key]),
110+
data: {
111+
estree: {
112+
type: "Program",
113+
body: [
114+
{
115+
type: "ExpressionStatement",
116+
expression: valueToEstree(props[key]),
117+
},
118+
],
119+
sourceType: "module",
120+
},
121+
},
122+
},
123+
})
124+
}
96125
})
97126
}

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import React from "react"
22
import { FrameButtons } from "@code-hike/mini-frame"
33
import { useClasser, Classes } from "@code-hike/classer"
4-
import { EditorTheme } from "@code-hike/smooth-code/dist/themes"
5-
import { getColor, ColorName } from "./theme-colors"
4+
import {
5+
EditorTheme,
6+
getColor,
7+
ColorName,
8+
} from "@code-hike/utils"
69

710
export {
811
EditorFrameProps,

‎packages/mini-editor/src/index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import "~@code-hike/mini-frame/dist/index.scss";
22
@import "~@code-hike/mini-terminal/dist/index.scss";
3+
@import "~@code-hike/smooth-code/dist/index.scss";
34

45
/** tabs */
56

‎packages/playground/content/test.mdx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
# Hello
22

3-
<foo x={<div />} />
3+
export const pi = { foo: 1 }
4+
5+
<pre>{JSON.stringify(chCodeConfig, null, 2)}</pre>
6+
7+
```js
8+
console.log(1)
9+
```

‎packages/playground/next.config.js

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,29 @@
1-
module.exports = {
2-
target: "serverless",
1+
const { remarkCodeHike } = require("@code-hike/mdx")
2+
const theme = require("shiki/themes/monokai.json")
3+
const withBundleAnalyzer = require("@next/bundle-analyzer")(
4+
{
5+
enabled: process.env.ANALYZE === "true",
6+
// enabled: true,
7+
}
8+
)
9+
module.exports = withBundleAnalyzer({
310
experimental: { esmExternals: true },
4-
}
11+
pageExtensions: ["md", "mdx", "tsx", "ts", "jsx", "js"],
12+
webpack(config, options) {
13+
config.module.rules.push({
14+
test: /\.mdx?$/,
15+
use: [
16+
// The default `babel-loader` used by Next:
17+
options.defaultLoaders.babel,
18+
{
19+
loader: "@mdx-js/loader",
20+
/** @type {import('@mdx-js/loader').Options} */
21+
options: {
22+
remarkPlugins: [[remarkCodeHike, { theme }]],
23+
},
24+
},
25+
],
26+
})
27+
return config
28+
},
29+
})

‎packages/playground/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
},
99
"dependencies": {
1010
"@code-hike/mdx": "^0.3.0-next.0",
11+
"@mdx-js/loader": "^2.0.0-rc.2",
12+
"@mdx-js/react": "^2.0.0-rc.2",
13+
"@next/bundle-analyzer": "^12.0.7",
1114
"esbuild": "^0.13.2",
1215
"mdx-bundler": "^6.0.1",
1316
"next": "^11.1.2",

‎packages/playground/pages/size-test.mdx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Hello
2+
3+
```js
4+
function lorem(ipsum) {}
5+
```
6+
7+
```js
8+
function lorem(ipsum) {}
9+
```

‎packages/playground/src/page-data.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,18 @@ export async function toProps({ demo, theme }) {
5151
).then(module => module.default)
5252

5353
postCodeHike = await bundle(mdxSource, files, [
54-
[remarkCodeHike, { theme: loadedTheme }],
54+
[
55+
remarkCodeHike,
56+
{ theme: loadedTheme, lineNumbers: true },
57+
],
5558
remarkShowTree,
5659
])
5760

5861
result = await bundle(mdxSource, files, [
59-
[remarkCodeHike, { theme: loadedTheme }],
62+
[
63+
remarkCodeHike,
64+
{ theme: loadedTheme, lineNumbers: true },
65+
],
6066
])
6167
} catch (e) {
6268
console.error("remark-code-hike error", e)

0 commit comments

Comments
 (0)