feat: renderer-react

[bravepg]

MicroApp 组件

直接通过 <MicroApp /> 组件加载（或卸载）子应用，该组件提供了 loading 以及错误捕获相关的能力：

import { MicroApp } from '@qiankunjs/react';

export default function Page() {
  return <MicroApp name="app1" entry="http://localhost:8000" />;
}

当启用子应用加载动画或错误捕获能力时，子应用接受一个额外的样式类 wrapperClassName，渲染的结果如下所示：

<div style={{ position: 'relative' }} className={wrapperClassName}>
  <MicroAppLoader loading={loading} />
  <ErrorBoundary error={e} />
  <MicroApp className={className} />
</div>

加载动画

启用此能力后，当子应用正在加载时，会自动显示加载动画。当子应用挂载完成变成 MOUNTED 状态时，加载状态结束，显示子应用内容。

直接将 autoSetLoading 作为参数传入即可：

import { MicroApp } from '@qiankunjs/react';

export default function Page() {
  return <MicroApp name="app1" entry="http://localhost:8000" autoSetLoading />;
}

自定义加载动画

如果您希望覆盖默认的加载动画样式时，可以设置一个自定义的加载组件 loader 作为子应用的加载动画。

import CustomLoader from '@/components/CustomLoader';
import { MicroApp } from '@qiankunjs/react';

export default function Page() {
  return (
    <MicroApp name="app1" entry="http://localhost:8000" loader={(loading) => <CustomLoader loading={loading} />} />
  );
}

其中，loading 为 boolean 类型参数，为 true 时表示仍在加载状态，为 false 时表示加载状态已结束。

错误捕获

启用此能力后，当子应用加载出现异常时，会自动显示错误信息。可以向子应用传入 autoCaptureError 属性以开启子应用错误捕获能力：

import { MicroApp } from '@qiankunjs/react';

export default function Page() {
  return <MicroApp name="app1" entry="http://localhost:8000" autoCaptureError />;
}

自定义错误捕获

如果您希望覆盖默认的错误捕获组件样式时，可以设置一个自定义的组件 errorBoundary 作为子应用的错误捕获组件：

import CustomErrorBoundary from '@/components/CustomErrorBoundary';
import { MicroApp } from '@qiankunjs/react';

export default function Page() {
  return (
    <MicroApp
      name="app1"
      entry="http://localhost:8000"
      errorBoundary={(error) => <CustomErrorBoundary error={error} />}
    />
  );
}

[changeset-bot]

⚠️ No Changeset found

Latest commit: b0ee024

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
qiankun	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 18, 2023 2:34pm

[kuitos]

这个项目需要补下 tsx 的 lint 规则，并继承自根目录的 eslint

[kuitos]

需要重新合并下主分支，应该是格式化后冲突了

[bravepg]

需要重新合并下主分支，应该是格式化后冲突了

好的 我合并了

[bravepg]

@kuitos 啥时候有空帮我 review 下呀？因为 next 更新有点频繁，我需要一直 merge 👀

[kuitos]

这里先不改吧，MicroApp 应该是有单独的 react 版本主应用的 demo，现在这个主应用是技术栈无关的

[bravepg]

那 MicroApp 现在要单独搞个 demo 出来么？

[kuitos]

参考 2.x 的方式单独搞一个 react 的版本 https://github.com/umijs/qiankun/blob/master/examples/main/render/ReactRender.jsx

[kuitos]

pr 描述记得更新一下 #2706 (comment)