@@ -40,7 +40,7 configureTsMain { | |||||
40 | "dojo/*" : [ "typings/dojo/*" ], |
|
40 | "dojo/*" : [ "typings/dojo/*" ], | |
41 | "dijit/*" : [ "typings/dijit/*" ] |
|
41 | "dijit/*" : [ "typings/dijit/*" ] | |
42 | ]*/ |
|
42 | ]*/ | |
43 | types = ["requirejs", "dojo-typings"] |
|
43 | types = ["requirejs", "@implab/dojo-typings"] | |
44 | } |
|
44 | } | |
45 | } |
|
45 | } | |
46 |
|
46 |
@@ -10,12 +10,12 | |||||
10 | "license": "BSD-2-Clause", |
|
10 | "license": "BSD-2-Clause", | |
11 | "devDependencies": { |
|
11 | "devDependencies": { | |
12 | "@implab/core-amd": "^1.4.0", |
|
12 | "@implab/core-amd": "^1.4.0", | |
|
13 | "@implab/dojo-typings": "/home/sergey/projects/implabjs-dojo-typings/dojo-typings/build/npm/package/implab-dojo-typings-v1.0.0-rc4.tgz", | |||
13 | "@types/chai": "4.1.3", |
|
14 | "@types/chai": "4.1.3", | |
14 | "@types/requirejs": "2.1.31", |
|
15 | "@types/requirejs": "2.1.31", | |
15 | "@types/yaml": "1.2.0", |
|
16 | "@types/yaml": "1.2.0", | |
16 | "chai": "4.2.0", |
|
17 | "chai": "4.2.0", | |
17 | "dojo": "1.16.0", |
|
18 | "dojo": "1.16.0", | |
18 | "dojo-typings": "~1.11.9", |
|
|||
19 | "eslint": "6.8.0", |
|
19 | "eslint": "6.8.0", | |
20 | "requirejs": "2.3.6", |
|
20 | "requirejs": "2.3.6", | |
21 | "tslint": "^6.1.3", |
|
21 | "tslint": "^6.1.3", | |
@@ -62,6 +62,13 | |||||
62 | "integrity": "sha512-gaJX1mhri7YpmXDTAYELZnmTznzXYpk2AI7Decsttdi6xY+bqGgH24q0AFcKrx8RY2jfsFXxDdf0fITz2HpBbw==", |
|
62 | "integrity": "sha512-gaJX1mhri7YpmXDTAYELZnmTznzXYpk2AI7Decsttdi6xY+bqGgH24q0AFcKrx8RY2jfsFXxDdf0fITz2HpBbw==", | |
63 | "dev": true |
|
63 | "dev": true | |
64 | }, |
|
64 | }, | |
|
65 | "node_modules/@implab/dojo-typings": { | |||
|
66 | "version": "v1.0.0-rc4", | |||
|
67 | "resolved": "file:../../implabjs-dojo-typings/dojo-typings/build/npm/package/implab-dojo-typings-v1.0.0-rc4.tgz", | |||
|
68 | "integrity": "sha512-whWA/3shw3j4WFdmh5ml9BYZMj4KFruv1YXtz29W0LXMNpmj5nyyM8FJYYCdtvWJEGvnEUcUCQ0zsZ+Gh5ah9Q==", | |||
|
69 | "dev": true, | |||
|
70 | "license": "MIT" | |||
|
71 | }, | |||
65 | "node_modules/@types/chai": { |
|
72 | "node_modules/@types/chai": { | |
66 | "version": "4.1.3", |
|
73 | "version": "4.1.3", | |
67 | "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.1.3.tgz", |
|
74 | "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.1.3.tgz", | |
@@ -374,15 +381,6 | |||||
374 | "integrity": "sha512-DUiXyoLK6vMF5BPr/qiMLTxDMfiM9qlzN1jxfDsVfuvB/CwhYpNxA/M4mbqKN8PCVGLmccXBJbfmFJPP5+zmzw==", |
|
381 | "integrity": "sha512-DUiXyoLK6vMF5BPr/qiMLTxDMfiM9qlzN1jxfDsVfuvB/CwhYpNxA/M4mbqKN8PCVGLmccXBJbfmFJPP5+zmzw==", | |
375 | "dev": true |
|
382 | "dev": true | |
376 | }, |
|
383 | }, | |
377 | "node_modules/dojo-typings": { |
|
|||
378 | "version": "1.11.9", |
|
|||
379 | "resolved": "https://registry.npmjs.org/dojo-typings/-/dojo-typings-1.11.9.tgz", |
|
|||
380 | "integrity": "sha512-mh8w+Mau2Y1QfTEszEAdO7j6ycNhYxF/Ing6nAk1eUg6NxjeT0viVHjICMd9sU3U463vM2G+KfBBK5grk3/Mlw==", |
|
|||
381 | "dev": true, |
|
|||
382 | "dependencies": { |
|
|||
383 | "@types/chai": "^4.0.4" |
|
|||
384 | } |
|
|||
385 | }, |
|
|||
386 | "node_modules/emoji-regex": { |
|
384 | "node_modules/emoji-regex": { | |
387 | "version": "8.0.0", |
|
385 | "version": "8.0.0", | |
388 | "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", |
|
386 | "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", | |
@@ -1561,6 +1559,11 | |||||
1561 | "integrity": "sha512-gaJX1mhri7YpmXDTAYELZnmTznzXYpk2AI7Decsttdi6xY+bqGgH24q0AFcKrx8RY2jfsFXxDdf0fITz2HpBbw==", |
|
1559 | "integrity": "sha512-gaJX1mhri7YpmXDTAYELZnmTznzXYpk2AI7Decsttdi6xY+bqGgH24q0AFcKrx8RY2jfsFXxDdf0fITz2HpBbw==", | |
1562 | "dev": true |
|
1560 | "dev": true | |
1563 | }, |
|
1561 | }, | |
|
1562 | "@implab/dojo-typings": { | |||
|
1563 | "version": "file:/home/sergey/projects/implabjs-dojo-typings/dojo-typings/build/npm/package/implab-dojo-typings-v1.0.0-rc4.tgz", | |||
|
1564 | "integrity": "sha512-whWA/3shw3j4WFdmh5ml9BYZMj4KFruv1YXtz29W0LXMNpmj5nyyM8FJYYCdtvWJEGvnEUcUCQ0zsZ+Gh5ah9Q==", | |||
|
1565 | "dev": true | |||
|
1566 | }, | |||
1564 | "@types/chai": { |
|
1567 | "@types/chai": { | |
1565 | "version": "4.1.3", |
|
1568 | "version": "4.1.3", | |
1566 | "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.1.3.tgz", |
|
1569 | "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.1.3.tgz", | |
@@ -1821,15 +1824,6 | |||||
1821 | "integrity": "sha512-DUiXyoLK6vMF5BPr/qiMLTxDMfiM9qlzN1jxfDsVfuvB/CwhYpNxA/M4mbqKN8PCVGLmccXBJbfmFJPP5+zmzw==", |
|
1824 | "integrity": "sha512-DUiXyoLK6vMF5BPr/qiMLTxDMfiM9qlzN1jxfDsVfuvB/CwhYpNxA/M4mbqKN8PCVGLmccXBJbfmFJPP5+zmzw==", | |
1822 | "dev": true |
|
1825 | "dev": true | |
1823 | }, |
|
1826 | }, | |
1824 | "dojo-typings": { |
|
|||
1825 | "version": "1.11.9", |
|
|||
1826 | "resolved": "https://registry.npmjs.org/dojo-typings/-/dojo-typings-1.11.9.tgz", |
|
|||
1827 | "integrity": "sha512-mh8w+Mau2Y1QfTEszEAdO7j6ycNhYxF/Ing6nAk1eUg6NxjeT0viVHjICMd9sU3U463vM2G+KfBBK5grk3/Mlw==", |
|
|||
1828 | "dev": true, |
|
|||
1829 | "requires": { |
|
|||
1830 | "@types/chai": "^4.0.4" |
|
|||
1831 | } |
|
|||
1832 | }, |
|
|||
1833 | "emoji-regex": { |
|
1827 | "emoji-regex": { | |
1834 | "version": "8.0.0", |
|
1828 | "version": "8.0.0", | |
1835 | "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", |
|
1829 | "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", |
@@ -25,7 +25,7 | |||||
25 | "@types/yaml": "1.2.0", |
|
25 | "@types/yaml": "1.2.0", | |
26 | "chai": "4.2.0", |
|
26 | "chai": "4.2.0", | |
27 | "dojo": "1.16.0", |
|
27 | "dojo": "1.16.0", | |
28 | "dojo-typings": "~1.11.9", |
|
28 | "@implab/dojo-typings": "/home/sergey/projects/implabjs-dojo-typings/dojo-typings/build/npm/package/implab-dojo-typings-v1.0.0-rc4.tgz", | |
29 | "eslint": "6.8.0", |
|
29 | "eslint": "6.8.0", | |
30 | "requirejs": "2.3.6", |
|
30 | "requirejs": "2.3.6", | |
31 | "tslint": "^6.1.3", |
|
31 | "tslint": "^6.1.3", |
@@ -124,7 +124,7 export function djclass<T extends Abstra | |||||
124 | // t - базовый класс, объявленный при помощи dojo/_base/declare |
|
124 | // t - базовый класс, объявленный при помощи dojo/_base/declare | |
125 | const t = bc.bases; |
|
125 | const t = bc.bases; | |
126 |
|
126 | |||
127 | const cls = declare(bc.bases, target.prototype); |
|
127 | const cls = declare<any>(bc.bases, target.prototype); | |
128 |
|
128 | |||
129 | // bc - базовый класс, bc.prototype используется как super |
|
129 | // bc - базовый класс, bc.prototype используется как super | |
130 | // при вызове базовых методов. Нужно создать bc.prototype |
|
130 | // при вызове базовых методов. Нужно создать bc.prototype |
@@ -1,4 +1,4 | |||||
1 | import { djbase, djclass } from "../declare"; |
|
1 | import { AbstractConstructor, djbase, djclass } from "../declare"; | |
2 | import _WidgetBase = require("dijit/_WidgetBase"); |
|
2 | import _WidgetBase = require("dijit/_WidgetBase"); | |
3 | import _AttachMixin = require("dijit/_AttachMixin"); |
|
3 | import _AttachMixin = require("dijit/_AttachMixin"); | |
4 | import { Rendition, isNode, startupWidgets } from "./traits"; |
|
4 | import { Rendition, isNode, startupWidgets } from "./traits"; | |
@@ -14,18 +14,16 export interface EventArgs { | |||||
14 | composed?: boolean; |
|
14 | composed?: boolean; | |
15 | } |
|
15 | } | |
16 |
|
16 | |||
17 |
export interface DjxWidgetBase<Attrs = |
|
17 | export interface DjxWidgetBase<Attrs = {}, Events extends { [name in keyof Events]: Event } = {}> extends | |
18 | set<K extends keyof Attrs & string>(key: K, value: Attrs[K]): this; |
|
18 | _WidgetBase<Events> { | |
19 | set(props: Partial<Attrs>): this; |
|
19 | } | |
20 | get<K extends keyof Attrs & string>(key: K): Attrs[K]; |
|
|||
21 |
|
20 | |||
22 | on<K extends keyof Events & string>(eventName: K, cb: (evt: Events[K]) => void): dojo.WatchHandle; |
|
21 | type _super = { | |
23 |
|
22 | startup(): void; | ||
24 | emit<K extends keyof Events & string>(eventName: K, evt: Omit<Events[K], keyof Event> & EventArgs): void; |
|
|||
25 | } |
|
23 | } | |
26 |
|
24 | |||
27 | @djclass |
|
25 | @djclass | |
28 |
export abstract class DjxWidgetBase<Attrs = |
|
26 | export abstract class DjxWidgetBase<Attrs = {}, Events = {}> extends djbase<_super, _AttachMixin>(_WidgetBase, _AttachMixin) { | |
29 |
|
27 | |||
30 | buildRendering() { |
|
28 | buildRendering() { | |
31 | this.domNode = this.render().getDomNode(); |
|
29 | this.domNode = this.render().getDomNode(); | |
@@ -46,7 +44,7 export abstract class DjxWidgetBase<Attr | |||||
46 |
|
44 | |||
47 | _processTemplateNode<T extends (Element | Node | _WidgetBase)>( |
|
45 | _processTemplateNode<T extends (Element | Node | _WidgetBase)>( | |
48 | baseNode: T, |
|
46 | baseNode: T, | |
49 |
getAttrFunc: (baseNode: T, attr: string) => |
|
47 | getAttrFunc: (baseNode: T, attr: string) => any, | |
50 | // tslint:disable-next-line: ban-types |
|
48 | // tslint:disable-next-line: ban-types | |
51 | attachFunc: (node: T, type: string, func?: Function) => dojo.Handle |
|
49 | attachFunc: (node: T, type: string, func?: Function) => dojo.Handle | |
52 | ): boolean { |
|
50 | ): boolean { | |
@@ -55,7 +53,7 export abstract class DjxWidgetBase<Attr | |||||
55 | if (w) { |
|
53 | if (w) { | |
56 | // from dijit/_WidgetsInTemplateMixin |
|
54 | // from dijit/_WidgetsInTemplateMixin | |
57 | this._processTemplateNode(w, |
|
55 | this._processTemplateNode(w, | |
58 | (n, p) => n.get(p), // callback to get a property of a widget |
|
56 | (n, p) => n.get(p as any), // callback to get a property of a widget | |
59 | (widget, type, callback) => { |
|
57 | (widget, type, callback) => { | |
60 | if (!callback) |
|
58 | if (!callback) | |
61 | throw new Error("The callback must be specified"); |
|
59 | throw new Error("The callback must be specified"); |
@@ -1,8 +1,10 | |||||
1 | import { IDestroyable } from "@implab/core-amd/interfaces"; |
|
1 | import { IDestroyable, IRemovable } from "@implab/core-amd/interfaces"; | |
2 | import { isDestroyable } from "@implab/core-amd/safe"; |
|
2 | import { isDestroyable } from "@implab/core-amd/safe"; | |
3 | import _WidgetBase = require("dijit/_WidgetBase"); |
|
3 | import _WidgetBase = require("dijit/_WidgetBase"); | |
4 | import registry = require("dijit/registry"); |
|
4 | import registry = require("dijit/registry"); | |
5 | import dom = require("dojo/dom-construct"); |
|
5 | import dom = require("dojo/dom-construct"); | |
|
6 | import Stateful = require("dojo/Stateful"); | |||
|
7 | import { FunctionRendition } from "./FunctionRendition"; | |||
6 |
|
8 | |||
7 | type _WidgetBaseConstructor = typeof _WidgetBase; |
|
9 | type _WidgetBaseConstructor = typeof _WidgetBase; | |
8 |
|
10 | |||
@@ -145,4 +147,58 export function startupWidgets(target: N | |||||
145 | if(target.startup) |
|
147 | if(target.startup) | |
146 | target.startup(); |
|
148 | target.startup(); | |
147 | } |
|
149 | } | |
148 | } No newline at end of file |
|
150 | } | |
|
151 | ||||
|
152 | ||||
|
153 | type StatefulProps<T> = T extends Stateful<infer A> ? A : never; | |||
|
154 | ||||
|
155 | type CleanFn = (instance: IRemovable | IDestroyable) => void; | |||
|
156 | ||||
|
157 | /** | |||
|
158 | * Observers the property and calls render callback each change. | |||
|
159 | * | |||
|
160 | * @param target The target object which property will be observed. | |||
|
161 | * @param prop The name of the property. | |||
|
162 | * @param render The callback which will be called every time the value is changed | |||
|
163 | * @param cleanupOrOwner The object with method `own` or an callback to register lifecycle for the observer. | |||
|
164 | * @returns Rendition which is created instantly | |||
|
165 | */ | |||
|
166 | export function watch<W extends _WidgetBase, K extends keyof W> ( | |||
|
167 | target: W, | |||
|
168 | prop: K, | |||
|
169 | render: (model: W[K]) => any, | |||
|
170 | cleanupOrOwner?: {own: CleanFn} | CleanFn | |||
|
171 | ): Rendition; | |||
|
172 | /** | |||
|
173 | * Observers the property and calls render callback each change. | |||
|
174 | * | |||
|
175 | * @param target The target object which property will be observed. | |||
|
176 | * @param prop The name of the property. | |||
|
177 | * @param render The callback which will be called every time the value is changed | |||
|
178 | * @param cleanupOrOwner The object with method `own` or an callback to register lifecycle for the observer. | |||
|
179 | * @returns Rendition which is created instantly | |||
|
180 | */ | |||
|
181 | export function watch<T extends Stateful, K extends keyof StatefulProps<T>>( | |||
|
182 | target: T, | |||
|
183 | prop: K, | |||
|
184 | render: (model: StatefulProps<T>[K]) => any, | |||
|
185 | cleanupOrOwner?: {own: CleanFn} | CleanFn | |||
|
186 | ): Rendition; | |||
|
187 | export function watch<T extends Stateful, K extends keyof StatefulProps<T> & string>( | |||
|
188 | target: T, | |||
|
189 | prop: K, | |||
|
190 | render: (model: StatefulProps<T>[K]) => any, | |||
|
191 | cleanupOrOwner: {own: CleanFn} | CleanFn = () => {} | |||
|
192 | ) { | |||
|
193 | let rendition = new FunctionRendition(() => render(target.get(prop))); | |||
|
194 | const _own = cleanupOrOwner instanceof Function ? cleanupOrOwner : (x: IRemovable) => cleanupOrOwner.own(x) | |||
|
195 | _own(target.watch(prop, (_name, oldValue, newValue) => { | |||
|
196 | if (oldValue !== newValue) { | |||
|
197 | const newRendition = new FunctionRendition(() => render(newValue)); | |||
|
198 | newRendition.placeAt(rendition.getDomNode(), "replace"); | |||
|
199 | destroy(rendition.getDomNode()); | |||
|
200 | rendition = newRendition; | |||
|
201 | } | |||
|
202 | })); | |||
|
203 | return rendition; | |||
|
204 | } |
@@ -7,7 +7,7 | |||||
7 | "typings" |
|
7 | "typings" | |
8 | ], |
|
8 | ], | |
9 | "types": [ |
|
9 | "types": [ | |
10 | "requirejs", "./typings", "dojo-typings" |
|
10 | "requirejs", "./typings", "@implab/dojo-typings" | |
11 | ] |
|
11 | ] | |
12 | } |
|
12 | } | |
13 | } |
|
13 | } |
@@ -1,14 +0,0 | |||||
1 | declare namespace dijit { |
|
|||
2 | interface _WidgetBase { |
|
|||
3 |
|
||||
4 | _started?: boolean; |
|
|||
5 |
|
||||
6 | _set<K extends keyof this>(key: K, value: this[K]): void; |
|
|||
7 | } |
|
|||
8 |
|
||||
9 | interface TooltipDialog { |
|
|||
10 |
|
||||
11 | content: any; |
|
|||
12 |
|
||||
13 | } |
|
|||
14 | } |
|
@@ -10,9 +10,13 interface MyWidgetAttrs { | |||||
10 | } |
|
10 | } | |
11 |
|
11 | |||
12 | interface MyWidgetEvents { |
|
12 | interface MyWidgetEvents { | |
13 |
"count-inc": Event |
|
13 | "count-inc": Event & { | |
|
14 | detail: number; | |||
|
15 | }; | |||
14 |
|
16 | |||
15 |
"count-dec": Event |
|
17 | "count-dec": Event & { | |
|
18 | detail: number; | |||
|
19 | }; | |||
16 | } |
|
20 | } | |
17 |
|
21 | |||
18 |
|
22 | |||
@@ -37,14 +41,15 export class MyWidget extends djbase(Djx | |||||
37 | } |
|
41 | } | |
38 |
|
42 | |||
39 | _onSubmit(e: Event) { |
|
43 | _onSubmit(e: Event) { | |
40 |
|
||||
41 | } |
|
44 | } | |
42 |
|
45 | |||
43 | _onIncClick(e: MouseEvent) { |
|
46 | _onIncClick(e: MouseEvent) { | |
|
47 | this.set("counter", this.counter+1); | |||
|
48 | ||||
44 | this.emit("count-inc", { bubbles: false }); |
|
49 | this.emit("count-inc", { bubbles: false }); | |
45 | } |
|
50 | } | |
46 |
|
51 | |||
47 | _onDecClick() { |
|
52 | _onDecClick() { | |
48 | this.emit("count-dec", { bubbles: false }); |
|
53 | this.emit("count-dec", { bubbles: false, detail: this.counter }); | |
49 | } |
|
54 | } | |
50 | } |
|
55 | } |
General Comments 0
You need to be logged in to leave comments.
Login now