or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-features.mdcore-components.mdindex.mdmethod-lifecycle-decorators.mdproperty-decorators.md
tile.json

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.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vue-facing-decorator@4.0.x

To install, run

npx @tessl/cli install tessl/npm-vue-facing-decorator@4.0.0

index.mddocs/

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; }