@maple-design/vite-plugins-vue 0.0.0-stage → 1.1.1

package/lib/index.d.ts

@@ -0,0 +1,30 @@
+import { Plugin } from 'vite';
+
+interface MarkdownOptions {
+    style?: string;
+}
+declare function markdown(options: MarkdownOptions): Plugin;
+
+interface HtmlOptions {
+    data?: Record<string, string | string[] | Record<string, any>>;
+}
+declare function html(options: HtmlOptions): Plugin;
+
+interface InlineCssOptions {
+    cssFile: string;
+    jsFile: string;
+    onEnd?(): void;
+}
+declare function inlineCss(options: InlineCssOptions): Plugin;
+
+interface CopyPath {
+    from: string;
+    to: string;
+    type: 'folder' | 'file';
+}
+interface CopyOptions {
+    paths: CopyPath[];
+}
+declare function copy(options: CopyOptions): Plugin;
+
+export { CopyOptions, CopyPath, HtmlOptions, InlineCssOptions, MarkdownOptions, copy, html, inlineCss, markdown };

package/lib/index.js

@@ -0,0 +1,451 @@
+// src/markdown.ts
+import { existsSync, readFileSync } from "node:fs";
+import { basename, dirname, resolve } from "node:path";
+import { kebabCase } from "@maple-design/shared-vue";
+import hljs from "highlight.js";
+import markdownIt from "markdown-it";
+import { pinyin } from "pinyin-pro";
+var includeChinese = (value) => /[\u4e00-\u9fa5]/.test(value);
+function transformHash(hash) {
+  return (includeChinese(hash) ? pinyin(hash, { toneType: "num" }) : hash).replaceAll(" ", "");
+}
+function htmlWrapper(html2) {
+  const disclosures = [];
+  const ranges = [];
+  let depth = 0;
+  let start = 0;
+  for (const tag of html2.matchAll(/<\/?details\b[^>]*>/gi)) {
+    if (tag[0].startsWith("</")) {
+      if (depth && --depth === 0) {
+        ranges.push({ start, end: tag.index + tag[0].length });
+      }
+    } else {
+      if (depth++ === 0) {
+        start = tag.index;
+      }
+    }
+  }
+  ranges.forEach((range) => disclosures.push(html2.slice(range.start, range.end)));
+  for (let index = ranges.length - 1; index >= 0; index--) {
+    const range = ranges[index];
+    html2 = html2.slice(0, range.start) + `MAPLE_DISCLOSURE_${index}` + html2.slice(range.end);
+  }
+  const matches = html2.matchAll(/<h3>(.*?)<\/h3>/g);
+  const hGroup = html2.replace(/<h3>/g, () => {
+    const hash = transformHash(matches.next().value[1]);
+    return `:::<h3 id="${hash}"><router-link to="#${hash}">#</router-link>`;
+  }).replace(/<h2/g, ":::<h2").split(":::");
+  const cardGroup = hGroup.map((fragment) => {
+    if (!fragment.includes("<h3")) {
+      return fragment;
+    }
+    const demoClass = fragment.includes("maple-component-preview") ? " card--demo" : "";
+    return `<div class="card${demoClass}">${fragment}</div>`;
+  }).join("");
+  return cardGroup.replace(/MAPLE_DISCLOSURE_(\d+)/g, (_, index) => disclosures[Number(index)]).replace(/<code(?=[\s>])/g, "<code v-pre");
+}
+function extractComponents(source) {
+  const componentRE = /import ([A-Z]\w*) from ['"][^'"]+\.vue['"]/;
+  const importRE = /import .+ from ['"].+['"]/g;
+  const vueRE = /```vue((.|\r|\n)*?)```/g;
+  const imports = [];
+  const components = [];
+  source = source.replace(vueRE, (block, p1) => {
+    const partImports = p1.match(importRE);
+    if (!partImports?.length || partImports.some((importer) => !componentRE.test(importer))) {
+      return block;
+    }
+    const partComponents = partImports?.map((importer) => {
+      importer = importer.replace(/(\n|\r)/g, "");
+      const component = importer.replace(componentRE, "$1");
+      !imports.includes(importer) && imports.push(importer);
+      !components.includes(component) && components.push(component);
+      return `<${kebabCase(component)} />`;
+    });
+    return partComponents ? `<div class="maple-component-preview">${partComponents.join("\n")}</div>` : "";
+  });
+  return {
+    imports,
+    components,
+    source
+  };
+}
+function renderDemo(demo) {
+  const encodedSource = encodeURIComponent(demo.source);
+  const encodedHighlight = encodeURIComponent(highlight(demo.source, "html"));
+  const pageClass = demo.page ? " maple-component-preview--page" : "";
+  const mobileId = demo.mobileId ? ` data-mobile-demo="${encodeURIComponent(demo.mobileId)}"` : "";
+  return `<div class="maple-component-preview${pageClass}"${mobileId}>
+<mp-site-demo-preview source-name="${basename(demo.path)}" source="${encodedSource}" highlight-code="${encodedHighlight}">
+<${demo.component}></${demo.component}>
+</mp-site-demo-preview>
+</div>`;
+}
+var demoPlaceholder = (index) => `MAPLE_DOC_DEMO_${index}`;
+function discoverGroupedDemos(indexPath, language, onDependency) {
+  const indexSource = readFileSync(indexPath, "utf8");
+  const imports = /* @__PURE__ */ new Map();
+  for (const match of indexSource.matchAll(/import\s+(\w+)\s+from\s+['"](\.\/demos\/[^'"]+\.vue)['"]/g)) {
+    imports.set(match[1], match[2]);
+  }
+  if (!imports.size) {
+    return [];
+  }
+  let messages = {};
+  const messagesRequest = indexSource.match(/import\s+messages\s+from\s+['"](.+?\.json)['"]/)?.[1];
+  if (messagesRequest) {
+    const messagesPath = resolve(dirname(indexPath), messagesRequest);
+    onDependency?.(messagesPath);
+    const catalog = JSON.parse(readFileSync(messagesPath, "utf8"));
+    messages = catalog[language] ?? {};
+  }
+  return [...indexSource.matchAll(/<section\b[^>]*data-demo=['"]([^'"]+)['"][^>]*>[\s\S]*?<([A-Z]\w*)\b/g)].map((match) => {
+    const request = imports.get(match[2]);
+    if (!request) {
+      return void 0;
+    }
+    const name = request.slice(request.lastIndexOf("/") + 1, -4);
+    return {
+      id: match[1],
+      request: `../example/${request.slice(2)}`,
+      path: resolve(dirname(indexPath), request),
+      title: messages[match[1]] ?? name.replaceAll("-", " ")
+    };
+  }).filter((demo) => !!demo);
+}
+function replaceGroupedExamples(source, demos, language) {
+  const exampleHeading = /^## (?:案例|Examples?)[ \t]*$/m;
+  const headingMatch = exampleHeading.exec(source);
+  if (!headingMatch) {
+    const heading = language === "en-US" ? "## Examples" : "## \u6848\u4F8B";
+    const generated = demos.map((demo, index) => `### ${demo.title}
+
+${demoPlaceholder(index)}`).join("\n\n");
+    const section = `${heading}
+
+${generated}`;
+    const firstSection = /^## .+$/m;
+    return firstSection.test(source) ? source.replace(firstSection, (existing) => `${section}
+
+${existing}`) : `${source.trim()}
+
+${section}
+`;
+  }
+  const bodyStart = headingMatch.index + headingMatch[0].length;
+  const nextSectionOffset = source.slice(bodyStart).search(/^## .+$/m);
+  const bodyEnd = nextSectionOffset < 0 ? source.length : bodyStart + nextSectionOffset;
+  const body = source.slice(bodyStart, bodyEnd);
+  const headings = [...body.matchAll(/^### .+$/gm)];
+  if (headings.length < demos.length) {
+    const generated = demos.map((demo, index) => `
+
+### ${demo.title}
+
+${demoPlaceholder(index)}`).join("");
+    return `${source.slice(0, bodyStart)}${generated}
+
+${source.slice(bodyEnd)}`;
+  }
+  const segments = [];
+  let cursor = 0;
+  demos.forEach((_, index) => {
+    const start = headings[index].index;
+    const end = headings[index + 1]?.index ?? body.length;
+    segments.push(body.slice(cursor, start));
+    const segment = body.slice(start, end).replace(/```[^\n]*\n[\s\S]*?\n```[ \t]*/g, "").trimEnd();
+    segments.push(`${segment}
+
+${demoPlaceholder(index)}
+
+`);
+    cursor = end;
+  });
+  segments.push(body.slice(cursor));
+  return `${source.slice(0, bodyStart)}${segments.join("")}${source.slice(bodyEnd)}`;
+}
+function expandDemoFiles(source, id, onDemo) {
+  let index = 0;
+  const demos = [];
+  const addDemo = (request) => {
+    const demoRequest = request.trim();
+    const demoPath = resolve(dirname(id), demoRequest);
+    onDemo?.(demoPath);
+    const demoSource = readFileSync(demoPath, "utf8").trim();
+    const component = `MapleDemo${index++}`;
+    const demo = { component, request: demoRequest, path: demoPath, source: demoSource };
+    demos.push(demo);
+    return demoPlaceholder(demos.length - 1);
+  };
+  const offsets = [0];
+  for (const line of source.split("\n")) {
+    offsets.push(offsets[offsets.length - 1] + line.length + 1);
+  }
+  const edits = [];
+  const demoTag = /<demo\b[^>]*\bsrc\s*=\s*(['"])([^'"]+)\1[^>]*(?:\/>|>\s*<\/demo>)/g;
+  for (const token of markdownIt({ html: true }).parse(source, {})) {
+    if (!token.map) {
+      continue;
+    }
+    const start = offsets[token.map[0]];
+    const end = Math.min(offsets[token.map[1]], source.length);
+    if (token.type === "fence" && token.info.trim() === "demo") {
+      edits.push({ start, end, content: `${addDemo(token.content)}
+` });
+    } else if ((token.type === "html_block" || token.type === "inline") && token.content.replace(demoTag, "").trim() === "") {
+      const original = source.slice(start, end);
+      const content = original.replace(demoTag, (_, _quote, request) => `
+
+${addDemo(request)}
+
+`);
+      if (content !== original) {
+        edits.push({ start, end, content });
+      }
+    }
+  }
+  for (const edit of edits.reverse()) {
+    source = source.slice(0, edit.start) + edit.content + source.slice(edit.end);
+  }
+  if (!demos.length && /\/src\/[^/]+\/docs\/[^/]+\.md$/.test(id.replaceAll("\\", "/"))) {
+    const exampleIndexPath = resolve(dirname(id), "../example/index.vue");
+    const language = id.endsWith("/en-US.md") ? "en-US" : "zh-CN";
+    if (existsSync(exampleIndexPath)) {
+      onDemo?.(exampleIndexPath);
+      const grouped = discoverGroupedDemos(exampleIndexPath, language, onDemo);
+      if (grouped.length) {
+        grouped.forEach((item, groupedIndex) => {
+          const demo2 = {
+            component: `MapleDemo${groupedIndex}`,
+            request: item.request,
+            path: item.path,
+            source: readFileSync(item.path, "utf8").trim(),
+            title: item.title
+          };
+          demos.push(demo2);
+          onDemo?.(item.path);
+        });
+        source = replaceGroupedExamples(source, demos, language);
+        return { source, demos };
+      }
+      const demoPath = exampleIndexPath;
+      const exampleHeading = /^## (?:案例|Examples?)[ \t]*$/m;
+      const demo = {
+        component: "MaplePageDemo",
+        request: "../example/index.vue",
+        path: demoPath,
+        source: readFileSync(demoPath, "utf8").trim(),
+        page: true
+      };
+      demos.push(demo);
+      const placeholder = demoPlaceholder(demos.length - 1);
+      if (exampleHeading.test(source)) {
+        source = source.replace(exampleHeading, (heading) => `${heading}
+
+${placeholder}`);
+      } else {
+        const heading = id.endsWith("/en-US.md") ? "## Examples" : "## \u6848\u4F8B";
+        const firstSection = /^## .+$/m;
+        source = firstSection.test(source) ? source.replace(firstSection, (section) => `${heading}
+
+${placeholder}
+
+${section}`) : `${source.trim()}
+
+${heading}
+
+${placeholder}
+`;
+      }
+    }
+  }
+  return { source, demos };
+}
+function injectCodeExample(source) {
+  const codeRE = /(<pre class="hljs">(.|\r|\n)*?<\/pre>)/g;
+  return source.replace(codeRE, (str) => {
+    const flags = [
+      "// playground-ignore\n",
+      '<span class="hljs-meta">#</span><span class="bash"> playground-ignore</span>\n',
+      '<span class="hljs-comment">// playground-ignore</span>\n',
+      '<span class="hljs-comment">/* playground-ignore */</span>\n',
+      '<span class="hljs-comment">&lt;!-- playground-ignore --&gt;</span>\n'
+    ];
+    const attr = flags.some((flag) => str.includes(flag)) ? "playground-ignore" : "";
+    str = flags.reduce((str2, flag) => str2.replace(flag, ""), str);
+    return `<mp-site-code-example ${attr}>${str}</mp-site-code-example>`;
+  });
+}
+function highlight(str, lang, style) {
+  let link = "";
+  if (style) {
+    link = '<link class="hljs-style" rel="stylesheet" href="' + style + '"/>';
+  }
+  if (lang && hljs.getLanguage(lang)) {
+    return '<pre class="hljs"><code>' + link + hljs.highlight(str, { language: lang, ignoreIllegals: true }).value + "</code></pre>";
+  }
+  return "";
+}
+function attachMobileDemoIds(demos, id, onDependency) {
+  if (!demos.length || !/\/src\/[^/]+\/docs\/[^/]+\.md$/.test(id.replaceAll("\\", "/"))) {
+    return;
+  }
+  const indexPath = resolve(dirname(id), "../example/index.vue");
+  if (!existsSync(indexPath)) {
+    return;
+  }
+  onDependency?.(indexPath);
+  const indexSource = readFileSync(indexPath, "utf8");
+  const imports = [...indexSource.matchAll(/import\s+(\w+)\s+from\s+['"](\.{1,2}\/[^'"]+\.vue)['"]/g)];
+  const canonical = (file) => file.replace(/\/demos\/(?:en-US|zh-CN)\//, "/demos/");
+  const ids = /* @__PURE__ */ new Map();
+  for (const section of indexSource.matchAll(/<section\b[^>]*data-demo=['"]([^'"]+)['"][^>]*>([\s\S]*?)<\/section>/g)) {
+    for (const [, name, request] of imports) {
+      if (new RegExp(`<${name}(?=[\\s/>])|:is=["'][^"']*\\b${name}\\b`).test(section[2])) {
+        ids.set(canonical(resolve(dirname(indexPath), request)), section[1]);
+      }
+    }
+  }
+  for (const demo of demos) {
+    demo.mobileId = ids.get(canonical(demo.path));
+  }
+}
+function markdownToVue(source, options, id, onDemo) {
+  const expanded = expandDemoFiles(source, id, onDemo);
+  attachMobileDemoIds(expanded.demos, id, onDemo);
+  source = expanded.source;
+  const { source: vueSource, imports, components } = extractComponents(source);
+  const md = markdownIt({
+    html: true,
+    highlight: (str, lang) => highlight(str, lang, options.style)
+  });
+  let rendered = md.render(vueSource);
+  expanded.demos.forEach((demo, index) => {
+    rendered = rendered.replace(`<p>${demoPlaceholder(index)}</p>`, renderDemo(demo));
+  });
+  let templateString = htmlWrapper(rendered);
+  templateString = templateString.replace(/process.env/g, "<span>process.env</span>");
+  templateString = injectCodeExample(templateString);
+  return `
+<template><div class="maple-site-doc">${templateString}</div></template>
+
+<script>
+${expanded.demos.map((demo) => `import ${demo.component} from '${demo.request}'`).join("\n")}
+${imports.join("\n")}
+
+export default {
+  components: {
+    ${[...expanded.demos.map((demo) => demo.component), ...components].join(",")}
+  }
+}
+</script>
+  `;
+}
+function markdown(options) {
+  const demosByMarkdown = /* @__PURE__ */ new Map();
+  return {
+    name: "vite-plugin-maple-markdown",
+    enforce: "pre",
+    transform(source, id) {
+      if (!/\.md$/.test(id)) {
+        return;
+      }
+      try {
+        const markdownId = id.split("?", 1)[0];
+        const demos = [];
+        const result = markdownToVue(source, options, markdownId, (demo) => {
+          demos.push(demo);
+          this.addWatchFile(demo);
+        });
+        demosByMarkdown.set(markdownId, demos);
+        return result;
+      } catch (e) {
+        this.error(e);
+      }
+    },
+    handleHotUpdate(ctx) {
+      if (/\.md$/.test(ctx.file)) {
+        const { read } = ctx;
+        ctx.read = async () => markdownToVue(await read(), options, ctx.file);
+        return;
+      }
+      const markdownModules = [...demosByMarkdown].filter(([, demos]) => demos.includes(ctx.file)).flatMap(([markdownId]) => {
+        const module = ctx.server.moduleGraph.getModuleById(markdownId);
+        if (module) {
+          ctx.server.moduleGraph.invalidateModule(module);
+          return [module];
+        }
+        return [];
+      });
+      if (markdownModules.length) {
+        return [...ctx.modules, ...markdownModules];
+      }
+    }
+  };
+}
+
+// src/html.ts
+import ejs from "ejs";
+function html(options) {
+  return {
+    name: "vite-plugin-maple-html",
+    transformIndexHtml: {
+      order: "pre",
+      handler(html2) {
+        return ejs.render(html2, options.data);
+      }
+    }
+  };
+}
+
+// src/inlineCss.ts
+import fse from "fs-extra";
+var { pathExistsSync, writeFileSync, readFileSync: readFileSync2, removeSync } = fse;
+function inlineCss(options) {
+  return {
+    name: "vite-plugin-maple-inline-css",
+    apply: "build",
+    closeBundle() {
+      const { cssFile, jsFile, onEnd } = options;
+      if (!pathExistsSync(cssFile)) {
+        this.warn("css file cannot found");
+        return;
+      }
+      if (!pathExistsSync(jsFile)) {
+        this.warn("js file cannot found");
+        return;
+      }
+      const cssCode = readFileSync2(cssFile, "utf-8");
+      const jsCode = readFileSync2(jsFile, "utf-8");
+      const injectCode = `;(function(){var style=document.createElement('style');style.type='text/css';style.rel='stylesheet';style.appendChild(document.createTextNode(\`${cssCode.replace(/\\/g, "\\\\")}\`));var head=document.querySelector('head');head.appendChild(style)})();`;
+      writeFileSync(jsFile, `${injectCode}${jsCode}`);
+      removeSync(cssFile);
+      onEnd?.();
+    }
+  };
+}
+
+// src/copy.ts
+import fse2 from "fs-extra";
+var { copySync, copyFileSync } = fse2;
+function copy(options) {
+  return {
+    name: "vite-plugin-maple-copy",
+    buildStart() {
+      options.paths.forEach((copyPath) => {
+        try {
+          ;
+          (copyPath.type === "folder" ? copySync : copyFileSync)(copyPath.from, copyPath.to);
+        } catch (e) {
+          this.warn(e);
+        }
+      });
+    }
+  };
+}
+export {
+  copy,
+  html,
+  inlineCss,
+  markdown
+};

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "@maple-design/vite-plugins-vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.1.1",
+  "description": "vite plugins of maple",
+  "keywords": [
+    "vite",
+    "plugins",
+    "maple"
+  ],
+  "homepage": "https://github.com/loca-spirit/maple-design-mobile#readme",
+  "bugs": {
+    "url": "https://github.com/loca-spirit/maple-design-mobile/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/loca-spirit/maple-design-mobile.git",
+    "directory": "packages/vite-plugins"
+  },
+  "license": "MIT",
+  "author": "shuai.meng",
+  "type": "module",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "dependencies": {
+    "ejs": "^3.1.10",
+    "fs-extra": "^9.0.1",
+    "highlight.js": "^10.7.3",
+    "markdown-it": "^14.3.0",
+    "pinyin-pro": "3.17.0",
+    "@maple-design/shared-vue": "1.1.1"
+  },
+  "devDependencies": {
+    "@types/ejs": "^3.1.5",
+    "@types/fs-extra": "^9.0.13",
+    "@types/markdown-it": "^12.2.3",
+    "@types/node": "^18.7.20",
+    "tsup": "7.2.0",
+    "typescript": "5.3.3"
+  },
+  "peerDependencies": {
+    "vite": "6.1.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --out-dir=lib --dts --clean",
+    "dev": "tsup src/index.ts --format esm --out-dir=lib --watch --dts"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.