implab/implabjs-djx Files · djx/src/main/ts/tsx.ts

WIP observables

cin - - Load All Authors

File last commit:

r134:f139e2153e0d v1.9.0-rc1 default


                r157:f9518367061a

default

Download file

             tsx.ts
        
                    196 lines
            
             | 6.9 KiB
            
                | video/mp2t
            
             |
                TypeScriptLexer
            
             / djx / src / main / ts / tsx.ts
          
                    History
                
                 |
                  Source
                 | Raw
                 |Copy content
                 |Copy permalink

        cin
    
refactoring, adding scope to rendering methods

              r96
            
      import { Constructor } from "@implab/core-amd/interfaces";

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      import { HtmlRendition } from "./tsx/HtmlRendition";

      import { WidgetRendition } from "./tsx/WidgetRendition";

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
      import { isElementNode, isWidget, isWidgetConstructor, Rendition } from "./tsx/traits";

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      import { FunctionRendition } from "./tsx/FunctionRendition";

        cin
    
fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase

              r89
            
      import Stateful = require("dojo/Stateful");

      import _WidgetBase = require("dijit/_WidgetBase");

      import { DjxWidgetBase } from "./tsx/DjxWidgetBase";

        cin
    
refactoring, adding scope to rendering methods

              r96
            
      import { WatchRendition } from "./tsx/WatchRendition";

        cin
    
added reduce() and next() methods to observable...

              r116
            
      import { Observable, observe, Subscribable } from "./observable";

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
      import djAttr = require("dojo/dom-attr");

      import djClass = require("dojo/dom-class");

        cin
    
Working on WatchForRendition

              r107
            
      import { AnimationAttrs, WatchForRendition } from "./tsx/WatchForRendition";

        cin
    
added reduce() and next() methods to observable...

              r116
            
      import { OrderedUpdate } from "./store";

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
        cin
    
linting

              r109
            
      export function createElement<T extends Constructor | string | ((props: object) => Element)>(elementType: T, ...args: unknown[]): Rendition {

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
          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") {

        cin
    
linting

              r109
            
              const ctx = new FunctionRendition(elementType as (props: unknown) => Element);

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
              if (args)

                  args.forEach(x => ctx.visitNext(x));

              return ctx;

          } else {

        cin
    
linting

              r109
            
              throw new Error(`The element type '${String(elementType)}' is unsupported`);

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
          }

      }

        cin
    
linting

              r109
            
      export interface EventDetails<T = unknown> {

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
          detail: T;

      }

      export interface EventSelector {

          selectorTarget: HTMLElement;

          target: HTMLElement;

      }

        cin
    
linting

              r109
            
      export type DojoMouseEvent<T = unknown> = MouseEvent & EventSelector & EventDetails<T>;

        cin
    
fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase

              r89
            
        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
      type StatefulProps<T> = T extends Stateful<infer A> ? A :

          T extends _WidgetBase ? T : never;

        cin
    
fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase

              r89
            
      /**

       * 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

       * @returns Rendition which is created instantly

       */

      export function watch<W extends _WidgetBase, K extends keyof W>(

          target: W,

          prop: K,

        cin
    
linting

              r109
            
          render: (model: W[K]) => unknown

        cin
    
fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase

              r89
            
      ): 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

       * @returns Rendition which is created instantly

       */

      export function watch<T extends Stateful, K extends keyof StatefulProps<T>>(

          target: T,

          prop: K,

        cin
    
linting

              r109
            
          render: (model: StatefulProps<T>[K]) => unknown

        cin
    
fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase

              r89
            
      ): Rendition;

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
      export function watch<V>(subj: Subscribable<V>, render: (model: V) => unknown): Rendition;

      export function watch(

          ...args: [Stateful, string, (model: unknown) => unknown] |

              [Subscribable<unknown>, (model: unknown) => unknown]

        cin
    
fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase

              r89
            
      ) {

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
          if (args.length === 3) {

              const [target, prop, render] = args;

              return new WatchRendition(

                  render,

                  observe(({next}) => {

        cin
    
linting

              r109
            
                      const h = target.watch(

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
                          prop,

                          (_prop, oldValue, newValue) => oldValue !== newValue && next(newValue)

                      );

                      next(target.get(prop));

                      return () => h.remove();

                  })

              );

          } else {

              const [subj, render] = args;

              return new WatchRendition(render, subj);

          }

      }

        cin
    
added whenRendered() method to wait for pending oprations to complete

              r118
            
      export const watchFor = <T>(source: T[] | Subscribable<OrderedUpdate<T>> | null | undefined, render: (item: T, index: number) => unknown, opts:  AnimationAttrs = {}) => {

        cin
    
Working on WatchForRendition

              r107
            
          return new WatchForRendition({

              ...opts,

              subject: source,

              component: render

          });

        cin
    
linting

              r109
            
      };

        cin
    
Working on WatchForRendition

              r107
            
        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
      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();

        cin
    
linting

              r109
            
          });

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
      };

        cin
    
Testing nested watch, release candidate

              r101
            
        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
      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() { } };

        cin
    
added form/Form widget and form/_FormMixin, this is a rewritten version of the corresponding dojo classed....

              r134
            
          return (el: Element | { set(name: K, value: T, priority?: boolean): void; } | undefined) => {

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
              if (el) {

                  if (isElementNode(el)) {

                      h = subj.subscribe({

                          next: value => djAttr.set(el, attr, value)

                      });

                  } else {

                      h = subj.subscribe({

        cin
    
added form/Form widget and form/_FormMixin, this is a rewritten version of the corresponding dojo classed....

              r134
            
                          next: value => el.set(attr, value, false)

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
                      });

                  }

              } else {

                  h.unsubscribe();

              }

        cin
    
linting

              r109
            
          };

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
      };

        cin
    
type fixes for i18n, store

              r120
            
      /** Creates refHook to toggle the specified css class on the target element

       * 

       * @param className 

       * @param subj a boolean observable value. When the value is false the className

       *   is removed, when the value is true, the className is added to the target element

       * @returns refHook

       */

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
      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({

        cin
    
type fixes for i18n, store

              r120
            
                      next: v => djClass.toggle(el, className, v || false)

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
                  });

              } else {

                  h.unsubscribe();

              }

        cin
    
linting

              r109
            
          };

      };

        cin
    
fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase

              r89
            
        cin
    
type fixes for i18n, store

              r120
            
      /** Combines multiple hooks to the single one */

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
      export const all = <T, A extends JSX.Ref<T>[]>(...cbs: A): JSX.Ref<T> => (arg: T | undefined) => cbs.forEach(cb => cb(arg));

        cin
    
fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase

              r89
            
      /** 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,

        cin
    
linting

              r109
            
              T extends DjxWidgetBase<object, { [p in E]: EV }>,

        cin
    
fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase

              r89
            
              EV extends Event

          >(

              target: T,

              key: K,

        cin
    
linting

              r109
            
              // eslint-disable-next-line @typescript-eslint/no-unused-vars

        cin
    
fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase

              r89
            
              _descriptor: TypedPropertyDescriptor<(eventObj: EV) => void> | TypedPropertyDescriptor<() => void>

        cin
    
linting

              r109
            
          ) => {

        cin
    
minor code cleanups

              r93
            
              const handlers = eventNames.map(eventName => ({ eventName, handlerMethod: key }));

        cin
    
fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase

              r89
            
              target._eventHandlers = target._eventHandlers ? target._eventHandlers.concat(handlers) : handlers;

          };

	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

cin refactoring, adding scope to rendering methods	r96	import { Constructor } from "@implab/core-amd/interfaces";
cin Converted to subproject djx, removed dojo-typings	r65	import { HtmlRendition } from "./tsx/HtmlRendition";
		import { WidgetRendition } from "./tsx/WidgetRendition";
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	import { isElementNode, isWidget, isWidgetConstructor, Rendition } from "./tsx/traits";
cin Converted to subproject djx, removed dojo-typings	r65	import { FunctionRendition } from "./tsx/FunctionRendition";
cin fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase	r89	import Stateful = require("dojo/Stateful");
		import _WidgetBase = require("dijit/_WidgetBase");
		import { DjxWidgetBase } from "./tsx/DjxWidgetBase";
cin refactoring, adding scope to rendering methods	r96	import { WatchRendition } from "./tsx/WatchRendition";
cin added reduce() and next() methods to observable...	r116	import { Observable, observe, Subscribable } from "./observable";
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	import djAttr = require("dojo/dom-attr");
		import djClass = require("dojo/dom-class");
cin Working on WatchForRendition	r107	import { AnimationAttrs, WatchForRendition } from "./tsx/WatchForRendition";
cin added reduce() and next() methods to observable...	r116	import { OrderedUpdate } from "./store";
cin Converted to subproject djx, removed dojo-typings	r65
cin linting	r109	export function createElement<T extends Constructor \| string \| ((props: object) => Element)>(elementType: T, ...args: unknown[]): Rendition {
cin Converted to subproject djx, removed dojo-typings	r65	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") {
cin linting	r109	const ctx = new FunctionRendition(elementType as (props: unknown) => Element);
cin Converted to subproject djx, removed dojo-typings	r65	if (args)
		args.forEach(x => ctx.visitNext(x));

		return ctx;
		} else {
cin linting	r109	throw new Error(`The element type '${String(elementType)}' is unsupported`);
cin Converted to subproject djx, removed dojo-typings	r65	}
		}

cin linting	r109	export interface EventDetails<T = unknown> {
cin Converted to subproject djx, removed dojo-typings	r65	detail: T;
		}

		export interface EventSelector {
		selectorTarget: HTMLElement;
		target: HTMLElement;
		}

cin linting	r109	export type DojoMouseEvent<T = unknown> = MouseEvent & EventSelector & EventDetails<T>;
cin fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase	r89
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	type StatefulProps<T> = T extends Stateful<infer A> ? A :
		T extends _WidgetBase ? T : never;
cin fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase	r89

		/**
		* 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
		* @returns Rendition which is created instantly
		*/
		export function watch<W extends _WidgetBase, K extends keyof W>(
		target: W,
		prop: K,
cin linting	r109	render: (model: W[K]) => unknown
cin fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase	r89	): 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
		* @returns Rendition which is created instantly
		*/
		export function watch<T extends Stateful, K extends keyof StatefulProps<T>>(
		target: T,
		prop: K,
cin linting	r109	render: (model: StatefulProps<T>[K]) => unknown
cin fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase	r89	): Rendition;
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	export function watch<V>(subj: Subscribable<V>, render: (model: V) => unknown): Rendition;
		export function watch(
		...args: [Stateful, string, (model: unknown) => unknown] \|
		[Subscribable<unknown>, (model: unknown) => unknown]
cin fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase	r89	) {
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	if (args.length === 3) {
		const [target, prop, render] = args;
		return new WatchRendition(
		render,
		observe(({next}) => {
cin linting	r109	const h = target.watch(
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	prop,
		(_prop, oldValue, newValue) => oldValue !== newValue && next(newValue)
		);
		next(target.get(prop));
		return () => h.remove();
		})
		);
		} else {
		const [subj, render] = args;
		return new WatchRendition(render, subj);
		}
		}

cin added whenRendered() method to wait for pending oprations to complete	r118	export const watchFor = <T>(source: T[] \| Subscribable<OrderedUpdate<T>> \| null \| undefined, render: (item: T, index: number) => unknown, opts: AnimationAttrs = {}) => {
cin Working on WatchForRendition	r107	return new WatchForRendition({
		...opts,
		subject: source,
		component: render
		});
cin linting	r109	};
cin Working on WatchForRendition	r107

cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	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();
cin linting	r109	});
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	};
cin Testing nested watch, release candidate	r101
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	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() { } };

cin added form/Form widget and form/_FormMixin, this is a rewritten version of the corresponding dojo classed....	r134	return (el: Element \| { set(name: K, value: T, priority?: boolean): void; } \| undefined) => {
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	if (el) {
		if (isElementNode(el)) {
		h = subj.subscribe({
		next: value => djAttr.set(el, attr, value)
		});
		} else {
		h = subj.subscribe({
cin added form/Form widget and form/_FormMixin, this is a rewritten version of the corresponding dojo classed....	r134	next: value => el.set(attr, value, false)
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	});
		}
		} else {
		h.unsubscribe();
		}
cin linting	r109	};
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	};

cin type fixes for i18n, store	r120	/** Creates refHook to toggle the specified css class on the target element
		*
		* @param className
		* @param subj a boolean observable value. When the value is false the className
		* is removed, when the value is true, the className is added to the target element
		* @returns refHook
		*/
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	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({
cin type fixes for i18n, store	r120	next: v => djClass.toggle(el, className, v \|\| false)
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	});
		} else {
		h.unsubscribe();
		}
cin linting	r109	};
		};
cin fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase	r89
cin type fixes for i18n, store	r120	/** Combines multiple hooks to the single one */
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	export const all = <T, A extends JSX.Ref<T>[]>(...cbs: A): JSX.Ref<T> => (arg: T \| undefined) => cbs.forEach(cb => cb(arg));

cin fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase	r89	/** 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,
cin linting	r109	T extends DjxWidgetBase<object, { [p in E]: EV }>,
cin fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase	r89	EV extends Event
		>(
		target: T,
		key: K,
cin linting	r109	// eslint-disable-next-line @typescript-eslint/no-unused-vars
cin fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase	r89	_descriptor: TypedPropertyDescriptor<(eventObj: EV) => void> \| TypedPropertyDescriptor<() => void>
cin linting	r109	) => {
cin minor code cleanups	r93	const handlers = eventNames.map(eventName => ({ eventName, handlerMethod: key }));
cin fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase	r89	target._eventHandlers = target._eventHandlers ? target._eventHandlers.concat(handlers) : handlers;
		};