implab/implabjs-djx Commit - r120:bc1b4dd8ca1a

type fixes for i18n, store

cin -

r120:bc1b4dd8ca1a v1.6.2 default

parent child

Context file:

r120:bc1b4dd8ca1a

Collapse all files

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

djx/src/test/ts/nls/nls-test.ts created 644 +8 0

@@ -0,0 +1,8
	1	import { bundle } from "../i18n";
	2
	3	export const { i18n, load, define } = bundle({
	4	foo: "foo",
	5	bar: "bar"
	6	}, {
	7	ru: () => import("./ru/nls-test")
	8	}); No newline at end of file

djx/src/test/ts/nls/ru/nls-test.ts created 644 +5 0

@@ -0,0 +1,5
	1	import { define } from "../nls-test";
	2
	3	export default define({
	4	foo: "Фу"
	5	}); No newline at end of file

djx/src/main/ts/NlsBundle.ts +1 -1

             import { MapOf, PromiseOrValue } from "@implab/core-amd/interfaces";
             import { argumentNotEmptyString, isPromise, mixin } from "@implab/core-amd/safe";
-            export type LocaleProvider<T> = () => PromiseOrValue<T | { default: T }>;
+            export type LocaleProvider<T> = () => PromiseOrValue<T | {default: T}>;
             function when<T, T2>(value: PromiseOrValue<T>, cb: (v: T) => PromiseOrValue<T2>): PromiseOrValue<T2> {
                 return isPromise(value) ?
                     value.then(cb) :
                     cb(value);
             }
             const loadPackage = <T extends object>(localeData: LocaleProvider<Partial<T>> | undefined) =>
                 localeData ?
                     when(localeData(), data => data && "default" in data ? data.default : data) :
                     undefined;
             const chainObjects = <T extends object>(o1: T, o2: Partial<T> | undefined): T =>
                 o2 ? mixin(Object.create(o1) as T, o2) : o1;
             export class NlsBundle<T extends object> {
                 private readonly _locales: MapOf<LocaleProvider<Partial<T>>>;
                 private readonly _default: T;
                 private _cache: MapOf<PromiseOrValue<T>>;
                 constructor(defNls: T, locales?: MapOf<LocaleProvider<Partial<T>>>) {
                     this._default = defNls;
                     this._locales = locales || {};
                     this._cache = {};
                 }
                 getLocale(locale: string) {
                     argumentNotEmptyString(locale, "locale");
                     const _loc = locale;
                     // en-US => ["en", "en-US"]
                     const locales = _loc.split(/-|_/).map((x, i, a) => a.slice(0, i + 1).join("-"));
                     return this._resolveLocale(locales);
                 }
                 _resolveLocale(locales: string[]): PromiseOrValue<T> {
                     if (!locales.length)
                         return this._default;
                     const locale = locales.pop();
                     if (!locale)
                         throw new Error("The locale can't be empty");
                     if (this._cache[locale])
                         return this._cache[locale];
                     const data = loadPackage(this._locales[locale]);
                     const parent = this._resolveLocale(locales);
                     return this._cache[locale] = when(data, x => {
                         return when(parent, y => this._cache[locale] = chainObjects(y, x));
                     });
                 }
             }

djx/src/main/ts/i18n.ts +10 -5

             import { id as mid} from "module";
-            import { MapOf } from "@implab/core-amd/interfaces";
+            import {  PromiseOrValue } from "@implab/core-amd/interfaces";
-            import { LocaleProvider, NlsBundle } from "./NlsBundle";
+            import {  NlsBundle } from "./NlsBundle";
             import { isPromise } from "@implab/core-amd/safe";
             import { locale as sysLocale } from "dojo/_base/kernel";
             import { TraceSource } from "@implab/core-amd/log/TraceSource";
             const trace = TraceSource.get(mid);
             trace.debug("Current sysLocale: {0}", sysLocale);
             export interface OnLoad {
                 (result?: unknown): void;
                 error(err: unknown): void;
             }
-            export function bundle<T extends object>(nls: T, locales?: MapOf<LocaleProvider<object>>) {
+            export const bundle = <T extends object>(nls: T, locales?: Record<string, () => PromiseOrValue<object>>) : {
+                i18n: (locale?: string) => T;
+                define: (pack: Partial<T>) => object;
+                load: (id: string, require: Require, cb: OnLoad, config: {isBuild?: boolean}) => void;
+            } => {
                 const nlsBundle = new NlsBundle(nls, locales);
                 const fn = (_locale?: string) => {
                     const locale = _locale || sysLocale;
                     const result = nlsBundle.getLocale(locale);
                     if (isPromise(result))
                         throw new Error(`The bundle '${locale}' isn't loaded`);
                     else
                         return result;
                 };
-                fn.define = (pack: Partial<T>) => pack;
+                fn.i18n = fn;
+                fn.define = (pack: Partial<T>): object => pack;
                 fn.load = async (id: string, require: Require, cb: OnLoad, config: {isBuild?: boolean}) => {
                     const locale = id || sysLocale;
                     if (config && config.isBuild) {
                         cb();
                     } else {
                         try {
                             await nlsBundle.getLocale(locale);
                             cb();
                         } catch (e) {
                             if(cb.error) {
                                 cb.error(e);
                             } else {
                                 // in case the loader doesn't support error reporting
                                 trace.error("Error loading {0}: {1}", locale, e);
                             }
                         }
                     }
                 };
                 return fn;
+            };

djx/src/main/ts/store.ts +1 -1

             import { PromiseOrValue } from "@implab/core-amd/interfaces";
             import { isPromise } from "@implab/core-amd/safe";
             import { observe, Observable } from "./observable";
             export interface OrderedUpdate<T> {
                 /** The item is being updated */
                 readonly item: T;
                 /** The previous index of the item, -1 in case it is inserted */
                 readonly prevIndex: number;
                 /** The new index of the item, -1 in case it is deleted */
                 readonly newIndex: number;
             }
             export type QueryResults<T> = Observable<OrderedUpdate<T>>;
             interface DjObservableResults<T> {
                 /**
                  * Allows observation of results
                  */
                 observe(listener: (object: T, previousIndex: number, newIndex: number) => void, includeUpdates?: boolean): {
                     remove(): void;
                 };
             }
             interface Queryable<T, Q, O> {
                 query(query?: Q, options?: O): PromiseOrValue<T[]>;
             }
             export const isDjObservableResults = <T>(v: object): v is DjObservableResults<T> =>
                 v && (typeof (v as { observe?: unknown; }).observe === "function");
             export const query = <T, Q, O>(store: Queryable<T, Q, O>, includeUpdates = true) =>
-                (query?: Q, options?: O & { observe: boolean }) => {
+                (query?: Q, options?: O & { observe?: boolean }) => {
                     return observe<OrderedUpdate<T>>(({ next, complete, error, isClosed }) => {
                         try {
                             const results = store.query(query, options);
                             if (isPromise(results)) {
                                 results.then(items => items.forEach((item, newIndex) => next({ item, newIndex, prevIndex: -1 })))
                                     .then(undefined, error);
                             } else {
                                 results.forEach((item, newIndex) => next({ item, newIndex, prevIndex: -1 }));
                             }
                             if (!isClosed() && (options?.observe !== false) && isDjObservableResults<T>(results)) {
                                 const h = results.observe((item, prevIndex, newIndex) => next({ item, prevIndex, newIndex }), includeUpdates);
                                 return () => h.remove();
                             } else {
                                 complete();
                             }
                         } catch (err) {
                             error(err);
                         }
                     });
                 };

djx/src/main/ts/tsx.ts +9 -1

             import { Constructor } from "@implab/core-amd/interfaces";
             import { HtmlRendition } from "./tsx/HtmlRendition";
             import { WidgetRendition } from "./tsx/WidgetRendition";
             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");
             import { AnimationAttrs, WatchForRendition } from "./tsx/WatchForRendition";
             import { OrderedUpdate } from "./store";
             export function createElement<T extends Constructor | string | ((props: object) => Element)>(elementType: T, ...args: unknown[]): 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: unknown) => Element);
                     if (args)
                         args.forEach(x => ctx.visitNext(x));
                     return ctx;
                 } else {
                     throw new Error(`The element type '${String(elementType)}' is unsupported`);
                 }
             }
             export interface EventDetails<T = unknown> {
                 detail: T;
             }
             export interface EventSelector {
                 selectorTarget: HTMLElement;
                 target: HTMLElement;
             }
             export type DojoMouseEvent<T = unknown> = MouseEvent & EventSelector & EventDetails<T>;
             type StatefulProps<T> = T extends Stateful<infer A> ? A :
                 T extends _WidgetBase ? T : 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,
                 render: (model: W[K]) => unknown
             ): 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,
                 render: (model: StatefulProps<T>[K]) => unknown
             ): Rendition;
             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]
             ) {
                 if (args.length === 3) {
                     const [target, prop, render] = args;
                     return new WatchRendition(
                         render,
                         observe(({next}) => {
                             const h = target.watch(
                                 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 watchFor = <T>(source: T[] | Subscribable<OrderedUpdate<T>> | null | undefined, render: (item: T, index: number) => unknown, opts:  AnimationAttrs = {}) => {
                 return new WatchForRendition({
                     ...opts,
                     subject: source,
                     component: render
                 });
             };
             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 (el: Element | { set(name: K, value: T): void; } | 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();
                     }
                 };
             };
+            /** 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
+             */
             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)
+                            next: v => djClass.toggle(el, className, v || false)
                         });
                     } else {
                         h.unsubscribe();
                     }
                 };
             };
+            /** Combines multiple hooks to the single one */
             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<object, { [p in E]: EV }>,
                     EV extends Event
                 >(
                     target: T,
                     key: K,
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     _descriptor: TypedPropertyDescriptor<(eventObj: EV) => void> | TypedPropertyDescriptor<() => void>
                 ) => {
                     const handlers = eventNames.map(eventName => ({ eventName, handlerMethod: key }));
                     target._eventHandlers = target._eventHandlers ? target._eventHandlers.concat(handlers) : handlers;
                 };

djx/src/main/ts/tsx/render.ts +3 -1

             import { TraceSource } from "@implab/core-amd/log/TraceSource";
             import { isPromise } from "@implab/core-amd/safe";
             import { id as mid } from "module";
             import { IScope, Scope } from "./Scope";
             import { isNode, isRendition, isWidget } from "./traits";
             const trace = TraceSource.get(mid);
             interface Context {
                 readonly scope: IScope;
                 readonly hooks?: (() => void)[];
             }
             let _context: Context = {
                 scope: Scope.dummy
             };
             let _renderCount = 0;
             let _renderId = 1;
             let _renderedHooks: (() => void)[] = [];
             const guard = (cb: () => unknown) => {
                 try {
                     const result = cb();
                     if (isPromise(result)) {
                         const warn = (ret: unknown) => trace.error("The callback {0} competed asynchronously. result = {1}", cb, ret);
                         result.then(warn, warn);
                     }
                 } catch (e) {
                     trace.error(e);
                 }
             };
             /**
              *
              * @param scope
              * @returns
              */
             export const beginRender = (scope = getScope()) => {
                 const prev = _context;
                 _renderCount++;
                 const renderId = _renderId++;
                 trace.debug("beginRender [{0}], pending = {1}", renderId, _renderCount);
                 if (_renderCount === 1)
                     onRendering();
                 _context = {
                     scope,
                     hooks: []
                 };
                 return endRender(prev, _context, renderId);
             };
             /**
              * Method for a deferred rendering. Returns a promise with `beginRender()` function.
              * Call to `scheduleRender` will save the current context, and will increment pending
              * operations counter.
              *
              * @example
              *
              * const begin = await scheduleRender();
              * const end = begin();
              * try {
              *     // do some DOM manipulations
              * } finally {
              *     end();
              * }
              *
              * @param scope
              * @returns
              */
             export const scheduleRender = async (scope = getScope()) => {
                 const prev = _context;
                 _renderCount++;
                 const renderId = _renderId ++;
                 trace.debug("scheduleRender [{0}], pending = {1}", renderId, _renderCount);
                 if (_renderCount === 1)
                     onRendering();
                 await Promise.resolve();
                 return () => {
                     trace.debug("beginRender [{0}], pending = {1}", renderId, _renderCount);
                     _context = {
                         scope,
                         hooks: []
                     };
                     return endRender(prev, _context, renderId);
                 };
             };
             /**
              * Completes render operation
              */
             const endRender = (prev: Context, current: Context, renderId: number) => () => {
                 if (_context !== current)
                     trace.error("endRender mismatched beginRender call");
                 const { hooks } = _context;
                 if (hooks)
                     hooks.forEach(guard);
                 _renderCount--;
                 _context = prev;
                 trace.debug("endRender [{0}], pending = {1}", renderId, _renderCount);
                 if (_renderCount === 0)
                     onRendered();
             };
             // called when the first beginRender is called for this iteration
             const onRendering = () => {
                 setTimeout(() => {
                     if (_renderCount !== 0)
                         trace.error("Rendering tasks aren't finished, currently running = {0}", _renderCount);
                 });
             };
             // called when all render operations are complete
             const onRendered = () => {
                 _renderedHooks.forEach(guard);
                 _renderedHooks = [];
             };
             export const whenRendered = () => new Promise<void>((resolve) => {
                 if (_renderCount)
                     _renderedHooks.push(resolve);
                 else
                     resolve();
             });
             export const renderHook = (hook: () => void) => {
                 const { hooks } = _context;
                 if (hooks)
                     hooks.push(hook);
                 else
                     guard(hook);
             };
             export const refHook = <T>(value: T, ref: JSX.Ref<T>) => {
                 const { hooks, scope } = _context;
                 if (hooks)
                     hooks.push(() => ref(value));
                 else
                     guard(() => ref(value));
                 scope.own(() => ref(undefined));
             };
             /** Returns the current scope */
             export const getScope = () => _context.scope;
             /** Schedules the rendition to be rendered to the DOM Node
              * @param rendition The rendition to be rendered
              * @param scope The scope
              */
             export const render = (rendition: unknown, scope = Scope.dummy) => {
                 const complete = beginRender(scope);
                 try {
                     return getItemDom(rendition);
                 } finally {
                     complete();
                 }
             };
+            const emptyFragment = document.createDocumentFragment();
             /** Renders DOM element for different types of the argument. */
             export const getItemDom = (v: unknown) => {
                 if (typeof v === "string" || typeof v === "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 (typeof v === "boolean" || v === null || v === undefined) {
                     // null | undefined | boolean are removed
-                    return document.createDocumentFragment();
+                    return emptyFragment;
                 } else if (v instanceof Array) {
                     // arrays will be translated to document fragments
                     const fragment = document.createDocumentFragment();
                     v.map(item => getItemDom(item))
                         .forEach(node => fragment.appendChild(node));
                     return fragment;
                 } else {
                     // bug: explicit error otherwise
                     throw new Error(`Invalid parameter: ${String(v)}`);
                 }
             };

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

             import { djbase, djclass, bind, prototype, AbstractConstructor } from "../declare";
             import { DjxWidgetBase } from "../tsx/DjxWidgetBase";
             import { createElement, on } from "../tsx";
             import { argumentNotNull } from "@implab/core-amd/safe";
             interface MyWidgetAttrs {
                 title: string;
                 counter: number;
             }
             interface MyWidgetEvents {
                 "count-inc": Event & {
                     detail: number;
                 };
                 "count-dec": Event & {
                     detail: number;
                 };
             }
             interface FrameProps {
                 ref?: JSX.Ref<HTMLDivElement>;
                 children?: unknown[];
             }
             const Frame = ({children, ref}: FrameProps) => <div ref={ref} >{children}</div>;
             @djclass
             export class MyWidget extends djbase(DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>>) {
                 @bind({ node: "titleNode", type: "innerHTML" })
                 title = "";
                 @prototype(0)
                 counter = 0;
                 frameNode?: HTMLDivElement;
                 render() {
                     return <div className="myWidget" onsubmit={this._onSubmit} tabIndex={3} style={{ alignContent: "center", border: "1px solid" }} >
                         <h1 data-dojo-attach-point="titleNode"></h1>
                         <Frame ref={this._setFrameElement}>
                             <span class="up-button" onclick={this._onIncClick}>[+]</span>
                             <span class="down-button" onclick={() => this._onDecClick()}>[-]</span>
                         </Frame>
                     </div>;
                 }
                 private readonly _setFrameElement = (node?: HTMLDivElement) => {
                     this.frameNode = node;
                 };
                 postCreate() {
                     super.postCreate();
                     this.on("click", () => {});
                 }
                 private readonly _onSubmit = (evt: Event) => {
                     argumentNotNull(evt, "evt");
                 };
                 private readonly _onIncClick = (evt: MouseEvent) => {
                     argumentNotNull(evt, "evt");
                     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; }) {
+                protected _onCounterInc(evt: Event & { detail: number; x?: number; }) {
                     argumentNotNull(evt, "evt");
                 }
                 @on("click", "keydown")
                 protected _onClick(evt: MouseEvent | KeyboardEvent) {
                     argumentNotNull(evt, "evt");
                 }
             }

playground/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

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