implab/implabjs-djx Commit - r34:e8012fdf09ae

src/main/ts/tsx/FunctionComponentContext.ts created 644 +32 0

			@@ -0,0 +1,32
		1	import dom = require("dojo/dom-construct");
		2	import attr = require("dojo/dom-attr");
		3	import { argumentNotNull } from "@implab/core-amd/safe";
		4	import { BuildContextBase } from "./BuildContextBase";
		5
		6
		7	export class FunctionComponentContext extends BuildContextBase<Element> {
		8	private _component: (props: any) => Element;
		9
		10	private _element: Element \| undefined;
		11
		12	constructor(component: (props: any) => Element) {
		13	super();
		14	argumentNotNull(component, "component");
		15
		16	this._component = component;
		17	}
		18
		19	_create(attrs: object, children: any[]) {
		20	const _attrs: any = attrs \|\| {};
		21	_attrs.children = children.map(x => this.getChildDom(x));
		22
		23	this._element = this._component.call(null, _attrs);
		24	}
		25
		26	_getDomNode() {
		27	if (!this._element)
		28	throw new Error("The instance of the widget isn't created");
		29	return this._element;
		30	}
		31
		32	}

src/test/js/index.js created 644 +13 0

			@@ -0,0 +1,13
		1	var rjs = require('requirejs');
		2
		3	rjs.config({
		4	baseUrl: '.',
		5	nodeRequire: require,
		6	packages: [
		7	{ name: "dojo", location: "../../node_modules/dojo" },
		8	{ name: "@implab", location: "../../node_modules/@implab" }
		9	]
		10	});
		11
		12
		13	rjs(['./plan']); No newline at end of file

src/test/ts/DeclareTests.ts created 644 +10 0

			@@ -0,0 +1,10
		1	import { Baz } from "./mock/Baz";
		2
		3	console.log("Declare tests");
		4
		5	const baz = new Baz();
		6
		7	const data: string[] = [];
		8	baz.writeHello(data);
		9
		10	console.log(data.join("\n"));

src/test/ts/mock/BarMixin.ts created 644 +17 0

			@@ -0,0 +1,17
		1	import { djclass, djbase } from "../declare";
		2
		3	interface Super {
		4	writeHello(out: string[]): void;
		5
		6	}
		7
		8	@djclass
		9	export class BarMixin extends djbase<Super>() {
		10	writeHello(out: string[]) {
		11	out.push("-> Bar");
		12
		13	super.writeHello(out);
		14
		15	out.push("<- Bar");
		16	}
		17	}

src/test/ts/mock/Baz.ts created 644 +15 0

			@@ -0,0 +1,15
		1	import { djbase, djclass } from "../declare";
		2	import { FooMixin } from "./FooMixin";
		3	import { BarMixin } from "./BarMixin";
		4	import { BoxMixin } from "./BoxMixin";
		5
		6	@djclass
		7	export class Baz extends djbase(FooMixin, BarMixin, BoxMixin) {
		8	writeHello(out: string[]) {
		9	out.push("-> Baz");
		10
		11	super.writeHello(out);
		12
		13	out.push("<- Baz");
		14	}
		15	}

src/test/ts/mock/BoxMixin.ts created 644 +16 0

			@@ -0,0 +1,16
		1	import { djbase, djclass } from "../declare";
		2
		3	interface Super {
		4	writeHello(out: string[]): void;
		5	}
		6
		7	@djclass
		8	export class BoxMixin extends djbase<Super>() {
		9	writeHello(out: string[]) {
		10	out.push("-> Box");
		11
		12	super.writeHello(out);
		13
		14	out.push("<- Box");
		15	}
		16	}

src/test/ts/mock/FooMixin.ts created 644 +16 0

			@@ -0,0 +1,16
		1	import { djclass, djbase } from "../declare";
		2
		3	interface Super {
		4	writeHello(out: string[]): void;
		5	}
		6
		7	@djclass
		8	export class FooMixin extends djbase<Super>() {
		9	writeHello(out: string[]) {
		10	out.push("-> Foo");
		11
		12	super.writeHello(out);
		13
		14	out.push("<- Foo");
		15	}
		16	} No newline at end of file

src/test/ts/plan.ts created 644 +1 0

			@@ -0,0 +1,1
		1	import "./DeclareTests"; No newline at end of file

src/main/ts/tsx.ts +8 -1

              import { HtmlElementContext } from "./tsx/HtmlElementContext";
              import { WidgetContext } from "./tsx/WidgetContext";
              import { isWidgetConstructor, BuildContext } from "./tsx/traits";
+             import { FunctionComponentContext } from "./tsx/FunctionComponentContext";
-             export function createElement<T extends Constructor>(elementType: string | T, ...args: any[]): BuildContext {
+             export function createElement<T extends Constructor | string | ((props: any) => Element)>(elementType: T, ...args: any[]): BuildContext {
                  if (typeof elementType === "string") {
                      const ctx = new HtmlElementContext(elementType);
                      if (args)
                          args.forEach(x => ctx.visitNext(x));
                      return ctx;
+                 } else if (typeof elementType === "function") {
+                     const ctx = new FunctionComponentContext(elementType as (props: any) => Element);
+                     if (args)
+                         args.forEach(x => ctx.visitNext(x));
+                     return ctx;
                  } else {
                      throw new Error(`The element type '${elementType}' is unsupported`);
                  }

src/main/ts/tsx/BuildContextBase.ts +9 -17

              import dom = require("dojo/dom-construct");
              export abstract class BuildContextBase<TNode extends Node> implements BuildContext<TNode> {
-                 _attrs = {};
+                 private _attrs = {};
-                 _children = new Array();
+                 private _children = new Array();
-                 _created: boolean = false;
+                 private _created: boolean = false;
                  visitNext(v: any) {
+                     if (this._created)
+                         throw new Error("The Element is already created");
                      if (isNull(v))
                          return;
                      if (isPlainObject(v)) {
-                         if (this._created)
-                             this._setAttrs(v);
-                         else
-                             mixin(this._attrs, v);
+                         mixin(this._attrs, v);
                      } else if (v instanceof Array) {
-                         v.forEach(x => this._addChild(x));
+                         v.forEach(x => this.visitNext(x));
                      } else {
-                         if (this._created)
-                             this._addChild(v);
-                         else
-                             this._children.push(v);
+                         this._children.push(v);
                      }
                  }
                      dom.place(this.getDomNode(), refNode, position);
                  }
-                 abstract _addChild(child: any): void;
-                 abstract _setAttrs(attrs: object): void;
                  abstract _create(attrs: object, children: any[]): void;
              }

src/main/ts/tsx/HtmlElementContext.ts 0 -7

                      dom.place(this.getChildDom(child), this._element);
                  }
-                 _setAttrs(attrs: object): void {
-                     if (!this._element)
-                         throw new Error("The HTML element isn't created");
-                     attr.set(this._element, attrs);
+                 }
                  _create(attrs: object, children: any[]) {
                      this._element = dom.create(this.elementType, attrs);

src/main/ts/tsx/WidgetContext.ts +1 -5

                      dom.place(this.getChildDom(child), this._instance.containerNode);
                  }
-                 _setAttrs(attrs: object): void {
-                     this._instance?.set(attrs);
+                 }
                  _create(attrs: object, children: any[]) {
-                     this._instance = new this.widgetClass(this._attrs);
+                     this._instance = new this.widgetClass(attrs);
                      if (children)
                          children.forEach(x => this._addChild(x));
                  }

src/main/typings/index.d.ts +7 -2

              }
              declare namespace JSX {
-                 interface IntrinsicElements {
-                     [name: string]: any;
+                 interface DjxIntrinsicAttributes {
+                     class: string;
+                     "data-dojo-attach-point": string;
+                     "data-dojo-attach-event": string;
+                 }
+                 type IntrinsicElements = {
+                     [name in keyof HTMLElementTagNameMap]: Partial<Omit<HTMLElementTagNameMap[name], "children"> & DjxIntrinsicAttributes>;
                  }
              }

src/test/ts/view/MyWidget.tsx +9 -6

              @djclass
              export class MyWidget extends djbase(DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>>) {
-                 @bind({node: "titleNode", type:"innerHTML"})
+                 @bind({ node: "titleNode", type: "innerHTML" })
                  title = "";
                  @prototype()
                  counter = 0;
                  render() {
+                     const Frame = (props: any) => <div>{props.children}</div>;
                      return <div>
                          <h1 data-dojo-attach-point="titleNode"></h1>
-                         <span onclick={() => this._onIncClick()}>[+]</span>
-                         <span onclick={() => this._onDecClick()}>[-]</span>
+                         <Frame>
+                             <span class="up-button" onclick={e => this._onIncClick(e)}>[+]</span>
+                             <span class="down-button" onclick={() => this._onDecClick()}>[-]</span>
+                         </Frame>
                      </div>;
                  }
-                 _onIncClick() {
-                     this.emit("count-inc", { bubbles: false } );
+                 _onIncClick(e: MouseEvent) {
+                     this.emit("count-inc", { bubbles: false });
                  }
                  _onDecClick() {
-                     this.emit("count-dec", { bubbles: false } );
+                     this.emit("count-dec", { bubbles: false });
                  }
              }

src/test/ts/index.ts removed 0 0

NO CONTENT: file was removed

	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