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

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

`Subscribable` is made compatible with rxjs, added map, filter and scan methods to observables. `watch` can accept either stateful object and a property name to observe or the subscribable value. added ref attribute to the markup elements and widgets. `bind`, `tooggleClass` and `attach` methods can be passed to `ref` attribute in the markup to interact with elemnts and widgets.

cin - - Load All Authors

File last commit:

r102:c65ea2350b1a v1.3


                r102:c65ea2350b1a

v1.3

Download file

             tsx.ts
        
                    176 lines
            
             | 6.1 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
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

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

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

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

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      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>;

        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
    
refactoring, adding scope to rendering methods

              r96
            
          render: (model: W[K]) => any

        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
    
refactoring, adding scope to rendering methods

              r96
            
          render: (model: StatefulProps<T>[K]) => any

        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}) => {

                      const h = target.watch<any>(

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

          }

      }

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

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

              }

          }

        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
            
      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,

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

              EV extends Event

          >(

              target: T,

              key: K,

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

          ): any => {

        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 `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	import { Observable, observe, Subscribable } from "./observable";
		import djAttr = require("dojo/dom-attr");
		import djClass = require("dojo/dom-class");
cin Converted to subproject djx, removed dojo-typings	r65
		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>;
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 refactoring, adding scope to rendering methods	r96	render: (model: W[K]) => any
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 refactoring, adding scope to rendering methods	r96	render: (model: StatefulProps<T>[K]) => any
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}) => {
		const h = target.watch<any>(
		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);
		}
		}

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

		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();
		}
		}
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	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,
		T extends DjxWidgetBase<any, { [p in E]: EV }>,
		EV extends Event
		>(
		target: T,
		key: K,
		_descriptor: TypedPropertyDescriptor<(eventObj: EV) => void> \| TypedPropertyDescriptor<() => void>
		): any => {
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;
		};