0
# Utilities
1

2
Utility functions and constants for TypeScript integration, version information, and advanced internal access.
3

4
## Capabilities
5

6
### TypeScript Type Helper
7

8
No-op function for TypeScript type inference and component typing support.
9

10
```typescript { .api }
11
/**
12
 * TypeScript helper for adding proper types to component definitions
13
 * @param component - Component factory function or component object
14
 * @returns The same component with proper TypeScript type inference
15
 */
16
function withTypes<Component>(component: Component): Component;
17
```
18

19
**Usage Examples:**
20

21
```typescript
22
import { withTypes } from "riot";
23

24
// For component factory functions
25
const createTypedComponent = withTypes((props: { title: string }) => ({
26
  onBeforeMount() {
27
    this.state = { count: 0 };
28
  },
29
  
30
  increment() {
31
    this.update({ count: this.state.count + 1 });
32
  }
33
}));
34

35
// For component objects
36
const typedComponent = withTypes({
37
  onBeforeMount(props: { initialValue: number }, state: { value: number }) {
38
    this.state = { value: props.initialValue || 0 };
39
  },
40
  
41
  setValue(newValue: number) {
42
    this.update({ value: newValue });
43
  }
44
} as const);
45
```
46

47
The `withTypes` function is a TypeScript-only utility that provides no runtime functionality but enables proper type inference for component definitions.
48

49
### Version Information
50

51
Constant containing the current Riot.js version string.
52

53
```typescript { .api }
54
/** Current riot version string */
55
const version: string;
56
```
57

58
**Usage Example:**
59

60
```javascript
61
import { version } from "riot";
62

63
console.log(`Riot.js version: ${version}`);
64

65
// Check version compatibility
66
if (version.startsWith("10.")) {
67
  console.log("Using Riot.js v10.x");
68
}
69
```
70

71
### Internal API Access
72

73
Advanced internal APIs exposed for specialized use cases and tooling development.
74

75
```typescript { .api }
76
const __: {
77
  cssManager: CSSManager;
78
  DOMBindings: {
79
    template: typeof template;
80
    createBinding: typeof createBinding;
81
    createExpression: typeof createExpression;
82
    bindingTypes: typeof bindingTypes;
83
    expressionTypes: typeof expressionTypes;
84
  };
85
  globals: {
86
    PROPS_KEY: string;
87
    STATE_KEY: string;
88
    IS_COMPONENT_UPDATING: symbol;
89
    ATTRIBUTES_KEY_SYMBOL: symbol;
90
    PARENT_KEY_SYMBOL: symbol;
91
    DOM_COMPONENT_INSTANCE_PROPERTY: symbol;
92
    COMPONENTS_IMPLEMENTATION_MAP: RegisteredComponentsMap;
93
    PLUGINS_SET: InstalledPluginsSet;
94
  };
95
};
96
```
97

98
**⚠️ Warning**: The internal API (`__`) is not part of the stable public API and may change without notice. Use at your own risk for advanced scenarios only.
99

100
**Usage Example:**
101

102
```javascript
103
import { __ } from "riot";
104

105
// Access CSS manager for advanced styling
106
const { cssManager } = __;
107
cssManager.add("custom-styles", ".my-class { color: red; }");
108
cssManager.inject();
109

110
// Access DOM bindings for custom template creation
111
const { DOMBindings } = __;
112
const { template, expressionTypes, bindingTypes } = DOMBindings;
113

114
// Access global constants and registries
115
const { globals } = __;
116
console.log("Total registered components:", globals.COMPONENTS_IMPLEMENTATION_MAP.size);
117
console.log("Installed plugins:", globals.PLUGINS_SET.size);
118
```
119

120
## Types
121

122
```typescript { .api }
123
interface CSSManager {
124
  CSS_BY_NAME: Map<string, string>;
125
  add(name: string, css: string): CSSManager;
126
  inject(): CSSManager;
127
  remove(name: string): CSSManager;
128
}
129

130
type RegisteredComponentsMap = Map<string, ComponentFactory>;
131
type InstalledPluginsSet = Set<ComponentEnhancer>;
132

133
type ComponentFactory = ({
134
  slots,
135
  attributes,
136
  props,
137
}: {
138
  slots?: TagSlotData[];
139
  attributes?: AttributeExpressionData[];
140
  props?: DefaultProps;
141
}) => RiotComponent;
142

143
type ComponentEnhancer = <Props, State>(
144
  component: RiotComponent<Props, State>
145
) => RiotComponent<Props, State>;
146
```