CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue-facing-decorator

Vue typescript class and decorator based component system with support for ES class inheritance and Vue 3 composition API integration.

—

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 Facing Decorator

Vue Facing Decorator is a comprehensive Vue 3 class-based component system with TypeScript decorators, designed to replicate the functionality of vue-class-component and vue-property-decorator for Vue 3. It supports both stage 2 and stage 3 decorators, offers ES class inheritance with Vue extends and mixins, and transforms ES classes to Vue Option API according to specifications.

Package Information

  • Package Name: vue-facing-decorator
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install vue-facing-decorator
  • Peer Dependencies: vue@^3.0.0
  • Dependencies: facing-metadata@^2.0.0

Core Imports

import { Component, Setup, Ref, Watch, Prop, Emit, VModel } from "vue-facing-decorator";

Additional imports:

import { Provide, Inject, Vanilla, Hook, createDecorator, TSX } from "vue-facing-decorator";

Base classes and utilities:

import { ComponentBase, Base, mixins, toNative } from "vue-facing-decorator";

For CommonJS:

const { Component, Setup, Ref, Watch, Prop, Emit, VModel } = require("vue-facing-decorator");

Basic Usage

import { Component, Setup, Ref, Watch, Prop, Emit } from "vue-facing-decorator";
import { ref } from "vue";

@Component
class MyComponent {
  // Props with validation
  @Prop({ type: String, required: true })
  title!: string;

  @Prop({ type: Number, default: 0 })
  count!: number;

  // Reactive data using setup
  @Setup(() => ref("Hello World"))
  message!: string;

  // Template refs
  @Ref()
  inputElement!: HTMLInputElement;

  // Watchers
  @Watch("count")
  onCountChange(newVal: number, oldVal: number) {
    console.log(`Count changed from ${oldVal} to ${newVal}`);
  }

  // Event emitters
  @Emit("update")
  emitUpdate() {
    return { message: this.message, count: this.count };
  }

  // Lifecycle hooks
  mounted() {
    this.inputElement?.focus();
  }

  // Methods
  increment() {
    this.count++;
    this.emitUpdate();
  }
}

export default toNative(MyComponent);

Architecture

Vue Facing Decorator is built around several key components:

  • Class Decorators: @Component transforms ES classes into Vue components with proper option mapping
  • Property Decorators: Transform class properties into Vue's reactive system (props, refs, computed, etc.)
  • Method Decorators: Handle watchers, event emitters, and lifecycle hooks
  • Base Classes: Base/Vue provides inheritance foundation for component classes
  • Mixins System: mixins() function enables composition of multiple component classes
  • TypeScript Integration: Full type safety with stage 2 and stage 3 decorator support
  • Vue 3 Compatibility: Seamless integration with Vue 3's Composition API and Option API

Capabilities

Core Component System

Foundation classes and decorators for creating Vue components from TypeScript classes.

function Component(options?: ComponentOption): ClassDecorator;
const ComponentBase: (options?: ComponentOption) => ClassDecorator;
class Base { }
const Vue: typeof Base;
function toNative<T extends VueCons>(cons: T): T;

Core Component System

Property Decorators

Decorators for reactive properties, props, template references, and data binding.

function Setup(setupFunction: OptionSetupFunction): PropertyDecorator;
function Ref(key?: string): PropertyDecorator;
function Prop(config?: PropsConfig): PropertyDecorator;
function VModel(config?: VModelConfig): PropertyDecorator;
const Model: typeof VModel;
function Vanilla(): PropertyDecorator;

Property Decorators

Method and Lifecycle Decorators

Decorators for watchers, event emitters, dependency injection, and lifecycle hooks.

function Watch(key: string, options?: WatchOptions): MethodDecorator;
function Emit(eventName?: string): MethodDecorator;
function Provide(key?: string): PropertyDecorator;
function Inject(config?: InjectConfig): PropertyDecorator;
function Hook(): MethodDecorator;

Method and Lifecycle Decorators

Advanced Features

Mixins, custom decorators, TypeScript JSX support, and utility functions.

function mixins<T extends VueCons[]>(...conses: T): MixedClass<T>;
function createDecorator(creator: Creator, options?: { preserve?: boolean }): PropertyDecorator;
function TSX<Properties, Events, IT>(): <C extends VueCons>(cons: C) => VueCons<InstanceType<C>, MergeIdentityType<IT, InstanceType<C>[typeof IdentitySymbol]>>;

Advanced Features

Core Types

interface ComponentOption {
  name?: string;
  emits?: string[];
  provide?: Record<string, any> | Function;
  components?: Record<string, any>;
  directives?: Record<string, any>;
  inheritAttrs?: boolean;
  expose?: string[];
  render?: Function;
  template?: string;
  mixins?: any[];
  setup?: ComponentSetupFunction;
  methods?: MethodOptions;
  modifier?: (raw: any) => any;
  options?: ComponentCustomOptions & Record<string, any>;
}

interface PropsConfig {
  type?: any;
  required?: boolean;
  default?: any;
  validator?(value: any): boolean;
}

interface WatchOptions {
  flush?: 'post';
  deep?: boolean;
  immediate?: boolean;
}

interface InjectConfig {
  from?: string | symbol | Symbol | InjectionKey<any>;
  default?: any;
}

interface VModelConfig extends PropsConfig {
  name?: string;
}

type VueCons<RawInstance = Identity, IT = { props: {}, events: {} }> = {
  new(): ComponentPublicInstance & Identity<IT> & Omit<RawInstance, typeof IdentitySymbol>;
};

Lifecycle Hook Interfaces

interface HookBeforeCreate { beforeCreate(): void; }
interface HookCreated { created(): void; }
interface HookBeforeMount { beforeMount(): void; }
interface HookMounted { mounted(): void; }
interface HookBeforeUpdate { beforeUpdate(): void; }
interface HookUpdated { updated(): void; }
interface HookActivated { activated(): void; }
interface HookDeactivated { deactivated(): void; }
interface HookBeforeDestroy { beforeDestroy(): void; }
interface HookBeforeUnmount { beforeUnmount(): void; }
interface HookDestroyed { destroyed(): void; }
interface HookUnmounted { unmounted(): void; }
interface HookRenderTracked { renderTracked(): void; }
interface HookRenderTriggered { renderTriggered(): void; }
interface HookErrorCaptured { errorCaptured(): void; }
interface HookServerPrefetch { serverPrefetch(): void; }
interface HookRender { render(): void; }
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vue-facing-decorator@4.0.x
Publish Source
CLI
Badge
tessl/npm-vue-facing-decorator badge