add scrollToComponent utilMethod

packages/chakra-ui-lib/src/components/Types/Toast.ts

@@ -69,9 +69,10 @@ const pickProperty = <T, U extends Record<string, any>>(
 
 export default function ToastUtilMethodFactory() {
   let toast: ReturnType<typeof createStandaloneToast> | undefined;
-  const toastOpen: UtilMethod = {
+
+  const toastOpen: UtilMethod<typeof ToastOpenParameterSchema> = {
     name: 'toast.open',
-    method(parameters: Static<typeof ToastOpenParameterSchema>) {
+    method(parameters) {
       if (!toast) {
         toast = createStandaloneToast();
       }
@@ -82,9 +83,9 @@ export default function ToastUtilMethodFactory() {
     parameters: ToastOpenParameterSchema,
   };
 
-  const toastClose: UtilMethod = {
+  const toastClose: UtilMethod<typeof ToastCloseParameterSchema> = {
     name: 'toast.close',
-    method(parameters: Static<typeof ToastCloseParameterSchema>) {
+    method(parameters) {
       if (!toast) {
         return;
       }

packages/runtime/src/index.ts

@@ -1,14 +1,14 @@
 import { StateManager } from './services/StateManager';
 import { genApp } from './App';
-import { initRegistry, UtilMethod } from './services/Registry';
+import { initRegistry } from './services/Registry';
 import { initApiService } from './services/apiService';
 import { initGlobalHandlerMap } from './services/handler';
-import { AppHooks } from './types/application';
+import { AppHooks, UtilMethod } from './types';
 import './style.css';
 
 export type SunmaoUIRuntimeProps = {
   dependencies?: Record<string, any>;
-  utilMethods?: UtilMethod[];
+  utilMethods?: UtilMethod<any>[];
   hooks?: AppHooks;
 };
 
@@ -16,8 +16,13 @@ export function initSunmaoUI(props: SunmaoUIRuntimeProps = {}) {
   const stateManager = new StateManager(props.dependencies);
   const globalHandlerMap = initGlobalHandlerMap();
   const apiService = initApiService();
-  const registry = initRegistry(apiService);
   const eleMap = new Map<string, HTMLElement>();
+  const registry = initRegistry({
+    stateManager,
+    globalHandlerMap,
+    apiService,
+    eleMap,
+  });
   const hooks = props.hooks;
 
   return {

packages/runtime/src/services/Registry.tsx

@@ -19,20 +19,18 @@ import CoreStyle from '../traits/core/Style';
 import CoreHidden from '../traits/core/Hidden';
 import CoreFetch from '../traits/core/Fetch';
 import CoreValidation from '../traits/core/Validation';
+// utilMethods
+import ScrollIntoComponentUtilMethod from '../utilMethods/ScrollIntoComponent';
+
 import {
   ImplementedRuntimeComponent,
   ImplementedRuntimeTrait,
   ImplementedRuntimeModule,
+  UIServices,
 } from '../types';
-import { ApiService } from './apiService';
+import { UtilMethod } from '../types/utilMethod';
 
-export type UtilMethod = {
-  name: string;
-  method: (parameters?: any) => void;
-  parameters?: any;
-};
-
-export type UtilMethodFactory = () => UtilMethod[];
+export type UtilMethodFactory = () => UtilMethod<any>[];
 
 export type SunmaoLib = {
   components?: ImplementedRuntimeComponent<string, string, string, string>[];
@@ -47,16 +45,15 @@ type AnyImplementedRuntimeComponent = ImplementedRuntimeComponent<
   string,
   string
 >;
-
 export class Registry {
   components = new Map<string, Map<string, AnyImplementedRuntimeComponent>>();
   traits = new Map<string, Map<string, ImplementedRuntimeTrait>>();
   modules = new Map<string, Map<string, ImplementedRuntimeModule>>();
-  utilMethods = new Map<string, UtilMethod>();
-  private apiService: ApiService;
+  utilMethods = new Map<string, UtilMethod<any>>();
+  private services: UIServices;
 
-  constructor(apiService: ApiService) {
-    this.apiService = apiService;
+  constructor(services: Omit<UIServices, 'registry'>) {
+    this.services = { ...services, registry: this };
   }
 
   registerComponent(c: AnyImplementedRuntimeComponent) {
@@ -164,7 +161,7 @@ export class Registry {
     return this.getModule(version, name);
   }
 
-  registerUtilMethod(m: UtilMethod) {
+  registerUtilMethod<T>(m: UtilMethod<T>) {
     if (this.utilMethods.get(m.name)) {
       throw new Error(`Already has utilMethod ${m.name} in this registry.`);
     }
@@ -185,7 +182,7 @@ export class Registry {
   }
 
   private mountUtilMethods() {
-    this.apiService.on('uiMethod', ({ componentId, name, parameters }) => {
+    this.services.apiService.on('uiMethod', ({ componentId, name, parameters }) => {
       if (componentId === GLOBAL_UTILS_ID) {
         const utilMethod = this.utilMethods.get(name)?.method;
         if (utilMethod) {
@@ -199,15 +196,15 @@ export class Registry {
             }
           }
 
-          utilMethod(params);
+          utilMethod(params, this.services);
         }
       }
     });
   }
 }
 
-export function initRegistry(apiService: ApiService): Registry {
-  const registry = new Registry(apiService);
+export function initRegistry(services: Omit<UIServices, 'registry'>): Registry {
+  const registry = new Registry(services);
   registry.registerComponent(CoreText);
   registry.registerComponent(CoreGridLayout);
   registry.registerComponent(CoreRouter);
@@ -224,5 +221,7 @@ export function initRegistry(apiService: ApiService): Registry {
   registry.registerTrait(CoreFetch);
   registry.registerTrait(CoreValidation);
 
+  registry.registerUtilMethod(ScrollIntoComponentUtilMethod);
+
   return registry;
 }

packages/runtime/src/types/index.ts

@@ -2,5 +2,6 @@ export * from './application';
 export * from './component';
 export * from './trait';
 export * from './module';
+export * from './utilMethod';
 export * from './traitPropertiesSchema';
 export * from './validResultSchema';

packages/runtime/src/types/utilMethod.ts

@@ -0,0 +1,9 @@
+import { Static } from '@sinclair/typebox';
+import { JSONSchema7 } from 'json-schema';
+import { UIServices } from './application';
+
+export interface UtilMethod<T extends JSONSchema7> {
+  name: string;
+  method: (parameters: Static<T>, services: UIServices) => void;
+  parameters: T;
+}

packages/runtime/src/utilMethods/ScrollIntoComponent.ts

@@ -0,0 +1,20 @@
+import { Type } from '@sinclair/typebox';
+import { UtilMethod } from '../types/utilMethod';
+
+const ScrollToComponentMethodParameters = Type.Object({
+  componentId: Type.String(),
+});
+
+const ScrollToComponentMethod: UtilMethod<typeof ScrollToComponentMethodParameters> = {
+  name: 'scrollToComponent',
+  method(parameters, services) {
+    if (!parameters) return;
+    const ele = services.eleMap.get(parameters?.componentId);
+    if (ele) {
+      ele.scrollIntoView({ behavior: 'smooth' });
+    }
+  },
+  parameters: ScrollToComponentMethodParameters,
+};
+
+export default ScrollToComponentMethod;