@steroidsjs/core 2.0.0-rc.6 → 2.0.1-beta.112

package/components/ResourceComponent.ts

@@ -0,0 +1,140 @@
+import * as queryString from 'qs';
+import _isArray from 'lodash-es/isArray';
+
+/**
+ * Resource Component
+ * Компонент для подгрузки внешних API: Google Maps, Yandex Maps, Twitter, ...
+ */
+export default class ResourceComponent {
+    _callbacks: any;
+    _components: any;
+    googleApiKey: string;
+    googleCaptchaSiteKey: string;
+    language: string;
+    static RESOURCE_GOOGLE_MAP_API = '//maps.googleapis.com/maps/api/js';
+    static RESOURCE_YANDEX_MAP_API = 'https://api-maps.yandex.ru/2.1/';
+    static RESOURCE_TWITTER_WIDGET = 'https://platform.twitter.com/widgets.js';
+    static RESOURCE_GEETEST_API = '//static.geetest.com/static/tools/gt.js';
+
+    constructor(components, config) {
+        this.googleApiKey = config.googleApiKey || '';
+        this.googleCaptchaSiteKey = config.googleCaptchaSiteKey || '';
+        this.language = config.language || '';
+        this._callbacks = {};
+        this._components = components;
+    }
+
+    loadGoogleMapApi() {
+        const locale = this._components.locale;
+        // @ts-ignore
+        if (window.google && window.google.maps) {
+            // @ts-ignore
+            return Promise.resolve(window.google.maps);
+        }
+        return this.loadScript(
+            ResourceComponent.RESOURCE_GOOGLE_MAP_API,
+            {
+                libraries: 'places,geometry',
+                key: this.googleApiKey,
+                language: this.language || locale.language,
+            },
+            // @ts-ignore
+            () => window.google.maps
+        );
+    }
+
+    loadYandexMap() {
+        const locale = this._components.locale;
+        // @ts-ignore
+        if (window.ymaps) {
+            return new Promise(resolve =>
+                // @ts-ignore
+                window.ymaps.ready(() => resolve(window.ymaps))
+            );
+        }
+        return this.loadScript(
+            ResourceComponent.RESOURCE_YANDEX_MAP_API,
+            {
+                lang: this.language || locale.language
+            },
+            // @ts-ignore
+            () => new Promise(resolve => window.ymaps.ready(() => resolve(window.ymaps)))
+        );
+    }
+
+    loadTwitterWidget() {
+        // @ts-ignore
+        if (window.twttr) {
+            // @ts-ignore
+            return Promise.resolve(window.twttr);
+        }
+        return this.loadScript(
+            ResourceComponent.RESOURCE_TWITTER_WIDGET,
+            {},
+            // @ts-ignore
+            () => new Promise(resolve => window.twttr.ready(() => resolve(window.twttr)))
+        );
+    }
+
+    loadGeetest() {
+        // @ts-ignore
+        if (window.initGeetest) {
+            // @ts-ignore
+            return Promise.resolve(window.initGeetest);
+        }
+        return this.loadScript(
+            ResourceComponent.RESOURCE_GEETEST_API + '?_t=' + new Date().getTime(),
+            {},
+            // @ts-ignore
+            () => window.initGeetest
+        );
+    }
+
+    loadScript(url, params, firstResolver) {
+        if (this._callbacks[url] === true) {
+            return Promise.resolve(firstResolver());
+        }
+        if (_isArray(this._callbacks[url])) {
+            return new Promise(resolve => {
+                this._callbacks[url].push(resolve);
+            });
+        }
+        this._callbacks[url] = [];
+        // Append script to page
+        return new Promise((resolve, reject) => {
+            let script = document.createElement('script');
+            script.async = true;
+            script.onload = () => {
+                setTimeout(() => {
+                    Promise.resolve(firstResolver())
+                        .then(result => {
+                            // Resolve current
+                            resolve(result);
+                            // Resolve queue promises after current
+                            const callbacks = this._callbacks[url];
+                            this._callbacks[url] = true;
+                            callbacks.forEach(callback => callback(result));
+                        })
+                        .catch(reject);
+                });
+            };
+            script.src = url + (params ? '?' + queryString.stringify(params) : '');
+            document.body.appendChild(script);
+        });
+    }
+
+    wait(condition, timeout = 5000) {
+        const start = Date.now();
+        const checker = (resolve, reject) => {
+            const result = condition();
+            if (result) {
+                resolve(result);
+            } else if (start + timeout > Date.now()) {
+                reject();
+            } else {
+                setTimeout(() => checker(resolve, reject), 500);
+            }
+        };
+        return new Promise(checker);
+    }
+}

package/components/SocialComponent.ts

@@ -0,0 +1,39 @@
+import providers from './social';
+
+/**
+ * Social Component
+ * Провайдер для социальных сетей. Обеспечивает вызов окна соц сети для oauth авторизации
+ */
+export default class SocialComponent {
+    _components: any;
+    _initializing: any;
+    providers: any;
+
+    constructor(components) {
+        this.providers = {};
+        this._initializing = {};
+        this._components = components;
+    }
+
+    init() {
+        Object.keys(this.providers).forEach(name => {
+            if (providers[name]) {
+                const config = this.providers[name] || {};
+                this.providers[name] = new providers[name](this._components);
+                Object.assign(this.providers[name], config);
+            }
+        });
+        Object.keys(this.providers).forEach(name => {
+            this._initializing[name] = this.providers[name].init();
+        });
+    }
+
+    start(socialName) {
+        if (!this._initializing[socialName]) {
+            return Promise.reject();
+        }
+        return this._initializing[socialName].then(() =>
+            this.providers[socialName].start()
+        );
+    }
+}

package/components/StoreComponent.ts

@@ -0,0 +1,169 @@
+import {createStore, applyMiddleware, compose} from 'redux';
+import {routerMiddleware, connectRouter} from 'connected-react-router';
+import {
+    createBrowserHistory,
+    createMemoryHistory,
+    createHashHistory
+} from 'history';
+import _get from 'lodash-es/get';
+import _merge from 'lodash-es/merge';
+import _isPlainObject from 'lodash-es/isPlainObject';
+
+interface IStoreComponentConfig {
+    initialState: any,
+    history: any,
+}
+
+/**
+ * Store Component
+ * Обертка над Redux Store со встроенными middleware (thunk, multi, promise..) и react-router
+ */
+export default class StoreComponent {
+    _asyncReducers: any;
+    _components: any;
+    reducers: any;
+    _routerReducer: any;
+    history: any;
+    navigationNative: any;
+    store: any;
+
+    constructor(components, config, lazyInit = false) {
+        this._components = components;
+
+        this.reducers = config.reducers || require('reducers').default;
+
+        this.history = null;
+        this.store = null;
+        this._asyncReducers = {};
+
+        if (!lazyInit) {
+            this.initStore();
+        }
+    }
+
+    init(config = {} as IStoreComponentConfig) {
+        this.initStore(config);
+        this.configurate();
+    }
+
+    initStore(config = {} as IStoreComponentConfig) {
+        let initialState = {
+            ...(process.env.IS_WEB
+                // @ts-ignore
+                ? _merge(...(window.APP_REDUX_PRELOAD_STATES || [{}]))
+                : {}),
+            ...config.initialState
+        };
+
+        if (process.env.PLATFORM !== 'mobile') {
+            const createHistory: any = process.env.IS_SSR || typeof location === 'undefined'
+                ? createMemoryHistory
+                : location.protocol === 'file:'
+                    ? createHashHistory
+                    : createBrowserHistory;
+            this.history = createHistory({
+                ..._get(initialState, 'config.store.history', {}),
+                ...config.history
+            });
+            // Add '?' for fix connected-react-router
+            if (process.env.IS_SSR && !this.history.location.search && process.env.PLATFORM !== 'mobile') {
+                this.history.location.search = '?';
+            }
+            this._routerReducer = connectRouter(this.history);
+        }
+
+        this.store = createStore(
+            this.reducers(
+                this._routerReducer ? {
+                    router: this._routerReducer
+                } : {}
+            ),
+            initialState,
+            compose(
+                applyMiddleware(({getState}) => next => action =>
+                    this._prepare(action, next, getState)
+                ),
+                applyMiddleware(routerMiddleware(this.history)),
+                // @ts-ignore
+                !process.env.IS_SSR && window.__REDUX_DEVTOOLS_EXTENSION__ && process.env.PLATFORM !== 'mobile'
+                    // @ts-ignore
+                    ? window.__REDUX_DEVTOOLS_EXTENSION__()
+                    : f => f
+            )
+        );
+    }
+
+    configurate() {
+        // Apply configuration
+        const customConfig = this.getState().config || {};
+        const components = this._components;
+        _merge(components.clientStorage, customConfig.clientStorage);
+        _merge(components.html, customConfig.html);
+        _merge(components.http, customConfig.http);
+        _merge(components.locale, customConfig.locale);
+        _merge(components.resource, customConfig.resource);
+        _merge(components.store, customConfig.store);
+        _merge(components.ui, customConfig.ui);
+        _merge(components.widget, customConfig.widget);
+    }
+
+    dispatch(action) {
+        return this.store.dispatch(action);
+    }
+
+    getState() {
+        return this.store.getState();
+    }
+
+    addReducers(asyncReducers) {
+        this._asyncReducers = {
+            router: this._routerReducer,
+            ...this._asyncReducers,
+            ...asyncReducers
+        };
+        this.store.replaceReducer(this.reducers(this._asyncReducers));
+    }
+
+    errorHandler(error, action) {
+        throw error;
+    }
+
+    _prepare(action, dispatch, getState) {
+        // Multiple dispatch (redux-multi)
+        if (Array.isArray(action)) {
+            return action
+                .filter(v => v)
+                .map(p => this._prepare(p, dispatch, getState));
+        }
+        // Function wraper (redux-thunk)
+        if (typeof action === 'function') {
+            return action(
+                p => this._prepare(p, dispatch, getState),
+                getState,
+                this._components
+            );
+        }
+        // Promise, detect errors on rejects
+        // Detect action through instanceof Promise is not working in production mode, then used single detection by type
+        if (
+            typeof action === 'object' &&
+            typeof action.then === 'function' &&
+            typeof action.catch === 'function'
+        ) {
+            return action
+                .then(payload => this._prepare(payload, dispatch, getState))
+                .catch(e => {
+                    this.errorHandler(e, p => this._prepare(p, dispatch, getState));
+                });
+        }
+        // Default case
+        if (_isPlainObject(action) && action.type) {
+            try {
+                return dispatch(action);
+            } catch (e) {
+                this.errorHandler(e, p => this._prepare(p, dispatch, getState));
+            }
+        }
+        return action;
+    }
+}

package/components/UiComponent.ts

@@ -0,0 +1,107 @@
+import _isFunction from 'lodash-es/isFunction';
+import _isObject from 'lodash-es/isObject';
+import {ReactNode} from "react";
+
+/**
+ * Ui Component
+ * Компонент для подгрузки и конфигурации UI компонентов приложения
+ */
+export default class UiComponent {
+    _components: any;
+    icons: {[name: string]: string | number | ReactNode};
+    fields: {};
+    formatters: {};
+    _portalElement: HTMLDivElement;
+
+    constructor(components) {
+        this.icons = {};
+        this.fields = {};
+        this.formatters = {};
+        this._components = {};
+        this._portalElement = null;
+    }
+
+    addViews(components) {
+        this._add('views', components);
+    }
+
+    getView(path) {
+        return this._getComponent('views', path);
+    }
+
+    addFields(components) {
+        this._add('fields', components, 'form');
+    }
+
+    getField(path) {
+        return this._getComponent('fields', path);
+    }
+
+    getFieldProps(path) {
+        return this._getPropsConfig('fields', path);
+    }
+
+    addFormatters(components) {
+        this._add('formatters', components, 'format');
+    }
+
+    getFormatter(path) {
+        return this._getComponent('formatters', path);
+    }
+
+    getFormatterProps(path) {
+        return this._getPropsConfig('formatters', path);
+    }
+
+    addIcons(icons) {
+        this.icons = icons;
+    }
+
+    getIcon(name) {
+        return this.icons && this.icons[name] || null;
+    }
+
+    _add(group, items, defaultNamespace = null) {
+        // require.context()
+        if (_isFunction(items) && _isFunction(items.keys)) {
+            items.keys().forEach(fileName => {
+                const matches = fileName.match(/^\.\/(.*\/)?[^\/]+\/([^\/]+)\.(js|ts)x?$/);
+                if (matches) {
+                    const path = (matches[1] || '').replace(/\//g, '.') + matches[2];
+                    this._components[group] = this._components[group] || {};
+                    this._components[group][path] = items(fileName).default;
+                }
+            });
+        } else if (_isObject(items)) {
+            // object
+            this._components[group] = this._components[group] || {};
+            Object.keys(items).forEach(key => {
+                const name = key.indexOf('.') === -1 && defaultNamespace
+                    ? defaultNamespace + '.' + key
+                    : key;
+                this._components[group][name] = items[key];
+            });
+        } else {
+            throw new Error(`Unsupported ${group} format for add component.`);
+        }
+    }
+
+    _getComponent(group, path) {
+        if (!this._components[group] || !this._components[group][path]) {
+            throw new Error(`Not found '${group}' by path '${path}'.`);
+        }
+        return this._components[group][path];
+    }
+
+    _getPropsConfig(group, path) {
+        return (this[group] && this[group][path]) || null;
+    }
+
+    setPortalElement(element) {
+        this._portalElement = element;
+    }
+
+    getPortalElement() {
+        return this._portalElement;
+    }
+}

package/components/WebSocketComponent.ts

@@ -0,0 +1,222 @@
+import {IComponents} from '../hoc/components';
+
+/**
+ * Web Socket Component
+ * Компонент, обеспечивающий постоянное web-socket соединение с сервером. Поддерживает подписку на каналы, обработку
+ * ответов и токен авторизации
+ */
+export default class WebSocketComponent {
+
+    wsUrl: string;
+    streams: string[] | [string, string|number[]][];
+    authHandler: (components: IComponents) => Promise<string>;
+    onOpen: (event: any, components: IComponents) => {};
+    onClose: (event: any, components: IComponents) => {};
+    onMessage: (data: object, components: IComponents) => {};
+
+    _components: IComponents;
+    _connection: any;
+    _tryCount: any;
+    _authToken: any;
+    REASON_CODE_UNAUTHORIZED: number;
+
+    constructor(components, config) {
+        this.wsUrl = config.wsUrl || null;
+        this.streams = config.streams || ['*'];
+        this.authHandler = config.authHandler || null;
+        this.onOpen = config.onOpen || null;
+        this.onClose = config.onClose || null;
+        this.onMessage = config.onMessage || null;
+
+        this._components = components;
+        this._connection = null;
+        this._tryCount = null;
+        this._authToken = null;
+
+        this._connect = this._connect.bind(this);
+        this._onOpen = this._onOpen.bind(this);
+        this._onMessage = this._onMessage.bind(this);
+        this._onClose = this._onClose.bind(this);
+
+        this.REASON_CODE_UNAUTHORIZED = 4401;
+    }
+
+    open(closePrevious = false) {
+        if (closePrevious) {
+            this.close();
+        }
+        if (!this._connection) {
+            this._connect();
+        }
+    }
+
+    close() {
+        if (this._connection) {
+            this._connection.close();
+            this._connection = null;
+        }
+    }
+
+    subscribeStream(stream, id) {
+        if (id) {
+            this.subscribe([[stream, [id]]]);
+        } else {
+            this.subscribe([stream]);
+        }
+    }
+
+    subscribe(streams) {
+        if (!this._connection) {
+            return;
+        }
+        streams = [].concat(streams);
+
+        // Стримы для подписки
+        let forSubscribe = [];
+        streams.forEach(stream => {
+            // Если стримов нет, то сразу добавляем
+            if (this.streams.length === 0) {
+                this.streams.push(stream);
+                forSubscribe.push(stream);
+                return;
+            }
+
+            const name = this._getStreamName(stream);
+            // Перебираем текущие стримы
+            this.streams.forEach((clientStream, index, clientStreams) => {
+                // Если текущий стрим и запрашиваемый вида [streamName, [ids...]]
+                // то из запрашиваемых id выбираем те, на которые не подписаны,
+                // формируем новый стрим с нужными id, добавляем с список для дальнейшей подписки
+                if (this._getStreamName(clientStream) === name && Array.isArray(clientStream) && Array.isArray(stream)) {
+                    const idsForSubscribe = stream[1].filter(id => !clientStream.includes(id));
+                    forSubscribe.push([name, idsForSubscribe]);
+                    // К текущим стримам добавлем недостающие id
+                    clientStreams[index][1] = clientStreams[index][1].concat(idsForSubscribe);
+                } else {
+                    forSubscribe.push(stream);
+                }
+            });
+        })
+
+        // Если есть стримы, на которые нужно подписаться, шлем серверу
+        if (forSubscribe.length > 0) {
+            this._connection.send(JSON.stringify({
+                action: 'subscribe',
+                data: forSubscribe,
+            }));
+        }
+    }
+
+    unsubscribeStream(stream, id) {
+        id
+            ? this.unsubscribe([[stream, [id]]])
+            : this.unsubscribe([stream])
+    }
+
+    unsubscribe(streams) {
+        if (!this._connection || this.streams.length === 0) {
+            return;
+        }
+        streams = [].concat(streams);
+
+        // Стримы для отписки
+        let forUnsubscribe = [];
+        this.streams.forEach((clientStream, index, clientStreams) => {
+            const name = this._getStreamName(clientStream);
+            streams.forEach(stream => {
+                if (this._getStreamName(stream) === name) {
+                    // Если подписаны на стрим вида 'stream', а запрос на отписку виду ['stream', [ids...]], ничего не делаем
+                    if (typeof clientStream === 'string' && Array.isArray(stream)) {
+                        return;
+                    }
+
+                    // Если обычный стрим, добавляем в список для отписки и удаляем из своего списка
+                    if (typeof stream === 'string') {
+                        forUnsubscribe.push(clientStream);
+                        clientStreams.splice(index, 1);
+
+                        // Если стримы вида ['stream', [ids...]], находим из запрашиваемых выбираем ids, на которые уже подписаны
+                        // Формируем новый стрим и добавляем в список для дальнейшей отписки
+                        // Удаляем эти ids из текущего списка
+                    } else if (Array.isArray(stream) && Array.isArray(clientStream)) {
+                        const idsForUnsubscribe = stream[1].filter(streamId => clientStream[1].includes(streamId));
+                        forUnsubscribe.push([name, idsForUnsubscribe]);
+                        clientStreams[index][1] = clientStreams[index][1].filter(id => !idsForUnsubscribe.includes(id));
+                        // Если удалили все ids, то удаляем стрим целиком
+                        if (clientStreams[index][1].length === 0) {
+                            clientStreams.splice(index, 1);
+                        }
+                    }
+                }
+            });
+        });
+
+        // Если есть стримы, от которых нужно отписаться, шлем серверу
+        if (forUnsubscribe.length > 0) {
+            this._connection.send(JSON.stringify({
+                action: 'unsubscribe',
+                data: forUnsubscribe,
+            }));
+        }
+    }
+
+    async _connect() {
+        if (!this._authToken) {
+            const token = await this.authHandler(this._components);
+            if (token) {
+                this._authToken = token;
+                this._connect();
+            }
+        } else if (this.streams) {
+            this._connection = new WebSocket(this.wsUrl + '?streams=' + this.streams.join(',') + '&token=' + this._authToken);
+            this._connection.onopen = this._onOpen;
+            this._connection.onmessage = this._onMessage;
+            this._connection.onclose = this._onClose;
+        }
+    }
+
+    _reConnect() {
+        let delay = 1000;
+        if (this._tryCount > 10) {
+            delay = 2000;
+        }
+        if (this._tryCount > 50) {
+            delay = 5000;
+        }
+        if (this._tryCount > 100) {
+            delay = 15000;
+        }
+
+        this._tryCount++;
+        setTimeout(this._connect, delay);
+    }
+
+    _onOpen(event) {
+        this._tryCount = 0;
+
+        if (this.onOpen) {
+            this.onOpen(event, this._components);
+        }
+    }
+
+    _onMessage(message) {
+        if (this.onMessage) {
+            this.onMessage(JSON.parse(message.data), this._components);
+        }
+    }
+
+    _onClose(event) {
+        if (this.onClose) {
+            this.onClose(event, this._components);
+        }
+
+        if (event.code === this.REASON_CODE_UNAUTHORIZED) {
+            this._authToken = null;
+        }
+        this._reConnect();
+    }
+
+    _getStreamName(stream) {
+        return Array.isArray(stream) ? stream[0] : stream;
+    }
+}

package/components/index.ts

@@ -0,0 +1,19 @@
+import ClientStorageComponent from './ClientStorageComponent';
+import HtmlComponent from './HtmlComponent';
+import HttpComponent from './HttpComponent';
+import LocaleComponent from './LocaleComponent';
+import MetaComponent from './MetaComponent';
+import ResourceComponent from './ResourceComponent';
+import StoreComponent from './StoreComponent';
+import UiComponent from './UiComponent';
+
+export {
+    ClientStorageComponent,
+    HtmlComponent,
+    HttpComponent,
+    LocaleComponent,
+    MetaComponent,
+    ResourceComponent,
+    StoreComponent,
+    UiComponent
+};