Merge branch 'next' into patch-4

app/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({

app/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({

app/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,
       }
     );
   });

app/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) => {

app/svelte/package.json

@@ -77,6 +77,11 @@
     "svelte": "^3.1.0",
     "svelte-loader": "*"
   },
+  "peerDependenciesMeta": {
+    "svelte-loader": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=10.13.0"
   },

app/svelte/src/client/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 {

app/svelte/src/client/docs/extractArgTypes.ts

@@ -56,8 +56,9 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
   docgen.events.forEach((item) => {
     results[`event_${item.name}`] = {
       name: item.name,
+      action: item.name,
+      control: false,
       description: item.description,
-      type: { name: 'other', value: 'void' },
       table: {
         category: 'events',
       },
@@ -67,10 +68,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',
       },

app/svelte/src/client/preview/render.ts

@@ -18,7 +18,7 @@ function cleanUpPreviousStory() {
 }
 
 export function renderToDOM(
-  { storyFn, kind, name, showMain, showError }: RenderContext<SvelteFramework>,
+  { storyFn, kind, name, storyContext, showMain, showError }: RenderContext<SvelteFramework>,
   domElement: HTMLElement
 ) {
   cleanUpPreviousStory();
@@ -31,6 +31,7 @@ export function renderToDOM(
     target,
     props: {
       storyFn,
+      storyContext,
       name,
       kind,
       showError,

app/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}/>

docs/addons/addons-api.md

@@ -235,7 +235,6 @@ Let's say you've got a story like this:
     'vue/button-story-with-addon-example.js.mdx',
     'angular/button-story-with-addon-example.ts.mdx',
     'svelte/button-story-with-addon-example.js.mdx',
-    'svelte/button-story-with-addon-example.native-format.mdx',
   ]}
 />
 

docs/addons/writing-addons.md

@@ -200,7 +200,6 @@ When Storybook was initialized, it provided a small set of example stories. Chan
     'vue/button-story-with-addon-example.js.mdx',
     'angular/button-story-with-addon-example.ts.mdx',
     'svelte/button-story-with-addon-example.js.mdx',
-    'svelte/button-story-with-addon-example.native-format.mdx',
   ]}
 />
 

docs/api/csf.md

@@ -44,7 +44,6 @@ With CSF, every named export in the file represents a story object by default.
     'react/my-component-story-basic-and-props.ts.mdx',
     'vue/my-component-story-basic-and-props.js.mdx',
     'svelte/my-component-story-basic-and-props.js.mdx',
-    'svelte/my-component-story-basic-and-props.native-format.mdx',
     'angular/my-component-story-basic-and-props.ts.mdx',
   ]}
 />
@@ -92,7 +91,6 @@ Consider Storybook’s ["Button" example](../writing-stories/introduction.md#def
     'vue/button-story-click-handler.2.js.mdx',
     'vue/button-story-click-handler.3.js.mdx',
     'svelte/button-story-click-handler.js.mdx',
-    'svelte/button-story-click-handler.native-format.mdx',
     'angular/button-story-click-handler.ts.mdx',
   ]}
 />
@@ -125,7 +123,6 @@ Or even more simply:
     'react/button-story-click-handler-simplificated.js.mdx',
     'angular/button-story-click-handler-simplificated.ts.mdx',
     'vue/button-story-click-handler-simplificated.js.mdx',
-    'svelte/button-story-click-handler-simplificated.native-format.mdx',
   ]}
 />
 
@@ -158,6 +155,28 @@ A good use case for the `play` function is a form component. With previous Story
 
 When the story renders in the UI, Storybook executes each step defined in the `play` function and runs the assertions without the need for user interaction.
 
+## Custom render functions
+
+Starting in Storybook 6.4, you can write your stories as JavaScript objects, reducing the boilerplate code you need to generate to test your components, thus improving functionality and usability. `Render` functions are helpful methods to give you additional control over how the story renders. For example, if you were writing a story as an object and you wanted to specify how your component should render, you could write the following:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+   'react/component-story-with-custom-render-function.js.mdx',
+   'react/component-story-with-custom-render-function.ts.mdx',
+   'angular/component-story-with-custom-render-function.ts.mdx',
+   'vue/component-story-with-custom-render-function.js.mdx',
+   'vue/component-story-with-custom-render-function.ts.mdx',
+   'preact/component-story-with-custom-render-function.js.mdx',
+   'web-components/component-story-with-custom-render-function.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+When Storybook loads this story, it will detect the existence of a `render` function and adjust the component rendering accordingly based on what's defined.
+
 ## Storybook export vs. name handling
 
 Storybook handles named exports and the `name` option slightly differently. When should you use one vs. the other?

docs/api/mdx.md

@@ -44,7 +44,6 @@ For example, here's the story from the `Checkbox` example above, rewritten in CS
     'react/checkbox-story-csf.ts.mdx',
     'vue/checkbox-story-csf.js.mdx',
     'angular/checkbox-story-csf.ts.mdx',
-    'svelte/checkbox-story-csf.native-format.mdx',
   ]}
 />
 

docs/configure/environment-variables.md

@@ -3,7 +3,7 @@ title: 'Environment variables'
 ---
 
 You can use environment variables in Storybook to change its behavior in different “modes”.
-If you supply an environment variable prefixed with `STORYBOOK_`, it will be available in `process.env`:
+If you supply an environment variable prefixed with `STORYBOOK_`, it will be available in `process.env` when using webpack, or `import.meta.env` when using the vite builder:
 
 ```shell
 STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook
@@ -60,7 +60,6 @@ Then you can access this environment variable anywhere, even within your stories
     'angular/my-component-with-env-variables.mdx.mdx',
     'web-components/my-component-with-env-variables.js.mdx',
     'svelte/my-component-with-env-variables.js.mdx',
-    'svelte/my-component-with-env-variables.native-format.mdx',
     'svelte/my-component-with-env-variables.mdx.mdx',
   ]}
 />

docs/configure/images-and-assets.md

@@ -24,7 +24,6 @@ Afterward, you can use any asset in your stories:
     'angular/component-story-static-asset-with-import.ts.mdx',
     'angular/component-story-static-asset-with-import.mdx.mdx',
     'svelte/component-story-static-asset-with-import.js.mdx',
-    'svelte/component-story-static-asset-with-import.native-format.mdx',
     'svelte/component-story-static-asset-with-import.mdx.mdx',
   ]}
 />
@@ -61,7 +60,6 @@ Here `../public` is your static directory. Now use it in a component or story li
     'angular/component-story-static-asset-without-import.ts.mdx',
     'angular/component-story-static-asset-without-import.mdx.mdx',
     'svelte/component-story-static-asset-without-import.js.mdx',
-    'svelte/component-story-static-asset-without-import.native-format.mdx',
     'svelte/component-story-static-asset-without-import.mdx.mdx',
   ]}
 />
@@ -112,7 +110,6 @@ Upload your files to an online CDN and reference them. In this example, we’re
     'angular/component-story-static-asset-cdn.ts.mdx',
     'angular/component-story-static-asset-cdn.mdx.mdx',
     'svelte/component-story-static-asset-cdn.js.mdx',
-    'svelte/component-story-static-asset-cdn.native-format.mdx',
     'svelte/component-story-static-asset-cdn.mdx.mdx',
   ]}
 />

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
 

docs/contribute/new-snippets.md

@@ -47,7 +47,6 @@ Browse the documentation and look for the code snippets you're willing to contri
     'vue/your-component.2.js.mdx',
     'vue/your-component.3.js.mdx',
     'svelte/your-component.js.mdx',
-    'svelte/your-component.native-format.mdx',
     'web-components/your-component.js.mdx',
   ]}
 />
@@ -70,7 +69,6 @@ Create the file `ember/your-component.js.mdx`, similar to the other frameworks,
     'vue/your-component.2.js.mdx',
     'vue/your-component.3.js.mdx',
     'svelte/your-component.js.mdx',
-    'svelte/your-component.native-format.mdx',
     'web-components/your-component.js.mdx',
     'ember/your-component.js.mdx', //👈🏼 The code snippet you created.
   ]}

docs/essentials/controls.md

@@ -119,7 +119,6 @@ Until now, we only used auto-generated controls based on the component we're wri
     'vue/table-story-fully-customize-controls.mdx-3.mdx.mdx',
     'angular/table-story-fully-customize-controls.ts.mdx',
     'angular/table-story-fully-customize-controls.mdx.mdx',
-    'svelte/table-story-fully-customize-controls.native-format.mdx',
   ]}
 />
 
@@ -151,7 +150,6 @@ One way to deal with this is to use primitive values (e.g., strings) as arg valu
     'angular/component-story-custom-args-complex.ts.mdx',
     'angular/component-story-custom-args-complex.mdx.mdx',
     'svelte/component-story-custom-args-complex.js.mdx',
-    'svelte/component-story-custom-args-complex.native-format.mdx',
   ]}
 />
 

docs/essentials/viewport.md

@@ -126,7 +126,6 @@ Update your story through [parameters](../writing-stories/parameters.md) to incl
     'angular/my-component-story-configure-viewports.mdx.mdx',
     'web-components/my-component-story-configure-viewports.js.mdx',
     'svelte/my-component-story-configure-viewports.js.mdx',
-    'svelte/my-component-story-configure-viewports.native-format.mdx',
     'svelte/my-component-story-configure-viewports.mdx.mdx',
   ]}
 />