fix(vue): add docs and adjust to render

umijs · Nov 27, 2023 · 6b82871 · 6b82871
1 parent c4b93e9
commit 6b82871
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 64 deletions.
diff --git a/packages/ui-bindings/vue/README.md b/packages/ui-bindings/vue/README.md
@@ -7,17 +7,18 @@ npm i @qiankunjs/vue
 ```
 
 ## MicroApp Component
+
 Load (or unload) a sub-application directly through the `<MicroApp />` component, which provides capabilities related to loading and error capturing:
 
 ```vue
 <script setup>
 import { MicroApp } from '@qiankunjs/vue';
-
 </script>
 <template>
   <micro-app name="app1" entry="http://localhost:8000" />
 </template>
 ```
+
 When enabling the sub-application loading animation or error capturing capabilities, an additional style class `wrapperClassName` is accepted by the sub-application. The rendered result is as follows:
 
 ```vue
@@ -29,82 +30,85 @@ When enabling the sub-application loading animation or error capturing capabilit
 ```
 
 ### Loading Animation
+
 After enabling this feature, a loading animation will automatically be displayed while the sub-application is loading. When the sub-application finishes mounting and becomes in the MOUNTED state, the loading state ends, and the sub-application content is displayed.
 
 Simply pass `autoSetLoading` as a parameter:
 
 ```vue
 <script setup>
 import { MicroApp } from '@qiankunjs/vue';
-
 </script>
 <template>
   <micro-app name="app1" entry="http://localhost:8000" autoSetLoading />
 </template>
 ```
+
 #### Custom Loading Animation
+
 If you wish to override the default loading animation style, you can customize the loading component by using the loader slot as the sub-application's loading animation.
 
 ```vue
 <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 name="app1" entry="http://localhost:8000">
+    <template #loader="{ loading }">
+      <custom-loader :loading="loading" />
+    </template>
   </micro-app>
 </template>
 ```
+
 Here, `loading` is a boolean type parameter; when true, it indicates that it is still in the loading state, and when false, it indicates that the loading state has ended.
 
 ### Error Capturing
+
 After enabling this feature, when the sub-application encounters an exception while loading, an error message will automatically be displayed. You can pass the `autoCaptureError` property to the sub-application to enable error capturing capabilities:
 
 ```vue
 <script setup>
 import { MicroApp } from '@qiankunjs/vue';
-
 </script>
 <template>
   <micro-app name="app1" entry="http://localhost:8000" autoCaptureError />
 </template>
 ```
+
 #### Custom Error Capturing
+
 If you wish to override the default error capturing component style, you can customize the error capturing component for the sub-application using the errorBoundary slot:
 
 ```vue
 <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 name="app1" entry="http://localhost:8000">
+    <template #error-boundary="{ error }">
+      <custom-error-boundary :error="error" />
+    </template>
   </micro-app>
 </template>
 ```
 
 ### Component Properties
 
-| Property           | Required | Description                                                                   | Type      | Default Value |
-| ------------------ | -------- | ----------------------------------------------------------------------------- | --------- | ------------- |
-| `name`             | Yes      | The name of the micro-application                                             | `string`  |               |
-| `entry`            | Yes      | The HTML address of the micro-application                                     | `string`  |               |
-| `autoSetLoading`   | No       | Automatically set the loading status of the micro-application                 | `boolean` | `false`       |
-| `autoCaptureError` | No       | Automatically set error capturing for the micro-application                   | `boolean` | `false`       |
-| `className`        | No       | The style class for the micro-application                                     | `string`  | `undefined`   |
-| `wrapperClassName` | No       | The style class wrapping the micro-application's loading and error components | `string`  | `undefined`   |
+| Property | Required | Description | Type | Default Value |
+| --- | --- | --- | --- | --- |
+| `name` | Yes | The name of the micro-application | `string` |  |
+| `entry` | Yes | The HTML address of the micro-application | `string` |  |
+| `autoSetLoading` | No | Automatically set the loading status of the micro-application | `boolean` | `false` |
+| `autoCaptureError` | No | Automatically set error capturing for the micro-application | `boolean` | `false` |
+| `className` | No | The style class for the micro-application | `string` | `undefined` |
+| `wrapperClassName` | No | The style class wrapping the micro-application's loading and error components | `string` | `undefined` |
 
 ### Component Slots
 
 | Slot            | Description          |
 | --------------- | -------------------- |
 | `loader`        | Loading state slot   |
-| `errorBoundary` | Error capturing slot |
+| `errorBoundary` | Error capturing slot |
diff --git a/packages/ui-bindings/vue/README.zh-CN.md b/packages/ui-bindings/vue/README.zh-CN.md
@@ -6,20 +6,19 @@
 npm i @qiankunjs/vue
 ```
 
-
 ## MicroApp 组件
-直接通过 <MicroApp /> 组件加载（或卸载）子应用，该组件提供了 loading 以及错误捕获相关的能力：
 
+直接通过 <MicroApp /> 组件加载（或卸载）子应用，该组件提供了 loading 以及错误捕获相关的能力：
 
 ```vue
 <script setup>
 import { MicroApp } from '@qiankunjs/vue';
-
 </script>
 <template>
   <micro-app name="app1" entry="http://localhost:8000" />
 </template>
 ```
+
 当启用子应用加载动画或错误捕获能力时，子应用接受一个额外的样式类 wrapperClassName，渲染的结果如下所示：
 
 ```vue
@@ -31,20 +30,22 @@ import { MicroApp } from '@qiankunjs/vue';
 ```
 
 ### 加载动画
+
 启用此能力后，当子应用正在加载时，会自动显示加载动画。当子应用挂载完成变成 MOUNTED 状态时，加载状态结束，显示子应用内容。
 
 直接将 autoSetLoading 作为参数传入即可：
 
 ```vue
 <script setup>
 import { MicroApp } from '@qiankunjs/vue';
-
 </script>
 <template>
   <micro-app name="app1" entry="http://localhost:8000" autoSetLoading />
 </template>
 ```
+
 #### 自定义加载动画
+
 如果您希望覆盖默认的加载动画样式时，可以通过 loader slot 来自定义加载组件 loader 作为子应用的加载动画。
 
 ```vue
@@ -61,23 +62,26 @@ import { MicroApp } from '@qiankunjs/vue';
   </micro-app>
 </template>
 ```
+
 其中，loading 为 boolean 类型参数，为 true 时表示仍在加载状态，为 false 时表示加载状态已结束。
 
 ### 错误捕获
-启用此能力后，当子应用加载出现异常时，会自动显示错误信息。可以向子应用传入 autoCaptureError 属性以开启子应用错误捕获能力：
 
+启用此能力后，当子应用加载出现异常时，会自动显示错误信息。可以向子应用传入 autoCaptureError 属性以开启子应用错误捕获能力：
 
 ```vue
 <script setup>
 import { MicroApp } from '@qiankunjs/vue';
-
 </script>
 <template>
   <micro-app name="app1" entry="http://localhost:8000" autoCaptureError />
 </template>
 ```
+
 #### 自定义错误捕获
-如果您希望覆盖默认的错误捕获组件样式时，可以通过  errorBoundary slot 来自定义子应用的错误捕获组件：
+
+如果您希望覆盖默认的错误捕获组件样式时，可以通过 errorBoundary slot 来自定义子应用的错误捕获组件：
+
 ```vue
 <script setup>
 import CustomErrorBoundary from '@/components/CustomErrorBoundary.vue';
@@ -93,24 +97,20 @@ import { MicroApp } from '@qiankunjs/vue';
 </template>
 ```
 
-
 ### 组件属性
 
-| 属性               | 必填 | 说明                                                                                   | 类型      | 默认值      |
-| ------------------ | ---- | -------------------------------------------------------------------------------------- | --------- | ----------- |
-| `name`             | 是   | 微应用的名称                                                                           | `string`  |
-| `entry`            | 是   | 微应用的 HTML 地址                                                                     | `string`  |
-| `autoSetLoading`   | 否   | 自动设置微应用的加载状态                                                               | `boolean` | `false`     |
-| `autoCaptureError` | 否   | 自动设置微应用的错误捕获                                                               | `boolean` | `false`     |
-| `className`        | 否   | 微应用的样式类                                                                         | `string`  | `undefined` |
-| `wrapperClassName` | 否   | 包裹微应用加载组件、错误捕获组件和微应用的样式类，仅在启用加载组件或错误捕获组件时有效 | `string`  | `undefined` |
-
-
+| 属性 | 必填 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- | --- |
+| `name` | 是 | 微应用的名称 | `string` |
+| `entry` | 是 | 微应用的 HTML 地址 | `string` |
+| `autoSetLoading` | 否 | 自动设置微应用的加载状态 | `boolean` | `false` |
+| `autoCaptureError` | 否 | 自动设置微应用的错误捕获 | `boolean` | `false` |
+| `className` | 否 | 微应用的样式类 | `string` | `undefined` |
+| `wrapperClassName` | 否 | 包裹微应用加载组件、错误捕获组件和微应用的样式类，仅在启用加载组件或错误捕获组件时有效 | `string` | `undefined` |
 
 ### 组件插槽
 
 | 插槽            | 说明         |
 | --------------- | ------------ |
 | `loader`        | 加载状态插槽 |
 | `errorBoundary` | 错误捕获插槽 |
-
diff --git a/packages/ui-bindings/vue/src/ErrorBoundary.ts b/packages/ui-bindings/vue/src/ErrorBoundary.ts
@@ -9,5 +9,5 @@ export default defineComponent({
   },
   render() {
     return h('div', this.error?.message);
-  }
+  },
 });
diff --git a/packages/ui-bindings/vue/src/MicroApp.ts b/packages/ui-bindings/vue/src/MicroApp.ts
@@ -75,7 +75,6 @@ export const MicroApp = defineComponent({
       }
     };
 
-
     const rootRef = ref<HTMLDivElement | null>(null);
 
     onMounted(() => {
@@ -88,7 +87,6 @@ export const MicroApp = defineComponent({
         () => {
           const microApp = microAppRef.value;
 
-
           if (microApp) {
             microApp._unmounting = true;
 
@@ -159,39 +157,47 @@ export const MicroApp = defineComponent({
 
   render() {
     return this.reactivePropsFromParams.autoSetLoading ||
-    this.reactivePropsFromParams.autoCaptureError ||
-    this.$slots.loader ||
-    this.$slots.errorBoundary
+      this.reactivePropsFromParams.autoCaptureError ||
+      this.$slots.loader ||
+      this.$slots.errorBoundary
       ? h(
           'div',
           {
             class: this.microAppWrapperClassName,
           },
           [
             this.$slots.loader
-              ? (typeof this.$slots.loader === 'function' ? this.$slots.loader(this.loading): this.$slots.loader)
+              ? typeof this.$slots.loader === 'function'
+                ? this.$slots.loader(this.loading)
+                : this.$slots.loader
               : this.reactivePropsFromParams.autoSetLoading &&
                 h(MicroAppLoader, {
-                  ...(isVue2 ? {
-                    props: {
-                      loading: this.loading,
-                      },
-                    } : {
+                  ...(isVue2
+                    ? {
+                        props: {
+                          loading: this.loading,
+                        },
+                      }
+                    : {
                         loading: this.loading,
-                    })
+                      }),
                 }),
             this.error
               ? this.$slots.errorBoundary
-                ? (typeof this.$slots.errorBoundary === 'function' ? this.$slots.errorBoundary(this.error) : this.$slots.errorBoundary)
+                ? typeof this.$slots.errorBoundary === 'function'
+                  ? this.$slots.errorBoundary(this.error)
+                  : this.$slots.errorBoundary
                 : this.reactivePropsFromParams.autoCaptureError &&
                   h(ErrorBoundary, {
-                    ...(isVue2 ? {
-                      props: {
-                        error: this.error,
-                      }
-                    } : {
-                      error: this.error,
-                    })
+                    ...(isVue2
+                      ? {
+                          props: {
+                            error: this.error,
+                          },
+                        }
+                      : {
+                          error: this.error,
+                        }),
                   })
               : null,
             h('div', {
@@ -204,5 +210,5 @@ export const MicroApp = defineComponent({
           class: this.microAppClassName,
           ref: 'containerRef',
         });
-  }
+  },
 });
diff --git a/packages/ui-bindings/vue/src/MicroAppLoader.ts b/packages/ui-bindings/vue/src/MicroAppLoader.ts
@@ -10,5 +10,5 @@ export default defineComponent({
 
   render() {
     return h('div', this.loading ? 'loading...' : '');
-  }
+  },
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,5 +9,5 @@ export default defineComponent({ @@
       },
       render() {
         return h('div', this.error?.message);
-      }
+      },
     });