| @@ -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
