feat(md-enhance): improve sandpack attr handle

vuepress-theme-hope · Jan 26, 2024 · be94b6d · be94b6d
1 parent 54c46e0
commit be94b6d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 30 deletions.
diff --git a/packages/md-enhance/__tests__/unit/__snapshots__/sandpack.spec.ts.snap b/packages/md-enhance/__tests__/unit/__snapshots__/sandpack.spec.ts.snap
@@ -13,19 +13,19 @@ exports[`Sandpack > Should resolve sandpack info with customSetup 1`] = `
 `;
 
 exports[`Sandpack > Should resolve sandpack info with file attrs 1`] = `
-"<SandPack title="Sandpack%20demo%20with%20options" template="" files="eJx1j71OBCEUhV/lSjOajBK33LCTGBs7SxuaCTAuCX8BZhJDeHcvg0aNuxX3h3O+cwuhKQr6FMLDtipyLER4iS9hSUQdMiSV1zBxp23wMUOBqBaosERvYUDJwJ3wLmWw6R1ObXs7vChjPLz5aOTNcMcdo90MbVhWNpg5K6wB2PlxKmWX1soodvtUu7Bm2O4tRjEnTnDPCdAmp7/0ZCSzyHrDuMtskhrJWUupHDnmuGIX1SxfnfnofR37qc/e/rv1byipt6n9YrRV16Gd8s38ivAD3QdIbVaHTrxGOlxG1U+b7o11" options="eJyrrgUAAXUA+Q==" customSetup="eJyrrgUAAXUA+Q==">
+"<SandPack title="Sandpack%20demo%20with%20options" files="eJx1j71OBCEUhV/lSjOajBK33LCTGBs7SxuaCTAuCX8BZhJDeHcvg0aNuxX3h3O+cwuhKQr6FMLDtipyLER4iS9hSUQdMiSV1zBxp23wMUOBqBaosERvYUDJwJ3wLmWw6R1ObXs7vChjPLz5aOTNcMcdo90MbVhWNpg5K6wB2PlxKmWX1soodvtUu7Bm2O4tRjEnTnDPCdAmp7/0ZCSzyHrDuMtskhrJWUupHDnmuGIX1SxfnfnofR37qc/e/rv1byipt6n9YrRV16Gd8s38ivAD3QdIbVaHTrxGOlxG1U+b7o11" options="eJyrrgUAAXUA+Q==" customSetup="eJyrrgUAAXUA+Q==">
 </SandPack>
 "
 `;
 
 exports[`Sandpack > Should resolve sandpack info with file attrs and customSetup 1`] = `
-"<SandPack title="Sandpack%20demo%20with%20file%20attrs%20and%20customSetup%20" template="" files="eJyNkE1OwzAQha8yWEICFOp2W9IK6IYFEhzAGyuZppEc2/JPpCrK3Rk7pC2Loq6SmXl+b+YbGPeu4m/WLvqIbD2wytT0ZaWvXGsDeAzRboVuO2tcgAEc7mGEvTMdCEZvBHs5TXems/NowVOVXLNC6MpoH6DzDWySyYNgH6iUgW8lj40zUdd3gj2StORTNqVSEbCzSgakCqA8rLbDkE3GseRU5W6rbQzQP3e0u9oIRnPBgE/DvFT6L/mFFyuYrELb0617qTwW7NDWNepT6VDWX1od2Tq4iGMxgZpvuoVU9PguQ0B3PAN7pbfU55Vxf8hd4TpTG6A6SNe0uilAYY+KpJuLgIcbuM27+CBD9Gd4drv79V4DsZ2DMuB0T5Z8ptA8n+KfYLVckuR+0lxDm9D9QzY3xvEH49nd3w==" options="eJyrrgUAAXUA+Q==" customSetup="eJyrVkpJLUjNS0nNS85MLVayqlZyKCtNLS1O1U/OL0pVslLKSSxJLS5R0oGLF2ckFqWmIMsAJXRTUnMzEWK1tQBugx7v" rtl="true" theme="dark">
+"<SandPack rtl theme="dark" title="Sandpack%20demo%20with%20file%20attrs%20and%20customSetup%20" files="eJyNkE1OwzAQha8yWEICFOp2W9IK6IYFEhzAGyuZppEc2/JPpCrK3Rk7pC2Loq6SmXl+b+YbGPeu4m/WLvqIbD2wytT0ZaWvXGsDeAzRboVuO2tcgAEc7mGEvTMdCEZvBHs5TXems/NowVOVXLNC6MpoH6DzDWySyYNgH6iUgW8lj40zUdd3gj2StORTNqVSEbCzSgakCqA8rLbDkE3GseRU5W6rbQzQP3e0u9oIRnPBgE/DvFT6L/mFFyuYrELb0617qTwW7NDWNepT6VDWX1od2Tq4iGMxgZpvuoVU9PguQ0B3PAN7pbfU55Vxf8hd4TpTG6A6SNe0uilAYY+KpJuLgIcbuM27+CBD9Gd4drv79V4DsZ2DMuB0T5Z8ptA8n+KfYLVckuR+0lxDm9D9QzY3xvEH49nd3w==" options="eJyrrgUAAXUA+Q==" customSetup="eJyrVkpJLUjNS0nNS85MLVayqlZyKCtNLS1O1U/OL0pVslLKSSxJLS5R0oGLF2ckFqWmIMsAJXRTUnMzEWK1tQBugx7v">
 </SandPack>
 "
 `;
 
 exports[`Sandpack > Should resolve sandpack info with options 1`] = `
-"<SandPack title="Sandpack%20demo%20with%20options" template="" files="eJxdjrsKAjEQRX9lTBMFNdhKXBAb/8AmjexmNZDHkMxuE/LvJiuI2t2ZO+cwmZ0R9/Ok2ZHJ1EeDBEnThJ3yxmGIBBmiHqHAGIMDXk+58n3wicClB5xau+ZXbW2AW4h2WPGN8lK8ZVUjSTu0d9I1A8jnoct5QUuRok7L1nicCOadC4O2J8VqrxiIhosvnm3ZJbjPw7/mwcxda6Vo6Z8sLze/UE4=" options="eJyrVipKTUzxz8upVLIqKSpN1VEqzsgvD4KLpSXmFKfWAgAN5g4J" customSetup="eJyrrgUAAXUA+Q==">
+"<SandPack title="Sandpack%20demo%20with%20options" files="eJxdjrsKAjEQRX9lTBMFNdhKXBAb/8AmjexmNZDHkMxuE/LvJiuI2t2ZO+cwmZ0R9/Ok2ZHJ1EeDBEnThJ3yxmGIBBmiHqHAGIMDXk+58n3wicClB5xau+ZXbW2AW4h2WPGN8lK8ZVUjSTu0d9I1A8jnoct5QUuRok7L1nicCOadC4O2J8VqrxiIhosvnm3ZJbjPw7/mwcxda6Vo6Z8sLze/UE4=" options="eJyrVipKTUzxz8upVLIqKSpN1VEqzsgvD4KLpSXmFKfWAgAN5g4J" customSetup="eJyrrgUAAXUA+Q==">
 </SandPack>
 "
 `;
diff --git a/packages/md-enhance/__tests__/unit/sandpack.spec.ts b/packages/md-enhance/__tests__/unit/sandpack.spec.ts
@@ -153,7 +153,7 @@ const msg = ref('Hello World!')
     const options = getOptions(result);
     const customSetup = getCustomSetup(result);
 
-    expect(template).toEqual("");
+    expect(template).toEqual(null);
 
     expect(file).toEqual({
       "App.vue": `\
@@ -298,7 +298,7 @@ const msg = ref('Hello World!')
     const options = getOptions(result);
     const customSetup = getCustomSetup(result);
 
-    expect(template).toEqual("");
+    expect(template).toEqual(null);
 
     expect(file).toEqual({
       "/src/App.vue": {
@@ -394,15 +394,15 @@ const { charging, level } = useBattery();
     );
 
     expect(result).toMatchSnapshot();
-    expect(result).includes('rtl="true"');
+    expect(result).includes("rtl");
     expect(result).includes('theme="dark"');
 
     const template = getTemplate(result);
     const file = getFiles(result);
     const options = getOptions(result);
     const customSetup = getCustomSetup(result);
 
-    expect(template).toEqual("");
+    expect(template).toEqual(null);
 
     expect(file).toEqual({
       "/src/App.vue": {

diff --git a/packages/md-enhance/src/node/markdown-it/sandpack/plugin.ts b/packages/md-enhance/src/node/markdown-it/sandpack/plugin.ts
@@ -6,7 +6,7 @@ import type {
   SandpackPredefinedTemplate,
   SandpackSetup,
 } from "sandpack-vue3";
-import { entries, utoa } from "vuepress-shared/node";
+import { entries, keys, utoa } from "vuepress-shared/node";
 
 import { encodeFiles, getAttrs } from "./utils.js";
 import type { SandpackData } from "../../typings/index.js";
@@ -305,9 +305,9 @@ export const sandpack: PluginSimple = (md) => {
 
           sandpackData.files[currentKey] = {
             code: "",
-            active: !!fileAttrs["active"],
-            hidden: !!fileAttrs["hidden"],
-            readOnly: !!fileAttrs["readOnly"],
+            active: "active" in fileAttrs,
+            hidden: "hidden" in fileAttrs,
+            readOnly: "readOnly" in fileAttrs,
           };
         } else if (
           type === "file_close" ||
@@ -360,13 +360,17 @@ export const sandpack: PluginSimple = (md) => {
 
     const props = propsGetter(sandpackData);
 
-    // merge
-    entries(attrs)?.forEach((attr) => {
-      if (!props[attr[0]] && attr[1]) props[attr[0]] = attr[1];
-    });
-
-    return `<SandPack ${entries(props)
-      .map(([attr, value]) => `${attr}="${escapeHtml(value || "")}"`)
+    return `<SandPack ${
+      keys(attrs).length
+        ? `${entries(attrs)
+            .map(([attr, value]) =>
+              value ? `${attr}="${escapeHtml(value)}"` : attr,
+            )
+            .join(" ")} `
+        : ""
+    }${entries(props)
+      .map(([attr, value]) => (value ? `${attr}="${escapeHtml(value)}"` : null))
+      .filter(Boolean)
       .join(" ")}>\n`;
   };
 

diff --git a/packages/md-enhance/src/node/markdown-it/sandpack/utils.ts b/packages/md-enhance/src/node/markdown-it/sandpack/utils.ts
@@ -16,24 +16,23 @@ export const encodeFiles = (files: SandpackData["files"]): string =>
     ),
   );
 
-export const getAttrs = (str: string): Record<string, string | null> => {
-  const attrs: Record<string, string | null> = {};
-
+export const getAttrs = (str: string): Record<string, string> => {
   // const matches = /.*(?<!\\)\{([^}]*)\}.*/g.exec(str); // {attr1 attr2}
-  const matches = /.*(?<!\\)\[([^}]*)\].*/g.exec(str); // [attr1 attr2]
+  const matches = /.*(?<!\\)\[([^}]*)\].*/.exec(str); // [attr1 attr2]
 
   if (matches && matches[1]) {
     const arrAttrs = matches[1].split(" ");
 
-    arrAttrs
-      .filter((attr) => attr.trim().length > 0)
-      .forEach((attr) => {
-        const pairs = attr.trim().split("=", 2);
+    return fromEntries(
+      arrAttrs
+        .filter((attr) => attr.trim().length > 0)
+        .map((attr) => {
+          const [key, value = ""] = attr.trim().split("=", 2);
 
-        if (pairs.length === 1) attrs[pairs[0]] = "true";
-        else attrs[pairs[0]] = pairs[1];
-      });
+          return [key, value];
+        }),
+    );
   }
 
-  return attrs;
+  return {};
 };