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

MicroApp-bak

@@ -0,0 +1,246 @@
+import type { PropType, VNode } from 'vue-demi';
+import { defineComponent, h as hDemi, isVue2 } from 'vue-demi';
+import type { AppConfiguration, LifeCycles } from 'qiankun';
+import type { MicroAppType } from '@qiankunjs/ui-shared';
+import { mountMicroApp, omitSharedProps, unmountMicroApp, updateMicroApp } from '@qiankunjs/ui-shared';
+
+interface Options {
+  props?: object,
+  domProps?: object
+  on?: object
+}
+
+const adaptOnsV3 = (ons: object | undefined) => {
+  if (!ons) return null
+  return Object.entries(ons).reduce((ret, [key, handler]) => {
+    key = key.charAt(0).toUpperCase() + key.slice(1)
+    key = `on${key}`
+    return { ...ret, [key]: handler } as Record<string, unknown>;
+  }, {})
+}
+
+const h = (type: string | object, options: Options & unknown = {}, chidren?: unknown) => {
+  if (isVue2)
+    return hDemi(type, options, chidren)
+
+  const { props, domProps, on, ...extraOptions } = options
+
+  const ons = adaptOnsV3(on)
+  const params = { ...extraOptions, ...props, ...domProps, ...ons }
+  return hDemi(type, params, chidren)
+}
+
+const slot = (s: ((arg: Record<string, unknown>) => VNode[]) | VNode, attrs: Record<string, unknown>) => {
+  if (typeof s == 'function') return s(attrs)
+  return s
+};
+
+import MicroAppLoader from './MicroAppLoader';
+import ErrorBoundary from './ErrorBoundary';
+
+export const MicroApp = defineComponent({
+  name: 'MicroApp',
+  components: {
+    MicroAppLoader,
+    ErrorBoundary,
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    entry: {
+      type: String,
+      required: true,
+    },
+    settings: {
+      type: Object as PropType<AppConfiguration>,
+      default: () => ({
+        sandbox: true,
+      }),
+    },
+    lifeCycles: {
+      type: Object as PropType<LifeCycles<Record<string, unknown>>>,
+    },
+    autoSetLoading: {
+      type: Boolean,
+      default: false,
+    },
+    autoCaptureError: {
+      type: Boolean,
+      default: false,
+    },
+    wrapperClassName: {
+      type: String,
+    },
+    className: {
+      type: String,
+    },
+  },
+  // template: `
+  //   <div ref="test">
+  //     asdf
+  //     <div v-if="autoSetLoading || autoCaptureError || $slots.loader || $slots.errorBoundary" :class="microAppWrapperClassName">
+  //       <slot v-if="$slots.loader" name="loader" :loading="loading" />
+  //       <micro-app-loader v-else-if="autoSetLoading" :loading="loading" />
+  //       <slot v-if="$slots.errorBoundary" name="errorBoundary" :error="error" />
+  //       <error-boundary v-else-if="autoCaptureError" :error="error" />
+  //       <div :class="microAppClassName" :ref="setContainerRef" />
+  //     </div>
+  //     <div v-else :class="microAppClassName" :ref="setContainerRef" />
+  //   </div>
+  // `,
+  render() {
+
+   return  (this.reactivePropsFromParams.autoSetLoading ||
+      this.reactivePropsFromParams.autoCaptureError ||
+      this.$slots.loader ||
+      this.$slots.errorBoundary)
+        ? h(
+            'div',
+            {
+              domProps: {
+                class: this.microAppWrapperClassName,
+              }
+            },
+            [
+              this.$slots.loader
+                ? this.$slots.loader(this.loading)
+                : this.reactivePropsFromParams.autoSetLoading &&
+                  h(MicroAppLoader, {
+                    props: {
+                      loading: this.loading,
+                    }
+                  }),
+              this.error
+                ? this.$slots.errorBoundary
+                  ? this.$slots.errorBoundary(this.error)
+                  : this.reactivePropsFromParams.autoCaptureError &&
+                    h(ErrorBoundary, {
+                      props: {
+                        error: this.error,
+                      }
+                    })
+                : null,
+              h('div', {
+                domProps: {
+                  class: this.microAppClassName,
+                },
+                props: {
+                  ref: 'containerRef',
+                }
+              }),
+            ],
+          )
+        : h('div', {
+            class: this.microAppClassName,
+            ref: 'containerRef',
+          });
+  },
+  mounted() {
+    console.log('vue binding');
+    this.mountMicroApp();
+  },
+
+  data() {
+    return {
+      loading: false,
+      error: undefined as Error | undefined,
+      microAppRef: undefined as MicroAppType | undefined,
+      containerRef: undefined as HTMLDivElement | undefined,
+    };
+  },
+  watch: {
+    name() {
+      this.mountMicroApp();
+    },
+    reactivePropsFromParams: {
+      handler() {
+        updateMicroApp({
+          getMicroApp: () => this.microAppRef,
+          setLoading: (l) => {
+            this.loading = l;
+          },
+          key: 'vue',
+        });
+      },
+      deep: true,
+    }
+  },
+  computed: {
+    isNeedShowError() {
+      return this.$slots.errorBoundary || this.autoCaptureError;
+    },
+
+    reactivePropsFromParams() {
+      return omitSharedProps({
+        ...this.$props,
+      });
+    },
+
+    microAppWrapperClassName() {
+      return this.wrapperClassName ? `${this.wrapperClassName} qiankun-micro-app-wrapper` : 'qiankun-micro-app-wrapper';
+    },
+
+    microAppClassName() {
+      return this.className ? `${this.className} qiankun-micro-app-container` : 'qiankun-micro-app-container';
+    },
+  },
+  methods: {
+    mountMicroApp() {
+      this.unmountMicroApp();
+
+      const container = this.$refs.containerRef as HTMLDivElement | undefined;
+
+      if (!container) {
+        return;
+      }
+
+      mountMicroApp({
+        props: this.$props,
+        container,
+        setMicroApp: (app?: MicroAppType) => {
+          this.microAppRef = app;
+        },
+        setLoading: (l) => {
+          this.loading = l;
+        },
+        setError: (err?: Error) => {
+          this.setComponentError(err);
+        },
+      });
+
+    },
+
+    unmountMicroApp() {
+      const microApp = this.microAppRef;
+
+      if (microApp) {
+        microApp._unmounting = true;
+
+        unmountMicroApp(microApp).catch((err: Error) => {
+          this.setComponentError(err);
+          this.loading = false;
+        });
+
+        this.microAppRef = undefined;
+      }
+    },
+
+    setComponentError(err: Error | undefined) {
+      if (this.isNeedShowError) {
+        this.error = err;
+        // error log 出来，不要吞
+        if (err) {
+          console.error(this.error);
+        }
+      } else if (err) {
+        throw err;
+      }
+    },
+
+    setContainerRef(item: HTMLDivElement) {
+      this.containerRef = item;
+    }
+  },
+});