feat(pintora-website): add shiki highlight to preview

hikerpig · Feb 5, 2022 · 7937abc · 7937abc
1 parent 2917a34
commit 7937abc
Show file tree

Hide file tree

Showing 10 changed files with 1,218 additions and 44 deletions.
diff --git a/demo/entries/highlight/index.html b/demo/entries/highlight/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pintora Syntax Highlight Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/pages/highlight/main.tsx"></script>
+  </body>
+</html>
diff --git a/demo/package.json b/demo/package.json
@@ -32,7 +32,8 @@
     "react-dom": "^17.0.2",
     "react-error-boundary": "^3.1.4",
     "react-redux": "^7.2.6",
-    "react-router-dom": "^6.2.1"
+    "react-router-dom": "^6.2.1",
+    "shiki": "^0.10.0"
   },
   "devDependencies": {
     "@percy/cli": "^1.0.0-beta.73",

diff --git a/demo/src/pages/highlight/main.tsx b/demo/src/pages/highlight/main.tsx
@@ -0,0 +1,101 @@
+// import * as vsctm from 'vscode-textmate'
+import * as shiki from 'shiki'
+
+const TEST_TEXT = `
+mindmap
+* Root
+** Second
+    `
+
+async function fetchWasm() {
+  const res = await fetch('/data/onig.wasm')
+  return await res.arrayBuffer()
+}
+
+// async function start() {
+//   const wasmBin = await fetchWasm()
+//   const vscodeOnigurumaLib = oniguruma.loadWASM(wasmBin).then(() => {
+//     return {
+//       createOnigScanner(patterns) {
+//         return new oniguruma.OnigScanner(patterns)
+//       },
+//       createOnigString(s) {
+//         return new oniguruma.OnigString(s)
+//       },
+//     }
+//   })
+//   const registry = new vsctm.Registry({
+//     onigLib: vscodeOnigurumaLib,
+//     loadGrammar: async scopeName => {
+//       console.log('loadGrammar', scopeName)
+//       let grammar = null
+
+//       if (/pintora/.test(scopeName)) {
+//         const syntax = await (await fetch('/data/pintora.tmLanguage.json')).text()
+//         grammar = vsctm.parseRawGrammar(syntax, 'pintora.tmLanguage.json')
+//       }
+//       return grammar
+//     },
+//   })
+
+//   // console.log('registry', registry)
+
+//   registry.loadGrammar('source.pintora').then(grammar => {
+//     const lines = TEST_TEXT.split('\n')
+
+//     let ruleStack = vsctm.INITIAL
+//     for (let i = 0; i < lines.length; i++) {
+//       const line = lines[i]
+//       const lineTokens = grammar?.tokenizeLine(line, ruleStack)
+//       // console.log('tokens', lineTokens)
+
+//       if (lineTokens) {
+//         for (let j = 0; j < lineTokens.tokens.length; j++) {
+//           const token = lineTokens.tokens[j]
+//           console.log(
+//             ` - token from ${token.startIndex} to ${token.endIndex} ` +
+//               `(${line.substring(token.startIndex, token.endIndex)}) ` +
+//               `with scopes ${token.scopes.join(', ')}`,
+//           )
+//         }
+
+//         ruleStack = lineTokens.ruleStack
+//       }
+//     }
+//   })
+
+//   return registry
+// }
+
+async function startShiki() {
+  const wasmBin = await fetchWasm()
+  const syntaxJson = await (await fetch('/data/pintora.tmLanguage.json')).json()
+
+  const pintoraLanguage = {
+    id: 'pintora',
+    scopeName: 'source.pintora',
+    grammar: syntaxJson,
+  }
+
+  shiki.setCDN('https://unpkg.com/shiki/')
+  shiki.setWasm(wasmBin)
+
+  const highlighter = await shiki.getHighlighter({
+    langs: [pintoraLanguage, 'json'],
+    themes: ['material-palenight', 'dracula'],
+    theme: 'material-palenight',
+  })
+  await highlighter.loadLanguage(pintoraLanguage)
+
+  return { highlighter }
+}
+
+// start()
+
+startShiki().then(({ highlighter }) => {
+  const html = highlighter.codeToHtml(TEST_TEXT, { lang: 'pintora' })
+  const resultDiv = document.createElement('div')
+  resultDiv.id = 'result'
+  resultDiv.innerHTML = html
+  document.body.appendChild(resultDiv)
+})
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
@@ -8,36 +8,42 @@ const BASE = '/demo/'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [reactRefresh(), tsconfigPaths(), VitePWA({
-    base: BASE,
-    registerType: 'autoUpdate',
-    manifest: {
-      name: 'Pintora Live Editor',
-      short_name: 'Pintora',
-      description: 'Live editor for pintora text-to-diagram library',
-      start_url: '/demo/live-editor/',
-      scope: '/demo/',
-      icons: [{
-        src: '/demo/img/logo.svg',
-        sizes: 'any'
-      }]
-    },
-    strategies: 'injectManifest',
-    workbox: {
-    }
-  })],
+  plugins: [
+    reactRefresh(),
+    tsconfigPaths(),
+    VitePWA({
+      base: BASE,
+      registerType: 'autoUpdate',
+      manifest: {
+        name: 'Pintora Live Editor',
+        short_name: 'Pintora',
+        description: 'Live editor for pintora text-to-diagram library',
+        start_url: '/demo/live-editor/',
+        scope: '/demo/',
+        icons: [
+          {
+            src: '/demo/img/logo.svg',
+            sizes: 'any',
+          },
+        ],
+      },
+      strategies: 'injectManifest',
+      workbox: {},
+    }),
+  ],
   base: BASE,
   build: {
     rollupOptions: {
       input: {
         'entries/demo': resolve(__dirname, 'entries/demo/index.html'),
-        'preview': resolve(__dirname, 'preview/index.html'),
+        // 'entries/highlight': resolve(__dirname, 'entries/highlight/index.html'),
+        preview: resolve(__dirname, 'preview/index.html'),
         'live-editor': resolve(__dirname, 'live-editor/index.html'),
       },
       output: {
         entryFileNames: `assets/[name].js`,
         chunkFileNames: `assets/[name].js`,
-        assetFileNames: `assets/[name].[ext]`
+        assetFileNames: `assets/[name].[ext]`,
       },
     },
   },