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

              {
                  "name": "@implab/djx",
                  "version": "0.0.1-dev",
                  "description": "Supports using dojo version 1 with typescript and .tsx files",
                  "keywords": [
                      "dojo",
                      "tsx",
                      "typescript",
                      "widgets"
                  ],
                  "author": "Implab team",
                  "license": "BSD-2-Clause",
                  "repository": "https://code.implab.org/implab/implabjs-djx",
                  "publishConfig": {
                      "access": "public"
                  },
                  "peerDependencies": {
                      "@implab/core-amd": "^1.4.0",
                      "dojo": "^1.10.0"
                  },
                  "devDependencies": {
                      "@implab/core-amd": "^1.4.0",
                      "@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",
                      "typescript": "4.2.4",
                      "yaml": "~1.7.2"
                  }
              }

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

              import { AbstractConstructor, djbase, djclass } from "../declare";
              import _WidgetBase = require("dijit/_WidgetBase");
              import _AttachMixin = require("dijit/_AttachMixin");
              import { Rendition, isNode, startupWidgets } from "./traits";
              import registry = require("dijit/registry");
              // type Handle = dojo.Handle;
              export interface EventArgs {
                  bubbles?: boolean;
                  cancelable?: boolean;
                  composed?: boolean;
              }
              export interface DjxWidgetBase<Attrs = {}, Events extends { [name in keyof Events]: Event } = {}> extends
                  _WidgetBase<Events> {
+                 readonly _eventMap: Events & GlobalEventHandlersEventMap;
              }
              type _super = {
                  startup(): void;
              }
              @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();
                      // now we should get assigned data-dojo-attach-points
                      // place the contents of the original srcNode to the containerNode
                      const src = this.srcNodeRef;
                      const dest = this.containerNode;
                      if (src && dest) {
                          while (src.firstChild)
                              dest.appendChild(src.firstChild);
                      }
                  }
                  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,
                      // tslint:disable-next-line: ban-types
                      attachFunc: (node: T, type: string, func?: Function) => dojo.Handle
                  ): boolean {
                      if (isNode(baseNode)) {
                          const w = registry.byNode(baseNode);
                          if (w) {
                              // from dijit/_WidgetsInTemplateMixin
                              this._processTemplateNode(w,
                                  (n, p) => n.get(p as any), // callback to get a property of a widget
                                  (widget, type, callback) => {
                                      if (!callback)
                                          throw new Error("The callback must be specified");
                                      // callback to do data-dojo-attach-event to a widget
                                      if (type in widget) {
                                          // back-compat, remove for 2.0
                                          return widget.connect(widget, type, callback as EventListener);
                                      } else {
                                          // 1.x may never hit this branch, but it's the default for 2.0
                                          return widget.on(type, callback);
                                      }
                                  });
                              // don't process widgets internals
                              return false;
                          }
                      }
                      return super._processTemplateNode(baseNode, getAttrFunc, attachFunc);
                  }
                  /** Starts current widget and all its supporting widgets (placed outside
                   * `containerNode`) and child widgets (placed inside `containerNode`)
                   */
                  startup() {
                      // startup supporting widgets
                      registry.findWidgets(this.domNode, this.containerNode).forEach(w => w.startup());
                      super.startup();
                  }
              }

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

              import { IDestroyable, IRemovable } from "@implab/core-amd/interfaces";
              import { isDestroyable } from "@implab/core-amd/safe";
              import _WidgetBase = require("dijit/_WidgetBase");
              import registry = require("dijit/registry");
              import dom = require("dojo/dom-construct");
              import Stateful = require("dojo/Stateful");
              import { FunctionRendition } from "./FunctionRendition";
+             import { DjxWidgetBase } from "./DjxWidgetBase";
              type _WidgetBaseConstructor = typeof _WidgetBase;
              export type DojoNodePosition = "first" | "after" | "before" | "last" | "replace" | "only" | number;
              export interface Rendition<TNode extends Node = Node> {
                  getDomNode(): TNode;
                  placeAt(refNode: string | Node, position?: DojoNodePosition): void;
              }
-             /**
+             /**
               * @deprecated use Rendition
               */
              export type BuildContext<TNode extends Node = Node> = Rendition<TNode>;
              export interface IRecursivelyDestroyable {
                  destroyRecursive(): void;
              }
              export function isNode(el: any): el is Node {
                  return el && el.nodeName && el.nodeType;
              }
              export function isElementNode(el: any): el is Element {
                  return isNode(el) && el.nodeType === 1;
              }
              export function isTextNode(el: any): el is Text {
                  return isNode(el) && el.nodeType === 3;
              }
              export function isProcessingInstructionNode(el: any): el is ProcessingInstruction {
                  return isNode(el) && el.nodeType === 7;
              }
              export function isCommentNode(el: any): el is Comment {
                  return isNode(el) && el.nodeType === 8;
              }
              export function isDocumentNode(el: any): el is Document {
                  return isNode(el) && el.nodeType === 9;
              }
              export function isDocumentTypeNode(el: any): el is DocumentType {
                  return isNode(el) && el.nodeType === 10;
              }
              export function isDocumentFragmentNode(el: any): el is DocumentFragment {
                  return isNode(el) && el.nodeType === 11;
              }
              export function isWidget(v: any): v is _WidgetBase {
                  return v && "domNode" in v;
              }
              export function isRendition(v: any): v is Rendition {
                  return typeof v === "object" && typeof v.getDomElement === "function";
              }
              /**
               * @deprecated use isRendition
               */
              export const isBuildContext = isRendition;
              export function isPlainObject(v: object) {
                  if (typeof v !== "object")
                      return false;
                  const vp = Object.getPrototypeOf(v);
                  return !vp || vp === Object.prototype;
              }
              export function isWidgetConstructor(v: any): v is _WidgetBaseConstructor {
                  return typeof v === "function" && v.prototype && (
                      "domNode" in v.prototype ||
                      "buildRendering" in v.prototype
                  );
              }
              /** Tests whether the specified node is placed in visible dom.
               *  @param {Node} node The node to test
               */
              export function isInPage(node: Node) {
                  return (node === document.body) ? false : document.body.contains(node);
              }
              export function isRecursivelyDestroyable(target: any): target is IRecursivelyDestroyable {
                  return target && typeof target.destroyRecursive === "function";
              }
              /** Destroys DOM Node with all contained widgets.
               * If the specified node is the root node of a widget, then the
               * widget will be destroyed.
               *
               * @param target DOM Node or widget to destroy
               */
              export function destroy(target: Node | IDestroyable | IRecursivelyDestroyable) {
                  if (isRecursivelyDestroyable(target)) {
                      target.destroyRecursive();
                  } else if (isDestroyable(target)) {
                      target.destroy();
                  } else if (isNode(target)) {
                      const self = registry.byNode(target);
                      if (self) {
                          self.destroyRecursive();
                      } else {
                          registry.findWidgets(target).forEach(destroy);
                          dom.destroy(target);
                      }
                  }
              }
              /** Empties a content of the specified node and destroys all contained widgets.
               *
               * @param target DOM node to .
               */
              export function emptyNode(target: Node) {
                  registry.findWidgets(target).forEach(destroy);
                  dom.empty(target);
              }
              /** 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) {
                  if (isNode(target)) {
                      const w = isElementNode(target) ? registry.byNode(target) : undefined;
                      if (w) {
                          if (w.startup)
                              w.startup();
                      } else {
                          registry.findWidgets(target, skipNode).forEach(x => x.startup());
                      }
                  } else {
-                     if(target.startup)
+                     if (target.startup)
                          target.startup();
                  }
              }
              type StatefulProps<T> = T extends Stateful<infer A> ? A : never;
              type CleanFn = (instance: IRemovable | IDestroyable) => void;
              /**
               * Observers the property and calls render callback each change.
               *
               * @param target The target object which property will be observed.
               * @param prop The name of the property.
               * @param render The callback which will be called every time the value is changed
               * @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.
               *
               * @param target The target object which property will be observed.
               * @param prop The name of the property.
               * @param render The callback which will be called every time the value is changed
               * @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<T extends Stateful, K extends keyof StatefulProps<T>>(
                  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,
-                 cleanupOrOwner: {own: CleanFn} | CleanFn = () => {}
+                 render: (model: StatefulProps<T>[K]) => any,
+                 cleanupOrOwner: { own: CleanFn } | CleanFn = () => { }
              ) {
                  let rendition = new FunctionRendition(() => render(target.get(prop)));
                  const _own = cleanupOrOwner instanceof Function ? cleanupOrOwner : (x: IRemovable) => cleanupOrOwner.own(x)
                  _own(target.watch(prop, (_name, oldValue, newValue) => {
                      if (oldValue !== newValue) {
                          const newRendition = new FunctionRendition(() => render(newValue));
                          newRendition.placeAt(rendition.getDomNode(), "replace");
                          destroy(rendition.getDomNode());
                          rendition = newRendition;
                      }
                  }));
                  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 { djbase, djclass, bind, prototype, AbstractConstructor } from "../declare";
              import { DjxWidgetBase } from "../tsx/DjxWidgetBase";
              import { createElement } from "../tsx";
+             import { HandlerType, on, WidgetEvents } from "../tsx/traits";
              interface MyWidgetAttrs {
                  title: string;
                  counter: number;
              }
              interface MyWidgetEvents {
                  "count-inc": Event & {
                      detail: number;
                  };
                  "count-dec": Event & {
                      detail: number;
                  };
              }
              @djclass
              export class MyWidget extends djbase(DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>>) {
                  @bind({ node: "titleNode", type: "innerHTML" })
                  title = "";
                  @prototype()
                  counter = 0;
                  render() {
                      const Frame = (props: any) => <div>{props.children}</div>;
                      return <div className="myWidget" onsubmit={e => this._onSubmit(e)} tabIndex={3} style={{ alignContent: "center", border: "1px solid" }} >
                          <h1 data-dojo-attach-point="titleNode"></h1>
                          <Frame>
                              <span class="up-button" onclick={e => this._onIncClick(e)}>[+]</span>
                              <span class="down-button" onclick={() => this._onDecClick()}>[-]</span>
                          </Frame>
                      </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

              {
                  "compilerOptions": {
                      "moduleResolution": "node",
                      "noEmitOnError": true,
                      "strict": true,
                      "types": [],
                      "experimentalDecorators": true,
                      "jsxFactory": "createElement",
+                     "target": "ES5",
                      //"skipLibCheck": true,
                      "jsx": "react",
                      "lib": ["es5", "es2015.promise", "es2015.symbol", "es2015.iterable", "dom", "scripthost"]
                  }
              }
  No newline at end of file

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