implab/implabjs-djx Commit - r104:15c829aa08a2

Merge with v1.3

cin -

r104:15c829aa08a2 v1.3.0 default

parent child

Context file:

r104:15c829aa08a2

Expand all files

The requested changes are too big and content was truncated. Show full diff

djx/src/main/ts/observable.ts created 644 +147 0

@@ -0,0 +1,147
	1	/**
	2	* The interface for the consumer of an observable sequence
	3	*/
	4	export interface Observer<T> {
	5	/**
	6	* Called for the next element in the sequence
	7	*/
	8	next: (value: T) => void;
	9
	10	/**
	11	* Called once when the error occurs in the sequence.
	12	*/
	13	error: (e: unknown) => void;
	14
	15	/**
	16	* Called once at the end of the sequence.
	17	*/
	18	complete: () => void;
	19	}
	20
	21	/**
	22	* The group of functions to feed an observable. This methods are provided to
	23	* the producer to generate a stream of events.
	24	*/
	25	export type Sink<T> = {
	26	[k in keyof Observer<T>]: (this: void, ...args: Parameters<Observer<T>[k]>) => void;
	27	};
	28
	29	export type Producer<T> = (sink: Sink<T>) => (void \| (() => void));
	30
	31	export interface Unsubscribable {
	32	unsubscribe(): void;
	33	}
	34
	35	export const isUnsubsribable = (v: unknown): v is Unsubscribable =>
	36	v !== null && v !== undefined && typeof (v as Unsubscribable).unsubscribe === "function";
	37
	38	export const isSubsribable = (v: unknown): v is Subscribable<unknown> =>
	39	v !== null && v !== undefined && typeof (v as Subscribable<unknown>).subscribe === "function";
	40
	41	export interface Subscribable<T> {
	42	subscribe(consumer: Partial<Observer<T>>): Unsubscribable;
	43	}
	44
	45	/** The observable source of items. */
	46	export interface Observable<T> extends Subscribable<T> {
	47	/** Transforms elements of the sequence with the specified mapper
	48	*
	49	* @param mapper The mapper used to transform the values
	50	*/
	51	map<T2>(mapper: (value: T) => T2): Observable<T2>;
	52
	53	/** Filters elements of the sequence. The resulting sequence will
	54	* contain only elements which match the specified predicate.
	55	*
	56	* @param predicate The filter predicate.
	57	*/
	58	filter(predicate: (value: T) => boolean): Observable<T>;
	59
	60	/** Applies accumulator to each value in the sequence and
	61	* emits the accumulated value for each source element
	62	*
	63	* @param accumulator
	64	* @param initial
	65	*/
	66	scan<A>(accumulator: (acc: A, value: T) => A, initial: A): Observable<A>;
	67	}
	68
	69	const noop = () => { };
	70
	71	const sink = <T>(consumer: Partial<Observer<T>>) => {
	72	const { next, error, complete } = consumer;
	73	return {
	74	next: next ? next.bind(consumer) : noop,
	75	error: error ? error.bind(consumer) : noop,
	76	complete: complete ? complete.bind(consumer) : noop
	77	}
	78	};
	79
	80	const fuse = <T>({ next, error, complete }: Sink<T>) => {
	81	let done = false;
	82	return {
	83	next: (value: T) => { !done && next(value) },
	84	error: (e: unknown) => { !done && (done = true, error(e)) },
	85	complete: () => { !done && (done = true, complete()) }
	86	}
	87	}
	88
	89	const _observe = <T>(producer: Producer<T>): Observable<T> => ({
	90	subscribe: (consumer: Partial<Observer<T>>) => ({
	91	unsubscribe: producer(sink(consumer)) ?? noop
	92	}),
	93	map: (mapper) => _observe(({ next, error, complete }) =>
	94	producer({
	95	next: next !== noop ? (v: T) => next(mapper(v)) : noop,
	96	error,
	97	complete
	98	})
	99	),
	100	filter: (predicate) => _observe(({ next, error, complete }) =>
	101	producer({
	102	next: next !== noop ?
	103	(v: T) => predicate(v) ? next(v) : void(0) : noop,
	104	error,
	105	complete
	106	})
	107	),
	108	scan: (accumulator, initial) => _observe(({ next, error, complete }) => {
	109	let _acc = initial;
	110	return producer({
	111	next: next !== noop ?
	112	(v: T) => next(_acc = accumulator(_acc, v)) : noop,
	113	error,
	114	complete
	115	});
	116	})
	117	});
	118
	119	export const observe = <T>(producer: Producer<T>): Observable<T> => ({
	120	subscribe: (consumer: Partial<Observer<T>>) => ({
	121	unsubscribe: producer(fuse(sink(consumer))) ?? noop
	122	}),
	123	map: (mapper) => _observe(({ next, error, complete }) =>
	124	producer(fuse({
	125	next: next !== noop ?
	126	(v: T) => next(mapper(v)) : noop,
	127	error,
	128	complete
	129	}))
	130	),
	131	filter: (predicate) => _observe(({ next, error, complete }) =>
	132	producer(fuse({
	133	next: next !== noop ?
	134	(v: T) => predicate(v) ? next(v) : void (0) : noop,
	135	error,
	136	complete
	137	}))
	138	),
	139	scan: (accumulator, initial?) => observe(({ next, error, complete }) => {
	140	let _acc = initial;
	141	return producer(fuse({
	142	next: next !== noop ? (v: T) => next(_acc = accumulator(_acc, v)) : noop,
	143	error,
	144	complete
	145	}));
	146	})
	147	});

djx/src/test/ts/declare-tests.ts created 644 +13 0

@@ -0,0 +1,13
	1	import * as t from "tap";
	2	import { Baz } from "./mock/Baz";
	3
	4	t.comment("Declare tests");
	5
	6	const baz = new Baz();
	7
	8	const data: string[] = [];
	9	baz.writeHello(data);
	10	t.pass("Test complete");
	11
	12	// tslint:disable-next-line: no-console
	13	t.comment(data.join("\n"));

djx/src/test/ts/observable-tests.ts created 644 +52 0

@@ -0,0 +1,52
	1	import { observe } from "./observable";
	2	import * as t from "tap";
	3
	4	const subj1 = observe<number>(({ next, complete }) => {
	5	next(1);
	6	complete();
	7	next(2);
	8	});
	9
	10	const consumer1 = {
	11	sum: 0,
	12	next(v: number) {
	13	this.sum += v;
	14	}
	15	}
	16
	17	subj1.subscribe(consumer1);
	18	t.equal(consumer1.sum, 1, "Should get only one value");
	19
	20	subj1.subscribe(consumer1);
	21	t.equal(consumer1.sum, 2, "Should get the value again");
	22
	23	const consumer2 = {
	24	value: 0,
	25	completed: false,
	26	next(v: number) { this.value = v; },
	27	complete() { this.completed = true; }
	28	};
	29
	30	let maps = 0;
	31
	32	subj1
	33	.map(v => {
	34	t.comment("map1: " + v * 2);
	35	maps++;
	36	return v * 2;
	37	})
	38	.map (v => {
	39	t.comment("map2: " + v * 2);
	40	maps++;
	41	return v * 2;
	42	})
	43	.map(v => {
	44	t.comment("map3: " + v * 2);
	45	maps++;
	46	return v * 2
	47	})
	48	.subscribe(consumer2);
	49
	50	t.equal(consumer2.value, 8, "Should map");
	51	t.equal(maps, 3, "The map chain should not be executed after completion");
	52	t.ok(consumer2.completed, "The completion signal should pass through"); No newline at end of file

gradle.properties created 644 +1 0

	@@ -0,0 +1,1
				1	symbols=local No newline at end of file

playground/build.gradle created 644 +126 0

@@ -0,0 +1,126
	1	plugins {
	2	id "org.implab.gradle-typescript" version "1.3.4"
	3	id "ivy-publish"
	4	}
	5
	6	def container = "djx-playground"
	7
	8	configurations {
	9	npmLocal
	10	}
	11
	12	dependencies {
	13	npmLocal project(":djx")
	14	}
	15
	16	def bundleDir = fileTree(layout.buildDirectory.dir("bundle")) {
	17	builtBy "bundle"
	18	}
	19
	20	typescript {
	21	compilerOptions {
	22	lib = ["es5", "dom", "scripthost", "es2015.promise", "es2015.symbol", "es2015.iterable"]
	23	// listFiles = true
	24	strict = true
	25	types = ["requirejs", "@implab/dojo-typings", "@implab/djx"]
	26	module = "amd"
	27	it.target = "es5"
	28	experimentalDecorators = true
	29	noUnusedLocals = false
	30	jsx = "react"
	31	jsxFactory = "createElement"
	32	moduleResolution = "node"
	33	// dojo-typings are sick
	34	skipLibCheck = true
	35	// traceResolution = true
	36	// baseUrl = "./"
	37	// paths = [ "": [ "$projectDir/src/typings/" ] ]
	38	// baseUrl = "$projectDir/src/typings"
	39	// typeRoots = ["$projectDir/src/typings"]
	40	}
	41	tscCmd = "$projectDir/node_modules/.bin/tsc"
	42	tsLintCmd = "$projectDir/node_modules/.bin/tslint"
	43	esLintCmd = "$projectDir/node_modules/.bin/eslint"
	44	}
	45
	46	tasks.matching{ it.name =~ /^configureTs/ }.configureEach {
	47	compilerOptions {
	48	if (symbols != 'none') {
	49	sourceMap = true
	50	switch(symbols) {
	51	case "local":
	52	sourceRoot = ( isWindows ? "file:///" : "file://" ) + it.rootDir
	53	break;
	54	}
	55	}
	56	}
	57	}
	58
	59	npmInstall {
	60	//npmInstall.dependsOn it
	61	dependsOn configurations.npmLocal
	62
	63	doFirst {
	64	configurations.npmLocal.each { f ->
	65	exec {
	66	commandLine "npm", "install", f, "--save-dev"
	67	}
	68	}
	69	}
	70	}
	71
	72	clean {
	73	doFirst {
	74	delete "$buildDir/bundle"
	75	}
	76	}
	77
	78
	79	task processResourcesBundle(type: Copy) {
	80	from "src/bundle"
	81	into layout.buildDirectory.dir("bundle")
	82	}
	83
	84	task copyModules(type: Copy) {
	85	dependsOn npmInstall
	86	into layout.buildDirectory.dir("bundle/js");
	87
	88	def pack = { String jsmod ->
	89	into(jsmod) {
	90	from npm.module(jsmod)
	91	}
	92	}
	93
	94
	95	pack("@implab/djx")
	96	pack("@implab/core-amd")
	97	pack("dojo")
	98	pack("dijit")
	99	into("rxjs") {
	100	from(npm.module("rxjs/dist/bundles"))
	101	}
	102	from npm.module("requirejs/require.js")
	103	}
	104
	105	task copyApp(type: Copy) {
	106	dependsOn assemble
	107	from typescript.assemblyDir
	108	into layout.buildDirectory.dir("bundle/js/app")
	109	}
	110
	111	task bundle {
	112	dependsOn copyModules, processResourcesBundle, copyApp
	113	}
	114
	115	task up(type: Exec) {
	116	dependsOn bundle
	117	commandLine "podman", "run", "--rm", "-d",
	118	"--name", container,
	119	"-p", "2078:80",
	120	"-v", "$buildDir/bundle:/srv/www/htdocs",
	121	"registry.implab.org/implab/apache2:latest"
	122	}
	123
	124	task stop(type: Exec) {
	125	commandLine "podman", "stop", container
	126	} No newline at end of file

playground/package-lock.json created 644 +170 0

@@ -0,0 +1,170
	1	{
	2	"name": "@implab/djx-playground",
	3	"lockfileVersion": 2,
	4	"requires": true,
	5	"packages": {
	6	"": {
	7	"name": "@implab/djx-playground",
	8	"dependencies": {
	9	"dijit": "1.17.3",
	10	"dojo": "1.17.3",
	11	"requirejs": "2.3.6",
	12	"rxjs": "7.5.6"
	13	},
	14	"devDependencies": {
	15	"@implab/core-amd": "1.4.6",
	16	"@implab/djx": "file:../djx/build/npm/package",
	17	"@implab/dojo-typings": "1.0.2",
	18	"@types/requirejs": "2.1.34",
	19	"typescript": "4.8.2"
	20	}
	21	},
	22	"../djx/build/npm/package": {
	23	"name": "@implab/djx",
	24	"dev": true,
	25	"license": "BSD-2-Clause",
	26	"peerDependencies": {
	27	"@implab/core-amd": "^1.4.0",
	28	"dojo": "^1.10.0"
	29	}
	30	},
	31	"node_modules/@implab/core-amd": {
	32	"version": "1.4.6",
	33	"resolved": "https://registry.npmjs.org/@implab/core-amd/-/core-amd-1.4.6.tgz",
	34	"integrity": "sha512-I1RwUAxeiodePpiBzveoHaehMSAyk7NFPPPEvDqfphHBC8yXoXWAaUrp7EcOKEzjXAs7lJQVhNpmjCjIqoj6BQ==",
	35	"dev": true,
	36	"peerDependencies": {
	37	"dojo": "^1.10.0"
	38	}
	39	},
	40	"node_modules/@implab/djx": {
	41	"resolved": "../djx/build/npm/package",
	42	"link": true
	43	},
	44	"node_modules/@implab/dojo-typings": {
	45	"version": "1.0.2",
	46	"resolved": "https://registry.npmjs.org/@implab/dojo-typings/-/dojo-typings-1.0.2.tgz",
	47	"integrity": "sha512-/lbcMCHdRoHJLKFcT8xdk1KbGazSlb1pGSDJ406io7iMenPm/XbJYcUti+VzXnn71zOJ8aYpGT12T5L0rfOZNA==",
	48	"dev": true
	49	},
	50	"node_modules/@types/requirejs": {
	51	"version": "2.1.34",
	52	"resolved": "https://registry.npmjs.org/@types/requirejs/-/requirejs-2.1.34.tgz",
	53	"integrity": "sha512-iQLGNE1DyIRYih60B47l/hI5X7J0wAnnRBL6Yn85GUYQg8Fm3wl8kvT6NRwncKroUOSx7/lbAagIFNV7y02DiQ==",
	54	"dev": true
	55	},
	56	"node_modules/dijit": {
	57	"version": "1.17.3",
	58	"resolved": "https://registry.npmjs.org/dijit/-/dijit-1.17.3.tgz",
	59	"integrity": "sha512-QS+1bNhPT+BF9E+iomQSi5qI+o3oUNSx1r5TF8WlGH4LybGZP+IIGJBOO5/41YduBPljVXhY7vaPsgrycxC6UQ==",
	60	"dependencies": {
	61	"dojo": "1.17.3"
	62	}
	63	},
	64	"node_modules/dojo": {
	65	"version": "1.17.3",
	66	"resolved": "https://registry.npmjs.org/dojo/-/dojo-1.17.3.tgz",
	67	"integrity": "sha512-iWDx1oSfCEDnIrs8cMW7Zh9Fbjgxu8iRagFz+Qi2eya3MXIAxFXKhv2A7dpi+bfpMpFozLwcsLV8URLw6BsHsA=="
	68	},
	69	"node_modules/requirejs": {
	70	"version": "2.3.6",
	71	"resolved": "https://registry.npmjs.org/requirejs/-/requirejs-2.3.6.tgz",
	72	"integrity": "sha512-ipEzlWQe6RK3jkzikgCupiTbTvm4S0/CAU5GlgptkN5SO6F3u0UD0K18wy6ErDqiCyP4J4YYe1HuAShvsxePLg==",
	73	"bin": {
	74	"r_js": "bin/r.js",
	75	"r.js": "bin/r.js"
	76	},
	77	"engines": {
	78	"node": ">=0.4.0"
	79	}
	80	},
	81	"node_modules/rxjs": {
	82	"version": "7.5.6",
	83	"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.6.tgz",
	84	"integrity": "sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==",
	85	"dependencies": {
	86	"tslib": "^2.1.0"
	87	}
	88	},
	89	"node_modules/tslib": {
	90	"version": "2.4.0",
	91	"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
	92	"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
	93	},
	94	"node_modules/typescript": {
	95	"version": "4.8.2",
	96	"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz",
	97	"integrity": "sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==",
	98	"dev": true,
	99	"bin": {
	100	"tsc": "bin/tsc",
	101	"tsserver": "bin/tsserver"
	102	},
	103	"engines": {
	104	"node": ">=4.2.0"
	105	}
	106	}
	107	},
	108	"dependencies": {
	109	"@implab/core-amd": {
	110	"version": "1.4.6",
	111	"resolved": "https://registry.npmjs.org/@implab/core-amd/-/core-amd-1.4.6.tgz",
	112	"integrity": "sha512-I1RwUAxeiodePpiBzveoHaehMSAyk7NFPPPEvDqfphHBC8yXoXWAaUrp7EcOKEzjXAs7lJQVhNpmjCjIqoj6BQ==",
	113	"dev": true,
	114	"requires": {}
	115	},
	116	"@implab/djx": {
	117	"version": "file:../djx/build/npm/package",
	118	"requires": {}
	119	},
	120	"@implab/dojo-typings": {
	121	"version": "1.0.2",
	122	"resolved": "https://registry.npmjs.org/@implab/dojo-typings/-/dojo-typings-1.0.2.tgz",
	123	"integrity": "sha512-/lbcMCHdRoHJLKFcT8xdk1KbGazSlb1pGSDJ406io7iMenPm/XbJYcUti+VzXnn71zOJ8aYpGT12T5L0rfOZNA==",
	124	"dev": true
	125	},
	126	"@types/requirejs": {
	127	"version": "2.1.34",
	128	"resolved": "https://registry.npmjs.org/@types/requirejs/-/requirejs-2.1.34.tgz",
	129	"integrity": "sha512-iQLGNE1DyIRYih60B47l/hI5X7J0wAnnRBL6Yn85GUYQg8Fm3wl8kvT6NRwncKroUOSx7/lbAagIFNV7y02DiQ==",
	130	"dev": true
	131	},
	132	"dijit": {
	133	"version": "1.17.3",
	134	"resolved": "https://registry.npmjs.org/dijit/-/dijit-1.17.3.tgz",
	135	"integrity": "sha512-QS+1bNhPT+BF9E+iomQSi5qI+o3oUNSx1r5TF8WlGH4LybGZP+IIGJBOO5/41YduBPljVXhY7vaPsgrycxC6UQ==",
	136	"requires": {
	137	"dojo": "1.17.3"
	138	}
	139	},
	140	"dojo": {
	141	"version": "1.17.3",
	142	"resolved": "https://registry.npmjs.org/dojo/-/dojo-1.17.3.tgz",
	143	"integrity": "sha512-iWDx1oSfCEDnIrs8cMW7Zh9Fbjgxu8iRagFz+Qi2eya3MXIAxFXKhv2A7dpi+bfpMpFozLwcsLV8URLw6BsHsA=="
	144	},
	145	"requirejs": {
	146	"version": "2.3.6",
	147	"resolved": "https://registry.npmjs.org/requirejs/-/requirejs-2.3.6.tgz",
	148	"integrity": "sha512-ipEzlWQe6RK3jkzikgCupiTbTvm4S0/CAU5GlgptkN5SO6F3u0UD0K18wy6ErDqiCyP4J4YYe1HuAShvsxePLg=="
	149	},
	150	"rxjs": {
	151	"version": "7.5.6",
	152	"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.6.tgz",
	153	"integrity": "sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==",
	154	"requires": {
	155	"tslib": "^2.1.0"
	156	}
	157	},
	158	"tslib": {
	159	"version": "2.4.0",
	160	"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
	161	"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
	162	},
	163	"typescript": {
	164	"version": "4.8.2",
	165	"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz",
	166	"integrity": "sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==",
	167	"dev": true
	168	}
	169	}
	170	}

playground/package.json created 644 +17 0

@@ -0,0 +1,17
	1	{
	2	"name": "@implab/djx-playground",
	3	"private": true,
	4	"dependencies": {
	5	"dijit": "1.17.3",
	6	"dojo": "1.17.3",
	7	"requirejs": "2.3.6",
	8	"rxjs": "7.5.6"
	9	},
	10	"devDependencies": {
	11	"@implab/core-amd": "1.4.6",
	12	"@implab/djx": "file:../djx/build/npm/package",
	13	"@implab/dojo-typings": "1.0.2",
	14	"@types/requirejs": "2.1.34",
	15	"typescript": "4.8.2"
	16	}
	17	}

playground/src/bundle/config.js created 644 +16 0

@@ -0,0 +1,16
	1	requirejs.config({
	2	baseUrl: "js",
	3	packages: [
	4	"app",
	5	"@implab/djx",
	6	"@implab/core-amd",
	7	"dojo",
	8	"dijit",
	9	{
	10	name: "rxjs",
	11	location: "rxjs",
	12	main: "rxjs.umd.min"
	13	}
	14	],
	15	deps: ["app"]
	16	});

playground/src/bundle/index.html created 644 +13 0

@@ -0,0 +1,13
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<meta charset='utf-8'>
	5	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
	6	<title>Djx playground</title>
	7	<meta name='viewport' content='width=device-width, initial-scale=1'>
	8	<script data-main="config.js" src='js/require.js'></script>
	9	</head>
	10	<body>
	11
	12	</body>
	13	</html> No newline at end of file

playground/src/main/resources/css/ProgressBar.css created 644 +39 0

@@ -0,0 +1,39
	1	.progress-bar * {
	2	transition: all 0.5s;
	3	}
	4
	5	.progress-bar {
	6
	7	transition: all 0.5s;
	8	height: 1em;
	9	line-height: 0;
	10	font-size: 10px;
	11	white-space: nowrap;
	12	}
	13
	14	.progress-track {
	15	background-color: #888;
	16	height: 0.2em;
	17	box-shadow: 0 0 0.5em 0 #0004;
	18	width: 70%;
	19	display: inline-block;
	20	vertical-align: middle;
	21	}
	22
	23	.progress-indicator {
	24	width: 30%;
	25	background-color: #0ae;
	26	height: 100%;
	27	display: inline-block;
	28	vertical-align: middle;
	29	box-shadow: 0 0.6em 1em -0.4em #000;
	30	}
	31
	32	.progress-bar:hover .progress-indicator {
	33	box-shadow: 0 1em 2em -0.4em #000;
	34	}
	35
	36	.progress-bar:hover .progress-track {
	37	background-color: #0ae;
	38	box-shadow: 0 0 0.5em 0 #0ae;
	39	} No newline at end of file

playground/src/main/ts/MainWidget.tsx created 644 +82 0

@@ -0,0 +1,82
	1	import { djbase, djclass } from "@implab/djx/declare";
	2	import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
	3	import { createElement, watch, prop, attach, all, bind, toggleClass } from "@implab/djx/tsx";
	4	import ProgressBar from "./ProgressBar";
	5	import Button = require("dijit/form/Button");
	6	import { interval } from "rxjs";
	7
	8	@djclass
	9	export default class MainWidget extends djbase(DjxWidgetBase) {
	10
	11	titleNode?: HTMLHeadingElement;
	12
	13	progressBar?: ProgressBar;
	14
	15	count = 0;
	16
	17	showCounter = false;
	18
	19	counterNode?: HTMLInputElement;
	20
	21	paused = false;
	22
	23	render() {
	24	const Counter = ({ children }: { children: unknown[] }) => <span>Counter: {children}</span>;
	25
	26	return <div className="tundra">
	27	<h2 ref={attach(this, "titleNode")}>Hi!</h2>
	28	<ProgressBar ref={attach(this, "progressBar")} />
	29	<section style={{ padding: "10px" }}>
	30	{watch(prop(this, "showCounter"), flag => flag &&
	31	[
	32	<Counter><input ref={all(
	33	bind("value", prop(this, "count")
	34	.map(x => x*10)
	35	.map(String)
	36	),
	37	attach(this, "counterNode")
	38	)} /> <span>ms</span></Counter>,
	39	" \| ",
	40	<span ref={bind("innerHTML", interval(1000))}></span>,
	41	" \| ",
	42	<Button
	43	ref={all(
	44	bind("label", prop(this, "paused")
	45	.map(x => x ? "Unpause" : "Pause")
	46	),
	47	toggleClass("paused", prop(this,"paused"))
	48	)}
	49	onClick={this._onPauseClick}
	50	/>
	51	]
	52
	53	)}
	54	</section>
	55	<Button onClick={this._onToggleCounterClick}>Toggle counter</Button>
	56	</div>;
	57	}
	58
	59	postCreate(): void {
	60	super.postCreate();
	61
	62	const h = setInterval(
	63	() => {
	64	this.set("count", this.count + 1);
	65	},
	66	10
	67	);
	68	this.own({
	69	destroy: () => {
	70	clearInterval(h);
	71	}
	72	});
	73	}
	74
	75	private _onPauseClick = () => {
	76	this.set("paused", !this.paused);
	77	}
	78
	79	private _onToggleCounterClick = () => {
	80	this.set("showCounter", !this.showCounter);
	81	}
	82	}

playground/src/main/ts/ProgressBar.tsx created 644 +19 0

@@ -0,0 +1,19
	1	import { djbase, djclass } from "@implab/djx/declare";
	2	import { createElement } from "@implab/djx/tsx";
	3	import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
	4	import "@implab/djx/css!./css/ProgressBar.css";
	5
	6	@djclass
	7	export default class ProgressBar extends djbase(DjxWidgetBase) {
	8
	9	constructor(opts?: Partial<ProgressBar> & ThisType<ProgressBar>, refNode?: Node \| string) {
	10	super(opts, refNode);
	11	}
	12	render() {
	13	return <div class="progress-bar">
	14	<div class="progress-indicator"/>
	15	<div class="progress-track"/>
	16	</div>;
	17	}
	18
	19	} No newline at end of file

playground/src/main/ts/main.ts created 644 +7 0

@@ -0,0 +1,7
	1	import MainWidget from "./MainWidget";
	2	import "@implab/djx/css!dojo/resources/dojo.css"
	3	import "@implab/djx/css!dijit/themes/dijit.css"
	4	import "@implab/djx/css!dijit/themes/tundra/tundra.css"
	5
	6	const w = new MainWidget();
	7	w.placeAt(document.body); No newline at end of file

playground/src/test/ts/index.ts created 644 0 0

NO CONTENT: new file 100644

playground/src/tsconfig.json created 644 +16 0

@@ -0,0 +1,16
	1	{
	2	"compilerOptions": {
	3	"moduleResolution": "node",
	4	"experimentalDecorators": true,
	5	"module": "AMD",
	6	"jsx": "react",
	7	"jsxFactory": "createElement",
	8	"strict": true,
	9	"types": [
	10	"requirejs",
	11	"@implab/djx",
	12	"@implab/dojo-typings"
	13	],
	14	"skipLibCheck": true
	15	}
	16	} No newline at end of file

djx/build.gradle +27 -1

             plugins {
-                id "org.implab.gradle-typescript" version "1.3.3"
+                id "org.implab.gradle-typescript" version "1.3.4"
                 id "ivy-publish"
             }
+            configurations {
+                "default" {
+                    canBeConsumed = true
+                    canBeResolved = false
+                }
+            }
             typescript {
                 compilerOptions {
                     lib = ["es5", "dom", "scripthost", "es2015.promise", "es2015.symbol", "es2015.iterable"]
                     // listFiles = true
                     declaration = true
                     strict = true
                     types = []
                     module = "amd"
                     it.target = "es5"
                     experimentalDecorators = true
                     noUnusedLocals = false
                     jsx = "react"
                     jsxFactory = "createElement"
                     moduleResolution = "node"
                     // dojo-typings are sick
                     skipLibCheck = true
                     // traceResolution = true
                     // baseUrl = "./"
                     // paths = [ "*": [ "$projectDir/src/typings/*" ] ]
                     // baseUrl = "$projectDir/src/typings"
                     // typeRoots = ["$projectDir/src/typings"]
                 }
                 tscCmd = "$projectDir/node_modules/.bin/tsc"
                 tsLintCmd = "$projectDir/node_modules/.bin/tslint"
             	esLintCmd = "$projectDir/node_modules/.bin/eslint"
             }
             configureTsMain {
                 sourceFiles {
                     from sources.main.typings
                 }
                 compilerOptions {
                     // baseUrl = "$projectDir/src"
                     /*paths = [
                         "dojo/*" : [ "typings/dojo/*" ],
                         "dijit/*" : [ "typings/dijit/*" ]
                     ]*/
                     types = ["requirejs", "@implab/dojo-typings"]
                 }
             }
             configureTsTest {
                 compilerOptions {
                     typeRoots = []
                     types = ["requirejs", sources.main.output.typingsDir.get().toString() ]
                 }
             }
+            tasks.matching{ it.name =~ /^configureTs/ }.configureEach {
+                compilerOptions {
+                    if (symbols != 'none') {
+                        sourceMap = true
+                        switch(symbols) {
+                            case "local":
+                                sourceRoot = ( isWindows ? "file:///" : "file://" ) + it.rootDir
+                            break;
+                        }
+                    }
+                }
+            }
             npmPackMeta {
                 meta {
                     name = "@$npmScope/$project.name"
                 }
             }
             task npmPackTypings(type: Copy) {
                 dependsOn typings
                 npmPackContents.dependsOn it
                 from typescript.typingsDir
                 into npm.packageDir
             }
             task printVersion {
                 doLast {
                     println "packageName: ${npmPackMeta.metadata.get().name}";
                     println "version: $version";
                     println "target: $typescript.compilerOptions.target";
                     println "module: $typescript.compilerOptions.module";
                     println "symbols: $symbols";
                 }
+            }
+            artifacts {
+                "default" (npm.packageDir) {
+                    builtBy npmAssemblePackage
+                }
             }

djx/gradle.properties 0 -1

             group=org.implab.implabjs
             version=
             author=Implab team
             description=Create HyperText with Typescript, integrate Dojo1 widgets in your .tsx scripts.
             license=BSD-2-Clause
             repository=http://hg.code.sf.net/p/implabjs/djx
             npmScope=implab
-            symbols=pack
  No newline at end of file

djx/package-lock.json 0 0

	1	NO CONTENT: modified file			NO CONTENT: modified file
The requested commit or file is too big and content was truncated. Show full diff

djx/package.json +4 -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",
+                    "@types/tap": "15.0.7",
                     "dojo": "1.16.0",
                     "@implab/dojo-typings": "1.0.0",
                     "eslint": "6.8.0",
                     "requirejs": "2.3.6",
                     "tslint": "^6.1.3",
-                    "typescript": "4.2.4",
+                    "typescript": "4.8.2",
-                    "yaml": "~1.7.2"
+                    "yaml": "~1.7.2",
+                    "tap": "16.3.0"
                 }
             }

djx/src/main/ts/tsx.ts +82 -25

-            import { Constructor, IDestroyable, IRemovable } from "@implab/core-amd/interfaces";
+            import { Constructor } from "@implab/core-amd/interfaces";
             import { HtmlRendition } from "./tsx/HtmlRendition";
             import { WidgetRendition } from "./tsx/WidgetRendition";
-            import { destroy, isWidgetConstructor, Rendition } from "./tsx/traits";
+            import { isElementNode, isWidget, isWidgetConstructor, Rendition } from "./tsx/traits";
             import { FunctionRendition } from "./tsx/FunctionRendition";
             import Stateful = require("dojo/Stateful");
             import _WidgetBase = require("dijit/_WidgetBase");
             import { DjxWidgetBase } from "./tsx/DjxWidgetBase";
+            import { WatchRendition } from "./tsx/WatchRendition";
+            import { Observable, observe, Subscribable } from "./observable";
+            import djAttr = require("dojo/dom-attr");
+            import djClass = require("dojo/dom-class");
             export function createElement<T extends Constructor | string | ((props: any) => Element)>(elementType: T, ...args: any[]): Rendition {
                 if (typeof elementType === "string") {
                     const ctx = new HtmlRendition(elementType);
                     if (args)
                         args.forEach(x => ctx.visitNext(x));
                     return ctx;
                 } else if (isWidgetConstructor(elementType)) {
                     const ctx = new WidgetRendition(elementType);
                     if (args)
                         args.forEach(x => ctx.visitNext(x));
                     return ctx;
                 } else if (typeof elementType === "function") {
                     const ctx = new FunctionRendition(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>;
-            type StatefulProps<T> = T extends Stateful<infer A> ? A : never;
+            type StatefulProps<T> = T extends Stateful<infer A> ? A :
+                T extends _WidgetBase ? T : 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>(
                 target: W,
                 prop: K,
-                render: (model: W[K]) => any,
+                render: (model: W[K]) => any
-                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,
+                render: (model: StatefulProps<T>[K]) => any
-                cleanupOrOwner?: { own: CleanFn } | CleanFn
             ): Rendition;
-            export function watch<T extends Stateful, K extends keyof StatefulProps<T> & string>(
+            export function watch<V>(subj: Subscribable<V>, render: (model: V) => unknown): Rendition;
-                target: T,
+            export function watch(
-                prop: K,
+                ...args: [Stateful, string, (model: unknown) => unknown] |
-                render: (model: StatefulProps<T>[K]) => any,
+                    [Subscribable<unknown>, (model: unknown) => unknown]
-                cleanupOrOwner: { own: CleanFn } | CleanFn = () => { }
             ) {
-                let rendition = new FunctionRendition(() => render(target.get(prop)));
+                if (args.length === 3) {
-                const _own = cleanupOrOwner instanceof Function ? cleanupOrOwner : (x: IRemovable) => cleanupOrOwner.own(x);
+                    const [target, prop, render] = args;
-                _own(target.watch(prop, (_name, oldValue, newValue) => {
+                    return new WatchRendition(
-                    if (oldValue !== newValue) {
+                        render,
-                        const newRendition = new FunctionRendition(() => render(newValue));
+                        observe(({next}) => {
-                        newRendition.placeAt(rendition.getDomNode(), "replace");
+                            const h = target.watch<any>(
-                        destroy(rendition.getDomNode());
+                                prop,
-                        rendition = newRendition;
+                                (_prop, oldValue, newValue) => oldValue !== newValue && next(newValue)
+                            );
+                            next(target.get(prop));
+                            return () => h.remove();
+                        })
+                    );
+                } else {
+                    const [subj, render] = args;
+                    return new WatchRendition(render, subj);
+                }
             }
-                }));
-                return rendition;
+            export const prop: {
+                <T extends Stateful, K extends string & keyof StatefulProps<T>>(target: T, name: K): Observable<StatefulProps<T>[K]>;
+                <T extends _WidgetBase, K extends keyof T>(target: T, name: K): Observable<T[K]>;
+            } = (target: Stateful, name: string) => {
+                return observe(({next}) => {
+                    const h = target.watch(
+                        name,
+                        (_prop, oldValue, newValue) => oldValue !== newValue && next(newValue)
+                    );
+                    next(target.get(name));
+                    return () => h.remove();
+                })
+            };
+            export const attach = <W extends DjxWidgetBase, K extends keyof W>(target: W, name: K) => (v: W[K]) => target.set(name, v);
+            export const bind = <K extends string, T>(attr: K, subj: Subscribable<T>) => {
+                let h = { unsubscribe() { } };
+                return <E extends (HTMLElement & { [p in K]: T }) | { set(name: K, value: T): void; }>(el: E | undefined) => {
+                    if (el) {
+                        if (isElementNode(el)) {
+                            h = subj.subscribe({
+                                next: value => djAttr.set(el, attr, value)
+                            });
+                        } else {
+                            h = subj.subscribe({
+                                next: value => el.set(attr, value)
+                            });
                         }
+                    } else {
+                        h.unsubscribe();
+                    }
+                }
+            };
+            export const toggleClass = (className: string, subj: Subscribable<boolean>) => {
+                let h = { unsubscribe() { } };
+                return (elOrWidget: HTMLElement | _WidgetBase | undefined) => {
+                    const el = isWidget(elOrWidget) ? elOrWidget.domNode : elOrWidget;
+                    if (el) {
+                        h = subj.subscribe({
+                            next: v => djClass.toggle(el, className, v)
+                        });
+                    } else {
+                        h.unsubscribe();
+                    }
+                }
+            }
+            export const all = <T, A extends JSX.Ref<T>[]>(...cbs: A): JSX.Ref<T> => (arg: T | undefined) => cbs.forEach(cb => cb(arg));
             /** Decorates the method which will be registered as the handle for the specified event.
              * This decorator can be applied to DjxWidgetBase subclass methods.
              *
              * ```
              *  @on("click")
              *  _onClick(eventObj: MouseEvent) {
              *      // ...
              *  }
              * ```
              */
             export const on = <E extends string>(...eventNames: E[]) =>
                 <K extends string,
                     T extends DjxWidgetBase<any, { [p in E]: EV }>,
                     EV extends Event
                 >(
                     target: T,
                     key: K,
                     _descriptor: TypedPropertyDescriptor<(eventObj: EV) => void> | TypedPropertyDescriptor<() => void>
                 ): any => {
                     const handlers = eventNames.map(eventName => ({ eventName, handlerMethod: key }));
                     target._eventHandlers = target._eventHandlers ? target._eventHandlers.concat(handlers) : handlers;
                 };

djx/src/main/ts/tsx/DjxWidgetBase.ts +16 -2

             import { djbase, djclass } from "../declare";
             import _WidgetBase = require("dijit/_WidgetBase");
             import _AttachMixin = require("dijit/_AttachMixin");
-            import { Rendition, isNode } from "./traits";
+            import { Rendition, isNode, isElementNode } from "./traits";
             import registry = require("dijit/registry");
             import on = require("dojo/on");
+            import { Scope } from "./Scope";
+            import { render } from "./render";
             // 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> {
                 /** This property is declared only for type inference to work, it is never assigned
                  * and should not be used.
                  */
                 readonly _eventMap: Events & GlobalEventHandlersEventMap;
                 /** The list of pairs of event and method names. When the widget is created all methods from
                  * this list will be connected to corresponding events.
                  *
                  * This property is maintained in the prototype
                  */
                 _eventHandlers: Array<{
                     eventName: string,
                     handlerMethod: keyof any;
                 }>;
             }
             type _super = {
                 startup(): void;
+                destroy(preserveDom?: boolean): void;
             };
             @djclass
             export abstract class DjxWidgetBase<Attrs = {}, Events = {}> extends djbase<_super, _AttachMixin>(_WidgetBase, _AttachMixin) {
+                private readonly _scope = new Scope();
                 buildRendering() {
-                    this.domNode = this.render().getDomNode();
+                    const node = render(this.render(), this._scope);
+                    if (!isElementNode(node))
+                        throw new Error("The render method must return a single DOM element");
+                    this.domNode = node as HTMLElement;
                     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;
                     // the donNode is constructed now we need to connect event handlers
                     this._connectEventHandlers();
                     if (src && dest) {
                         while (src.firstChild)
                             dest.appendChild(src.firstChild);
                     }
                 }
                 abstract render(): Rendition<HTMLElement>;
                 private _connectEventHandlers() {
                     if (this._eventHandlers)
                         this._eventHandlers.forEach(({ eventName, handlerMethod }) => {
                             const handler = this[handlerMethod as keyof this];
                             if (typeof handler === "function")
                                 on(this.domNode, eventName, handler.bind(this));
                         });
                 }
                 _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();
                 }
+                destroy(preserveDom?: boolean) {
+                    this._scope.destroy();
+                    super.destroy(preserveDom);
                 }
+            }

djx/src/main/ts/tsx/FunctionRendition.ts +4 -4

             import { argumentNotNull } from "@implab/core-amd/safe";
+            import { getItemDom } from "./render";
             import { RenditionBase } from "./RenditionBase";
             export class FunctionRendition extends RenditionBase<Node> {
                 private _component: (...args: any[]) => any;
                 private _node: Node | undefined;
                 constructor(component: (...args: any[]) => any) {
                     super();
                     argumentNotNull(component, "component");
                     this._component = component;
                 }
                 protected _create(attrs: object, children: any[]) {
                     const _attrs: any = attrs || {};
-                    const _children = children.map(x => this.getItemDom(x));
+                    const _children = children.map(x => getItemDom(x));
-                    this._node = this.getItemDom(
+                    this._node = getItemDom(
-                        this._component.call(null, { ..._attrs, children: _children })
+                        this._component.call(null, { ..._attrs, children: _children }));
-                    );
                 }
                 protected _getDomNode() {
                     if (!this._node)
                         throw new Error("The instance of the widget isn't created");
                     return this._node;
                 }
             }

djx/src/main/ts/tsx/HtmlRendition.ts +21 -7

-            import dom = require("dojo/dom-construct");
+            import djDom = require("dojo/dom-construct");
+            import djAttr = require("dojo/dom-attr");
             import { argumentNotEmptyString } from "@implab/core-amd/safe";
             import { RenditionBase } from "./RenditionBase";
+            import { placeAt } from "./traits";
+            import { getItemDom, refHook } from "./render";
-            export class HtmlRendition extends RenditionBase<HTMLElement> {
+            export class HtmlRendition extends RenditionBase<Element> {
                 elementType: string;
-                _element: HTMLElement | undefined;
+                _element: Element | undefined;
                 constructor(elementType: string) {
                     argumentNotEmptyString(elementType, "elementType");
                     super();
                     this.elementType = elementType;
                 }
-                _addChild(child: any): void {
+                _addChild(child: unknown): void {
                     if (!this._element)
                         throw new Error("The HTML element isn't created");
-                    dom.place(this.getItemDom(child), this._element);
+                    placeAt(getItemDom(child), this._element);
                 }
-                _create(attrs: object, children: any[]) {
+                _create({ xmlns, ref, ...attrs }: { xmlns?: string, ref?: JSX.Ref<Element> }, children: unknown[]) {
-                    this._element = dom.create(this.elementType, attrs);
+                    if (xmlns) {
+                        this._element = document.createElementNS(xmlns, this.elementType);
+                        djAttr.set(this._element, attrs);
+                    } else {
+                        this._element = djDom.create(this.elementType, attrs);
+                    }
                     children.forEach(v => this._addChild(v));
+                    const element =  this._element;
+                    if (ref)
+                        refHook(element, ref);
                 }
                 _getDomNode() {
                     if (!this._element)
                         throw new Error("The HTML element isn't created");
                     return this._element;
                 }
             }

djx/src/main/ts/tsx/RenditionBase.ts +9 -56

-            import { isNull, mixin } from "@implab/core-amd/safe";
+            import { isPlainObject, DojoNodePosition, Rendition, isDocumentFragmentNode, placeAt, collectNodes, isMounted, startupWidgets } from "./traits";
-            import { isPlainObject, isNode, isRendition, DojoNodePosition, Rendition, isInPage, isWidget, isDocumentFragmentNode, startupWidgets } from "./traits";
-            import dom = require("dojo/dom-construct");
-            import registry = require("dijit/registry");
             export abstract class RenditionBase<TNode extends Node> implements Rendition<TNode> {
                 private _attrs = {};
                 private _children = new Array();
                 private _created: boolean = false;
                 visitNext(v: any) {
                     if (this._created)
                         throw new Error("The Element is already created");
-                    if (isNull(v) || typeof v === "boolean")
+                    if (v === null || v === undefined || typeof v === "boolean")
                         // skip null, undefined, booleans ( this will work:  {value && <span>{value}</span>} )
                         return;
                     if (isPlainObject(v)) {
-                        mixin(this._attrs, v);
+                        this._attrs = {... this._attrs, ...v};
                     } else if (v instanceof Array) {
                         v.forEach(x => this.visitNext(x));
                     } else {
                         this._children.push(v);
                     }
                 }
-                /** Renders DOM element for different types of the argument. */
-                protected getItemDom(v: any) {
-                    const tv = typeof v;
-                    if (tv === "string" || tv === "number" || v instanceof RegExp || v instanceof Date) {
-                        // primitive types converted to the text nodes
-                        return document.createTextNode(v.toString());
-                    } else if (isNode(v)) {
-                        // nodes are kept as is
-                        return v;
-                    } else if (isRendition(v)) {
-                        // renditions are instantiated
-                        return v.getDomNode();
-                    } else if (isWidget(v)) {
-                        // widgets are converted to it's markup
-                        return v.domNode;
-                    } else if (tv === "boolean" || v === null || v === undefined) {
-                        // null | undefined | boolean are removed, converted to comments
-                        return document.createComment(`[${tv} ${String(v)}]`);
-                    } else {
-                        // bug: explicit error otherwise
-                        throw new Error("Invalid parameter: " + v);
                 ensureCreated() {
                     if (!this._created) {
                         this._create(this._attrs, this._children);
                         this._children = [];
                         this._attrs = {};
                         this._created = true;
                     }
                 }
                 /** Is rendition was instantiated to the DOM node */
                 isCreated() {
                     return this._created;
                 }
                 /** Creates DOM node if not created. No additional actions are taken. */
                 getDomNode() {
                     this.ensureCreated();
                     return this._getDomNode();
                 }
                 /** Creates DOM node if not created, places it to the specified position
                  * and calls startup() method for all widgets contained by this node.
                  *
                  * @param {string | Node} refNode The reference node where the created
                  *   DOM should be placed.
                  * @param {DojoNodePosition} position Optional parameter, specifies the
                  *   position relative to refNode. Default is "last" (i.e. last child).
                  */
-                placeAt(refNode: string | Node, position?: DojoNodePosition) {
+                placeAt(refNode: string | Node, position: DojoNodePosition = "last") {
                     const domNode = this.getDomNode();
-                    const collect = (collection: HTMLCollection) => {
+                    const startupPending = isDocumentFragmentNode(domNode) ? collectNodes(domNode.childNodes) : [domNode];
-                        const items = [];
-                        for (let i = 0, n = collection.length; i < n; i++) {
-                            items.push(collection[i]);
-                        return items;
-                    };
-                    const startup = (node: Node) => {
+                    placeAt(domNode, refNode, position);
-                        if (node.parentNode) {
-                            const parentWidget = registry.getEnclosingWidget(node.parentNode);
-                            if (parentWidget && parentWidget._started)
-                                return startupWidgets(node);
-                        if (isInPage(node))
-                            startupWidgets(node);
-                    };
-                    const startupPending = isDocumentFragmentNode(domNode) ? collect(domNode.children) : [domNode];
+                    if (isMounted(startupPending[0]))
+                        startupPending.forEach(n => startupWidgets(n));
-                    dom.place(domNode, refNode, position);
-                    startupPending.forEach(startup);
                 }
-                protected abstract _create(attrs: object, children: any[]): void;
+                protected abstract _create(attrs: object, children: unknown[]): void;
                 protected abstract _getDomNode(): TNode;
             }

djx/src/main/ts/tsx/Scope.ts +5 -2

             import { IDestroyable, IRemovable } from "@implab/core-amd/interfaces";
             import { isDestroyable, isRemovable } from "@implab/core-amd/safe";
+            import { isUnsubsribable, Unsubscribable } from "../observable";
             export interface IScope {
-                own(target: (() => void) | IDestroyable | IRemovable): void;
+                own(target: (() => void) | IDestroyable | IRemovable | Unsubscribable): void;
             }
             export class Scope implements IDestroyable, IScope {
                 private readonly _cleanup: (() => void)[] = [];
                 static readonly dummy: IScope = { own() { } };
-                own(target: (() => void) | IDestroyable | IRemovable) {
+                own(target: (() => void) | IDestroyable | IRemovable | Unsubscribable) {
                     if (target instanceof Function) {
                         this._cleanup.push(target);
                     } else if (isDestroyable(target)) {
                         this._cleanup.push(() => target.destroy());
                     } else if (isRemovable(target)) {
                         this._cleanup.push(() => target.remove());
+                    } else if (isUnsubsribable(target)) {
+                        this._cleanup.push(() => target.unsubscribe());
                     }
                 }
                 clean() {
                     const guard = (cb: () => void) => {
                         try {
                             cb();
                         } catch {
                             // guard
                         }
                     }
                     this._cleanup.forEach(guard);
                     this._cleanup.length = 0;
                 }
                 destroy() {
                     this.clean();
                 }
             }

djx/src/main/ts/tsx/WatchRendition.ts +62 -23

@@ -1,58 +1,97
1	import { id as mid } from "module";	1	import { id as mid } from "module";
2	import { TraceSource } from "@implab/core-amd/log/TraceSource";	2	import { TraceSource } from "@implab/core-amd/log/TraceSource";
3	import { argumentNotNull } from "@implab/core-amd/safe";	3	import { argumentNotNull } from "@implab/core-amd/safe";
4	import { place } from "dojo/dom-construct";	4	import { getScope, render } from "./render";
5	import { getScope, render } from "./Renderer";
6	import { RenditionBase } from "./RenditionBase";	5	import { RenditionBase } from "./RenditionBase";
7	import { Scope } from "./Scope";	6	import { Scope } from "./Scope";
8	import { ~~locateNod~~e } from ".~~/traits~~";	7	import { Subscribable } from "../observable";
		8	import { Cancellation } from "@implab/core-amd/Cancellation";
		9	import { collectNodes, destroy, isDocumentFragmentNode, isMounted, placeAt, startupWidgets } from "./traits";
9		10
10	const trace = TraceSource.get(mid);	11	const trace = TraceSource.get(mid);
11		12
12	export class WatchRendition<T> extends RenditionBase<Node> {	13	export class WatchRendition<T> extends RenditionBase<Node> {
13	private readonly _~~factory~~: (arg: T) => ~~any~~;	14	private readonly _component: (arg: T) => unknown;
14		15
15	private _node: Node;	16	private readonly _node: Node;
16		17
17	private readonly _scope = new Scope();	18	private readonly _scope = new Scope();
18		19
19	constructor(component: (arg: T) => any, subject: any) {	20	private readonly _subject: Subscribable<T>;
		21
		22	private _renderJob?: { value: T };
		23
		24	private _ct = Cancellation.none;
		25
		26	constructor(component: (arg: T) => unknown, subject: Subscribable<T>) {
20	super();	27	super();
21	argumentNotNull(component, "component");	28	argumentNotNull(component, "component");
22		29
23	this._~~factory~~ = component;	30	this._component = component;
		31
		32	this._subject = subject;
		33
		34	this._node = document.createComment("[Watch]");
		35	}
24		36
25	this._node = document.createComment("WatchRendition placeholder");	37	protected _create() {
		38	const scope = getScope();
		39	scope.own(() => {
		40	this._scope.destroy();
		41	destroy(this._node);
		42	});
		43	scope.own(this._subject.subscribe({ next: this._onValue }));
		44	this._ct = new Cancellation(cancel => scope.own(cancel));
26	}	45	}
27		46
28	protected _create(attrs: object, children: any[]) {	47	private _onValue = (value: T) => {
29	const _attrs: any = attrs \|\| {};	48	if (!this._renderJob) {
30	const _children = children.map(x => this.getItemDom(x));	49	// schedule a new job
31	this._node = this.getItemDom(	50	this._renderJob = { value };
32	this._factory.call(null, { ..._attrs, children: _children })	51	this._render().catch(e => trace.error(e));
		52	} else {
		53	// update existing job
		54	this._renderJob = { value };
		55	}
		56	}
		57
		58	private async _render() {
		59	// fork
		60	await Promise.resolve();
		61	// don't render destroyed rendition
		62	if (this._ct.isRequested())
		63	return;
		64
		65	// remove all previous content
		66	this._scope.clean();
		67
		68	// render the new node
		69	const node = render(
		70	this._renderJob ? this._component(this._renderJob.value) : undefined,
		71	this._scope
33	);	72	);
34		73
35	const scope = getScope();	74	// get actual content
36	scope.own(this._scope);	75	const pending = isDocumentFragmentNode(node) ?
		76	collectNodes(node.childNodes) :
		77	[node];
37		78
38	// если отрендерили текст? или DocumentFragment	79	placeAt(node, this._node, "after");
39	}
40		80
41	private async _render(value: T) {	81	if (isMounted(this._node))
42	const [refNode, position] = locateNode(this._node);	82	pending.forEach(n => startupWidgets(n));
43	this._scope.clean();
44		83
45	this._node = await render(() => this._factory(value), this._scope);	84	if (pending.length)
		85	this._scope.own(() => pending.forEach(destroy));
46		86
47	if (refNode)	87	this._renderJob = undefined;
48	place(this._node, refNode, position);
49	}	88	}
50		89
51	protected _getDomNode() {	90	protected _getDomNode() {
52	if (!this._node)	91	if (!this._node)
53	throw new Error("The instance of the widget isn't created");	92	throw new Error("The instance of the widget isn't created");
54	return this._node;	93	return this._node;
55	}	94	}
56		95
57		96
58	}	97	}

djx/src/main/ts/tsx/WidgetRendition.ts +13 -11

-            import dom = require("dojo/dom-construct");
             import { argumentNotNull } from "@implab/core-amd/safe";
             import { RenditionBase } from "./RenditionBase";
-            import { DojoNodePosition, isElementNode, isInPage, isWidget } from "./traits";
+            import { DojoNodePosition, isElementNode, isInPage, isWidget, placeAt } from "./traits";
             import registry = require("dijit/registry");
             import ContentPane = require("dijit/layout/ContentPane");
+            import { getItemDom, refHook } from "./render";
             // tslint:disable-next-line: class-name
             export interface _Widget {
                 domNode: Node;
                 containerNode?: Node;
                 placeAt?(refNode: string | Node, position?: DojoNodePosition): void;
                 startup?(): void;
-                addChild?(widget: any, index?: number): void;
+                addChild?(widget: unknown, index?: number): void;
             }
-            export type _WidgetCtor = new (attrs: any, srcNode?: string | Node) => _Widget;
+            export type _WidgetCtor = new (attrs: {}, srcNode?: string | Node) => _Widget;
             export class WidgetRendition extends RenditionBase<Node> {
                 readonly widgetClass: _WidgetCtor;
                 _instance: _Widget | undefined;
                 constructor(widgetClass: _WidgetCtor) {
                     super();
                     argumentNotNull(widgetClass, "widgetClass");
                     this.widgetClass = widgetClass;
                 }
-                _addChild(child: any): void {
+                _addChild(child: unknown): void {
                     const instance = this._getInstance();
                     if (instance.addChild) {
                         if (child instanceof WidgetRendition) {
                             // layout containers add custom logic to addChild methods
                             instance.addChild(child.getWidgetInstance());
                         } else if (isWidget(child)) {
                             instance.addChild(child);
                         } else {
-                            const childDom = this.getItemDom(child);
+                            const childDom = getItemDom(child);
                             const w = isElementNode(childDom) ? registry.byNode(childDom) : undefined;
                             if (w) {
                                 instance.addChild(w);
                             } else {
                                 if (!instance.containerNode)
                                     throw new Error("Failed to add DOM content. The widget doesn't have a containerNode");
                                 // the current widget isn't started, it's children shouldn't start too
-                                dom.place(this.getItemDom(child), instance.containerNode);
+                                placeAt(getItemDom(child), instance.containerNode, "last");
                             }
                         }
                     } else {
                         if (!instance.containerNode)
                             throw new Error("The widget doesn't have neither addChild nor containerNode");
                         // the current widget isn't started, it's children shouldn't start too
-                        dom.place(this.getItemDom(child), instance.containerNode);
+                        placeAt(getItemDom(child), instance.containerNode, "last");
                     }
                 }
-                protected _create(attrs: any, children: any[]) {
+                protected _create({ref, ...attrs}: {ref?: JSX.Ref<_Widget>}, children: unknown[]) {
                     if (this.widgetClass.prototype instanceof ContentPane) {
                         // a special case for the ContentPane this is for
-                        // the compatibility with this heavy widget, all
+                        // compatibility with that heavy widget, all
                         // regular containers could be easily manipulated
                         // through `containerNode` property or `addChild` method.
                         // render children to the DocumentFragment
                         const content = document.createDocumentFragment();
-                        children.forEach(child => content.appendChild(this.getItemDom(child)));
+                        children.forEach(child => content.appendChild(getItemDom(child)));
                         // set the content property to the parameters of the widget
                         const _attrs = { ...attrs, content };
                         this._instance = new this.widgetClass(_attrs);
                     } else {
                         this._instance = new this.widgetClass(attrs);
                         children.forEach(x => this._addChild(x));
                     }
+                    if (ref)
+                        refHook(this._instance, ref);
                 }
                 private _getInstance() {
                     if (!this._instance)
                         throw new Error("The instance of the widget isn't created");
                     return this._instance;
                 }
                 protected _getDomNode() {
                     if (!this._instance)
                         throw new Error("The instance of the widget isn't created");
                     return this._instance.domNode;
                 }
                 /** Overrides default placeAt implementation. Calls placeAt of the
                  * widget and then starts it.
                  *
                  * @param refNode A node or id of the node where the widget should be placed.
                  * @param position A position relative to refNode.
                  */
                 placeAt(refNode: string | Node, position?: DojoNodePosition) {
                     this.ensureCreated();
                     const instance = this._getInstance();
                     if (typeof instance.placeAt === "function") {
                         instance.placeAt(refNode, position);
                         // fix the dojo startup behavior when the widget is placed
                         // directly to the document and doesn't have any enclosing widgets
                         const parentWidget = instance.domNode.parentNode ?
                             registry.getEnclosingWidget(instance.domNode.parentNode) : null;
                         if (!parentWidget && isInPage(instance.domNode) && typeof instance.startup === "function")
                             instance.startup();
                     } else {
                         // the widget doesn't have a placeAt method, strange but whatever
                         super.placeAt(refNode, position);
                     }
                 }
                 getWidgetInstance() {
                     this.ensureCreated();
                     return this._getInstance();
                 }
             }

djx/src/main/ts/tsx/render.ts ~~djx/src/main/ts/tsx/Renderer.ts~~ renamed +101 -15

@@ -1,26 +1,112
1	import { Scope } from "./Scope";	1	import { TraceSource } from "@implab/core-amd/log/TraceSource";
2	import { destroy, Rendition } from "./traits";	2	import { isPromise } from "@implab/core-amd/safe";
		3	import { id as mid } from "module";
		4	import { IScope, Scope } from "./Scope";
		5	import { isNode, isRendition, isWidget } from "./traits";
		6
		7	const trace = TraceSource.get(mid);
3		8
4	let _scope = Scope.dummy;	9	interface Context {
		10	scope: IScope;
5		11
6	const beginRender = async () => {	12	hooks?: (() => void)[];
		13	}
		14
		15	let _context: Context = {
		16	scope: Scope.dummy
7	}	17	}
8		18
9	const endRender = () => {	19	const guard = (cb: () => unknown) => {
		20	try {
		21	const result = cb()
		22	if (isPromise(result)) {
		23	const warn = (ret: unknown) => trace.error("The callback {0} competed asynchronously. result = {1}", cb, ret);
		24	result.then(warn, warn);
		25	}
		26	} catch (e) {
		27	trace.error(e);
		28	}
		29	}
		30
		31	export const beginRender = (scope: IScope = getScope()) => {
		32	const prev = _context;
		33	_context = {
		34	scope,
		35	hooks: []
		36	};
		37	return endRender(prev);
		38	}
		39
		40	/**
		41	* Completes render operation
		42	*/
		43	const endRender = (prev: Context) => () => {
		44	const { hooks } = _context;
		45	if (hooks)
		46	hooks.forEach(guard);
		47
		48	_context = prev;
10	}	49	}
11		50
12	export const getScope = () => _scope;	51	export const renderHook = (hook: () => void) => {
		52	const { hooks } = _context;
		53	if (hooks)
		54	hooks.push(hook);
		55	else
		56	guard(hook);
		57	}
13		58
14	export const render = async (rendition: () => Rendition, scope = Scope.dummy) => {	59	export const refHook = <T>(value: T, ref: JSX.Ref<T>) => {
15	await beginRender();	60	const { hooks, scope } = _context;
16	const prev = _scope;	61	if (hooks)
17	_scope = scope;	62	hooks.push(() => ref(value));
		63	else
		64	guard(() => ref(value));
		65
		66	scope.own(() => ref(undefined));
		67	}
		68
		69	/** Returns the current scope */
		70	export const getScope = () => _context.scope;
		71
		72	/** Schedules the rendition to be rendered to the DOM Node
		73	* @param rendition The rendition to be rendered
		74	* @param scope The scope
		75	*/
		76	export const render = (rendition: unknown, scope = Scope.dummy) => {
		77	const complete = beginRender(scope);
18	try {	78	try {
19	const node = rendition().getDomNode();	79	return getItemDom(rendition);
20	scope.own(() => destroy(node));
21	return node;
22	} finally {	80	} finally {
23	~~_scope~~ = ~~prev~~;	81	complete();
24	endRender();
25	}	82	}
26	}	83	}
		84
		85	/** Renders DOM element for different types of the argument. */
		86	export const getItemDom = (v: unknown) => {
		87	if (typeof v === "string" \|\| typeof v === "number" \|\| v instanceof RegExp \|\| v instanceof Date) {
		88	// primitive types converted to the text nodes
		89	return document.createTextNode(v.toString());
		90	} else if (isNode(v)) {
		91	// nodes are kept as is
		92	return v;
		93	} else if (isRendition(v)) {
		94	// renditions are instantiated
		95	return v.getDomNode();
		96	} else if (isWidget(v)) {
		97	// widgets are converted to it's markup
		98	return v.domNode;
		99	} else if (typeof v === "boolean" \|\| v === null \|\| v === undefined) {
		100	// null \| undefined \| boolean are removed
		101	return document.createDocumentFragment();
		102	} else if (v instanceof Array) {
		103	// arrays will be translated to document fragments
		104	const fragment = document.createDocumentFragment();
		105	v.map(item => getItemDom(item))
		106	.forEach(node => fragment.appendChild(node));
		107	return fragment;
		108	} else {
		109	// bug: explicit error otherwise
		110	throw new Error("Invalid parameter: " + v);
		111	}
		112	}

djx/src/main/ts/tsx/traits.ts +109 -56

             import { IDestroyable } 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");
-            type _WidgetBaseConstructor = typeof _WidgetBase;
+            interface _WidgetBaseConstructor {
+                new <A = {}, E extends { [k in keyof E]: Event } = {}>(params?: Partial<_WidgetBase<E> & A>, srcNodeRef?: dojo.NodeOrString): _WidgetBase<E> & dojo._base.DeclareCreatedObject;
+                prototype: _WidgetBase<any>;
+            }
             export type DojoNodePosition = "first" | "after" | "before" | "last" | "replace" | "only" | number;
-            export type DojoNodeLocation = [Node | null, DojoNodePosition];
+            export type DojoNodeLocation = [Node, DojoNodePosition];
             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 {
+            export const isNode = (el: unknown): el is Node => !!(el && (el as Node).nodeName && (el as Node).nodeType);
-                return el && el.nodeName && el.nodeType;
-            export function isElementNode(el: any): el is Element {
+            export const isElementNode = (el: unknown): el is Element => isNode(el) && el.nodeType === 1;
-                return isNode(el) && el.nodeType === 1;
-            export function isTextNode(el: any): el is Text {
+            export const isTextNode = (el: unknown): el is Text => isNode(el) && el.nodeType === 3;
-                return isNode(el) && el.nodeType === 3;
-            export function isProcessingInstructionNode(el: any): el is ProcessingInstruction {
+            export const isProcessingInstructionNode = (el: unknown): el is ProcessingInstruction => isNode(el) && el.nodeType === 7;
-                return isNode(el) && el.nodeType === 7;
-            export function isCommentNode(el: any): el is Comment {
+            export const isCommentNode = (el: unknown): el is Comment => isNode(el) && el.nodeType === 8;
-                return isNode(el) && el.nodeType === 8;
-            export function isDocumentNode(el: any): el is Document {
+            export const isDocumentNode = (el: unknown): el is Document => isNode(el) && el.nodeType === 9;
-                return isNode(el) && el.nodeType === 9;
-            export function isDocumentTypeNode(el: any): el is DocumentType {
+            export const isDocumentTypeNode = (el: unknown): el is DocumentType => isNode(el) && el.nodeType === 10;
-                return isNode(el) && el.nodeType === 10;
-            export function isDocumentFragmentNode(el: any): el is DocumentFragment {
+            export const isDocumentFragmentNode = (el: any): el is DocumentFragment => isNode(el) && el.nodeType === 11;
-                return isNode(el) && el.nodeType === 11;
-            export function isWidget(v: any): v is _WidgetBase {
+            export const isWidget = (v: unknown): v is _WidgetBase => !!(v && "domNode" in (v as _WidgetBase));
-                return v && "domNode" in v;
-            export function isRendition(v: any): v is Rendition {
+            export const isRendition = (v: unknown): v is Rendition => !!(v && typeof (v as Rendition).getDomNode === "function");
-                return v && typeof v.getDomElement === "function";
             /**
              * @deprecated use isRendition
              */
             export const isBuildContext = isRendition;
-            export function isPlainObject(v: object) {
+            export const 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 {
+            export const isWidgetConstructor = (v: unknown): v is _WidgetBaseConstructor =>
-                return typeof v === "function" && v.prototype && (
+                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) {
+            export const isInPage = (node: Node) => node === document.body ? false : document.body.contains(node);
-                return (node === document.body) ? false : document.body.contains(node);
-            export function isRecursivelyDestroyable(target: any): target is IRecursivelyDestroyable {
+            export const isRecursivelyDestroyable = (target: unknown): target is IRecursivelyDestroyable =>
-                return target && typeof target.destroyRecursive === "function";
+                !!(target && typeof (target as IRecursivelyDestroyable).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) {
+            export const destroy = (target: Node | IDestroyable | IRecursivelyDestroyable) => {
                 if (isRecursivelyDestroyable(target)) {
                     target.destroyRecursive();
                 } else if (isDestroyable(target)) {
                     target.destroy();
                 } else if (isNode(target)) {
                     if (isElementNode(target)) {
                         const w = registry.byNode(target);
                         if (w) {
                             w.destroyRecursive();
+                            return;
                         } else {
-                            registry.findWidgets(target).forEach(destroy);
+                            emptyNode(target);
-                            dom.destroy(target);
                         }
                     }
+                    const parent = target.parentNode;
+                    if (parent)
+                        parent.removeChild(target);
                 }
             }
             /** Empties a content of the specified node and destroys all contained widgets.
              *
-             * @param target DOM node to .
+             * @param target DOM node to empty.
              */
-            export function emptyNode(target: Node) {
+            export const emptyNode = (target: Node) => {
                 registry.findWidgets(target).forEach(destroy);
-                dom.empty(target);
+                for (let c; c = target.lastChild;) { // intentional assignment
+                    target.removeChild(c);
+                }
             }
             /** 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) {
+            export const startupWidgets = (target: Node | _WidgetBase, skipNode?: Node) => {
                 if (isNode(target)) {
                     if (isElementNode(target)) {
                         const w = registry.byNode(target);
                         if (w) {
                             if (w.startup)
                                 w.startup();
                         } else {
                             registry.findWidgets(target, skipNode).forEach(x => x.startup());
                         }
                     }
                 } else {
                     if (target.startup)
                         target.startup();
                 }
             }
-            export function locateNode(node: Node): DojoNodeLocation {
+            /** Places the specified DOM node at the specified location.
-                const next = node.nextSibling;
-                return next ?
+             * @param node The node which should be placed
-                    [next, "before"] :
+             * @param refNodeOrId The reference node where the created
-                    [node.parentNode, "last"];
+             *  DOM should be placed.
-            }
  No newline at end of file
+             * @param position  Optional parameter, specifies the
+             *  position relative to refNode. Default is "last" (i.e. last child).
+             */
+            export const placeAt = (node: Node, refNodeOrId: string | Node, position: DojoNodePosition = "last") => {
+                const ref = typeof refNodeOrId == "string" ? document.getElementById(refNodeOrId) : refNodeOrId;
+                if (!ref)
+                    return;
+                const parent = ref.parentNode;
+                if (typeof position == "number") {
+                    if (ref.childNodes.length <= position) {
+                        ref.appendChild(node);
+                    } else {
+                        ref.insertBefore(node, ref.childNodes[position]);
+                    }
+                } else {
+                    switch (position) {
+                        case "before":
+                            parent && parent.insertBefore(node, ref);
+                            break;
+                        case "after":
+                            parent && parent.insertBefore(node, ref.nextSibling);
+                            break;
+                        case "first":
+                            ref.insertBefore(node, ref.firstChild);
+                            break;
+                        case "last":
+                            ref.appendChild(node);
+                            break;
+                        case "only":
+                            emptyNode(ref);
+                            ref.appendChild(node);
+                            break;
+                        case "replace":
+                            if (parent)
+                                parent.replaceChild(node, ref);
+                            destroy(ref);
+                            break;
+                    }
+                }
+            }
+            /** Collects nodes from collection to an array.
+             *
+             * @param collection The collection of nodes.
+             * @returns The array of nodes.
+             */
+            export const collectNodes = (collection: NodeListOf<ChildNode>) => {
+                const items = [];
+                for (let i = 0, n = collection.length; i < n; i++) {
+                    items.push(collection[i]);
+                }
+                return items;
+            };
+            export const isMounted = (node: Node) => {
+                if (node.parentNode) {
+                    const parentWidget = registry.getEnclosingWidget(node.parentNode);
+                    if (parentWidget && parentWidget._started)
+                        return true;
+                }
+                if (isInPage(node))
+                    return true;
+                return false;
+            };
  No newline at end of file

djx/src/main/typings/css-plugin.d.ts ~~djx/src/main/typings/css.d.ts~~ renamed 0 0

NO CONTENT: file renamed from djx/src/main/typings/css.d.ts to djx/src/main/typings/css-plugin.d.ts

djx/src/main/typings/index.d.ts +16 -3

-            /// <reference path="./css.d.ts"/>
+            /// <reference path="./css-plugin.d.ts"/>
             declare namespace JSX {
-                interface DjxIntrinsicAttributes {
+                type Ref<T> = ((value: T | undefined) => void);
+                interface DjxIntrinsicAttributes<E> {
                     /** alias for className */
                     class: string;
                     /** specifies the name of the property in the widget where the the
                      * reference to the current object will be stored
                      */
                     "data-dojo-attach-point": string;
                     /** specifies handlers map for the events */
                     "data-dojo-attach-event": string;
+                    ref: Ref<E>;
                     /** @deprecated */
                     [attr: string]: any;
                 }
                 interface DjxIntrinsicElements {
                 }
                 type RecursivePartial<T> = T extends string | number | boolean | null | undefined | Function ?
                     T :
                     { [k in keyof T]?: RecursivePartial<T[k]> };
                 type MatchingMemberKeys<T, U> = {
                     [K in keyof T]: T[K] extends U ? K : never;
                 }[keyof T];
                 type NotMatchingMemberKeys<T, U> = {
                     [K in keyof T]: T[K] extends U ? never : K;
                 }[keyof T];
                 type ExtractMembers<T, U> = Pick<T, MatchingMemberKeys<T, U>>;
                 type ExcludeMembers<T, U> = Pick<T, NotMatchingMemberKeys<T, U>>;
                 type ElementAttrNames<E> = NotMatchingMemberKeys<E, (...args: any[]) => any>;
                 type ElementAttrType<E, K extends keyof any> = K extends keyof E ? RecursivePartial<E[K]> : string;
                 type ElementAttrNamesBlacklist = "children" | "getRootNode" | keyof EventTarget;
                 /** This type extracts keys of the specified parameter E by the following rule:
                  *  1. skips all ElementAttrNamesBlacklist
                  *  2. skips all methods except with the signature of event handlers
                  */
                 type AssignableElementAttrNames<E> = {
                     [K in keyof E]: K extends ElementAttrNamesBlacklist ? never :
                         ((evt: Event) => any) extends E[K] ? K :
                         E[K] extends ((...args: any[]) => any) ? never :
                         K;
                 }[keyof E];
                 type LaxElement<E extends object> =
                     Pick<E, AssignableElementAttrNames<E>> &
-                    DjxIntrinsicAttributes;
+                    DjxIntrinsicAttributes<E>;
                 type LaxIntrinsicElementsMap = {
                     [tag in keyof HTMLElementTagNameMap]: LaxElement<HTMLElementTagNameMap[tag]>
                 } & DjxIntrinsicElements;
                 type IntrinsicElements = {
                     [tag in keyof LaxIntrinsicElementsMap]: RecursivePartial<LaxIntrinsicElementsMap[tag]>;
                 }
+                interface ElementChildrenAttribute {
+                    children: {};
                 }
+                interface IntrinsicClassAttributes<T> {
+                    ref?: (value: T) => void;
+                    children?: unknown;
+                }
+            }

djx/src/test/ts/plan.ts +2 -1

@@ -1,1 +1,2
1	import "./~~DeclareT~~ests"; No newline at end of file	1	import "./declare-tests";
		2	import "./observable-tests"; No newline at end of file

djx/src/test/ts/view/MyWidget.tsx +2 -2

             import { djbase, djclass, bind, prototype, AbstractConstructor } from "../declare";
             import { DjxWidgetBase } from "../tsx/DjxWidgetBase";
             import { createElement, on } from "../tsx";
             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>;
+                    const Frame = ({children, ref}: {ref: JSX.Ref<HTMLDivElement>, children: any[]}) => <div ref={ref} >{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>
+                        <Frame ref={ v => {}}>
                             <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.emit("count-inc", { bubbles: false });
                 }
                 _onDecClick() {
                     this.emit("count-dec", { bubbles: false, detail: this.counter });
                 }
                 @on("count-inc")
                 private _onCounterInc(evt: Event & { detail: number; x?: number; }) {
                 }
                 @on("click", "keydown")
                 protected _onClick(event: MouseEvent | KeyboardEvent) {
                 }
             }

gradle/wrapper/gradle-wrapper.jar binary modified 0 0

NO CONTENT: modified file, binary diff hidden

gradle/wrapper/gradle-wrapper.properties +1 -1

             distributionBase=GRADLE_USER_HOME
             distributionPath=wrapper/dists
-            distributionUrl=https\://services.gradle.org/distributions/gradle-6.1-bin.zip
+            distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-bin.zip
             zipStoreBase=GRADLE_USER_HOME
             zipStorePath=wrapper/dists

gradlew +12 -17

             #!/usr/bin/env sh
             #
             # Copyright 2015 the original author or authors.
             #
             # Licensed under the Apache License, Version 2.0 (the "License");
             # you may not use this file except in compliance with the License.
             # You may obtain a copy of the License at
             #
             #      https://www.apache.org/licenses/LICENSE-2.0
             #
             # Unless required by applicable law or agreed to in writing, software
             # distributed under the License is distributed on an "AS IS" BASIS,
             # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
             # See the License for the specific language governing permissions and
             # limitations under the License.
             #
             ##############################################################################
             ##
             ##  Gradle start up script for UN*X
             ##
             ##############################################################################
             # Attempt to set APP_HOME
             # Resolve links: $0 may be a link
             PRG="$0"
             # Need this for relative symlinks.
             while [ -h "$PRG" ] ; do
                 ls=`ls -ld "$PRG"`
                 link=`expr "$ls" : '.*-> \(.*\)$'`
                 if expr "$link" : '/.*' > /dev/null; then
                     PRG="$link"
                 else
                     PRG=`dirname "$PRG"`"/$link"
                 fi
             done
             SAVED="`pwd`"
             cd "`dirname \"$PRG\"`/" >/dev/null
             APP_HOME="`pwd -P`"
             cd "$SAVED" >/dev/null
             APP_NAME="Gradle"
             APP_BASE_NAME=`basename "$0"`
             # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
             DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
             # Use the maximum available, or set MAX_FD != -1 to use that value.
             MAX_FD="maximum"
             warn () {
                 echo "$*"
             }
             die () {
                 echo
                 echo "$*"
                 echo
                 exit 1
             }
             # OS specific support (must be 'true' or 'false').
             cygwin=false
             msys=false
             darwin=false
             nonstop=false
             case "`uname`" in
               CYGWIN* )
                 cygwin=true
                 ;;
               Darwin* )
                 darwin=true
                 ;;
               MINGW* )
                 msys=true
                 ;;
               NONSTOP* )
                 nonstop=true
                 ;;
             esac
             CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
             # Determine the Java command to use to start the JVM.
             if [ -n "$JAVA_HOME" ] ; then
                 if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
                     # IBM's JDK on AIX uses strange locations for the executables
                     JAVACMD="$JAVA_HOME/jre/sh/java"
                 else
                     JAVACMD="$JAVA_HOME/bin/java"
                 fi
                 if [ ! -x "$JAVACMD" ] ; then
                     die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
             Please set the JAVA_HOME variable in your environment to match the
             location of your Java installation."
                 fi
             else
                 JAVACMD="java"
                 which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
             Please set the JAVA_HOME variable in your environment to match the
             location of your Java installation."
             fi
             # Increase the maximum file descriptors if we can.
             if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
                 MAX_FD_LIMIT=`ulimit -H -n`
                 if [ $? -eq 0 ] ; then
                     if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
                         MAX_FD="$MAX_FD_LIMIT"
                     fi
                     ulimit -n $MAX_FD
                     if [ $? -ne 0 ] ; then
                         warn "Could not set maximum file descriptor limit: $MAX_FD"
                     fi
                 else
                     warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
                 fi
             fi
             # For Darwin, add options to specify how the application appears in the dock
             if $darwin; then
                 GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
             fi
             # For Cygwin or MSYS, switch paths to Windows format before running java
             if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
                 APP_HOME=`cygpath --path --mixed "$APP_HOME"`
                 CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
                 JAVACMD=`cygpath --unix "$JAVACMD"`
                 # We build the pattern for arguments to be converted via cygpath
                 ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
                 SEP=""
                 for dir in $ROOTDIRSRAW ; do
                     ROOTDIRS="$ROOTDIRS$SEP$dir"
                     SEP="|"
                 done
                 OURCYGPATTERN="(^($ROOTDIRS))"
                 # Add a user-defined pattern to the cygpath arguments
                 if [ "$GRADLE_CYGPATTERN" != "" ] ; then
                     OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
                 fi
                 # Now convert the arguments - kludge to limit ourselves to /bin/sh
                 i=0
                 for arg in "$@" ; do
                     CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
                     CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
                     if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
                         eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
                     else
                         eval `echo args$i`="\"$arg\""
                     fi
-                    i=$((i+1))
+                    i=`expr $i + 1`
                 done
                 case $i in
-                    (0) set -- ;;
+) set -- ;;
-                    (1) set -- "$args0" ;;
+) set -- "$args0" ;;
-                    (2) set -- "$args0" "$args1" ;;
+) set -- "$args0" "$args1" ;;
-                    (3) set -- "$args0" "$args1" "$args2" ;;
+) set -- "$args0" "$args1" "$args2" ;;
-                    (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+) set -- "$args0" "$args1" "$args2" "$args3" ;;
-                    (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
-                    (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
-                    (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
-                    (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
-                    (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
                 esac
             fi
             # Escape application args
             save () {
                 for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
                 echo " "
             }
-            APP_ARGS=$(save "$@")
+            APP_ARGS=`save "$@"`
             # Collect all arguments for the java command, following the shell quoting and substitution rules
             eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
-            # by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
-            if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
-              cd "$(dirname "$0")"
-            fi
             exec "$JAVACMD" "$@"

settings.gradle +2 -1

             /*
              * This settings file was generated by the Gradle 'init' task.
              *
              * The settings file is used to specify which projects to include in your build.
              * In a single project build this file can be empty or even removed.
              *
              * Detailed information about configuring a multi-project build in Gradle can be found
              * in the user guide at https://docs.gradle.org/3.5/userguide/multi_project_builds.html
              */
             // To declare projects as part of a multi-project build use the 'include' method
             //include 'sub-project-name'
             rootProject.name = 'implabjs-djx'
-            include 'djx'
  No newline at end of file
+            include 'djx'
+            include 'playground'
  No newline at end of file

djx/src/test/ts/DeclareTests.ts removed 0 -12

NO CONTENT: file was removed

djx/src/test/ts/Tap.ts removed 0 -148

NO CONTENT: file was removed

djx/src/test/ts/TestTraits.ts removed 0 -60

NO CONTENT: file was removed

djx/src/test/ts/TextTapWriter.ts removed 0 -18

NO CONTENT: file was removed

djx/src/test/ts/dummy.ts removed 0 -16

NO CONTENT: file was removed

djx/src/test/ts/i18nTests.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