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

Added test widgets to the playground

cin - - Load All Authors

File last commit:

r96:a316cfea8bb1 v1.3


                r100:ff52224a63f0

v1.3

Download file

             tsx.ts
        
                    114 lines
            
             | 3.8 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
    
refactoring, adding scope to rendering methods

              r96
            
      import { 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";

      import { observe } from "./observable";

        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
            
      type StatefulProps<T> = T extends Stateful<infer A> ? A : never;

      /**

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

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

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

        cin
    
refactoring, adding scope to rendering methods

              r96
            
          return new WatchRendition(

              render,

              observe(({next}) => {

                  const h = target.watch(

                      prop,

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

                  );

                  return () => h.remove();

              })

          )

        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 refactoring, adding scope to rendering methods	r96	import { 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";
		import { observe } from "./observable";
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
		type StatefulProps<T> = T extends Stateful<infer A> ? A : never;


		/**
		* 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;
		export function watch<T extends Stateful, K extends keyof StatefulProps<T> & string>(
		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	) {
cin refactoring, adding scope to rendering methods	r96	return new WatchRendition(
		render,
		observe(({next}) => {
		const h = target.watch(
		prop,
		(_prop, oldValue, newValue) => oldValue !== newValue && next(newValue)
		);
		return () => h.remove();
		})
		)
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;
		};