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

package/src/actions/components.test.ts

@@ -1,20 +1,20 @@
-import { Atom, deref } from '@dbeining/react-atom';
+import create from 'zustand';
 import { createListener } from 'piral-base';
 import { registerExtension, registerPage, unregisterExtension, unregisterPage } from './components';
 import { createActions } from '../state';
 
 describe('Components Actions Module', () => {
   it('registerExtension and unregisterExtension', () => {
-    const state = Atom.of({
+    const state: any = create(() => ({
       foo: 5,
       registry: {
         foo: 5,
         extensions: {},
       },
-    });
+    }));
     const ctx = createActions(state, createListener({}));
     registerExtension(ctx, 'foo', 10 as any);
-    expect(deref(state)).toEqual({
+    expect(state.getState()).toEqual({
       foo: 5,
       registry: {
         foo: 5,
@@ -23,8 +23,8 @@ describe('Components Actions Module', () => {
         },
       },
     });
-    unregisterExtension(ctx, 'foo');
-    expect(deref(state)).toEqual({
+    unregisterExtension(ctx, 'foo', undefined);
+    expect(state.getState()).toEqual({
       foo: 5,
       registry: {
         foo: 5,
@@ -36,16 +36,16 @@ describe('Components Actions Module', () => {
   });
 
   it('registerPage and unregisterPage', () => {
-    const state = Atom.of({
+    const state: any = create(() => ({
       foo: 5,
       registry: {
         foo: 5,
         pages: {},
       },
-    });
+    }));
     const ctx = createActions(state, createListener({}));
     registerPage(ctx, 'foo', 10 as any);
-    expect(deref(state)).toEqual({
+    expect(state.getState()).toEqual({
       foo: 5,
       registry: {
         foo: 5,
@@ -55,7 +55,7 @@ describe('Components Actions Module', () => {
       },
     });
     unregisterPage(ctx, 'foo');
-    expect(deref(state)).toEqual({
+    expect(state.getState()).toEqual({
       foo: 5,
       registry: {
         foo: 5,

package/src/actions/data.test.ts

@@ -1,22 +1,22 @@
-import { Atom, deref, swap } from '@dbeining/react-atom';
+import create from 'zustand';
 import { createListener } from 'piral-base';
 import { readDataItem, readDataValue, resetData, tryWriteDataItem, writeDataItem } from './data';
 
 describe('Data Actions Module', () => {
   it('readDataItem reads the current item', () => {
-    const state = Atom.of({
+    const state = create(() => ({
       foo: 5,
       data: {
         foo: 10,
       },
-    });
+    }));
     const ctx: any = {
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
       readState(select) {
-        return select(deref(state));
+        return select(state.getState());
       },
     };
     const value = readDataItem(ctx, 'foo');
@@ -24,21 +24,21 @@ describe('Data Actions Module', () => {
   });
 
   it('readDataValue reads the current value', () => {
-    const state = Atom.of({
+    const state = create(() => ({
       foo: 5,
       data: {
         foo: {
           value: 15,
         },
       },
-    });
+    }));
     const ctx: any = {
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
       readState(select) {
-        return select(deref(state));
+        return select(state.getState());
       },
     };
     const value = readDataValue(ctx, 'foo');
@@ -46,48 +46,48 @@ describe('Data Actions Module', () => {
   });
 
   it('resetData clears all items', () => {
-    const state = Atom.of({
+    const state = create(() => ({
       foo: 5,
       data: {
         foo: 10,
         bar: [5],
       },
-    });
+    }));
     const ctx: any = {
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
       readState(select) {
-        return select(deref(state));
+        return select(state.getState());
       },
     };
     resetData(ctx);
-    expect(deref(state)).toEqual({
+    expect(state.getState()).toEqual({
       foo: 5,
       data: {},
     });
   });
 
   it('writeDataItem adds a new data item', () => {
-    const state = Atom.of({
+    const state = create(() => ({
       foo: 5,
       data: {
         foo: 10,
         bar: [5],
       },
-    });
+    }));
     const ctx: any = Object.assign(createListener(undefined), {
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
       readState(select) {
-        return select(deref(state));
+        return select(state.getState());
       },
     });
-    writeDataItem(ctx, 'fi', 0);
-    expect(deref(state)).toEqual({
+    writeDataItem(ctx, 'fi', 0, undefined, undefined, undefined);
+    expect(state.getState()).toEqual({
       foo: 5,
       data: {
         foo: 10,
@@ -103,24 +103,24 @@ describe('Data Actions Module', () => {
   });
 
   it('writeDataItem overwrites an existing data item', () => {
-    const state = Atom.of({
+    const state = create(() => ({
       foo: 5,
       data: {
         foo: 10,
         bar: [5],
       },
-    });
+    }));
     const ctx: any = Object.assign(createListener(undefined), {
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
       readState(select) {
-        return select(deref(state));
+        return select(state.getState());
       },
     });
-    writeDataItem(ctx, 'bar', 0);
-    expect(deref(state)).toEqual({
+    writeDataItem(ctx, 'bar', 0, undefined, undefined, undefined);
+    expect(state.getState()).toEqual({
       foo: 5,
       data: {
         foo: 10,
@@ -135,24 +135,24 @@ describe('Data Actions Module', () => {
   });
 
   it('writeDataItem removes an existing data item', () => {
-    const state = Atom.of({
+    const state = create(() => ({
       foo: 5,
       data: {
         foo: 10,
         bar: [5],
       },
-    });
+    }));
     const ctx: any = Object.assign(createListener(undefined), {
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
       readState(select) {
-        return select(deref(state));
+        return select(state.getState());
       },
     });
-    writeDataItem(ctx, 'bar', null);
-    expect(deref(state)).toEqual({
+    writeDataItem(ctx, 'bar', null, undefined, undefined, undefined);
+    expect(state.getState()).toEqual({
       foo: 5,
       data: {
         foo: 10,
@@ -161,27 +161,27 @@ describe('Data Actions Module', () => {
   });
 
   it('tryWriteDataItem can write new item', () => {
-    const state = Atom.of({
+    const state = create(() => ({
       foo: 5,
       data: {
         foo: 10,
       },
-    });
+    }));
     const ctx: any = Object.assign(createListener(undefined), {
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
       readState(select) {
-        return select(deref(state));
+        return select(state.getState());
       },
     });
-    const success = tryWriteDataItem(ctx, 'bar', 10, 'me');
+    const success = tryWriteDataItem(ctx, 'bar', 10, 'me', undefined, undefined);
     expect(success).toBe(true);
   });
 
   it('tryWriteDataItem can overwrite item if owner', () => {
-    const state = Atom.of({
+    const state = create(() => ({
       foo: 5,
       data: {
         foo: 10,
@@ -190,23 +190,23 @@ describe('Data Actions Module', () => {
           value: 5,
         },
       },
-    });
+    }));
     const ctx: any = Object.assign(createListener(undefined), {
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
       readState(select) {
-        return select(deref(state));
+        return select(state.getState());
       },
     });
-    const success = tryWriteDataItem(ctx, 'bar', 10, 'me');
+    const success = tryWriteDataItem(ctx, 'bar', 10, 'me', undefined, undefined);
     expect(success).toBe(true);
-    expect(deref(state).data.bar.value).toBe(10);
+    expect(state.getState().data.bar.value).toBe(10);
   });
 
   it('tryWriteDataItem can not overwrite item if not owner', () => {
-    const state = Atom.of({
+    const state = create(() => ({
       foo: 5,
       data: {
         foo: 10,
@@ -215,18 +215,18 @@ describe('Data Actions Module', () => {
           value: 5,
         },
       },
-    });
+    }));
     const ctx: any = Object.assign(createListener(undefined), {
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
       readState(select) {
-        return select(deref(state));
+        return select(state.getState());
       },
     });
-    const success = tryWriteDataItem(ctx, 'bar', 10, 'me');
+    const success = tryWriteDataItem(ctx, 'bar', 10, 'me', undefined, undefined);
     expect(success).toBe(false);
-    expect(deref(state).data.bar.value).toBe(5);
+    expect(state.getState().data.bar.value).toBe(5);
   });
 });

package/src/actions/define.test.ts

@@ -1,8 +1,8 @@
-import { Atom } from '@dbeining/react-atom';
+import create from 'zustand';
 import { defineAction, defineActions } from './define';
 
 function createMockContainer(initialState = {}) {
-  const state = Atom.of(initialState);
+  const state = create(() => initialState);
   return {
     context: {
       on: jest.fn(),

package/src/actions/portal.test.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Atom, swap, deref } from '@dbeining/react-atom';
+import create from 'zustand';
 import { showPortal, destroyPortal, hidePortal, updatePortal } from './portal';
 
 describe('Piral-Core portal actions', () => {
@@ -7,19 +7,19 @@ describe('Piral-Core portal actions', () => {
     const children = React.createElement('div');
     const portal: React.ReactPortal = { key: 'test', children: { children }, type: 'div', props: null };
 
-    const state = Atom.of({
+    const state = create(() => ({
       portals: { test: { portal } },
-    });
+    }));
 
     const ctx: any = {
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
     };
 
     destroyPortal(ctx, 'test');
-    const { portals } = deref(ctx.state);
+    const { portals } = ctx.state.getState();
     expect(portals).not.toBeNull();
     expect(portals.test).toBeUndefined();
   });
@@ -29,19 +29,19 @@ describe('Piral-Core portal actions', () => {
     const newPortal: React.ReactPortal = { key: 'test', children: { children }, type: 'div', props: null };
     const portal: React.ReactPortal = { key: 'toast', children: { children }, type: 'div', props: null };
 
-    const state = Atom.of({
+    const state = create(() => ({
       portals: { p1: { portal } },
-    });
+    }));
 
     const ctx: any = {
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
     };
 
     hidePortal(ctx, 'test', newPortal);
-    const { portals } = deref(ctx.state);
+    const { portals } = ctx.state.getState();
     expect(portals).not.toBeNull();
     expect(portals.test).not.toBeNull();
   });
@@ -52,19 +52,19 @@ describe('Piral-Core portal actions', () => {
     const next: React.ReactPortal = { key: 'next', children: { children }, type: 'div', props: null };
     const portal: React.ReactPortal = { key: 'toast', children: { children }, type: 'div', props: null };
 
-    const state = Atom.of({
+    const state = create(() => ({
       portals: { p1: { portal } },
-    });
+    }));
 
     const ctx: any = {
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
     };
 
     updatePortal(ctx, 'test', current, next);
-    const { portals } = deref(ctx.state);
+    const { portals } = ctx.state.getState();
     expect(portals).not.toBeNull();
     expect(portals.test).not.toBeNull();
   });
@@ -74,19 +74,19 @@ describe('Piral-Core portal actions', () => {
     const newPortal: React.ReactPortal = { key: 'test', children: { children }, type: 'div', props: null };
     const portal: React.ReactPortal = { key: 'toast', children: { children }, type: 'div', props: null };
 
-    const state = Atom.of({
+    const state = create(() => ({
       portals: { p1: { portal } },
-    });
+    }));
 
     const ctx: any = {
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
     };
 
     showPortal(ctx, 'test', newPortal);
-    const { portals } = deref(ctx.state);
+    const { portals } = ctx.state.getState();
     expect(portals).not.toBeNull();
     expect(portals.test).not.toBeNull();
   });

package/src/actions/state.test.ts

@@ -1,8 +1,8 @@
-import { Atom, deref } from '@dbeining/react-atom';
+import create from 'zustand';
 import { readState, dispatch } from './state';
 
 function createMockContainer(initialState = {}) {
-  const state = Atom.of(initialState);
+  const state = create(() => initialState);
   return {
     context: {
       on: jest.fn(),
@@ -11,7 +11,7 @@ function createMockContainer(initialState = {}) {
       defineActions() {},
       state,
       read() {
-        return deref(state);
+        return state.getState();
       },
     } as any,
   };

package/src/actions/state.ts

@@ -1,16 +1,15 @@
-import { swap, deref } from '@dbeining/react-atom';
 import { isSame } from '../utils';
 import { GlobalState, GlobalStateContext } from '../types';
 
-function onlyChangedState(oldState: GlobalState, newState: GlobalState) {
-  return isSame(oldState, newState) ? oldState : newState;
-}
-
 export function dispatch(ctx: GlobalStateContext, update: (state: GlobalState) => GlobalState) {
-  swap(ctx.state, oldState => onlyChangedState(oldState, update(oldState)));
+  const oldState = ctx.state.getState();
+  const newState = update(oldState);
+
+  if (!isSame(oldState, newState)) {
+    ctx.state.setState(newState);
+  }
 }
 
 export function readState<S>(ctx: GlobalStateContext, read: (state: GlobalState) => S) {
-  const state = deref(ctx.state);
-  return read(state);
+  return read(ctx.state.getState());
 }

package/src/components/ForeignComponentContainer.test.tsx

@@ -1,17 +1,16 @@
 import * as React from 'react';
-import { createRoot } from 'react-dom/client';
+import { render as renderDom } from 'react-dom';
 import { act } from 'react-dom/test-utils';
 import { ForeignComponentContainer } from './ForeignComponentContainer';
 
 function resolveAfter(time = 5) {
-  return new Promise<void>(resolve => setTimeout(resolve, time));
+  return new Promise<void>((resolve) => setTimeout(resolve, time));
 }
 
 async function render(element: any, container: Element) {
-  const root = createRoot(container);
-  root.render(element);
+  renderDom(element, container);
   await act(resolveAfter);
-  return root;
+  return () => renderDom(<div />, container);
 }
 
 describe('ForeignComponentContainer component', () => {
@@ -32,13 +31,13 @@ describe('ForeignComponentContainer component', () => {
     const mount = jest.fn();
     const unmount = jest.fn();
     const component = { mount, unmount };
-    const root = await render(
+    const doUnmount = await render(
       <ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={{}} />,
       container,
     );
     expect(mount).toHaveBeenCalled();
     expect(unmount).not.toHaveBeenCalled();
-    root.unmount();
+    doUnmount();
     expect(unmount).toHaveBeenCalled();
     container.remove();
   });
@@ -48,7 +47,7 @@ describe('ForeignComponentContainer component', () => {
     const mount = jest.fn();
     const update = jest.fn();
     const component = { mount, update };
-    const root = await render(
+    await render(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
@@ -59,13 +58,14 @@ describe('ForeignComponentContainer component', () => {
     );
     expect(mount).toHaveBeenCalled();
     expect(update).not.toHaveBeenCalled();
-    root.render(
+    await render(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
         $portalId="foo"
         innerProps={{ a: 'foo' }}
       />,
+      container,
     );
     await act(resolveAfter);
     expect(update).toHaveBeenCalled();
@@ -78,14 +78,14 @@ describe('ForeignComponentContainer component', () => {
     ForeignComponentContainer.prototype.componentDidMount = function () {
       componentDidMount.call(this);
       this.previous = {
-        removeEventListener() { },
+        removeEventListener() {},
       };
     };
     const mount = jest.fn();
     const update = jest.fn();
     const unmount = jest.fn();
     const component = { mount, update, unmount };
-    const root = await render(
+    await render(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
@@ -97,13 +97,14 @@ describe('ForeignComponentContainer component', () => {
     expect(mount).toHaveBeenCalled();
     expect(unmount).not.toHaveBeenCalled();
     expect(update).not.toHaveBeenCalled();
-    root.render(
+    await render(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
         $portalId="foo"
         innerProps={{ a: 'foo' }}
       />,
+      container,
     );
     await act(resolveAfter);
     expect(update).not.toHaveBeenCalled();
@@ -124,7 +125,7 @@ describe('ForeignComponentContainer component', () => {
     expect(mount).toHaveBeenCalled();
     const node = document.querySelector('[data-portal-id=foo]');
     expect(renderHtmlExtension).not.toHaveBeenCalled();
-    node.dispatchEvent(new CustomEvent('render-html', { detail: {} }));
+    node?.dispatchEvent(new CustomEvent('render-html', { detail: {} }));
     await act(resolveAfter);
     expect(renderHtmlExtension).toHaveBeenCalled();
     container.remove();

package/src/components/Mediator.test.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react';
+import create from 'zustand';
 import { Mediator } from './Mediator';
-import { Atom, swap, deref } from '@dbeining/react-atom';
 import { mount } from 'enzyme';
 import { StateContext } from '../state';
 import { PiletMetadata } from '../types';
 
 function createMockContainer() {
-  const state = Atom.of({
+  const state = create(() => ({
     app: {
       layout: 'tablet',
       loading: false,
       error: undefined,
     },
-  });
+  }));
   return {
     context: {
       on: jest.fn(),
@@ -20,21 +20,22 @@ function createMockContainer() {
       emit: jest.fn(),
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
       readState(select) {
-        return select(deref(state));
+        return select(state.getState());
       },
       initialize(loading, error, modules) {
-        swap(state, (state) => ({
-          ...state,
+        const s = state.getState();
+        state.setState({
+          ...s,
           app: {
-            ...state.app,
+            ...s.app,
             error,
             loading,
           },
           modules,
-        }));
+        } as any);
       },
     } as any,
   };
@@ -54,6 +55,6 @@ describe('Component Mediator', () => {
         <Mediator options={options} />
       </StateContext.Provider>,
     );
-    expect(deref<any>(context.state).app.layout).toEqual('tablet');
+    expect(context.state.getState().app.layout).toEqual('tablet');
   });
 });

package/src/debugger.ts

@@ -1,4 +1,3 @@
-import { addChangeHandler } from '@dbeining/react-atom';
 import { LoadPiletsOptions } from 'piral-base';
 import { installPiralDebug, DebuggerExtensionOptions } from 'piral-debug-utils';
 import { GlobalStateContext } from './types';
@@ -68,7 +67,7 @@ export function integrateDebugger(
         },
       }));
 
-      addChangeHandler(context.state, 'debugging', ({ previous, current }) => {
+      context.state.subscribe((current, previous) => {
         const pilets = current.modules !== previous.modules;
         const pages = current.registry.pages !== previous.registry.pages || current.routes !== previous.routes;
         const extensions = current.registry.extensions !== previous.registry.extensions;