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

package/src/defaults/DefaultRouteSwitch_v6.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+//@ts-ignore
+import { Routes, Route } from 'react-router-dom';
+import { RouteSwitchProps } from '../types';
+
+export const DefaultRouteSwitch: React.FC<RouteSwitchProps> = ({ paths, NotFound, ...props }) => {
+  return (
+    <Routes {...props}>
+      {paths.map(({ path, Component }) => (
+        //@ts-ignore
+        <Route key={path} path={path} element={<Component />} />
+      ))}
+      {
+        //@ts-ignore
+        <Route element={<NotFound />} />
+      }
+    </Routes>
+  );
+};
+DefaultRouteSwitch.displayName = 'DefaultRouteSwitch';

package/src/defaults/{DefaultRouter.tsx → DefaultRouter_v5.tsx}

@@ -7,3 +7,4 @@ export const DefaultRouter: React.FC<RouterProps> = ({ children }) => {
   const publicPath = useGlobalState((s) => s.app.publicPath);
   return <BrowserRouter basename={publicPath}>{children}</BrowserRouter>;
 };
+DefaultRouter.displayName = 'DefaultRouter';

package/src/defaults/DefaultRouter_v6.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { useGlobalState } from '../hooks';
+import { RouterProps } from '../types';
+
+export const DefaultRouter: React.FC<RouterProps> = ({ children }) => {
+  const publicPath = useGlobalState((s) => s.app.publicPath);
+  return <BrowserRouter basename={publicPath}>{children}</BrowserRouter>;
+};
+DefaultRouter.displayName = 'DefaultRouter';

package/src/emulator.ts

@@ -6,16 +6,8 @@ export function integrateEmulator(context: GlobalStateContext, options: LoadPile
   installPiletEmulator(options.fetchPilets, {
     addPilet: context.addPilet,
     removePilet: context.removePilet,
-    integrate(emulator) {
-      context.dispatch((s) => ({
-        ...s,
-        components: {
-          ...s.components,
-          ...emulator.components,
-        },
-      }));
-
-      options.fetchPilets = emulator.requester;
+    integrate(requester) {
+      options.fetchPilets = requester;
     },
   });
 }

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/helpers.tsx

@@ -11,7 +11,7 @@ import {
 import type { DebuggerExtensionOptions } from 'piral-debug-utils';
 import { globalDependencies } from './modules';
 import type { Pilet, PiletRequester, GlobalStateContext, PiletLoadingStrategy, DependencySelector } from './types';
-import { integrateDebugger, integrateEmulator } from '../debug.codegen';
+import { integrateDebugger, integrateEmulator } from '../app.codegen';
 
 export interface PiletOptionsConfig {
   context: GlobalStateContext;

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/index.ts

@@ -2,5 +2,6 @@ export * from './action';
 export * from './actions';
 export * from './globalState';
 export * from './media';
+export * from './routes';
 export * from './setter';
 export * from './sharedData';

package/src/hooks/routes.ts

@@ -0,0 +1,14 @@
+import { useGlobalState } from './globalState';
+import { useRouteFilter } from '../../app.codegen';
+import { AppPath } from '../types';
+
+export function useRoutes() {
+  const routes = useGlobalState((s) => s.routes);
+  const pages = useGlobalState((s) => s.registry.pages);
+  const paths: Array<AppPath> = [];
+
+  Object.keys(routes).map((path) => paths.push({ path, Component: routes[path] }));
+  Object.keys(pages).map((path) => paths.push({ path, Component: pages[path].component }));
+
+  return useRouteFilter(paths);
+}

package/src/hooks/setter.test.ts

@@ -14,7 +14,7 @@ describe('UseSetter Hook Module', () => {
 
     const root = createRoot(document.body.appendChild(document.createElement('div')));
     root.render(React.createElement(MyComponent));
-    await act(() => Promise.resolve());
+    await act(() => new Promise(resolve => setTimeout(resolve, 5)));
     expect(cb).toHaveBeenCalled();
   });
 });

package/src/modules/dependencies.ts

@@ -1,6 +1,6 @@
 import { isfunc } from 'piral-base';
 import type { AvailableDependencies, PiletEntries } from '../types';
-import fillDependencies from '../../dependencies.codegen';
+import { fillDependencies } from '../../app.codegen';
 
 /**
  * The global dependencies, which represent the dependencies

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;