Merge pull request #21227 from storybookjs/rollback-preview-ts-template

Core: Add `preview.js` default export support

.circleci/config.yml

@@ -549,23 +549,23 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build
       - build-sandboxes:
-          parallelism: 9
+          parallelism: 8
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
   merged:
@@ -599,23 +599,23 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 18
+          parallelism: 17
           requires:
             - build
       - build-sandboxes:
-          parallelism: 18
+          parallelism: 17
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 18
+          parallelism: 17
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 18
+          parallelism: 17
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 18
+          parallelism: 17
           requires:
             - build-sandboxes
   daily:
@@ -633,25 +633,25 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 31
+          parallelism: 29
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 31
+          parallelism: 29
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 31
+          parallelism: 29
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 31
+          parallelism: 29
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 31
+          parallelism: 29
           requires:
             - build-sandboxes

code/lib/builder-vite/src/codegen-iframe-script.ts

@@ -51,7 +51,7 @@ export async function generateIframeScriptCode(options: Options) {
       .concat('preview.default')
       .join(',')}].filter(Boolean)
 
-    configs.forEach(config => {
+    configs.map(config => config.default ? config.default : config).forEach(config => {
       Object.keys(config).forEach((key) => {
         const value = config[key];
         switch (key) {

code/lib/builder-webpack5/templates/virtualModuleEntry.template.js

@@ -12,8 +12,10 @@ import {
 } from '@storybook/preview-api';
 import * as previewAnnotations from '{{previewAnnotationFilename}}';
 
-Object.keys(previewAnnotations).forEach((key) => {
-  const value = previewAnnotations[key];
+const config = previewAnnotations.default ?? previewAnnotations;
+
+Object.keys(config).forEach((key) => {
+  const value = config[key];
   switch (key) {
     case 'args': {
       return addArgs(value);

code/lib/cli/src/generators/baseGenerator.ts

@@ -311,6 +311,7 @@ export async function baseGenerator(
     const templateLocation = hasFrameworkTemplates(framework) ? framework : rendererId;
     await copyTemplateFiles({
       renderer: templateLocation,
+      packageManager,
       language,
       destination: componentsDestinationPath,
     });

code/lib/cli/src/helpers.test.ts

@@ -32,6 +32,10 @@ jest.mock('path', () => {
   };
 });
 
+const packageManagerMock = {
+  retrievePackageJson: () => ({ dependencies: {}, devDependencies: {} }),
+} as JsPackageManager;
+
 describe('Helpers', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -80,7 +84,11 @@ describe('Helpers', () => {
         (filePath) =>
           componentsDirectory.includes(filePath) || filePath === '@storybook/react/template/cli'
       );
-      await helpers.copyTemplateFiles({ renderer: 'react', language });
+      await helpers.copyTemplateFiles({
+        renderer: 'react',
+        language,
+        packageManager: packageManagerMock,
+      });
 
       const copySpy = jest.spyOn(fse, 'copy');
       expect(copySpy).toHaveBeenNthCalledWith(
@@ -99,23 +107,35 @@ describe('Helpers', () => {
     (fse.pathExists as jest.Mock).mockImplementation((filePath) => {
       return filePath === '@storybook/react/template/cli' || filePath === './src';
     });
-    await helpers.copyTemplateFiles({ renderer: 'react', language: SupportedLanguage.JAVASCRIPT });
+    await helpers.copyTemplateFiles({
+      renderer: 'react',
+      language: SupportedLanguage.JAVASCRIPT,
+      packageManager: packageManagerMock,
+    });
     expect(fse.copy).toHaveBeenCalledWith(expect.anything(), './src/stories', expect.anything());
   });
 
   it(`should copy to root folder when src doesn't exist`, async () => {
     (fse.pathExists as jest.Mock).mockImplementation((filePath) => {
       return filePath === '@storybook/react/template/cli';
     });
-    await helpers.copyTemplateFiles({ renderer: 'react', language: SupportedLanguage.JAVASCRIPT });
+    await helpers.copyTemplateFiles({
+      renderer: 'react',
+      language: SupportedLanguage.JAVASCRIPT,
+      packageManager: packageManagerMock,
+    });
     expect(fse.copy).toHaveBeenCalledWith(expect.anything(), './stories', expect.anything());
   });
 
   it(`should throw an error for unsupported renderer`, async () => {
     const renderer = 'unknown renderer' as SupportedRenderers;
     const expectedMessage = `Unsupported renderer: ${renderer}`;
     await expect(
-      helpers.copyTemplateFiles({ renderer, language: SupportedLanguage.JAVASCRIPT })
+      helpers.copyTemplateFiles({
+        renderer,
+        language: SupportedLanguage.JAVASCRIPT,
+        packageManager: packageManagerMock,
+      })
     ).rejects.toThrowError(expectedMessage);
   });
 

code/lib/cli/src/helpers.ts

@@ -187,7 +187,7 @@ export function copyTemplate(templateRoot: string, destination = '.') {
 }
 
 type CopyTemplateFilesOptions = {
-  packageManager?: JsPackageManager;
+  packageManager: JsPackageManager;
   renderer: SupportedFrameworks | SupportedRenderers;
   language: SupportedLanguage;
   includeCommonAssets?: boolean;

code/lib/cli/src/sandbox-templates.ts

@@ -436,7 +436,7 @@ export const pr: TemplateKey[] = [
   ...ci,
   'angular-cli/default-ts',
   'vue3-vite/default-ts',
-  'vue-cli/vue2-default-js',
+  // 'vue-cli/vue2-default-js',
   'lit-vite/default-ts',
   'svelte-vite/default-ts',
   'svelte-kit/skeleton-ts',
@@ -460,7 +460,7 @@ export const daily: TemplateKey[] = [
   'react-vite/default-js',
   'vue3-vite/default-js',
   'vue2-vite/2.7-js',
-  'vue-cli/default-js',
+  // 'vue-cli/default-js',
   'lit-vite/default-js',
   'svelte-kit/skeleton-js',
   'svelte-vite/default-js',

code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts

@@ -42,20 +42,89 @@ describe('composeConfigs', () => {
     });
   });
 
+  it('composes export defaults', () => {
+    expect(
+      composeConfigs([
+        {
+          default: {
+            parameters: { obj: { a: '1', b: '1' } },
+          },
+        },
+        {
+          default: {
+            parameters: { obj: { a: '2', c: '2' } },
+          },
+        },
+      ])
+    ).toEqual({
+      parameters: { obj: { a: '2', b: '1', c: '2' } },
+      decorators: [],
+      args: {},
+      argsEnhancers: [],
+      argTypes: {},
+      argTypesEnhancers: [],
+      globals: {},
+      globalTypes: {},
+      loaders: [],
+      runStep: expect.any(Function),
+    });
+  });
+
   it('overrides object fields by key', () => {
     expect(
       composeConfigs([
         {
-          args: { x: '1', y: '1', obj: { a: '1', b: '1' } },
-          argTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
-          globals: { x: '1', y: '1', obj: { a: '1', b: '1' } },
-          globalTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
+          default: {
+            args: { x: '1', y: '1', obj: { a: '1', b: '1' } },
+            argTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
+            globals: { x: '1', y: '1', obj: { a: '1', b: '1' } },
+            globalTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
+          },
+        },
+        {
+          default: {
+            args: { x: '2', z: '2', obj: { a: '2', c: '2' } },
+            argTypes: { x: '2', z: '2', obj: { a: '2', c: '2' } },
+            globals: { x: '2', z: '2', obj: { a: '2', c: '2' } },
+            globalTypes: { x: '2', z: '2', obj: { a: '2', c: '2' } },
+          },
+        },
+      ])
+    ).toEqual({
+      parameters: {},
+      decorators: [],
+      args: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
+      argsEnhancers: [],
+      argTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
+      argTypesEnhancers: [],
+      globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
+      globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
+      loaders: [],
+      runStep: expect.any(Function),
+    });
+  });
+
+  it('overrides object fields by key with mixed named and default exports', () => {
+    expect(
+      // configs could come from user, addons, presets, frameworks.. so they will likely be mixed in format
+      composeConfigs([
+        {
+          default: {
+            args: { x: '1', y: '1', obj: { a: '1', b: '1' } },
+            argTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
+            globals: { x: '1', y: '1', obj: { a: '1', b: '1' } },
+            globalTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
+          },
         },
         {
           args: { x: '2', z: '2', obj: { a: '2', c: '2' } },
           argTypes: { x: '2', z: '2', obj: { a: '2', c: '2' } },
           globals: { x: '2', z: '2', obj: { a: '2', c: '2' } },
-          globalTypes: { x: '2', z: '2', obj: { a: '2', c: '2' } },
+        },
+        {
+          default: {
+            globalTypes: { x: '2', z: '2', obj: { a: '2', c: '2' } },
+          },
         },
       ])
     ).toEqual({

code/lib/preview-api/src/modules/store/csf/composeConfigs.ts

@@ -7,7 +7,7 @@ export function getField<TFieldType = any>(
   moduleExportList: ModuleExports[],
   field: string
 ): TFieldType | TFieldType[] {
-  return moduleExportList.map((xs) => xs[field]).filter(Boolean);
+  return moduleExportList.map((xs) => xs.default?.[field] ?? xs[field]).filter(Boolean);
 }
 
 export function getArrayField<TFieldType = any>(

scripts/sandbox-generators/generate-sandboxes.ts

@@ -142,7 +142,7 @@ const runGenerators = async (
 
         // We do the creation inside a temp dir to avoid yarn container problems
         const createBaseDir = directory();
-        if (!script.includes('yarn')) {
+        if (!script.includes('pnp')) {
           await setupYarn({ cwd: createBaseDir });
         }