[migrate] replace Shiki with Prism to fix Code Highlight bundle bug

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-rc.14",
+    "version": "2.0.0-rc.16",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",
@@ -31,8 +31,8 @@
         "iterable-observer": "^1.1.0",
         "mime": "^4.0.6",
         "mobx": "^6.13.6",
+        "prismjs": "^1.29.0",
         "regenerator-runtime": "^0.14.1",
-        "shiki": "^3.1.0",
         "web-cell": "^3.0.3",
         "web-utility": "^4.4.3"
     },
@@ -52,7 +52,9 @@
         "@parcel/transformer-typescript-tsc": "~2.13.3",
         "@parcel/transformer-typescript-types": "~2.13.3",
         "@types/jest": "^29.5.14",
+        "@types/prismjs": "^1.26.5",
         "@types/turndown": "^5.0.5",
+        "buffer": "^6.0.3",
         "cross-env": "^7.0.3",
         "husky": "^9.1.7",
         "identity-obj-proxy": "^3.0.0",
@@ -62,6 +64,7 @@
         "open-cli": "^8.0.0",
         "parcel": "~2.13.3",
         "prettier": "^3.5.3",
+        "process": "^0.11.10",
         "ts-jest": "^29.2.6",
         "ts-node": "^10.9.2",
         "typedoc": "^0.27.9",
@@ -71,7 +74,7 @@
     "scripts": {
         "prepare": "husky",
         "test": "lint-staged  &&  tsc --noEmit",
-        "start": "cd test/  &&  parcel index.html --open",
+        "start": "cd test/  &&  rm -rf dist/ ../.parcel-cache  &&  parcel index.html --open",
         "pack-dist": "rm -rf dist/  &&  parcel build source/index.ts",
         "pack-docs": "rm -rf docs/  &&  typedoc source/",
         "build": "npm run pack-dist  &&  npm run pack-docs",

pnpm-lock.yaml

@@ -1,17 +1,16 @@
 import MIME from 'mime';
 import { computed, observable } from 'mobx';
-import { codeToHtml } from 'shiki';
+import { highlight, languages } from 'prismjs';
 import {
     attribute,
     component,
     observer,
-    reaction,
     WebCell,
     WebCellProps
 } from 'web-cell';
+import { stringifyCSS } from 'web-utility';
 
 import { IconButton } from '../Form';
-import * as styles from './CodeBlock.module.less';
 
 export interface CodeBlockProps extends WebCellProps<HTMLPreElement> {
     name?: string;
@@ -22,7 +21,7 @@ export interface CodeBlockProps extends WebCellProps<HTMLPreElement> {
 
 export interface CodeBlock extends WebCell<CodeBlockProps> {}
 
-@component({ tagName: 'code-block' })
+@component({ tagName: 'code-block', mode: 'open' })
 @observer
 export class CodeBlock extends HTMLElement implements WebCell<CodeBlockProps> {
     @attribute
@@ -38,44 +37,61 @@ export class CodeBlock extends HTMLElement implements WebCell<CodeBlockProps> {
 
     @attribute
     @observable
-    accessor theme = '';
+    accessor theme = 'okaidia';
 
-    @observable
-    accessor markup = '';
+    @computed
+    get markup() {
+        const { value, language } = this;
+
+        return (
+            value && language && highlight(value, languages[language], language)
+        );
+    }
 
     @computed
     get dataURI() {
         return `data:${MIME.getType(this.name)};base64,${btoa(this.value)}`;
     }
 
-    @reaction(({ value, language, theme }) => value + language + theme)
-    async connectedCallback() {
-        if (this.value)
-            this.markup = await codeToHtml(this.value, {
-                lang: this.language,
-                theme: this.theme
-            });
+    connectedCallback() {
+        this.classList.add(
+            'd-block',
+            'bg-dark',
+            'rounded',
+            'overflow-hidden',
+            'p-3',
+            'position-relative'
+        );
     }
 
     render() {
-        const { name, dataURI, markup } = this;
+        const { name, dataURI, theme, markup } = this;
 
         return (
             <>
+                <link
+                    rel="stylesheet"
+                    href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
+                />
+                <link
+                    rel="stylesheet"
+                    href="https://unpkg.com/[email protected]/font/bootstrap-icons.min.css"
+                />
+                <link
+                    rel="stylesheet"
+                    href={`https://unpkg.com/[email protected]/themes/prism-${theme}.min.css`}
+                />
+                <style>{stringifyCSS({ pre: { margin: 0 } })}</style>
                 {name && (
-                    <div className="text-end mb-2">
-                        <IconButton
-                            name="download"
-                            variant="warning"
-                            download={name}
-                            href={dataURI}
-                        />
-                    </div>
+                    <IconButton
+                        className="position-absolute top-0 end-0"
+                        variant="warning"
+                        name="download"
+                        download={name}
+                        href={dataURI}
+                    />
                 )}
-                <div
-                    className={`rounded overflow-hidden ${styles.code}`}
-                    innerHTML={markup}
-                />
+                <div innerHTML={markup} />
             </>
         );
     }

source/Content/CodeBlock.module.less

@@ -2,6 +2,7 @@ import { DOMRenderer } from 'dom-renderer';
 import { configure } from 'mobx';
 import { documentReady, formToJSON } from 'web-utility';
 
+import { CodeBlock } from '../source/Content';
 import {
     Button,
     FileModel,
@@ -11,6 +12,8 @@ import {
     RangeInput
 } from '../source/Form';
 
+import 'prismjs/components/prism-typescript';
+
 configure({ enforceActions: 'never' });
 
 const test_image = 'https://github.com/EasyWebApp.png';
@@ -59,6 +62,8 @@ const Content = () => (
                     Submit
                 </Button>
             </form>
+            <h2>Code Block</h2>
+            <CodeBlock language="typescript" name="test.js" value="alert(1)" />
             {/* <section>
                 <h2>Tab View</h2>