feat(vitepress): change dom to eval (#86)

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;

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;

packages/genji-theme-vitepress/__tests__/object-inspector.md

@@ -2,33 +2,33 @@
 
 ## 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;
 }
 ```
 
 ## 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) {

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);

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";

packages/genji-theme-vitepress/__tests__/promise-cell.md

@@ -2,15 +2,15 @@
 
 ## Promise
 
-```js | dom
+```js eval
 new Promise((resolve) => {
   setTimeout(() => resolve(block("orange")), 3000);
 });
 ```
 
 ## 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);

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": {

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;
   };