vue#App TypeScript Examples

install = (app: App) => {
  components.map((component: any) => {
    if (component.install) {
      app.use(component)
    } else if (component.name) {
      app.component(component.name, component)
    }
  })
}

MasonryWall: InstallableComponent =
  /*#__PURE__*/ ((): InstallableComponent => {
    const installable = component as unknown as InstallableComponent

    installable.install = (app: App) => {
      app.component('MasonryWall', installable)
    }

    return installable
  })()

lazyPlugin = {
  install (app: App, options: LazyOptions) {
    const lazy = new Lazy(options)

    app.directive('lazy', {
      mounted: lazy.add.bind(lazy),
      updated: lazy.update.bind(lazy),
      unmounted: lazy.update.bind(lazy)
    })
  }
}

Plugin = (
  app: App | VueConstructor,
  directives: string | string[] = "variantwind"
) => {
  if (!isVue2(app)) {
    if (Array.isArray(directives)) {
      directives.map((name) => {
        app.directive(name, directive);
        app.config.globalProperties["$" + name] = variantwind;
      });
    } else {
      app.directive(directives, directive);
      app.config.globalProperties["$" + directives] = variantwind;
    }
  } else {
    if (Array.isArray(directives)) {
      directives.map((name) => {
        app.directive(name, directive2);
        app.prototype["$" + name] = variantwind;
      });
    } else {
      app.directive(directives, directive2);
      app.prototype["$" + directives] = variantwind;
    }
  }
}

VGridPlugin = {
  install(app: App) {
    if (installed) {
      return;
    }
    installed = true;
    app.component('vue-data-grid', VGrid);
  }
}

getHooks = (app: App | 'vue2' | 'vue3') => {
  let vue3

  if (app === 'vue2') vue3 = false
  else if (app === 'vue3') vue3 = true
  else vue3 = isVue3(app)

  return vue3
    ? {
        mounted: 'mounted',
        updated: 'updated'
      }
    : {
        mounted: 'inserted',
        updated: 'componentUpdated'
      }
}

describe('release global scope', () => {
  test('call dispose', () => {
    let i18n: I18n | undefined
    let error = ''
    try {
      i18n = createI18n({})
    } catch (e) {
      error = e.message
    } finally {
      i18n!.dispose()
    }
    expect(error).not.toEqual(errorMessages[I18nErrorCodes.UNEXPECTED_ERROR])
  })

  test('unmount', async () => {
    let app: App | undefined
    let error = ''
    try {
      const i18n = createI18n({
        legacy: false,
        locale: 'ja',
        messages: {}
      })
      const wrapper = await mount({ template: '<p>unmound</p>' }, i18n)
      app = wrapper.app
    } catch (e) {
      error = e.message
    } finally {
      app!.unmount()
    }
    expect(error).not.toEqual(errorMessages[I18nErrorCodes.UNEXPECTED_ERROR])
  })
})

export function createModalPlugin(): ModalController {
  const modals = ref<IModalItem[]>([])
  function create(component: Component) {
    const id = uuid()
    const item = {
      id,
      component: markRaw(component),
      close: () => {
        modals.value = modals.value.filter((item) => item.id !== id)
      },
    }
    modals.value.push(item)
    return item
  }
  return {
    modals,
    create,
    install(app: App) {
      const controller = this
      app.provide(key, controller)
    },
  }
}

/**
 * The Create a new instance of the FormKit plugin for Vue.
 * @param app - A Vue application
 * @param config - FormKit Vue plugin configuration options
 */
function createPlugin(
  app: App<any>,
  options: FormKitOptions & Record<string, any>
): FormKitVuePlugin {
  app
    .component(options.alias || 'FormKit', FormKit)
    .component(options.schemaAlias || 'FormKitSchema', FormKitSchema)
  return {
    get: getNode,
    setLocale: (locale: string) => {
      if (options.config?.rootConfig) {
        options.config.rootConfig.locale = locale
      }
    },
    clearErrors,
    setErrors,
    submit: submitForm,
    reset,
  }
}

export function setup (app: App): SsrHandle {
  const styles: string[] = []
  const ssrContext: CssrSsrContext = {
    styles,
    ids: new Set<string>()
  }
  app.provide(ssrContextKey, ssrContext)
  return {
    collect () {
      const res = styles.join('\n')
      styles.length = 0
      return res
    }
  }
}

withInstall = <T>(component: T, alias?: string) => {
  const comp = component as any;
  comp.install = (app: App) => {
    app.component(comp.name || comp.displayName, component);
    if (alias) {
      app.config.globalProperties[alias] = component;
    }
  };
  return component as T & Plugin;
}

createSvgIcon = (compName: string, className: string, svgSource: string) => {
  const Icon = defineComponent({
    name: compName,
    props: { spin: Boolean },
    setup(props, { attrs }) {
      injectCss(injectCssId, iconStyles, true)

      return () =>
        createVNode('i', {
          ...attrs,
          class: {
            'el-icon': true,
            [`el-icon-${className}`]: true,
            'el-icon-spin': props.spin
          },
          innerHTML: svgSource
        })
    }
  })

  Icon.install = (app: App): void => {
    app.component(compName, Icon)
  }
  return Icon
}

#vm?: App;

install = (app: App) => {
  // if (install.installed) return;

  app.component(Variables.name.root, JGantt);
  app.component(Variables.name.column, JGanttColumn);
  app.component(Variables.name.slider, JGanttSlider);
}

export function createGettext(options: Partial<GetTextOptions> = {}) {
  Object.keys(options).forEach((key) => {
    if (Object.keys(defaultOptions).indexOf(key) === -1) {
      throw new Error(`${key} is an invalid option for the translate plugin.`);
    }
  });

  const mergedOptions = {
    ...defaultOptions,
    ...options,
  };

  const translations = ref(normalizeTranslations(mergedOptions.translations));

  const gettext: Language = reactive({
    available: mergedOptions.availableLanguages,
    muted: mergedOptions.mutedLanguages,
    silent: mergedOptions.silent,
    translations: computed({
      get: () => {
        return translations.value;
      },
      set: (val: GetTextOptions["translations"]) => {
        translations.value = normalizeTranslations(val);
      },
    }),
    current: mergedOptions.defaultLanguage,
    install(app: App) {
      // TODO: is this needed?
      (app as any)[GetTextSymbol] = gettext;
      app.provide(GetTextSymbol, gettext);

      if (mergedOptions.setGlobalProperties) {
        const globalProperties = app.config.globalProperties;
        globalProperties.$gettext = gettext.$gettext;
        globalProperties.$pgettext = gettext.$pgettext;
        globalProperties.$ngettext = gettext.$ngettext;
        globalProperties.$npgettext = gettext.$npgettext;
        globalProperties.$gettextInterpolate = gettext.interpolate;
        globalProperties.$language = gettext;
      }

      if (mergedOptions.provideDirective) {
        app.directive("translate", Directive(gettext));
      }
      if (mergedOptions.provideComponent) {
        // eslint-disable-next-line vue/multi-word-component-names, vue/component-definition-name-casing
        app.component("translate", Component);
      }
    },
  }) as unknown as Language;

  const translate = translateRaw(gettext);
  const interpolate = interpolateRaw(gettext);
  gettext.$gettext = translate.gettext.bind(translate);
  gettext.$pgettext = translate.pgettext.bind(translate);
  gettext.$ngettext = translate.ngettext.bind(translate);
  gettext.$npgettext = translate.npgettext.bind(translate);
  gettext.interpolate = interpolate.bind(interpolate);

  gettext.directive = Directive(gettext);
  gettext.component = Component;

  return gettext;
}

createDirective = (
  globalUserOptions: Partial<IVWaveDirectiveOptions> = {},
  app: App | 'vue2' | 'vue3' = 'vue3'
): DirectiveList => {
  const globalOptions = { ...DEFAULT_PLUGIN_OPTIONS, ...globalUserOptions }

  const hooks = getHooks(app)

  const handleTrigger = (event: PointerEvent) => {
    const trigger = (event.currentTarget as HTMLElement).dataset.vWaveTrigger

    const associatedElements = document.querySelectorAll(
      `[data-v-wave-boundary="${trigger}"]`
    ) as NodeListOf<HTMLElement>

    associatedElements.forEach((el) => wave(event, el, { ...globalOptions, ...optionMap.get(el) }))
  }

  const waveDirective: Directive = {
    [hooks.mounted](el: HTMLElement, { value = {} }: DirectiveBinding<Partial<IVWaveDirectiveOptions> | false>) {
      optionMap.set(el, value)

      markWaveBoundary(el, (value && value.trigger) ?? globalOptions.trigger)

      el.addEventListener('pointerdown', (event) => {
        if (optionMap.get(el) === false) return

        const options = { ...globalOptions, ...optionMap.get(el)! }

        if (options.trigger === false) return wave(event, el, options)

        if (triggerIsID(options.trigger)) return
        const trigger = el.querySelector('[data-v-wave-trigger="true"]')
        if (!trigger && options.trigger === true) return
        if (trigger && !event.composedPath().includes(trigger)) return

        wave(event, el, options)
      })
    },
    [hooks.updated](el: HTMLElement, { value = {} }: DirectiveBinding<Partial<IVWaveDirectiveOptions> | false>) {
      optionMap.set(el, value)
      markWaveBoundary(el, (value && value.trigger) ?? globalOptions.trigger)
    }
  }

  const triggerDirective: Directive = {
    [hooks.mounted](el: HTMLElement, { arg: trigger = 'true' }: DirectiveBinding) {
      el.dataset.vWaveTrigger = trigger

      if (trigger !== 'true') el.addEventListener('pointerdown', handleTrigger)
    },

    [hooks.updated](el: HTMLElement, { arg: trigger = 'true' }: DirectiveBinding) {
      el.dataset.vWaveTrigger = trigger

      if (trigger === 'true') el.removeEventListener('pointerdown', handleTrigger)
      else el.addEventListener('pointerdown', handleTrigger)
    }
  }

  return {
    wave: waveDirective,
    vWave: waveDirective,
    waveTrigger: triggerDirective,
    vWaveTrigger: triggerDirective
  }
}

export function setupRoleDirective(app: App) {
  app.directive('role', authDirective);
}

isVue3 = (app: Vue2 | App): app is App => 'config' in app && 'globalProperties' in app.config

Toolbar.install = (app: App) => {
	app.component(Toolbar.name, Toolbar);
};

EConfigProvider.install = (app: App): void => {
  app.component(EConfigProvider.name, EConfigProvider)
}

private vm?: App;

export function setupPermissionDirective(app: App) {
  app.directive('auth', authDirective);
}

export default function (app: App) {
    app.config.globalProperties.$nextIndex = nextIndex.bind(app)
    app.config.globalProperties.$axios = axios
    // @ts-expect-error
    app.config.globalProperties.$delay = new Delay()
    // @ts-expect-error
    app.config.globalProperties.$box = (...args) => new Box(app, ...args)
}

isVue2 = (app: App | VueConstructor): app is VueConstructor => 
  !!(app.version && app.version[0] === "2")

export function setupGlobDirectives(app: App) {
  setupPermissionDirective(app);
  setupRoleDirective(app);
}

register = (app: App<Element>): void => {
  for (const key in components) {
    const comp = components[key].default
    app.component(comp.name, comp)
  }
}

root: App

export function createApp(params: any): App {
  return _createApp(params).use(TroisJSVuePlugin)
}

Button.install = (app: App) => {
  app.component(Button.name, Button)
}