feat(vitepress): change dom to eval

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