From f8a175694882ce74886b9efe24730323c4dcef54 Mon Sep 17 00:00:00 2001
From: Bairui Su <subairui@icloud.com>
Date: Thu, 7 Mar 2024 18:49:54 +0800
Subject: [PATCH] feat(vitepress): change dom to eval (#86)

---
 packages/genji-theme-vitepress/__tests__/errors.md | 10 +++++-----
 .../__tests__/markdown-extensions.md               | 14 +++++++-------
 .../__tests__/object-inspector.md                  | 12 ++++++------
 .../genji-theme-vitepress/__tests__/observable.md  |  4 ++--
 packages/genji-theme-vitepress/__tests__/parser.md |  2 +-
 .../__tests__/promise-cell.md                      |  6 +++---
 packages/genji-theme-vitepress/package.json        |  2 +-
 packages/genji-theme-vitepress/src/attrs.js        | 10 ++++------
 8 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/packages/genji-theme-vitepress/__tests__/errors.md b/packages/genji-theme-vitepress/__tests__/errors.md
index ceef3b9..1ad51c6 100644
--- a/packages/genji-theme-vitepress/__tests__/errors.md
+++ b/packages/genji-theme-vitepress/__tests__/errors.md
@@ -2,14 +2,14 @@
 
 ## Simple Error
 
-```js | dom
+```js eval
 display(() => {
   const a = 1;
   a = 2;
 });
 ```
 
-```js | dom
+```js eval
 (() => {
   const a = 1;
   a = 2;
@@ -18,7 +18,7 @@ display(() => {
 
 ## Function Error
 
-```js | dom
+```js eval
 (() => {
   function error() {
     const a = 1;
@@ -33,7 +33,7 @@ display(() => {
 
 ## Promise Error
 
-```js | dom
+```js eval
 new Promise((resolve) => {
   const a = 1;
   a = 2;
@@ -42,7 +42,7 @@ new Promise((resolve) => {
 
 ## Observable Error
 
-```js | dom
+```js eval
 new Observable((observer) => {
   const a = 1;
   a = 2;
diff --git a/packages/genji-theme-vitepress/__tests__/markdown-extensions.md b/packages/genji-theme-vitepress/__tests__/markdown-extensions.md
index efdbc20..45c3ebf 100644
--- a/packages/genji-theme-vitepress/__tests__/markdown-extensions.md
+++ b/packages/genji-theme-vitepress/__tests__/markdown-extensions.md
@@ -4,7 +4,7 @@ Test Genji' built-in Markdown Extensions.
 
 ## Pure Block
 
-It should not render without `| dom` markup with `js`.
+It should not render without `eval` markup with `js`.
 
 ```js
 display(() => {
@@ -18,9 +18,9 @@ display(() => {
 
 ## Renderable Block
 
-It should render with `| dom` markup with `js`.
+It should render with `eval` markup with `js`.
 
-```js | dom {0,4}
+```js eval {0,4}
 display(() => {
   const div = document.createElement("div");
   div.style.width = "100px";
@@ -32,15 +32,15 @@ display(() => {
 
 ## JavaScript Block
 
-It should render with `| dom` markup with `javascript`.
+It should render with `eval` markup with `javascript`.
 
-```javascript | dom
+```javascript eval
 block("orange");
 ```
 
 ## Hide Code
 
-```js | dom "code: false"
+```js eval "code: false"
 display(() => {
   const div = document.createElement("div");
   div.style.width = "100px";
@@ -52,7 +52,7 @@ display(() => {
 
 ## Dispose Block
 
-```js | dom
+```js eval
 display(() => {
   const span = document.createElement("span");
   span.textContent = 1;
diff --git a/packages/genji-theme-vitepress/__tests__/object-inspector.md b/packages/genji-theme-vitepress/__tests__/object-inspector.md
index 3f07f22..1575769 100644
--- a/packages/genji-theme-vitepress/__tests__/object-inspector.md
+++ b/packages/genji-theme-vitepress/__tests__/object-inspector.md
@@ -2,25 +2,25 @@
 
 ## Number
 
-```js | dom
+```js eval
 a = 1;
 ```
 
 ## Boolean
 
-```js | dom
+```js eval
 a = true;
 ```
 
 ## Array
 
-```js | dom
+```js eval
 a = ["Apple", null, Promise];
 ```
 
 ## Function
 
-```js | dom
+```js eval
 function add(x, y) {
   return x + y;
 }
@@ -28,7 +28,7 @@ function add(x, y) {
 
 ## Object
 
-```js | dom
+```js eval
 a = {
   string: "a",
   add(x, y) {
@@ -40,7 +40,7 @@ a = {
 
 ## Class
 
-```js | dom
+```js eval
 display(() => {
   class N {
     add(x, y) {
diff --git a/packages/genji-theme-vitepress/__tests__/observable.md b/packages/genji-theme-vitepress/__tests__/observable.md
index 2b36ee2..c0247ee 100644
--- a/packages/genji-theme-vitepress/__tests__/observable.md
+++ b/packages/genji-theme-vitepress/__tests__/observable.md
@@ -2,7 +2,7 @@
 
 ## Basic
 
-```js | dom
+```js eval
 count = new Observable((observer) => {
   let count = 0;
   observer.next(count++);
@@ -13,7 +13,7 @@ count = new Observable((observer) => {
 
 ## Mouse
 
-```js | dom
+```js eval
 pointer = new Observable((observer) => {
   const pointermoved = (event) => observer.next([event.clientX, event.clientY]);
   addEventListener("pointermove", pointermoved);
diff --git a/packages/genji-theme-vitepress/__tests__/parser.md b/packages/genji-theme-vitepress/__tests__/parser.md
index 74fdbce..792c911 100644
--- a/packages/genji-theme-vitepress/__tests__/parser.md
+++ b/packages/genji-theme-vitepress/__tests__/parser.md
@@ -1,6 +1,6 @@
 # Parser
 
-```js | dom "parser: parseDiv"
+```js eval "parser: parseDiv"
 const div = document.createElement("div");
 div.style.width = "100px";
 div.style.height = "100px";
diff --git a/packages/genji-theme-vitepress/__tests__/promise-cell.md b/packages/genji-theme-vitepress/__tests__/promise-cell.md
index ed5c53f..5e27dc4 100644
--- a/packages/genji-theme-vitepress/__tests__/promise-cell.md
+++ b/packages/genji-theme-vitepress/__tests__/promise-cell.md
@@ -2,7 +2,7 @@
 
 ## Promise
 
-```js | dom
+```js eval
 new Promise((resolve) => {
   setTimeout(() => resolve(block("orange")), 3000);
 });
@@ -10,7 +10,7 @@ new Promise((resolve) => {
 
 ## Async Function
 
-```js | dom
+```js eval
 (async () => {
   await new Promise((resolve) => {
     setTimeout(() => resolve(), 1000);
@@ -19,7 +19,7 @@ new Promise((resolve) => {
 })();
 ```
 
-```js | dom
+```js eval
 display(async () => {
   await new Promise((resolve) => {
     setTimeout(() => resolve(), 1000);
diff --git a/packages/genji-theme-vitepress/package.json b/packages/genji-theme-vitepress/package.json
index 159194a..f18ef11 100644
--- a/packages/genji-theme-vitepress/package.json
+++ b/packages/genji-theme-vitepress/package.json
@@ -1,6 +1,6 @@
 {
   "name": "genji-theme-vitepress",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A VitePress theme to enable Genji interactive Markdown extension.",
   "main": "src/index.js",
   "exports": {
diff --git a/packages/genji-theme-vitepress/src/attrs.js b/packages/genji-theme-vitepress/src/attrs.js
index 8003325..ac926eb 100644
--- a/packages/genji-theme-vitepress/src/attrs.js
+++ b/packages/genji-theme-vitepress/src/attrs.js
@@ -1,4 +1,3 @@
-const regexType = /\|\s*([^\s]+)/;
 const regexDIV = /(\<div class="[^"]*")/;
 const regexQuote = /['"]([^'"]+)['"]/;
 
@@ -9,10 +8,10 @@ export function attrs(md) {
     const [tokens, idx] = args;
     const token = tokens[idx];
     const { info } = token;
+    const infoTokens = info.split(" ");
 
-    // Block type.
-    const matchType = info.match(regexType);
-    const type = matchType ? matchType[1] : null;
+    const shouldEval = infoTokens.includes("eval");
+    if (!shouldEval) return fence(...args);
 
     // Language.
     const lang = info.split(" ")[0];
@@ -28,11 +27,10 @@ export function attrs(md) {
           .join(" ")
       : "";
 
-    if (!type) return fence(...args);
     const html = fence(...args);
     const newHTML = html.replace(
       regexDIV,
-      `$1 data-genji="${type}" data-lang="${lang}" ${options}`
+      `$1 data-genji="dom" data-lang="${lang}" ${options}`
     );
     return newHTML;
   };