piral-core 1.0.0-pre.2296 → 1.0.1-beta.5640

package/src/{components → setters}/SetError.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
-import { Atom, swap, deref } from '@dbeining/react-atom';
+import create from 'zustand';
+import { render } from '@testing-library/react';
 import { SetError } from './SetError';
 import { StateContext } from '../state';
 
@@ -8,9 +8,9 @@ const FakeError = () => null;
 FakeError.displayName = 'FakeError';
 
 function createMockContainer() {
-  const state = Atom.of({
+  const state = create(() => ({
     errorComponents: {},
-  });
+  }));
   return {
     context: {
       on: jest.fn(),
@@ -18,13 +18,14 @@ function createMockContainer() {
       emit: jest.fn(),
       state,
       setErrorComponent(name, comp) {
-        swap(state, (s) => ({
+        const s = state.getState();
+        state.setState({
           ...s,
           errorComponents: {
             ...s.errorComponents,
             [name]: comp,
           },
-        }));
+        });
       },
     } as any,
   };
@@ -33,12 +34,12 @@ function createMockContainer() {
 describe('Piral-Core SetError component', () => {
   it('SetError sets the error component in the store', () => {
     const { context } = createMockContainer();
-    const node = mount(
+    render(
       <StateContext.Provider value={context}>
         <SetError type="loading" component={FakeError} />
       </StateContext.Provider>,
     );
-    expect(deref<any>(context.state).errorComponents).toEqual({
+    expect((context.state.getState()).errorComponents).toEqual({
       loading: FakeError,
     });
   });

package/src/{components → setters}/SetError.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useAction, useSetter } from '../hooks';
+import { useGlobalStateContext, useSetter } from '../hooks';
 import { ErrorComponentsState } from '../types';
 
 /**
@@ -23,7 +23,7 @@ export function SetError<TKey extends keyof ErrorComponentsState>({
   type,
   component,
 }: SetErrorProps<TKey>): React.ReactElement {
-  const setErrorComponent = useAction('setErrorComponent');
+  const { setErrorComponent } = useGlobalStateContext();
   useSetter(() => component && setErrorComponent(type, component));
   // tslint:disable-next-line:no-null-keyword
   return null;

package/src/{components → setters}/SetErrors.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
-import { Atom, swap, deref } from '@dbeining/react-atom';
+import create from 'zustand';
+import { render } from '@testing-library/react';
 import { SetErrors } from './SetErrors';
 import { StateContext } from '../state/stateContext';
 
@@ -8,9 +8,9 @@ const FakeError = () => null;
 FakeError.displayName = 'FakeError';
 
 function createMockContainer() {
-  const state = Atom.of({
+  const state = create(() => ({
     errorComponents: {},
-  });
+  }));
   return {
     context: {
       on: jest.fn(),
@@ -18,13 +18,14 @@ function createMockContainer() {
       emit: jest.fn(),
       state,
       setErrorComponent(name, comp) {
-        swap(state, (s) => ({
+        const s = state.getState();
+        state.setState({
           ...s,
           errorComponents: {
             ...s.errorComponents,
             [name]: comp,
           },
-        }));
+        });
       },
     } as any,
   };
@@ -33,7 +34,7 @@ function createMockContainer() {
 describe('Piral SetErrors component', () => {
   it('SetErrors sets the error components', () => {
     const { context } = createMockContainer();
-    const node = mount(
+    render(
       <StateContext.Provider value={context}>
         <SetErrors
           errors={
@@ -44,7 +45,7 @@ describe('Piral SetErrors component', () => {
         />
       </StateContext.Provider>,
     );
-    expect(deref<any>(context.state).errorComponents).toEqual({
+    expect(context.state.getState().errorComponents).toEqual({
       menu: FakeError,
     });
   });

package/src/{components → setters}/SetLayout.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
-import { Atom, swap, deref } from '@dbeining/react-atom';
+import create from 'zustand';
+import { render } from '@testing-library/react';
 import { SetLayout } from './SetLayout';
 import { StateContext } from '../state/stateContext';
 
@@ -8,9 +8,9 @@ const FakeContainer = () => null;
 FakeContainer.displayName = 'FakeContainer';
 
 function createMockContainer() {
-  const state = Atom.of({
+  const state = create(() => ({
     components: {},
-  });
+  }));
   return {
     context: {
       on: jest.fn(),
@@ -18,13 +18,14 @@ function createMockContainer() {
       emit: jest.fn(),
       state,
       setComponent(name, comp) {
-        swap(state, (s) => ({
+        const s = state.getState();
+        state.setState({
           ...s,
           components: {
             ...s.components,
             [name]: comp,
           },
-        }));
+        });
       },
     } as any,
   };
@@ -33,7 +34,7 @@ function createMockContainer() {
 describe('Piral SetLayout component', () => {
   it('SetLayout sets the layout components', () => {
     const { context } = createMockContainer();
-    const node = mount(
+    render(
       <StateContext.Provider value={context}>
         <SetLayout
           layout={
@@ -44,7 +45,7 @@ describe('Piral SetLayout component', () => {
         />
       </StateContext.Provider>,
     );
-    expect(deref<any>(context.state).components).toEqual({
+    expect(context.state.getState().components).toEqual({
       DashboardContainer: FakeContainer,
     });
   });

package/src/{components → setters}/SetProvider.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
-import { Atom, swap, deref } from '@dbeining/react-atom';
+import create from 'zustand';
+import { render } from '@testing-library/react';
 import { SetProvider } from './SetProvider';
 import { StateContext } from '../state';
 
@@ -8,9 +8,9 @@ const FakeProvider = () => null;
 FakeProvider.displayName = 'FakeProvider';
 
 function createMockContainer() {
-  const state = Atom.of({
+  const state = create(() => ({
     providers: [],
-  });
+  }));
   return {
     context: {
       on: jest.fn(),
@@ -18,10 +18,11 @@ function createMockContainer() {
       emit: jest.fn(),
       state,
       includeProvider(provider) {
-        swap(state, (s) => ({
+        const update = (s) => ({
           ...s,
           providers: [...s.providers, provider],
-        }));
+        });
+        state.setState(update(state.getState()));
       },
     } as any,
   };
@@ -31,11 +32,11 @@ describe('Piral-Core SetProvider component', () => {
   it('SetProvider uses the includeProvider action', () => {
     const { context } = createMockContainer();
     const provider = <FakeProvider />;
-    const node = mount(
+    render(
       <StateContext.Provider value={context}>
         <SetProvider provider={provider} />
       </StateContext.Provider>,
     );
-    expect(deref<any>(context.state).providers).toEqual([provider]);
+    expect(context.state.getState().providers).toEqual([provider]);
   });
 });

package/src/{components → setters}/SetProvider.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useAction, useSetter } from '../hooks';
+import { useGlobalStateContext, useSetter } from '../hooks';
 
 /**
  * The props for the SetProvider component.
@@ -15,7 +15,7 @@ export interface SetProviderProps {
  * The component capable of setting a global provider at mounting.
  */
 export function SetProvider({ provider }: SetProviderProps): React.ReactElement {
-  const includeProvider = useAction('includeProvider');
+  const {includeProvider} = useGlobalStateContext();
   useSetter(() => provider && includeProvider(provider));
   // tslint:disable-next-line:no-null-keyword
   return null;

package/src/{components → setters}/SetRedirect.test.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
-import { Atom, swap, deref } from '@dbeining/react-atom';
+import create from 'zustand';
+import { render } from '@testing-library/react';
 import { SetRedirect } from './SetRedirect';
 import { StateContext } from '../state';
 
 function createMockContainer() {
-  const state = Atom.of({
+  const state = create(() => ({
     routes: {},
-  });
+  }));
   return {
     context: {
       on: jest.fn(),
@@ -15,13 +15,14 @@ function createMockContainer() {
       emit: jest.fn(),
       state,
       setRoute(name, comp) {
-        swap(state, (s) => ({
+        const update = (s) => ({
           ...s,
           routes: {
             ...s.routes,
             [name]: comp,
           },
-        }));
+        });
+        state.setState(update(state.getState()));
       },
     } as any,
   };
@@ -30,12 +31,12 @@ function createMockContainer() {
 describe('Piral-Core SetRedirect component', () => {
   it('SetRedirect sets the redirect route in the store', () => {
     const { context } = createMockContainer();
-    const node = mount(
+    render(
       <StateContext.Provider value={context}>
         <SetRedirect from="/foo" to="/bar" />
       </StateContext.Provider>,
     );
-    expect(deref<any>(context.state).routes).toEqual({
+    expect(context.state.getState().routes).toEqual({
       '/foo': expect.anything(),
     });
   });

package/src/{components → setters}/SetRedirect.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Redirect } from 'react-router';
-import { useAction, useSetter } from '../hooks';
+import { useGlobalStateContext, useSetter } from '../hooks';
+import { createRedirect } from '../../app.codegen';
 
 /**
  * The props for the SetRedirect component.
@@ -20,8 +20,8 @@ export interface SetRedirectProps {
  * The component capable of setting a global redirect route at mounting.
  */
 export function SetRedirect({ from, to }: SetRedirectProps): React.ReactElement {
-  const setRoute = useAction('setRoute');
-  useSetter(() => setRoute(from, () => <Redirect to={to} />));
+  const { setRoute } = useGlobalStateContext();
+  useSetter(() => setRoute(from, createRedirect(to)));
   // tslint:disable-next-line:no-null-keyword
   return null;
 }

package/src/{components → setters}/SetRoute.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
-import { Atom, swap, deref } from '@dbeining/react-atom';
+import create from 'zustand';
+import { render } from '@testing-library/react';
 import { SetRoute } from './SetRoute';
 import { StateContext } from '../state';
 
@@ -8,9 +8,9 @@ const FakeRoute = () => null;
 FakeRoute.displayName = 'FakeRoute';
 
 function createMockContainer() {
-  const state = Atom.of({
+  const state = create(() => ({
     routes: {},
-  });
+  }));
   return {
     context: {
       on: jest.fn(),
@@ -18,13 +18,14 @@ function createMockContainer() {
       emit: jest.fn(),
       state,
       setRoute(name, comp) {
-        swap(state, (s) => ({
+        const update = (s) => ({
           ...s,
           routes: {
             ...s.routes,
             [name]: comp,
           },
-        }));
+        });
+        state.setState(update(state.getState()));
       },
     } as any,
   };
@@ -33,12 +34,12 @@ function createMockContainer() {
 describe('Piral-Core SetRoute component', () => {
   it('SetRoute sets the link route in the store', () => {
     const { context } = createMockContainer();
-    const node = mount(
+    render(
       <StateContext.Provider value={context}>
         <SetRoute path="/foo" component={FakeRoute} />
       </StateContext.Provider>,
     );
-    expect(deref<any>(context.state).routes).toEqual({
+    expect(context.state.getState().routes).toEqual({
       '/foo': FakeRoute,
     });
   });

package/src/{components → setters}/SetRoute.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
-import { useAction, useSetter } from '../hooks';
+import { useGlobalStateContext, useSetter } from '../hooks';
 
 /**
  * The props for the SetRoute component.
  */
-export interface SetRouteProps<T = {}> {
+export interface SetRouteProps<T extends { [K in keyof T]?: string } = {}> {
   /**
    * The path to the route.
    */
@@ -19,8 +19,11 @@ export interface SetRouteProps<T = {}> {
 /**
  * The component capable of setting a global route at mounting.
  */
-export function SetRoute<T = {}>({ path, component }: SetRouteProps<T>): React.ReactElement {
-  const setRoute = useAction('setRoute');
+export function SetRoute<T extends { [K in keyof T]?: string } = {}>({
+  path,
+  component,
+}: SetRouteProps<T>): React.ReactElement {
+  const { setRoute } = useGlobalStateContext();
   useSetter(() => component && setRoute(path, component));
   // tslint:disable-next-line:no-null-keyword
   return null;

package/src/setters/index.ts

@@ -0,0 +1,7 @@
+export * from './SetComponent';
+export * from './SetError';
+export * from './SetErrors';
+export * from './SetLayout';
+export * from './SetProvider';
+export * from './SetRedirect';
+export * from './SetRoute';

package/src/state/createActions.test.ts

@@ -1,5 +1,5 @@
+import { createListener } from 'piral-base';
 import { createActions, includeActions } from './createActions';
-import { createListener } from '../utils';
 
 jest.mock('../actions', () => ({
   a(arg) {
@@ -14,7 +14,7 @@ describe('Create Actions Module', () => {
   it('createActions works with all actions', () => {
     const events = createListener(undefined);
     const actions = createActions('abc' as any, events);
-    expect(Object.keys(actions)).toEqual(['on', 'off', 'emit', 'apis', 'converters', 'state', 'a', 'b']);
+    expect(Object.keys(actions)).toEqual(['on', 'off', 'emit', 'apis', 'converters', 'navigation', 'state', 'a', 'b']);
   });
 
   it('createActions binds against given context', () => {

package/src/state/createActions.ts

@@ -1,14 +1,16 @@
 import * as actions from '../actions';
-import { Atom } from '@dbeining/react-atom';
+import { UseBoundStore } from 'zustand';
+import { createNavigation } from '../../app.codegen';
 import { EventEmitter, GlobalState, GlobalStateContext, PiralDefineActions } from '../types';
 
-function createContext(state: Atom<GlobalState>, events: EventEmitter) {
+function createContext(state: UseBoundStore<GlobalState>, events: EventEmitter) {
   const ctx = {
     ...events,
     apis: {},
     converters: {
       html: ({ component }) => component,
     },
+    navigation: createNavigation(),
     state,
   } as GlobalStateContext;
   return ctx;
@@ -23,7 +25,7 @@ export function includeActions(ctx: GlobalStateContext, actions: PiralDefineActi
   }
 }
 
-export function createActions(state: Atom<GlobalState>, events: EventEmitter): GlobalStateContext {
+export function createActions(state: UseBoundStore<GlobalState>, events: EventEmitter): GlobalStateContext {
   const context = createContext(state, events);
   includeActions(context, actions);
   return context;

package/src/state/createGlobalState.test.ts

@@ -1,25 +1,28 @@
-import { deref } from '@dbeining/react-atom';
-import { BrowserRouter as DefaultRouter } from 'react-router-dom';
 import { createGlobalState } from './createGlobalState';
-import { DefaultErrorInfo, DefaultLoadingIndicator, DefaultLayout } from '../components';
+
+process.env.PIRAL_PUBLIC_PATH = '/';
 
 describe('Create Global State Module', () => {
   window.matchMedia = jest.fn((q) => ({ matches: false })) as any;
 
   it('global state works with language as empty string', () => {
     const globalState = createGlobalState({});
-    expect(deref(globalState)).toEqual({
+    const tmp = globalState.getState();
+
+    console.log(tmp);
+
+    expect(tmp).toEqual({
       app: {
-        layout: 'desktop',
         loading: true,
         error: undefined,
       },
       errorComponents: {},
       components: {
-        ErrorInfo: DefaultErrorInfo,
-        LoadingIndicator: DefaultLoadingIndicator,
-        Router: DefaultRouter,
-        Layout: DefaultLayout,
+        ErrorInfo: expect.anything(),
+        LoadingIndicator: expect.anything(),
+        Router: expect.anything(),
+        Layout: expect.anything(),
+        RouteSwitch: expect.anything(),
       },
       routes: {},
       registry: {
@@ -35,18 +38,18 @@ describe('Create Global State Module', () => {
 
   it('global state with custom language and translations', () => {
     const globalState = createGlobalState({});
-    expect(deref(globalState)).toEqual({
+    expect(globalState.getState()).toEqual({
       app: {
-        layout: 'desktop',
         loading: true,
         error: undefined,
       },
       errorComponents: {},
       components: {
-        ErrorInfo: DefaultErrorInfo,
-        LoadingIndicator: DefaultLoadingIndicator,
-        Router: DefaultRouter,
-        Layout: DefaultLayout,
+        ErrorInfo: expect.anything(),
+        LoadingIndicator: expect.anything(),
+        Router: expect.anything(),
+        Layout: expect.anything(),
+        RouteSwitch: expect.anything(),
       },
       routes: {},
       registry: {
@@ -66,18 +69,18 @@ describe('Create Global State Module', () => {
       '/foo': '...' as any,
     };
     const globalState = createGlobalState({ routes });
-    expect(deref(globalState)).toEqual({
+    expect(globalState.getState()).toEqual({
       app: {
         error: undefined,
-        layout: 'desktop',
         loading: true,
       },
       errorComponents: {},
       components: {
-        ErrorInfo: DefaultErrorInfo,
-        LoadingIndicator: DefaultLoadingIndicator,
-        Router: DefaultRouter,
-        Layout: DefaultLayout,
+        ErrorInfo: expect.anything(),
+        LoadingIndicator: expect.anything(),
+        Router: expect.anything(),
+        Layout: expect.anything(),
+        RouteSwitch: expect.anything(),
       },
       routes,
       registry: {
@@ -93,18 +96,18 @@ describe('Create Global State Module', () => {
 
   it('global state can be created without arguments', () => {
     const globalState = createGlobalState();
-    expect(deref(globalState)).toEqual({
+    expect(globalState.getState()).toEqual({
       app: {
-        layout: 'desktop',
         loading: true,
         error: undefined,
       },
       errorComponents: {},
       components: {
-        ErrorInfo: DefaultErrorInfo,
-        LoadingIndicator: DefaultLoadingIndicator,
-        Router: DefaultRouter,
-        Layout: DefaultLayout,
+        ErrorInfo: expect.anything(),
+        LoadingIndicator: expect.anything(),
+        Router: expect.anything(),
+        Layout: expect.anything(),
+        RouteSwitch: expect.anything(),
       },
       registry: {
         extensions: {},
@@ -122,18 +125,18 @@ describe('Create Global State Module', () => {
     const globalState = createGlobalState({
       app: {},
     });
-    expect(deref(globalState)).toEqual({
+    expect(globalState.getState()).toEqual({
       app: {
-        layout: 'desktop',
         loading: true,
         error: undefined,
       },
       errorComponents: {},
       components: {
-        ErrorInfo: DefaultErrorInfo,
-        LoadingIndicator: DefaultLoadingIndicator,
-        Router: DefaultRouter,
-        Layout: DefaultLayout,
+        ErrorInfo: expect.anything(),
+        LoadingIndicator: expect.anything(),
+        Router: expect.anything(),
+        Layout: expect.anything(),
+        RouteSwitch: expect.anything(),
       },
       registry: {
         extensions: {},
@@ -151,18 +154,18 @@ describe('Create Global State Module', () => {
     const globalState = createGlobalState({
       app: {},
     });
-    expect(deref(globalState)).toEqual({
+    expect(globalState.getState()).toEqual({
       app: {
-        layout: 'desktop',
         loading: true,
         error: undefined,
       },
       errorComponents: {},
       components: {
-        ErrorInfo: DefaultErrorInfo,
-        LoadingIndicator: DefaultLoadingIndicator,
-        Router: DefaultRouter,
-        Layout: DefaultLayout,
+        ErrorInfo: expect.anything(),
+        LoadingIndicator: expect.anything(),
+        Router: expect.anything(),
+        Layout: expect.anything(),
+        RouteSwitch: expect.anything(),
       },
       registry: {
         extensions: {},
@@ -178,26 +181,24 @@ describe('Create Global State Module', () => {
 
   it('global state with non-default breakpoints and more routes', () => {
     const globalState = createGlobalState({
-      app: {
-        layout: 'desktop',
-      },
+      app: {},
       routes: {
         '/': '...' as any,
         '/foo': '...' as any,
       },
     });
-    expect(deref(globalState)).toEqual({
+    expect(globalState.getState()).toEqual({
       app: {
-        layout: 'desktop',
         loading: true,
         error: undefined,
       },
       errorComponents: {},
       components: {
-        ErrorInfo: DefaultErrorInfo,
-        LoadingIndicator: DefaultLoadingIndicator,
-        Router: DefaultRouter,
-        Layout: DefaultLayout,
+        ErrorInfo: expect.anything(),
+        LoadingIndicator: expect.anything(),
+        Router: expect.anything(),
+        Layout: expect.anything(),
+        RouteSwitch: expect.anything(),
       },
       registry: {
         extensions: {},
@@ -220,18 +221,18 @@ describe('Create Global State Module', () => {
         loading: false,
       },
     });
-    expect(deref(globalState)).toEqual({
+    expect(globalState.getState()).toEqual({
       app: {
-        layout: 'desktop',
         loading: false,
         error: undefined,
       },
       errorComponents: {},
       components: {
-        ErrorInfo: DefaultErrorInfo,
-        LoadingIndicator: DefaultLoadingIndicator,
-        Router: DefaultRouter,
-        Layout: DefaultLayout,
+        ErrorInfo: expect.anything(),
+        LoadingIndicator: expect.anything(),
+        Router: expect.anything(),
+        Layout: expect.anything(),
+        RouteSwitch: expect.anything(),
       },
       registry: {
         extensions: {},