@nocobase/client-v2 2.0.0-alpha.20

package/src/WebSocketClient.ts

@@ -0,0 +1,220 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { define, observable } from '@formily/reactive';
+import { getSubAppName } from '@nocobase/sdk';
+import { Application } from './Application';
+
+export type WebSocketClientOptions = {
+  reconnectInterval?: number;
+  reconnectAttempts?: number;
+  pingInterval?: number;
+  url?: string;
+  basename?: string;
+  protocols?: string | string[];
+  onServerDown?: any;
+};
+
+export class WebSocketClient {
+  protected _ws: WebSocket;
+  protected _reconnectTimes = 0;
+  protected events = [];
+  protected options: WebSocketClientOptions;
+  app: Application;
+  enabled: boolean;
+  connected = false;
+  serverDown = false;
+  lastMessage = {};
+
+  constructor(options: WebSocketClientOptions | boolean) {
+    if (!options) {
+      this.enabled = false;
+      return;
+    }
+    this.options = options === true ? {} : options;
+    this.enabled = true;
+    define(this, {
+      serverDown: observable.ref,
+      connected: observable.ref,
+      lastMessage: observable.ref,
+    });
+  }
+
+  // TODO for plugin-multi-app
+  getSubAppName = (app: Application) => {
+    const publicPath = app.getPublicPath();
+    const pattern = `^${publicPath}${'_app'}/([^/]*)/`;
+    const match = location.pathname.match(new RegExp(pattern));
+    return match ? match[1] : null;
+  };
+
+  getURL() {
+    if (!this.app) {
+      return;
+    }
+    const apiBaseURL = this.app.getApiUrl();
+    if (!apiBaseURL) {
+      return;
+    }
+
+    let queryString = '';
+    if (this.getSubAppName(this.app)) {
+      queryString = `?_app=${this.getSubAppName(this.app)}`;
+    } else {
+      const subApp = getSubAppName(this.app.getPublicPath());
+      queryString = subApp ? `?__appName=${subApp}` : '';
+    }
+    const wsPath = this.options.basename || '/ws';
+    if (this.options.url) {
+      const url = new URL(this.options.url);
+      if (url.hostname === 'localhost') {
+        const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+        return `${protocol}://${location.hostname}:${url.port}${wsPath}${queryString}`;
+      }
+      return `${this.options.url}${queryString}`;
+    }
+    try {
+      const url = new URL(apiBaseURL);
+      return `${url.protocol === 'https:' ? 'wss' : 'ws'}://${url.host}${wsPath}${queryString}`;
+    } catch (error) {
+      return `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}${wsPath}${queryString}`;
+    }
+  }
+
+  get reconnectAttempts() {
+    return this.options?.reconnectAttempts || 30;
+  }
+
+  get reconnectInterval() {
+    return this.options?.reconnectInterval || 1000;
+  }
+
+  get pingInterval() {
+    return this.options?.pingInterval || 30000;
+  }
+
+  get readyState() {
+    if (!this._ws) {
+      return -1;
+    }
+    return this._ws.readyState;
+  }
+
+  createWebSocket() {
+    return new WebSocket(this.getURL(), this.options.protocols);
+  }
+
+  connect() {
+    if (!this.enabled) {
+      return;
+    }
+    if (this._reconnectTimes === 0) {
+      console.log('[nocobase-ws]: connecting...');
+    }
+    if (this._reconnectTimes >= this.reconnectAttempts) {
+      return;
+    }
+    if (this.readyState === WebSocket.OPEN) {
+      return;
+    }
+    this._reconnectTimes++;
+    const ws = this.createWebSocket();
+    let pingIntervalTimer: any;
+
+    ws.onopen = () => {
+      console.log('[nocobase-ws]: connected.');
+      this.serverDown = false;
+      if (this._ws) {
+        this.removeAllListeners();
+      }
+      this._reconnectTimes = 0;
+      this._ws = ws;
+      for (const { type, listener, options } of this.events) {
+        this._ws.addEventListener(type, listener, options);
+      }
+      pingIntervalTimer = setInterval(() => this.send('ping'), this.pingInterval);
+      this.connected = true;
+      this.emit('open', {});
+    };
+    ws.onerror = async () => {
+      // setTimeout(() => this.connect(), this.reconnectInterval);
+      console.log('onerror', this.readyState, this._reconnectTimes);
+    };
+    ws.onclose = async (event) => {
+      setTimeout(() => this.connect(), this.reconnectInterval);
+      console.log('onclose', this.readyState, this._reconnectTimes, this.serverDown);
+      this.connected = false;
+      clearInterval(pingIntervalTimer);
+      // if (this._reconnectTimes >= Math.min(this.reconnectAttempts, 5)) {
+      // this.serverDown = true;
+      // this.emit('serverDown', event);
+      // }
+    };
+  }
+
+  reconnect() {
+    this._reconnectTimes = 0;
+    this.connect();
+  }
+
+  close() {
+    if (!this._ws) {
+      return;
+    }
+    this._reconnectTimes = this.reconnectAttempts;
+    return this._ws.close();
+  }
+
+  send(data: string | ArrayBufferLike | Blob | ArrayBufferView) {
+    if (!this._ws) {
+      return;
+    }
+    return this._ws.send(data);
+  }
+
+  on(type: string, listener: any, options?: boolean | AddEventListenerOptions) {
+    this.events.push({ type, listener, options });
+    if (!this._ws) {
+      return;
+    }
+    this._ws.addEventListener(type, listener, options);
+  }
+
+  emit(type: string, args: any) {
+    for (const event of this.events) {
+      if (event.type === type) {
+        event.listener(args);
+      }
+    }
+  }
+
+  off(type: string, listener: any, options?: boolean | EventListenerOptions) {
+    let index = 0;
+    for (const event of this.events) {
+      if (event.type === type && event.listener === listener) {
+        this.events.splice(index, 1);
+        break;
+      }
+      index++;
+    }
+    if (!this._ws) {
+      return;
+    }
+    this._ws.removeEventListener(type, listener, options);
+  }
+
+  removeAllListeners() {
+    if (!this._ws) {
+      return;
+    }
+    for (const { type, listener, options } of this.events) {
+      this._ws.removeEventListener(type, listener, options);
+    }
+  }
+}

package/src/__tests__/app.test.tsx

@@ -0,0 +1,141 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { Application, createMockClient, Plugin } from '@nocobase/client-v2';
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+
+const renderApp = async (app: Application) => {
+  const Root = app.getRootComponent();
+  render(<Root />);
+  expect(screen.getByText('Loading')).toBeInTheDocument();
+  await waitFor(() => expect(screen.queryByText('Loading')).not.toBeInTheDocument());
+  return Root;
+};
+
+describe('app', () => {
+  it('should mount the app and display "Not Found"', async () => {
+    const app = createMockClient();
+    const element = document.createElement('div');
+    act(() => app.mount(element));
+    expect(element.textContent).toBe('Loading');
+    await waitFor(() => expect(element.textContent).not.toBe('Loading'));
+    expect(element.textContent).toBe('Not Found');
+  });
+
+  it('should render default "Not Found" view', async () => {
+    const app = createMockClient();
+    await renderApp(app);
+    expect(screen.getByText('Not Found')).toBeInTheDocument();
+  });
+
+  it('should render custom "Not Found" component', async () => {
+    class PluginHelloClient extends Plugin {}
+    const app = createMockClient({
+      plugins: [PluginHelloClient],
+      components: { AppNotFound: () => <div>Not Found2</div> },
+    });
+    await renderApp(app);
+    expect(screen.getByText('Not Found2')).toBeInTheDocument();
+  });
+
+  it('should support app provider functionality', async () => {
+    class PluginHelloClient extends Plugin {
+      async load() {
+        this.app.use(() => <div>Hello Provider</div>);
+      }
+    }
+    const app = createMockClient({ plugins: [PluginHelloClient] });
+    await renderApp(app);
+    expect(screen.getByText('Hello Provider')).toBeInTheDocument();
+  });
+
+  it('should support router functionality', async () => {
+    class PluginHelloClient extends Plugin {
+      async load() {
+        this.router.add('root', { path: '/', Component: () => <div>Hello Route</div> });
+      }
+    }
+    const app = createMockClient({ plugins: [PluginHelloClient] });
+    await renderApp(app);
+    expect(screen.getByText('Hello Route')).toBeInTheDocument();
+  });
+
+  it('should show maintaining state', async () => {
+    class PluginHelloClient extends Plugin {}
+    const app = createMockClient({ plugins: [PluginHelloClient] });
+    app.maintained = false;
+    app.maintaining = true;
+    await renderApp(app);
+    expect(screen.getByText('Maintaining')).toBeInTheDocument();
+  });
+
+  it('should show maintained dialog state', async () => {
+    class PluginHelloClient extends Plugin {}
+    const app = createMockClient({ plugins: [PluginHelloClient] });
+    app.maintained = true;
+    app.maintaining = true;
+    await renderApp(app);
+    expect(screen.getByText('Maintaining Dialog')).toBeInTheDocument();
+  });
+
+  it('should handle long loading state gracefully', async () => {
+    class PluginHelloClient extends Plugin {
+      async load() {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+    }
+    const app = createMockClient({ plugins: [PluginHelloClient] });
+    await renderApp(app);
+  });
+
+  it('should handle WebSocket maintaining and running states', async () => {
+    const originalLocation = window.location;
+    const reloadMock = vi.fn();
+    Object.defineProperty(window, 'location', { value: { reload: reloadMock } });
+
+    class PluginHelloClient extends Plugin {
+      async load() {
+        this.router.add('root', { path: '/', Component: () => <div>Hello</div> });
+        this.app.ws.emit('message', {
+          type: 'maintaining',
+          payload: { code: 'APP_ERROR', message: 'maintaining error message' },
+        });
+      }
+    }
+
+    const app = createMockClient({
+      plugins: [PluginHelloClient],
+      ws: { url: 'ws://localhost:3000/ws' },
+    });
+
+    await renderApp(app);
+    expect(screen.getByText('Maintaining')).toBeInTheDocument();
+
+    app.ws.emit('message', {
+      type: 'maintaining',
+      payload: { code: 'APP_RUNNING', message: 'app running message' },
+    });
+    await waitFor(() => expect(screen.queryByText('Maintaining')).not.toBeInTheDocument());
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+    expect(reloadMock).toHaveBeenCalled();
+  });
+
+  it('should handle plugin load error gracefully', async () => {
+    class PluginHelloClient extends Plugin {
+      async load() {
+        throw new Error('plugin load error');
+      }
+    }
+    const app = createMockClient({ plugins: [PluginHelloClient] });
+    await renderApp(app);
+    expect(screen.getByText('plugin load error')).toBeInTheDocument();
+  });
+});

package/src/components/BlankComponent.tsx

@@ -0,0 +1,12 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React, { FC, ReactNode } from 'react';
+
+export const BlankComponent: FC<{ children?: ReactNode }> = ({ children }) => <>{children}</>;

package/src/components/MainComponent.tsx

@@ -0,0 +1,20 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React, { useMemo } from 'react';
+import { useApp } from '../hooks';
+
+export const MainComponent = React.memo(({ children }) => {
+  const app = useApp();
+  const Router = useMemo(() => app.router.getRouterComponent(children), [app]);
+  const Providers = useMemo(() => app.getComposeProviders(), [app]);
+  return <Router BaseLayout={Providers} />;
+});
+
+MainComponent.displayName = 'MainComponent';

package/src/components/RouterBridge.tsx

@@ -0,0 +1,38 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { observable } from '@formily/reactive';
+import { useEffect, useMemo } from 'react';
+import { useLocation, useMatch, useMatches, useParams } from 'react-router-dom';
+import { Application } from '../Application';
+
+export function useRouterSync(app: Application) {
+  const params = useParams();
+  const location = useLocation();
+  const matches = useMatches();
+  const engine = app.flowEngine;
+  useEffect(() => {
+    const last = matches[matches.length - 1];
+    if (!last) return;
+    engine.context['_observableCache']['route'] = {
+      name: last.id,
+      pathname: last.pathname,
+      path: last.handle?.['path'] || null,
+      params,
+    };
+  }, [engine.context, params, matches]);
+  useEffect(() => {
+    engine.context['_observableCache']['location'] = location;
+  }, [engine.context, location]);
+}
+
+export function RouterBridge({ app }) {
+  useRouterSync(app);
+  return null;
+}

package/src/components/RouterContextCleaner.tsx

@@ -0,0 +1,26 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React, { FC, ReactNode } from 'react';
+import { UNSAFE_LocationContext, UNSAFE_RouteContext } from 'react-router-dom';
+
+export const RouterContextCleaner: FC<{ children?: ReactNode }> = React.memo((props) => {
+  return (
+    <UNSAFE_RouteContext.Provider
+      value={{
+        outlet: null,
+        matches: [],
+        isDataRoute: false,
+      }}
+    >
+      <UNSAFE_LocationContext.Provider value={null}>{props.children}</UNSAFE_LocationContext.Provider>
+    </UNSAFE_RouteContext.Provider>
+  );
+});
+RouterContextCleaner.displayName = 'RouterContextCleaner';

package/src/components/index.ts

@@ -0,0 +1,11 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export * from './BlankComponent';
+export * from './RouterContextCleaner';

package/src/context.ts

@@ -0,0 +1,14 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { createContext } from 'react';
+import type { Application } from './Application';
+
+export const ApplicationContext = createContext<Application>(null);
+ApplicationContext.displayName = 'ApplicationContext';

package/src/hooks/index.ts

@@ -0,0 +1,12 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export * from './useApp';
+export * from './usePlugin';
+export * from './useRouter';

package/src/hooks/useApp.ts

@@ -0,0 +1,16 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { useFlowEngineContext } from '@nocobase/flow-engine';
+import type { Application } from '../Application';
+
+export const useApp = () => {
+  const ctx = useFlowEngineContext();
+  return ctx.app as Application;
+};

package/src/hooks/usePlugin.ts

@@ -0,0 +1,17 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import { Plugin } from '../Plugin';
+import { useApp } from './useApp';
+
+export function usePlugin<T extends typeof Plugin = any>(plugin: T): InstanceType<T>;
+export function usePlugin<T extends {}>(name: string): T;
+export function usePlugin(name: any) {
+  const app = useApp();
+  return app.pm.get(name);
+}

package/src/hooks/useRouter.ts

@@ -0,0 +1,15 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { useApp } from './useApp';
+
+export const useRouter = () => {
+  const app = useApp();
+  return app.router;
+};

package/src/index.ts

@@ -0,0 +1,15 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export * from './Application';
+export * from './components';
+export * from './context';
+export * from './MockApplication';
+export * from './Plugin';
+export * from './WebSocketClient';

package/src/utils/index.tsx

@@ -0,0 +1,48 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React, { ComponentType, FC } from 'react';
+import { BlankComponent } from '../components';
+
+export function normalizeContainer(container: Element | ShadowRoot | string): Element | null {
+  if (!container) {
+    console.warn(`Failed to mount app: mount target should not be null or undefined.`);
+    return null;
+  }
+
+  if (typeof container === 'string') {
+    const res = document.querySelector(container);
+    if (!res) {
+      console.warn(`Failed to mount app: mount target selector "${container}" returned null.`);
+    }
+    return res;
+  }
+  if (window.ShadowRoot && container instanceof window.ShadowRoot && container.mode === 'closed') {
+    console.warn(`mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`);
+  }
+  return container as any;
+}
+
+export const compose = (...components: [ComponentType, any][]) => {
+  const Component = components.reduce<ComponentType>((Parent, child) => {
+    const [Child, childProps] = child;
+    const ComposeComponent: FC = ({ children }) => (
+      <Parent>
+        <Child {...childProps}>{children}</Child>
+      </Parent>
+    );
+    ComposeComponent.displayName = `compose(${Child.displayName || Child.name})`;
+    return ComposeComponent;
+  }, BlankComponent);
+
+  return (LastChild?: ComponentType) =>
+    ((props?: any) => {
+      return <Component>{LastChild && <LastChild {...props} />}</Component>;
+    }) as FC;
+};