@mantou/gem 2.2.0 → 2.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/gem.es.js +2039 -2051
- package/dist/gem.umd.js +12 -32
- package/elements/base/dialog.d.ts +1 -1
- package/elements/base/dialog.d.ts.map +1 -1
- package/elements/base/dialog.js +2 -2
- package/elements/base/dialog.js.map +1 -1
- package/elements/base/gesture.d.ts +1 -1
- package/elements/base/gesture.d.ts.map +1 -1
- package/elements/base/gesture.js +5 -5
- package/elements/base/gesture.js.map +1 -1
- package/elements/base/link.d.ts +1 -1
- package/elements/base/link.d.ts.map +1 -1
- package/elements/base/link.js +18 -19
- package/elements/base/link.js.map +1 -1
- package/elements/base/modal-factory.d.ts +93 -57
- package/elements/base/modal-factory.d.ts.map +1 -1
- package/elements/base/modal-factory.js +4 -3
- package/elements/base/modal-factory.js.map +1 -1
- package/elements/base/reflect.d.ts +1 -2
- package/elements/base/reflect.d.ts.map +1 -1
- package/elements/base/reflect.js +8 -10
- package/elements/base/reflect.js.map +1 -1
- package/elements/base/route.d.ts +18 -8
- package/elements/base/route.d.ts.map +1 -1
- package/elements/base/route.js +17 -21
- package/elements/base/route.js.map +1 -1
- package/elements/base/title.d.ts +1 -1
- package/elements/base/title.d.ts.map +1 -1
- package/elements/base/title.js +5 -7
- package/elements/base/title.js.map +1 -1
- package/elements/base/unsafe.d.ts +4 -3
- package/elements/base/unsafe.d.ts.map +1 -1
- package/elements/base/unsafe.js +45 -24
- package/elements/base/unsafe.js.map +1 -1
- package/elements/base/use.d.ts +1 -1
- package/elements/base/use.d.ts.map +1 -1
- package/elements/base/use.js +1 -1
- package/elements/base/use.js.map +1 -1
- package/elements/link.js +1 -1
- package/elements/link.js.map +1 -1
- package/elements/route.js +1 -1
- package/elements/route.js.map +1 -1
- package/helper/hmr.d.ts +11 -0
- package/helper/hmr.d.ts.map +1 -0
- package/helper/hmr.js +255 -0
- package/helper/hmr.js.map +1 -0
- package/helper/i18n.d.ts +2 -2
- package/helper/i18n.d.ts.map +1 -1
- package/helper/i18n.js +5 -4
- package/helper/i18n.js.map +1 -1
- package/helper/logger.d.ts +1 -1
- package/helper/logger.d.ts.map +1 -1
- package/helper/logger.js +8 -5
- package/helper/logger.js.map +1 -1
- package/helper/mediaquery.js +1 -1
- package/helper/mediaquery.js.map +1 -1
- package/helper/react-utils.d.ts.map +1 -1
- package/helper/react-utils.js +2 -6
- package/helper/react-utils.js.map +1 -1
- package/helper/ssr-shim.d.ts.map +1 -1
- package/helper/ssr-shim.js +2 -1
- package/helper/ssr-shim.js.map +1 -1
- package/helper/theme.d.ts +17 -6
- package/helper/theme.d.ts.map +1 -1
- package/helper/theme.js +23 -8
- package/helper/theme.js.map +1 -1
- package/index.d.ts +1 -2
- package/index.d.ts.map +1 -1
- package/index.js +1 -3
- package/index.js.map +1 -1
- package/lib/decorators.d.ts +54 -62
- package/lib/decorators.d.ts.map +1 -1
- package/lib/decorators.js +90 -91
- package/lib/decorators.js.map +1 -1
- package/lib/directive.d.ts +0 -18
- package/lib/directive.d.ts.map +1 -1
- package/lib/directive.js +1 -2
- package/lib/directive.js.map +1 -1
- package/lib/element.d.ts +8 -137
- package/lib/element.d.ts.map +1 -1
- package/lib/element.js +16 -481
- package/lib/element.js.map +1 -1
- package/lib/history.d.ts +68 -10
- package/lib/history.d.ts.map +1 -1
- package/lib/history.js +15 -15
- package/lib/history.js.map +1 -1
- package/lib/lit-html.d.ts +7 -109
- package/lib/lit-html.d.ts.map +1 -1
- package/lib/lit-html.js +75 -32
- package/lib/lit-html.js.map +1 -1
- package/lib/reactive.d.ts +130 -0
- package/lib/reactive.d.ts.map +1 -0
- package/lib/reactive.js +474 -0
- package/lib/reactive.js.map +1 -0
- package/lib/repeat.d.ts +3 -3
- package/lib/repeat.d.ts.map +1 -1
- package/lib/repeat.js +3 -3
- package/lib/repeat.js.map +1 -1
- package/lib/store.d.ts +15 -4
- package/lib/store.d.ts.map +1 -1
- package/lib/store.js +2 -0
- package/lib/store.js.map +1 -1
- package/lib/utils.d.ts +26 -11
- package/lib/utils.d.ts.map +1 -1
- package/lib/utils.js +21 -14
- package/lib/utils.js.map +1 -1
- package/package.json +3 -3
- package/src/dist.ts +6 -8
- package/src/elements/base/dialog.ts +2 -2
- package/src/elements/base/gesture.ts +6 -6
- package/src/elements/base/link.ts +18 -24
- package/src/elements/base/modal-factory.ts +4 -3
- package/src/elements/base/reflect.ts +2 -3
- package/src/elements/base/route.ts +21 -28
- package/src/elements/base/title.ts +6 -8
- package/src/elements/base/unsafe.ts +33 -14
- package/src/elements/base/use.ts +1 -1
- package/src/elements/link.ts +1 -1
- package/src/elements/route.ts +1 -1
- package/src/helper/hmr.ts +305 -0
- package/src/helper/i18n.ts +7 -7
- package/src/helper/logger.ts +9 -5
- package/src/helper/mediaquery.ts +1 -1
- package/src/helper/react-utils.ts +4 -12
- package/src/helper/ssr-shim.ts +3 -1
- package/src/helper/theme.ts +29 -14
- package/src/index.ts +1 -4
- package/src/lib/decorators.ts +107 -117
- package/src/lib/directive.ts +3 -5
- package/src/lib/element.ts +21 -600
- package/src/lib/history.ts +16 -18
- package/src/lib/lit-html.ts +89 -34
- package/src/lib/reactive.ts +620 -0
- package/src/lib/repeat.ts +5 -5
- package/src/lib/store.ts +4 -2
- package/src/lib/utils.ts +41 -29
- package/src/test/elements/link.test.ts +2 -2
- package/src/test/elements/reflect.test.ts +3 -3
- package/src/test/elements/title.test.ts +2 -2
- package/src/test/gem-element/advance.test.ts +11 -10
- package/src/test/gem-element/basic.test.ts +4 -5
- package/src/test/gem-element/decorators.test.ts +10 -10
- package/src/test/gem-element/multi.test.ts +2 -2
- package/src/test/history.test.ts +1 -2
- package/src/test/store.test.ts +2 -3
- package/src/test/utils.test.ts +5 -6
- package/src/test/utils.ts +2 -2
- package/helper/react-shim.d.ts +0 -15
- package/helper/react-shim.d.ts.map +0 -1
- package/helper/react-shim.js +0 -56
- package/helper/react-shim.js.map +0 -1
- package/lib/directives.d.ts +0 -4
- package/lib/directives.d.ts.map +0 -1
- package/lib/directives.js +0 -5
- package/lib/directives.js.map +0 -1
- package/lib/ref.d.ts +0 -1
- package/lib/ref.d.ts.map +0 -1
- package/lib/ref.js +0 -2
- package/lib/ref.js.map +0 -1
package/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC"}
|
package/index.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
export * from './lib/decorators';
|
|
2
1
|
export * from './lib/element';
|
|
2
|
+
export * from './lib/history';
|
|
3
3
|
export * from './lib/store';
|
|
4
4
|
export * from './lib/utils';
|
|
5
5
|
export * from './lib/version';
|
|
6
|
-
// 使用路径时可选模块
|
|
7
|
-
export * from './lib/history';
|
|
8
6
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC"}
|
package/lib/decorators.d.ts
CHANGED
|
@@ -1,18 +1,15 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import {
|
|
1
|
+
import type { TemplateResult } from './lit-html';
|
|
2
|
+
import type { Metadata, Sheet } from './reactive';
|
|
3
|
+
import { GemElement } from './reactive';
|
|
3
4
|
import type { Store } from './store';
|
|
4
|
-
import * as elementExports from './element';
|
|
5
|
-
import * as decoratorsExports from './decorators';
|
|
6
|
-
import * as storeExports from './store';
|
|
7
|
-
import * as versionExports from './version';
|
|
8
5
|
/**
|
|
9
6
|
* 定义一个响应式的 attribute,驼峰字段名将自动映射到烤串 attribute,默认值为空字符串;不要覆盖定义
|
|
10
7
|
*
|
|
11
|
-
*
|
|
8
|
+
* @example
|
|
12
9
|
* ```ts
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
10
|
+
* class App extends GemElement {
|
|
11
|
+
* @attribute attr: string;
|
|
12
|
+
* }
|
|
16
13
|
* ```
|
|
17
14
|
*/
|
|
18
15
|
export declare function attribute<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, string>): (this: any, initValue: any) => any;
|
|
@@ -21,25 +18,25 @@ export declare function numattribute<T extends GemElement>(_: undefined, context
|
|
|
21
18
|
/**
|
|
22
19
|
* 定义一个响应式的 property,注意值可能为 `undefined`;不要覆盖定义
|
|
23
20
|
*
|
|
24
|
-
*
|
|
21
|
+
* @example
|
|
25
22
|
* ```ts
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
23
|
+
* class App extends GemElement {
|
|
24
|
+
* @property prop: Data | undefined;
|
|
25
|
+
* }
|
|
29
26
|
* ```
|
|
30
27
|
*/
|
|
31
28
|
export declare function property<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T>): (this: any, initValue: any) => any;
|
|
32
29
|
/**
|
|
33
30
|
* 依赖 `GemElement.memo`
|
|
34
31
|
*
|
|
35
|
-
*
|
|
32
|
+
* @example
|
|
36
33
|
* ```ts
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
34
|
+
* class App extends GemElement {
|
|
35
|
+
* @memo(() => [])
|
|
36
|
+
* get data() {
|
|
37
|
+
* return 1;
|
|
38
|
+
* }
|
|
39
|
+
* }
|
|
43
40
|
* ```
|
|
44
41
|
*/
|
|
45
42
|
export declare function memo<T extends GemElement, V = any, K = any[] | undefined>(getDep?: K extends readonly any[] ? (instance: T) => K : undefined): (_: any, context: ClassGetterDecoratorContext<T, V> | ClassFieldDecoratorContext<T> | ClassMethodDecoratorContext<T>) => void;
|
|
@@ -48,14 +45,14 @@ export declare function memo<T extends GemElement, V = any, K = any[] | undefine
|
|
|
48
45
|
* - 方法执行在字段前面
|
|
49
46
|
* - 如果没有 oldValue,在为首次执行
|
|
50
47
|
*
|
|
51
|
-
*
|
|
48
|
+
* @example
|
|
52
49
|
* ```ts
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
*
|
|
50
|
+
* class App extends GemElement {
|
|
51
|
+
* @effect(() => [])
|
|
52
|
+
* #fetchData(newValue, oldValue) {
|
|
53
|
+
* console.log('fetch')
|
|
54
|
+
* }
|
|
55
|
+
* }
|
|
59
56
|
* ```
|
|
60
57
|
*/
|
|
61
58
|
export declare function effect<T extends GemElement, V extends (depValues: K, oldDepValues?: K) => any, K = any[] | undefined>(getDep?: K extends readonly any[] ? (instance: T) => K : undefined): (_: any, { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>) => void;
|
|
@@ -74,48 +71,48 @@ export declare function fallback<T extends GemElement, V extends (err: any) => T
|
|
|
74
71
|
* 重新赋值转换 css 伪类
|
|
75
72
|
* 将来也可能用于 IDE 识别
|
|
76
73
|
*
|
|
77
|
-
*
|
|
74
|
+
* @example
|
|
78
75
|
* ```ts
|
|
79
|
-
*
|
|
80
|
-
*
|
|
81
|
-
*
|
|
76
|
+
* class App extends GemElement {
|
|
77
|
+
* @state state: boolean;
|
|
78
|
+
* }
|
|
82
79
|
* ```
|
|
83
80
|
*/
|
|
84
81
|
export declare function state<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, boolean>): void;
|
|
85
82
|
/**
|
|
86
83
|
* 定义一个内部 slot,默认值即为字段名,不能使用全局属性 `slot`
|
|
87
84
|
*
|
|
88
|
-
*
|
|
85
|
+
* @example
|
|
89
86
|
* ```ts
|
|
90
|
-
*
|
|
91
|
-
*
|
|
92
|
-
*
|
|
93
|
-
*
|
|
87
|
+
* class App extends GemElement {
|
|
88
|
+
* @slot slot: string;
|
|
89
|
+
* @slot static slot: string;
|
|
90
|
+
* }
|
|
94
91
|
* ```
|
|
95
92
|
*/
|
|
96
93
|
export declare function slot(_: undefined, context: ClassFieldDecoratorContext<any, string>): (this: any, value: string) => string;
|
|
97
94
|
/**
|
|
98
95
|
* 定义一个内部 part,默认值即为字段名,不能使用全局属性 `part`
|
|
99
96
|
*
|
|
100
|
-
*
|
|
97
|
+
* @example
|
|
101
98
|
* ```ts
|
|
102
|
-
*
|
|
103
|
-
*
|
|
104
|
-
*
|
|
105
|
-
*
|
|
99
|
+
* class App extends GemElement {
|
|
100
|
+
* @part part: string;
|
|
101
|
+
* @part static part: string;
|
|
102
|
+
* }
|
|
106
103
|
* ```
|
|
107
104
|
*/
|
|
108
105
|
export declare function part(_: undefined, context: ClassFieldDecoratorContext<any, string>): (this: any, value: string) => string;
|
|
109
|
-
export type Emitter<T = any> = (detail?: T, options?: Omit<CustomEventInit<unknown>, 'detail'>) => Promise<void> | void;
|
|
106
|
+
export type Emitter<T = any> = ((detail?: T, options?: Omit<CustomEventInit<unknown>, 'detail'>) => Promise<void> | void) & {};
|
|
110
107
|
/**
|
|
111
108
|
* 定义一个事件发射器,类似 `HTMLElement.click`,
|
|
112
109
|
* 调用时将同步发送一个和字段名称的烤串式格式的自定义事件
|
|
113
110
|
*
|
|
114
|
-
*
|
|
111
|
+
* @example
|
|
115
112
|
* ```ts
|
|
116
|
-
*
|
|
117
|
-
*
|
|
118
|
-
*
|
|
113
|
+
* class App extends GemElement {
|
|
114
|
+
* @emitter load: Function;
|
|
115
|
+
* }
|
|
119
116
|
* ```
|
|
120
117
|
*/
|
|
121
118
|
export declare function emitter<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, Emitter>): void;
|
|
@@ -123,20 +120,20 @@ export declare function globalemitter<T extends GemElement>(_: undefined, contex
|
|
|
123
120
|
/**
|
|
124
121
|
* 分配一个构造的样式表,前面的优先级越高(因为装饰器是越近越早执行)
|
|
125
122
|
*
|
|
126
|
-
*
|
|
123
|
+
* @example
|
|
127
124
|
* ```ts
|
|
128
|
-
*
|
|
129
|
-
*
|
|
125
|
+
* @adoptedStyle(stylesheet)
|
|
126
|
+
* class App extends GemElement {}
|
|
130
127
|
* ```
|
|
131
128
|
*/
|
|
132
|
-
export declare function adoptedStyle(sheet:
|
|
129
|
+
export declare function adoptedStyle(sheet: Sheet<unknown>): (_: unknown, context: ClassDecoratorContext) => void;
|
|
133
130
|
/**
|
|
134
131
|
* 链接一个 store,当 store 更新时更新元素
|
|
135
132
|
*
|
|
136
|
-
*
|
|
133
|
+
* @example
|
|
137
134
|
* ```ts
|
|
138
|
-
*
|
|
139
|
-
*
|
|
135
|
+
* @connectStore(store)
|
|
136
|
+
* class App extends GemElement {}
|
|
140
137
|
* ```
|
|
141
138
|
*/
|
|
142
139
|
export declare function connectStore(store: Store<any>): (_: unknown, context: ClassDecoratorContext) => void;
|
|
@@ -154,16 +151,11 @@ export declare function aria(info: Metadata['aria']): (_: any, context: ClassDec
|
|
|
154
151
|
/**
|
|
155
152
|
* 定义自定义元素
|
|
156
153
|
*
|
|
157
|
-
*
|
|
154
|
+
* @example
|
|
158
155
|
* ```ts
|
|
159
|
-
*
|
|
160
|
-
*
|
|
156
|
+
* @customElement('my-element')
|
|
157
|
+
* class App extends GemElement {}
|
|
161
158
|
* ```
|
|
162
159
|
*/
|
|
163
160
|
export declare function customElement(name: string): (cls: new (...args: any) => any, { addInitializer }: ClassDecoratorContext) => void;
|
|
164
|
-
declare global {
|
|
165
|
-
interface Window {
|
|
166
|
-
__GEM_DEVTOOLS__HOOK__?: (typeof elementExports & typeof decoratorsExports & typeof storeExports & typeof versionExports) | Record<string, never>;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
161
|
//# sourceMappingURL=decorators.d.ts.map
|
package/lib/decorators.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../src/lib/decorators.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../src/lib/decorators.ts"],"names":[],"mappings":"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"}
|
package/lib/decorators.js
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import * as decoratorsExports from './decorators';
|
|
5
|
-
import * as storeExports from './store';
|
|
6
|
-
import * as versionExports from './version';
|
|
1
|
+
// biome-ignore-all lint/plugin/no_this_effect: 定义装饰器
|
|
2
|
+
import { _createTemplate, _RenderErrorEvent, GemElement, render, UpdateToken } from './reactive';
|
|
3
|
+
import { camelToKebabCase, GemError, PropProxyMap } from './utils';
|
|
7
4
|
const { deleteProperty, getOwnPropertyDescriptor, defineProperty } = Reflect;
|
|
8
|
-
const { getPrototypeOf, assign } = Object;
|
|
5
|
+
const { getPrototypeOf, assign, hasOwn } = Object;
|
|
9
6
|
const gemElementProxyMap = new PropProxyMap();
|
|
10
7
|
function pushStaticField(context, field, member) {
|
|
11
8
|
const metadata = context.metadata;
|
|
@@ -18,7 +15,8 @@ function pushStaticField(context, field, member) {
|
|
|
18
15
|
metadata[field].push(member);
|
|
19
16
|
}
|
|
20
17
|
function clearField(instance, prop) {
|
|
21
|
-
|
|
18
|
+
// hmr 支持不存在属性
|
|
19
|
+
const { value } = getOwnPropertyDescriptor(instance, prop) || {};
|
|
22
20
|
deleteProperty(instance, prop);
|
|
23
21
|
instance[prop] = value;
|
|
24
22
|
}
|
|
@@ -27,20 +25,21 @@ const observedTargetAttributes = new WeakMap();
|
|
|
27
25
|
// 不在 Devtools 中工作 https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#dom_access
|
|
28
26
|
// 使用 Gem DevTools 注入脚本监听 attribute 变化
|
|
29
27
|
const { setAttribute, toggleAttribute, removeAttribute } = Element.prototype;
|
|
28
|
+
const getObservedPropName = (i, n) => observedTargetAttributes.get(getPrototypeOf(i))?.get(n);
|
|
30
29
|
GemElement.prototype.setAttribute = function (n, v) {
|
|
31
|
-
const prop =
|
|
30
|
+
const prop = getObservedPropName(this, n);
|
|
32
31
|
if (!prop)
|
|
33
32
|
return setAttribute.call(this, n, v);
|
|
34
33
|
this[prop] = v;
|
|
35
34
|
};
|
|
36
35
|
GemElement.prototype.removeAttribute = function (n) {
|
|
37
|
-
const prop =
|
|
36
|
+
const prop = getObservedPropName(this, n);
|
|
38
37
|
if (!prop)
|
|
39
38
|
return removeAttribute.call(this, n);
|
|
40
39
|
this[prop] = null;
|
|
41
40
|
};
|
|
42
41
|
GemElement.prototype.toggleAttribute = function (n, force) {
|
|
43
|
-
const prop =
|
|
42
|
+
const prop = getObservedPropName(this, n);
|
|
44
43
|
if (!prop)
|
|
45
44
|
return toggleAttribute.call(this, n, force);
|
|
46
45
|
return (this[prop] = force ?? !this.hasAttribute(n));
|
|
@@ -113,7 +112,7 @@ function decoratorAttr(context, attrType) {
|
|
|
113
112
|
const attr = camelToKebabCase(prop);
|
|
114
113
|
context.addInitializer(function () {
|
|
115
114
|
const target = getDecoratorTarget(this, context);
|
|
116
|
-
if (!target
|
|
115
|
+
if (!hasOwn(target, prop)) {
|
|
117
116
|
pushStaticField(context, 'observedAttributes', attr); // 没有 observe 的效果
|
|
118
117
|
defineProp(target, prop, { attr, attrType });
|
|
119
118
|
}
|
|
@@ -132,11 +131,11 @@ function decoratorAttr(context, attrType) {
|
|
|
132
131
|
/**
|
|
133
132
|
* 定义一个响应式的 attribute,驼峰字段名将自动映射到烤串 attribute,默认值为空字符串;不要覆盖定义
|
|
134
133
|
*
|
|
135
|
-
*
|
|
134
|
+
* @example
|
|
136
135
|
* ```ts
|
|
137
|
-
*
|
|
138
|
-
*
|
|
139
|
-
*
|
|
136
|
+
* class App extends GemElement {
|
|
137
|
+
* @attribute attr: string;
|
|
138
|
+
* }
|
|
140
139
|
* ```
|
|
141
140
|
*/
|
|
142
141
|
export function attribute(_, context) {
|
|
@@ -151,18 +150,18 @@ export function numattribute(_, context) {
|
|
|
151
150
|
/**
|
|
152
151
|
* 定义一个响应式的 property,注意值可能为 `undefined`;不要覆盖定义
|
|
153
152
|
*
|
|
154
|
-
*
|
|
153
|
+
* @example
|
|
155
154
|
* ```ts
|
|
156
|
-
*
|
|
157
|
-
*
|
|
158
|
-
*
|
|
155
|
+
* class App extends GemElement {
|
|
156
|
+
* @property prop: Data | undefined;
|
|
157
|
+
* }
|
|
159
158
|
* ```
|
|
160
159
|
*/
|
|
161
160
|
export function property(_, context) {
|
|
162
161
|
const prop = context.name;
|
|
163
162
|
context.addInitializer(function () {
|
|
164
163
|
const target = getDecoratorTarget(this, context);
|
|
165
|
-
if (!target
|
|
164
|
+
if (!hasOwn(target, prop)) {
|
|
166
165
|
pushStaticField(context, 'observedProperties', prop);
|
|
167
166
|
defineProp(target, prop);
|
|
168
167
|
}
|
|
@@ -176,18 +175,18 @@ export function property(_, context) {
|
|
|
176
175
|
/**
|
|
177
176
|
* 依赖 `GemElement.memo`
|
|
178
177
|
*
|
|
179
|
-
*
|
|
178
|
+
* @example
|
|
180
179
|
* ```ts
|
|
181
|
-
*
|
|
182
|
-
*
|
|
183
|
-
*
|
|
184
|
-
*
|
|
185
|
-
*
|
|
186
|
-
*
|
|
180
|
+
* class App extends GemElement {
|
|
181
|
+
* @memo(() => [])
|
|
182
|
+
* get data() {
|
|
183
|
+
* return 1;
|
|
184
|
+
* }
|
|
185
|
+
* }
|
|
187
186
|
* ```
|
|
188
187
|
*/
|
|
189
188
|
export function memo(getDep) {
|
|
190
|
-
return
|
|
189
|
+
return (_, context) => {
|
|
191
190
|
const { addInitializer, name, access, kind } = context;
|
|
192
191
|
addInitializer(function () {
|
|
193
192
|
const dep = getDep && (() => getDep(this));
|
|
@@ -195,10 +194,18 @@ export function memo(getDep) {
|
|
|
195
194
|
// 不能设置私有字段 https://github.com/tc39/proposal-decorators/issues/509
|
|
196
195
|
if (context.private)
|
|
197
196
|
throw new GemError('not support');
|
|
198
|
-
|
|
197
|
+
const target = getDecoratorTarget(this, context);
|
|
198
|
+
// 不能直接用 `access.get.bind(this)` 是现有 builder 工具的 bug?
|
|
199
|
+
const getter = getOwnPropertyDescriptor(target, name).get.bind(this);
|
|
200
|
+
this.memo(() => {
|
|
201
|
+
defineProperty(this, name, {
|
|
202
|
+
configurable: true,
|
|
203
|
+
value: getter(),
|
|
204
|
+
});
|
|
205
|
+
}, dep);
|
|
199
206
|
}
|
|
200
207
|
else {
|
|
201
|
-
this.memo(access.get(this).bind(this), dep);
|
|
208
|
+
this.memo(access.get.call(this, this).bind(this), dep);
|
|
202
209
|
}
|
|
203
210
|
});
|
|
204
211
|
};
|
|
@@ -208,27 +215,27 @@ export function memo(getDep) {
|
|
|
208
215
|
* - 方法执行在字段前面
|
|
209
216
|
* - 如果没有 oldValue,在为首次执行
|
|
210
217
|
*
|
|
211
|
-
*
|
|
218
|
+
* @example
|
|
212
219
|
* ```ts
|
|
213
|
-
*
|
|
214
|
-
*
|
|
215
|
-
*
|
|
216
|
-
*
|
|
217
|
-
*
|
|
218
|
-
*
|
|
220
|
+
* class App extends GemElement {
|
|
221
|
+
* @effect(() => [])
|
|
222
|
+
* #fetchData(newValue, oldValue) {
|
|
223
|
+
* console.log('fetch')
|
|
224
|
+
* }
|
|
225
|
+
* }
|
|
219
226
|
* ```
|
|
220
227
|
*/
|
|
221
228
|
export function effect(getDep) {
|
|
222
|
-
return
|
|
229
|
+
return (_, { addInitializer, access }) => {
|
|
223
230
|
addInitializer(function () {
|
|
224
|
-
this.effect(access.get(this).bind(this), getDep && (() => getDep(this)));
|
|
231
|
+
this.effect(access.get.call(this, this).bind(this), getDep && (() => getDep(this)));
|
|
225
232
|
});
|
|
226
233
|
};
|
|
227
234
|
}
|
|
228
235
|
export function unmounted() {
|
|
229
|
-
return
|
|
236
|
+
return (_, { addInitializer, access }) => {
|
|
230
237
|
addInitializer(function () {
|
|
231
|
-
this.effect(() => access.get(this).bind(this), () => []);
|
|
238
|
+
this.effect(() => access.get.call(this, this).bind(this), () => []);
|
|
232
239
|
});
|
|
233
240
|
};
|
|
234
241
|
}
|
|
@@ -243,20 +250,20 @@ export function mounted() {
|
|
|
243
250
|
export function template(
|
|
244
251
|
/** 当所有 `template` 返回 `false` 时不进行更新,包括 `memo` */
|
|
245
252
|
condition) {
|
|
246
|
-
return
|
|
253
|
+
return (_, { addInitializer, access }) => {
|
|
247
254
|
addInitializer(function () {
|
|
248
255
|
_createTemplate(this, {
|
|
249
|
-
render: access.get(this).bind(this),
|
|
256
|
+
render: access.get.call(this, this).bind(this),
|
|
250
257
|
condition: condition && (() => condition(this)),
|
|
251
258
|
});
|
|
252
259
|
});
|
|
253
260
|
};
|
|
254
261
|
}
|
|
255
262
|
export function fallback() {
|
|
256
|
-
return
|
|
263
|
+
return (_, { addInitializer, access }) => {
|
|
257
264
|
addInitializer(function () {
|
|
258
265
|
this.addEventListener(_RenderErrorEvent, ({ detail }) => {
|
|
259
|
-
render(access.get(this).apply(this, [detail]), this.internals.shadowRoot || this);
|
|
266
|
+
render(access.get.call(this, this).apply(this, [detail]), this.internals.shadowRoot || this);
|
|
260
267
|
});
|
|
261
268
|
});
|
|
262
269
|
};
|
|
@@ -287,11 +294,11 @@ function defineCSSState(target, prop, stateStr) {
|
|
|
287
294
|
* 重新赋值转换 css 伪类
|
|
288
295
|
* 将来也可能用于 IDE 识别
|
|
289
296
|
*
|
|
290
|
-
*
|
|
297
|
+
* @example
|
|
291
298
|
* ```ts
|
|
292
|
-
*
|
|
293
|
-
*
|
|
294
|
-
*
|
|
299
|
+
* class App extends GemElement {
|
|
300
|
+
* @state state: boolean;
|
|
301
|
+
* }
|
|
295
302
|
* ```
|
|
296
303
|
*/
|
|
297
304
|
export function state(_, context) {
|
|
@@ -299,7 +306,7 @@ export function state(_, context) {
|
|
|
299
306
|
const attr = camelToKebabCase(prop);
|
|
300
307
|
context.addInitializer(function () {
|
|
301
308
|
const target = getDecoratorTarget(this, context);
|
|
302
|
-
if (!target
|
|
309
|
+
if (!hasOwn(target, prop)) {
|
|
303
310
|
pushStaticField(context, 'definedCSSStates', attr);
|
|
304
311
|
defineCSSState(target, prop, attr);
|
|
305
312
|
}
|
|
@@ -324,12 +331,12 @@ function defineStaticField(context, target, field, value) {
|
|
|
324
331
|
/**
|
|
325
332
|
* 定义一个内部 slot,默认值即为字段名,不能使用全局属性 `slot`
|
|
326
333
|
*
|
|
327
|
-
*
|
|
334
|
+
* @example
|
|
328
335
|
* ```ts
|
|
329
|
-
*
|
|
330
|
-
*
|
|
331
|
-
*
|
|
332
|
-
*
|
|
336
|
+
* class App extends GemElement {
|
|
337
|
+
* @slot slot: string;
|
|
338
|
+
* @slot static slot: string;
|
|
339
|
+
* }
|
|
333
340
|
* ```
|
|
334
341
|
*/
|
|
335
342
|
export function slot(_, context) {
|
|
@@ -340,12 +347,12 @@ export function slot(_, context) {
|
|
|
340
347
|
/**
|
|
341
348
|
* 定义一个内部 part,默认值即为字段名,不能使用全局属性 `part`
|
|
342
349
|
*
|
|
343
|
-
*
|
|
350
|
+
* @example
|
|
344
351
|
* ```ts
|
|
345
|
-
*
|
|
346
|
-
*
|
|
347
|
-
*
|
|
348
|
-
*
|
|
352
|
+
* class App extends GemElement {
|
|
353
|
+
* @part part: string;
|
|
354
|
+
* @part static part: string;
|
|
355
|
+
* }
|
|
349
356
|
* ```
|
|
350
357
|
*/
|
|
351
358
|
export function part(_, context) {
|
|
@@ -357,11 +364,11 @@ export function part(_, context) {
|
|
|
357
364
|
* 定义一个事件发射器,类似 `HTMLElement.click`,
|
|
358
365
|
* 调用时将同步发送一个和字段名称的烤串式格式的自定义事件
|
|
359
366
|
*
|
|
360
|
-
*
|
|
367
|
+
* @example
|
|
361
368
|
* ```ts
|
|
362
|
-
*
|
|
363
|
-
*
|
|
364
|
-
*
|
|
369
|
+
* class App extends GemElement {
|
|
370
|
+
* @emitter load: Function;
|
|
371
|
+
* }
|
|
365
372
|
* ```
|
|
366
373
|
*/
|
|
367
374
|
export function emitter(_, context) {
|
|
@@ -375,7 +382,7 @@ function defineEmitter(context, eventOptions) {
|
|
|
375
382
|
const event = camelToKebabCase(prop);
|
|
376
383
|
context.addInitializer(function () {
|
|
377
384
|
const target = getDecoratorTarget(this, context);
|
|
378
|
-
if (!target
|
|
385
|
+
if (!hasOwn(target, prop)) {
|
|
379
386
|
pushStaticField(context, 'definedEvents', event);
|
|
380
387
|
defineProp(target, prop, { event, eventOptions });
|
|
381
388
|
}
|
|
@@ -385,39 +392,39 @@ function defineEmitter(context, eventOptions) {
|
|
|
385
392
|
/**
|
|
386
393
|
* 分配一个构造的样式表,前面的优先级越高(因为装饰器是越近越早执行)
|
|
387
394
|
*
|
|
388
|
-
*
|
|
395
|
+
* @example
|
|
389
396
|
* ```ts
|
|
390
|
-
*
|
|
391
|
-
*
|
|
397
|
+
* @adoptedStyle(stylesheet)
|
|
398
|
+
* class App extends GemElement {}
|
|
392
399
|
* ```
|
|
393
400
|
*/
|
|
394
401
|
export function adoptedStyle(sheet) {
|
|
395
|
-
return
|
|
402
|
+
return (_, context) => {
|
|
396
403
|
pushStaticField(context, 'adoptedStyleSheets', sheet);
|
|
397
404
|
};
|
|
398
405
|
}
|
|
399
406
|
/**
|
|
400
407
|
* 链接一个 store,当 store 更新时更新元素
|
|
401
408
|
*
|
|
402
|
-
*
|
|
409
|
+
* @example
|
|
403
410
|
* ```ts
|
|
404
|
-
*
|
|
405
|
-
*
|
|
411
|
+
* @connectStore(store)
|
|
412
|
+
* class App extends GemElement {}
|
|
406
413
|
* ```
|
|
407
414
|
*/
|
|
408
415
|
export function connectStore(store) {
|
|
409
|
-
return
|
|
416
|
+
return (_, context) => {
|
|
410
417
|
pushStaticField(context, 'observedStores', store);
|
|
411
418
|
};
|
|
412
419
|
}
|
|
413
420
|
export function shadow({ mode = 'open', serializable = true, delegatesFocus, slotAssignment, } = {}) {
|
|
414
|
-
return
|
|
421
|
+
return (_, context) => {
|
|
415
422
|
const metadata = context.metadata;
|
|
416
423
|
assign(metadata, { mode, serializable, delegatesFocus, slotAssignment });
|
|
417
424
|
};
|
|
418
425
|
}
|
|
419
426
|
export function light({ penetrable }) {
|
|
420
|
-
return
|
|
427
|
+
return (_, context) => {
|
|
421
428
|
const metadata = context.metadata;
|
|
422
429
|
metadata.penetrable = penetrable;
|
|
423
430
|
};
|
|
@@ -427,7 +434,7 @@ export function light({ penetrable }) {
|
|
|
427
434
|
* 例如:https://examples.gemjs.org/async
|
|
428
435
|
*/
|
|
429
436
|
export function async() {
|
|
430
|
-
return
|
|
437
|
+
return (_, context) => {
|
|
431
438
|
const metadata = context.metadata;
|
|
432
439
|
metadata.noBlocking = true;
|
|
433
440
|
};
|
|
@@ -436,7 +443,7 @@ export function async() {
|
|
|
436
443
|
* 定义元素的可访问性属性
|
|
437
444
|
*/
|
|
438
445
|
export function aria(info) {
|
|
439
|
-
return
|
|
446
|
+
return (_, context) => {
|
|
440
447
|
const metadata = context.metadata;
|
|
441
448
|
metadata.aria = { ...metadata.aria, ...info };
|
|
442
449
|
};
|
|
@@ -444,25 +451,17 @@ export function aria(info) {
|
|
|
444
451
|
/**
|
|
445
452
|
* 定义自定义元素
|
|
446
453
|
*
|
|
447
|
-
*
|
|
454
|
+
* @example
|
|
448
455
|
* ```ts
|
|
449
|
-
*
|
|
450
|
-
*
|
|
456
|
+
* @customElement('my-element')
|
|
457
|
+
* class App extends GemElement {}
|
|
451
458
|
* ```
|
|
452
459
|
*/
|
|
453
460
|
export function customElement(name) {
|
|
454
|
-
return
|
|
455
|
-
addInitializer(
|
|
461
|
+
return (cls, { addInitializer }) => {
|
|
462
|
+
addInitializer(() => {
|
|
456
463
|
customElements.define(name, cls);
|
|
457
464
|
});
|
|
458
465
|
};
|
|
459
466
|
}
|
|
460
|
-
if (window.__GEM_DEVTOOLS__HOOK__ && !window.__GEM_DEVTOOLS__HOOK__.GemElement) {
|
|
461
|
-
assign(window.__GEM_DEVTOOLS__HOOK__, {
|
|
462
|
-
...elementExports,
|
|
463
|
-
...decoratorsExports,
|
|
464
|
-
...storeExports,
|
|
465
|
-
...versionExports,
|
|
466
|
-
});
|
|
467
|
-
}
|
|
468
467
|
//# sourceMappingURL=decorators.js.map
|