piral-core 0.15.0-alpha.4311 → 0.15.0-alpha.4345

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

@@ -3,10 +3,14 @@ import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
 import { ForeignComponentContainer } from './ForeignComponentContainer';
 
+function resolveAfter(time = 5) {
+  return new Promise<void>(resolve => setTimeout(resolve, time));
+}
+
 async function render(element: any, container: Element) {
   const root = createRoot(container);
   root.render(element);
-  await act(() => Promise.resolve());
+  await act(resolveAfter);
   return root;
 }
 
@@ -63,7 +67,7 @@ describe('ForeignComponentContainer component', () => {
         innerProps={{ a: 'foo' }}
       />,
     );
-    await act(() => Promise.resolve());
+    await act(resolveAfter);
     expect(update).toHaveBeenCalled();
     container.remove();
   });
@@ -74,7 +78,7 @@ describe('ForeignComponentContainer component', () => {
     ForeignComponentContainer.prototype.componentDidMount = function () {
       componentDidMount.call(this);
       this.previous = {
-        removeEventListener() {},
+        removeEventListener() { },
       };
     };
     const mount = jest.fn();
@@ -101,7 +105,7 @@ describe('ForeignComponentContainer component', () => {
         innerProps={{ a: 'foo' }}
       />,
     );
-    await act(() => Promise.resolve());
+    await act(resolveAfter);
     expect(update).not.toHaveBeenCalled();
     expect(unmount).toHaveBeenCalled();
     container.remove();
@@ -121,7 +125,7 @@ describe('ForeignComponentContainer component', () => {
     const node = document.querySelector('[data-portal-id=foo]');
     expect(renderHtmlExtension).not.toHaveBeenCalled();
     node.dispatchEvent(new CustomEvent('render-html', { detail: {} }));
-    await act(() => Promise.resolve());
+    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/components/PiralRoutes.test.tsx

@@ -3,7 +3,7 @@ import * as hooks from '../hooks';
 import { MemoryRouter } from 'react-router';
 import { mount } from 'enzyme';
 import { PiralRoutes } from './PiralRoutes';
-import { DefaultRouteSwitch } from '../defaults';
+import { DefaultRouteSwitch } from '../defaults/DefaultRouteSwitch_v5';
 
 const mountWithRouter = (node, url = '/') =>
   mount(
@@ -14,21 +14,28 @@ const mountWithRouter = (node, url = '/') =>
 
 jest.mock('../hooks');
 
-(hooks as any).useGlobalState = (select: any) =>
-  select({
-    app: {},
-    routes: {
-      '/': StubHome,
-      '/custom': StubCustomPage,
-    },
-    registry: {
-      pages: {
-        '/foo': { component: StubFooPage },
-        '/foo/bar': { component: StubFooBarPage },
-        '/bar': { component: StubBarPage },
-      },
-    },
-  });
+(hooks as any).useRoutes = () => [
+  {
+    path: '/',
+    Component: StubHome,
+  },
+  {
+    path: '/custom',
+    Component: StubCustomPage,
+  },
+  {
+    path: '/foo',
+    Component: StubFooPage,
+  },
+  {
+    path: '/foo/bar',
+    Component: StubFooBarPage,
+  },
+  {
+    path: '/bar',
+    Component: StubBarPage,
+  },
+];
 
 const StubHome: React.FC = (props) => <div />;
 StubHome.displayName = 'StubHome';

package/src/components/PiralRoutes.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RouteComponentProps, SwitchProps } from 'react-router';
-import { useGlobalState } from '../hooks';
+import { useRoutes } from '../hooks';
 import { RouteSwitchProps } from '../types';
 
 /**
@@ -21,13 +21,7 @@ export interface RoutesProps extends SwitchProps {
  * The component for defining the exclusive routes to be used.
  */
 export const PiralRoutes: React.FC<RoutesProps> = ({ NotFound, RouteSwitch, ...props }) => {
-  const routes = useGlobalState((s) => s.routes);
-  const pages = useGlobalState((s) => s.registry.pages);
-  const paths = [];
-
-  Object.keys(routes).map((path) => paths.push({ path, Component: routes[path] }));
-  Object.keys(pages).map((path) => paths.push({ path, Component: pages[path].component }));
-
+  const paths = useRoutes();
   return <RouteSwitch NotFound={NotFound} paths={paths} {...props} />;
 };
 PiralRoutes.displayName = 'Routes';

package/src/components/wrapComponent.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { __RouterContext } from 'react-router';
 import { PortalRenderer } from './PortalRenderer';
 import { ForeignComponentContainer } from './ForeignComponentContainer';
 import { useGlobalStateContext } from '../hooks';
 import { convertComponent, none } from '../utils';
+import { useRouterContext } from '../../app.codegen';
 import type { AnyComponent, ComponentConverters, ForeignComponent, PiletApi, BaseComponentProps } from '../types';
 
 // this is an arbitrary start number to have 6 digits
@@ -32,7 +32,7 @@ function wrapForeignComponent<T>(
 ) {
   return React.memo((props: T) => {
     const { state, readState, destroyPortal } = useGlobalStateContext();
-    const router = React.useContext(__RouterContext);
+    const router = useRouterContext();
     const id = React.useMemo(() => (portalIdBase++).toString(26), none);
     const context = React.useMemo(() => ({ router, state, readState }), [router, state]);
     const innerProps = React.useMemo(() => ({ ...props, ...captured }), [props]);

package/src/createInstance.tsx

@@ -50,7 +50,7 @@ export function createInstance(config: PiralInstanceOptions = {}): PiralInstance
   const createApi = apiFactory(context, usedPlugins);
   const root = createApi({
     name: '_',
-    version: process.env.BUILD_PCKG_VERSION || '1.0.0',
+    version: '0',
     spec: 'v0',
     basePath: '',
     link: '',

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';
@@ -42,6 +41,9 @@ export function integrateDebugger(
     getGlobalState() {
       return context.readState((s) => s);
     },
+    navigate(path, state) {
+      return context.navigate(path, state);
+    },
     getPilets() {
       return context.readState((s) => s.modules);
     },
@@ -65,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;

package/src/defaults/{DefaultRouteSwitch.tsx → DefaultRouteSwitch_v5.tsx}

@@ -12,3 +12,4 @@ export const DefaultRouteSwitch: React.FC<RouteSwitchProps> = ({ paths, NotFound
     </Switch>
   );
 };
+DefaultRouteSwitch.displayName = 'DefaultRouteSwitch';