CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue-types

Prop type definitions for Vue.js components with runtime validation and TypeScript support

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

Vue Types

Vue Types provides a comprehensive collection of configurable prop type definitions for Vue.js components, inspired by React's prop-types. It offers type-safe prop validation utilities that help developers define and validate component props with runtime checks and TypeScript support.

Package Information

  • Package Name: vue-types
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install vue-types
  • Peer Dependency: Vue 3.x (optional)

Core Imports

import VueTypes from "vue-types";

For named imports:

import { string, number, bool, array, object, shape, oneOf } from "vue-types";

For CommonJS:

const VueTypes = require("vue-types");
const { string, number, bool } = require("vue-types");

For production builds (shim version):

import VueTypes from "vue-types/shim";

Basic Usage

import VueTypes from "vue-types";

// Define component props with validation
export default {
  props: {
    // Basic types with sensible defaults
    title: VueTypes.string.isRequired,
    count: VueTypes.number.def(0),
    isActive: VueTypes.bool.def(false),
    
    // Complex validation
    items: VueTypes.arrayOf(VueTypes.string).def(() => []),
    user: VueTypes.shape({
      name: VueTypes.string.isRequired,
      age: VueTypes.number,
      email: VueTypes.string
    }).isRequired,
    
    // Enum-style validation
    status: VueTypes.oneOf(['pending', 'success', 'error']).def('pending')
  }
};

Architecture

Vue Types is built around several key components:

  • Core Class: VueTypes class providing all validators as static properties and methods
  • Type Definitions: Comprehensive TypeScript interfaces for all prop types
  • Validation System: Runtime prop validation with detailed error messages
  • Default Values: Sensible default system for common use cases
  • Production Shim: Lightweight version for production builds
  • Configuration: Global settings for warning behavior and logging

Capabilities

Native Type Validators

Basic prop validators for JavaScript native types with built-in validation and default value support.

// Basic type validators
static get any(): VueTypeValidableDef<any>;
static get func(): VueTypeValidableDef<Function>;
static get bool(): VueTypeValidableDef<boolean>;
static get string(): VueTypeValidableDef<string>;
static get number(): VueTypeValidableDef<number>;
static get array(): VueTypeValidableDef<any[]>;
static get object(): VueTypeValidableDef<Record<string, any>>;
static get integer(): VueTypeDef<number>;
static get symbol(): VueTypeDef<symbol>;
static get nullable(): PropOptions<null>;

Native Type Validators

Complex Validators

Advanced validators for custom types, enums, collections, and object structures.

// Custom validation
static custom<T>(validatorFn: ValidatorFunction<T>, warnMsg?: string): VueTypeDef<T>;

// Enum-style validation
static oneOf<T extends readonly any[]>(arr: T): VueTypeDef<T[number]>;
static oneOfType<T extends VueProp<any>[]>(arr: T): VueTypeDef<InferType<T[number]>>;

// Collection validation  
static arrayOf<T extends VueProp<any>>(type: T): VueTypeDef<InferType<T>[]>;
static objectOf<T extends VueProp<any>>(type: T): VueTypeDef<Record<string, InferType<T>>>;

// Instance validation
static instanceOf<C extends Constructor>(constructor: C): VueTypeDef<InstanceType<C>>;

// Object structure validation
static shape<T extends object>(obj: ShapeObject<T>): VueTypeShape<T>;

Complex Validators

Type Definition System

Core utilities for creating, extending, and managing prop type definitions.

// Create type definitions
function toType<T>(name: string, obj: PropOptions<T>): VueTypeDef<T>;
function toValidableType<T>(name: string, obj: PropOptions<T>): VueTypeValidableDef<T>;

// Extend existing types
function fromType<T extends VueTypeDef<any>>(
  name: string, 
  source: T, 
  props?: PropOptions<InferType<T>>
): T;

// Validate values
function validateType<T, U>(type: T, value: U, silent?: boolean): string | boolean;

// Create custom VueTypes classes
function createTypes(defs?: Partial<VueTypesDefaults>): VueTypesInterface;

Type Definition System

Configuration & Utilities

Configuration options and utility functions for customizing behavior and validation.

// Global configuration
interface VueTypesConfig {
  silent: boolean;
  logLevel: 'log' | 'warn' | 'error' | 'debug' | 'info';
}

const config: VueTypesConfig;

// Utility methods
static utils: {
  validate<T, U>(value: T, type: U): boolean;
  toType<T>(
    name: string,
    obj: PropOptions<T>,
    validable?: boolean
  ): VueTypeDef<T> | VueTypeValidableDef<T>;
};

Configuration & Utilities

Type Definitions

// Core type definition interfaces  
interface VueTypeDef<T = unknown> extends VueTypeBaseDef<T> {}

interface VueTypeValidableDef<T = unknown> extends VueTypeBaseDef<T> {
  readonly validate: (fn: ValidatorFunction<T>) => this & { validator: ValidatorFunction<T> };
}

interface VueTypeBaseDef<T = unknown> extends PropOptions<T> {
  _vueTypes_name: string;
  readonly def: (def?: DefaultType<T>) => this & { default: DefaultType<T> };
  readonly isRequired: this & { required: true };
}

// Shape validator types
interface VueTypeShape<T> extends VueTypeBaseDef<T> {
  readonly loose: VueTypeLooseShape<T>;
}

interface VueTypeLooseShape<T> extends VueTypeBaseDef<T> {
  readonly loose: VueTypeLooseShape<T>;
  readonly _vueTypes_isLoose: true;
}

// Utility types
type ValidatorFunction<T> = (value: T, props?: Record<string, unknown>) => boolean;
type DefaultType<T> = T extends NativeType ? T : DefaultFactory<T>;
type DefaultFactory<T> = (() => T) | T;

Error Handling

Vue Types includes comprehensive error handling and warning systems:

  • Runtime Validation: All validators perform runtime type checking with detailed error messages
  • Silent Mode: Global configuration to suppress validation warnings
  • Custom Messages: Support for custom error messages in validators
  • Development Mode: Full validation in development, optional lightweight mode for production
  • TypeScript Integration: Compile-time type checking alongside runtime validation
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vue-types@6.0.x
Publish Source
CLI
Badge
tessl/npm-vue-types badge