vue-component-type-helpers 3.2.3 → 3.2.5

package/README.md

@@ -1,26 +1,123 @@
 # vue-component-type-helpers
 
-Some very simple type helpers used behind `vue-component-meta` for extract component props, slots, emit, exposed types.
+<p>
+  <a href="https://www.npmjs.com/package/vue-component-type-helpers"><img src="https://img.shields.io/npm/v/vue-component-type-helpers.svg?labelColor=18181B&color=1584FC" alt="NPM version"></a>
+  <a href="https://github.com/vuejs/language-tools/blob/master/LICENSE"><img src="https://img.shields.io/github/license/vuejs/language-tools.svg?labelColor=18181B&color=1584FC" alt="License"></a>
+</p>
 
-## Usage
+Helper utilities for extracting types such as props, slots, attrs, emit, and exposed from Vue component types. No runtime dependencies; provides TypeScript type definitions only.
 
-```vue
-<template>
-	<slot name="header" :num="123" />
-	<slot name="footer" str="abc" />
-</template>
+## Installation
+
+```bash
+npm install vue-component-type-helpers
+```
+
+## Type Helpers
+
+### `ComponentProps<T>`
+
+Extracts the props type of a component.
+
+```typescript
+import type { ComponentProps } from 'vue-component-type-helpers';
+import MyComponent from './MyComponent.vue';
+
+type Props = ComponentProps<typeof MyComponent>;
+```
+
+### `ComponentSlots<T>`
+
+Extracts the slots type of a component.
+
+```typescript
+import type { ComponentSlots } from 'vue-component-type-helpers';
+import MyComponent from './MyComponent.vue';
+
+type Slots = ComponentSlots<typeof MyComponent>;
+```
+
+### `ComponentAttrs<T>`
+
+Extracts the attrs type of a component.
+
+```typescript
+import type { ComponentAttrs } from 'vue-component-type-helpers';
+import MyComponent from './MyComponent.vue';
+
+type Attrs = ComponentAttrs<typeof MyComponent>;
+```
+
+### `ComponentEmit<T>`
+
+Extracts the emit function type of a component.
 
-<script lang="ts" setup>
+```typescript
+import type { ComponentEmit } from 'vue-component-type-helpers';
+import MyComponent from './MyComponent.vue';
+
+type Emit = ComponentEmit<typeof MyComponent>;
+```
+
+### `ComponentExposed<T>`
+
+Extracts the instance type exposed via `defineExpose`.
+
+```typescript
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import MyComponent from './MyComponent.vue';
+
+type Exposed = ComponentExposed<typeof MyComponent>;
+```
+
+## Example
+
+Given the following component:
+
+```vue
+<!-- MyComponent.vue -->
+<script setup lang="ts">
 defineProps<{
-	msg: string
-}>()
+  title: string;
+  count?: number;
+}>();
+
+defineEmits<{
+  update: [value: string];
+  close: [];
+}>();
+
+defineSlots<{
+  default(props: { item: string }): any;
+  header(): any;
+}>();
+
+const internalState = ref(0);
+defineExpose({
+  reset: () => { internalState.value = 0; },
+});
 </script>
 ```
 
-```ts
-import HelloWorld from './HelloWorld.vue'
-import type { ComponentProps, ComponentSlots } from 'vue-component-type-helpers'
+Using type helpers:
+
+```typescript
+import type { ComponentProps, ComponentSlots, ComponentEmit, ComponentExposed } from 'vue-component-type-helpers';
+import MyComponent from './MyComponent.vue';
 
-type Props = ComponentProps<typeof HelloWorld> // { msg: string }
-type Slots = ComponentSlots<typeof HelloWorld> // { header?: (props: { num: number; }) => any; footer?: (props: { str: string; }) => any; }
+type Props = ComponentProps<typeof MyComponent>;
+// { title: string; count?: number }
+
+type Slots = ComponentSlots<typeof MyComponent>;
+// { default(props: { item: string }): any; header(): any }
+
+type Emit = ComponentEmit<typeof MyComponent>;
+// { (e: 'update', value: string): void; (e: 'close'): void }
+
+type Exposed = ComponentExposed<typeof MyComponent>;
+// { reset: () => void }
 ```
+
+## License
+
+[MIT](https://github.com/vuejs/language-tools/blob/master/LICENSE) License

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-component-type-helpers",
-	"version": "3.2.3",
+	"version": "3.2.5",
 	"license": "MIT",
 	"files": [
 		"**/*.js",
@@ -12,5 +12,5 @@
 		"url": "https://github.com/vuejs/language-tools.git",
 		"directory": "packages/component-type-helpers"
 	},
-	"gitHead": "efc6882ab62a518b41ab5c8dc1d762c41c862ebc"
+	"gitHead": "ee5041d27940cf6f9a5150635d3b13140a9dff54"
 }