Skip to content

Commit ae0720e

Browse files
TechQueryTechQuery
committed
[migrate] replace Shiki with Prism to fix Code Highlight bundle bug
1 parent 361efad commit ae0720e

File tree

5 files changed

+77
-34
lines changed

5 files changed

+77
-34
lines changed

‎package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "boot-cell",
3-
"version": "2.0.0-rc.14",
3+
"version": "2.0.0-rc.16",
44
"license": "LGPL-3.0",
55
"author": "shiy2008@gmail.com",
66
"description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",
@@ -31,8 +31,8 @@
3131
"iterable-observer": "^1.1.0",
3232
"mime": "^4.0.6",
3333
"mobx": "^6.13.6",
34+
"prismjs": "^1.29.0",
3435
"regenerator-runtime": "^0.14.1",
35-
"shiki": "^3.1.0",
3636
"web-cell": "^3.0.3",
3737
"web-utility": "^4.4.3"
3838
},
@@ -52,7 +52,9 @@
5252
"@parcel/transformer-typescript-tsc": "~2.13.3",
5353
"@parcel/transformer-typescript-types": "~2.13.3",
5454
"@types/jest": "^29.5.14",
55+
"@types/prismjs": "^1.26.5",
5556
"@types/turndown": "^5.0.5",
57+
"buffer": "^6.0.3",
5658
"cross-env": "^7.0.3",
5759
"husky": "^9.1.7",
5860
"identity-obj-proxy": "^3.0.0",
@@ -62,6 +64,7 @@
6264
"open-cli": "^8.0.0",
6365
"parcel": "~2.13.3",
6466
"prettier": "^3.5.3",
67+
"process": "^0.11.10",
6568
"ts-jest": "^29.2.6",
6669
"ts-node": "^10.9.2",
6770
"typedoc": "^0.27.9",
@@ -71,7 +74,7 @@
7174
"scripts": {
7275
"prepare": "husky",
7376
"test": "lint-staged && tsc --noEmit",
74-
"start": "cd test/ && parcel index.html --open",
77+
"start": "cd test/ && rm -rf dist/ ../.parcel-cache && parcel index.html --open",
7578
"pack-dist": "rm -rf dist/ && parcel build source/index.ts",
7679
"pack-docs": "rm -rf docs/ && typedoc source/",
7780
"build": "npm run pack-dist && npm run pack-docs",

‎pnpm-lock.yaml‎

Lines changed: 23 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎source/Content/CodeBlock.module.less‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎source/Content/CodeBlock.tsx‎

Lines changed: 43 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import MIME from 'mime';
22
import { computed, observable } from 'mobx';
3-
import { codeToHtml } from 'shiki';
3+
import { highlight, languages } from 'prismjs';
44
import {
55
attribute,
66
component,
77
observer,
8-
reaction,
98
WebCell,
109
WebCellProps
1110
} from 'web-cell';
11+
import { stringifyCSS } from 'web-utility';
1212

1313
import { IconButton } from '../Form';
14-
import * as styles from './CodeBlock.module.less';
1514

1615
export interface CodeBlockProps extends WebCellProps<HTMLPreElement> {
1716
name?: string;
@@ -22,7 +21,7 @@ export interface CodeBlockProps extends WebCellProps<HTMLPreElement> {
2221

2322
export interface CodeBlock extends WebCell<CodeBlockProps> {}
2423

25-
@component({ tagName: 'code-block' })
24+
@component({ tagName: 'code-block', mode: 'open' })
2625
@observer
2726
export class CodeBlock extends HTMLElement implements WebCell<CodeBlockProps> {
2827
@attribute
@@ -38,44 +37,61 @@ export class CodeBlock extends HTMLElement implements WebCell<CodeBlockProps> {
3837

3938
@attribute
4039
@observable
41-
accessor theme = '';
40+
accessor theme = 'okaidia';
4241

43-
@observable
44-
accessor markup = '';
42+
@computed
43+
get markup() {
44+
const { value, language } = this;
45+
46+
return (
47+
value && language && highlight(value, languages[language], language)
48+
);
49+
}
4550

4651
@computed
4752
get dataURI() {
4853
return `data:${MIME.getType(this.name)};base64,${btoa(this.value)}`;
4954
}
5055

51-
@reaction(({ value, language, theme }) => value + language + theme)
52-
async connectedCallback() {
53-
if (this.value)
54-
this.markup = await codeToHtml(this.value, {
55-
lang: this.language,
56-
theme: this.theme
57-
});
56+
connectedCallback() {
57+
this.classList.add(
58+
'd-block',
59+
'bg-dark',
60+
'rounded',
61+
'overflow-hidden',
62+
'p-3',
63+
'position-relative'
64+
);
5865
}
5966

6067
render() {
61-
const { name, dataURI, markup } = this;
68+
const { name, dataURI, theme, markup } = this;
6269

6370
return (
6471
<>
72+
<link
73+
rel="stylesheet"
74+
href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css"
75+
/>
76+
<link
77+
rel="stylesheet"
78+
href="https://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
79+
/>
80+
<link
81+
rel="stylesheet"
82+
href={`https://unpkg.com/prismjs@1.29.0/themes/prism-${theme}.min.css`}
83+
/>
84+
<style>{stringifyCSS({ pre: { margin: 0 } })}</style>
6585
{name && (
66-
<div className="text-end mb-2">
67-
<IconButton
68-
name="download"
69-
variant="warning"
70-
download={name}
71-
href={dataURI}
72-
/>
73-
</div>
86+
<IconButton
87+
className="position-absolute top-0 end-0"
88+
variant="warning"
89+
name="download"
90+
download={name}
91+
href={dataURI}
92+
/>
7493
)}
75-
<div
76-
className={`rounded overflow-hidden ${styles.code}`}
77-
innerHTML={markup}
78-
/>
94+
<div innerHTML={markup} />
7995
</>
8096
);
8197
}

‎test/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { DOMRenderer } from 'dom-renderer';
22
import { configure } from 'mobx';
33
import { documentReady, formToJSON } from 'web-utility';
44

5+
import { CodeBlock } from '../source/Content';
56
import {
67
Button,
78
FileModel,
@@ -11,6 +12,8 @@ import {
1112
RangeInput
1213
} from '../source/Form';
1314

15+
import 'prismjs/components/prism-typescript';
16+
1417
configure({ enforceActions: 'never' });
1518

1619
const test_image = 'https://github.com/EasyWebApp.png';
@@ -59,6 +62,8 @@ const Content = () => (
5962
Submit
6063
</Button>
6164
</form>
65+
<h2>Code Block</h2>
66+
<CodeBlock language="typescript" name="test.js" value="alert(1)" />
6267
{/* <section>
6368
<h2>Tab View</h2>
6469

0 commit comments

Comments
 (0)