feat(demo): load runtime-js on demand (#509)

apps/demo-free-layout/src/components/testrun/node-status-bar/group/index.tsx

@@ -5,12 +5,12 @@
 
 import { FC, useState } from 'react';
 
+import { Tag } from '@douyinfe/semi-ui';
 import { IconSmallTriangleDown } from '@douyinfe/semi-icons';
 
 import { DataStructureViewer } from '../viewer';
 
 import './index.css';
-import { Tag } from '@douyinfe/semi-ui';
 
 interface NodeStatusGroupProps {
   title: string;
@@ -19,7 +19,7 @@ interface NodeStatusGroupProps {
   disableCollapse?: boolean;
 }
 
-const isObjectHasContent = (obj: any = {}): boolean => Object.keys(obj).length > 0;
+const isObjectHasContent = (obj: any = {}): boolean => obj && Object.keys(obj).length > 0;
 
 export const NodeStatusGroup: FC<NodeStatusGroupProps> = ({
   title,

apps/demo-free-layout/src/components/testrun/testrun-button/index.module.less

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 .testrun-success-button {
   background-color: rgba(0, 178, 60, 1) !important; // override semi style
   border-radius: 8px;

apps/demo-free-layout/src/components/testrun/testrun-panel/index.module.less

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 .testrun-panel-form {
   .title {
     font-size: 15px;

apps/demo-free-layout/src/plugins/runtime-plugin/browser-client/index.ts → apps/demo-free-layout/src/plugins/runtime-plugin/client/base-client.ts

@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: MIT
  */
 
-/* eslint-disable no-console */
-import { TaskCancelAPI, TaskReportAPI, TaskResultAPI, TaskRunAPI } from '@flowgram.ai/runtime-js';
 import { FlowGramAPIName, IRuntimeClient } from '@flowgram.ai/runtime-interface';
 import { injectable } from '@flowgram.ai/free-layout-editor';
 
@@ -12,11 +10,11 @@ import { injectable } from '@flowgram.ai/free-layout-editor';
 export class WorkflowRuntimeClient implements IRuntimeClient {
   constructor() {}
 
-  public [FlowGramAPIName.TaskRun]: IRuntimeClient[FlowGramAPIName.TaskRun] = TaskRunAPI;
+  public [FlowGramAPIName.TaskRun]: IRuntimeClient[FlowGramAPIName.TaskRun];
 
-  public [FlowGramAPIName.TaskReport]: IRuntimeClient[FlowGramAPIName.TaskReport] = TaskReportAPI;
+  public [FlowGramAPIName.TaskReport]: IRuntimeClient[FlowGramAPIName.TaskReport];
 
-  public [FlowGramAPIName.TaskResult]: IRuntimeClient[FlowGramAPIName.TaskResult] = TaskResultAPI;
+  public [FlowGramAPIName.TaskResult]: IRuntimeClient[FlowGramAPIName.TaskResult];
 
-  public [FlowGramAPIName.TaskCancel]: IRuntimeClient[FlowGramAPIName.TaskCancel] = TaskCancelAPI;
+  public [FlowGramAPIName.TaskCancel]: IRuntimeClient[FlowGramAPIName.TaskCancel];
 }

apps/demo-free-layout/src/plugins/runtime-plugin/client/browser-client/index.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable no-console */
+import { FlowGramAPIName, IRuntimeClient } from '@flowgram.ai/runtime-interface';
+import { injectable } from '@flowgram.ai/free-layout-editor';
+
+@injectable()
+export class WorkflowRuntimeBrowserClient implements IRuntimeClient {
+  constructor() {}
+
+  public [FlowGramAPIName.TaskRun]: IRuntimeClient[FlowGramAPIName.TaskRun] = async (input) => {
+    const { TaskRunAPI } = await import('@flowgram.ai/runtime-js'); // Load on demand - 按需加载
+    return TaskRunAPI(input);
+  };
+
+  public [FlowGramAPIName.TaskReport]: IRuntimeClient[FlowGramAPIName.TaskReport] = async (
+    input
+  ) => {
+    const { TaskReportAPI } = await import('@flowgram.ai/runtime-js'); // Load on demand - 按需加载
+    return TaskReportAPI(input);
+  };
+
+  public [FlowGramAPIName.TaskResult]: IRuntimeClient[FlowGramAPIName.TaskResult] = async (
+    input
+  ) => {
+    const { TaskResultAPI } = await import('@flowgram.ai/runtime-js'); // Load on demand - 按需加载
+    return TaskResultAPI(input);
+  };
+
+  public [FlowGramAPIName.TaskCancel]: IRuntimeClient[FlowGramAPIName.TaskCancel] = async (
+    input
+  ) => {
+    const { TaskCancelAPI } = await import('@flowgram.ai/runtime-js'); // Load on demand - 按需加载
+    return TaskCancelAPI(input);
+  };
+}

apps/demo-free-layout/src/plugins/runtime-plugin/client/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { WorkflowRuntimeClient } from './base-client';
+export { WorkflowRuntimeBrowserClient } from './browser-client';
+export { WorkflowRuntimeServerClient } from './server-client';

apps/demo-free-layout/src/plugins/runtime-plugin/server-client/constant.ts → apps/demo-free-layout/src/plugins/runtime-plugin/client/server-client/constant.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { ServerConfig } from '../type';
+import { ServerConfig } from '../../type';
 
 export const DEFAULT_SERVER_CONFIG: ServerConfig = {
   domain: 'localhost',

apps/demo-free-layout/src/plugins/runtime-plugin/server-client/index.ts → apps/demo-free-layout/src/plugins/runtime-plugin/client/server-client/index.ts

@@ -17,9 +17,9 @@ import {
 } from '@flowgram.ai/runtime-interface';
 import { injectable } from '@flowgram.ai/free-layout-editor';
 
+import { ServerConfig } from '../../type';
 import type { ServerError } from './type';
 import { DEFAULT_SERVER_CONFIG } from './constant';
-import { ServerConfig } from '../type';
 
 @injectable()
 export class WorkflowRuntimeServerClient implements IRuntimeClient {

apps/demo-free-layout/src/plugins/runtime-plugin/create-runtime-plugin.ts

@@ -6,9 +6,12 @@
 import { definePluginCreator, PluginContext } from '@flowgram.ai/free-layout-editor';
 
 import { RuntimePluginOptions } from './type';
-import { WorkflowRuntimeServerClient } from './server-client';
 import { WorkflowRuntimeService } from './runtime-service';
-import { WorkflowRuntimeClient } from './browser-client';
+import {
+  WorkflowRuntimeBrowserClient,
+  WorkflowRuntimeClient,
+  WorkflowRuntimeServerClient,
+} from './client';
 
 export const createRuntimePlugin = definePluginCreator<RuntimePluginOptions, PluginContext>({
   onBind({ bind, rebind }, options) {
@@ -16,6 +19,8 @@ export const createRuntimePlugin = definePluginCreator<RuntimePluginOptions, Plu
     bind(WorkflowRuntimeServerClient).toSelf().inSingletonScope();
     if (options.mode === 'server') {
       rebind(WorkflowRuntimeClient).to(WorkflowRuntimeServerClient);
+    } else {
+      rebind(WorkflowRuntimeClient).to(WorkflowRuntimeBrowserClient);
     }
     bind(WorkflowRuntimeService).toSelf().inSingletonScope();
   },

apps/demo-free-layout/src/plugins/runtime-plugin/index.ts

@@ -4,4 +4,4 @@
  */
 
 export { createRuntimePlugin } from './create-runtime-plugin';
-export { WorkflowRuntimeClient } from './browser-client';
+export { WorkflowRuntimeClient } from './client';

apps/demo-free-layout/src/plugins/runtime-plugin/runtime-service/index.ts

@@ -22,7 +22,7 @@ import {
   getNodeForm,
 } from '@flowgram.ai/free-layout-editor';
 
-import { WorkflowRuntimeClient } from '../browser-client';
+import { WorkflowRuntimeClient } from '../client';
 import { WorkflowNodeType } from '../../../nodes';
 
 const SYNC_TASK_REPORT_INTERVAL = 500;