@weapp-vite/web 1.1.0 → 1.2.0

package/dist/index.mjs

@@ -30,6 +30,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";
 
@@ -96,6 +97,8 @@ function normalizeTagName(name) {
       return "select";
     case "block":
       return "#fragment";
+    case "slot":
+      return "slot";
     default:
       return name || "div";
   }
@@ -111,6 +114,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;
@@ -317,6 +327,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";
@@ -491,7 +635,7 @@ var Renderer = class {
   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)`;
   }
@@ -546,29 +690,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) {
@@ -611,8 +764,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);
@@ -626,11 +821,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)
   });
@@ -647,22 +846,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) {
@@ -718,7 +918,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,
@@ -727,37 +934,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 = [
@@ -769,7 +1015,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/shared/slugify.ts
@@ -801,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();
@@ -810,6 +1061,9 @@ 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");
@@ -885,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))
         });
@@ -895,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))) {
@@ -1040,7 +1299,9 @@ if (import.meta.hot) { import.meta.hot.accept() }
         warn(message);
         return;
       }
-      console.warn(message);
+      if (typeof process !== "undefined" && typeof process.emitWarning === "function") {
+        process.emitWarning(message);
+      }
     };
     const appScript = await resolveScriptFile(join(srcRoot, "app"));
     if (appScript) {
@@ -1347,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);
@@ -2143,7 +2411,7 @@ function normalizeKey(rawKey, item, index, scope) {
     const expr = key.replace(/^\{\{\s*/, "").replace(/\s*\}\}$/, "");
     return evaluateExpression(expr, scope);
   }
-  if (!/[\.\[\(\)]/.test(key) && item && typeof item === "object" && key in item) {
+  if (!/[.[()]/.test(key) && item && typeof item === "object" && key in item) {
     return item[key];
   }
   return evaluateExpression(key, scope);
@@ -2192,6 +2460,16 @@ function createWxsModule(code, id, requireMap) {
   return module.exports;
 }
 function createRenderContext(instance, methods) {
+  const warnedTemplates = /* @__PURE__ */ new Set();
+  const warnMissingTemplate = (name) => {
+    if (warnedTemplates.has(name)) {
+      return;
+    }
+    warnedTemplates.add(name);
+    if (typeof console !== "undefined" && typeof console.warn === "function") {
+      console.warn(`[@weapp-vite/web] \u672A\u627E\u5230\u6A21\u677F: ${name}`);
+    }
+  };
   return {
     instance,
     eval: (expression, scope, wxs) => {
@@ -2214,11 +2492,10 @@ function createRenderContext(instance, methods) {
       return normalizeKey(rawKey, item, index, renderScope);
     },
     renderTemplate: (templates, name, scope, ctx) => {
-      if (!name) {
-        return "";
-      }
-      const template = templates?.[name];
+      const resolvedName = typeof name === "string" ? name : String(name);
+      const template = templates?.[resolvedName];
       if (typeof template !== "function") {
+        warnMissingTemplate(resolvedName);
         return "";
       }
       return template(scope, ctx);
@@ -2327,6 +2604,78 @@ function coerceValue(value, type) {
   }
   return value;
 }
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function mergeLifetimes(target, source) {
+  if (!source) {
+    return;
+  }
+  const keys = ["created", "attached", "ready", "detached"];
+  for (const key of keys) {
+    const next = source[key];
+    if (!next) {
+      continue;
+    }
+    const current = target[key];
+    target[key] = current ? function merged() {
+      current.call(this);
+      next.call(this);
+    } : next;
+  }
+}
+function normalizeBehaviors(component) {
+  if (!component) {
+    return { component: void 0, warnings: [] };
+  }
+  const warnings = [];
+  const visited = /* @__PURE__ */ new Set();
+  const merged = {};
+  const mergeComponent = (source) => {
+    if (source.properties) {
+      merged.properties = { ...merged.properties ?? {}, ...source.properties };
+    }
+    if (source.data) {
+      const nextData = typeof source.data === "function" ? source.data() : source.data;
+      if (isPlainObject(nextData)) {
+        merged.data = { ...merged.data ?? {}, ...nextData };
+      }
+    }
+    if (source.methods) {
+      merged.methods = { ...merged.methods ?? {}, ...source.methods };
+    }
+    if (source.lifetimes) {
+      merged.lifetimes = merged.lifetimes ?? {};
+      mergeLifetimes(merged.lifetimes, source.lifetimes);
+    }
+  };
+  const walk = (source) => {
+    if (visited.has(source)) {
+      warnings.push("[@weapp-vite/web] behaviors \u5B58\u5728\u5FAA\u73AF\u5F15\u7528\uFF0C\u5DF2\u8DF3\u8FC7\u3002");
+      return;
+    }
+    visited.add(source);
+    const behaviors = source.behaviors ?? [];
+    if (Array.isArray(behaviors)) {
+      for (const behavior of behaviors) {
+        if (!behavior || !isPlainObject(behavior)) {
+          warnings.push("[@weapp-vite/web] behaviors \u4EC5\u652F\u6301\u5BF9\u8C61\uFF0C\u5DF2\u5FFD\u7565\u975E\u5BF9\u8C61\u6761\u76EE\u3002");
+          continue;
+        }
+        walk(behavior);
+        mergeComponent(behavior);
+      }
+    } else if (behaviors) {
+      warnings.push("[@weapp-vite/web] behaviors \u4EC5\u652F\u6301\u6570\u7EC4\uFF0C\u5DF2\u5FFD\u7565\u3002");
+    }
+  };
+  walk(component);
+  mergeComponent(component);
+  return {
+    component: merged,
+    warnings
+  };
+}
 function defineComponent(tagName, options) {
   if (!options || typeof options !== "object") {
     throw new TypeError("[@weapp-vite/web] defineComponent \u9700\u8981\u63D0\u4F9B\u914D\u7F6E\u5BF9\u8C61\u3002");
@@ -2337,13 +2686,20 @@ function defineComponent(tagName, options) {
     return existing;
   }
   const BaseElement3 = supportsLit ? LitElement : globalThis.HTMLElement ?? FallbackElement;
-  const { template, style = "", component = {} } = options;
+  const { template, style = "", component = {}, observerInit = false } = options;
   if (!template) {
     throw new Error("[@weapp-vite/web] defineComponent \u9700\u8981\u63D0\u4F9B\u6A21\u677F\u6E32\u67D3\u51FD\u6570\u3002");
   }
+  const normalized = normalizeBehaviors(component);
+  for (const warning of normalized.warnings) {
+    if (typeof console !== "undefined" && typeof console.warn === "function") {
+      console.warn(warning);
+    }
+  }
   let templateRef = template;
   let styleRef = style;
-  let componentRef = component;
+  let componentRef = normalized.component ?? component;
+  let observerInitEnabled = Boolean(observerInit);
   let propertyEntries = Object.entries(componentRef.properties ?? {});
   let observedAttributes = propertyEntries.map(([name]) => hyphenate(name));
   let defaultPropertyValues = propertyEntries.reduce((acc, [name, prop]) => {
@@ -2367,6 +2723,8 @@ function defineComponent(tagName, options) {
     #renderContext = createRenderContext(this, {});
     #usesLegacyTemplate = false;
     #readyFired = false;
+    #observerInitDone = false;
+    #observedKeys = /* @__PURE__ */ new Set();
     constructor() {
       super();
       const dataOption = typeof componentRef.data === "function" ? componentRef.data() : componentRef.data ?? {};
@@ -2417,6 +2775,9 @@ function defineComponent(tagName, options) {
         superConnected.call(this);
       }
       this.#applyAttributes();
+      if (observerInitEnabled) {
+        this.#runInitialObservers();
+      }
       lifetimes.attached?.call(this);
       this.#isMounted = true;
       if (!supportsLit) {
@@ -2497,7 +2858,11 @@ function defineComponent(tagName, options) {
           this.#state[key] = value;
           if (Object.prototype.hasOwnProperty.call(this.#properties, key)) {
             this.#properties[key] = value;
-            componentRef.properties?.[key]?.observer?.call(this, value, oldValue);
+            const propOption = componentRef.properties?.[key];
+            if (propOption?.observer) {
+              propOption.observer.call(this, value, oldValue);
+              this.#observedKeys.add(key);
+            }
           }
           changed = true;
         }
@@ -2518,7 +2883,24 @@ function defineComponent(tagName, options) {
       if (this.#isMounted) {
         this.requestUpdate();
       }
-      propOption?.observer?.call(this, coerced, oldValue);
+      if (propOption?.observer) {
+        propOption.observer.call(this, coerced, oldValue);
+        this.#observedKeys.add(name);
+      }
+    }
+    #runInitialObservers() {
+      if (this.#observerInitDone) {
+        return;
+      }
+      this.#observerInitDone = true;
+      for (const [propName, propOption] of propertyEntries) {
+        if (!propOption.observer || this.#observedKeys.has(propName)) {
+          continue;
+        }
+        const value = this.#state[propName];
+        propOption.observer.call(this, value, void 0);
+        this.#observedKeys.add(propName);
+      }
     }
     #syncMethods(nextMethods) {
       const resolved = nextMethods ?? {};
@@ -2566,7 +2948,14 @@ function defineComponent(tagName, options) {
     }
     templateRef = nextOptions.template;
     styleRef = nextOptions.style ?? "";
-    componentRef = nextOptions.component ?? {};
+    const nextNormalized = normalizeBehaviors(nextOptions.component ?? {});
+    for (const warning of nextNormalized.warnings) {
+      if (typeof console !== "undefined" && typeof console.warn === "function") {
+        console.warn(warning);
+      }
+    }
+    componentRef = nextNormalized.component ?? nextOptions.component ?? {};
+    observerInitEnabled = Boolean(nextOptions.observerInit);
     lifetimes = componentRef.lifetimes ?? {};
     propertyEntries = Object.entries(componentRef.properties ?? {});
     observedAttributes = propertyEntries.map(([name]) => hyphenate(name));
@@ -3496,6 +3885,8 @@ function normalizeTagName2(name) {
       return "select";
     case "block":
       return "#fragment";
+    case "slot":
+      return "slot";
     default:
       return name || "div";
   }