feat(vue): init vue ui binding #2775

linghaoSu · 2023-10-30T13:38:43Z

resolve #2689

MicroApp 组件

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

<script setup>
import { MicroApp } from '@qiankunjs/vue';

</script>
<template>
  <micro-app name="app1" entry="http://localhost:8000" />
</template>

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

<div :class="wrapperClassName">
  <MicroAppLoader :loading="loading" />
  <ErrorBoundary :error="e" />
  <MicroApp :class="className" />
</div>

加载动画

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

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

<script setup>
import { MicroApp } from '@qiankunjs/vue';

</script>
<template>
  <micro-app name="app1" entry="http://localhost:8000" autoSetLoading />
</template>

自定义加载动画

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

<script setup>
import CustomLoader from '@/components/CustomLoader.vue';
import { MicroApp } from '@qiankunjs/vue';

</script>
<template>
  <micro-app name="app1" entry="http://localhost:8000" >
     <template #loader="{ loading }">
       <custom-loader :loading="loading">
     </template>
  </micro-app>
</template>

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

错误捕获

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

<script setup>
import { MicroApp } from '@qiankunjs/vue';

</script>
<template>
  <micro-app name="app1" entry="http://localhost:8000" autoCaptureError />
</template>

自定义错误捕获

如果您希望覆盖默认的错误捕获组件样式时，可以通过 errorBoundary slot 来自定义子应用的错误捕获组件：

<script setup>
import CustomErrorBoundary from '@/components/CustomErrorBoundary.vue';
import { MicroApp } from '@qiankunjs/vue';

</script>
<template>
  <micro-app name="app1" entry="http://localhost:8000" >
     <template #error-boundary="{ error }">
       <custom-error-boundary :error="error">
     </template>
  </micro-app>
</template>

changeset-bot · 2023-10-30T13:38:48Z

⚠️ No Changeset found

Latest commit: b496697

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 · 2023-10-30T13:38:48Z

@linghaoSu is attempting to deploy a commit to a Personal Account owned by @umijs on Vercel.

@umijs first needs to authorize it.

kuitos · 2023-11-08T03:38:32Z

@bravepg 可以一起 review 下

bravepg · 2023-11-08T15:08:02Z

@bravepg 可以一起 review 下

好的，前几天忙着其他事忘记这个 pr 了😂，我看看

bravepg · 2023-11-09T02:27:38Z

packages/ui-bindings/vue/package.json

+    "dev": "father dev",
+    "test": "cross-env NODE_ENV=test vitest"
+  },
+  "author": "Bravepg",


author 换成你吧～

bravepg · 2023-11-09T02:48:23Z

packages/ui-bindings/react/src/MicroApp.tsx

-        container: containerRef.current!,
-        props: propsFromParams,
+    mountMicroApp({
+      props: componentProps,


这里有点怪，把 componentProps 这个全部属性都透传进去了，然后下面又传递了 propsFromParams

bravepg · 2023-11-09T03:02:27Z

packages/ui-bindings/react/src/MicroApp.tsx

+        setLoading(loading);
+      },
+      source: 'react',
+    })

    return noop;
  }, [useDeepCompare(propsFromParams)]);


这里有个风险，lifeCycles 是个函数数组，之前是解构出来了。现在被放进到 propsFromParams 里面，如果有户有个设置生命周期的操作，可能会造成无限更新，最好还是把初始化需要的一些变量给解构出来。

如果会无限更新应该在 vue 中也会，统一做一次 omit 解构

bravepg · 2023-11-09T03:03:44Z

packages/ui-bindings/react/src/MicroApp.tsx

+      setLoading: (loading) => {
+        setLoading(loading);
+      },
+      source: 'react',


source 换个名字吧，有点怪怪的。可以直接叫做 key？

好主意，换了

bravepg · 2023-11-09T03:05:16Z

packages/ui-bindings/react/src/MicroApp.tsx

+      props: componentProps,
+      container: containerRef.current!,
+      propsFromParams,
+      setApp(app) {


setApp getApp，换成 setMicroApp 和 getMicroApp 吧

bravepg · 2023-11-09T03:06:36Z

packages/ui-bindings/vue/src/MicroApp.ts

+  props: {
+    name: {
+      type: String,
+      required: true,


vue 里面的 props 类型得重新定义一遍么？有没有快捷的生成方式？

vue 3.3 的 SFC 写法支持通过类型来直接声明 props，但是目前 father 这个库似乎还不支持 compile vue 文件，因此目前还没想到更好的方式

或者将 vue 的 PropType 和 ExtractPropType 在 shared 中实现一边，并且使用此处的 props 作为基础，生成 sharedProps 类型

bravepg · 2023-11-09T03:08:18Z

packages/ui-bindings/vue/src/MicroApp.ts

+      watch(
+        name,
+        () => {
+          const microApp = microAppRef.value;


初始化的时候，有必要判断 microApp 是否存在吗？

这里是 watch 启动后，当 name 发生变化时，销毁之前的生成的 microApp 用的判断

bravepg · 2023-11-09T03:11:12Z

examples/main-vue/src/App.vue

+</script>
+
+<template>
+  <MicroApp :name="name" entry="//localhost:7102" />


examples 这么搞合适吗？未来可能有很多个案例，有规划怎么展示给用户吗？单独叫 main-vue 然后引入 MicroApp 是不是有点重了。
@kuitos

这里只是为了验证 vue 组件的可用，加入的实验 demo，如果后续不需要可以在合并之前删掉

@kuitos 其他的我 ok 了，这块 examples 的形式你确认下？

不同单独搞一个仓库，参考现在的 main https://github.com/umijs/qiankun/blob/master/examples/main/render/VueRender.js

@linghaoSu cc

正在处理中，稍后提交更新

@kuitos 在处理 demo 的过程中，发现目前的做法仅兼容 vue3，是否需要兼容到 vue2？

目前正在尝试使用 vue-demi 来做兼容处理，但需要一点时间，我先标记为 Draft 了

@kuitos fixed

demi 应该也是只能兼容到2.7+吧

<= 2.6 通过 @vue/composition-api 来进行兼容

如果项目中未安装，则会提示安装

… context

MicroApp-bak

kuitos · 2023-11-28T13:21:41Z

ci 需要修一下

linghaoSu · 2023-11-29T12:49:37Z

ci 需要修一下

@kuitos fixed

linghaoSu force-pushed the feat/vue-ui-binding branch 2 times, most recently from 5277679 to cd3087b Compare October 31, 2023 15:21

kuitos requested a review from bravepg November 8, 2023 03:38

linghaoSu force-pushed the feat/vue-ui-binding branch 2 times, most recently from de440e0 to 1da18bf Compare November 8, 2023 15:01

bravepg reviewed Nov 9, 2023

View reviewed changes

linghaoSu requested a review from bravepg November 13, 2023 13:16

linghaoSu marked this pull request as ready for review November 15, 2023 01:18

linghaoSu marked this pull request as draft November 24, 2023 01:05

linghaoSu added 10 commits November 27, 2023 22:58

feat(vue): init vue ui binding

b356515

feat(shared): extract shared logic from seperate framework

ad727f6

fix(ui-shared): modify canUpdate parameter to avoid repeat with outer…

73bcb65

… context

fix(react): add missing 'Ref' type import

9f3ff7d

fix(vue): add vue props declare

9d8a122

docs(example): add vue main app example

5d192f2

fix(ui): using unified shared props to omit watchable object

a873aa3

fix(ui): fix code style

0a6cf90

fix(vue): change main example to demo vue component

c4b93e9

fix(vue): add docs and adjust to render

6b82871

linghaoSu force-pushed the feat/vue-ui-binding branch from 193b76c to 6b82871 Compare November 27, 2023 14:58

linghaoSu marked this pull request as ready for review November 27, 2023 14:58

linghaoSu requested a review from kuitos November 27, 2023 14:59

kuitos reviewed Nov 28, 2023

View reviewed changes

MicroApp-bak Outdated Show resolved Hide resolved

fix(vue): rm useless backup file

20fa181

linghaoSu requested a review from kuitos November 28, 2023 09:07

kuitos requested a review from gongshun November 28, 2023 13:20

linghaoSu added 2 commits November 29, 2023 20:45

fix(ui): fix ui dependency

cb7d093

fix(ui): fix lint

b496697

kuitos merged commit fdb5f8a into umijs:next Dec 5, 2023
5 checks passed

kuitos linked an issue Feb 26, 2024 that may be closed by this pull request

[Task] 配套的 UI Library（Vue 版本） #2689

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(vue): init vue ui binding #2775

feat(vue): init vue ui binding #2775

linghaoSu commented Oct 30, 2023

changeset-bot bot commented Oct 30, 2023 •

edited

Loading

vercel bot commented Oct 30, 2023

kuitos commented Nov 8, 2023

bravepg commented Nov 8, 2023

bravepg Nov 9, 2023

linghaoSu Nov 13, 2023

bravepg Nov 9, 2023

linghaoSu Nov 13, 2023

bravepg Nov 9, 2023

linghaoSu Nov 13, 2023

bravepg Nov 9, 2023

linghaoSu Nov 13, 2023

bravepg Nov 9, 2023

linghaoSu Nov 13, 2023

bravepg Nov 9, 2023

linghaoSu Nov 13, 2023

bravepg Nov 9, 2023

linghaoSu Nov 13, 2023

bravepg Nov 9, 2023

linghaoSu Nov 13, 2023

bravepg Nov 16, 2023

kuitos Nov 17, 2023

kuitos Nov 21, 2023

linghaoSu Nov 22, 2023

linghaoSu Nov 24, 2023

linghaoSu Nov 27, 2023

qiYuei Nov 29, 2023

linghaoSu Nov 29, 2023

kuitos commented Nov 28, 2023

linghaoSu commented Nov 29, 2023 •

edited

Loading

feat(vue): init vue ui binding #2775

feat(vue): init vue ui binding #2775

Conversation

linghaoSu commented Oct 30, 2023

MicroApp 组件

加载动画

自定义加载动画

错误捕获

自定义错误捕获

changeset-bot bot commented Oct 30, 2023 • edited Loading

⚠️ No Changeset found

vercel bot commented Oct 30, 2023

kuitos commented Nov 8, 2023

bravepg commented Nov 8, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kuitos commented Nov 28, 2023

linghaoSu commented Nov 29, 2023 • edited Loading

changeset-bot bot commented Oct 30, 2023 •

edited

Loading

linghaoSu commented Nov 29, 2023 •

edited

Loading