@weapp-vite/web 1.0.1 → 1.1.0

package/dist/index.mjs

@@ -361,6 +361,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)) {
@@ -379,24 +398,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 '""';
@@ -406,7 +432,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) {
@@ -432,44 +458,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 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 ?? {});
@@ -483,19 +509,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} />\``;
     }
@@ -640,7 +671,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(", ")} }`);
@@ -677,7 +708,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) {
@@ -741,6 +772,12 @@ function transformWxsToEsm(code, id, options) {
   return { code: body, dependencies };
 }
 
+// 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;
@@ -779,7 +816,11 @@ function weappWebPlugin(options = {}) {
   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 +836,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 +856,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) {
@@ -981,12 +1025,23 @@ 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;
+      }
+      console.warn(message);
+    };
     const appScript = await resolveScriptFile(join(srcRoot, "app"));
     if (appScript) {
       moduleMeta.set(
@@ -1002,6 +1057,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 +1119,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 +1164,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;
+      }
+      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;
       }
-      await collectComponentsFromConfig(json, importerDir);
+      return resolveScriptFile(base);
     }
     function resolveComponentBase(raw, importerDir) {
       if (!raw) {
@@ -1397,7 +1530,23 @@ var NAV_BUTTON_TAG = "weapp-button";
 var BaseElement = globalThis.HTMLElement ?? class {
 };
 var formConfig = { ...DEFAULT_FORM_CONFIG };
-var styleInjected = false;
+var styleTargets = /* @__PURE__ */ new WeakSet();
+var sharedSheet;
+function resolveAdoptedStyleSheets(root) {
+  const doc = root.ownerDocument ?? document;
+  if (!doc || typeof doc.createElement !== "function") {
+    return void 0;
+  }
+  if (!("adoptedStyleSheets" in doc)) {
+    return void 0;
+  }
+  if (!sharedSheet && "replaceSync" in CSSStyleSheet.prototype) {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(BUTTON_STYLE);
+    sharedSheet = sheet;
+  }
+  return sharedSheet;
+}
 var BUTTON_STYLE = `
 weapp-button {
   display: block;
@@ -1415,8 +1564,8 @@ weapp-button .weapp-btn {
   -webkit-appearance: none;
   box-sizing: border-box;
   width: 100%;
-  border-radius: 6px;
-  border: 1px solid #d7d7d7;
+  border-radius: 5px;
+  border: 1px solid #d9d9d9;
   padding: 0 16px;
   height: 44px;
   line-height: 44px;
@@ -1447,7 +1596,7 @@ weapp-button.weapp-btn--plain .weapp-btn {
 }
 
 weapp-button.weapp-btn--plain.weapp-btn--default .weapp-btn {
-  border-color: #353535;
+  border-color: #b2b2b2;
   color: #353535;
 }
 
@@ -1463,21 +1612,34 @@ weapp-button.weapp-btn--plain.weapp-btn--warn .weapp-btn {
 
 weapp-button.weapp-btn--loading .weapp-btn,
 weapp-button.weapp-btn--disabled .weapp-btn {
-  opacity: 0.6;
+  background-color: #f7f7f7;
+  border-color: #d9d9d9;
+  color: #9b9b9b;
   cursor: not-allowed;
 }
 
 weapp-button.button-hover .weapp-btn {
-  opacity: 0.7;
+  background-color: #ededed;
+  border-color: #d2d2d2;
+}
+
+weapp-button.button-hover.weapp-btn--primary .weapp-btn {
+  background-color: #06ad56;
+  border-color: #06ad56;
+}
+
+weapp-button.button-hover.weapp-btn--warn .weapp-btn {
+  background-color: #d93c37;
+  border-color: #d93c37;
 }
 
 weapp-button.button-hover.weapp-btn--plain .weapp-btn {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.06);
 }
 
 weapp-button.weapp-btn--mini .weapp-btn {
-  height: 28px;
-  line-height: 28px;
+  height: 32px;
+  line-height: 32px;
   font-size: 13px;
   padding: 0 12px;
   border-radius: 4px;
@@ -1509,12 +1671,36 @@ weapp-button .weapp-btn__loading[hidden] {
   to { transform: rotate(360deg); }
 }
 `;
-function ensureButtonStyle() {
-  if (styleInjected) {
+function ensureButtonStyle(root) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (root && styleTargets.has(root)) {
     return;
   }
-  injectStyle(BUTTON_STYLE, BUTTON_STYLE_ID);
-  styleInjected = true;
+  if (!root) {
+    const target = document.head;
+    if (!target || styleTargets.has(target)) {
+      return;
+    }
+    injectStyle(BUTTON_STYLE, BUTTON_STYLE_ID);
+    styleTargets.add(target);
+    return;
+  }
+  const sheet = resolveAdoptedStyleSheets(root);
+  if (sheet) {
+    const existing = root.adoptedStyleSheets ?? [];
+    if (!existing.includes(sheet)) {
+      root.adoptedStyleSheets = [...existing, sheet];
+    }
+    styleTargets.add(root);
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = BUTTON_STYLE_ID;
+  style.textContent = BUTTON_STYLE;
+  root.appendChild(style);
+  styleTargets.add(root);
 }
 function toBoolean(value) {
   if (value === null) {
@@ -1665,7 +1851,12 @@ var WeappButton = class extends BaseElement {
   #lastTouchTime = 0;
   #observer;
   connectedCallback() {
-    ensureButtonStyle();
+    const root = this.getRootNode();
+    if (root instanceof ShadowRoot) {
+      ensureButtonStyle(root);
+    } else {
+      ensureButtonStyle();
+    }
     this.#ensureStructure();
     this.#applyState();
     this.#bindEvents();
@@ -2728,10 +2919,6 @@ var RESERVED_COMPONENT_METHOD_KEYS = /* @__PURE__ */ new Set([
   "observers",
   "mixins"
 ]);
-function slugify(id, prefix) {
-  const normalized = id.replace(/[^a-z0-9]+/gi, "-").replace(/^-+|-+$/g, "").toLowerCase();
-  return `${prefix}-${normalized || "index"}`;
-}
 function ensureDocumentReady(callback) {
   if (typeof document === "undefined") {
     return;

package/dist/plugin.mjs

@@ -339,6 +339,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 +376,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 +410,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 +436,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 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 +487,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} />\``;
     }
@@ -618,7 +649,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 +686,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) {
@@ -741,6 +772,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;
@@ -779,7 +816,11 @@ function weappWebPlugin(options = {}) {
   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 +836,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 +856,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) {
@@ -981,12 +1025,23 @@ 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;
+      }
+      console.warn(message);
+    };
     const appScript = await resolveScriptFile(join(srcRoot, "app"));
     if (appScript) {
       moduleMeta.set(
@@ -1002,6 +1057,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 +1119,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 +1164,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;
         }
-        await collectComponent(value, importerDir);
+        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;
+        }
+        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;
+      }
+      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;
       }
-      await collectComponentsFromConfig(json, importerDir);
+      return resolveScriptFile(base);
     }
     function resolveComponentBase(raw, importerDir) {
       if (!raw) {

package/dist/runtime/index.mjs

@@ -49,7 +49,23 @@ var NAV_BUTTON_TAG = "weapp-button";
 var BaseElement = globalThis.HTMLElement ?? class {
 };
 var formConfig = { ...DEFAULT_FORM_CONFIG };
-var styleInjected = false;
+var styleTargets = /* @__PURE__ */ new WeakSet();
+var sharedSheet;
+function resolveAdoptedStyleSheets(root) {
+  const doc = root.ownerDocument ?? document;
+  if (!doc || typeof doc.createElement !== "function") {
+    return void 0;
+  }
+  if (!("adoptedStyleSheets" in doc)) {
+    return void 0;
+  }
+  if (!sharedSheet && "replaceSync" in CSSStyleSheet.prototype) {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(BUTTON_STYLE);
+    sharedSheet = sheet;
+  }
+  return sharedSheet;
+}
 var BUTTON_STYLE = `
 weapp-button {
   display: block;
@@ -67,8 +83,8 @@ weapp-button .weapp-btn {
   -webkit-appearance: none;
   box-sizing: border-box;
   width: 100%;
-  border-radius: 6px;
-  border: 1px solid #d7d7d7;
+  border-radius: 5px;
+  border: 1px solid #d9d9d9;
   padding: 0 16px;
   height: 44px;
   line-height: 44px;
@@ -99,7 +115,7 @@ weapp-button.weapp-btn--plain .weapp-btn {
 }
 
 weapp-button.weapp-btn--plain.weapp-btn--default .weapp-btn {
-  border-color: #353535;
+  border-color: #b2b2b2;
   color: #353535;
 }
 
@@ -115,21 +131,34 @@ weapp-button.weapp-btn--plain.weapp-btn--warn .weapp-btn {
 
 weapp-button.weapp-btn--loading .weapp-btn,
 weapp-button.weapp-btn--disabled .weapp-btn {
-  opacity: 0.6;
+  background-color: #f7f7f7;
+  border-color: #d9d9d9;
+  color: #9b9b9b;
   cursor: not-allowed;
 }
 
 weapp-button.button-hover .weapp-btn {
-  opacity: 0.7;
+  background-color: #ededed;
+  border-color: #d2d2d2;
+}
+
+weapp-button.button-hover.weapp-btn--primary .weapp-btn {
+  background-color: #06ad56;
+  border-color: #06ad56;
+}
+
+weapp-button.button-hover.weapp-btn--warn .weapp-btn {
+  background-color: #d93c37;
+  border-color: #d93c37;
 }
 
 weapp-button.button-hover.weapp-btn--plain .weapp-btn {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.06);
 }
 
 weapp-button.weapp-btn--mini .weapp-btn {
-  height: 28px;
-  line-height: 28px;
+  height: 32px;
+  line-height: 32px;
   font-size: 13px;
   padding: 0 12px;
   border-radius: 4px;
@@ -161,12 +190,36 @@ weapp-button .weapp-btn__loading[hidden] {
   to { transform: rotate(360deg); }
 }
 `;
-function ensureButtonStyle() {
-  if (styleInjected) {
+function ensureButtonStyle(root) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (root && styleTargets.has(root)) {
+    return;
+  }
+  if (!root) {
+    const target = document.head;
+    if (!target || styleTargets.has(target)) {
+      return;
+    }
+    injectStyle(BUTTON_STYLE, BUTTON_STYLE_ID);
+    styleTargets.add(target);
+    return;
+  }
+  const sheet = resolveAdoptedStyleSheets(root);
+  if (sheet) {
+    const existing = root.adoptedStyleSheets ?? [];
+    if (!existing.includes(sheet)) {
+      root.adoptedStyleSheets = [...existing, sheet];
+    }
+    styleTargets.add(root);
     return;
   }
-  injectStyle(BUTTON_STYLE, BUTTON_STYLE_ID);
-  styleInjected = true;
+  const style = document.createElement("style");
+  style.id = BUTTON_STYLE_ID;
+  style.textContent = BUTTON_STYLE;
+  root.appendChild(style);
+  styleTargets.add(root);
 }
 function toBoolean(value) {
   if (value === null) {
@@ -317,7 +370,12 @@ var WeappButton = class extends BaseElement {
   #lastTouchTime = 0;
   #observer;
   connectedCallback() {
-    ensureButtonStyle();
+    const root = this.getRootNode();
+    if (root instanceof ShadowRoot) {
+      ensureButtonStyle(root);
+    } else {
+      ensureButtonStyle();
+    }
     this.#ensureStructure();
     this.#applyState();
     this.#bindEvents();
@@ -1319,6 +1377,12 @@ function ensureNavigationBarDefined() {
   }
 }
 
+// src/shared/slugify.ts
+function slugify(id, prefix) {
+  const normalized = id.replace(/[^a-z0-9]+/gi, "-").replace(/^-+|-+$/g, "").toLowerCase();
+  return `${prefix}-${normalized || "index"}`;
+}
+
 // src/runtime/rpx.ts
 var DEFAULT_DESIGN_WIDTH = 750;
 var DEFAULT_VAR_NAME = "--rpx";
@@ -1380,10 +1444,6 @@ var RESERVED_COMPONENT_METHOD_KEYS = /* @__PURE__ */ new Set([
   "observers",
   "mixins"
 ]);
-function slugify(id, prefix) {
-  const normalized = id.replace(/[^a-z0-9]+/gi, "-").replace(/^-+|-+$/g, "").toLowerCase();
-  return `${prefix}-${normalized || "index"}`;
-}
 function ensureDocumentReady(callback) {
   if (typeof document === "undefined") {
     return;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weapp-vite/web",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Experimental web runtime for weapp-vite templates",
   "author": "ice breaker <1324318532@qq.com>",
   "license": "MIT",