react-ui-basics 0.0.174 → 0.0.177

package/src/router/README.md

@@ -0,0 +1,55 @@
+
+# Router
+
+#### Basic usage:
+
+```javascript
+const A = ()=> <div>A</div>;
+<Route path="/a"> <A/> </Route>;
+```
+
+#### With variables:
+
+```javascript
+const AB = ({a, b})=> <div>{a} {b}</div>;
+<Route path="/:a/:b"> <AB/> </Route>;
+```
+
+#### With optional variables:
+
+```javascript
+const AB = ({a = 'a', b = 'b'})=> <div>{a} {b}</div>;
+<Route path="/:a?/:b?"> <AB/> </Route>;
+```
+
+#### With not matcher:
+
+```javascript
+const A = ()=> <div>A</div>;
+const NotA = ()=> <div>not A</div>;
+<div>
+    <Route path="/a"> <A/> </Route>
+    <Route path="/!a"> <NotA/> </Route>
+</div>
+```
+
+#### With any matcher:
+
+```javascript
+const A = ()=> <div>A</div>;
+<div>
+    <Route path="/*"> <A/> </Route>
+</div>
+```
+
+#### With nested routes:
+
+```javascript
+const A = (a)=> <div>{a}</div>;
+const Nested = ()=> <Route path="/*/:a"> <A/> </Route>;
+
+<div>
+    <Route path="/nested/*"> <Nested/> </Route>
+</div>
+```
+

package/src/router/Route.js

@@ -0,0 +1,209 @@
+import ReactConstants from "./ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./CommonFields";
+import React from 'react';
+import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
+import ReactCreateElement from '../ReactCreateElement';
+import PropTypes from 'prop-types';
+import './HistoryTools'
+import {allPropsExcept, isDifferent, orNoop, setOf, WINDOW, addEventListener, removeEventListener} from "../Tools";
+import {componentDidUpdate, render, PureComponent, componentDidMount, componentWillUnmount, propsGetter, stateGSs, setState} from "../ReactConstants";
+
+const historyEvents = ['popstate', 'pushState', 'replaceState'];
+
+const cleanPath = (path) => {
+    if (__length(path) > 1 && path.lastIndexOf('/') === __length(path) - 1)
+        return path.substring(0, __length(path) - 1);
+
+    return path;
+};
+
+const createUrlMatcher = path => {
+    let matcher;
+    const segments = path.split('/');
+    const optionals = segments.map(it => it === '*' || it.indexOf('?') === __length(it) - 1);
+    const containsVariables = path.indexOf(':') !== -1;
+    const containsAnySegment = path.indexOf('*') !== -1;
+    const containsNot = path.indexOf('!') !== -1;
+
+    if (!containsAnySegment && !containsVariables && !containsNot) {
+        matcher = (p) => p === path
+    } else {
+        const endsWithAny = path.lastIndexOf('*') === __length(path) - 1;
+        const matchers = segments.map((segment, i) => {
+            let matcher;
+            const variableNameIndex = segment.indexOf(':');
+            if (segment === '*')
+                matcher = () => true;
+            else if (variableNameIndex !== -1) {
+                let variable = segment.substring(variableNameIndex + 1);
+                let regex = null
+                if (variable.indexOf('?') !== -1)
+                    variable = variable.substring(0, variable.indexOf('?'));
+                if (variable.indexOf('(') !== -1) {
+                    let regexStart = variable.indexOf('(');
+                    regex = new RegExp(variable.substring(regexStart))
+                    variable = variable.substring(0, regexStart);
+                }
+
+                const prefix = variableNameIndex && segment.substring(0, variableNameIndex);
+                matcher = (p, params) => {
+                    if (regex && !!p && !p.match(regex))
+                        return false
+
+                    if (!p && !optionals[i])
+                        return false;
+                    if (prefix) {
+                        if (p.indexOf(prefix) === 0)
+                            p = p.substring(variableNameIndex);
+                        else
+                            return false;
+                    }
+
+                    params[variable] = p;
+                    return true;
+                }
+            } else if (segment.indexOf('!') === 0) {
+                const not = segment.substring(1);
+                matcher = (p) => p !== not;
+            } else
+                matcher = (p) => p === segment;
+            return matcher;
+        });
+
+        matcher = (path, params) => {
+            const segments = path.split('/');
+            const length = Math.min(__length(matchers), __length(segments));
+
+            // only exact match if mapping not ends with *
+            if (!endsWithAny && __length(matchers) < __length(segments))
+                return false;
+
+            // check that each segment matches
+            for (let i = 0; i < length; i++) {
+                if (!matchers[i](segments[i], params))
+                    return false;
+            }
+
+            // check that all other segments are optional
+            for (let i = length; i < __length(optionals); i++) {
+                if (!optionals[i])
+                    return false;
+            }
+
+            return true;
+        };
+    }
+    return matcher
+};
+
+const createUrlMatchers = path => {
+    if (Array.isArray(path)) {
+        const matchers = path.map(it => createUrlMatcher(it));
+        return (path, params) => {
+            for (let i = 0; i < __length(matchers); i++) {
+                let props = {};
+                if (matchers[i](path, props)) {
+                    __extends(params, props);
+                    return true;
+                }
+            }
+            return false;
+        }
+    } else {
+        return createUrlMatcher(path);
+    }
+};
+
+const selfProps = setOf([
+    'children',
+    'path',
+    'controller',
+    'onToggle',
+]);
+
+class Route extends PureComponent {
+
+    constructor(properties) {
+        super(properties);
+        const that = this;
+        that.state = {};
+        let matcher;
+
+        const props = propsGetter(that);
+        const [
+            isRendering,
+            paramsState,
+            mergedPropsState,
+        ] = stateGSs(that, 3);
+
+        const process = () => {
+            let params = {};
+            let nextState = {};
+            let isMatching = matcher(cleanPath(WINDOW.location.pathname), params);
+
+            const toggle = isMatching !== isRendering();
+            toggle && (nextState[isRendering] = isMatching);
+
+            if (isDifferent(paramsState(), params)) {
+                nextState[mergedPropsState] = __extends(allPropsExcept(props(), selfProps), params);
+                nextState[paramsState] = params;
+            }
+
+            //set new state just once to avoid several renders
+            setState(that, nextState, () => {
+                toggle && orNoop(props().onToggle)(isMatching);
+            })
+        };
+
+        that[ReactConstants[2]] = (prevProps, prevState) => {
+            if (props() !== prevProps) {
+                let mergedProps = __extends(allPropsExcept(props(), selfProps), paramsState());
+                if (isDifferent(mergedProps, mergedPropsState()))
+                    mergedPropsState(mergedProps);
+            }
+        };
+
+        that[ReactConstants[3]] = () => {
+            const {children, controller} = props();
+            return (controller || DefaultController)(isRendering(), children, mergedPropsState());
+        };
+
+        that[ReactConstants[0]] = () => {
+            matcher = createUrlMatchers(props().path);
+
+            historyEvents.forEach(it => {
+                addEventListener(WINDOW, it, process);
+            });
+            process();
+        };
+
+        that[ReactConstants[1]] = () => {
+            historyEvents.forEach(it => {
+                removeEventListener(WINDOW, it, process);
+            });
+        };
+    }
+}
+
+if (process.env.NODE_ENV !== 'production') {
+    Route.propTypes = {
+        path: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.arrayOf(PropTypes.string)
+        ]).isRequired,
+        controller: PropTypes.func,
+        onToggle: PropTypes.func,
+    };
+}
+
+const DefaultController = (matches, children, props) => {
+    if (!matches || !children) return null;
+    if (Object.keys(props).length > 0) {
+        return React.Children.map(children, child => React.cloneElement(child, props));
+    }
+    return children;
+};
+
+export default Route;

package/src/router/Route.test.js

@@ -0,0 +1,139 @@
+import ReactConstants from "./ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./CommonFields";
+import React from 'react';
+import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
+import Route from "./Route";
+import {mount} from 'enzyme';
+import {pushLocation} from './HistoryTools'
+
+it('renders exact path', () => {
+    pushLocation('/test');
+    expect(mount(<Route path="/test">
+        <div>test</div>
+    </Route>)).toContainReact(<div>test</div>);
+});
+
+it('renders exact path with / on the end', () => {
+    pushLocation('/test/');
+    expect(mount(<Route path="/test">
+        <div>test</div>
+    </Route>)).toContainReact(<div>test</div>);
+});
+
+it('renders not url', () => {
+    const wrapper = mount(<div>
+        <Route path="/!test">
+            not test
+        </Route>
+        <Route path="/test">
+            test
+        </Route>
+    </div>);
+
+    pushLocation('/');
+    expect(wrapper).toHaveHTML('<div>not test</div>');
+
+    pushLocation('/test');
+    expect(wrapper).toHaveHTML('<div>test</div>');
+});
+
+it('do not render not matching url', () => {
+    pushLocation('/');
+    expect(mount(<Route path="/test">
+        <div>test</div>
+    </Route>)).not.toContainReact(<div>test</div>);
+});
+
+it('renders /*', () => {
+    expect(mount(<Route path="/*">
+        <div>test</div>
+    </Route>)).toContainReact(<div>test</div>);
+
+    pushLocation('/test');
+    expect(mount(<Route path="/*">
+        <div>test</div>
+    </Route>)).toContainReact(<div>test</div>);
+});
+
+it('renders path with variable', () => {
+    pushLocation('/test');
+    const WithVariable = ({id}) => <div>{id}</div>;
+    expect(mount(<Route path="/:id">
+        <WithVariable/>
+    </Route>)).toContainReact(<div>test</div>);
+});
+
+it('do not render if require variable', () => {
+    pushLocation('/');
+    const WithVariable = ({id}) => <div>{id}</div>;
+    expect(mount(<div>
+        <Route path="/:id">
+            <WithVariable/>
+        </Route>
+    </div>)).toHaveHTML('<div></div>');
+});
+
+it('renders path with variable and prefix', () => {
+    pushLocation('/test-123');
+    const WithVariable = ({id}) => <div>{id}</div>;
+    expect(mount(<Route path="/test-:id">
+        <WithVariable/>
+    </Route>)).toContainReact(<div>123</div>);
+});
+
+it('renders path with optional variable', () => {
+    const WithVariable = ({id}) => <div>optional: {id || 'default value'}</div>;
+
+    const wrapper = mount(<Route path="/:id?">
+        <WithVariable/>
+    </Route>);
+
+    pushLocation('/');
+    expect(wrapper).toHaveHTML('<div>optional: default value</div>');
+
+    pushLocation('/test');
+    expect(wrapper).toHaveHTML('<div>optional: test</div>');
+});
+
+it('simple check for log urls', () => {
+    pushLocation('/a/b/c');
+    expect(mount(<div><Route path="/:a">
+        <div>test</div>
+    </Route></div>)).toHaveHTML('<div></div>');
+});
+
+it('test call onToggle', () => {
+    let onToggleMatches = false;
+
+    const wrapper = mount(<div><Route path="/test" onToggle={matches => onToggleMatches = matches}>
+        test
+    </Route></div>);
+
+    pushLocation('/test');
+    expect(wrapper).toHaveHTML('<div>test</div>');
+    expect(onToggleMatches).toBe(true);
+
+    pushLocation('/');
+    expect(wrapper).toHaveHTML('<div></div>');
+    expect(onToggleMatches).toBe(false);
+});
+
+it('renders path with variable and regex', () => {
+    pushLocation('/123');
+    const WithVariable = ({id}) => <div>{id}</div>;
+    expect(mount(<Route path="/:id([0-9]+)">
+        <WithVariable/>
+    </Route>)).toContainReact(<div>123</div>);
+});
+
+it('do not render if regex does not match ', () => {
+    pushLocation('/test');
+    const WithVariable = ({id}) => <div>{id}</div>;
+    expect(mount(<div>
+        <Route path="/:id([0-9]+)">
+            <WithVariable/>
+        </Route>
+    </div>)).toHaveHTML('<div></div>');
+});

package/src/router/index.js

@@ -0,0 +1,14 @@
+import ReactConstants from "./ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./CommonFields";
+import Link from "./Link";
+import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
+import NavLink from "./NavLink";
+import Route from "./Route";
+
+export default {
+    Link,
+    NavLink,
+    Route
+};

package/src/store/ProxyTools.js

@@ -0,0 +1,91 @@
+import ReactConstants from "./ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./CommonFields";
+import {UNDEFINED} from "../Tools";
+
+export const createProxy = (target) => {
+    if(!target)
+        return target
+    if (target.__isProxy)
+        return target;
+
+    let changedValue = UNDEFINED;
+    let deletedKeys = UNDEFINED;
+    let innerProxies = UNDEFINED
+    const isChanged = () => changedValue || (innerProxies && Object.values(innerProxies).some(it => it.__changed));
+
+    return new Proxy(target, {
+        get: function (target, prop) {
+            if (prop === '__isProxy')
+                return true
+            if (prop === '__changed')
+                return isChanged();
+            if (prop === 'bake')
+                return () => {
+                    // console.log('bake', changedValue, innerProxies)
+                    if (!isChanged())
+                        return target
+
+                    if (changedValue && !innerProxies)
+                        return changedValue
+
+                    if (innerProxies) {
+                        const result = changedValue || (Array.isArray(target) ? [...target] : {...target});
+
+                        for (let key in innerProxies) {
+                            result[key] = innerProxies[key].bake()
+                        }
+                        return result
+                    }
+
+                    throw new Error('state not implemented yet')
+                }
+
+            // console.log('get', {target, prop})
+            const innerProxy = innerProxies && innerProxies[prop];
+            if (innerProxy)
+                return innerProxy
+
+            const changed = changedValue && changedValue[prop]
+            if (changed !== UNDEFINED)
+                return changed
+
+            if (deletedKeys && deletedKeys[prop])
+                return null
+
+            const value = target[prop];
+            if (value && typeof value === 'object') {
+                !innerProxies && (innerProxies = {})
+                return innerProxies[prop] = createProxy(value)
+            }
+
+            return value;
+        },
+        set: function (target, prop, newval) {
+            // console.log('set', {target, prop, newval})
+            if (!changedValue) changedValue = Array.isArray(target) ? [...target] : {...target}
+
+            if (newval && typeof newval === 'object') {
+                !innerProxies && (innerProxies = {})
+                innerProxies[prop] = newval = createProxy(newval)
+            } else {
+                innerProxies && (delete innerProxies[prop])
+            }
+            changedValue[prop] = newval
+            // console.log('changedValue', changedValue)
+            return true;
+        },
+        deleteProperty: function (target, prop) {
+            // console.log('delete', {target, prop})
+            !changedValue && (changedValue = Array.isArray(target) ? [...target] : {...target})
+
+            if (!prop in changedValue)
+                return false;
+
+            delete changedValue[prop]
+            innerProxies && delete innerProxies[prop]
+            !deletedKeys && (deletedKeys = {})
+            deletedKeys[prop] = true;
+            return true;
+        }
+    })
+}

package/src/store/ProxyTools.test.js

@@ -0,0 +1,97 @@
+import ReactConstants from "./ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./CommonFields";
+import {createProxy} from "./ProxyTools";
+
+it('test proxy noop', () => {
+    const user = {name: 'Bob'};
+    const p = createProxy(user);
+    expect(p.bake()).toBe(user);
+});
+
+it('test proxy change property', () => {
+    const user = {name: 'Bob'};
+    const p = createProxy(user);
+    p.name = 'Tom'
+
+    expect(user).toEqual({name: 'Bob'});
+    expect(p.bake()).toEqual({name: 'Tom'});
+});
+
+it('test proxy add property', () => {
+    const user = {name: 'Bob'};
+    const p = createProxy(user);
+    p.age = 16
+    p.age = 32
+
+    expect(user).toEqual({name: 'Bob'});
+    expect(p.bake()).toEqual({name: 'Bob', age: 32});
+});
+
+it('test proxy delete property', () => {
+    const user = {name: 'Bob'};
+    const p = createProxy(user);
+    delete p.name;
+
+    expect(user).toEqual({name: 'Bob'});
+    expect(p.bake()).toEqual({});
+});
+
+it('test proxy set null', () => {
+    const user = {name: 'Bob'};
+    const p = createProxy(user);
+    p.name = null;
+    expect(user).toEqual({name: 'Bob'});
+    expect(p.bake()).toEqual({name: null});
+});
+
+it('test proxy inner properties access noop', () => {
+    const user = {name: 'Bob', hobbies: ['chess']};
+    const p = createProxy(user);
+
+    const name = p.name;
+    const firstHobby = p.hobbies[0];
+
+    expect(p.bake()).toBe(user);
+    expect(name).toBe('Bob');
+    expect(firstHobby).toBe('chess');
+});
+
+it('test proxy change inner properties', () => {
+    const user = {name: 'Bob', hobbies: ['chess']};
+    const p = createProxy(user);
+
+    p.hobbies.push('poker');
+
+    expect(user).toEqual({name: 'Bob', hobbies: ['chess']});
+    expect(p.bake()).toEqual({name: 'Bob', hobbies: ['chess', 'poker']});
+});
+
+it('test proxy change inner properties 2', () => {
+    const user = {name: 'Bob', hobbies: ['chess']};
+    const p = createProxy(user);
+
+    p.hobbies = [...p.hobbies, 'poker'];
+
+    expect(user).toEqual({name: 'Bob', hobbies: ['chess']});
+    expect(p.bake()).toEqual({name: 'Bob', hobbies: ['chess', 'poker']});
+});
+
+it('test proxy change inner property to null', () => {
+    const user = {name: 'Bob', hobbies: ['chess']};
+    const p = createProxy(user);
+
+    p.hobbies = null;
+
+    expect(user).toEqual({name: 'Bob', hobbies: ['chess']});
+    expect(p.bake()).toEqual({name: 'Bob', hobbies: null});
+});
+
+it('test proxy change inner properties 3', () => {
+    const user = {name: 'Bob', hobbies: [{name: 'chess'}]};
+    const p = createProxy(user);
+
+    p.hobbies[0].name = 'poker';
+
+    expect(user).toEqual({name: 'Bob', hobbies: [{name: 'chess'}]});
+    expect(p.bake()).toEqual({name: 'Bob', hobbies: [{name: 'poker'}]});
+});