0
# Core Component System
1

2
Foundation classes and decorators for creating Vue components from TypeScript classes with full Vue 3 compatibility.
3

4
## Capabilities
5

6
### Component Class Decorator
7

8
The main decorator that transforms ES classes into Vue components.
9

10
```typescript { .api }
11
/**
12
 * Transforms an ES class into a Vue component with proper option mapping
13
 * @param options - Optional component configuration
14
 * @returns Class decorator function
15
 */
16
function Component(options?: ComponentOption): ClassDecorator;
17

18
// Alias for Component
19
const ComponentBase: (options?: ComponentOption) => ClassDecorator;
20

21
interface ComponentOption {
22
  name?: string;
23
  emits?: string[];
24
  provide?: Record<string, any> | Function;
25
  components?: Record<string, any>;
26
  directives?: Record<string, any>;
27
  inheritAttrs?: boolean;
28
  expose?: string[];
29
  render?: Function;
30
  template?: string;
31
  mixins?: any[];
32
  setup?: ComponentSetupFunction;
33
  methods?: MethodOptions;
34
  modifier?: (raw: any) => any;
35
  options?: ComponentCustomOptions & Record<string, any>;
36
}
37
```
38

39
**Usage Examples:**
40

41
```typescript
42
import { Component } from "vue-facing-decorator";
43

44
// Basic component
45
@Component
46
class BasicComponent {
47
  message = "Hello World";
48
}
49

50
// Component with options
51
@Component({
52
  name: "MyComponent",
53
  template: "<div>{{ message }}</div>",
54
  emits: ["customEvent"],
55
  inheritAttrs: false
56
})
57
class ConfiguredComponent {
58
  message = "Configured Component";
59
}
60

61
// Component with render function
62
@Component({
63
  render() {
64
    return h('div', this.message);
65
  }
66
})
67
class RenderComponent {
68
  message = "Rendered Component";
69
}
70
```
71

72
### Base Classes
73

74
Foundation classes providing Vue component functionality with TypeScript support.
75

76
```typescript { .api }
77
/**
78
 * Base class for Vue components with TypeScript support
79
 * Provides the foundation for component inheritance
80
 */
81
class Base { }
82

83
// Alias for Base
84
const Vue: typeof Base;
85

86
type VueCons<RawInstance = Identity, IT = { props: {}, events: {} }> = {
87
  new(): ComponentPublicInstance & Identity<IT> & Omit<RawInstance, typeof IdentitySymbol>;
88
};
89
```
90

91
**Usage Examples:**
92

93
```typescript
94
import { Component, Base } from "vue-facing-decorator";
95

96
// Extending Base class
97
@Component
98
class MyComponent extends Base {
99
  message = "Hello from Base";
100
  
101
  mounted() {
102
    console.log("Component mounted");
103
  }
104
}
105

106
// Multiple inheritance
107
@Component
108
class BaseComponent extends Base {
109
  sharedMethod() {
110
    return "shared functionality";
111
  }
112
}
113

114
@Component
115
class ChildComponent extends BaseComponent {
116
  childMethod() {
117
    return this.sharedMethod() + " extended";
118
  }
119
}
120
```
121

122
### Component Conversion
123

124
Function to convert decorated classes to native Vue components.
125

126
```typescript { .api }
127
/**
128
 * Converts a decorated class constructor to a native Vue component
129
 * @param cons - The decorated component class
130
 * @returns Native Vue component
131
 */
132
function toNative<T extends VueCons>(cons: T): T;
133
```
134

135
**Usage Examples:**
136

137
```typescript
138
import { Component, toNative } from "vue-facing-decorator";
139

140
@Component
141
class MyComponent {
142
  message = "Hello World";
143
}
144

145
// Convert to native Vue component for export
146
export default toNative(MyComponent);
147

148
// Or use directly in Vue app
149
import { createApp } from 'vue';
150
const app = createApp(toNative(MyComponent));
151
```
152

153
### Type Definitions
154

155
Core type definitions for component construction and inheritance.
156

157
```typescript { .api }
158
type ComponentSetupFunction = (
159
  props: Readonly<any>, 
160
  ctx: SetupContext<any>
161
) => Record<string, any> | Promise<Record<string, any>>;
162

163
type OptionSetupFunction = (
164
  props: Readonly<any>, 
165
  ctx: SetupContext<any>
166
) => any | Promise<any>;
167

168
interface Identity<IT extends IdentityType = { props: {}, events: {} }> {
169
  readonly [IdentitySymbol]: IT;
170
}
171

172
interface IdentityType {
173
  props: Record<string, any>;
174
  events: Record<string, any>;
175
}
176
```
177

178
## Component Lifecycle Integration
179

180
The core component system automatically handles Vue lifecycle integration:
181

182
- **Class methods** matching Vue lifecycle hook names are automatically registered
183
- **Property decorators** are transformed to appropriate Vue options
184
- **Method decorators** are processed to generate watchers, emitters, etc.
185
- **ES class inheritance** is preserved through Vue's extends mechanism
186

187
**Example with full lifecycle:**
188

189
```typescript
190
import { Component, Setup, Prop } from "vue-facing-decorator";
191
import { ref } from "vue";
192

193
@Component({
194
  name: "FullLifecycleComponent"
195
})
196
class FullLifecycleComponent {
197
  @Prop({ type: String, required: true })
198
  initialValue!: string;
199

200
  @Setup(() => ref(0))
201
  counter!: number;
202

203
  // Lifecycle hooks - automatically detected and registered
204
  beforeCreate() {
205
    console.log("Before create");
206
  }
207

208
  created() {
209
    console.log("Created with initial value:", this.initialValue);
210
  }
211

212
  mounted() {
213
    console.log("Component mounted");
214
  }
215

216
  updated() {
217
    console.log("Component updated");
218
  }
219

220
  beforeUnmount() {
221
    console.log("Before unmount");
222
  }
223

224
  unmounted() {
225
    console.log("Unmounted");
226
  }
227
}
228

229
export default toNative(FullLifecycleComponent);
230
```