compelem 0.28.1 → 0.28.2

package/.agents/skills/compelem-usage/SKILL.md

@@ -0,0 +1,303 @@
+# compelem Usage Skill
+
+This skill provides guidance for AI agents working with the **compelem** WebComponent library.
+
+## Quick Reference
+
+**Version:** 0.28.1  
+**Package:** `compelem`  
+**Author:** holyhigh2  
+**Docs:** `AGENTS.md` (this repo)
+
+---
+
+## Installation & Imports
+
+```ts
+import { 
+  CompElem, tag, prop, state, computed, watch, emits,
+  csscope, Csscope, css, h,
+  forEach, ifElse, model, show, classes, styles,
+  bind, slot, html, transition, when,
+  createRef, defineComponents, startViewTransition
+} from "compelem";
+```
+
+---
+
+## Component Skeleton
+
+```ts
+@emits('change')
+@tag("my-counter")
+export class MyCounter extends CompElem {
+  @prop({ type: Number, model: true }) value = 0;
+  @prop label: string;
+  @state count = 0;
+
+  @computed
+  get doubled() { return this.count * 2 }
+
+  @watch('count', { immediate: true })
+  onCount(nv: number, ov: number) { console.log(nv, ov) }
+
+  @csscope(Csscope.INNER)
+  static get css() {
+    return css`button{ color: var(--c, black); }`
+  }
+  get cssVars() { return { c: this.count > 9 ? 'red' : 'black' } }
+
+  mounted() {
+    this.emit('change', { value: this.count })
+  }
+
+  render(): Template {
+    return h`<div>
+      <span>${this.label}: ${this.count}</span>
+      <button @click="${() => this.count++}">+1</button>
+      ${forEach(this.items, it => it.id, it => h`<li key=${it.id}>${it.name}</li>`)}
+      ${ifElse(this.count > 5, () => h`<b>big</b>`, () => h`<i>small</i>`)}
+    </div>`
+  }
+}
+```
+
+---
+
+## Key Decorators
+
+| Decorator | Purpose | Key Options |
+|---|---|---|
+| `@tag(name, immediate?)` | Register component | `immediate=true` → auto `customElements.define` |
+| `@prop(options?)` | External input (read-only) | `type`, `model`, `attribute`, `hasChanged`, `converter` |
+| `@state(options?)` | Internal reactive state | `shallow`, `prop` (init from prop), `hasChanged` |
+| `@computed` | Cached getter | Must be non-static getter |
+| `@watch(source, options?)` | React to changes | `immediate`, `deep`, `once` |
+| `@emits(...names)` | Declare events | Supports `'update:*'` wildcard |
+| `@csscope(...scopes)` | Style scopes | `INNER`, `HOST`, `GLOBAL` |
+| `@event(name, target?)` | Non-view events | Window/document/element events |
+| `@query(selector, cache?)` | ShadowDOM query | `QueryCache.ONCE` for single query |
+
+---
+
+## Template Syntax (`h` tag function)
+
+```ts
+h`<div @click="${handler}" .value="${v}" ?disabled="${d}" *r="${r}">`
+```
+
+| Prefix | Meaning |
+|---|---|
+| `@` | Event listener |
+| `.` | Component prop (type-safe) |
+| `?` | Boolean attribute toggle |
+| `*` | Evaluate then set (supports `:camel/:kebab/:snake`) |
+| `key=${id}` | For `forEach` items |
+| `ref="${refObj}"` | DOM reference via `createRef()` |
+
+---
+
+## Built-in Directives
+
+| Directive | Position | Example |
+|---|---|---|
+| `bind(obj)` | TAG | `<div ${bind(obj)}>` |
+| `show(cond, cb?)` | TAG | `<div ${show(visible)}>` |
+| `model(val, prop?, modelProp?)` | TAG | `<input ${model(val)}>` |
+| `classes(obj\|arr\|str)` | TAG | `<div ${classes({active: true})}>` |
+| `styles(obj\|str)` | TAG | `<div ${styles({color: 'red'})}>` |
+| `forEach(arr, keyFn, tmpl)` | TEXT/SLOT | `${forEach(list, i=>i.id, i=>h\`<li key=${i.id}>\`)}` |
+| `ifTrue(cond, tmpl)` | TEXT/SLOT | `${ifTrue(show, () => h\`<span>\`)}` |
+| `ifElse(cond, ifT, elseT)` | TEXT/SLOT | `${ifElse(c, t, f)}` |
+| `when(val, cases)` | TEXT/SLOT | `${when(x, [[v=>v>0, t], ['default', f]])}` |
+| `slot(tmpl, name?)` | SLOT | Dynamic slot content |
+| `html(str)` | TAG/TEXT/SLOT | Raw HTML injection |
+| `transition(name, inner, opts?)` | TEXT/SLOT | Animation on structural changes |
+
+---
+
+## Lifecycle Hooks
+
+```ts
+propsReady(props)  // After props set, before render
+render()           // Return Template | null
+beforeMount()      // Before first mount
+mounted()          // After first mount
+shouldUpdate(changed) // Return false to skip update
+beforeDestroyed()  // Before destroy
+destroyed()        // After destroy
+```
+
+---
+
+## Instance Members (Read-only)
+
+- `rootComponent`, `parentComponent`, `wrapperComponent`
+- `renderRoot` / `renderRoots`, `shadowRoot`
+- `slots`, `slotHooks`
+- `cssSheets`, `globalCssSheet`
+- `attrs`, `props`
+- `isMounted`, `isDestroyed`
+
+---
+
+## Instance Methods
+
+- `emit(evName, arg?, event?)` — Fire component event
+- `nextTick(cbk)` — After DOM update
+- `forceUpdate()` — Force re-render
+- `updateProps(props, force?)` — Batch update props
+- `insertStyleSheet(sheet)` — Dynamic CSS
+- `destroy()` — Cleanup component
+
+---
+
+## Dynamic CSS Variables
+
+```ts
+get cssVars() { 
+  return { 
+    primaryColor: this.theme === 'dark' ? '#fff' : '#000',
+    spacing: `${this.size}px`
+  } 
+}
+// Generates: --primary-color, --spacing
+```
+
+---
+
+## Event System
+
+```ts
+// Native events
+<div @click="${handler}">
+<div @resize="${handler}">        // Element resize
+<div @outside.mousedown="${h}">  // Click outside
+<div @mutate.attr="${h}">        // MutationObserver
+
+// Component events (must @emits first)
+<my-comp @change="${handler}">   // Receives custom data
+```
+
+**Modifiers:** `.stop` `.prevent` `.self` `.left` `.right` `.ctrl` `.alt` `.esc` `.debounce:100` `.throttle:100` `.once`
+
+---
+
+## Dev/Prod Builds (package.json exports)
+
+```json
+"exports": {
+  ".": {
+    "import": { "default": "dist/index.esm.js" },
+    "require": { "default": "dist/index.cjs.js" },
+    "development": { "default": "dist-dev/index.esm.js" },
+    "production": { "default": "dist/index.prod.esm.js" }
+  }
+}
+```
+
+- `npm run prod` → `dist/index.prod.esm.js` (minified, no dev code)
+- `npm run dev` → `dist-dev/index.esm.js` (with devtools hints, warnings)
+
+---
+
+## Common Patterns
+
+### Two-way Binding (model prop)
+```ts
+@prop({ type: String, model: true }) value = '';
+// Parent: <my-input .value="${val}" @update:value="${v => val = v}">
+// Or: <my-input ${model(val)}>
+```
+
+### Dynamic Slots
+```ts
+render() {
+  return h`<div>
+    ${slot(args => h`<span>${args.title}</span>`, 'header')}
+    <slot></slot>
+  </div>`
+}
+```
+
+### View Transitions (SPA routing)
+```ts
+await startViewTransition(() => {
+  router.navigate('/new-page')
+})
+```
+
+### Register Multiple Components
+```ts
+import { defineComponents } from 'compelem';
+// After all @tag components are imported:
+defineComponents()
+```
+
+---
+
+## Debugging Tips
+
+1. **DevTools hint**: Set `window.__COMPELEM_DEVTOOLS_NO_HINT__ = true` to silence
+2. **React/Vue interop**: Add `emit-native` attr to convert events to CustomEvent
+3. **No-view components**: `render()` returns `null` → no Shadow DOM, only HOST/GLOBAL styles
+4. **Prop mutation**: Dev mode throws if you assign to `@prop` directly; use `model: true` or `emit('update:xxx')`
+
+---
+
+## TypeScript Config
+
+```json
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2017",
+    "lib": ["ES2017", "DOM", "DOM.Iterable"]
+  }
+}
+```
+
+---
+
+## File Structure Reference
+
+```
+src/
+├── index.ts              # Main exports
+├── CompElem.ts           # Base component class
+├── config.ts             # Global config (setDefaults)
+├── devtools.ts           # DevTools integration
+├── decorators/           # All decorators
+├── directives/           # Built-in directives
+├── render/               # Template engine
+├── events/               # Event system
+├── transition/           # Animation system
+└── types.ts              # All option types
+```
+
+---
+
+## Anti-Patterns to Avoid
+
+| ❌ Don't | ✅ Do |
+|---|---|
+| Assign to `@prop` inside component | Use `@prop({model:true})` or `emit('update:xxx')` |
+| Use `@csscope` on non-static getter | Use on `static get css()` only |
+| Forget `@emits` before `emit()` | Declare all events with `@emits` |
+| Use `model` with dynamic paths | Use static property paths only |
+| Duplicate `key` in `forEach` | Ensure unique keys |
+| Use `@query` on no-view component | Use `render()` returning Template |
+
+---
+
+## Quick Commands
+
+```bash
+npm run prod    # Build production (dist/index.prod.esm.js)
+npm run dev     # Build development (dist-dev/index.esm.js)
+npm run lint    # ESLint check
+npx tsc --noEmit  # Type check
+```

package/README.md

@@ -1,5 +1,20 @@
-![Logo](./assets/logo.png)
-
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./assets/logo-dark.svg">
+    <img src="./assets/logo.svg" alt="compelem" width="120" height="120">
+  </picture>
+</p>
+
+<h1 align="center">compelem</h1>
+
+<p align="center">
+  <em>Component + Element · A Web Components MVVM library</em>
+</p>
+<p align="center">
+  <img src="https://img.shields.io/npm/v/compelem" alt="npm">
+  <img src="https://img.shields.io/badge/license-MIT-blue" alt="license">
+  <img src="https://img.shields.io/badge/TypeScript-ready-3178C6" alt="ts">
+</p>
 一个现代化、响应式、快速、轻量的WebComponent开发库。为开发者提供丰富、灵活、可扩展的声明式接口
 
 ## 概览  
@@ -291,23 +306,23 @@ CompElem 组件既可以在 CompElem 环境内调用，也可以直接在原生
 
 > 创建流程
 
-| 功能                                                         |     | 生命周期    |
-| ------------------------------------------------------------ | --- | ----------- |
-| 1. 创建组件实例，完成类属性默认值设置（prop/state/...)       |     |             |
-| 2. 初始化类全局样式（仅一次）及 实例样式(产生 styles 数组)   |     |             |
-| 3. 创建 shadowRoot 并挂载组件样式                            |     |  |
-| 4. 执行装饰器 create 回调                                      |     |    constructor         |
-| 5. 绑定 parentComponent                                               |     |    |
-| 6. 验证及初始化 props |     |  propsReady |
-| 7. 初始化 states |     |   |
-| 8. @computed                       |     |             |
-| 9. @watch(immediate)                       |     |             |
-| 10. 渲染 render 及依赖绑定                                    |     | render      |
-| 11. 绑定 renderRoot 及 renderRoots                                            |     |             |
-| 12. 初始化插槽 slots                                            |     |     |
-| 13. 执行装饰器 beforeMount 回调 ，如 @query                                     |     |    beforeMount      |
-| 14. 初始化动态 css                                                   |     |     mounted        |
-| 15. 执行装饰器 mounted 回调                                |     |             |
+| 功能                                                         |  生命周期    |
+| ------------------------------------------------------------ | ----------- |
+| 1. 创建组件实例，完成类属性默认值设置（prop/state/...)       |              |
+| 2. 初始化类全局样式（仅一次）及 实例样式(产生 styles 数组)   |                 |
+| 3. 创建 shadowRoot 并挂载组件样式                            |      |
+| 4. 执行装饰器 create 回调                                      |        constructor         |
+| 5. 绑定 parentComponent                                                   |    |
+| 6. 验证及初始化 props |      propsReady |
+| 7. 初始化 states |       |
+| 8. @computed                       |                 |
+| 9. @watch(immediate)                       |                 |
+| 10. 渲染 render 及依赖绑定                                    |     render      |
+| 11. 绑定 renderRoot 及 renderRoots                                            |                 |
+| 12. 初始化插槽 slots                                            |         |
+| 13. 执行装饰器 beforeMount 回调 ，如 @query                                         |    beforeMount      |
+| 14. 初始化动态 css                                                   |         mounted        |
+| 15. 执行装饰器 mounted 回调                                |                 |
 
 > 更新流程【普通】
 
@@ -420,7 +435,6 @@ return h` <l-tooltip>
 | when    | TEXT/SLOT | 多条件分支，支持 switch/ifelse 两种模式                     | ` ...>${when(condition,{c1:()=>h``,c2:...})}<... `  |
 | slot    | SLOT      | 动态插槽                                                    | ` ...>${slot((args) => h``)}<... `                  |
 | html    | TAG/TEXT/SLOT      | 向指定元素/文本位置插入HTML内容                                                    | `<div a="b" ${html('<b>1</b>')}> ...>${html('<b>1</b>')}<...`                  |
-| transition | TEXT/SLOT | 为内层结构指令的切换添加过渡动画，支持JS钩子。通常使用 `<transition>` 伪标签 | `${transition('fade', ifElse(...), {mode:'out-in'})}` |
 
 ## 过渡动画 Transition
 
@@ -711,4 +725,5 @@ setDefaults({
 ## 扩展
 - [VSCode](https://marketplace.visualstudio.com/items?itemName=holyhigh2.compelem-vscode) - 为h函数和css片段提供语法加亮/智能提示/诊断等功能
 - [Vite-css](https://www.npmjs.com/package/vite-plugin-compelem-css) - 用于在导入scss/css文件时直接转换为CssTemplate
+- [Vite-scss](https://www.npmjs.com/package/vite-plugin-compelem-scss) - 用于在css``模板中支持scss语法
 - [Vite-comments](https://www.npmjs.com/package/vite-plugin-compelem-strip-comments) - 用于支持h``模板中的html注释

package/dist/CompElem.d.ts

@@ -0,0 +1,107 @@
+import { IComponent } from "./IComponent";
+import { CssTemplate } from "./render/CssTemplate";
+import { Template } from "./render/Template";
+import { UpdatePoint } from "./render/UpdatePoint";
+import { TplFn } from "./types";
+/**
+ * CompElem基类，意为组件元素。提供了基本内置属性及生命周期等必备接口
+ * 每个组件都需要继承自该类
+ *
+ * @author holyhigh2
+ */
+export declare class CompElem<T = HTMLElement> extends HTMLElement implements IComponent<T> {
+    #private;
+    __data_: Record<string, any>;
+    __updateTree: Array<UpdatePoint>;
+    __updateSubViewDeps: Map<string, Set<UpdatePoint>>;
+    _cssUpdateInNextTick: boolean;
+    _cssVarOldValueMap: Record<string, string | number>;
+    _watchUpdateSetInNextTick: Set<Function>;
+    _watchUpdateArgsInNextTick: Map<Function, Record<string, any>>;
+    _computedUpdateSetInNextTick: Set<Function>;
+    _subComponentEventSn: number;
+    _subComponentEventMap: Map<number, Record<string, Function>>;
+    get [Symbol.toStringTag](): string;
+    get cid(): number;
+    get attrs(): Record<string, string>;
+    get props(): Record<string, any>;
+    get renderRoot(): T | undefined;
+    get renderRoots(): HTMLElement[];
+    get parentComponent(): CompElem | undefined;
+    get wrapperComponent(): CompElem | undefined;
+    get slots(): Record<string, Array<Node>>;
+    get slotHooks(): Record<string, (...args: any[]) => Template>;
+    get cssSheets(): CSSStyleSheet[];
+    get isMounted(): boolean;
+    get cssVars(): Record<string, string | number | undefined>;
+    __inited: boolean;
+    __thisRef: WeakRef<any>;
+    __superComp: Function;
+    constructor(...args: any[]);
+    insertStyleSheet(sheet: CssTemplate | CSSStyleSheet): CSSStyleSheet | null;
+    /**
+     * Returns the root component in the parent chain, or itself if it's the top-level component.
+     */
+    get rootComponent(): CompElem;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    beforeDestroyed(): void;
+    destroyed(): void;
+    get isDestroyed(): boolean;
+    destroy(): void;
+    setup(): void;
+    propsReady(props: Record<string, any>): void;
+    render(): Template | null;
+    beforeMount(): void;
+    mounted(): void;
+    slotChange(slot: HTMLSlotElement, name: string): void;
+    attributeChangedCallback(attributeName: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * 是否需要更新，可获取变更属性
+     * 返回true时更新
+     */
+    shouldUpdate(changed: Record<string, any>): boolean;
+    /**
+     * 1. 调用render
+     * 2. 更新@query/all
+     * 3. 更新ref
+     * 4. 更新prop到attr的映射
+     * @param changed
+     */
+    updated(changed: Record<string, any>): void;
+    /**
+     * 由监控变量调用
+     * @param stateKey
+     * @param ov
+     * @param rootStateKey 如果是对象内部属性变更，会返回根属性名
+     * @returns
+     */
+    _notify(nv: any | undefined, ov: any, chain: string[], subNewValue?: any, subOldValue?: any): void;
+    requestUpdate(nv: any, ov: any, chain: string[], subNewValue?: any, subOldValue?: any): void;
+    updateProps(props: Record<string, any>, force?: boolean): void;
+    _initProps(props: Record<string, any>, attrs?: Record<string, any>): void;
+    /**
+     * 绑定slot标签，render时调用
+     */
+    _bindSlot(slot: HTMLSlotElement, name: string, props: Record<string, any>): void;
+    _updateSlot(name: string, propName?: string, value?: any): void;
+    _asyncDirectives: WeakMap<TplFn, any>;
+    renderAsync(cbk: TplFn, ...args: any[]): void;
+    _regSubViewDeps(props: string[], up: UpdatePoint): void;
+    _getPrivateData(): Record<string, any>;
+    /**
+     * 发出组件事件
+     * @param evName 事件名称
+     * @param args 自定义参数
+     */
+    emit(evName: string, arg?: Record<string, any>, event?: Event): void;
+    /**
+     * 下一帧执行
+     * @param cbk
+     */
+    nextTick(cbk: () => void): void;
+    /**
+     * 强制更新一次视图
+     */
+    forceUpdate(): void;
+}

package/dist/IComponent.d.ts

@@ -0,0 +1,71 @@
+import { CssTemplate } from "./render/CssTemplate";
+import { Template } from "./render/Template";
+/**
+ * 组件接口
+ * 定义组件属性、生命周期及方法
+ * @author holyhigh2
+ */
+export interface IComponent<T = HTMLElement> {
+    get cid(): number;
+    get attrs(): Record<string, string>;
+    get props(): Record<string, any>;
+    get renderRoot(): T | undefined;
+    get renderRoots(): HTMLElement[];
+    get rootComponent(): HTMLElement | undefined;
+    get parentComponent(): HTMLElement | undefined;
+    get wrapperComponent(): HTMLElement | undefined;
+    get slots(): Record<string, Array<Node>>;
+    get slotHooks(): Record<string, (...args: any[]) => Template>;
+    get cssSheets(): CSSStyleSheet[];
+    get isMounted(): boolean;
+    get cssVars(): Record<string, string | number | undefined>;
+    propsReady(props: Record<string, any>): void;
+    render(): Template | null;
+    beforeMount(): void;
+    mounted(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    beforeDestroyed(): void;
+    destroyed(): void;
+    shouldUpdate(changed: Record<string, any>): boolean;
+    updated(changed: Record<string, any>): void;
+    slotChange(slot: HTMLSlotElement, slotName: string): void;
+    attributeChangedCallback(attributeName: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * 初始化组件实例，完成响应属性及参数绑定、执行计算属性及立即执行的监视器、视图等等。
+     * 除非想创建一个全局响应分发器，否则不应该调用该方法
+     */
+    setup(): void;
+    /**
+     * 抛出自定义事件
+     * @param evName 事件名称
+     * @param args 自定义参数
+     */
+    emit(evName: string, arg: Record<string, any>, event?: Event): void;
+    /**
+     * 创建下一帧执行的逻辑
+     * @param cbk
+     */
+    nextTick(cbk: () => void): void;
+    /**
+     * 强制更新视图
+     */
+    forceUpdate(): void;
+    /**
+     * 请求指定路径更新
+     * @param nv new value
+     * @param ov old value
+     * @param chain path segment
+     */
+    requestUpdate(nv: any, ov: any, chain: string[], subNewValue?: any, subOldValue?: any): void;
+    /**
+     * 向组件插入样式表，没有shadowDOM的组件调用无效
+     * @param sheet
+     */
+    insertStyleSheet(sheet: CssTemplate | CSSStyleSheet): CSSStyleSheet | null;
+    /**
+     * 对于组件应用于原生环境或其他相似环境没有父组件但需要更新属性时调用
+     * @param props {属性名:值} 对象
+     */
+    updateProps(props: Record<string, any>): void;
+}

package/dist/config.d.ts

@@ -0,0 +1,10 @@
+import type { DefaultProps } from "./types";
+/**
+ * 设置全局/组件默认属性
+ * @param options
+ */
+export declare function setDefaults(options: DefaultProps): void;
+export declare function getBaseSheets(ctor: Function): CSSStyleSheet[];
+export declare const getDefaultCss: () => CSSStyleSheet[];
+export declare const getGlobalDefaultProps: () => Record<string, any>;
+export declare const getComponentDefaultProps: () => Record<string, any>;

package/dist/constants.d.ts

@@ -0,0 +1,64 @@
+import { CompElem } from "./CompElem";
+import { DecoratorWrapper } from "./decorator";
+import { CssTemplate } from "./render/CssTemplate";
+import { Constructor, Getter, PropOption, StateOption, TplFn } from "./types";
+export declare const SLOT_NAME_DEFAULT = "default";
+/**
+ * 共享内容
+ */
+export declare const EXP_KEY: RegExp;
+export declare enum CollectorType {
+    RENDER = 1,
+    COMPUTED = 2,
+    DIRECTIVE = 3
+}
+export declare enum Mode {
+    Prod = "prod",
+    Dev = "dev"
+}
+export declare const PropTypeMap: Record<string, Constructor<any>>;
+export interface CompiledWatchMeta {
+    rootMap: Map<string, string[]>;
+    watchKeysDeep: string[] | undefined;
+    watchDeepUpdateMap: Record<string, Set<Function>>;
+    watchUpdateMap: Record<string, Set<Function>>;
+    onceMap: Map<string, boolean>;
+}
+export declare const DefinitionCompEventMap: Map<Function, Record<string, any>[]>;
+export declare const DefinitionCompEmitMap: WeakMap<Function, Set<string>>;
+export declare const DefinitionTagMap: Record<string, string>;
+export declare const DefinitionComponentMap: Record<string, Function>;
+export declare const DefinitionComputedMap: WeakMap<Function, Record<string, Getter>>;
+export declare const DefinitionStateMap: WeakMap<Function, Record<string, StateOption>>;
+export declare const DefinitionPropMap: WeakMap<Function, Record<string, PropOption>>;
+export declare const DefinitionModelMap: WeakMap<Function, string[]>;
+export declare const DefinitionDecoratorMap: Map<Function, DecoratorWrapper[]>;
+export declare const ObservedAttrsMap: Map<Function, Set<string>>;
+export declare const ViewDepMap: Map<Function, Set<string>>;
+export declare const WatchKeysOnceMap: WeakMap<Function, Map<string, boolean>>;
+export declare const WatchKeysDeepListMap: WeakMap<Function, string[]>;
+export declare const WatchKeyRootMap: WeakMap<Function, Map<string, string[]>>;
+export declare const WatchUpdateMap: WeakMap<Function, Record<string, Set<Function>>>;
+export declare const WatchDeepUpdateMap: WeakMap<Function, Record<string, Set<Function>>>;
+export declare const WatchImmediateListMap: WeakMap<Function, Record<string, Set<Function>>>;
+export declare const CompiledWatchMetaMap: WeakMap<Function, CompiledWatchMeta | null>;
+export declare const StateShallowKeySetMap: WeakMap<Function, Set<string>>;
+export declare const PropShallowKeySetMap: WeakMap<Function, Set<string>>;
+export declare const HasChangedPropOrStateMap: WeakMap<Function, Map<string, Function>>;
+export declare const ComputedMapCache: WeakMap<Function, Record<string, Getter>>;
+export declare const ComputedUpdateDepsMap: WeakMap<Function, Map<string, Set<Function>>>;
+export declare const CssUpdateDepsMap: WeakMap<Function, Set<string>>;
+export declare const CssTemplateCacheMap: WeakMap<TemplateStringsArray, CssTemplate>;
+export declare const CssStyleSheetCacheMap: WeakMap<TemplateStringsArray, CSSStyleSheet>;
+export declare const CssScopeCacheMap: WeakMap<Function, Map<string, CSSStyleSheet[]>>;
+export declare const CssTemplateSheetMap: WeakMap<CssTemplate, CSSStyleSheet>;
+export declare const CssVarKeyCacheMap: WeakMap<Function, Map<string, string>>;
+export declare const DirectiveScopeMap: Map<Function, string[]>;
+export declare const ComponentDynamicCssUpdaterMap: WeakMap<CompElem<any>, Map<Function, CSSStyleSheet>>;
+export declare const ComponentUninitializedSubComponentPropMap: WeakMap<CompElem<any>, Map<Node, Record<string, any>>>;
+export declare const ComponentUninitializedSlotFunctionMap: WeakMap<Node, Record<string, TplFn>>;
+export declare const ComponentUninitializedWrapperComponentMap: WeakMap<Node, CompElem<any>>;
+export declare const PATH_SEPARATOR = ".";
+export declare const PROP_NAME_SLOTS = "slots";
+export declare const DATA_KEY = "__data_";
+export declare const PLACEHOLDER = "\u27EC\u010A\u27ED";

package/dist/decorator/Decorator.d.ts

@@ -0,0 +1,35 @@
+import { CompElem } from "../CompElem";
+export declare enum DecoratorType {
+    CLASS = "class",
+    FIELD = "field",
+    METHOD = "method"
+}
+/**
+ * 用于构造装饰器
+ * @author holyhigh2
+ */
+export declare abstract class Decorator {
+    /**
+     * 优先级，越大越先执行
+     */
+    static get priority(): number;
+    /**
+     * 装饰器使用范围，超出范围会报错
+     */
+    abstract get targets(): Array<DecoratorType>;
+    /**
+     * 构造会传递自定义参数
+     * @param args 自定义参数
+     */
+    created(component: CompElem, ...args: any[]): void;
+    /**
+     * 执行时机与组件一致
+     * @param component 组件实例
+     * @param setReactive 为实例设置响应属性，注意，仅是设置到了instance.reactiveData中并非this.key。如需实现this访问，可自行定义组件的properties
+     * @param args 装饰器函数参数
+     */
+    beforeMount(component: CompElem, setReactive: (key: string, value: any) => any, ...args: any[]): void;
+    mounted(component: CompElem, setReactive: (key: string, value: any) => any, ...args: any[]): void;
+    updated(component: CompElem, changed: Record<string, any>): void;
+    beforeDestroy(component: CompElem, ...args: any[]): void;
+}