feat(md-enhance): improve chart render

vuepress-theme-hope · May 18, 2022 · f266f61 · f266f61
1 parent ca966d1
commit f266f61
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 41 deletions.
diff --git a/packages/md-enhance/__tests__/unit/__snapshots__/chart.spec.ts.snap b/packages/md-enhance/__tests__/unit/__snapshots__/chart.spec.ts.snap
@@ -1,42 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`chart > Should resolve chart info 1`] = `
-"<ChartJS title=\\"A bar chart\\" id=\\"chart-1a96284a\\" config=\\"%7B%0A%20%20%22type%22%3A%20%22bar%22%2C%0A%20%20%22data%22%3A%20%7B%0A%20%20%20%20%22labels%22%3A%20%5B%22Red%22%2C%20%22Blue%22%2C%20%22Yellow%22%2C%20%22Green%22%2C%20%22Purple%22%2C%20%22Orange%22%5D%2C%0A%20%20%20%20%22datasets%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22%23%20of%20Votes%22%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B12%2C%2019%2C%203%2C%205%2C%202%2C%203%5D%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%2099%2C%20132%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(54%2C%20162%2C%20235%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%20206%2C%2086%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(75%2C%20192%2C%20192%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(153%2C%20102%2C%20255%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%20159%2C%2064%2C%200.2)%22%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%2099%2C%20132%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(54%2C%20162%2C%20235%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%20206%2C%2086%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(75%2C%20192%2C%20192%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(153%2C%20102%2C%20255%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%20159%2C%2064%2C%201)%22%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%22borderWidth%22%3A%201%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%20%20%7D%2C%0A%20%20%22options%22%3A%20%7B%0A%20%20%20%20%22scales%22%3A%20%7B%0A%20%20%20%20%20%20%22y%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22beginAtZero%22%3A%20true%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A\\"><pre><code class=\\"language-json\\">{
-  &quot;type&quot;: &quot;bar&quot;,
-  &quot;data&quot;: {
-    &quot;labels&quot;: [&quot;Red&quot;, &quot;Blue&quot;, &quot;Yellow&quot;, &quot;Green&quot;, &quot;Purple&quot;, &quot;Orange&quot;],
-    &quot;datasets&quot;: [
-      {
-        &quot;label&quot;: &quot;# of Votes&quot;,
-        &quot;data&quot;: [12, 19, 3, 5, 2, 3],
-        &quot;backgroundColor&quot;: [
-          &quot;rgba(255, 99, 132, 0.2)&quot;,
-          &quot;rgba(54, 162, 235, 0.2)&quot;,
-          &quot;rgba(255, 206, 86, 0.2)&quot;,
-          &quot;rgba(75, 192, 192, 0.2)&quot;,
-          &quot;rgba(153, 102, 255, 0.2)&quot;,
-          &quot;rgba(255, 159, 64, 0.2)&quot;
-        ],
-        &quot;borderColor&quot;: [
-          &quot;rgba(255, 99, 132, 1)&quot;,
-          &quot;rgba(54, 162, 235, 1)&quot;,
-          &quot;rgba(255, 206, 86, 1)&quot;,
-          &quot;rgba(75, 192, 192, 1)&quot;,
-          &quot;rgba(153, 102, 255, 1)&quot;,
-          &quot;rgba(255, 159, 64, 1)&quot;
-        ],
-        &quot;borderWidth&quot;: 1
-      }
-    ]
-  },
-  &quot;options&quot;: {
-    &quot;scales&quot;: {
-      &quot;y&quot;: {
-        &quot;beginAtZero&quot;: true
-      }
-    }
-  }
-}
-</code></pre>
-</ChartJS>"
-`;
+exports[`chart > Should resolve chart info 1`] = `"<ChartJS title=\\"A bar chart\\" id=\\"chart-1a96284a\\" config=\\"%7B%0A%20%20%22type%22%3A%20%22bar%22%2C%0A%20%20%22data%22%3A%20%7B%0A%20%20%20%20%22labels%22%3A%20%5B%22Red%22%2C%20%22Blue%22%2C%20%22Yellow%22%2C%20%22Green%22%2C%20%22Purple%22%2C%20%22Orange%22%5D%2C%0A%20%20%20%20%22datasets%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22%23%20of%20Votes%22%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B12%2C%2019%2C%203%2C%205%2C%202%2C%203%5D%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%2099%2C%20132%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(54%2C%20162%2C%20235%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%20206%2C%2086%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(75%2C%20192%2C%20192%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(153%2C%20102%2C%20255%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%20159%2C%2064%2C%200.2)%22%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%2099%2C%20132%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(54%2C%20162%2C%20235%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%20206%2C%2086%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(75%2C%20192%2C%20192%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(153%2C%20102%2C%20255%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%20159%2C%2064%2C%201)%22%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%22borderWidth%22%3A%201%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%20%20%7D%2C%0A%20%20%22options%22%3A%20%7B%0A%20%20%20%20%22scales%22%3A%20%7B%0A%20%20%20%20%20%20%22y%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22beginAtZero%22%3A%20true%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A\\"></ChartJS>"`;
diff --git a/packages/md-enhance/src/node/markdown-it/chart.ts b/packages/md-enhance/src/node/markdown-it/chart.ts
@@ -1,6 +1,6 @@
 /* eslint-disable max-statements */
 import { hash } from "@vuepress/utils";
-import type { default as Token } from "markdown-it/lib/token";
+import { default as Token } from "markdown-it/lib/token";
 
 export const chartRender = (tokens: Token[], index: number): string => {
   const { nesting, info } = tokens[index];
@@ -20,9 +20,15 @@ export const chartRender = (tokens: Token[], index: number): string => {
     const { type, content, info } = tokens[i];
 
     if (type === "container_chart_close") break;
+
     if (!content) continue;
     if (type === "fence" && (info === "json" || info === "js"))
       config = encodeURIComponent(content);
+
+    // set to an unexisit token type
+    tokens[i].type = "chart_empty";
+    // hide token
+    tokens[i].hidden = true;
   }
 
   return `<ChartJS title="${title}" id="${key}" config="${config}">`;