@dimina/compiler 1.0.7 → 1.0.8

package/README.md

@@ -98,11 +98,59 @@ dmcc build --no-app-id-dir
 
 ```txt
 app.js, index.js      ->  logic.js     (逻辑文件)
+app.ts, index.ts      ->  logic.js     (TypeScript 逻辑文件)
 index.wxml            ->  view.js      (视图文件)
 app.wxss, index.wxss  ->  style.css    (样式文件)
+app.less, index.less  ->  style.css    (Less 样式文件)
+app.scss, index.scss  ->  style.css    (SCSS 样式文件)
+app.sass, index.sass  ->  style.css    (Sass 样式文件)
 app.json, index.json  ->  config.json  (配置文件)
+miniprogram_npm/      ->  npm包构建   (npm组件支持)
 ```
 
+### TypeScript、Less 和 SCSS 支持
+
+编译器现已支持现代前端开发工具：
+
+- ✅ **TypeScript 支持**: `.ts` 文件自动编译为 JavaScript
+- ✅ **ES6 Import 语句**: 支持相对路径、npm 包和绝对路径导入
+- ✅ **Less 支持**: `.less` 文件编译为 CSS，支持变量、mixin 和嵌套
+- ✅ **SCSS/Sass 支持**: `.scss` 和 `.sass` 文件编译为 CSS
+- ✅ **错误处理**: 编译失败时自动回退，不中断构建流程
+- ✅ **向后兼容**: 完全兼容现有的 `.js` 和 `.wxss` 文件
+
+#### 支持的文件类型
+
+**逻辑文件查找顺序**: `.js` → `.ts`
+**样式文件查找顺序**: `.wxss` → `.ddss` → `.less` → `.scss` → `.sass`
+
+详细使用说明请参考：[TypeScript、Less 和 SCSS 支持文档](./docs/typescript-less-scss-support.md)
+
+### npm 组件支持
+
+编译器现已支持微信小程序的 npm 包功能，遵循微信官方的 npm 支持规范：
+
+- ✅ 支持 `miniprogram_npm` 目录中的组件解析
+- ✅ 按照微信小程序寻址顺序查找组件
+- ✅ 自动构建和复制 npm 包文件
+- ✅ 支持组件依赖关系处理
+- ✅ 缓存机制提升编译性能
+- ✅ 兼容现有的相对路径组件引用
+
+#### npm 组件使用示例
+
+```json
+// pages/index/index.json
+{
+  "usingComponents": {
+    "lib-button": "lib-weapp/button",
+    "custom-component": "./components/custom"
+  }
+}
+```
+
+详细使用说明请参考：[npm 支持文档](./docs/npm-support.md)
+
 ### 编译产物目录结构
 
 编译后，默认会在目标目录生成以小程序 id 命名的文件夹，项目结构如下：

package/dist/core/logic-compiler.cjs

@@ -7,7 +7,9 @@ const babel = require("@babel/core");
 const _traverse = require("@babel/traverse");
 const types = require("@babel/types");
 const esbuild = require("esbuild");
-const env = require("../env-CGYKCSjT.cjs");
+const ts = require("typescript");
+const transformModulesCommonjs = require("@babel/plugin-transform-modules-commonjs");
+const env = require("../env-Cmen1qwy.cjs");
 const traverse = _traverse.default ? _traverse.default : _traverse;
 const processedModules = /* @__PURE__ */ new Set();
 if (!node_worker_threads.isMainThread) {
@@ -117,9 +119,35 @@ function buildJSByPath(packageName, module2, compileRes, mainCompileRes, addExtr
     code: ""
   };
   const src = module2.path.startsWith("/") ? module2.path : `/${module2.path}`;
-  const modulePath = `${env.getWorkPath()}${src}.js`;
-  const js = env.getContentByPath(modulePath);
-  const ast = babel.parseSync(js);
+  const modulePath = getJSAbsolutePath(src);
+  if (!modulePath) {
+    console.warn("[logic]", `找不到模块文件: ${src}`);
+    return;
+  }
+  const sourceCode = env.getContentByPath(modulePath);
+  if (!sourceCode) {
+    console.warn("[logic]", `无法读取模块文件: ${modulePath}`);
+    return;
+  }
+  let jsCode = sourceCode;
+  if (modulePath.endsWith(".ts")) {
+    try {
+      const result = ts.transpileModule(sourceCode, {
+        compilerOptions: {
+          target: ts.ScriptTarget.ES2020,
+          module: ts.ModuleKind.CommonJS,
+          strict: false,
+          esModuleInterop: true,
+          skipLibCheck: true
+        }
+      });
+      jsCode = result.outputText;
+    } catch (error) {
+      console.error(`[logic] TypeScript 编译失败 ${modulePath}:`, error.message);
+      jsCode = sourceCode;
+    }
+  }
+  const ast = babel.parseSync(jsCode);
   const addedArgs = types.objectExpression([
     types.objectProperty(types.identifier("path"), types.stringLiteral(module2.path))
   ]);
@@ -167,31 +195,80 @@ function buildJSByPath(packageName, module2, compileRes, mainCompileRes, addExtr
         const requirePath = ap.node.arguments[0].value;
         if (requirePath) {
           const requireFullPath = path.resolve(modulePath, `../${requirePath}`);
-          const id = requireFullPath.split(`${env.getWorkPath()}${path.sep}`)[1].split(".js")[0].replace(/\\/g, "/");
+          let id = requireFullPath.split(`${env.getWorkPath()}${path.sep}`)[1];
+          id = id.replace(/\.(js|ts)$/, "").replace(/\\/g, "/");
+          if (!id.startsWith("/")) {
+            id = "/" + id;
+          }
           ap.node.arguments[0] = types.stringLiteral(id);
           if (!processedModules.has(packageName + id)) {
             buildJSByPath(packageName, { path: id }, compileRes, mainCompileRes, false, depthChain);
           }
         }
       }
+    },
+    ImportDeclaration(ap) {
+      const importPath = ap.node.source.value;
+      if (importPath) {
+        let id;
+        let shouldProcess = false;
+        if (importPath.startsWith("@") || importPath.startsWith("miniprogram_npm/")) {
+          if (importPath.startsWith("@")) {
+            id = `/miniprogram_npm/${importPath}`;
+          } else {
+            id = importPath.startsWith("/") ? importPath : `/${importPath}`;
+          }
+          shouldProcess = true;
+        } else if (importPath.startsWith("./") || importPath.startsWith("../") || !importPath.startsWith("/")) {
+          const importFullPath = path.resolve(modulePath, `../${importPath}`);
+          id = importFullPath.split(`${env.getWorkPath()}${path.sep}`)[1];
+          id = id.replace(/\.(js|ts)$/, "").replace(/\\/g, "/");
+          if (!id.startsWith("/")) {
+            id = "/" + id;
+          }
+          shouldProcess = true;
+        } else {
+          id = importPath;
+          shouldProcess = true;
+        }
+        if (shouldProcess) {
+          ap.node.source = types.stringLiteral(id);
+          if (!processedModules.has(packageName + id)) {
+            buildJSByPath(packageName, { path: id }, compileRes, mainCompileRes, false, depthChain);
+          }
+        }
+      }
     }
   });
   const { code } = babel.transformFromAstSync(ast, "", {
-    comments: false
+    comments: false,
+    plugins: [
+      // 将 ES6 import/export 转换为 CommonJS
+      transformModulesCommonjs
+    ]
   });
   compileInfo.code = code;
   processedModules.add(packageName + currentPath);
 }
 function getExtraInfoStatement(type, addedArgs) {
   const propertyAssignment = types.objectProperty(types.identifier("__extraInfo"), addedArgs);
-  const propertyAssignmentStatement = types.expressionStatement(
-    types.assignmentExpression(
-      "=",
-      types.memberExpression(types.identifier(type), propertyAssignment.key),
-      propertyAssignment.value
-    )
+  const assignmentExpression = types.assignmentExpression(
+    "=",
+    types.memberExpression(types.identifier("globalThis"), propertyAssignment.key),
+    propertyAssignment.value
   );
-  return propertyAssignmentStatement;
+  return types.expressionStatement(assignmentExpression);
+}
+function getJSAbsolutePath(modulePath) {
+  const workPath = env.getWorkPath();
+  const fileTypes = [".js", ".ts"];
+  for (const ext of fileTypes) {
+    const fullPath = `${workPath}${modulePath}${ext}`;
+    if (fs.existsSync(fullPath)) {
+      return fullPath;
+    }
+  }
+  return null;
 }
 exports.buildJSByPath = buildJSByPath;
 exports.compileJS = compileJS;

package/dist/core/logic-compiler.js

@@ -5,7 +5,9 @@ import babel from "@babel/core";
 import _traverse from "@babel/traverse";
 import types from "@babel/types";
 import { transform } from "esbuild";
-import { r as resetStoreInfo, g as getTargetPath, i as hasCompileInfo, d as getWorkPath, b as getContentByPath, j as getAppConfigInfo, a as getComponent } from "../env-fkuCnng-.js";
+import ts from "typescript";
+import transformModulesCommonjs from "@babel/plugin-transform-modules-commonjs";
+import { r as resetStoreInfo, g as getTargetPath, i as hasCompileInfo, b as getContentByPath, j as getAppConfigInfo, a as getComponent, d as getWorkPath } from "../env-Csj3AHY4.js";
 const traverse = _traverse.default ? _traverse.default : _traverse;
 const processedModules = /* @__PURE__ */ new Set();
 if (!isMainThread) {
@@ -115,9 +117,35 @@ function buildJSByPath(packageName, module, compileRes, mainCompileRes, addExtra
     code: ""
   };
   const src = module.path.startsWith("/") ? module.path : `/${module.path}`;
-  const modulePath = `${getWorkPath()}${src}.js`;
-  const js = getContentByPath(modulePath);
-  const ast = babel.parseSync(js);
+  const modulePath = getJSAbsolutePath(src);
+  if (!modulePath) {
+    console.warn("[logic]", `找不到模块文件: ${src}`);
+    return;
+  }
+  const sourceCode = getContentByPath(modulePath);
+  if (!sourceCode) {
+    console.warn("[logic]", `无法读取模块文件: ${modulePath}`);
+    return;
+  }
+  let jsCode = sourceCode;
+  if (modulePath.endsWith(".ts")) {
+    try {
+      const result = ts.transpileModule(sourceCode, {
+        compilerOptions: {
+          target: ts.ScriptTarget.ES2020,
+          module: ts.ModuleKind.CommonJS,
+          strict: false,
+          esModuleInterop: true,
+          skipLibCheck: true
+        }
+      });
+      jsCode = result.outputText;
+    } catch (error) {
+      console.error(`[logic] TypeScript 编译失败 ${modulePath}:`, error.message);
+      jsCode = sourceCode;
+    }
+  }
+  const ast = babel.parseSync(jsCode);
   const addedArgs = types.objectExpression([
     types.objectProperty(types.identifier("path"), types.stringLiteral(module.path))
   ]);
@@ -165,31 +193,80 @@ function buildJSByPath(packageName, module, compileRes, mainCompileRes, addExtra
         const requirePath = ap.node.arguments[0].value;
         if (requirePath) {
           const requireFullPath = resolve(modulePath, `../${requirePath}`);
-          const id = requireFullPath.split(`${getWorkPath()}${sep}`)[1].split(".js")[0].replace(/\\/g, "/");
+          let id = requireFullPath.split(`${getWorkPath()}${sep}`)[1];
+          id = id.replace(/\.(js|ts)$/, "").replace(/\\/g, "/");
+          if (!id.startsWith("/")) {
+            id = "/" + id;
+          }
           ap.node.arguments[0] = types.stringLiteral(id);
           if (!processedModules.has(packageName + id)) {
             buildJSByPath(packageName, { path: id }, compileRes, mainCompileRes, false, depthChain);
           }
         }
       }
+    },
+    ImportDeclaration(ap) {
+      const importPath = ap.node.source.value;
+      if (importPath) {
+        let id;
+        let shouldProcess = false;
+        if (importPath.startsWith("@") || importPath.startsWith("miniprogram_npm/")) {
+          if (importPath.startsWith("@")) {
+            id = `/miniprogram_npm/${importPath}`;
+          } else {
+            id = importPath.startsWith("/") ? importPath : `/${importPath}`;
+          }
+          shouldProcess = true;
+        } else if (importPath.startsWith("./") || importPath.startsWith("../") || !importPath.startsWith("/")) {
+          const importFullPath = resolve(modulePath, `../${importPath}`);
+          id = importFullPath.split(`${getWorkPath()}${sep}`)[1];
+          id = id.replace(/\.(js|ts)$/, "").replace(/\\/g, "/");
+          if (!id.startsWith("/")) {
+            id = "/" + id;
+          }
+          shouldProcess = true;
+        } else {
+          id = importPath;
+          shouldProcess = true;
+        }
+        if (shouldProcess) {
+          ap.node.source = types.stringLiteral(id);
+          if (!processedModules.has(packageName + id)) {
+            buildJSByPath(packageName, { path: id }, compileRes, mainCompileRes, false, depthChain);
+          }
+        }
+      }
     }
   });
   const { code } = babel.transformFromAstSync(ast, "", {
-    comments: false
+    comments: false,
+    plugins: [
+      // 将 ES6 import/export 转换为 CommonJS
+      transformModulesCommonjs
+    ]
   });
   compileInfo.code = code;
   processedModules.add(packageName + currentPath);
 }
 function getExtraInfoStatement(type, addedArgs) {
   const propertyAssignment = types.objectProperty(types.identifier("__extraInfo"), addedArgs);
-  const propertyAssignmentStatement = types.expressionStatement(
-    types.assignmentExpression(
-      "=",
-      types.memberExpression(types.identifier(type), propertyAssignment.key),
-      propertyAssignment.value
-    )
+  const assignmentExpression = types.assignmentExpression(
+    "=",
+    types.memberExpression(types.identifier("globalThis"), propertyAssignment.key),
+    propertyAssignment.value
   );
-  return propertyAssignmentStatement;
+  return types.expressionStatement(assignmentExpression);
+}
+function getJSAbsolutePath(modulePath) {
+  const workPath = getWorkPath();
+  const fileTypes = [".js", ".ts"];
+  for (const ext of fileTypes) {
+    const fullPath = `${workPath}${modulePath}${ext}`;
+    if (fs.existsSync(fullPath)) {
+      return fullPath;
+    }
+  }
+  return null;
 }
 export {
   buildJSByPath,

package/dist/core/style-compiler.cjs

@@ -6,10 +6,29 @@ const node_worker_threads = require("node:worker_threads");
 const compilerSfc = require("@vue/compiler-sfc");
 const autoprefixer = require("autoprefixer");
 const cssnano = require("cssnano");
+const less = require("less");
 const postcss = require("postcss");
 const selectorParser = require("postcss-selector-parser");
-const env = require("../env-CGYKCSjT.cjs");
-const fileType = [".wxss", ".ddss"];
+const sass = require("sass");
+const env = require("../env-Cmen1qwy.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const sass__namespace = /* @__PURE__ */ _interopNamespaceDefault(sass);
+const fileType = [".wxss", ".ddss", ".less", ".scss", ".sass"];
 const compileRes = /* @__PURE__ */ new Map();
 if (!node_worker_threads.isMainThread) {
   node_worker_threads.parentPort.on("message", async ({ pages, storeInfo }) => {
@@ -90,8 +109,34 @@ async function enhanceCSS(module2) {
   if (compileRes.has(absolutePath)) {
     return compileRes.get(absolutePath);
   }
-  const fixedCSS = ensureImportSemicolons(inputCSS);
-  const ast = postcss.parse(fixedCSS);
+  let processedCSS = inputCSS;
+  const ext = path.extname(absolutePath).toLowerCase();
+  try {
+    if (ext === ".less") {
+      const result2 = await less.render(inputCSS, {
+        filename: absolutePath,
+        paths: [path.dirname(absolutePath)]
+      });
+      processedCSS = result2.css;
+    } else if (ext === ".scss" || ext === ".sass") {
+      const result2 = sass__namespace.compileString(inputCSS, {
+        loadPaths: [path.dirname(absolutePath)],
+        syntax: ext === ".sass" ? "indented" : "scss"
+      });
+      processedCSS = result2.css;
+    }
+  } catch (error) {
+    console.error(`[style] 预处理器编译失败 ${absolutePath}:`, error.message);
+    processedCSS = inputCSS;
+  }
+  const fixedCSS = ensureImportSemicolons(processedCSS);
+  let ast;
+  try {
+    ast = postcss.parse(fixedCSS);
+  } catch (error) {
+    console.error(`[style] PostCSS 解析失败 ${absolutePath}:`, error.message);
+    return "";
+  }
   const promises = [];
   ast.walk(async (node) => {
     if (node.type === "atrule" && node.name === "import") {
@@ -103,6 +148,9 @@ async function enhanceCSS(module2) {
       if (node.selector.includes("::v-deep")) {
         node.selector = node.selector.replace(/::v-deep\s+(\S[^{]*)/g, ":deep($1)");
       }
+      if (node.selector.includes(":host")) {
+        node.selector = processHostSelector(node.selector, module2.id);
+      }
       node.selector = selectorParser((selectors) => {
         selectors.walkTags((tag) => {
           if (env.tagWhiteList.includes(tag.value)) {
@@ -128,10 +176,11 @@ async function enhanceCSS(module2) {
     }
   });
   const cssCode = ast.toResult().css;
+  const moduleId = module2.id;
   const code = compilerSfc.compileStyle({
     source: cssCode,
-    id: module2.id,
-    scoped: !!module2.id
+    id: moduleId,
+    scoped: !!moduleId
   }).code;
   const res = await postcss([autoprefixer({ overrideBrowserslist: ["cover 99.5%"] }), cssnano()]).process(code, {
     from: void 0
@@ -157,5 +206,9 @@ function ensureImportSemicolons(css) {
     return match.endsWith(";") ? match : `${match};`;
   });
 }
+function processHostSelector(selector, moduleId) {
+  return selector.replace(/^:host$/, `[data-v-${moduleId}]`).replace(/:host\(([^)]+)\)/g, `[data-v-${moduleId}]$1`).replace(/:host\s+/g, `[data-v-${moduleId}] `).replace(/:host(?=\.|#|:)/g, `[data-v-${moduleId}]`);
+}
 exports.compileSS = compileSS;
 exports.ensureImportSemicolons = ensureImportSemicolons;
+exports.processHostSelector = processHostSelector;

package/dist/core/style-compiler.js

@@ -4,10 +4,12 @@ import { isMainThread, parentPort } from "node:worker_threads";
 import { compileStyle } from "@vue/compiler-sfc";
 import autoprefixer from "autoprefixer";
 import cssnano from "cssnano";
+import less from "less";
 import postcss from "postcss";
 import selectorParser from "postcss-selector-parser";
-import { r as resetStoreInfo, g as getTargetPath, a as getComponent, b as getContentByPath, h as tagWhiteList, e as collectAssets, f as getAppId, d as getWorkPath, t as transformRpx } from "../env-fkuCnng-.js";
-const fileType = [".wxss", ".ddss"];
+import * as sass from "sass";
+import { r as resetStoreInfo, g as getTargetPath, a as getComponent, b as getContentByPath, h as tagWhiteList, e as collectAssets, f as getAppId, d as getWorkPath, t as transformRpx } from "../env-Csj3AHY4.js";
+const fileType = [".wxss", ".ddss", ".less", ".scss", ".sass"];
 const compileRes = /* @__PURE__ */ new Map();
 if (!isMainThread) {
   parentPort.on("message", async ({ pages, storeInfo }) => {
@@ -88,8 +90,34 @@ async function enhanceCSS(module) {
   if (compileRes.has(absolutePath)) {
     return compileRes.get(absolutePath);
   }
-  const fixedCSS = ensureImportSemicolons(inputCSS);
-  const ast = postcss.parse(fixedCSS);
+  let processedCSS = inputCSS;
+  const ext = path.extname(absolutePath).toLowerCase();
+  try {
+    if (ext === ".less") {
+      const result2 = await less.render(inputCSS, {
+        filename: absolutePath,
+        paths: [path.dirname(absolutePath)]
+      });
+      processedCSS = result2.css;
+    } else if (ext === ".scss" || ext === ".sass") {
+      const result2 = sass.compileString(inputCSS, {
+        loadPaths: [path.dirname(absolutePath)],
+        syntax: ext === ".sass" ? "indented" : "scss"
+      });
+      processedCSS = result2.css;
+    }
+  } catch (error) {
+    console.error(`[style] 预处理器编译失败 ${absolutePath}:`, error.message);
+    processedCSS = inputCSS;
+  }
+  const fixedCSS = ensureImportSemicolons(processedCSS);
+  let ast;
+  try {
+    ast = postcss.parse(fixedCSS);
+  } catch (error) {
+    console.error(`[style] PostCSS 解析失败 ${absolutePath}:`, error.message);
+    return "";
+  }
   const promises = [];
   ast.walk(async (node) => {
     if (node.type === "atrule" && node.name === "import") {
@@ -101,6 +129,9 @@ async function enhanceCSS(module) {
       if (node.selector.includes("::v-deep")) {
         node.selector = node.selector.replace(/::v-deep\s+(\S[^{]*)/g, ":deep($1)");
       }
+      if (node.selector.includes(":host")) {
+        node.selector = processHostSelector(node.selector, module.id);
+      }
       node.selector = selectorParser((selectors) => {
         selectors.walkTags((tag) => {
           if (tagWhiteList.includes(tag.value)) {
@@ -126,10 +157,11 @@ async function enhanceCSS(module) {
     }
   });
   const cssCode = ast.toResult().css;
+  const moduleId = module.id;
   const code = compileStyle({
     source: cssCode,
-    id: module.id,
-    scoped: !!module.id
+    id: moduleId,
+    scoped: !!moduleId
   }).code;
   const res = await postcss([autoprefixer({ overrideBrowserslist: ["cover 99.5%"] }), cssnano()]).process(code, {
     from: void 0
@@ -155,7 +187,11 @@ function ensureImportSemicolons(css) {
     return match.endsWith(";") ? match : `${match};`;
   });
 }
+function processHostSelector(selector, moduleId) {
+  return selector.replace(/^:host$/, `[data-v-${moduleId}]`).replace(/:host\(([^)]+)\)/g, `[data-v-${moduleId}]$1`).replace(/:host\s+/g, `[data-v-${moduleId}] `).replace(/:host(?=\.|#|:)/g, `[data-v-${moduleId}]`);
+}
 export {
   compileSS,
-  ensureImportSemicolons
+  ensureImportSemicolons,
+  processHostSelector
 };