@nocobase/client-v2 2.1.27 → 2.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.27",
+  "version": "2.1.28",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "2.1.27",
-    "@nocobase/flow-engine": "2.1.27",
-    "@nocobase/sdk": "2.1.27",
-    "@nocobase/shared": "2.1.27",
-    "@nocobase/utils": "2.1.27",
+    "@nocobase/evaluators": "2.1.28",
+    "@nocobase/flow-engine": "2.1.28",
+    "@nocobase/sdk": "2.1.28",
+    "@nocobase/shared": "2.1.28",
+    "@nocobase/utils": "2.1.28",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -44,8 +44,9 @@
     "json5": "^2.2.3",
     "jsqr": "^1.4.0",
     "lodash": "4.17.21",
+    "react-device-detect": "2.2.3",
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "c1311c48cf65f8eeac17411d3380ebdd0918f1e2"
+  "gitHead": "584c0c0e69d32fe502014a6836b3fcb669e89525"
 }

package/src/flow/__tests__/FlowRoute.test.tsx

@@ -112,6 +112,7 @@ describe('FlowRoute', () => {
         }),
       );
     });
+    expect(engine.context.deviceType).toBe('computer');
 
     rerender(
       <FlowEngineProvider engine={engine}>

package/src/flow/__tests__/PluginFlowEngine.test.ts

@@ -0,0 +1,58 @@
+/**
+ * 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 { createMockClient, PluginFlowEngine } from '@nocobase/client-v2';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { detectedDeviceType } = vi.hoisted(() => ({
+  detectedDeviceType: { value: 'mobile' },
+}));
+
+vi.mock('react-device-detect', () => ({
+  get deviceType() {
+    return detectedDeviceType.value;
+  },
+}));
+
+describe('PluginFlowEngine', () => {
+  beforeEach(() => {
+    detectedDeviceType.value = 'mobile';
+  });
+
+  it('should register the current device type before shared flow components', async () => {
+    const app = createMockClient({
+      router: {
+        type: 'memory',
+        initialEntries: ['/'],
+      },
+    });
+    const plugin = new PluginFlowEngine({}, app);
+    const addComponents = app.addComponents.bind(app);
+    const deviceTypesBeforeComponentRegistration: string[] = [];
+    vi.spyOn(app, 'addComponents').mockImplementation((components) => {
+      deviceTypesBeforeComponentRegistration.push(app.flowEngine.context.deviceType);
+      return addComponents(components);
+    });
+
+    await plugin.load();
+
+    expect(app.flowEngine.context.deviceType).toBe('mobile');
+    expect(deviceTypesBeforeComponentRegistration).toEqual(['mobile']);
+  });
+
+  it('should normalize the browser device type to computer', async () => {
+    detectedDeviceType.value = 'browser';
+    const app = createMockClient();
+    const plugin = new PluginFlowEngine({}, app);
+
+    await plugin.load();
+
+    expect(app.flowEngine.context.deviceType).toBe('computer');
+  });
+});

package/src/flow/components/FlowRoute.tsx

@@ -9,7 +9,6 @@
 
 import { type FlowEngine, useFlowContext, useFlowEngine } from '@nocobase/flow-engine';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { deviceType } from 'react-device-detect';
 import { useParams } from 'react-router-dom';
 import { useApp } from '../../hooks/useApp';
 import { NocoBaseDesktopRouteType } from '../../flow-compat';
@@ -19,6 +18,7 @@ import { getLayoutModel, type BaseLayoutModel } from '../admin-shell/BaseLayoutM
 import { useLayoutRoutePage } from '../admin-shell/useLayoutRoutePage';
 import { AppNotFound } from '../../components';
 import { useKeepAlive } from '../../components/KeepAlive';
+import { registerDeviceTypeContext } from '../internal/registerDeviceTypeContext';
 
 type FlowRouteGuardState = {
   pending: boolean;
@@ -94,31 +94,9 @@ const BridgeFlowRoute = ({
   const layoutContentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    flowEngine.context.defineProperty('deviceType', {
-      get: () => (deviceType === 'browser' ? 'computer' : deviceType),
-      cache: false,
-      meta: {
-        type: 'string',
-        title: flowEngine.translate('Current device type'),
-        interface: 'select',
-        uiSchema: {
-          enum: [
-            { label: flowEngine.translate('Computer'), value: 'computer' },
-            { label: flowEngine.translate('Mobile'), value: 'mobile' },
-            { label: flowEngine.translate('Tablet'), value: 'tablet' },
-            { label: flowEngine.translate('SmartTv'), value: 'smarttv' },
-            { label: flowEngine.translate('Console'), value: 'console' },
-            { label: flowEngine.translate('Wearable'), value: 'wearable' },
-            { label: flowEngine.translate('Embedded'), value: 'embedded' },
-          ],
-          'x-component': 'Select',
-        },
-      },
-      info: {
-        description: 'Current device type (computer/mobile/tablet/...).',
-        detail: 'string',
-      },
-    });
+    if (!flowEngine.context.getPropertyOptions('deviceType')) {
+      registerDeviceTypeContext(flowEngine);
+    }
   }, [flowEngine]);
 
   useLayoutRoutePage({
@@ -136,8 +114,8 @@ const BridgeFlowRoute = ({
 /**
  * 管理后台动态页面路由组件。
  *
- * 负责读取当前路由页面 UID，补充运行时设备变量，
- * 并把页面生命周期桥接到 AdminLayout host model。
+ * 负责读取当前路由页面 UID，并把页面生命周期桥接到 AdminLayout host model。
+ * 设备变量通常由 PluginFlowEngine 共享初始化提供；独立渲染时会在挂载后补充注册。
  *
  * @example
  * ```tsx

package/src/flow/index.ts

@@ -22,12 +22,14 @@ import { Markdown } from './common/Markdown/Markdown';
 import { LiquidEngine } from './common/Liquid';
 import type { PreviewRunJSResult } from './components/code-editor/runjsDiagnostics';
 import { TextAreaWithContextSelector } from './components/TextAreaWithContextSelector';
+import { registerDeviceTypeContext } from './internal/registerDeviceTypeContext';
 
 export class PluginFlowEngine<TApp extends BaseApplication<any> = BaseApplication<any>> extends Plugin<
   PluginOptions<any>,
   TApp
 > {
   async load() {
+    registerDeviceTypeContext(this.flowEngine);
     this.app.addComponents({ FlowRoute });
     this.app.flowEngine.setModelRepository(new FlowModelRepository(this.app));
     const filteredModels = Object.fromEntries(

package/src/flow/internal/registerDeviceTypeContext.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 type { FlowEngine } from '@nocobase/flow-engine';
+import { deviceType } from 'react-device-detect';
+
+export const registerDeviceTypeContext = (flowEngine: FlowEngine) => {
+  flowEngine.context.defineProperty('deviceType', {
+    get: () => (deviceType === 'browser' ? 'computer' : deviceType),
+    cache: false,
+    meta: {
+      type: 'string',
+      title: flowEngine.translate('Current device type'),
+      interface: 'select',
+      uiSchema: {
+        enum: [
+          { label: flowEngine.translate('Computer'), value: 'computer' },
+          { label: flowEngine.translate('Mobile'), value: 'mobile' },
+          { label: flowEngine.translate('Tablet'), value: 'tablet' },
+          { label: flowEngine.translate('SmartTv'), value: 'smarttv' },
+          { label: flowEngine.translate('Console'), value: 'console' },
+          { label: flowEngine.translate('Wearable'), value: 'wearable' },
+          { label: flowEngine.translate('Embedded'), value: 'embedded' },
+        ],
+        'x-component': 'Select',
+      },
+    },
+    info: {
+      description: 'Current device type (computer/mobile/tablet/...).',
+      detail: 'string',
+    },
+  });
+};