implab/implabjs-djx Commit - r72:3ef812269f4f

temp commit, working on @on() decorator

cin -

r72:3ef812269f4f default

parent child

Context file:

r72:3ef812269f4f

Collapse all files

djx/package.json +1 -2

                     "@types/chai": "4.1.3",
                     "@types/requirejs": "2.1.31",
                     "@types/yaml": "1.2.0",
-                    "chai": "4.2.0",
                     "dojo": "1.16.0",
-                    "@implab/dojo-typings": "/home/sergey/projects/implabjs-dojo-typings/dojo-typings/build/npm/package/implab-dojo-typings-v1.0.0-rc4.tgz",
+                    "@implab/dojo-typings": "1.0.0",
                     "eslint": "6.8.0",
                     "requirejs": "2.3.6",
                     "tslint": "^6.1.3",

djx/src/main/ts/tsx/DjxWidgetBase.ts +14 0

             export interface DjxWidgetBase<Attrs = {}, Events extends { [name in keyof Events]: Event } = {}> extends
                 _WidgetBase<Events> {
+                readonly _eventMap: Events & GlobalEventHandlersEventMap;
             }
             type _super = {
             @djclass
             export abstract class DjxWidgetBase<Attrs = {}, Events = {}> extends djbase<_super, _AttachMixin>(_WidgetBase, _AttachMixin) {
+                _eventHandlers: Array<{
+                    eventName: keyof Events,
+                    handlerMethod: string;
+                }> = [];
                 buildRendering() {
                     this.domNode = this.render().getDomNode();
                     super.buildRendering();
                 abstract render(): Rendition<HTMLElement>;
+                private _connectEventHandlers() {
+                    this._eventHandlers.forEach(({eventName, handlerMethod}) => {
+                        if (typeof this[handlerMethod as keyof this] === "function")
+                            this.on(eventName, this[handlerMethod] as Function);
+                    });
+                }
                 _processTemplateNode<T extends (Element | Node | _WidgetBase)>(
                     baseNode: T,
                     getAttrFunc: (baseNode: T, attr: string) => any,

djx/src/main/ts/tsx/traits.ts +26 -8

             import dom = require("dojo/dom-construct");
             import Stateful = require("dojo/Stateful");
             import { FunctionRendition } from "./FunctionRendition";
+            import { DjxWidgetBase } from "./DjxWidgetBase";
             type _WidgetBaseConstructor = typeof _WidgetBase;
                 placeAt(refNode: string | Node, position?: DojoNodePosition): void;
             }
             /**
              * @deprecated use Rendition
              */
             export type BuildContext<TNode extends Node = Node> = Rendition<TNode>;
             /** This function starts all widgets inside the DOM node if the target is a node
              * or starts widget itself if the target is the widget. If the specified node
              * associated with the widget that widget will be started.
+             *
              * @param target DOM node to find and start widgets or the widget itself.
              */
             export function startupWidgets(target: Node | _WidgetBase, skipNode?: Node) {
                         registry.findWidgets(target, skipNode).forEach(x => x.startup());
                     }
                 } else {
-                    if(target.startup)
+                    if (target.startup)
                         target.startup();
                 }
             }
              * @param cleanupOrOwner The object with method `own` or an callback to register lifecycle for the observer.
              * @returns Rendition which is created instantly
              */
-            export function watch<W extends _WidgetBase, K extends keyof W> (
+            export function watch<W extends _WidgetBase, K extends keyof W>(
                 target: W,
                 prop: K,
                 render: (model: W[K]) => any,
-                cleanupOrOwner?: {own: CleanFn} | CleanFn
+                cleanupOrOwner?: { own: CleanFn } | CleanFn
             ): Rendition;
             /**
              * Observers the property and calls render callback each change.
                 target: T,
                 prop: K,
                 render: (model: StatefulProps<T>[K]) => any,
-                cleanupOrOwner?: {own: CleanFn} | CleanFn
+                cleanupOrOwner?: { own: CleanFn } | CleanFn
             ): Rendition;
             export function watch<T extends Stateful, K extends keyof StatefulProps<T> & string>(
                 target: T,
                 prop: K,
-                render: (model:  StatefulProps<T>[K]) => any,
+                render: (model: StatefulProps<T>[K]) => any,
-                cleanupOrOwner: {own: CleanFn} | CleanFn = () => {}
+                cleanupOrOwner: { own: CleanFn } | CleanFn = () => { }
             ) {
                 let rendition = new FunctionRendition(() => render(target.get(prop)));
                 const _own = cleanupOrOwner instanceof Function ? cleanupOrOwner : (x: IRemovable) => cleanupOrOwner.own(x)
                 }));
                 return rendition;
             }
+            export type WidgetEvents<W> = W extends DjxWidgetBase<any, infer EM> ? EM : never;
+            export type HandlerType<W, E extends keyof any> = W extends {
+                on(eventName: E, handler: infer H): any;
+            } ? H : never;
+            export const on = <E extends keyof any>(eventName: E) =>
+                <K extends keyof T,
+                    T extends DjxWidgetBase
+                >(
+                    target: T,
+                    key: K,
+                    descriptor: PropertyDescriptor
+                ): any => {
+                    target.
+                };

djx/src/test/ts/view/MyWidget.tsx +19 -1

             import { DjxWidgetBase } from "../tsx/DjxWidgetBase";
             import { createElement } from "../tsx";
+            import { HandlerType, on, WidgetEvents } from "../tsx/traits";
             interface MyWidgetAttrs {
                 title: string;
                     </div>;
                 }
+                postCreate() {
+                    super.postCreate();
+                    this.on("click", () => {});
+                }
                 _onSubmit(e: Event) {
                 }
                 _onIncClick(e: MouseEvent) {
-                    this.set("counter", this.counter+1);
+                    this.set("counter", this.counter + 1);
                     this.emit("count-inc", { bubbles: false });
                 }
                 _onDecClick() {
                     this.emit("count-dec", { bubbles: false, detail: this.counter });
                 }
+                @on("count-inc")
+                _onCounterInc(evt: Event & { detail: number; }) {
+                }
             }
+            declare const w: MyWidget;
+            w.on("click", () => {});
+            declare const ev: WidgetEvents<MyWidget>;
+            ev["count-inc"];

djx/src/tsconfig.json +1 0

                     "types": [],
                     "experimentalDecorators": true,
                     "jsxFactory": "createElement",
+                    "target": "ES5",
                     //"skipLibCheck": true,
                     "jsx": "react",
                     "lib": ["es5", "es2015.promise", "es2015.symbol", "es2015.iterable", "dom", "scripthost"]

General Comments 0

Write
Preview

You need to be logged in to leave comments. Login now

No TODOs yet

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings
t s	Toggle sidebar on some pages