feat: Further improve typing

Author: Jan Ackermann

package-lock.json

@@ -13,7 +13,7 @@
     }
   },
   "scripts": {
-    "build": "rimraf dist && rollup -c",
+    "build": "rimraf dist && rollup -c && tsc-alias",
     "build:watch": "rollup -cw",
     "test": "cross-env BABEL_ENV=test vitest run --coverage",
     "format": "prettier --write .",
@@ -68,6 +68,7 @@
     "rimraf": "^6.0.1",
     "rollup": "^4.20.0",
     "single-spa": "^6.0.1",
+    "tsc-alias": "^1.8.10",
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.0.1",
     "vitest": "^2.0.5",

package.json

@@ -1,5 +1,5 @@
 import type { Component, ComponentOptions, h as H } from "vue-demi";
-import type {
+import {
   SingleSpaVueOpts,
   SingleSpaOptsVue2,
   SingleSpaOptsVue3,
@@ -10,11 +10,12 @@ import type {
   InstanceVue2,
   InstanceVue3,
   VueLifecycles,
+  Props,
 } from "@/types";
-import type { AppProps, ParcelProps } from "single-spa";
+import { AppProps } from "single-spa";
 
 export default function singleSpaVue<ExtraProps>(
-  opts: SingleSpaVueOpts,
+  opts: SingleSpaVueOpts<ExtraProps>,
 ): VueLifecycles<ExtraProps> {
   const isVue2 = (opts: SingleSpaVueOpts): opts is SingleSpaOptsVue2 => {
     return (opts as SingleSpaOptsVue2).Vue !== undefined;
@@ -53,8 +54,8 @@ export default function singleSpaVue<ExtraProps>(
     opts.createApp || (opts.Vue && opts.Vue.createApp);
 
   const resolveAppOptions = async (
-    opts: SingleSpaVueOpts,
-    props: ExtraProps & AppProps,
+    opts: SingleSpaVueOpts<ExtraProps & Props>,
+    props: ExtraProps & Props,
   ): Promise<AppOptionsObject> => {
     if (typeof opts.appOptions === "function") {
       return (opts.appOptions as AppOptionsFunction)(opts, props);
@@ -64,9 +65,9 @@ export default function singleSpaVue<ExtraProps>(
   };
 
   const mount = async (
-    opts: SingleSpaVueOpts,
+    opts: SingleSpaVueOpts<ExtraProps & Props>,
     mountedInstances: Record<string, Instance>,
-    props: ExtraProps & AppProps & ParcelProps,
+    props: ExtraProps & Props,
   ) => {
     await Promise.resolve();
     const instance: Instance = {};
@@ -172,7 +173,7 @@ export default function singleSpaVue<ExtraProps>(
     }
   };
 
-  const bootstrap = async (opts: SingleSpaVueOpts) => {
+  const bootstrap = async (opts: SingleSpaVueOpts<ExtraProps & Props>) => {
     if (opts.loadRootComponent) {
       const root = await opts.loadRootComponent();
       return (opts.rootComponent = root);
@@ -182,7 +183,7 @@ export default function singleSpaVue<ExtraProps>(
   };
 
   const update = async (
-    opts: SingleSpaVueOpts,
+    opts: SingleSpaVueOpts<ExtraProps & Props>,
     mountedInstances: Record<string, Instance>,
     props: ExtraProps & AppProps,
   ) => {
@@ -208,7 +209,7 @@ export default function singleSpaVue<ExtraProps>(
   };
 
   const unmount = async (
-    opts: SingleSpaVueOpts,
+    opts: SingleSpaVueOpts<ExtraProps & Props>,
     mountedInstances: Record<string, Instance>,
     props: ExtraProps & AppProps,
   ) => {

src/single-spa-vue.ts

@@ -6,7 +6,7 @@ import type {
   CreateAppFunction,
   Vue2,
 } from "vue-demi";
-import { AppProps, LifeCycleFn, ParcelProps } from "single-spa";
+import { AppProps, CustomProps, LifeCycleFn, ParcelProps } from "single-spa";
 
 export type Vue = typeof Vue2;
 
@@ -29,21 +29,25 @@ export interface BaseSingleSpaVueOptions {
   rootComponent?: Component;
 }
 
-export type SingleSpaOptsVue2 = BaseSingleSpaVueOptions & {
-  vueVersion: 2;
-  appOptions: AppOptions;
-  Vue: Vue;
-  handleInstance?(app: Vue, props: Props): Promise<void> | void;
-};
-
-export type SingleSpaOptsVue3 = BaseSingleSpaVueOptions & {
-  vueVersion: 3;
-  appOptions: AppOptions;
-  createApp: CreateAppFunction<Element>;
-  handleInstance?(app: App, props: Props): Promise<void> | void;
-};
-
-export type SingleSpaVueOpts = SingleSpaOptsVue2 | SingleSpaOptsVue3;
+export type SingleSpaOptsVue2<ExtraProps = CustomProps> =
+  BaseSingleSpaVueOptions & {
+    vueVersion: 2;
+    appOptions: AppOptions;
+    Vue: Vue;
+    handleInstance?(app: Vue, props: Props & ExtraProps): Promise<void> | void;
+  };
+
+export type SingleSpaOptsVue3<ExtraProps = CustomProps> =
+  BaseSingleSpaVueOptions & {
+    vueVersion: 3;
+    appOptions: AppOptions;
+    createApp: CreateAppFunction<Element>;
+    handleInstance?(app: App, props: Props & ExtraProps): Promise<void> | void;
+  };
+
+export type SingleSpaVueOpts<ExtraProps = CustomProps> =
+  | SingleSpaOptsVue2<ExtraProps>
+  | SingleSpaOptsVue3<ExtraProps>;
 
 export interface BaseInstance {
   domEl?: HTMLElement;

src/types/index.ts

@@ -14,7 +14,7 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "skipLibCheck": true,
-    "declarationDir": "dist",
+    "outDir": "dist",
     "types": ["vite/client", "vitest/globals"],
     "paths": {
       "@/*": ["./src/*"]