0
# Application Management
1

2
Core functionality for registering, unregistering, and managing microfrontend applications throughout their lifecycle.
3

4
## Capabilities
5

6
### Register Application
7

8
Registers a microfrontend application with single-spa. Applications are automatically mounted and unmounted based on their activity function.
9

10
```javascript { .api }
11
/**
12
 * Register an application using a configuration object
13
 * @param config - Application configuration object
14
 */
15
function registerApplication(config: RegisterApplicationConfig): void;
16

17
/**
18
 * Register an application using individual parameters
19
 * @param appName - Unique name for the application
20
 * @param applicationOrLoadingFn - Application object or function returning application
21
 * @param activityFn - Function determining when application should be active
22
 * @param customProps - Optional custom properties passed to application
23
 */
24
function registerApplication(
25
  appName: string,
26
  applicationOrLoadingFn: Application,
27
  activityFn: ActivityFn,
28
  customProps?: CustomProps | CustomPropsFn
29
): void;
30

31
interface RegisterApplicationConfig {
32
  name: string;
33
  app: Application;
34
  activeWhen: Activity;
35
  customProps?: CustomProps | CustomPropsFn;
36
}
37

38
type Application = LifeCycles | ((config: AppProps) => Promise<LifeCycles>);
39
type Activity = ActivityFn | string | Array<ActivityFn | string>;
40
type ActivityFn = (location: Location) => boolean;
41
type CustomPropsFn = (name: string, location: Location) => CustomProps;
42
```
43

44
**Usage Examples:**
45

46
```javascript
47
import { registerApplication } from "single-spa";
48

49
// Register with configuration object
50
registerApplication({
51
  name: "navbar",
52
  app: () => import("./navbar/navbar.app.js"),
53
  activeWhen: "/",
54
  customProps: { theme: "dark" }
55
});
56

57
// Register with activity function
58
registerApplication(
59
  "products",
60
  () => import("./products/products.app.js"),
61
  (location) => location.pathname.startsWith("/products"),
62
  { apiUrl: "https://api.example.com" }
63
);
64

65
// Register with path string
66
registerApplication(
67
  "dashboard",
68
  () => import("./dashboard/dashboard.app.js"),
69
  "/dashboard"
70
);
71

72
// Register with multiple paths
73
registerApplication({
74
  name: "user-profile",
75
  app: () => import("./user-profile/user-profile.app.js"),
76
  activeWhen: ["/profile", "/settings", "/account"]
77
});
78

79
// Register with custom props function
80
registerApplication({
81
  name: "analytics",
82
  app: () => import("./analytics/analytics.app.js"),
83
  activeWhen: "/analytics",
84
  customProps: (name, location) => ({
85
    userId: getCurrentUserId(),
86
    section: location.pathname.split("/")[2]
87
  })
88
});
89
```
90

91
### Unregister Application
92

93
Removes an application from single-spa. The application will be unmounted if currently mounted.
94

95
```javascript { .api }
96
/**
97
 * Unregister an application from single-spa
98
 * @param appName - Name of the application to unregister
99
 * @returns Promise that resolves when application is unregistered
100
 */
101
function unregisterApplication(appName: string): Promise<any>;
102
```
103

104
**Usage Examples:**
105

106
```javascript
107
import { unregisterApplication } from "single-spa";
108

109
// Unregister an application
110
await unregisterApplication("navbar");
111

112
// Unregister with error handling
113
try {
114
  await unregisterApplication("products");
115
  console.log("Products application unregistered successfully");
116
} catch (error) {
117
  console.error("Failed to unregister products application:", error);
118
}
119
```
120

121
### Unload Application
122

123
Unloads an application from memory, removing it completely from single-spa's management.
124

125
```javascript { .api }
126
/**
127
 * Unload an application from memory
128
 * @param appName - Name of the application to unload
129
 * @param opts - Optional configuration
130
 * @returns Promise that resolves when application is unloaded
131
 */
132
function unloadApplication(
133
  appName: string,
134
  opts?: { waitForUnmount: boolean }
135
): Promise<any>;
136
```
137

138
**Usage Examples:**
139

140
```javascript
141
import { unloadApplication } from "single-spa";
142

143
// Unload application immediately
144
await unloadApplication("legacy-app");
145

146
// Wait for unmount before unloading
147
await unloadApplication("critical-app", { waitForUnmount: true });
148
```
149

150
### Get Application Names
151

152
Returns an array of all registered application names.
153

154
```javascript { .api }
155
/**
156
 * Get names of all registered applications
157
 * @returns Array of application names
158
 */
159
function getAppNames(): string[];
160
```
161

162
**Usage Examples:**
163

164
```javascript
165
import { getAppNames } from "single-spa";
166

167
const allApps = getAppNames();
168
console.log("Registered applications:", allApps);
169
// Output: ["navbar", "products", "dashboard"]
170
```
171

172
### Get Mounted Applications
173

174
Returns an array of currently mounted application names.
175

176
```javascript { .api }
177
/**
178
 * Get names of currently mounted applications
179
 * @returns Array of mounted application names
180
 */
181
function getMountedApps(): string[];
182
```
183

184
**Usage Examples:**
185

186
```javascript
187
import { getMountedApps } from "single-spa";
188

189
const mountedApps = getMountedApps();
190
console.log("Currently mounted:", mountedApps);
191
// Output: ["navbar", "products"] (based on current route)
192
```
193

194
### Get Application Status
195

196
Gets the current lifecycle status of a specific application.
197

198
```javascript { .api }
199
/**
200
 * Get the current status of an application
201
 * @param appName - Name of the application
202
 * @returns Current status string or null if not found
203
 */
204
function getAppStatus(appName: string): string | null;
205
```
206

207
**Usage Examples:**
208

209
```javascript
210
import { getAppStatus, MOUNTED, NOT_LOADED } from "single-spa";
211

212
const status = getAppStatus("products");
213
if (status === MOUNTED) {
214
  console.log("Products app is currently mounted");
215
} else if (status === NOT_LOADED) {
216
  console.log("Products app hasn't been loaded yet");
217
}
218
```
219

220
### Check Activity Functions
221

222
Checks which applications should be active for a given location.
223

224
```javascript { .api }
225
/**
226
 * Check which applications should be active for a location
227
 * @param location - Location object to check against
228
 * @returns Array of application names that should be active
229
 */
230
function checkActivityFunctions(location: Location): string[];
231
```
232

233
**Usage Examples:**
234

235
```javascript
236
import { checkActivityFunctions } from "single-spa";
237

238
// Check what should be active for current location
239
const activeApps = checkActivityFunctions(window.location);
240
console.log("Should be active:", activeApps);
241

242
// Check for a specific location
243
const testLocation = new URL("https://example.com/products/123");
244
const testActiveApps = checkActivityFunctions(testLocation);
245
```
246

247
### Path to Activity Function
248

249
Creates an activity function from a path string, supporting exact matching.
250

251
```javascript { .api }
252
/**
253
 * Create an activity function from a path string
254
 * @param path - Path pattern to match
255
 * @param exactMatch - Whether to require exact path match (default: false)
256
 * @returns Activity function that matches the path
257
 */
258
function pathToActiveWhen(path: string, exactMatch?: boolean): ActivityFn;
259
```
260

261
**Usage Examples:**
262

263
```javascript
264
import { registerApplication, pathToActiveWhen } from "single-spa";
265

266
// Prefix matching (default)
267
registerApplication({
268
  name: "products",
269
  app: () => import("./products/products.app.js"),
270
  activeWhen: pathToActiveWhen("/products")
271
  // Matches: /products, /products/123, /products/category/electronics
272
});
273

274
// Exact matching
275
registerApplication({
276
  name: "home",
277
  app: () => import("./home/home.app.js"),
278
  activeWhen: pathToActiveWhen("/", true)
279
  // Matches only: /
280
});
281
```
282

283
## Core Types
284

285
```javascript { .api }
286
interface LifeCycles {
287
  bootstrap: LifeCycleFn | Array<LifeCycleFn>;
288
  mount: LifeCycleFn | Array<LifeCycleFn>;
289
  unmount: LifeCycleFn | Array<LifeCycleFn>;
290
  update?: LifeCycleFn | Array<LifeCycleFn>;
291
}
292

293
interface AppProps {
294
  name: string;
295
  singleSpa: any;
296
  mountParcel: (parcelConfig: ParcelConfig, customProps: ParcelProps & CustomProps) => Parcel;
297
}
298

299
type LifeCycleFn = (config: AppProps) => Promise<any>;
300

301
interface CustomProps {
302
  [key: string]: any;
303
  [key: number]: any;
304
}
305
```