piral-core 0.15.0-alpha.4332 → 0.15.0-alpha.4396

package/src/helpers.test.tsx

@@ -1,7 +1,7 @@
+import create from 'zustand';
 import { createPiletOptions, PiletOptionsConfig } from './helpers';
 import { globalDependencies } from './modules';
 import { PiletMetadata } from 'piral-base';
-import { Atom, swap, deref } from '@dbeining/react-atom';
 
 function createMockApi(meta: PiletMetadata) {
   return {
@@ -13,7 +13,7 @@ function createMockApi(meta: PiletMetadata) {
 }
 
 function createMockContainer() {
-  const state = Atom.of({
+  const state = create(() => ({
     registry: {
       pages: {},
       extensions: {},
@@ -22,7 +22,7 @@ function createMockContainer() {
     routes: {},
     components: {},
     modules: [],
-  });
+  }));
   return {
     context: {
       on: jest.fn(),
@@ -30,19 +30,20 @@ function createMockContainer() {
       emit: jest.fn(),
       state,
       dispatch(cb) {
-        swap(state, cb);
+        state.setState(cb(state.getState()));
       },
       readState(cb) {
-        return cb(deref(state));
+        return cb(state.getState());
       },
       setComponent(name, comp) {
-        swap(state, (s) => ({
+        const s = state.getState();
+        state.setState({
           ...s,
           components: {
             ...s.components,
             [name]: comp,
           },
-        }));
+        });
       },
     } as any,
   };
@@ -85,7 +86,7 @@ describe('Piral-Core helpers module', () => {
     const options = createPiletOptions(optionsConfig);
 
     // Assert
-    expect(options.pilets.length).toEqual(providedPilets.length);
+    expect(options.pilets?.length).toEqual(providedPilets.length);
 
     if (wasUndefined) {
       process.env.DEBUG_PIRAL = undefined;

package/src/hooks/globalState.ts

@@ -1,16 +1,7 @@
 import { useContext } from 'react';
-import { useAtom, deref } from '@dbeining/react-atom';
 import { StateContext } from '../state/stateContext';
 import { GlobalState } from '../types';
 
-const useGlobalAtom = typeof window !== 'undefined' ? useAtom : useDirectAtom;
-
-function useDirectAtom(atom: any, opts: any) {
-  const state = deref(atom);
-  const select = opts && opts.select;
-  return typeof select === 'function' ? select(state) : state;
-}
-
 /**
  * Hook to obtain the global state context, which gives you directly
  * all actions, state, and more of the Piral instance.
@@ -35,6 +26,6 @@ export function useGlobalState(): GlobalState;
 export function useGlobalState<R>(select: (state: GlobalState) => R): R;
 
 export function useGlobalState<R>(select?: (state: GlobalState) => R) {
-  const { state } = useGlobalStateContext();
-  return useGlobalAtom(state, select && { select });
+  const { state: useState } = useGlobalStateContext();
+  return useState(select);
 }

package/src/hooks/setter.test.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { act } from 'react-dom/test-utils';
-import { createRoot } from 'react-dom/client';
+import { render } from 'react-dom';
 import { useSetter } from './setter';
 
 describe('UseSetter Hook Module', () => {
@@ -12,9 +12,8 @@ describe('UseSetter Hook Module', () => {
       return null;
     };
 
-    const root = createRoot(document.body.appendChild(document.createElement('div')));
-    root.render(React.createElement(MyComponent));
-    await act(() => new Promise(resolve => setTimeout(resolve, 5)));
+    render(React.createElement(MyComponent), document.body.appendChild(document.createElement('div')));
+    await act(() => new Promise((resolve) => setTimeout(resolve, 5)));
     expect(cb).toHaveBeenCalled();
   });
 });

package/src/modules/element-server.test.ts

@@ -2,17 +2,17 @@
  * @jest-environment node
  */
 
-import { Atom, deref } from '@dbeining/react-atom';
+import create from 'zustand';
 import { createListener } from 'piral-base';
 import { createActions } from '../state';
 import { renderElement } from './element';
 
 function createMockContext(): [any, any] {
-  const state = Atom.of({
+  const state: any = create(() => ({
     portals: {
       root: [],
     },
-  });
+  }));
   const context = createActions(state, createListener({}));
   return [context, state];
 }
@@ -24,6 +24,6 @@ describe('Elements Module from SSR', () => {
       addEventListener() {},
     };
     renderElement(context, element, {});
-    expect(deref(state)['portals']['root'].length).toBe(0);
+    expect(state.getState().portals.root.length).toBe(0);
   });
 });

package/src/modules/element.test.ts

@@ -1,4 +1,4 @@
-import { Atom, deref } from '@dbeining/react-atom';
+import create from 'zustand';
 import { createListener } from 'piral-base';
 import { createActions } from '../state';
 import { renderElement } from './element';
@@ -14,9 +14,9 @@ declare global {
 }
 
 function createMockContext(): [any, any] {
-  const state = Atom.of({
+  const state: any = create(() => ({
     portals: {},
-  });
+  }));
   const context = createActions(state, createListener({}));
   return [context, state];
 }
@@ -31,7 +31,7 @@ describe('Elements Module', () => {
     element.dispatchEvent(event);
     document.body.removeChild(element);
     (element as any).connectedCallback();
-    expect(deref(state)['portals']['root'].length).toBe(1);
+    expect(state.getState().portals.root.length).toBe(1);
   });
 
   it('disposing piral-extension web component', () => {
@@ -39,9 +39,9 @@ describe('Elements Module', () => {
     const element = document.createElement('piral-extension');
     document.body.appendChild(element);
     const [dispose] = renderElement(context, element, {});
-    expect(deref(state)['portals']['root'].length).toBe(1);
+    expect(state.getState().portals.root.length).toBe(1);
     dispose();
-    expect(deref(state)['portals']['root'].length).toBe(0);
+    expect(state.getState().portals.root.length).toBe(0);
   });
 
   it('testing setters and getters in piral-extension web component', () => {

package/src/setters/SetComponent.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import create from 'zustand';
 import { mount } from 'enzyme';
-import { Atom, swap, deref } from '@dbeining/react-atom';
 import { SetComponent } from './SetComponent';
 import { StateContext } from '../state';
 
@@ -8,9 +8,9 @@ const FakeLoading = () => null;
 FakeLoading.displayName = 'FakeLoading';
 
 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,
   };
@@ -38,7 +39,7 @@ describe('Piral-Core SetComponent component', () => {
         <SetComponent name="LoadingIndicator" component={FakeLoading} />
       </StateContext.Provider>,
     );
-    expect(deref<any>(context.state).components).toEqual({
+    expect(context.state.getState().components).toEqual({
       LoadingIndicator: FakeLoading,
     });
   });

package/src/setters/SetError.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import create from 'zustand';
 import { mount } from 'enzyme';
-import { Atom, swap, deref } from '@dbeining/react-atom';
 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,
   };
@@ -38,7 +39,7 @@ describe('Piral-Core SetError component', () => {
         <SetError type="loading" component={FakeError} />
       </StateContext.Provider>,
     );
-    expect(deref<any>(context.state).errorComponents).toEqual({
+    expect((context.state.getState()).errorComponents).toEqual({
       loading: FakeError,
     });
   });

package/src/setters/SetErrors.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import create from 'zustand';
 import { mount } from 'enzyme';
-import { Atom, swap, deref } from '@dbeining/react-atom';
 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,
   };
@@ -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/setters/SetLayout.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import create from 'zustand';
 import { mount } from 'enzyme';
-import { Atom, swap, deref } from '@dbeining/react-atom';
 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,
   };
@@ -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/setters/SetProvider.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import create from 'zustand';
 import { mount } from 'enzyme';
-import { Atom, swap, deref } from '@dbeining/react-atom';
 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,
   };
@@ -36,6 +37,6 @@ describe('Piral-Core SetProvider component', () => {
         <SetProvider provider={provider} />
       </StateContext.Provider>,
     );
-    expect(deref<any>(context.state).providers).toEqual([provider]);
+    expect(context.state.getState().providers).toEqual([provider]);
   });
 });

package/src/setters/SetRedirect.test.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
+import create from 'zustand';
 import { mount } from 'enzyme';
-import { Atom, swap, deref } from '@dbeining/react-atom';
 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,
   };
@@ -35,7 +36,7 @@ describe('Piral-Core SetRedirect component', () => {
         <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/setters/SetRoute.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import create from 'zustand';
 import { mount } from 'enzyme';
-import { Atom, swap, deref } from '@dbeining/react-atom';
 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,
   };
@@ -38,7 +39,7 @@ describe('Piral-Core SetRoute component', () => {
         <SetRoute path="/foo" component={FakeRoute} />
       </StateContext.Provider>,
     );
-    expect(deref<any>(context.state).routes).toEqual({
+    expect(context.state.getState().routes).toEqual({
       '/foo': FakeRoute,
     });
   });

package/src/state/createActions.ts

@@ -1,8 +1,8 @@
 import * as actions from '../actions';
-import { Atom } from '@dbeining/react-atom';
+import { UseBoundStore } from 'zustand';
 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: {},
@@ -23,7 +23,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,4 +1,3 @@
-import { deref } from '@dbeining/react-atom';
 import { createGlobalState } from './createGlobalState';
 
 process.env.PIRAL_PUBLIC_PATH = '/';
@@ -8,7 +7,7 @@ describe('Create Global State Module', () => {
 
   it('global state works with language as empty string', () => {
     const globalState = createGlobalState({});
-    const tmp = deref(globalState);
+    const tmp = globalState.getState();
 
     console.log(tmp);
 
@@ -40,7 +39,7 @@ 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: {
         loading: true,
         error: undefined,
@@ -72,7 +71,7 @@ describe('Create Global State Module', () => {
       '/foo': '...' as any,
     };
     const globalState = createGlobalState({ routes });
-    expect(deref(globalState)).toEqual({
+    expect(globalState.getState()).toEqual({
       app: {
         error: undefined,
         loading: true,
@@ -100,7 +99,7 @@ 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: {
         loading: true,
         error: undefined,
@@ -130,7 +129,7 @@ describe('Create Global State Module', () => {
     const globalState = createGlobalState({
       app: {},
     });
-    expect(deref(globalState)).toEqual({
+    expect(globalState.getState()).toEqual({
       app: {
         loading: true,
         error: undefined,
@@ -160,7 +159,7 @@ describe('Create Global State Module', () => {
     const globalState = createGlobalState({
       app: {},
     });
-    expect(deref(globalState)).toEqual({
+    expect(globalState.getState()).toEqual({
       app: {
         loading: true,
         error: undefined,
@@ -188,14 +187,13 @@ describe('Create Global State Module', () => {
 
   it('global state with non-default breakpoints and more routes', () => {
     const globalState = createGlobalState({
-      app: {
-      },
+      app: {},
       routes: {
         '/': '...' as any,
         '/foo': '...' as any,
       },
     });
-    expect(deref(globalState)).toEqual({
+    expect(globalState.getState()).toEqual({
       app: {
         loading: true,
         error: undefined,
@@ -230,7 +228,7 @@ describe('Create Global State Module', () => {
         loading: false,
       },
     });
-    expect(deref(globalState)).toEqual({
+    expect(globalState.getState()).toEqual({
       app: {
         loading: false,
         error: undefined,

package/src/state/createGlobalState.ts

@@ -1,4 +1,4 @@
-import { Atom } from '@dbeining/react-atom';
+import create from 'zustand';
 import { createDefaultState } from '../../app.codegen';
 import { GlobalState, NestedPartial } from '../types';
 
@@ -19,5 +19,5 @@ function extend<T>(defaultState: T, customState: NestedPartial<T>) {
 
 export function createGlobalState(customState: NestedPartial<GlobalState> = {}) {
   const defaultState: GlobalState = createDefaultState();
-  return Atom.of(extend(defaultState, customState));
+  return create(() => extend(defaultState, customState));
 }

package/src/state/withApi.test.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import * as hooks from '../hooks';
+import create from 'zustand';
 import { mount } from 'enzyme';
-import { Atom } from '@dbeining/react-atom';
 import { withApi } from './withApi';
 import { StateContext } from '../state';
 
 function createMockContainer() {
-  const state = Atom.of({
+  const state = create(() => ({
     portals: {},
-  });
+  }));
   return {
     context: {
       converters: {},
@@ -29,9 +29,9 @@ function createMockContainer() {
 }
 
 function createMockContainerWithNoWrappers() {
-  const state = Atom.of({
+  const state = create(() => ({
     portals: {},
-  });
+  }));
   return {
     context: {
       converters: {},

package/src/types/state.ts

@@ -1,7 +1,7 @@
 import type { ComponentType, ReactPortal, PropsWithChildren } from 'react';
 import type { RouteComponentProps } from 'react-router';
-import type { Atom } from '@dbeining/react-atom';
 import type { LoadPiletsOptions } from 'piral-base';
+import type { StoreApi, UseBoundStore } from 'zustand';
 import type { Dict, Without } from './common';
 import type { SharedDataItem, DataStoreTarget } from './data';
 import type {
@@ -36,7 +36,6 @@ export interface StateDispatcher<TState> {
 
 declare module './components' {
   interface ComponentContext {
-    state: Atom<GlobalState>;
     readState: PiralActions['readState'];
   }
 }
@@ -364,7 +363,7 @@ export interface GlobalStateContext extends PiralActions, EventEmitter {
    * The global state context atom.
    * Changes to the state should always be dispatched via the `dispatch` action.
    */
-  state: Atom<GlobalState>;
+  state: UseBoundStore<GlobalState>;
   /**
    * The API objects created for the loaded pilets.
    */