implab/implabjs-djx Commit - r34:e8012fdf09ae

Support for Function Components...

cin -

r34:e8012fdf09ae 1.0.0-rc16 default

parent child

Context file:

r34:e8012fdf09ae

Collapse all files

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 { Constructor } from "@implab/core-amd/interfaces";
             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 (isWidgetConstructor(elementType)) {
                     const ctx = new WidgetContext(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`);
                 }
             }
             export interface EventDetails<T = any> {
                 detail: T;
             }
             export interface EventSelector {
                 selectorTarget: HTMLElement;
                 target: HTMLElement;
             }
             export type DojoMouseEvent<T = any> = MouseEvent & EventSelector & EventDetails<T>;

src/main/ts/tsx/BuildContextBase.ts +7 -15

             import { isNull, mixin } from "@implab/core-amd/safe";
             import { isPlainObject, isNode, isBuildContext, DojoNodePosition, BuildContext } from "./traits";
             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);
                     } 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);
                     }
                 }
                 getChildDom(v: any) {
                     const tv = typeof v;
                     if (tv === "string" || tv === "number" || tv === "boolean" || v instanceof RegExp || v instanceof Date) {
                         return document.createTextNode(v.toString());
                     } else if (isNode(v)) {
                         return v;
                     } else if (isBuildContext(v)) {
                         return v.getDomNode();
                     } else {
                         throw new Error("Invalid parameter");
                     }
                 }
                 abstract _getDomNode(): TNode;
                 ensureCreated() {
                     if (!this._created) {
                         this._create(this._attrs, this._children);
                         this._children = [];
                         this._attrs = {};
                         this._created = true;
                     }
                 }
                 /** @deprecated use getDomNode() */
                 getDomElement() {
                     return this.getDomNode();
                 }
                 getDomNode() {
                     this.ensureCreated();
                     return this._getDomNode();
                 }
                 placeAt(refNode: string | Node, position?: DojoNodePosition) {
                     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

             import dom = require("dojo/dom-construct");
             import attr = require("dojo/dom-attr");
             import { argumentNotEmptyString } from "@implab/core-amd/safe";
             import { BuildContextBase } from "./BuildContextBase";
             export class HtmlElementContext extends BuildContextBase<HTMLElement> {
                 elementType: string;
                 _element: HTMLElement | undefined;
                 constructor(elementType: string) {
                     argumentNotEmptyString(elementType, "elementType");
                     super();
                     this.elementType = elementType;
                 }
                 _addChild(child: any): void {
                     if (!this._element)
                         throw new Error("The HTML element isn't created");
                     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);
                     if (children)
                         children.forEach(v => this._addChild(v));
                 }
                 _getDomNode() {
                     if (!this._element)
                         throw new Error("The HTML element isn't created");
                     return this._element;
                 }
             }

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

             import dom = require("dojo/dom-construct");
             import { argumentNotNull } from "@implab/core-amd/safe";
             import { BuildContextBase } from "./BuildContextBase";
             import { MapOf } from "@implab/core-amd/interfaces";
             // tslint:disable-next-line: class-name
             export interface _Widget {
                 domNode: Node;
                 get(attr: string): any;
                 set(attr: string, value: any): void;
                 set(attrs: MapOf<any>): void;
                 containerNode?: Node
             }
             export type _WidgetCtor = new (attrs: any, srcNode?: string | Node) => _Widget;
             export class WidgetContext extends BuildContextBase<Node> {
                 widgetClass: _WidgetCtor;
                 _instance: _Widget | undefined;
                 constructor(widgetClass: _WidgetCtor) {
                     super();
                     argumentNotNull(widgetClass, "widgetClass");
                     this.widgetClass = widgetClass;
                 }
                 _addChild(child: any): void {
                     if (!this._instance || !this._instance.containerNode)
                         throw new Error("Widget doesn't support adding children");
                     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));
                 }
                 _getDomNode() {
                     if (!this._instance)
                         throw new Error("The instance of the widget isn't created");
                     return this._instance.domNode;
                 }
             }

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

             declare module "@implab/djx/css!*" {
                 const result: { url: string };
                 export = result;
             }
             declare namespace JSX {
-                interface IntrinsicElements {
+                interface DjxIntrinsicAttributes {
-                    [name: string]: any;
+                    class: string;
+                    "data-dojo-attach-point": string;
+                    "data-dojo-attach-event": string;
+                }
+                type IntrinsicElements = {
+                    [name in keyof HTMLElementTagNameMap]: Partial<Omit<HTMLElementTagNameMap[name], "children"> & DjxIntrinsicAttributes>;
                 }
             }
             declare namespace dijit {
                 interface _WidgetBase {
                     _started?: boolean;
                     _set<K extends keyof this>(key: K, value: this[K]): void;
                 }
                 interface TooltipDialog {
                     content: any;
                 }
             }

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

             import { djbase, djclass, bind, prototype, AbstractConstructor } from "../declare";
             import { DjxWidgetBase } from "../tsx/DjxWidgetBase";
             import { createElement } from "../tsx";
             interface MyWidgetAttrs {
                 title: string;
                 counter: number;
             }
             interface MyWidgetEvents {
                 "count-inc": Event;
                 "count-dec": Event;
             }
             @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>
                         <h1 data-dojo-attach-point="titleNode"></h1>
-                        <span onclick={() => this._onIncClick()}>[+]</span>
+                        <Frame>
-                        <span onclick={() => this._onDecClick()}>[-]</span>
+                            <span class="up-button" onclick={e => this._onIncClick(e)}>[+]</span>
+                            <span class="down-button" onclick={() => this._onDecClick()}>[-]</span>
+                        </Frame>
                     </div>;
                 }
-                _onIncClick() {
+                _onIncClick(e: MouseEvent) {
                     this.emit("count-inc", { bubbles: false });
                 }
                 _onDecClick() {
                     this.emit("count-dec", { bubbles: false });
                 }
             }

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

NO CONTENT: file was removed

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