@weapp-vite/web 1.0.1 → 1.2.0

package/dist/plugin.mjs

@@ -8,6 +8,7 @@ import MagicString from "magic-string";
 import { dirname as dirname2, extname, join, normalize, posix, relative as relative2, resolve } from "pathe";
 
 // src/compiler/wxml.ts
+import { readFileSync } from "fs";
 import { parseDocument } from "htmlparser2";
 import { dirname, relative } from "pathe";
 
@@ -74,6 +75,8 @@ function normalizeTagName(name) {
       return "select";
     case "block":
       return "#fragment";
+    case "slot":
+      return "slot";
     default:
       return name || "div";
   }
@@ -89,6 +92,13 @@ function normalizeAttributeName(name) {
 }
 
 // src/compiler/wxml.ts
+function shouldMarkWxsImport(pathname) {
+  const lower = pathname.toLowerCase();
+  if (lower.endsWith(".wxs") || lower.endsWith(".wxs.ts") || lower.endsWith(".wxs.js")) {
+    return false;
+  }
+  return lower.endsWith(".ts") || lower.endsWith(".js");
+}
 function isRenderableNode(node) {
   if (node.type === "directive" || node.type === "comment") {
     return false;
@@ -295,6 +305,140 @@ function buildExpression(parts, scopeVar, wxsVar) {
   });
   return `(${segments.join(" + ")})`;
 }
+function hasTopLevelColon(expression) {
+  let depth = 0;
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+  let inTemplate = false;
+  let escaped = false;
+  let sawTopLevelQuestion = false;
+  for (let index = 0; index < expression.length; index += 1) {
+    const char = expression[index];
+    if (inSingleQuote) {
+      if (escaped) {
+        escaped = false;
+        continue;
+      }
+      if (char === "\\") {
+        escaped = true;
+        continue;
+      }
+      if (char === "'") {
+        inSingleQuote = false;
+      }
+      continue;
+    }
+    if (inDoubleQuote) {
+      if (escaped) {
+        escaped = false;
+        continue;
+      }
+      if (char === "\\") {
+        escaped = true;
+        continue;
+      }
+      if (char === '"') {
+        inDoubleQuote = false;
+      }
+      continue;
+    }
+    if (inTemplate) {
+      if (escaped) {
+        escaped = false;
+        continue;
+      }
+      if (char === "\\") {
+        escaped = true;
+        continue;
+      }
+      if (char === "`") {
+        inTemplate = false;
+      }
+      continue;
+    }
+    if (char === "'") {
+      inSingleQuote = true;
+      continue;
+    }
+    if (char === '"') {
+      inDoubleQuote = true;
+      continue;
+    }
+    if (char === "`") {
+      inTemplate = true;
+      continue;
+    }
+    if (char === "(" || char === "[" || char === "{") {
+      depth += 1;
+      continue;
+    }
+    if (char === ")" || char === "]" || char === "}") {
+      depth = Math.max(0, depth - 1);
+      continue;
+    }
+    if (depth !== 0) {
+      continue;
+    }
+    if (char === "?") {
+      sawTopLevelQuestion = true;
+      continue;
+    }
+    if (char === ":") {
+      return !sawTopLevelQuestion;
+    }
+  }
+  return false;
+}
+function shouldWrapShorthandObject(expression) {
+  const trimmed = expression.trim();
+  if (!trimmed) {
+    return false;
+  }
+  if (trimmed.startsWith("{") || trimmed.startsWith("[") || trimmed.startsWith("(")) {
+    return false;
+  }
+  return hasTopLevelColon(trimmed);
+}
+function buildTemplateDataExpression(raw, scopeVar, wxsVar) {
+  const trimmed = raw.trim();
+  const parts = parseInterpolations(trimmed);
+  if (parts.length === 1 && parts[0]?.type === "expr") {
+    const expr = parts[0].value.trim();
+    if (expr) {
+      const normalizedExpr = shouldWrapShorthandObject(expr) ? `{ ${expr} }` : expr;
+      return buildExpression([{ type: "expr", value: normalizedExpr }], scopeVar, wxsVar);
+    }
+  }
+  return buildExpression(parseInterpolations(raw), scopeVar, wxsVar);
+}
+function createDependencyContext() {
+  return {
+    warnings: [],
+    dependencies: [],
+    dependencySet: /* @__PURE__ */ new Set(),
+    visited: /* @__PURE__ */ new Set(),
+    active: /* @__PURE__ */ new Set(),
+    circularWarnings: /* @__PURE__ */ new Set()
+  };
+}
+function addDependency(value, context, direct) {
+  if (!context.dependencySet.has(value)) {
+    context.dependencySet.add(value);
+    context.dependencies.push(value);
+    direct?.push(value);
+  }
+}
+function warnReadTemplate(context, target) {
+  context.warnings.push(`[web] \u65E0\u6CD5\u8BFB\u53D6\u6A21\u677F\u4F9D\u8D56: ${target}`);
+}
+function warnCircularTemplate(context, from, target) {
+  const key = `${from}=>${target}`;
+  if (context.circularWarnings.has(key)) {
+    return;
+  }
+  context.circularWarnings.add(key);
+  context.warnings.push(`[web] WXML \u5FAA\u73AF\u5F15\u7528: ${from} -> ${target}`);
+}
 function extractFor(attribs) {
   const expr = attribs["wx:for"];
   const itemName = attribs["wx:for-item"]?.trim() || "item";
@@ -339,6 +483,25 @@ function parseEventAttribute(name) {
   }
   return { prefix: name.slice(0, name.length - match[1].length), rawEvent: match[1] };
 }
+function resolveComponentTagName(name, componentTags) {
+  if (!componentTags) {
+    return void 0;
+  }
+  return componentTags[name] ?? componentTags[name.toLowerCase()];
+}
+var PROPERTY_BIND_EXCLUSIONS = /* @__PURE__ */ new Set(["class", "style", "id", "slot"]);
+function shouldBindAsProperty(name) {
+  if (PROPERTY_BIND_EXCLUSIONS.has(name)) {
+    return false;
+  }
+  if (name.startsWith("data-") || name.startsWith("aria-")) {
+    return false;
+  }
+  return true;
+}
+function normalizePropertyName(name) {
+  return name.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+}
 function renderAttributes(attribs, scopeVar, wxsVar, options) {
   let buffer = "";
   for (const [rawName, rawValue] of Object.entries(attribs)) {
@@ -357,24 +520,31 @@ function renderAttributes(attribs, scopeVar, wxsVar, options) {
       buffer += ` @${domEvent}=\${ctx.event(${JSON.stringify(event)}, ${handlerExpr}, ${scopeVar}, ${wxsVar}, ${JSON.stringify(flags)})}`;
       continue;
     }
-    const name = normalizeAttributeName(rawName);
+    const useProperty = options?.preferProperty && shouldBindAsProperty(rawName);
+    const name = useProperty ? normalizePropertyName(rawName) : normalizeAttributeName(rawName);
     const expr = buildExpression(parseInterpolations(rawValue ?? ""), scopeVar, wxsVar);
-    buffer += ` ${name}=\${${expr}}`;
+    buffer += ` ${useProperty ? "." : ""}${name}=\${${expr}}`;
   }
   return buffer;
 }
 var Renderer = class {
-  renderNodes(nodes, scopeVar, wxsVar) {
+  renderNodes(nodes, scopeVar, wxsVar, componentTags) {
     const parts = [];
     for (let index = 0; index < nodes.length; index += 1) {
       const node = nodes[index];
       if (isConditionalElement(node)) {
-        const { rendered, endIndex } = this.renderConditionalSequence(nodes, index, scopeVar, wxsVar);
+        const { rendered, endIndex } = this.renderConditionalSequence(
+          nodes,
+          index,
+          scopeVar,
+          wxsVar,
+          componentTags
+        );
         parts.push(rendered);
         index = endIndex;
         continue;
       }
-      parts.push(this.renderNode(node, scopeVar, wxsVar));
+      parts.push(this.renderNode(node, scopeVar, wxsVar, componentTags));
     }
     if (parts.length === 0) {
       return '""';
@@ -384,7 +554,7 @@ var Renderer = class {
     }
     return `[${parts.join(", ")}]`;
   }
-  renderConditionalSequence(nodes, startIndex, scopeVar, wxsVar) {
+  renderConditionalSequence(nodes, startIndex, scopeVar, wxsVar, componentTags) {
     const branches = [];
     let cursor = startIndex;
     while (cursor < nodes.length) {
@@ -410,44 +580,44 @@ var Renderer = class {
       if (!node) {
         return { rendered: '""', endIndex: startIndex };
       }
-      return { rendered: this.renderNode(node, scopeVar, wxsVar), endIndex: startIndex };
+      return { rendered: this.renderNode(node, scopeVar, wxsVar, componentTags), endIndex: startIndex };
     }
     let expr = '""';
     for (let index = branches.length - 1; index >= 0; index -= 1) {
       const { node, attribs } = branches[index];
       const cleanedAttribs = stripControlAttributes(attribs);
       if ("wx:else" in attribs) {
-        expr = this.renderElement(node, scopeVar, wxsVar, { overrideAttribs: cleanedAttribs });
+        expr = this.renderElement(node, scopeVar, wxsVar, componentTags, { overrideAttribs: cleanedAttribs });
         continue;
       }
       const conditionExpr = attribs["wx:if"] ?? attribs["wx:elif"] ?? "";
-      const rendered = this.renderElement(node, scopeVar, wxsVar, { overrideAttribs: cleanedAttribs });
+      const rendered = this.renderElement(node, scopeVar, wxsVar, componentTags, { overrideAttribs: cleanedAttribs });
       const condition = buildExpression(parseInterpolations(conditionExpr), scopeVar, wxsVar);
       expr = `(${condition} ? ${rendered} : ${expr})`;
     }
     return { rendered: expr, endIndex: startIndex + branches.length - 1 };
   }
-  renderNode(node, scopeVar, wxsVar) {
+  renderNode(node, scopeVar, wxsVar, componentTags) {
     if (node.type === "text") {
       const parts = parseInterpolations(node.data ?? "");
       return buildExpression(parts, scopeVar, wxsVar);
     }
     if (node.type === "element") {
       if (node.name === "template" && node.attribs?.is) {
-        return this.renderTemplateInvoke(node, scopeVar, wxsVar);
+        return this.renderTemplateInvoke(node, scopeVar, wxsVar, componentTags);
       }
-      return this.renderElement(node, scopeVar, wxsVar);
+      return this.renderElement(node, scopeVar, wxsVar, componentTags);
     }
     return '""';
   }
-  renderTemplateInvoke(node, scopeVar, wxsVar) {
+  renderTemplateInvoke(node, scopeVar, wxsVar, _componentTags) {
     const attribs = node.attribs ?? {};
     const isExpr = buildExpression(parseInterpolations(attribs.is ?? ""), scopeVar, wxsVar);
-    const dataExpr = attribs.data ? buildExpression(parseInterpolations(attribs.data), scopeVar, wxsVar) : void 0;
+    const dataExpr = attribs.data ? buildTemplateDataExpression(attribs.data, scopeVar, wxsVar) : void 0;
     const scopeExpr = dataExpr ? `ctx.mergeScope(${scopeVar}, ${dataExpr})` : scopeVar;
     return `ctx.renderTemplate(__templates, ${isExpr}, ${scopeExpr}, ctx)`;
   }
-  renderElement(node, scopeVar, wxsVar, options = {}) {
+  renderElement(node, scopeVar, wxsVar, componentTags, options = {}) {
     const attribs = options.overrideAttribs ?? node.attribs ?? {};
     if (!options.skipFor) {
       const forInfo = extractFor(node.attribs ?? {});
@@ -461,19 +631,24 @@ var Renderer = class {
           node,
           "__scope",
           wxsVar,
+          componentTags,
           { skipFor: true, overrideAttribs: forInfo.restAttribs }
         );
         const keyExpr = `ctx.key(${JSON.stringify(forInfo.key ?? "")}, ${itemVar}, ${indexVar}, ${scopeExpr}, ${wxsVar})`;
         return `repeat(${listExpr}, (${itemVar}, ${indexVar}) => ${keyExpr}, (${itemVar}, ${indexVar}) => { const __scope = ${scopeExpr}; return ${itemRender}; })`;
       }
     }
-    const tagName = normalizeTagName(node.name ?? "");
+    const customTag = resolveComponentTagName(node.name ?? "", componentTags);
+    const tagName = customTag ?? normalizeTagName(node.name ?? "");
     if (tagName === "#fragment") {
-      return this.renderNodes(node.children ?? [], scopeVar, wxsVar);
+      return this.renderNodes(node.children ?? [], scopeVar, wxsVar, componentTags);
     }
-    const attrs = renderAttributes(attribs, scopeVar, wxsVar, { skipControl: true });
+    const attrs = renderAttributes(attribs, scopeVar, wxsVar, {
+      skipControl: true,
+      preferProperty: Boolean(customTag)
+    });
     const childNodes = node.children ?? [];
-    const children = childNodes.map((child) => `\${${this.renderNode(child, scopeVar, wxsVar)}}`).join("");
+    const children = childNodes.map((child) => `\${${this.renderNode(child, scopeVar, wxsVar, componentTags)}}`).join("");
     if (SELF_CLOSING_TAGS.has(tagName) && childNodes.length === 0) {
       return `html\`<${tagName}${attrs} />\``;
     }
@@ -493,29 +668,38 @@ function collectSpecialNodes(nodes, context) {
         });
         continue;
       }
-      if (name === "import" && node.attribs?.src) {
+      if ((name === "import" || name === "wx-import") && node.attribs?.src) {
         const resolved = context.resolveTemplate(node.attribs.src);
         if (resolved) {
           context.imports.push({
             id: resolved,
             importName: `__wxml_import_${context.imports.length}`
           });
+        } else {
+          context.warnings.push(`[web] \u65E0\u6CD5\u89E3\u6790\u6A21\u677F\u4F9D\u8D56: ${node.attribs.src} (from ${context.sourceId})`);
         }
         continue;
       }
-      if (name === "include" && node.attribs?.src) {
+      if ((name === "include" || name === "wx-include") && node.attribs?.src) {
         const resolved = context.resolveTemplate(node.attribs.src);
         if (resolved) {
           context.includes.push({
             id: resolved,
             importName: `__wxml_include_${context.includes.length}`
           });
+        } else {
+          context.warnings.push(`[web] \u65E0\u6CD5\u89E3\u6790\u6A21\u677F\u4F9D\u8D56: ${node.attribs.src} (from ${context.sourceId})`);
         }
         continue;
       }
       if (name === "wxs") {
         const moduleName = node.attribs?.module?.trim();
         if (moduleName) {
+          const previousSource = context.wxsModules.get(moduleName);
+          if (previousSource) {
+            context.warnings.push(`[web] WXS \u6A21\u5757\u540D\u91CD\u590D: ${moduleName} (from ${context.sourceId})`);
+          }
+          context.wxsModules.set(moduleName, context.sourceId);
           if (node.attribs?.src) {
             const resolved = context.resolveWxs(node.attribs.src);
             if (resolved) {
@@ -558,8 +742,50 @@ function normalizeTemplatePath(pathname) {
   return pathname.split("\\").join("/");
 }
 function compileWxml(options) {
+  const dependencyContext = options.dependencyContext ?? createDependencyContext();
+  const expandDependencies = options.expandDependencies ?? !options.dependencyContext;
+  const warnings = dependencyContext.warnings;
+  const expandDependencyTree = (dependencies2, importer) => {
+    for (const target of dependencies2) {
+      if (!target) {
+        continue;
+      }
+      if (dependencyContext.active.has(target)) {
+        warnCircularTemplate(dependencyContext, importer, target);
+        continue;
+      }
+      if (dependencyContext.visited.has(target)) {
+        continue;
+      }
+      dependencyContext.visited.add(target);
+      dependencyContext.active.add(target);
+      let source;
+      try {
+        source = readFileSync(target, "utf8");
+      } catch {
+        warnReadTemplate(dependencyContext, target);
+        dependencyContext.active.delete(target);
+        continue;
+      }
+      try {
+        const result = compileWxml({
+          id: target,
+          source,
+          resolveTemplatePath: options.resolveTemplatePath,
+          resolveWxsPath: options.resolveWxsPath,
+          dependencyContext,
+          expandDependencies: false
+        });
+        expandDependencyTree(result.dependencies, target);
+      } catch (error) {
+        if (error instanceof Error && error.message) {
+          warnings.push(`[web] \u65E0\u6CD5\u89E3\u6790\u6A21\u677F\u4F9D\u8D56: ${target} ${error.message}`);
+        }
+      }
+      dependencyContext.active.delete(target);
+    }
+  };
   let nodes = parseWxml(options.source);
-  const warnings = [];
   let navigationBarAttrs;
   if (options.navigationBar) {
     const extracted = extractNavigationBarFromPageMeta(nodes);
@@ -573,11 +799,15 @@ function compileWxml(options) {
   const includes = [];
   const imports = [];
   const wxs = [];
+  const wxsModules = /* @__PURE__ */ new Map();
   const renderNodesList = collectSpecialNodes(nodes, {
     templates,
     includes,
     imports,
     wxs,
+    wxsModules,
+    warnings,
+    sourceId: options.id,
     resolveTemplate: (raw) => options.resolveTemplatePath(raw, options.id),
     resolveWxs: (raw) => options.resolveWxsPath(raw, options.id)
   });
@@ -594,22 +824,23 @@ function compileWxml(options) {
     `import { repeat } from 'lit/directives/repeat.js'`
   ];
   const bodyLines = [];
-  const dependencies = [];
+  const directDependencies = [];
   for (const entry of imports) {
     const importPath = normalizeTemplatePath(toRelativeImport(options.id, entry.id));
     importLines.push(`import { templates as ${entry.importName} } from '${importPath}'`);
-    dependencies.push(entry.id);
+    addDependency(entry.id, dependencyContext, directDependencies);
   }
   for (const entry of includes) {
     const importPath = normalizeTemplatePath(toRelativeImport(options.id, entry.id));
     importLines.push(`import { render as ${entry.importName} } from '${importPath}'`);
-    dependencies.push(entry.id);
+    addDependency(entry.id, dependencyContext, directDependencies);
   }
   for (const entry of wxs) {
     if (entry.kind === "src") {
-      const importPath = normalizeTemplatePath(toRelativeImport(options.id, entry.value));
+      const baseImport = normalizeTemplatePath(toRelativeImport(options.id, entry.value));
+      const importPath = shouldMarkWxsImport(entry.value) ? `${baseImport}?wxs` : baseImport;
       importLines.push(`import ${entry.importName} from '${importPath}'`);
-      dependencies.push(entry.value);
+      addDependency(entry.value, dependencyContext, directDependencies);
     }
   }
   if (templates.length > 0 || imports.length > 0) {
@@ -618,7 +849,7 @@ function compileWxml(options) {
       templatePairs.push(`...${entry.importName}`);
     }
     for (const template of templates) {
-      const rendered = renderer.renderNodes(template.nodes, "scope", "__wxs_modules");
+      const rendered = renderer.renderNodes(template.nodes, "scope", "__wxs_modules", options.componentTags);
       templatePairs.push(`${JSON.stringify(template.name)}: (scope, ctx) => ${rendered}`);
     }
     bodyLines.push(`const __templates = { ${templatePairs.join(", ")} }`);
@@ -655,7 +886,7 @@ function compileWxml(options) {
     bodyLines.push(`const __wxs_modules = {}`);
   }
   const includesRender = includes.map((entry) => `${entry.importName}(scope, ctx)`);
-  const renderContent = renderer.renderNodes(renderNodesList, "scope", "__wxs_modules");
+  const renderContent = renderer.renderNodes(renderNodesList, "scope", "__wxs_modules", options.componentTags);
   const contentExpr = includesRender.length > 0 ? `[${[...includesRender, renderContent].join(", ")}]` : renderContent;
   bodyLines.push(`export function render(scope, ctx) {`);
   if (wxs.length > 0) {
@@ -665,7 +896,14 @@ function compileWxml(options) {
   bodyLines.push(`}`);
   bodyLines.push(`export const templates = __templates`);
   bodyLines.push(`export default render`);
+  if (expandDependencies) {
+    dependencyContext.visited.add(options.id);
+    dependencyContext.active.add(options.id);
+    expandDependencyTree(directDependencies, options.id);
+    dependencyContext.active.delete(options.id);
+  }
   const code = [...importLines, "", ...bodyLines].join("\n");
+  const dependencies = expandDependencies ? dependencyContext.dependencies : directDependencies;
   return {
     code,
     dependencies,
@@ -674,37 +912,76 @@ function compileWxml(options) {
 }
 
 // src/compiler/wxs.ts
-var REQUIRE_RE = /require\\(\\s*['"]([^'"]+)['"]\\s*\\)/g;
+var REQUIRE_RE = /require\(\s*['"]([^'"]+)['"]\s*\)/g;
 function normalizePath(p) {
   return p.split("\\\\").join("/");
 }
-function ensureWxsExtension(pathname) {
-  if (pathname.endsWith(".wxs") || pathname.endsWith(".wxs.ts") || pathname.endsWith(".wxs.js")) {
+function isPlainWxsScript(pathname) {
+  const lower = pathname.toLowerCase();
+  if (lower.endsWith(".wxs") || lower.endsWith(".wxs.ts") || lower.endsWith(".wxs.js")) {
+    return false;
+  }
+  return lower.endsWith(".ts") || lower.endsWith(".js");
+}
+function appendWxsQuery(pathname) {
+  if (pathname.includes("?wxs") || pathname.includes("&wxs")) {
     return pathname;
   }
-  return `${pathname}.wxs`;
+  return `${pathname}${pathname.includes("?") ? "&" : "?"}wxs`;
+}
+function isSupportedRequirePath(request) {
+  return request.startsWith(".") || request.startsWith("/");
 }
 function transformWxsToEsm(code, id, options) {
   const dependencies = [];
   const importLines = [];
   const mapEntries = [];
-  let match;
+  const warnings = [];
   const seen = /* @__PURE__ */ new Set();
-  while (match = REQUIRE_RE.exec(code)) {
+  while (true) {
+    const match = REQUIRE_RE.exec(code);
+    if (!match) {
+      break;
+    }
     const request = match[1];
     if (!request || seen.has(request)) {
       continue;
     }
     seen.add(request);
-    const resolved = ensureWxsExtension(options.resolvePath(request, id) ?? request);
-    const importPath = normalizePath(options.toImportPath?.(resolved, id) ?? resolved);
+    if (!isSupportedRequirePath(request)) {
+      warnings.push(`[@weapp-vite/web] WXS require \u4EC5\u652F\u6301\u76F8\u5BF9\u6216\u7EDD\u5BF9\u8DEF\u5F84: ${request} (from ${id})`);
+      continue;
+    }
+    const resolved = options.resolvePath(request, id);
+    if (!resolved) {
+      warnings.push(`[@weapp-vite/web] \u65E0\u6CD5\u89E3\u6790 WXS require: ${request} (from ${id})`);
+      continue;
+    }
+    let importPath = normalizePath(options.toImportPath?.(resolved, id) ?? resolved);
+    if (isPlainWxsScript(resolved)) {
+      importPath = appendWxsQuery(importPath);
+    }
     const importName = `__wxs_dep_${dependencies.length}`;
     importLines.push(`import ${importName} from '${importPath}'`);
     mapEntries.push(`[${JSON.stringify(request)}, ${importName}]`);
     dependencies.push(resolved);
   }
   const requireMap = `const __wxs_require_map = new Map([${mapEntries.join(", ")}])`;
-  const requireFn = `function require(id) { return __wxs_require_map.get(id) }`;
+  const requireFn = [
+    `const __wxs_require_warned = new Set()`,
+    `function require(id) {`,
+    `  if (__wxs_require_map.has(id)) {`,
+    `    return __wxs_require_map.get(id)`,
+    `  }`,
+    `  if (!__wxs_require_warned.has(id)) {`,
+    `    __wxs_require_warned.add(id)`,
+    `    if (typeof console !== 'undefined' && typeof console.warn === 'function') {`,
+    `      console.warn(\`[@weapp-vite/web] WXS require \u672A\u89E3\u6790: \${id}\`)`,
+    `    }`,
+    `  }`,
+    `  return undefined`,
+    `}`
+  ].join("\\n");
   const moduleInit = `const module = { exports: {} }\\nconst exports = module.exports`;
   const helpers = `const getRegExp = (pattern, flags) => new RegExp(pattern, flags)\\nconst getDate = (value) => (value == null ? new Date() : new Date(value))`;
   const body = [
@@ -716,7 +993,11 @@ function transformWxsToEsm(code, id, options) {
     code,
     `export default module.exports`
   ].join("\\n");
-  return { code: body, dependencies };
+  return {
+    code: body,
+    dependencies,
+    warnings: warnings.length > 0 ? warnings : void 0
+  };
 }
 
 // src/css/wxss.ts
@@ -741,6 +1022,12 @@ function transformWxssToCss(source, options) {
   };
 }
 
+// src/shared/slugify.ts
+function slugify(id, prefix) {
+  const normalized = id.replace(/[^a-z0-9]+/gi, "-").replace(/^-+|-+$/g, "").toLowerCase();
+  return `${prefix}-${normalized || "index"}`;
+}
+
 // src/plugin.ts
 var traverseCandidate = (() => {
   const mod = _babelTraverse;
@@ -764,6 +1051,7 @@ var STYLE_EXTS = [".wxss", ".scss", ".less", ".css"];
 var TRANSFORM_STYLE_EXTS = [".wxss"];
 var TEMPLATE_EXTS = [".wxml", ".axml", ".swan", ".ttml", ".qml", ".ksml", ".xhsml", ".html"];
 var WXS_EXTS = [".wxs", ".wxs.ts", ".wxs.js"];
+var WXS_RESOLVE_EXTS = [".wxs", ".wxs.ts", ".wxs.js", ".ts", ".js"];
 var ENTRY_ID = "\0@weapp-vite/web/entry";
 function isTemplateFile(id) {
   const lower = id.toLowerCase();
@@ -773,13 +1061,20 @@ function isWxsFile(id) {
   const lower = id.toLowerCase();
   return WXS_EXTS.some((ext) => lower.endsWith(ext));
 }
+function hasWxsQuery(id) {
+  return id.includes("?wxs") || id.includes("&wxs");
+}
 function weappWebPlugin(options = {}) {
   let root = process.cwd();
   let srcRoot = resolve(root, options.srcDir ?? "src");
   let enableHmr = false;
   const moduleMeta = /* @__PURE__ */ new Map();
   const pageNavigationMap = /* @__PURE__ */ new Map();
+  const templateComponentMap = /* @__PURE__ */ new Map();
+  const componentTagMap = /* @__PURE__ */ new Map();
+  const componentIdMap = /* @__PURE__ */ new Map();
   let appNavigationDefaults = {};
+  let appComponentTags = {};
   let scanResult = {
     app: void 0,
     pages: [],
@@ -795,10 +1090,10 @@ function weappWebPlugin(options = {}) {
       root = config.root;
       srcRoot = resolve(root, options.srcDir ?? "src");
       enableHmr = config.command === "serve";
-      await scanProject();
+      await scanProject(this.warn?.bind(this));
     },
     async buildStart() {
-      await scanProject();
+      await scanProject(this.warn?.bind(this));
     },
     resolveId(id) {
       if (id === "/@weapp-vite/web/entry" || id === "@weapp-vite/web/entry") {
@@ -815,19 +1110,22 @@ function weappWebPlugin(options = {}) {
     async handleHotUpdate(ctx) {
       const clean = cleanUrl(ctx.file);
       if (clean.endsWith(".json") || isTemplateFile(clean) || isWxsFile(clean) || clean.endsWith(".wxss") || SCRIPT_EXTS.includes(extname(clean))) {
-        await scanProject();
+        await scanProject(this.warn?.bind(this));
       }
     },
     transform(code, id) {
       const clean = cleanUrl(id);
       if (isTemplateFile(clean)) {
-        const navigationConfig = pageNavigationMap.get(normalizePath2(clean));
+        const normalizedId = normalizePath2(clean);
+        const navigationConfig = pageNavigationMap.get(normalizedId);
+        const componentTags = templateComponentMap.get(normalizedId);
         const { code: compiled, dependencies, warnings } = compileWxml({
           id: clean,
           source: code,
           resolveTemplatePath,
           resolveWxsPath,
-          navigationBar: navigationConfig ? { config: navigationConfig } : void 0
+          navigationBar: navigationConfig ? { config: navigationConfig } : void 0,
+          componentTags
         });
         if (dependencies.length > 0 && "addWatchFile" in this) {
           for (const dep of dependencies) {
@@ -841,8 +1139,8 @@ function weappWebPlugin(options = {}) {
         }
         return { code: compiled, map: null };
       }
-      if (isWxsFile(clean)) {
-        const { code: compiled, dependencies } = transformWxsToEsm(code, clean, {
+      if (isWxsFile(clean) || hasWxsQuery(id)) {
+        const { code: compiled, dependencies, warnings } = transformWxsToEsm(code, clean, {
           resolvePath: resolveWxsPath,
           toImportPath: (resolved, importer) => normalizePath2(toRelativeImport2(importer, resolved))
         });
@@ -851,6 +1149,11 @@ function weappWebPlugin(options = {}) {
             this.addWatchFile(dep);
           }
         }
+        if (warnings?.length && "warn" in this) {
+          for (const warning of warnings) {
+            this.warn(warning);
+          }
+        }
         return { code: compiled, map: null };
       }
       if (TRANSFORM_STYLE_EXTS.some((ext) => clean.endsWith(ext))) {
@@ -981,12 +1284,25 @@ if (import.meta.hot) { import.meta.hot.accept() }
       };
     }
   };
-  async function scanProject() {
+  async function scanProject(warn) {
     moduleMeta.clear();
     pageNavigationMap.clear();
+    templateComponentMap.clear();
+    componentTagMap.clear();
+    componentIdMap.clear();
     appNavigationDefaults = {};
+    appComponentTags = {};
     const pages = /* @__PURE__ */ new Map();
     const components = /* @__PURE__ */ new Map();
+    const reportWarning = (message) => {
+      if (warn) {
+        warn(message);
+        return;
+      }
+      if (typeof process !== "undefined" && typeof process.emitWarning === "function") {
+        process.emitWarning(message);
+      }
+    };
     const appScript = await resolveScriptFile(join(srcRoot, "app"));
     if (appScript) {
       moduleMeta.set(
@@ -1002,6 +1318,11 @@ if (import.meta.hot) { import.meta.hot.accept() }
     const appJsonPath = join(srcRoot, "app.json");
     if (await fs.pathExists(appJsonPath)) {
       const appJson = await readJsonFile(appJsonPath);
+      if (appJson) {
+        appComponentTags = await collectComponentTagsFromConfig(appJson, srcRoot, appJsonPath, reportWarning, (tags) => {
+          appComponentTags = tags;
+        });
+      }
       if (appJson?.pages && Array.isArray(appJson.pages)) {
         for (const page of appJson.pages) {
           if (typeof page === "string") {
@@ -1059,17 +1380,22 @@ if (import.meta.hot) { import.meta.hot.accept() }
         script,
         id: toPosixId(pageId)
       });
+      const pageComponentTags = pageJson ? await collectComponentTagsFromConfig(pageJson, dirname2(script), pageJsonPath, reportWarning) : await collectComponentTagsFromJson(pageJsonPath, dirname2(script), reportWarning);
+      if (template) {
+        const mergedTags = mergeComponentTags(appComponentTags, pageComponentTags);
+        if (Object.keys(mergedTags).length > 0) {
+          templateComponentMap.set(normalizePath2(template), mergedTags);
+        } else {
+          templateComponentMap.delete(normalizePath2(template));
+        }
+      }
       if (pageJson) {
-        await collectComponentsFromConfig(pageJson, dirname2(script));
         if (template) {
           const config = mergeNavigationConfig(appNavigationDefaults, pickNavigationConfig(pageJson));
           pageNavigationMap.set(normalizePath2(template), config);
         }
-      } else {
-        await collectComponentsFromJson(pageJsonPath, dirname2(script));
-        if (template) {
-          pageNavigationMap.set(normalizePath2(template), { ...appNavigationDefaults });
-        }
+      } else if (template) {
+        pageNavigationMap.set(normalizePath2(template), { ...appNavigationDefaults });
       }
     }
     async function collectComponent(componentId, importerDir) {
@@ -1099,26 +1425,94 @@ if (import.meta.hot) { import.meta.hot.accept() }
         script,
         id: componentIdPosix
       });
-      await collectComponentsFromJson(`${script.replace(new RegExp(`${extname(script)}$`), "")}.json`, dirname2(script));
+      const componentJsonPath = `${script.replace(new RegExp(`${extname(script)}$`), "")}.json`;
+      const componentTags = await collectComponentTagsFromJson(componentJsonPath, dirname2(script), reportWarning);
+      if (template) {
+        const mergedTags = mergeComponentTags(appComponentTags, componentTags);
+        if (Object.keys(mergedTags).length > 0) {
+          templateComponentMap.set(normalizePath2(template), mergedTags);
+        } else {
+          templateComponentMap.delete(normalizePath2(template));
+        }
+      }
     }
-    async function collectComponentsFromConfig(json, importerDir) {
+    async function collectComponentTagsFromConfig(json, importerDir, jsonPath, warn2, onResolved) {
       const usingComponents = json.usingComponents;
       if (!usingComponents || typeof usingComponents !== "object") {
-        return;
+        return {};
       }
-      for (const value of Object.values(usingComponents)) {
-        if (typeof value !== "string") {
+      const tags = {};
+      const resolved = [];
+      for (const [rawKey, rawValue] of Object.entries(usingComponents)) {
+        if (typeof rawValue !== "string") {
+          continue;
+        }
+        const key = normalizeComponentKey(rawKey);
+        if (!key) {
+          continue;
+        }
+        const script = await resolveComponentScript(rawValue, importerDir);
+        if (!script) {
+          warn2(`[@weapp-vite/web] usingComponents entry "${rawKey}" not found: ${rawValue} (${jsonPath})`);
           continue;
         }
-        await collectComponent(value, importerDir);
+        const tag = getComponentTag(script);
+        if (tag) {
+          tags[key] = tag;
+          resolved.push({ rawValue });
+        }
+      }
+      onResolved?.(tags);
+      for (const entry of resolved) {
+        await collectComponent(entry.rawValue, importerDir);
       }
+      return tags;
     }
-    async function collectComponentsFromJson(jsonPath, importerDir) {
+    async function collectComponentTagsFromJson(jsonPath, importerDir, warn2) {
       const json = await readJsonFile(jsonPath);
       if (!json) {
-        return;
+        return {};
+      }
+      return collectComponentTagsFromConfig(json, importerDir, jsonPath, warn2);
+    }
+    function mergeComponentTags(base, overrides) {
+      if (!Object.keys(base).length && !Object.keys(overrides).length) {
+        return {};
+      }
+      return {
+        ...base,
+        ...overrides
+      };
+    }
+    function normalizeComponentKey(raw) {
+      return raw.trim().toLowerCase();
+    }
+    function getComponentId(script) {
+      const cached = componentIdMap.get(script);
+      if (cached) {
+        return cached;
+      }
+      const idRelative = relative2(srcRoot, script).replace(new RegExp(`${extname(script)}$`), "");
+      const componentIdPosix = toPosixId(idRelative);
+      componentIdMap.set(script, componentIdPosix);
+      return componentIdPosix;
+    }
+    function getComponentTag(script) {
+      const cached = componentTagMap.get(script);
+      if (cached) {
+        return cached;
       }
-      await collectComponentsFromConfig(json, importerDir);
+      const id = getComponentId(script);
+      const tag = slugify(id, "wv-component");
+      componentTagMap.set(script, tag);
+      return tag;
+    }
+    async function resolveComponentScript(raw, importerDir) {
+      const base = resolveComponentBase(raw, importerDir);
+      if (!base) {
+        return void 0;
+      }
+      return resolveScriptFile(base);
     }
     function resolveComponentBase(raw, importerDir) {
       if (!raw) {
@@ -1214,11 +1608,18 @@ function resolveTemplatePathSync(raw, importer, srcRoot) {
   return resolveFileWithExtensionsSync(base, TEMPLATE_EXTS);
 }
 function resolveWxsPathSync(raw, importer, srcRoot) {
-  const base = resolveImportBase(raw, importer, srcRoot);
-  if (!base) {
+  if (!raw) {
+    return void 0;
+  }
+  let base;
+  if (raw.startsWith(".")) {
+    base = resolve(dirname2(importer), raw);
+  } else if (raw.startsWith("/")) {
+    base = resolve(srcRoot, raw.slice(1));
+  } else {
     return void 0;
   }
-  return resolveFileWithExtensionsSync(base, WXS_EXTS);
+  return resolveFileWithExtensionsSync(base, WXS_RESOLVE_EXTS);
 }
 async function resolveScriptFile(basePath) {
   const ext = extname(basePath);