implab/implabjs-djx Commit - r53:deb0ed6fb680

corrected i18n, css modules to support requirejs optimizer...

cin -

r53:deb0ed6fb680 v1.0.7 default

parent child

Context file:

r53:deb0ed6fb680

Collapse all files

src/test/ts/i18n/foo.ts created 644 +8 0

@@ -0,0 +1,8
	1	import { bundle } from "../i18n";
	2
	3	export default bundle({
	4	greeting: (name: string) => `Hello, ${name}!`,
	5	goodbye: (name: string) => `Bye, ${name}!`
	6	}, {
	7	ru: () => import("./ru/foo")
	8	});

src/test/ts/i18n/ru/foo.ts created 644 +6 0

@@ -0,0 +1,6
	1	import foo from "../foo";
	2
	3	export default foo.define({
	4	greeting: (name: string) => `Привет, ${name}`,
	5	goodbye: (name: string) => `Пока, ${name}`
	6	});

src/test/ts/i18nTests.ts created 644 0 0

NO CONTENT: new file 100644

readme.md +10 -10

             # @implab/djx
             ## SYNOPSIS
             ```tsx
             import { djbase, djclass, bind, prototype, AbstractConstructor } from "@implab/djx/declare";
             import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
             import { createElement } from "@implab/djx/tsx";
             interface MyWidgetAttrs {
                 title: string;
                 counter: number;
             }
             interface MyWidgetEvents {
                 "count-inc": Event;
                 "count-dec": Event;
             }
             @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>;
                     return <div
                         className="myWidget"
                         tabIndex={3}
                         style={ alignContent: "center", border: "1px solid" }
                     >
                         <h1 data-dojo-attach-point="titleNode"></h1>
                         <Frame>
                             <span class="up-button" onclick={e => this._onIncClick(e)}>[+]</span>
                             <span class="down-button" onclick={() => this._onDecClick()}>[-]</span>
                         </Frame>
                     </div>;
                 }
                 _onIncClick(e: MouseEvent) {
                     this.emit("count-inc", { bubbles: false });
                 }
                 _onDecClick() {
                     this.emit("count-dec", { bubbles: false });
                 }
             }
             ```
             ## DESCRIPTION
-            This package provides you with tools to glue your good-fellow dojo with modern
+            This package provides you with the tools to glue your good-fellow dojo with modern
-            techniques of building the webapp. The core concept is built around widgets and
+            techniques of building the webapp. The core concept is to built around widgets and
-            using .tsx to write it. Here some features:
+            using .tsx to write it. Here are some features:
             * `djbase()`, `@djaclass` - traits to declare your classes with `dojo/_base/declare`
             * `@implab/djx/tsx` - traits to build the rendering of your widgets with tsx
             * `DjxWidgetBase` - abstract class which supports tsx markup and
               `data-dojo-attach-*` attributes.
-            * `@bind(...)` - annotations provides an easy way of using standard dojo widget
+            * `@bind(...)` - annotations provide an easy way of using standard dojo widget
               attribute bindings.
             ### djbase, @djclass
-            These two traits provides convenient way of using `dojo/_base/declare` in Typescript
+            These two traits provide convenient way of using `dojo/_base/declare` in Typescript
             for declaring your classes.
             `djbase(...constructors)` - this method accepts a list of constructors in its
             parameters and returns the **fake** base type which then can be used to derive
             your own class. This allows you to provide the Typescript with the correct
-            information about the base type and even use `super`!. The only one caveat of
+            information about the base type and even use `super`!. The only caveat of
             this approach is that you **MUST** decorate your class with `@djclass` annotation.
             Consider the following example:
             ```ts
             import { djbase, djclass } from "@implab/djx/declare";
             import { FooMixin } from "./FooMixin";
             import { BarMixin } from "./BarMixin";
             import { BoxMixin } from "./BoxMixin";
             @djclass
             export class Baz extends djbase(FooMixin, BarMixin, BoxMixin) {
                 writeHello(out: string[]) {
                     out.push("-> Baz");
                     super.writeHello(out);
                     out.push("<- Baz");
                 }
             }
             ```
             All mixins are declared like the one below:
             ```ts
             import { djclass, djbase } from "@implab/djx/declare";
             interface Super {
                 writeHello(out: string[]): void;
             }
             @djclass
             export class BarMixin extends djbase<Super>() {
                 writeHello(out: string[]) {
                     out.push("-> Bar");
                     super.writeHello(out);
                     out.push("<- Bar");
                 }
             }
             ```
             finally create an instance and call the `writeHello` method
             ```ts
             const baz = new Baz();
             const data: string[] = [];
             baz.writeHello(data);
             console.log(data.join("\n"));
             ```
             you will get the following output:
             ```text
             -> Baz
             -> Box
             -> Bar
             -> Foo
             <- Foo
             <- Bar
             <- Box
             <- Baz
             ```
-            Let's take a closer look to the `Baz` declaration it uses `djbase` to derive
+            Let's take a closer look at the `Baz` declaration it uses `djbase` to derive
             from three mixins and the class is decorated with `@djclass` to accomplish the
             declaration and make a real constructor.
-            To allow an access to the next sibling method (in terms of multiple inheritance)
+            To allow access to the next sibling method (in terms of multiple inheritance)
             Dojo provides `this.inherited(arguments)` method but this approach leads to the
             problem with 'strict' mode of ES5 and eliminates the type information about a
             calling method. This library solves the problem calling inherited/next method by
             utilizing `super` keyword. Under the hood there are proxy methods generated in
             the prototype of the declared class which make calls to `this.inherited(...)`
             method. This technique is compatible with 'strict' mode.
-            Mixins are declared the similar, they are also may have the base types although
+            Mixins are declared similar, they also may have the base types although
             the most common case is declaring the mixin without any base classes. To allow
-            the mixin to access the next method you should declare the interface with
+            the mixin to access the next method declare the interface with
             desired methods and use the special form of `djbase<Super>()` without arguments.
             ### DjxWidgetBase<Attrs, Events>
             TODO
             ### Markup (.tsx)
             Add to your `tsconfig.json` the following options
             ```json
             {
                 "compilerOptions": {
                     "types": ["@implab/djx"],
                     "experimentalDecorators": true,
                     "jsxFactory": "createElement",
                     "jsx": "react",
                 }
             }
             ```
             Import `createElement` into your `.tsx` file
             ```ts
             import { createElement } from "@implab/djx/tsx";
             ```
             You are ready to go!
             TODO

src/main/ts/NlsBundle.ts +23 -22

             import { MapOf } from "@implab/core-amd/interfaces";
             import { isPromise, mixin } from "@implab/core-amd/safe";
             import { locale as sysLocale } from "dojo/_base/kernel";
             import { id as mid } from "module";
             import { TraceSource } from "@implab/core-amd/log/TraceSource";
             const trace = TraceSource.get(mid);
             type PromiseOrValue<T> = PromiseLike<T> | T;
             type ResolveCallback<T> = () => PromiseOrValue<T>;
             trace.debug("Current sysLocale: {0}", sysLocale);
             function when<T, T2>(value: PromiseOrValue<T>, cb: (v: T) => PromiseOrValue<T2>): PromiseOrValue<T2> {
                 return isPromise(value) ?
                     value.then(cb) :
                     cb(value);
             }
             function isCallback<T>(v: ResolveCallback<T> | PromiseOrValue<T>): v is ResolveCallback<T> {
                 return typeof v === "function";
             }
+            function defaultResolver(module: string) {
+                return import(module).then(x => x && x.default ? x.default : x);
+            }
             function chainObjects<T extends object>(o1: T, o2: T) {
                 if (!o1)
                     return o2;
                 if (!o2)
                     return o1;
                 return mixin(Object.create(o1) as T, o2);
             }
             export class NlsBundle<T extends object> {
-                _locales: MapOf<ResolveCallback<T> | PromiseOrValue<T>>;
+                private _locales: MapOf<ResolveCallback<T> | PromiseOrValue<T>>;
-                default: T;
-                _cache: MapOf<PromiseOrValue<T>>;
+                private _default: T;
+                private _cache: MapOf<PromiseOrValue<T>>;
                 constructor(defNls: T, locales?: MapOf<any>) {
-                    this.default = defNls;
+                    this._default = defNls;
                     this._locales = locales || {};
                     this._cache = {};
                 }
-                getLocale(locale: string) {
+                getLocale(locale?: string) {
-                    const _loc = locale || sysLocale;
+                    const _loc = locale ?? sysLocale;
-                    const locales = new Array<string>();
-                    _loc.split("-").reduce((a, x) => {
+                    // en-US => ["en", "en-US"]
-                        a.push(x);
+                    const locales = _loc.split(/-|_/).map((x, i, a) => a.slice(0, i + 1).join("-"));
-                        locales.unshift(a.join("-"));
-                        return a;
-                    }, new Array<string>());
                     return this._resolveLocale(locales);
                 }
                 _resolveLocale(locales: string[]): PromiseOrValue<T> {
                     if (!locales.length)
-                        return this.default;
+                        return this._default;
-                    const locale = locales.shift();
+                    const locale = locales.pop();
                     if (!locale)
-                        return this._resolveLocale(locales);
+                        throw new Error("The locale can't be empty");
                     if (this._cache[locale])
                         return this._cache[locale];
-                    let data = this._locales[locale];
+                    const data = this._loadPackage(this._locales[locale]);
-                    if (isCallback(data))
-                        data = data();
                     const parent = this._resolveLocale(locales);
                     return this._cache[locale] = when(data, x => {
                         return when(parent, y => this._cache[locale] = chainObjects(y, x));
                     });
                 }
+                _loadPackage(localeData: any) {
+                    if (isCallback(localeData))
+                        return when(localeData(), data => data && "default" in data ? data.default : data);
+                    return localeData;
+                }
             }

src/main/ts/css.ts +1 -1

             import inject from "./dom-inject";
             interface OnLoad {
                 (result?: any): void;
                 error(err: any): void;
             }
             const plugin = {
                 load: (id: string, require: Require, cb: OnLoad, config: { isBuild?: boolean }) => {
-                    if (config.isBuild) {
+                    if (config && config.isBuild) {
                         cb();
                     } else {
                         const url = require.toUrl(id);
                         inject.injectStylesheet(url).then(() => cb({ url }), e => cb.error(e));
                     }
                 }
             };
             export = plugin;

src/main/ts/i18n.ts +3 -3

             import { MapOf } from "@implab/core-amd/interfaces";
             import { NlsBundle } from "./NlsBundle";
             import { isPromise } from "@implab/core-amd/safe";
             export interface OnLoad {
                 (result?: any): void;
                 error(err: any): void;
             }
             export function bundle<T extends object>(nls: T, locales?: MapOf<any>) {
                 const nlsBundle = new NlsBundle(nls, locales);
                 const fn = (locale?: string) => {
-                    const result = locale ? nlsBundle.getLocale(locale) : nlsBundle.default;
+                    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.default = nlsBundle.default;
                 fn.load = async (id: string, require: Require, cb: OnLoad, config: any) => {
                     if (config && config.isBuild) {
                         cb();
                     } else {
                         try {
                             await nlsBundle.getLocale(id);
                             cb();
                         } catch (e) {
-                            cb.error(e);
+                            if(cb.error)
+                                cb.error(e);
                         }
                     }
                 };
                 return fn;
             }

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