Merge branch 'next' into future/base

# Conflicts: # lib/cli/src/generators/baseGenerator.ts # renderers/svelte/src/docs/extractArgTypes.ts # renderers/svelte/src/render.ts
storybookjs · Jul 7, 2022 · 5683419 · 5683419
2 parents 49bdd7b + 7ca3a53
commit 5683419
Show file tree

Hide file tree

Showing 13 changed files with 39 additions and 49 deletions.
diff --git a/docs/configure/overview.md b/docs/configure/overview.md
@@ -158,7 +158,9 @@ If you would like, you can also write your Storybook configuration using TypeScr
 
 <!-- prettier-ignore-end -->
 
-This babel config will only be used to process files in the `.storybook/` directory, and will not affect your stories.
+This babel config will be used to process your stories, as well as your config files.
+
+Alternatively, you can install [`ts-node`](https://typestrong.org/ts-node/) in your project, which will be used to process your config files without the need for a `.babelrc`.
 
 Rename your `.storybook/main.js` to `.storybook/main.ts` and restart your Storybook.
 
@@ -178,20 +180,20 @@ See the vite builder [TypeScript documentation](https://github.com/storybookjs/b
 
 <!-- prettier-ignore-end -->
 
-| Configuration element | Description                                                                                                                                                                      |
-| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `stories`             | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts`                                                            |
-| `staticDirs`          | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook <br/> `staticDirs:['../public']` |
-| `addons`              | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']`                                                   |
-| `typescript`          | Configures how Storybook handles [TypeScript files](./typescript.md) <br/> `typescript: { check: false, checkOptions: {} }`                                                      |
-| `framework`           | Configures Storybook based on a set of framework-specific settings <br/> `framework:'@storybook/svelte'`                                                                         |
-| `core`                | Configures Storybook's internal features.<br/> `core: { builder: 'webpack5' }`                                                                                                   |
-| `features`            | Enables Storybook's additional features.<br/> See table below for a list of available features `features: { storyStoreV7: true }`                                                |
-| `refs`                | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }`                      |
-| `logLevel`            | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'`                                                                              |
-| `webpackFinal`        | Customize Storybook's [Webpack](../builders/webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }`                                                     |
+| Configuration element | Description                                                                                                                                                                                              |
+| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `stories`             | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts`                                                                                    |
+| `staticDirs`          | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook <br/> `staticDirs:['../public']`                         |
+| `addons`              | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']`                                                                           |
+| `typescript`          | Configures how Storybook handles [TypeScript files](./typescript.md) <br/> `typescript: { check: false, checkOptions: {} }`                                                                              |
+| `framework`           | Configures Storybook based on a set of framework-specific settings <br/> `framework:'@storybook/svelte'`                                                                                                 |
+| `core`                | Configures Storybook's internal features.<br/> `core: { builder: 'webpack5' }`                                                                                                                           |
+| `features`            | Enables Storybook's additional features.<br/> See table below for a list of available features `features: { storyStoreV7: true }`                                                                        |
+| `refs`                | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }`                                              |
+| `logLevel`            | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'`                                                                                                      |
+| `webpackFinal`        | Customize Storybook's [Webpack](../builders/webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }`                                                                             |
 | `viteFinal`           | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite) <br/> `viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` |
-| `env`                 | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration). <br/> `env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` |
+| `env`                 | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration). <br/> `env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),`                         |
 
 ## Configure story rendering
 

diff --git a/docs/snippets/common/storybook-ts-config-babelrc.js.mdx b/docs/snippets/common/storybook-ts-config-babelrc.js.mdx
@@ -3,7 +3,6 @@
 
 {
   "presets": [
-    "@babel/preset-env",
     "@babel/preset-typescript"
   ]
 }

diff --git a/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte b/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <h1>Button view</h1>
-<Button {rounded} on:click={handleClick}>{text}: {count}</Button>
+<Button {rounded} on:click on:click={handleClick}>{text}: {count}</Button>
 <p>A little text to show this is a view.</p>
 <p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
 <p>then wrapping the component up in a view</p>

diff --git a/frameworks/angular/src/builders/build-storybook/index.spec.ts b/frameworks/angular/src/builders/build-storybook/index.spec.ts
@@ -177,8 +177,6 @@ describe('Build Storybook Builder', () => {
       ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'],
       {
         cwd: '',
-        env: process.env,
-        shell: true,
       }
     );
     expect(buildStandaloneMock).toHaveBeenCalledWith({

diff --git a/frameworks/angular/src/builders/start-storybook/index.spec.ts b/frameworks/angular/src/builders/start-storybook/index.spec.ts
@@ -159,8 +159,6 @@ describe('Start Storybook Builder', () => {
       ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'],
       {
         cwd: '',
-        env: process.env,
-        shell: true,
       }
     );
     expect(buildStandaloneMock).toHaveBeenCalledWith({

diff --git a/frameworks/angular/src/builders/utils/run-compodoc.spec.ts b/frameworks/angular/src/builders/utils/run-compodoc.spec.ts
@@ -20,10 +20,7 @@ const builderContextLoggerMock: LoggerApi = {
 };
 
 describe('runCompodoc', () => {
-  const originalEnv = process.env;
-
   beforeEach(() => {
-    process.env = { FOO: 'bar' };
     cpSpawnMock.spawn.mockImplementation(() => ({
       stdout: { on: () => {} },
       stderr: { on: () => {} },
@@ -32,7 +29,6 @@ describe('runCompodoc', () => {
   });
 
   afterEach(() => {
-    process.env = originalEnv;
     jest.clearAllMocks();
   });
 
@@ -55,8 +51,6 @@ describe('runCompodoc', () => {
       ['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/project'],
       {
         cwd: 'path/to/project',
-        env: { FOO: 'bar' },
-        shell: true,
       }
     );
   });
@@ -80,8 +74,6 @@ describe('runCompodoc', () => {
       ['compodoc', '-d', 'path/to/project', '-p', 'path/to/tsconfig.stories.json'],
       {
         cwd: 'path/to/project',
-        env: { FOO: 'bar' },
-        shell: true,
       }
     );
   });

diff --git a/frameworks/angular/src/builders/utils/run-compodoc.ts b/frameworks/angular/src/builders/utils/run-compodoc.ts
@@ -30,8 +30,6 @@ export const runCompodoc = (
       context.logger.info(finalCompodocArgs.join(' '));
       const child = spawn('npx', finalCompodocArgs, {
         cwd: context.workspaceRoot,
-        env: process.env,
-        shell: true,
       });
 
       child.stdout.on('data', (data) => {

diff --git a/lib/channel-postmessage/src/index.ts b/lib/channel-postmessage/src/index.ts
@@ -36,7 +36,9 @@ export class PostmsgTransport {
   constructor(private readonly config: Config) {
     this.buffer = [];
     this.handler = null;
-    globalWindow.addEventListener('message', this.handleEvent.bind(this), false);
+    if (globalWindow) {
+      globalWindow.addEventListener('message', this.handleEvent.bind(this), false);
+    }
 
     // Check whether the config.page parameter has a valid value
     if (config.page !== 'manager' && config.page !== 'preview') {

diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts
@@ -131,7 +131,6 @@ export async function baseGenerator(
   const addonPackages = [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-actions',
     ...extraAddonPackages,
   ];
 

diff --git a/renderers/svelte/src/docs/extractArgTypes.test.ts b/renderers/svelte/src/docs/extractArgTypes.test.ts
@@ -66,26 +66,22 @@ describe('Extracting Arguments', () => {
     expect(results).toMatchInlineSnapshot(`
       Object {
         "event_afterUpdate": Object {
+          "action": "afterUpdate",
+          "control": false,
           "description": "After Update",
           "name": "afterUpdate",
           "table": Object {
             "category": "events",
           },
-          "type": Object {
-            "name": "other",
-            "value": "void",
-          },
         },
         "event_click": Object {
+          "action": "click",
+          "control": false,
           "description": "Click Event",
           "name": "click",
           "table": Object {
             "category": "events",
           },
-          "type": Object {
-            "name": "other",
-            "value": "void",
-          },
         },
         "rounded": Object {
           "control": Object {
@@ -108,17 +104,14 @@ describe('Extracting Arguments', () => {
           },
         },
         "slot_default": Object {
+          "control": false,
           "description": "Default Slot
 
       \`{rounded}\`",
           "name": "default",
           "table": Object {
             "category": "slots",
           },
-          "type": Object {
-            "name": "other",
-            "value": "void",
-          },
         },
         "text": Object {
           "control": Object {

diff --git a/renderers/svelte/src/docs/extractArgTypes.ts b/renderers/svelte/src/docs/extractArgTypes.ts
@@ -59,8 +59,9 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
     docgen.events.forEach((item) => {
       results[`event_${item.name}`] = {
         name: item.name,
-        description: item.description || undefined,
-        type: { name: 'other', value: 'void' },
+        action: item.name,
+        control: false,
+        ...(item.description ? { description: item.description } : {}),
         table: {
           category: 'events',
         },
@@ -72,10 +73,10 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
     docgen.slots.forEach((item) => {
       results[`slot_${item.name}`] = {
         name: item.name,
+        control: false,
         description: [item.description, item.params?.map((p) => `\`${p.name}\``).join(' ')]
           .filter((p) => p)
           .join('\n\n'),
-        type: { name: 'other', value: 'void' },
         table: {
           category: 'slots',
         },

diff --git a/renderers/svelte/src/render.ts b/renderers/svelte/src/render.ts
@@ -20,7 +20,7 @@ function cleanUpPreviousStory() {
 }
 
 export function renderToDOM(
-  { storyFn, kind, name, showMain, showError }: RenderContext<SvelteFramework>,
+  { storyFn, kind, name, showMain, showError, storyContext }: RenderContext<SvelteFramework>,
   domElement: Element
 ) {
   cleanUpPreviousStory();
@@ -33,6 +33,7 @@ export function renderToDOM(
     target,
     props: {
       storyFn,
+      storyContext,
       name,
       kind,
       showError,

diff --git a/renderers/svelte/templates/PreviewRender.svelte b/renderers/svelte/templates/PreviewRender.svelte
@@ -6,6 +6,7 @@
   export let kind;
   export let storyFn;
   export let showError;
+  export let storyContext;
 
   const {
     /** @type {SvelteComponent} */
@@ -18,6 +19,12 @@
     WrapperData = {},
   } = storyFn(); 
 
+   const eventsFromArgTypes = Object.fromEntries(Object.entries(storyContext.argTypes)
+      .filter(([k, v]) => v.action && props[k] != null)
+      .map(([k, v]) => [v.action, props[k]]));
+    
+  const events = {...eventsFromArgTypes, ...on};
+
   if (!Component) {
     showError({
       title: `Expecting a Svelte component from the story: "${name}" of "${kind}".`,
@@ -34,4 +41,4 @@
   decoratorProps={WrapperData}
   component={Component}
   props={props}
-  {on}/>
+  on={events}/>
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,6 @@ @@
     {
       "presets": [
-        "@babel/preset-env",
         "@babel/preset-typescript"
       ]
     }
@@ Expand Down @@