bytedance / magic-microservices Goto Github PK

magic('my-component', MyModule, {
  propTypes: {
    id: Number,
    test: Boolean,
    callback: Function,
    count: Number,
  },
  // 样式文件
  styles: ['https://xxx.a.css', 'https://xxx.b.css'],
  // js 资源
  scripts: ['https://xxx.a.js', 'https://xxx.b.js']
});

import Vue from 'vue/index';
import App from './component/Hello.vue';

let vueInstance = null;

export async function bootstrap() {
  console.log('vue app bootstraped');
}

export async function mount(container, props) {
  console.log('magic-microservices-component-vue mount >>> ', props);
  vueInstance = Vue.createApp({
    ...App,
    data() {
      return props;
    },
  }).mount(container);
}

export async function updated(attrName, value) {
  console.log('magic-microservices-component-vue update', attrName, ' >>> ', value);
  vueInstance[attrName] = value;
  vueInstance.$forceUpdate();
}

export async function unmount() {
  console.log('vue app will unmount');
}

import { createApp } from 'vue';
import App from './App.vue';

/**
 * Multiple vue instances are identified by container as unique identifiers
 */
const vueInstanceMap = new WeakMap();

export async function mount(container: Element, props: any) {
  const vueInstance = createApp({
    ...App,
    data() {
      return props;
    },
  }).mount(container);
  vueInstanceMap.set(container, vueInstance)
}

export async function updated(attrName: string, value: any, container: Element,) {
  const vueInstance = vueInstanceMap.get(container);
  vueInstance[attrName] = value;
  vueInstance.$forceUpdate();
}

export function unmount(magicInstance: any, container: any) {
  const vueInstance = vueInstanceMap.get(container);
  vueInstance.unmount();
}