Saturn

base

The base route of a micro application. The internal routing of a micro application is based on this base route.

TypeScript type:

type base = string;

hasPermission

Query whether the specified user is authorized to operate the data point.

TypeScript type:

type PermissionCode = string;
type hasPermission = (code: PermissionCode) => boolean;

The value of PermissionCode is the code value of one of the items in privileges in the manifest file of each micro application.

isSupportMobile

Indicates whether this SaaS supports mobile app.

TypeScript type:

type isSupportMobile = boolean;

resourcePrefix

The static resource address.

TypeScript type:

type resourcePrefix = string;

tyLang

Indicates the current language of the SaaS.

TypeScript type:

type tyLang = 'zh' | 'en';

region

Indicates the current region of the SaaS.

TypeScript type:

type region = 'tx' | 'us' | 'eu' | 'in' | 'ueaz' | 'we' | 'sea';

modifySelectedMenu

Fix the left-side selected menu by using the path field.

type modifySelectedMenu = (path: string) => void;

mqtt

The main application supports the MQTT feature.

TypeScript type:

interface mqtt {
  subscribeTopic: (
    bizType: string,
    cbFn: (msg: string) => void,
    option: {
      isGlobal: boolean;
    },
  ) => void;
  unsubscribeTopic: (bizType: string) => void;
}

mainHistory

The history object that the main application directly transmits to the micro application.

TypeScript type:

interface mainHistory {
  push: (path: string, state?: any) => void;
  replace: (path: string, state?: any) => void;
  go: (n: number) => void;
  goBack: () => void;
  goForward: () => void;
}

getOwnMenu

Get the information about menus of the current micro application.

TypeScript type:

type getOwnMenu = () => {
  authorized: any;
  entry_id: string;
  entry_name: string;
  entry_name_en: string;
  entry_name_lang_key: string;
  entry_name_zh: string;
  entry_type: string;
  icon: string;
  lang_package_biz_id: any;
  micro_app_name: string;
  oem_micro_app_id: string;
  oem_saas_id: string;
  parent_id: string;
  path: string;
  permission_code: string;
  platform: string;
  priority: number;
  ratio: number;
  sub_entry_list: any[];
  tag_code: string;
};

setLoading

Control the loading state of the visible window and breadcrumb of the current micro application.

TypeScript type:

type setLoading = (value: boolean) => void;

dynamicProps

The API is a collection of APIs. Currently, only setBreadcrumb is available.

TypeScript type:

interface dynamicProps {
  setBreadcrumb: SetBreadcrumb;
}

setBreadcrumb

Render the common breadcrumb.

TypeScript type:

interface setBreadcrumb {
  (breadcrumbInfos?: BreadcrumbInfoInput[]): void;
}

type BreadcrumbInfoInput =
  | {
      type: 'auto' | 'root';
      name?: never;
      path?: never;
    }
  | {
      type: 'menu';
      name?: never;
      path: string;
    }
  | {
      type: 'c';
      name: string;
      path: string;
    };

For more information, see this document.

container

The node on which the current micro application is mounted.

TypeScript type:

type container = HTMLDivElement;

sentry

Transmit the raw data of Sentry's API methods to the micro application that can be used to capture error messages.

TypeScript type:

interface sentry {
  captureEvent: (event: Event) => string;
  captureMessage: (
    message: string,
    captureContext?: CaptureContext | Severity,
  ) => string;
  captureException: (exception: any, captureContext?: CaptureContext) => string;
}

themeSubscribe

Get the theme color of the current SaaS. It is often used for micro applications that have charts configured.

TypeScript type:

const THEME_TYPE = 'CHANGE THEME';
typeof Theme = 'light' | 'dark';
interface ThemeSubscribe {
    subscribe: (cb: (type: typeof THEME_TYPE, value: Theme) => void, callImmediately: boolean) => () => void;
    getValue: () => Theme;
    publish: (value: Theme) => void;
}

How to get started

import { useEffect, useState } from 'react';
import { MainProps } from 'src/index.ts';

function Test() {
  const [theme, setTheme] = useState(() => MainProps.themeSubscribe.getValue());
  useEffect(() => {
    const unsubscribe = MainProps.themeSubscribe.subscribe(
      (type, value) => {
        setTheme(value);
      },
      true, // Notify immediately. The previous method will be requested immediately.
    );
    return unsubscribe;
  }, [setTheme]);

  return <div>Current theme color {theme}</div>;
}