0
# Component Registration
1

2
System for registering and managing component definitions in a global registry. Components must be registered before they can be mounted using the `mount` function.
3

4
## Capabilities
5

6
### Register Component
7

8
Registers a custom component by name in the global component registry.
9

10
```typescript { .api }
11
/**
12
 * Register a custom tag by name
13
 * @param componentName - Unique name for the component
14
 * @param wrapper - Component wrapper containing template, CSS, and exports
15
 * @returns Map containing all registered components
16
 */
17
function register<Props extends DefaultProps, State extends DefaultState>(
18
  componentName: string,
19
  wrapper: RiotComponentWrapper<RiotComponent<Props, State>>
20
): RegisteredComponentsMap;
21
```
22

23
**Usage Example:**
24

25
```javascript
26
import { register } from "riot";
27

28
register("my-component", {
29
  css: "my-component { color: blue; }",
30
  template: (template, expressionTypes, bindingTypes) => 
31
    template("<h1>{ props.title }</h1>", [
32
      // Template binding configuration
33
    ]),
34
  exports: {
35
    onBeforeMount(props, state) {
36
      console.log("Component mounting with props:", props);
37
    }
38
  }
39
});
40
```
41

42
### Unregister Component
43

44
Removes a component from the global registry and cleans up associated CSS.
45

46
```typescript { .api }
47
/**
48
 * Unregister a riot web component
49
 * @param componentName - Name of the component to unregister
50
 * @returns Map containing remaining registered components
51
 */
52
function unregister(componentName: string): RegisteredComponentsMap;
53
```
54

55
**Usage Example:**
56

57
```javascript
58
import { unregister } from "riot";
59

60
// Remove component from registry
61
unregister("my-component");
62
```
63

64
## Component Wrapper Structure
65

66
The component wrapper object defines the complete component implementation:
67

68
```typescript { .api }
69
interface RiotComponentWrapper<Component> {
70
  /** Optional CSS styles for the component */
71
  readonly css?: string | null;
72
  
73
  /** Component implementation (factory function or object) */
74
  readonly exports?: RiotComponentFactoryFunction<Component> | Component | null;
75
  
76
  /** Optional component name */
77
  readonly name?: string | null;
78
  
79
  /** Template rendering function */
80
  template?(
81
    template: TemplateFunction,
82
    expressionTypes: ExpressionTypes,
83
    bindingTypes: BindingTypes,
84
    getComponent: GetComponentFunction
85
  ): TemplateChunk<Component> | null;
86
}
87
```
88

89
### Component Exports
90

91
The exports property can be either a factory function or a component object:
92

93
```typescript { .api }
94
interface RiotComponentFactoryFunction<Component> {
95
  (...args: any[]): Component;
96
  components?: RiotComponentsMap;
97
}
98

99
// Or a component object implementing lifecycle methods
100
interface ComponentObject {
101
  onBeforeMount?(props: Props, state: State): void;
102
  onMounted?(props: Props, state: State): void;
103
  onBeforeUpdate?(props: Props, state: State): void;
104
  onUpdated?(props: Props, state: State): void;
105
  onBeforeUnmount?(props: Props, state: State): void;
106
  onUnmounted?(props: Props, state: State): void;
107
  shouldUpdate?(newProps: Props, oldProps: Props): boolean;
108
  [key: string]: any;
109
}
110
```
111

112
## Types
113

114
```typescript { .api }
115
type RegisteredComponentsMap = Map<
116
  string,
117
  ({
118
    slots,
119
    attributes,
120
    props,
121
  }: {
122
    slots?: TagSlotData[];
123
    attributes?: AttributeExpressionData[];
124
    props?: DefaultProps;
125
  }) => RiotComponent
126
>;
127

128
type RiotComponentsMap = {
129
  [key: string]: RiotComponentWrapper<RiotComponent>;
130
};
131
```