Function: propsAndEmitsFactory()

function propsAndEmitsFactory<P, E>(
  props: P,
  emits: E,
  source: string,
): {
  emits: EmitFunctions<E>;
  makeProps: PropFactory<{
    [KeyType in string | number | symbol]: ({
      [Key in string | number | symbol as Key extends keyof PickIndexSignature<
        EmitHandlerProps<E>
      >
        ? never
        : Key]: PickIndexSignature<P>[Key];
    } & PickIndexSignature<EmitHandlerProps<E>> & {
        [Key in
          | string
          | number
          | symbol as Key extends keyof OmitIndexSignature<EmitHandlerProps<E>>
          ? never
          : Key]: OmitIndexSignature<P>[Key];
      } & OmitIndexSignature<EmitHandlerProps<E>>)[KeyType];
  }>;
};

Factory function that creates both props and emits for Vue components with automatic emit handler prop generation.

This utility automatically generates corresponding prop handlers for each emit event, supporting both camelCase and kebab-case naming conventions to maximize template syntax flexibility. For each emit, it creates props that allow users to bind handlers using either :onEventName or @event-name syntax.

The returned makeProps function includes full TypeScript support for both the original props and the automatically generated emit handler props, ensuring type safety throughout component development.

Type Parameters

Type Parameter	Description
P extends ComponentObjectPropsOptions<Data>	The type of the component props object
E extends EmitValidators	The type of the emit validators object

Parameters

Parameter	Type	Description
props	P	Component props object that will be extended with emit handler props
emits	E	Object containing emit validator functions
source	string	Source identifier for the props factory (used for debugging/tooling)

Returns

{
  emits: EmitFunctions<E>;
  makeProps: PropFactory<{
    [KeyType in string | number | symbol]: ({
      [Key in string | number | symbol as Key extends keyof PickIndexSignature<
        EmitHandlerProps<E>
      >
        ? never
        : Key]: PickIndexSignature<P>[Key];
    } & PickIndexSignature<EmitHandlerProps<E>> & {
        [Key in
          | string
          | number
          | symbol as Key extends keyof OmitIndexSignature<EmitHandlerProps<E>>
          ? never
          : Key]: OmitIndexSignature<P>[Key];
      } & OmitIndexSignature<EmitHandlerProps<E>>)[KeyType];
  }>;
}

Object containing makeProps and emits functions

Name	Type
emits	EmitFunctions<E>
makeProps	PropFactory<{ [KeyType in string | number | symbol]: ({ [Key in string | number | symbol as Key extends keyof PickIndexSignature<EmitHandlerProps<E>> ? never : Key]: PickIndexSignature<P>[Key] } & PickIndexSignature<EmitHandlerProps<E>> & { [Key in string | number | symbol as Key extends keyof OmitIndexSignature<EmitHandlerProps<E>> ? never : Key]: OmitIndexSignature<P>[Key] } & OmitIndexSignature<EmitHandlerProps<E>>)[KeyType] }>

Example

// Define your component props and emits
const componentProps = {
  value: String,
  disabled: Boolean,
};

const componentEmits = {
  "update:modelValue": (value: string) => typeof value === "string",
  "item:selected": (item: Item) => item && typeof item.id === "string",
};

// Create factories
const { makeProps, emits } = propsAndEmitsFactory(
  componentProps,
  componentEmits,
  "MyComponent",
);

// makeProps() returns props with full TypeScript intellisense for:
// - Original props: value, disabled
// - Generated emit handlers: onUpdate:modelValue, onUpdateModelValue, onItem:selected, onItemSelected
export default defineComponent({
  props: makeProps(),
  emits,
  setup(props, { emit }) {
    // All props are properly typed including emit handlers
    props.onUpdateModelValue?.(newValue);
    emit("update:modelValue", newValue);
  },
});

// Template supports both syntaxes:
// <MyComponent :onUpdate:modelValue="handler" />
// <MyComponent :onUpdate:model-value="handler" />
// <MyComponent :onItem:selected="handler" />
// <MyComponent :onItem:item-selected="handler" />