@dimina/compiler 1.0.1

package/dist/core/view-compiler.js

@@ -0,0 +1,634 @@
+import fs from "node:fs";
+import { isMainThread, parentPort } from "node:worker_threads";
+import babel from "@babel/core";
+import types from "@babel/types";
+import _traverse from "@babel/traverse";
+import { compileTemplate } from "@vue/compiler-sfc";
+import * as cheerio from "cheerio";
+import * as htmlparser2 from "htmlparser2";
+import { transform } from "esbuild";
+import { r as resetStoreInfo, g as getTargetPath, a as getComponent, b as getContentByPath, c as getAbsolutePath, d as collectAssets, e as getAppId, f as getWorkPath, t as transformRpx, h as tagWhiteList } from "../env-CezfCSQz.js";
+const traverse = _traverse.default ? _traverse.default : _traverse;
+const fileType = [".wxml", ".ddml"];
+const compileResCache = /* @__PURE__ */ new Map();
+const processedModules = /* @__PURE__ */ new Set();
+if (!isMainThread) {
+  parentPort.on("message", async ({ pages, storeInfo }) => {
+    try {
+      resetStoreInfo(storeInfo);
+      const progress = {
+        _completedTasks: 0,
+        get completedTasks() {
+          return this._completedTasks;
+        },
+        set completedTasks(value) {
+          this._completedTasks = value;
+          parentPort.postMessage({ completedTasks: this._completedTasks });
+        }
+      };
+      await compileML(pages.mainPages, null, progress);
+      for (const [root, subPages] of Object.entries(pages.subPages)) {
+        await compileML(subPages.info, root, progress);
+      }
+      parentPort.postMessage({ success: true });
+    } catch (error) {
+      parentPort.postMessage({ success: false, error: error.message });
+    }
+  });
+}
+async function compileML(pages, root, progress) {
+  for (const page of pages) {
+    const scriptRes = /* @__PURE__ */ new Map();
+    buildCompileView(page, false, scriptRes, []);
+    let mergeRender = "";
+    for (const [key, value] of scriptRes.entries()) {
+      const amdFormat = `modDefine('${key}', function(require, module, exports) {
+		${value}
+		});`;
+      const { code: minifiedCode } = await transform(amdFormat, {
+        minify: true,
+        target: ["es2020"],
+        platform: "browser"
+      });
+      mergeRender += minifiedCode;
+    }
+    const filename = `${page.path.replace(/\//g, "_")}`;
+    if (root) {
+      const subDir = `${getTargetPath()}/${root}`;
+      if (!fs.existsSync(subDir)) {
+        fs.mkdirSync(subDir);
+      }
+      fs.writeFileSync(`${subDir}/${filename}.js`, mergeRender);
+    } else {
+      const mainDir = `${getTargetPath()}/main`;
+      if (!fs.existsSync(mainDir)) {
+        fs.mkdirSync(mainDir);
+      }
+      fs.writeFileSync(`${mainDir}/${filename}.js`, mergeRender);
+    }
+    progress.completedTasks++;
+  }
+}
+function buildCompileView(module, isComponent = false, scriptRes, depthChain = []) {
+  const currentPath = module.path;
+  if (depthChain.includes(currentPath)) {
+    console.warn(`检测到循环依赖: ${[...depthChain, currentPath].join(" -> ")}`);
+  }
+  if (depthChain.length > 100) {
+    console.warn(`检测到深度依赖: ${[...depthChain, currentPath].join(" -> ")}`);
+  }
+  depthChain = [...depthChain, currentPath];
+  compileModule(module, isComponent, scriptRes);
+  if (module.usingComponents) {
+    for (const componentInfo of Object.values(module.usingComponents)) {
+      const componentModule = getComponent(componentInfo);
+      if (!componentModule) {
+        continue;
+      }
+      buildCompileView(componentModule, true, scriptRes, depthChain);
+    }
+  }
+  processedModules.add(currentPath);
+}
+function compileModule(module, isComponent, scriptRes) {
+  const { tpl, instruction } = toCompileTemplate(isComponent, module.path, module.usingComponents, module.componentPlaceholder);
+  if (!tpl) {
+    return;
+  }
+  if (!scriptRes.has(module.path) && compileResCache.has(module.path)) {
+    const res = compileResCache.get(module.path);
+    scriptRes.set(module.path, res);
+    for (const sm of instruction.scriptModule) {
+      if (!scriptRes.has(sm.path)) {
+        scriptRes.set(sm.path, sm.code);
+      }
+    }
+    return;
+  }
+  const processedTpl = tpl.replace(/\bthis\./g, "_ctx.");
+  const tplCode = compileTemplate({
+    source: processedTpl,
+    filename: module.path,
+    // 用于错误提示
+    id: `data-v-${module.id}`,
+    scoped: true,
+    compilerOptions: {
+      // https://template-explorer.vuejs.org/
+      prefixIdentifiers: true,
+      hoistStatic: false,
+      cacheHandlers: true,
+      scopeId: `data-v-${module.id}`,
+      mode: "function",
+      inline: true
+    }
+  });
+  let tplComponents = "{";
+  for (const tm of instruction.templateModule) {
+    tplComponents += `'${tm.path}':${compileTemplate({
+      source: tm.tpl,
+      filename: tm.path,
+      id: `data-v-${module.id}`,
+      scoped: true,
+      compilerOptions: {
+        prefixIdentifiers: true,
+        hoistStatic: false,
+        cacheHandlers: true,
+        scopeId: `data-v-${module.id}`,
+        mode: "function",
+        inline: true
+      }
+    }).code},`;
+  }
+  tplComponents += "}";
+  const tplAst = babel.parseSync(tplCode.code);
+  for (const sm of instruction.scriptModule) {
+    if (!scriptRes.has(sm.path)) {
+      scriptRes.set(sm.path, sm.code);
+    }
+    const assignmentExpression = types.assignmentExpression(
+      "=",
+      // 创建赋值表达式
+      types.memberExpression(
+        types.identifier("_ctx"),
+        // 对象标识符
+        types.identifier(sm.path),
+        // 属性标识符
+        false
+        // 是否是计算属性
+      ),
+      // 创建require调用表达式
+      types.callExpression(
+        types.identifier("require"),
+        // 函数标识符
+        [types.stringLiteral(sm.path)]
+        // 参数列表，这里传入字符串字面量'foo'
+      )
+    );
+    const expressionStatement = types.expressionStatement(assignmentExpression);
+    tplAst.program.body[0].expression.body.body.splice(0, 0, expressionStatement);
+  }
+  const { code: transCode } = babel.transformFromAstSync(tplAst, "", {
+    comments: false
+  });
+  const code = `Module({
+		path: '${module.path}',
+		id: '${module.id}',
+		render: ${transCode.replace(/;$/, "").replace(/^"use strict";\s*/, "")},
+		usingComponents: ${JSON.stringify(module.usingComponents)},
+		tplComponents: ${tplComponents},
+		});`;
+  compileResCache.set(module.path, code);
+  scriptRes.set(module.path, code);
+}
+function toCompileTemplate(isComponent, path, components, componentPlaceholder) {
+  const workPath = getWorkPath();
+  const fullPath = getViewPath(workPath, path);
+  if (!fullPath) {
+    return { tpl: void 0 };
+  }
+  let content = getContentByPath(fullPath).trim();
+  if (!content) {
+    content = "<block></block>";
+  } else {
+    if (isComponent) {
+      content = `<wrapper>${content}</wrapper>`;
+    }
+  }
+  const templateModule = [];
+  const $ = cheerio.load(content, {
+    xmlMode: true,
+    decodeEntities: false
+  });
+  const includeNodes = $("include");
+  includeNodes.each((_, elem) => {
+    const src = $(elem).attr("src");
+    if (src) {
+      const includeContent = getContentByPath(getAbsolutePath(workPath, path, src)).trim();
+      if (includeContent) {
+        const $includeContent = cheerio.load(includeContent, {
+          xmlMode: true,
+          decodeEntities: false
+        });
+        $includeContent("template").remove();
+        $includeContent("wxs").remove();
+        $includeContent("dds").remove();
+        $(elem).html($includeContent.html());
+      }
+    }
+  });
+  transTagTemplate($, templateModule, path, components);
+  const importNodes = $("import");
+  importNodes.each((_, elem) => {
+    const src = $(elem).attr("src");
+    if (src) {
+      const importContent = getContentByPath(getAbsolutePath(workPath, path, src)).trim();
+      if (importContent) {
+        transTagTemplate(
+          cheerio.load(importContent, {
+            xmlMode: true,
+            decodeEntities: false
+          }),
+          templateModule,
+          path,
+          components
+        );
+      }
+    }
+  });
+  importNodes.remove();
+  const scriptModule = [];
+  let wxsNodes = $("wxs");
+  if (wxsNodes.length === 0) {
+    wxsNodes = $("dds");
+  }
+  wxsNodes.each((_, elem) => {
+    const smName = $(elem).attr("module");
+    if (smName) {
+      let wxsContent;
+      if (compileResCache.has(smName)) {
+        wxsContent = compileResCache.get(smName);
+      } else {
+        const src = $(elem).attr("src");
+        if (src) {
+          wxsContent = getContentByPath(getAbsolutePath(workPath, path, src)).trim();
+        } else {
+          wxsContent = $(elem).html();
+        }
+        const wxsAst = babel.parseSync(wxsContent);
+        traverse(wxsAst, {
+          CallExpression(path2) {
+            if (path2.node.callee.name === "getRegExp" || path2.node.callee.name === "getDate") {
+              const args = [];
+              for (let i = 0; i < path2.node.arguments.length; i++) {
+                args.push(path2.node.arguments[i]);
+              }
+              const newExpr = types.newExpression(types.identifier(path2.node.callee.name.substring(3)), args);
+              path2.replaceWith(newExpr);
+            }
+          }
+        });
+        wxsContent = babel.transformFromAstSync(wxsAst, "", {
+          comments: false
+        }).code;
+        compileResCache.set(smName, wxsContent);
+      }
+      if (wxsContent) {
+        scriptModule.push({
+          path: smName,
+          code: wxsContent
+        });
+      }
+    }
+  });
+  wxsNodes.remove();
+  transAsses($, $("image"), path);
+  const res = [];
+  transHtmlTag($.html(), res, components);
+  return {
+    tpl: res.join(""),
+    instruction: {
+      templateModule,
+      scriptModule
+    }
+  };
+}
+function transTagTemplate($, templateModule, path, components, componentPlaceholder) {
+  const templateNodes = $("template[name]");
+  templateNodes.each((_, elem) => {
+    const name = $(elem).attr("name");
+    const templateContent = $(elem);
+    templateContent.find("template").remove();
+    templateContent.find("import").remove();
+    templateContent.find("include").remove();
+    templateContent.find("wxs").remove();
+    templateContent.find("dds").remove();
+    transAsses($, templateContent.find("image"), path);
+    const res = [];
+    transHtmlTag(templateContent.html(), res, components);
+    templateModule.push({
+      path: `tpl-${name}`,
+      tpl: res.join("")
+    });
+  });
+  templateNodes.remove();
+}
+function transAsses($, imageNodes, path) {
+  imageNodes.each((_, elem) => {
+    const imgSrc = $(elem).attr("src").trim();
+    if (!imgSrc.startsWith("{{")) {
+      $(elem).attr("src", collectAssets(getWorkPath(), path, imgSrc, getTargetPath(), getAppId()));
+    }
+  });
+}
+function transHtmlTag(html, res, components, componentPlaceholder) {
+  const attrsList = [];
+  const parser = new htmlparser2.Parser(
+    {
+      onopentag(tag, attrs) {
+        attrsList.push(attrs);
+        res.push(transTag({ isStart: true, tag, attrs, components }));
+      },
+      ontext(text) {
+        res.push(text);
+      },
+      onclosetag(tag) {
+        res.push(transTag({ tag, attrs: attrsList.pop(), components }));
+      },
+      onerror(error) {
+        console.error(error);
+      }
+    },
+    { xmlMode: true }
+  );
+  parser.write(html);
+  parser.end();
+}
+function transTag(opts) {
+  const { isStart, tag, attrs, components } = opts;
+  let res;
+  if (tag === "slot") {
+    res = tag;
+  } else if (components && components[tag]) {
+    res = `dd-${tag}`;
+  } else if (tag === "component" || tag === "canvas") {
+    res = tag;
+  } else if (!tagWhiteList.includes(tag)) {
+    res = "dd-text";
+  } else {
+    res = `dd-${tag}`;
+  }
+  let tagRes;
+  const propsAry = getProps(attrs, tag);
+  const multipleSlots = attrs?.slot;
+  if (attrs?.slot) {
+    const withVIf = [];
+    const withoutVIf = [];
+    for (let i = 0; i < propsAry.length; i++) {
+      const prop = propsAry[i];
+      if (prop.includes("v-if") || prop.includes("v-else-if") || prop.includes("v-else")) {
+        withVIf.push(prop);
+      } else {
+        withoutVIf.push(prop);
+      }
+    }
+    if (isStart) {
+      tagRes = `<template ${`${withVIf.join(" ")}`} #${multipleSlots}><${res}${` ${withoutVIf.join(" ")}`}>`;
+    } else {
+      tagRes = `</${res}></template>`;
+    }
+  } else {
+    if (isStart) {
+      const props = propsAry.join(" ");
+      tagRes = props ? `<${res} ${props}>` : `<${res}>`;
+    } else {
+      tagRes = `</${res}>`;
+    }
+  }
+  return tagRes;
+}
+function getProps(attrs, tag) {
+  const attrsList = [];
+  Object.entries(attrs).forEach(([name, value]) => {
+    if (name.endsWith(":if")) {
+      attrsList.push({
+        name: "v-if",
+        value: parseBraceExp(value)
+      });
+    } else if (name.endsWith(":elif")) {
+      attrsList.push({
+        name: "v-else-if",
+        value: parseBraceExp(value)
+      });
+    } else if (name.endsWith(":else")) {
+      attrsList.push({
+        name: "v-else",
+        value: ""
+      });
+    } else if (name.endsWith(":for") || name.endsWith(":for-items")) {
+      attrsList.push({
+        name: "v-for",
+        value: parseForExp(value, attrs)
+      });
+    } else if (name.endsWith(":for-item") || name.endsWith(":for-index")) ;
+    else if (name.endsWith(":key")) {
+      let tranValue;
+      if (/\*this/.test(value)) {
+        tranValue = JSON.stringify("item");
+      } else if (/item/.test(value)) {
+        tranValue = getForItemName(attrs);
+      } else {
+        tranValue = parseKeyExpression(value, getForItemName(attrs));
+      }
+      attrsList.push({
+        name: ":key",
+        value: tranValue
+      });
+    } else if (name === "style") {
+      attrsList.push({
+        name: "v-c-style",
+        value: transformRpx(parseBraceExp(value))
+      });
+    } else if (name === "class") {
+      if (isWrappedByBraces(value)) {
+        attrsList.push({
+          name: ":class",
+          value: parseClassRules(value)
+        });
+      } else {
+        attrsList.push({
+          name: "class",
+          value
+        });
+      }
+      attrsList.push({
+        name: "v-c-class",
+        value: ""
+      });
+    } else if (name === "is" && tag === "component") {
+      attrsList.push({
+        name: ":is",
+        value: `'dd-'+${parseBraceExp(value)}`
+      });
+    } else if (name === "animation" && (tag !== "movable-view" && tagWhiteList.includes(tag))) {
+      attrsList.push({
+        name: "v-c-animation",
+        value: parseBraceExp(value)
+      });
+    } else if (name === "value" && (tag === "input" || tag === "textarea") || (name === "x" || name === "y") && tag === "movable-view") {
+      attrsList.push({
+        name: `v-model:${name}`,
+        value: parseBraceExp(value)
+      });
+    } else if (name.startsWith("data-")) {
+      if (isWrappedByBraces(value)) {
+        attrsList.push({
+          name: "v-c-data",
+          value: ""
+        });
+        attrsList.push({
+          name: `:${name}`,
+          value: parseBraceExp(value)
+        });
+      } else {
+        attrsList.push({
+          name,
+          value
+        });
+      }
+    } else if (isWrappedByBraces(value)) {
+      let pVal = parseBraceExp(value);
+      if (tag === "template" && name === "data") {
+        pVal = `{${pVal}}`;
+      }
+      attrsList.push({
+        name: `:${name}`,
+        value: pVal
+      });
+    } else if (name !== "slot") {
+      attrsList.push({
+        name,
+        value
+      });
+    }
+  });
+  const propsRes = [];
+  attrsList.forEach((attr) => {
+    const { name, value } = attr;
+    if (value === "") {
+      propsRes.push(`${name}`);
+    } else if (/\$\{[^}]*\}/.test(value)) {
+      propsRes.push(`:${name}="\`${value}\`"`);
+    } else {
+      propsRes.push(`${name}="${escapeQuotes(value)}"`);
+    }
+  });
+  return propsRes;
+}
+function parseKeyExpression(exp, itemName = "item") {
+  exp = exp.trim();
+  if (!exp.includes("{{")) {
+    return exp.startsWith(itemName) ? `'${exp}'` : `'${itemName}.${exp}'`;
+  }
+  if (exp.startsWith("{{") && exp.endsWith("}}")) {
+    const content = exp.slice(2, -2).trim();
+    return content.startsWith(itemName) ? `'${content}'` : `'${itemName}.${content}'`;
+  }
+  const parts = exp.split(/(\{\{.*?\}\})/);
+  const result = parts.map((part) => {
+    if (part.startsWith("{{") && part.endsWith("}}")) {
+      const content = part.slice(2, -2).trim();
+      return content.startsWith(itemName) ? content : `${itemName}.${content}`;
+    }
+    return `'${part}'`;
+  }).join("+");
+  return result.endsWith("+''") ? result.slice(0, -3) : result;
+}
+function getViewPath(workPath, src) {
+  const aSrc = src.startsWith("/") ? src : `/${src}`;
+  for (const mlType of fileType) {
+    const mlFullPath = `${workPath}${aSrc}${mlType}`;
+    if (fs.existsSync(mlFullPath)) {
+      return mlFullPath;
+    }
+  }
+}
+function escapeQuotes(input) {
+  return input.replace(/"/g, "'");
+}
+function isWrappedByBraces(str) {
+  return /\{\{.*\}\}/.test(str);
+}
+function splitWithBraces(str) {
+  const result = [];
+  let temp = "";
+  let inBraces = false;
+  for (let i = 0; i < str.length; i++) {
+    const char = str[i];
+    if (char === "{" && i + 1 < str.length && str[i + 1] === "{") {
+      inBraces = true;
+      temp += "{{";
+      i++;
+    } else if (char === "}" && i + 1 < str.length && str[i + 1] === "}") {
+      inBraces = false;
+      temp += "}}";
+      i++;
+    } else if (!inBraces && char === " ") {
+      if (temp) {
+        result.push(temp);
+        temp = "";
+      }
+    } else {
+      temp += char;
+    }
+  }
+  if (temp) {
+    result.push(temp);
+  }
+  return result;
+}
+function parseClassRules(cssRule) {
+  let list = splitWithBraces(cssRule);
+  list = list.map((item) => {
+    return parseBraceExp(item);
+  });
+  if (list.length === 1) {
+    return list.pop();
+  }
+  return `[${list.join(",")}]`;
+}
+function getForItemName(attrs) {
+  for (const key in attrs) {
+    if (key.endsWith(":for-item")) {
+      return attrs[key];
+    }
+  }
+  return "item";
+}
+function getForIndexName(attrs) {
+  for (const key in attrs) {
+    if (key.endsWith(":for-index")) {
+      return attrs[key];
+    }
+  }
+  return "index";
+}
+function parseForExp(exp, attrs) {
+  const item = getForItemName(attrs);
+  const index = getForIndexName(attrs);
+  const listVariableName = parseBraceExp(exp);
+  return `(${item}, ${index}) in ${listVariableName}`;
+}
+const braceRegex = /(\{\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*\}\})|([^{}]+)/g;
+const noBraceRegex = /\{\{((?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*)\}\}/;
+const ternaryRegex = /[^?]+\?.+:.+/;
+function parseBraceExp(exp) {
+  let result;
+  const group = [];
+  while (result = braceRegex.exec(exp)) {
+    if (result[1]) {
+      const matchResult = result[1].match(noBraceRegex);
+      if (matchResult) {
+        const statement = matchResult[1].trim();
+        if (ternaryRegex.test(statement)) {
+          group.push(`(${statement})`);
+        } else {
+          group.push(statement);
+        }
+      }
+    }
+    if (result[2]) {
+      group.push(`+'${result[2].replace(/'/g, "\\'")}'+`);
+    }
+  }
+  return group.join("").replace(/^\+|\+$/g, "");
+}
+const viewCompiler = {
+  splitWithBraces,
+  parseClassRules,
+  parseBraceExp,
+  parseKeyExpression,
+  compileML
+};
+export {
+  viewCompiler as default
+};