0
# Prebuilt Manager
1

2
Support for using prebuilt manager bundles when the Storybook configuration meets certain criteria, providing optimal performance for standard configurations.
3

4
## Capabilities
5

6
### Prebuilt Directory Detection
7

8
Determines if a prebuilt manager can be used based on configuration analysis.
9

10
```typescript { .api }
11
/**
12
 * Get path to prebuilt manager or false if not available
13
 * @param options - Storybook configuration options
14
 * @returns Promise resolving to prebuilt directory path or false
15
 */
16
function getPrebuiltDir(options: Options): Promise<string | false>;
17

18
interface Options {
19
  /** Path to Storybook configuration directory */
20
  configDir: string;
21
  /** Smoke test mode flag - disables prebuilt manager */
22
  smokeTest?: boolean;
23
  /** Manager cache flag - must be enabled for prebuilt manager */
24
  managerCache?: boolean;
25
}
26
```
27

28
**Usage Examples:**
29

30
```typescript
31
import { getPrebuiltDir } from "@storybook/manager-webpack5/utils/prebuilt-manager";
32

33
const prebuiltPath = await getPrebuiltDir({
34
  configDir: '.storybook',
35
  managerCache: true,
36
  smokeTest: false,
37
});
38

39
if (prebuiltPath) {
40
  console.log('Using prebuilt manager from:', prebuiltPath);
41
  // Serve static files from prebuilt directory
42
} else {
43
  console.log('Building manager from source');
44
  // Proceed with webpack build
45
}
46
```
47

48
### Prebuilt Manager Criteria
49

50
The prebuilt manager can only be used when ALL of the following conditions are met:
51

52
1. **Manager cache is enabled** (`managerCache !== false`)
53
2. **Not in smoke test mode** (`smokeTest !== true`)
54
3. **Prebuilt files exist** (index.html exists in prebuilt directory)
55
4. **No custom manager configuration** (no `.storybook/manager.js` file)
56
5. **Standard main configuration** (main config file exists and is standard)
57
6. **Only default addons** (uses only standard addons)
58
7. **No custom webpack configuration** (no `managerWebpack` in main config)
59
8. **No custom babel configuration** (no `managerBabel` in main config)
60
9. **No composition refs** (no `refs` in config and no auto-discovered refs)
61
10. **No custom features** (no `features` configuration)
62

63
### Default Addons
64

65
Standard addons that are automatically installed with `sb init` and compatible with prebuilt manager.
66

67
```typescript { .api }
68
/**
69
 * List of default addons installed with sb init
70
 */
71
const DEFAULT_ADDONS: string[] = [
72
  '@storybook/addon-links',
73
  '@storybook/addon-essentials'
74
];
75
```
76

77
**Usage Examples:**
78

79
```typescript
80
import { DEFAULT_ADDONS } from "@storybook/manager-webpack5/utils/prebuilt-manager";
81

82
// Check if configuration only uses default addons
83
const configAddons = ['@storybook/addon-links', '@storybook/addon-essentials'];
84
const onlyDefaultAddons = configAddons.every(addon => DEFAULT_ADDONS.includes(addon));
85
```
86

87
### Ignored Addons
88

89
Addons that don't affect the manager build and can be safely ignored when determining prebuilt manager eligibility.
90

91
```typescript { .api }
92
/**
93
 * Addons that don't affect manager build and can be ignored
94
 */
95
const IGNORED_ADDONS: string[] = [
96
  '@storybook/preset-create-react-app',
97
  '@storybook/preset-scss', 
98
  '@storybook/preset-typescript',
99
  '@storybook/addon-links',
100
  '@storybook/addon-essentials'
101
];
102
```
103

104
**Usage Examples:**
105

106
```typescript
107
import { IGNORED_ADDONS } from "@storybook/manager-webpack5/utils/prebuilt-manager";
108

109
// Filter out addons that don't affect manager
110
const managerAffectingAddons = allAddons.filter(addon => 
111
  !IGNORED_ADDONS.includes(addon)
112
);
113

114
if (managerAffectingAddons.length === 0) {
115
  console.log('No manager-affecting addons, prebuilt manager eligible');
116
}
117
```
118

119
## Configuration Analysis
120

121
The prebuilt manager system analyzes the Storybook configuration to determine compatibility:
122

123
### Main Configuration Analysis
124

125
Examines the main configuration file for:
126

127
```typescript
128
interface MainConfig {
129
  /** Array of addon names/paths */
130
  addons?: string[];
131
  /** Composition references */
132
  refs?: Record<string, any>;
133
  /** Custom manager webpack configuration */
134
  managerWebpack?: Function;
135
  /** Custom manager babel configuration */
136
  managerBabel?: Function;
137
  /** Feature flags */
138
  features?: Record<string, any>;
139
}
140
```
141

142
### Auto-Ref Detection
143

144
Checks for automatic composition references by:
145

146
1. Scanning package.json dependencies
147
2. Looking for packages with `storybook.url` configuration
148
3. Verifying reference accessibility
149

150
**Example of auto-discovered ref:**
151

152
```json
153
{
154
  "name": "@company/design-system",
155
  "storybook": {
156
    "url": "https://design-system.company.com"
157
  }
158
}
159
```
160

161
## Performance Benefits
162

163
Using prebuilt manager provides significant performance improvements:
164

165
- **Zero Build Time**: No webpack compilation needed
166
- **Instant Startup**: Manager loads immediately from static files
167
- **Reduced Dependencies**: No webpack or loader dependencies needed
168
- **Memory Efficiency**: Lower memory usage during development
169
- **CI Optimization**: Faster CI builds when prebuilt manager is available
170

171
## Fallback Behavior
172

173
When prebuilt manager cannot be used, the system gracefully falls back to:
174

175
1. **Cache Check**: Look for cached manager build
176
2. **Fresh Build**: Compile manager from source using webpack
177
3. **Error Handling**: Provide clear feedback about why prebuilt manager wasn't used
178

179
## Debugging Prebuilt Manager
180

181
To debug why prebuilt manager isn't being used:
182

183
```typescript
184
import { getPrebuiltDir, DEFAULT_ADDONS, IGNORED_ADDONS } from "@storybook/manager-webpack5/utils/prebuilt-manager";
185
import { getAutoRefs } from "@storybook/manager-webpack5/manager-config";
186

187
async function debugPrebuiltEligibility(options: Options) {
188
  const prebuiltDir = await getPrebuiltDir(options);
189
  
190
  if (!prebuiltDir) {
191
    // Check each condition individually
192
    console.log('Prebuilt manager not available. Checking conditions:');
193
    
194
    // Check for auto refs
195
    const autoRefs = await getAutoRefs(options);
196
    console.log('Auto refs found:', autoRefs.length);
197
    
198
    // Check other conditions...
199
  }
200
}
201
```