vue#createApp TypeScript Examples

export function mount (comp: Component, options?: object): Wrapper {
  const div = document.createElement('div')
  const app = createApp({
    render () {
      return null
    },
    ...comp
  })
  const instance = app.mount(div)
  return {
    app,
    instance,
    unmount: () => app.unmount()
  }
}

preview(href: string, callback?: () => void) {
		const { change, inline, language } = this.engine;
		const vm = createApp(AmPreview, {
			language,
			href,
			readonly: this.engine.readonly,
			onLoad: () => {
				if (callback) callback();
			},
			onEdit: () => {
				if (!this.target) return;
				this.mouseInContainer = false;
				this.hide(undefined, false);
				this.show(this.target, true);
			},
			onRemove: () => {
				if (!this.target) return;
				const range = change.range.get();
				range.select(this.target, true);
				inline.repairRange(range);
				change.range.select(range);
				change.cacheRangeBeforeCommand();
				inline.unwrap();
				this.mouseInContainer = false;
				this.target = undefined;
				this.hide();
			},
		});
		return vm;
	}

createPortal = <T>(children: Component, container?: ElementRef) => {
  const elSnapshot = unref(container) || document.createElement('div')
  const app = createApp(children)
  document.body.appendChild(elSnapshot)
  const instance = app.mount(elSnapshot) as ComponentInstance<T>
  return {
    instance
  }
}

/**
 * Init UI
 */

ipcRenderer.on("setId", (e, arg) => {
    if (arg.id == "Main") {
        const app = createApp(MainApp);
        new TruckEditorManager();

        app.use(router);
        app.use(BootstrapIconsPlugin);
        app.use(Toast, options);
        app.use(store);
        app.mount("#app");

        app.config.globalProperties.$snapVersion = version;
    } else if (arg.id == "Modal") {
        //Modals stuff
        const app = createApp(ModalApp);
        app.use(router);
        app.use(BootstrapIconsPlugin);
        app.mount("#app");
    }
});

describe('useI18nComponentName option', () => {
  test('default', () => {
    const mockWarn = warn as jest.MockedFunction<typeof warn>
    mockWarn.mockImplementation(() => {})

    const app = createApp({})
    const i18n = {} as I18n & I18nInternal

    apply(app, i18n)
    expect(mockWarn).not.toHaveBeenCalled()
  })

  test('true', () => {
    const mockWarn = warn as jest.MockedFunction<typeof warn>
    mockWarn.mockImplementation(() => {})

    const app = createApp({})
    const i18n = {} as I18n & I18nInternal

    apply(app, i18n, { useI18nComponentName: true })
    expect(mockWarn).toHaveBeenCalled()
    expect(mockWarn.mock.calls[0][0]).toEqual(
      getWarnMessage(I18nWarnCodes.COMPONENT_NAME_LEGACY_COMPATIBLE, {
        name: 'i18n-t'
      })
    )
  })
})

editor(text: string, href: string, callback?: () => void) {
		const vm = createApp(AmEditor, {
			language: this.engine.language,
			defaultText: text,
			defaultLink: href,
			onLoad: () => {
				this.mouseInContainer = true;
				if (callback) callback();
			},
			onOk: (text: string, link: string) => this.onOk(text, link),
		});
		return vm;
	}

createApp(App)
  .use(loading)
  .use(pinia)
  .use(router)
  .use(themes)
  .use(theme)
  .use(modal)
  .use(notification)
  .use(dialog)
  .mount("#app")

describe('globalInstall option', () => {
  test('default', () => {
    const app = createApp({})
    const i18n = {} as I18n & I18nInternal
    const spy = jest.spyOn(app, 'component')

    apply(app, i18n)
    expect(spy).toHaveBeenCalledTimes(3)
  })

  test('false', () => {
    const app = createApp({})
    const i18n = {} as I18n & I18nInternal
    const spy = jest.spyOn(app, 'component')

    apply(app, i18n, { globalInstall: false })
    expect(spy).not.toHaveBeenCalled()
  })
})

/**
 * @description 自动将 ./src/components/global 下的组件注册成为全局组件
 * @param {vue} app 当前应用实例
 * @returns {void} void
 */
export function registeGlobalComponent(
  app: ReturnType<typeof createApp>
): void {
  const files = require.context('./global', true, /\.(vue|ts)$/)
  files.keys().forEach((key) => {
    const config = files(key)
    const name = kebabCase(key.replace(/^\.\//, '').replace(/\.\w+$/, ''))
    app.component(name, config.default || config)
  })

  // 全局注册 iconfont
  app.component('IconFont', IconFont)
}

describe('Modal', () => {
  it('should be use work correctly', async () => {
    const closeFn = jest.fn()
    const confirmFn = jest.fn()
    Modal({
      title: 'test',
      content: 'test message',
      close: closeFn,
      confirm: confirmFn
    })
    await later()
    const btns = document.querySelectorAll('.fect-modal__button')
    expect(document.querySelector('.fect-modal__wrapper')).toBeTruthy()
    await trigger('click', btns[0])
    expect(closeFn).toHaveBeenCalled()
    expect(closeFn).toHaveBeenCalled()
    Modal({
      title: 'test',
      content: 'test message',
      close: closeFn,
      confirm: confirmFn
    })
    await trigger('click', btns[1])
    expect(confirmFn).toHaveBeenCalled()
  })

  it('should register component in to app', async () => {
    const app = createApp(document.body)
    app.use(Modal)
    expect(app.component(ModalComponent.name)).toBeTruthy()
  })
})

/**
 * @description 加载所有 Plugins
 * @param  {ReturnType<typeofcreateApp>} app 整个应用的实例
 */
export function loadAllPlugins(app: ReturnType<typeof createApp>) {
  const files = require.context('.', true, /\.ts$/)
  files.keys().forEach(key => {
    if (typeof files(key).default === 'function') {
      if (key !== './index.ts') files(key).default(app)
    }
  })
}

vm = createApp({
  data() {
    return {
      totalChapterNumber: 0,
      finishedChapterNumber: 0,
    };
  },
  computed: {
    chapterPercent() {
      if (this.totalChapterNumber !== 0 && this.finishedChapterNumber !== 0) {
        return (this.finishedChapterNumber / this.totalChapterNumber) * 100;
      } else {
        return 0;
      }
    },
    chapterProgressSeen() {
      return this.chapterPercent !== 0;
    },
    ntProgressSeen() {
      return !!(this.chapterProgressSeen || this.zipProgressSeen);
    },
    chapterProgressTitle() {
      return `章节：${this.finishedChapterNumber}/${this.totalChapterNumber}`;
    },
  },
  methods: {
    reset() {
      this.totalChapterNumber = 0;
      this.finishedChapterNumber = 0;
    },
  },
  template: progressHtml,
}).mount(el)

// import Gantt from "../dist/jz-gantt.es.js";
// import "../dist/index.css";

createApp(App).use(Gantt).mount('#app');

app = createApp(App)

app = createApp(App)

createApp(App).use(i18n).mount('#app')

createApp(App).use(router).mount('#app')

App = createApp({
  onShow(options) {},
  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
})

app = createApp(App)

createApp(App).use(store, key).use(router).use(vuetify).use(i18n).mount("#app");

app = createApp(Dev)

app = createApp(App)

app = createApp(App)

createApp(App).use(router).mount('#app')

app = createApp({
    name: 'UplotVueExample',
    components: {uplotvue: UplotVue},
    // @ts-ignore
    data() {
        return {
            options: {
                title: 'Chart', width: 400, height: 300,
                series: [{
                    label: 'Date'
                }, {
                    label: '',
                    points: {show: false},
                    stroke: 'blue',
                    fill: 'blue'
                }],
                plugins: [dummyPlugin()],
                scales: {x: {time: false}}
            },
            target: null as unknown as HTMLElement
        };
    },
    beforeMount() {
        // Initialize data inside mounted hook, to prevent Vue from adding watchers, otherwise performance becomes unbearable
        this.data = [[...new Array(100000)].map((_, i) => i), [...new Array(100000)].map((_, i) => i % 1000)];
    },
    mounted() {
        this.target = this.$refs.root as HTMLElement;
        setInterval(() => {
            const options = {
                ...this.options,
                title: (this.$refs.root as HTMLElement).id ? 'Rendered with template' : 'Rendered with function'
            };
            const data: uPlot.AlignedData = [
                [...this.data[0], this.data[0].length],
                [...this.data[1], this.data[0].length % 1000]
            ];
            this.data = data;
            // Since we disabled reactivity for data above
            this.$forceUpdate();
            this.options = options;
        }, 100);
    },
    render(): VNode {
        // @ts-ignore
        return (<div ref='root'>
            <UplotVue
                key="render-key"
                // @ts-ignore
                options={this.options}
                data={this.data}
                // Uncomment the line below to use predefined target
                // target={this.target}
                onDelete={(/* chart: uPlot */) => console.log('Deleted from render function')}
                onCreate={(/* chart: uPlot */) => console.log('Created from render function')}
            />
        </div>);
    }
})

app = createApp(App)

app = createApp(App)

function render(props: any) {
  const { container } = props;
  root = createApp(app)
  const c = container
    ? container.querySelector("#app")
    : document.getElementById("app")
  root.mount(c)
}

app = createApp(App)