Что я делаю не так или почему в моей vue3 библиотеке компонентов я не вижу props при использовании компонентов?

Question

[proyavin]

При использовании компонентов из моей библиотеке в стороннем vue3 приложении, моя IDE (WebStorm) не подсказывает мне о наличии в нем props. VS Code вообще ругается на отсутствие d.ts в моих компонентах. Хотя файлы d.ts есть. Что я делаю не так? Если использовать стороннюю библиотеку, подсказки к props есть - на скринах. Спасибо

Листинги:

vite.config.ts

import path from "path";
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import { name } from "./package.json";

import externals from "rollup-plugin-node-externals";
import dts from "vite-plugin-dts";

export default defineConfig({
  plugins: [Vue(), externals(), dts()],
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name,
      formats: ["es", "umd", "cjs"],
      fileName: (format) => `${name}.${format}.js`,
    },
    rollupOptions: {
      external: ["vue", "element-plus"],
      output: {
        globals: {
          vue: "Vue",
        },
        assetFileNames: (assetInfo): string => {
          if (assetInfo.name === "style.css") {
            return `${name}.components.css`;
          }

          return assetInfo.name as string;
        },
        exports: "named",
      },
    },
  },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

src/index.ts

import type { App } from "vue";
import * as components from "./components";

function install(app: App) {
  for (const key in components) {
    app.component(key, components[key]);
  }
}

export default { install };

export * from "./components";

src/components/index.ts

import ComponentA from "./a/a.vue";
import ComponentB from "./b/b.vue";
import ComponentC from "./c/c.vue";

export { ComponentA, ComponentB, ComponentC };

Исходный код компонента А

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "ComponentA",
  props: {
    min: {
      required: false,
      type: Number,
      default: 0,
    },
    max: {
      required: false,
      type: Number,
      default: 1000,
    },
  },
  data() {
    return {
      value: ref([this.min, this.max]),
    };
  },
  methods: {
    onChange(e: any) {
      console.log(e);
    },
  },
});
</script>

Вот мой результат

Ожидаемый результат на примере сторонней библиотеке (IDE подсказывает мне о наличии у этого компонента props min и max)

Comments

[modelair]

покажи d.ts

[modelair]

и package.json

[proyavin]

modelair,

declare const _sfc_main: import("vue").DefineComponent<{
    min: {
        required: false;
        type: NumberConstructor;
        default: number;
    };
    max: {
        required: false;
        type: NumberConstructor;
        default: number;
    };
}, unknown, {
    value: import("vue").Ref<number[]>;
}, {}, {
    onChange(e: any): void;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    min: {
        required: false;
        type: NumberConstructor;
        default: number;
    };
    max: {
        required: false;
        type: NumberConstructor;
        default: number;
    };
}>>, {
    min: number;
    max: number;
}>;
export default _sfc_main;

package.json

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "prepare": "npm run build:lib",
    "dev": "vite",
    "build:app": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "build:style": "npm run build:scss",
    "build:scss": "sass --load-path=/node_modules/ --no-charset src/assets/styles/main.scss | node build/print-banner.js > dist/lib.base.css && cleancss -o dist/lib.base.min.css dist/lib.base.css",
    "build:types": "vue-tsc --project tsconfig.build-types.json --declaration --emitDeclarationOnly --outDir dist/types",
    "build:lib": "npm run build-only && npm run build:types && npm run build:style",
    "type-check": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "import": "./dist/lib.es.js",
      "require": "./dist/lib.umd.js"
    },
    "./style.css": {
      "import": "./dist/lib.base.css",
      "require": "./dist/lib.base.css"
    },
    "./components.css": {
      "import": "./dist/lib.components.css",
      "require": "./dist/lib.components.css"
    }
  },
  "types": "dist/types/index.d.ts",
  "main": "dist/lib.umd.js",
  "module": "dist/lib.es.js",
  "dependencies": {
    "axios": "^1.3.3",
    "bootstrap": "^5.2.2",
    "element-plus": "2.2.32",
    "pinia": "^2.0.31",
    "rollup-plugin-node-externals": "^5.1.2",
    "vite-plugin-dts": "^2.1.0",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@babel/types": "^7.20.7",
    "@rushstack/eslint-patch": "^1.1.4",
    "@types/node": "^18.11.18",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/tsconfig": "^0.1.3",
    "clean-css-cli": "^5.6.1",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.3.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.7.1",
    "sass": "^1.57.1",
    "typescript": "~4.7.4",
    "vite": "^4.0.4",
    "vue": "^3.2.45",
    "vue-tsc": "^1.0.24"
  }
}

[modelair]

а при импорте в стороннем приложении не ругается типа Cannot resolve definitions for module 'test' ?
давай в догонку тогда еще index.d.ts

[proyavin]

Не ругается, и компоненты работают как надо...

import type { App } from "vue";
declare function install(app: App): void;
declare const _default: {
    install: typeof install;
};
export default _default;
export * from "./components";

Answer 1

[modelair]

код верный.
данные фичи корректно работают начиная с webstorm 2022.3.
в целом эта система требует внимательной настройки
package.json, опции main/module/exports и types,
и tsconfig.json

Comments

[proyavin]

Спасибо!