Merge branch 'next' into valentin/fix-migration-note

.github/workflows/generate-sandboxes-main.yml

@@ -43,7 +43,7 @@ jobs:
         run: yarn local-registry --open &
         working-directory: ./code
       - name: Wait for registry
-        run: yarn wait-on http://localhost:6001
+        run: yarn wait-on tcp:127.0.0.1:6001
         working-directory: ./code
       - name: Generate
         run: yarn generate-sandboxes --local-registry

.github/workflows/generate-sandboxes-next.yml

@@ -43,7 +43,7 @@ jobs:
         run: yarn local-registry --open &
         working-directory: ./code
       - name: Wait for registry
-        run: yarn wait-on http://localhost:6001
+        run: yarn wait-on tcp:127.0.0.1:6001
         working-directory: ./code
       - name: Generate
         run: yarn generate-sandboxes --local-registry --debug

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 7.6.9
+
+- ConfigFile: Fix export specifiers - [#25590](https://github.com/storybookjs/storybook/pull/25590), thanks [@shilman](https://github.com/shilman)!
+- Webpack5: Make export-order-loader compatible with both esm and cjs - [#25540](https://github.com/storybookjs/storybook/pull/25540), thanks [@mlazari](https://github.com/mlazari)!
+- CLI: Support version specifiers in `init`, `upgrade` and `sandbox` - [#25526](https://github.com/storybookjs/storybook/pull/25526), thanks [@ndelangen](https://github.com/ndelangen), [@jreinhold](https://github.com/jreinhold)!
+
 ## 7.6.8
 
 - Addon-actions: Fix module resolution for react-native - [#25296](https://github.com/storybookjs/storybook/pull/25296), thanks [@dannyhw](https://github.com/dannyhw)!

code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts

@@ -7,8 +7,8 @@ import { stringify } from 'telejson';
 import { ICollection, StoryFnAngularReturnType } from '../types';
 import { getApplication } from './StorybookModule';
 import { storyPropsProvider } from './StorybookProvider';
-import { componentNgModules } from './StorybookWrapperComponent';
 import { PropertyExtractor } from './utils/PropertyExtractor';
+import { queueBootstrapping } from './utils/BootstrapQueue';
 
 type StoryRenderInfo = {
   storyFnAngular: StoryFnAngularReturnType;
@@ -30,35 +30,13 @@ export abstract class AbstractRenderer {
    * Wait and destroy the platform
    */
   public static resetApplications(domNode?: HTMLElement) {
-    componentNgModules.clear();
     applicationRefs.forEach((appRef, appDOMNode) => {
       if (!appRef.destroyed && (!domNode || appDOMNode === domNode)) {
         appRef.destroy();
       }
     });
   }
 
-  /**
-   * Reset compiled components because we often want to compile the same component with
-   * more than one NgModule.
-   */
-  protected static resetCompiledComponents = async () => {
-    try {
-      // Clear global Angular component cache in order to be able to re-render the same component across multiple stories
-      //
-      // References:
-      // https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/webpack/plugins/hmr/hmr-accept.ts#L50
-      // https://github.com/angular/angular/blob/2ebe2bcb2fe19bf672316b05f15241fd7fd40803/packages/core/src/render3/jit/module.ts#L377-L384
-      const { ɵresetCompiledComponents } = await import('@angular/core');
-      ɵresetCompiledComponents();
-    } catch (e) {
-      /**
-       * noop catch
-       * This means angular removed or modified ɵresetCompiledComponents
-       */
-    }
-  };
-
   protected previousStoryRenderInfo = new Map<HTMLElement, StoryRenderInfo>();
 
   // Observable to change the properties dynamically without reloading angular module&component
@@ -77,8 +55,6 @@ export abstract class AbstractRenderer {
 
   protected abstract beforeFullRender(domNode?: HTMLElement): Promise<void>;
 
-  protected abstract afterFullRender(): Promise<void>;
-
   /**
    * Bootstrap main angular module with main component or send only new `props` with storyProps$
    *
@@ -144,18 +120,18 @@ export abstract class AbstractRenderer {
       analyzedMetadata,
     });
 
-    const applicationRef = await bootstrapApplication(application, {
-      ...storyFnAngular.applicationConfig,
-      providers: [
-        storyPropsProvider(newStoryProps$),
-        ...analyzedMetadata.applicationProviders,
-        ...(storyFnAngular.applicationConfig?.providers ?? []),
-      ],
+    const applicationRef = await queueBootstrapping(() => {
+      return bootstrapApplication(application, {
+        ...storyFnAngular.applicationConfig,
+        providers: [
+          storyPropsProvider(newStoryProps$),
+          ...analyzedMetadata.applicationProviders,
+          ...(storyFnAngular.applicationConfig?.providers ?? []),
+        ],
+      });
     });
 
     applicationRefs.set(targetDOMNode, applicationRef);
-
-    await this.afterFullRender();
   }
 
   /**

code/frameworks/angular/src/client/angular-beta/CanvasRenderer.ts

@@ -15,8 +15,4 @@ export class CanvasRenderer extends AbstractRenderer {
   async beforeFullRender(): Promise<void> {
     CanvasRenderer.resetApplications();
   }
-
-  async afterFullRender(): Promise<void> {
-    await AbstractRenderer.resetCompiledComponents();
-  }
 }

code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts

@@ -44,10 +44,6 @@ export class DocsRenderer extends AbstractRenderer {
     DocsRenderer.resetApplications(domNode);
   }
 
-  async afterFullRender(): Promise<void> {
-    await AbstractRenderer.resetCompiledComponents();
-  }
-
   protected override initAngularRootElement(
     targetDOMNode: HTMLElement,
     targetSelector: string

code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts

@@ -224,5 +224,46 @@ describe('RendererFactory', () => {
         );
       });
     });
+
+    describe('when bootstrapping multiple stories in parallel', () => {
+      it('should render both stories', async () => {
+        @Component({ selector: 'foo', template: '🦊' })
+        class FooComponent {}
+
+        const render = await rendererFactory.getRendererInstance(
+          global.document.getElementById('storybook-docs')
+        );
+
+        const targetDOMNode1 = global.document.createElement('div');
+        targetDOMNode1.id = 'story-1';
+        global.document.getElementById('storybook-docs').appendChild(targetDOMNode1);
+
+        const targetDOMNode2 = global.document.createElement('div');
+        targetDOMNode2.id = 'story-2';
+        global.document.getElementById('storybook-docs').appendChild(targetDOMNode2);
+
+        await Promise.all([
+          render.render({
+            storyFnAngular: {},
+            forced: false,
+            component: FooComponent,
+            targetDOMNode: targetDOMNode1,
+          }),
+          render.render({
+            storyFnAngular: {},
+            forced: false,
+            component: FooComponent,
+            targetDOMNode: targetDOMNode2,
+          }),
+        ]);
+
+        expect(global.document.querySelector('#story-1 > story-1').innerHTML).toBe(
+          '<foo>🦊</foo><!--container-->'
+        );
+        expect(global.document.querySelector('#story-2 > story-2').innerHTML).toBe(
+          '<foo>🦊</foo><!--container-->'
+        );
+      });
+    });
   });
 });

code/frameworks/angular/src/client/angular-beta/StorybookWrapperComponent.ts

@@ -31,9 +31,6 @@ const getNonInputsOutputsProps = (
   return Object.keys(props).filter((k) => ![...inputs, ...outputs].includes(k));
 };
 
-// component modules cache
-export const componentNgModules = new Map<any, Type<any>>();
-
 /**
  * Wraps the story template into a component
  */
@@ -60,31 +57,20 @@ export const createStorybookWrapperComponent = ({
 
   const { imports, declarations, providers } = analyzedMetadata;
 
-  // Only create a new module if it doesn't already exist
-  // This is to prevent the module from being recreated on every story change
-  // Declarations & Imports are only added once
-  // Providers are added on every story change to allow for story-specific providers
-  let ngModule = componentNgModules.get(storyComponent);
-
-  if (!ngModule) {
-    @NgModule({
-      declarations,
-      imports,
-      exports: [...declarations, ...imports],
-    })
-    class StorybookComponentModule {}
-
-    componentNgModules.set(storyComponent, StorybookComponentModule);
-    ngModule = componentNgModules.get(storyComponent);
-  }
+  @NgModule({
+    declarations,
+    imports,
+    exports: [...declarations, ...imports],
+  })
+  class StorybookComponentModule {}
 
   PropertyExtractor.warnImportsModuleWithProviders(analyzedMetadata);
 
   @Component({
     selector,
     template,
     standalone: true,
-    imports: [ngModule],
+    imports: [StorybookComponentModule],
     providers,
     styles,
     schemas: moduleMetadata.schemas,