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
@@ -1,9 +1,10 @@
1
1
  import { loadAllPresets } from 'storybook/internal/common';
2
2
  export { getPreviewBodyTemplate, getPreviewHeadTemplate } from 'storybook/internal/common';
3
3
  import * as storybook_internal_types from 'storybook/internal/types';
4
- import { CLIOptions, LoadOptions, BuilderOptions, StorybookConfigRaw, IndexInputStats, NormalizedStoriesSpecifier, Path, Indexer, DocsOptions, StoryIndexEntry, DocsIndexEntry, Tag, IndexEntry, StoryIndex, Options } from 'storybook/internal/types';
4
+ import { CLIOptions, LoadOptions, BuilderOptions, StorybookConfigRaw, IndexInputStats, NormalizedStoriesSpecifier, Path, Indexer, DocsOptions, StoryIndexEntry, DocsIndexEntry, Tag, IndexEntry, StoryIndex, Options, NormalizedProjectAnnotations, ProjectAnnotations, ComposedStoryFn } from 'storybook/internal/types';
5
5
  import { EventType } from 'storybook/internal/telemetry';
6
6
  import { Channel } from 'storybook/internal/channels';
7
+ import { StoryId } from 'storybook/internal/csf';
7
8
 
8
9
  type BuildStaticStandaloneOptions = CLIOptions & LoadOptions & BuilderOptions & {
9
10
  outputDir: string;
@@ -459,4 +460,261 @@ declare class MockUniversalStore<State, CustomEvent extends {
459
460
  unsubscribeAll(): void;
460
461
  }
461
462
 
462
- export { type BuildIndexOptions, type BuildStaticStandaloneOptions, StoryIndexGenerator, build, buildDevStandalone, buildIndex, buildIndexStandalone, buildStaticStandalone, MockUniversalStore as experimental_MockUniversalStore, UniversalStore as experimental_UniversalStore, loadStorybook as experimental_loadStorybook, getErrorLevel, mapStaticDir, sendTelemetryError, withTelemetry };
463
+ declare global {
464
+ interface SymbolConstructor {
465
+ readonly observable: symbol;
466
+ }
467
+ }
468
+
469
+ declare global {
470
+ var globalProjectAnnotations: NormalizedProjectAnnotations<any>;
471
+ var defaultProjectAnnotations: ProjectAnnotations<any>;
472
+ }
473
+ type WrappedStoryRef = {
474
+ __pw_type: 'jsx' | 'importRef';
475
+ };
476
+ type UnwrappedJSXStoryRef = {
477
+ __pw_type: 'jsx';
478
+ type: UnwrappedImportStoryRef;
479
+ };
480
+ type UnwrappedImportStoryRef = ComposedStoryFn;
481
+ declare global {
482
+ function __pwUnwrapObject(storyRef: WrappedStoryRef): Promise<UnwrappedJSXStoryRef | UnwrappedImportStoryRef>;
483
+ }
484
+
485
+ type StatusValue = 'status-value:pending' | 'status-value:success' | 'status-value:error' | 'status-value:warning' | 'status-value:unknown';
486
+ type StatusTypeId = string;
487
+ type StatusByTypeId = Record<StatusTypeId, Status>;
488
+ type StatusesByStoryIdAndTypeId = Record<StoryId, StatusByTypeId>;
489
+ interface Status {
490
+ value: StatusValue;
491
+ typeId: StatusTypeId;
492
+ storyId: StoryId;
493
+ title: string;
494
+ description: string;
495
+ data?: any;
496
+ sidebarContextMenu?: boolean;
497
+ }
498
+ type StatusStore = {
499
+ getAll: () => StatusesByStoryIdAndTypeId;
500
+ set: (statuses: Status[]) => void;
501
+ onAllStatusChange: (listener: (statuses: StatusesByStoryIdAndTypeId, previousStatuses: StatusesByStoryIdAndTypeId) => void) => () => void;
502
+ onSelect: (listener: (selectedStatuses: Status[]) => void) => () => void;
503
+ unset: (storyIds?: StoryId[]) => void;
504
+ };
505
+ type StatusStoreByTypeId = StatusStore & {
506
+ typeId: StatusTypeId;
507
+ };
508
+
509
+ type TestProviderState = 'test-provider-state:pending' | 'test-provider-state:running' | 'test-provider-state:succeeded' | 'test-provider-state:crashed';
510
+ type TestProviderId = string;
511
+ type TestProviderStateByProviderId = Record<TestProviderId, TestProviderState>;
512
+ type TestProviderStoreEventType = 'run-all' | 'clear-all' | 'settings-changed';
513
+ type TestProviderStoreEvent = BaseEvent & {
514
+ type: TestProviderStoreEventType;
515
+ };
516
+ type BaseTestProviderStore = {
517
+ /**
518
+ * Notifies all listeners that settings have changed for test providers. The Storybook UI will
519
+ * highlight the test providers to tell the user that settings has changed.
520
+ */
521
+ settingsChanged: () => void;
522
+ /**
523
+ * Subscribe to clicks on the "Run All" button, that is supposed to trigger all test providers to
524
+ * run. Your test provider should do the "main thing" when this happens, similar to when the user
525
+ * triggers your test provider specifically.
526
+ *
527
+ * @example
528
+ *
529
+ * ```typescript
530
+ * // Subscribe to run-all events
531
+ * const unsubscribe = myTestProviderStore.onRunAll(() => {
532
+ * await runAllMyTests();
533
+ * });
534
+ * ```
535
+ */
536
+ onRunAll: (listener: () => void) => () => void;
537
+ /**
538
+ * Subscribe to clicks on the "Clear All" button, that is supposed to clear all state from test
539
+ * providers. Storybook already clears all statuses, but if your test provider has more
540
+ * non-status-based state, you can use this to clear that here.
541
+ *
542
+ * @remarks
543
+ * The purpose of this is _not_ to clear your test provider's settings, only the test results.
544
+ * @example
545
+ *
546
+ * ```typescript
547
+ * // Subscribe to clear-all events
548
+ * const unsubscribe = myTestProviderStore.onClearAll(() => {
549
+ * clearMyTestResults();
550
+ * });
551
+ *
552
+ * // Later, when no longer needed
553
+ * unsubscribe();
554
+ * ```
555
+ */
556
+ onClearAll: (listener: () => void) => () => void;
557
+ };
558
+ /**
559
+ * Represents a store for a specific test provider, identified by its unique ID. This store provides
560
+ * methods to manage the state of an individual test provider, including getting and setting its
561
+ * state, running operations with automatic state management, and accessing its unique identifier.
562
+ *
563
+ * Each test provider has its own instance of this store, allowing for independent state management
564
+ * across different test providers in the application.
565
+ *
566
+ * @example
567
+ *
568
+ * ```typescript
569
+ * // Get a store for a specific test provider
570
+ * const grammarStore = getTestProviderStoreById('addon-grammar');
571
+ *
572
+ * // Check the current state
573
+ * if (grammarStore.getState() === 'test-provider-state:pending') {
574
+ * console.log('Grammar tests are ready to run');
575
+ * }
576
+ *
577
+ * // Run tests with automatic state management
578
+ * grammarStore.runWithState(async () => {
579
+ * await runGrammarTests();
580
+ * });
581
+ * ```
582
+ *
583
+ * @see {@link TestProviderState} for possible state values
584
+ * @see {@link BaseTestProviderStore} for methods inherited from the base store
585
+ */
586
+ type TestProviderStoreById = BaseTestProviderStore & {
587
+ /**
588
+ * Gets the current state of this specific test provider
589
+ *
590
+ * The state represents the current execution status of the test provider, which can be one of the
591
+ * following:
592
+ *
593
+ * - 'test-provider-state:pending': Tests have not been run yet
594
+ * - 'test-provider-state:running': Tests are currently running
595
+ * - 'test-provider-state:succeeded': Tests completed successfully
596
+ * - 'test-provider-state:crashed': Running tests failed or encountered an error
597
+ *
598
+ * Storybook UI will use this state to determine what to show in the UI.
599
+ *
600
+ * @remarks
601
+ * The 'test-provider-state:crashed' is meant to signify that the test run as a whole failed to
602
+ * execute for some reason. It should _not_ be set just because a number of tests failed, use
603
+ * statuses and the status store for that. See {@link TestStatusStore} for managing individual test
604
+ * statuses.
605
+ * @example
606
+ *
607
+ * ```typescript
608
+ * // Get the current state of a specific test provider
609
+ * const state = testProviderStore.getState();
610
+ *
611
+ * // Conditionally render UI based on the state
612
+ * const TestStatus = () => {
613
+ * const state = testProviderStore.getState();
614
+ *
615
+ * if (state === 'test-provider-state:running') {
616
+ * return <Spinner />;
617
+ * } else if (state === 'test-provider-state:succeeded') {
618
+ * return <SuccessIcon />;
619
+ * } else if (state === 'test-provider-state:crashed') {
620
+ * return <ErrorIcon />;
621
+ * }
622
+ *
623
+ * return <PendingIcon />;
624
+ * };
625
+ * ```
626
+ */
627
+ getState: () => TestProviderState;
628
+ /**
629
+ * Sets the state of this specific test provider
630
+ *
631
+ * This method allows you to manually update the execution state of the test provider. It's
632
+ * typically used when you need to reflect the current status of test execution in the UI or when
633
+ * you want to programmatically control the test provider's state.
634
+ *
635
+ * Common use cases include:
636
+ *
637
+ * - Setting to 'running' when tests start
638
+ * - Setting to 'succeeded' when tests complete successfully
639
+ * - Setting to 'crashed' when tests fail or encounter errors
640
+ * - Setting to 'pending' to reset the state
641
+ *
642
+ * The state represents the current execution status of the test provider, which can be one of the
643
+ * following:
644
+ *
645
+ * - 'test-provider-state:pending': Tests have not been run yet
646
+ * - 'test-provider-state:running': Tests are currently running
647
+ * - 'test-provider-state:succeeded': Tests completed successfully
648
+ * - 'test-provider-state:crashed': Running tests failed or encountered an error
649
+ *
650
+ * Storybook UI will use this state to determine what to show in the UI.
651
+ *
652
+ * @remarks
653
+ * The 'test-provider-state:crashed' is meant to signify that the test run as a whole failed to
654
+ * execute for some reason. It should _not_ be set just because a number of tests failed, use
655
+ * statuses and the status store for that. See {@link TestStatusStore} for managing individual test
656
+ * statuses.
657
+ *
658
+ * For most use cases, consider using {@link runWithState} instead, which provides automatic state
659
+ * management and error handling during test execution.
660
+ * @example
661
+ *
662
+ * ```typescript
663
+ * // Update the state when tests start running
664
+ * const startTests = async () => {
665
+ * testProviderStore.setState('test-provider-state:running');
666
+ * ... run tests ...
667
+ * };
668
+ * ```
669
+ */
670
+ setState: (state: TestProviderState) => void;
671
+ /**
672
+ * Runs a callback and automatically updates the test provider's state with running, succeeded or
673
+ * crashed, depending on the end result.
674
+ *
675
+ * - Immediately changes the state to 'running'
676
+ * - If the callback returns/resolves, change the state to 'succeeded'.
677
+ * - If the callback throws an error/rejects, change the state to 'crashed'.
678
+ *
679
+ * This approach helps prevent state inconsistencies that might occur if exceptions are thrown
680
+ * during test execution.
681
+ *
682
+ * @example
683
+ *
684
+ * ```typescript
685
+ * // Run tests with automatic state management
686
+ * const runTests = () => {
687
+ * testProviderStore.runWithState(async () => {
688
+ * // The state is automatically set to 'running' before this callback
689
+ *
690
+ * // Run tests here...
691
+ * const results = await executeTests();
692
+ * });
693
+ * };
694
+ * ```
695
+ */
696
+ runWithState: (callback: () => void | Promise<void>) => Promise<void>;
697
+ /** The unique identifier for this test provider */
698
+ testProviderId: TestProviderId;
699
+ };
700
+
701
+ declare const fullStatusStore: StatusStore & {
702
+ selectStatuses: (statuses: Status[]) => void;
703
+ typeId: undefined;
704
+ };
705
+ declare const getStatusStoreByTypeId: (typeId: StatusTypeId) => StatusStoreByTypeId;
706
+
707
+ declare const fullTestProviderStore: {
708
+ settingsChanged: () => void;
709
+ onRunAll: (listener: () => void) => () => void;
710
+ onClearAll: (listener: () => void) => () => void;
711
+ } & {
712
+ getFullState: UniversalStore<TestProviderStateByProviderId, TestProviderStoreEvent>["getState"];
713
+ setFullState: UniversalStore<TestProviderStateByProviderId, TestProviderStoreEvent>["setState"];
714
+ onSettingsChanged: (listener: (testProviderId: TestProviderId) => void) => () => void;
715
+ runAll: () => void;
716
+ clearAll: () => void;
717
+ };
718
+ declare const getTestProviderStoreById: (testProviderId: TestProviderId) => TestProviderStoreById;
719
+
720
+ export { type BuildIndexOptions, type BuildStaticStandaloneOptions, StoryIndexGenerator, build, buildDevStandalone, buildIndex, buildIndexStandalone, buildStaticStandalone, MockUniversalStore as experimental_MockUniversalStore, UniversalStore as experimental_UniversalStore, getStatusStoreByTypeId as experimental_getStatusStore, getTestProviderStoreById as experimental_getTestProviderStore, loadStorybook as experimental_loadStorybook, getErrorLevel, fullStatusStore as internal_fullStatusStore, fullTestProviderStore as internal_fullTestProviderStore, mapStaticDir, sendTelemetryError, withTelemetry };