@wair/cloud-micro-app-types

TypeScript 类型定义包，用于太初云微应用集成。

安装

npm install @wair/cloud-micro-app-types

或者使用 pnpm：

pnpm add @wair/cloud-micro-app-types

使用方法

import { useEffect, useState, useRef } from 'react'
import { InjectProps } from '@wair/cloud-micro-app-types'

export type QianKunProps = {
  name: string
} & InjectProps
export class MainAppState {
  static state: InjectProps['state']
  static actions: InjectProps['actions']
  static appName: string
  static init({
    state,
    actions,
    subscribe,
    snapshot,
    name,
    router,
  }: QianKunProps) {
    this.state = state
    this.actions = actions
    this.subscribe = subscribe
    this.snapshot = snapshot
    this.appName = name
    this.appRouter = router
  }
  static subscribe: InjectProps['subscribe']
  static snapshot: InjectProps['snapshot']
  static appRouter: InjectProps['router']
}

export function useMainAppState<T>(fn: (s: typeof MainAppState.state) => T) {
  const [state, setState] = useState<ReturnType<typeof fn>>(
    fn(
      MainAppState.snapshot
        ? MainAppState.snapshot(MainAppState.state)
        : MainAppState.state,
    ),
  )
  const fnRef = useRef(fn)

  useEffect(() => {
    fnRef.current = fn
  }, [fn])

  useEffect(() => {
    if (MainAppState.subscribe) {
      const unSubscribe = MainAppState.subscribe(
        MainAppState.state,
        (s: any) => {
          fnRef.current &&
            setState(fnRef.current(MainAppState.snapshot(MainAppState.state)))
        },
      )
      return unSubscribe
    }
  }, [fnRef, setState])

  return state
}

export function appLoadFinished() {
  MainAppState.actions &&
    MainAppState.actions.updateMicroAppState(MainAppState.appName, {
      loading: false,
    })
}

类型说明

InjectMicroAppState

微应用状态接口，定义了微应用的状态结构。

interface InjectMicroAppState {
  microApp: Record<'taichu-web', {
    loading: boolean;
  }>;
}

Router

React Router 类型定义，基于 createBrowserRouter 的返回类型。

export type Router = ReturnType<typeof createBrowserRouter>;

InjectMicroAppActions

微应用操作方法集合的类型定义：

export declare const injectMicroAppActions: {
  updateInjectMicroAppState(name: string, value: {
    loading: boolean;
  }): void;
};

export type InjectMicroAppActions = typeof injectMicroAppActions;

• updateInjectMicroAppState(name: string, value: { loading: boolean }): 更新微应用状态

InjectProps

注入到微应用的完整属性对象类型定义：

export declare const injectProps: {
  actions: InjectMicroAppActions;
  state: InjectMicroAppState;
  router: Router;
  subscribe: typeof subscribe;
  snapshot: typeof snapshot;
};

export type InjectProps = typeof injectProps;

包含以下属性：

• actions: 操作方法集合
• state: 状态对象
• router: React Router 实例
• subscribe: valtio 订阅方法
• snapshot: valtio 快照方法

文件结构

taichu-cloud-micro-app-types/
├── micro-app-store.d.ts    # 主要类型定义文件
├── package.json            # 包配置文件
└── readme.md              # 说明文档

依赖要求

• valtio: ^2.0.0
• react-router-dom: ^7.0.0

开发团队

Taichu Cloud Team

许可证

MIT