storybook 9.0.0-alpha.5 → 9.0.0-alpha.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/bin/index.cjs +63 -63
  2. package/dist/bin/index.js +63 -63
  3. package/dist/builder-manager/index.cjs +253 -280
  4. package/dist/builder-manager/index.js +305 -332
  5. package/dist/cli/bin/index.cjs +1 -1
  6. package/dist/cli/bin/index.js +1 -1
  7. package/dist/common/index.cjs +63 -63
  8. package/dist/common/index.js +63 -63
  9. package/dist/components/index.cjs +2102 -2069
  10. package/dist/components/index.js +2311 -2278
  11. package/dist/core-server/index.cjs +10816 -10501
  12. package/dist/core-server/index.d.ts +260 -2
  13. package/dist/core-server/index.js +10920 -10611
  14. package/dist/core-server/presets/common-preset.cjs +59 -59
  15. package/dist/core-server/presets/common-preset.js +57 -57
  16. package/dist/csf/index.d.ts +1 -1
  17. package/dist/instrumenter/index.cjs +1784 -1546
  18. package/dist/instrumenter/index.js +2220 -2054
  19. package/dist/manager/globals-module-info.cjs +22 -8
  20. package/dist/manager/globals-module-info.js +20 -6
  21. package/dist/manager/globals-runtime.js +22673 -23887
  22. package/dist/manager/runtime.js +3286 -3200
  23. package/dist/manager-api/index.cjs +3506 -3179
  24. package/dist/manager-api/index.d.ts +325 -24
  25. package/dist/manager-api/index.js +3245 -2957
  26. package/dist/manager-errors.d.ts +25 -1
  27. package/dist/manager-errors.js +42 -26
  28. package/dist/preview/runtime.js +15216 -16734
  29. package/dist/preview-api/index.cjs +1234 -1683
  30. package/dist/preview-api/index.d.ts +3 -309
  31. package/dist/preview-api/index.js +1360 -1785
  32. package/dist/preview-errors.cjs +98 -81
  33. package/dist/preview-errors.d.ts +25 -1
  34. package/dist/preview-errors.js +109 -93
  35. package/dist/server-errors.cjs +92 -75
  36. package/dist/server-errors.d.ts +25 -1
  37. package/dist/server-errors.js +83 -66
  38. package/dist/test/index.cjs +12779 -11872
  39. package/dist/test/index.js +12417 -11582
  40. package/dist/test/preview.cjs +1466 -1467
  41. package/dist/test/preview.js +4 -5
  42. package/dist/test/spy.cjs +11 -12
  43. package/dist/test/spy.js +14 -15
  44. package/dist/types/index.d.ts +271 -13
  45. package/package.json +9 -9
@@ -178,11 +178,11 @@ declare function useReducer<S, I, A>(reducer: (state: S, action: A) => S, initia
178
178
  * @returns {void}
179
179
  */
180
180
  declare function useEffect(create: () => (() => void) | void, deps?: any[]): void;
181
- interface Listener$1 {
181
+ interface Listener {
182
182
  (...args: any[]): void;
183
183
  }
184
184
  interface EventMap {
185
- [eventId: string]: Listener$1;
185
+ [eventId: string]: Listener;
186
186
  }
187
187
  /**
188
188
  * Subscribes to events emitted by the Storybook channel and returns a function to emit events.
@@ -312,312 +312,6 @@ declare const makeDecorator: ({ name, parameterName, wrapper, skipIfNoParameters
312
312
 
313
313
  declare function mockChannel(): Channel;
314
314
 
315
- type EnvironmentType = (typeof UniversalStore.Environment)[keyof typeof UniversalStore.Environment];
316
- type StatusType = (typeof UniversalStore.Status)[keyof typeof UniversalStore.Status];
317
- type StateUpdater<TState> = (prevState: TState) => TState;
318
- type Actor = {
319
- id: string;
320
- type: (typeof UniversalStore.ActorType)[keyof typeof UniversalStore.ActorType];
321
- environment: EnvironmentType;
322
- };
323
- type EventInfo = {
324
- actor: Actor;
325
- forwardingActor?: Actor;
326
- };
327
- type Listener<TEvent> = (event: TEvent, eventInfo: EventInfo) => void;
328
- type BaseEvent = {
329
- type: string;
330
- payload?: any;
331
- };
332
- interface SetStateEvent<TState> extends BaseEvent {
333
- type: typeof UniversalStore.InternalEventType.SET_STATE;
334
- payload: {
335
- state: TState;
336
- previousState: TState;
337
- };
338
- }
339
- interface ExistingStateRequestEvent extends BaseEvent {
340
- type: typeof UniversalStore.InternalEventType.EXISTING_STATE_REQUEST;
341
- payload: never;
342
- }
343
- interface ExistingStateResponseEvent<TState> extends BaseEvent {
344
- type: typeof UniversalStore.InternalEventType.EXISTING_STATE_RESPONSE;
345
- payload: TState;
346
- }
347
- interface LeaderCreatedEvent extends BaseEvent {
348
- type: typeof UniversalStore.InternalEventType.LEADER_CREATED;
349
- payload: never;
350
- }
351
- interface FollowerCreatedEvent extends BaseEvent {
352
- type: typeof UniversalStore.InternalEventType.FOLLOWER_CREATED;
353
- payload: never;
354
- }
355
- type InternalEvent<TState> = SetStateEvent<TState> | ExistingStateRequestEvent | ExistingStateResponseEvent<TState> | FollowerCreatedEvent | LeaderCreatedEvent;
356
- type Event<TState, TEvent extends BaseEvent> = TEvent | InternalEvent<TState>;
357
- type ChannelLike = Pick<Channel, 'on' | 'off' | 'emit'>;
358
- type StoreOptions<TState> = {
359
- id: string;
360
- leader?: boolean;
361
- initialState?: TState;
362
- debug?: boolean;
363
- };
364
- type EnvironmentOverrides = {
365
- channel: ChannelLike;
366
- environment: EnvironmentType;
367
- };
368
-
369
- /**
370
- * A universal store implementation that synchronizes state across different environments using a
371
- * channel-based communication.
372
- *
373
- * The store follows a leader-follower pattern where:
374
- *
375
- * - Leader: The main store instance that owns and manages the state
376
- * - Follower: Store instances that mirror the leader's state
377
- *
378
- * Features:
379
- *
380
- * - State synchronization across environments
381
- * - Event-based communication
382
- * - Type-safe state and custom events
383
- * - Subscription system for state changes and custom events
384
- *
385
- * @remarks
386
- * - The store must be created using the static `create()` method, not the constructor
387
- * - Follower stores will automatically sync with their leader's state. If they have initial state, it
388
- * will be replaced immediately when it has synced with the leader.
389
- *
390
- * @example
391
- *
392
- * ```typescript
393
- * interface MyState {
394
- * count: number;
395
- * }
396
- * interface MyCustomEvent {
397
- * type: 'INCREMENT';
398
- * payload: number;
399
- * }
400
- *
401
- * // Create a leader store
402
- * const leaderStore = UniversalStore.create<MyState, MyCustomEvent>({
403
- * id: 'my-store',
404
- * leader: true,
405
- * initialState: { count: 0 },
406
- * });
407
- *
408
- * // Create a follower store
409
- * const followerStore = UniversalStore.create<MyState, MyCustomEvent>({
410
- * id: 'my-store',
411
- * leader: false,
412
- * });
413
- * ```
414
- *
415
- * @template State - The type of state managed by the store
416
- * @template CustomEvent - Custom events that can be sent through the store. Must have a `type`
417
- * string and optional `payload`
418
- * @throws {Error} If constructed directly instead of using `create()`
419
- * @throws {Error} If created without setting a channel first
420
- * @throws {Error} If a follower is created with initial state
421
- * @throws {Error} If a follower cannot find its leader within 1 second
422
- */
423
- declare class UniversalStore<State, CustomEvent extends {
424
- type: string;
425
- payload?: any;
426
- } = {
427
- type: string;
428
- payload?: any;
429
- }> {
430
- /**
431
- * Defines the possible actor types in the store system
432
- *
433
- * @readonly
434
- */
435
- static readonly ActorType: {
436
- readonly LEADER: "LEADER";
437
- readonly FOLLOWER: "FOLLOWER";
438
- };
439
- /**
440
- * Defines the possible environments the store can run in
441
- *
442
- * @readonly
443
- */
444
- static readonly Environment: {
445
- readonly SERVER: "SERVER";
446
- readonly MANAGER: "MANAGER";
447
- readonly PREVIEW: "PREVIEW";
448
- readonly UNKNOWN: "UNKNOWN";
449
- readonly MOCK: "MOCK";
450
- };
451
- /**
452
- * Internal event types used for store synchronization
453
- *
454
- * @readonly
455
- */
456
- static readonly InternalEventType: {
457
- readonly EXISTING_STATE_REQUEST: "__EXISTING_STATE_REQUEST";
458
- readonly EXISTING_STATE_RESPONSE: "__EXISTING_STATE_RESPONSE";
459
- readonly SET_STATE: "__SET_STATE";
460
- readonly LEADER_CREATED: "__LEADER_CREATED";
461
- readonly FOLLOWER_CREATED: "__FOLLOWER_CREATED";
462
- };
463
- static readonly Status: {
464
- readonly UNPREPARED: "UNPREPARED";
465
- readonly SYNCING: "SYNCING";
466
- readonly READY: "READY";
467
- readonly ERROR: "ERROR";
468
- };
469
- protected static isInternalConstructing: boolean;
470
- /**
471
- * The preparation construct is used to keep track of all store's preparation state the promise is
472
- * resolved when the store is prepared with the static __prepare() method which will also change
473
- * the state from PENDING to RESOLVED
474
- */
475
- private static preparation;
476
- private static setupPreparationPromise;
477
- /** Enable debug logs for this store */
478
- debugging: boolean;
479
- /** The actor object representing the store instance with a unique ID and a type */
480
- get actor(): Actor;
481
- /**
482
- * The current state of the store, that signals both if the store is prepared by Storybook and
483
- * also - in the case of a follower - if the state has been synced with the leader's state.
484
- */
485
- get status(): StatusType;
486
- /**
487
- * A promise that resolves when the store is fully ready. A leader will be ready when the store
488
- * has been prepared by Storybook, which is almost instantly.
489
- *
490
- * A follower will be ready when the state has been synced with the leader's state, within a few
491
- * hundred milliseconds.
492
- */
493
- untilReady(): Promise<[{
494
- channel: ChannelLike;
495
- environment: EnvironmentType;
496
- }, void | undefined]>;
497
- /**
498
- * The syncing construct is used to keep track of if the instance's state has been synced with the
499
- * other instances. A leader will immediately have the promise resolved. A follower will initially
500
- * be in a PENDING state, and resolve the the leader has sent the existing state, or reject if no
501
- * leader has responded before the timeout.
502
- */
503
- private syncing?;
504
- private channelEventName;
505
- private state;
506
- private channel?;
507
- private environment?;
508
- private listeners;
509
- private id;
510
- private actorId;
511
- private actorType;
512
- protected constructor(options: StoreOptions<State>, environmentOverrides?: EnvironmentOverrides);
513
- /** Creates a new instance of UniversalStore */
514
- static create<State = any, CustomEvent extends {
515
- type: string;
516
- payload?: any;
517
- } = {
518
- type: string;
519
- payload?: any;
520
- }>(options: StoreOptions<State>): UniversalStore<State, CustomEvent>;
521
- /** Gets the current state */
522
- getState: () => State;
523
- /**
524
- * Updates the store's state
525
- *
526
- * Either a new state or a state updater function can be passed to the method.
527
- */
528
- setState(updater: State | StateUpdater<State>): void;
529
- /**
530
- * Subscribes to store events
531
- *
532
- * @returns A function to unsubscribe
533
- */
534
- subscribe: {
535
- (listener: Listener<Event<State, CustomEvent>>): () => void;
536
- <EventType extends Event<State, CustomEvent>['type']>(eventType: EventType, listener: Listener<Extract<Event<State, CustomEvent>, {
537
- type: EventType;
538
- }>>): () => void;
539
- };
540
- /**
541
- * Subscribes to state changes
542
- *
543
- * @returns Unsubscribe function
544
- */
545
- onStateChange(listener: (state: State, previousState: State, eventInfo: EventInfo) => void): () => void;
546
- /** Sends a custom event to the other stores */
547
- send: (event: CustomEvent) => void;
548
- private emitToChannel;
549
- private prepareThis;
550
- private emitToListeners;
551
- private handleChannelEvents;
552
- private debug;
553
- }
554
-
555
- /**
556
- * A hook to use a UniversalStore in a rendered preview. This hook will react to changes in the
557
- * store state and re-render when the store changes.
558
- *
559
- * @param universalStore The UniversalStore instance to use.
560
- * @param selector An optional selector function to select a subset of the store state.
561
- * @remark This hook is intended for use in the preview. For use in the manager UI, import from
562
- * `storybook/manager-api` instead.
563
- */
564
- declare const useUniversalStore: {
565
- <TUniversalStore extends UniversalStore<TState, any>, TState = TUniversalStore extends UniversalStore<infer S, any> ? S : never>(universalStore: TUniversalStore): [TState, TUniversalStore['setState']];
566
- <TUniversalStore extends UniversalStore<any, any>, TSelectedState, TState = TUniversalStore extends UniversalStore<infer S, any> ? S : never>(universalStore: TUniversalStore, selector: (state: TState) => TSelectedState): [TSelectedState, TUniversalStore['setState']];
567
- };
568
-
569
- /**
570
- * A mock universal store that can be used when testing code that relies on a universal store. It
571
- * functions exactly like a normal universal store, with a few exceptions:
572
- *
573
- * - It is fully isolated, meaning that it doesn't interact with any channel, and it is always a
574
- * leader.
575
- *
576
- * If the second testUtils argument is provided, all the public methods are spied on, so they can be
577
- * asserted.
578
- *
579
- * When a mock store is re-used across tests (eg. in stories), you manually need to reset the state
580
- * after each test.
581
- *
582
- * @example
583
- *
584
- * ```ts
585
- * import * as testUtils from 'storybook/test'; // in stories
586
- * import { vi as testUtils } from 'vitest'; // ... or in Vitest tests
587
- *
588
- * const initialState = { ... };
589
- * const store = new MockUniversalStore({ initialState }, testUtils);
590
- *
591
- * export default {
592
- * title: 'My story',
593
- * beforeEach: () => {
594
- * return () => {
595
- * store.setState(initialState);
596
- * };
597
- * }
598
- * }
599
- * ```
600
- */
601
- declare class MockUniversalStore<State, CustomEvent extends {
602
- type: string;
603
- payload?: any;
604
- } = {
605
- type: string;
606
- payload?: any;
607
- }> extends UniversalStore<State, CustomEvent> {
608
- private testUtils;
609
- constructor(options: StoreOptions<State>, testUtils?: any);
610
- /** Create a mock universal store. This is just an alias for the constructor */
611
- static create<State = any, CustomEvent extends {
612
- type: string;
613
- payload?: any;
614
- } = {
615
- type: string;
616
- payload?: any;
617
- }>(options: StoreOptions<State>, testUtils?: any): MockUniversalStore<State, CustomEvent>;
618
- unsubscribeAll(): void;
619
- }
620
-
621
315
  declare class ArgsStore {
622
316
  initialArgsByStoryId: Record<StoryId, Args>;
623
317
  argsByStoryId: Record<StoryId, Args>;
@@ -1397,4 +1091,4 @@ declare type RenderContext<TRenderer extends Renderer = Renderer> = StoryIdentif
1397
1091
  declare function getCoreAnnotations(): any[];
1398
1092
  declare function getComposedCoreAnnotations<TRenderer extends Renderer$1>(): NormalizedProjectAnnotations<TRenderer>;
1399
1093
 
1400
- export { DocsContext, HooksContext, Preview, PreviewWeb, PreviewWithSelection, type PropDescriptor, type Report, ReporterAPI, type SelectionStore, StoryStore, UrlStore, type View, WebView, addons, applyHooks, combineArgs, combineParameters, composeConfigs, composeStepRunners, composeStories, composeStory, createPlaywrightTest, decorateStory, defaultDecorateStory, definePreview, MockUniversalStore as experimental_MockUniversalStore, UniversalStore as experimental_UniversalStore, useUniversalStore as experimental_useUniversalStore, filterArgTypes, getComposedCoreAnnotations, getCoreAnnotations, getCsfFactoryAnnotations, inferControls, makeDecorator, mockChannel, normalizeProjectAnnotations, normalizeStory, prepareMeta, prepareStory, sanitizeStoryContextUpdate, setDefaultProjectAnnotations, setProjectAnnotations, simulateDOMContentLoaded, simulatePageLoad, sortStoriesV7, useArgs, useCallback, useChannel, useEffect, useGlobals, useMemo, useParameter, useReducer, useRef, useState, useStoryContext, userOrAutoTitle, userOrAutoTitleFromSpecifier };
1094
+ export { DocsContext, HooksContext, Preview, PreviewWeb, PreviewWithSelection, type PropDescriptor, type Report, ReporterAPI, type SelectionStore, StoryStore, UrlStore, type View, WebView, addons, applyHooks, combineArgs, combineParameters, composeConfigs, composeStepRunners, composeStories, composeStory, createPlaywrightTest, decorateStory, defaultDecorateStory, definePreview, filterArgTypes, getComposedCoreAnnotations, getCoreAnnotations, getCsfFactoryAnnotations, inferControls, makeDecorator, mockChannel, normalizeProjectAnnotations, normalizeStory, prepareMeta, prepareStory, sanitizeStoryContextUpdate, setDefaultProjectAnnotations, setProjectAnnotations, simulateDOMContentLoaded, simulatePageLoad, sortStoriesV7, useArgs, useCallback, useChannel, useEffect, useGlobals, useMemo, useParameter, useReducer, useRef, useState, useStoryContext, userOrAutoTitle, userOrAutoTitleFromSpecifier };