Merge branch 'next' into tech/refactor-simplified-addons-api

.circleci/config.yml

@@ -6,7 +6,7 @@ executors:
       class:
         description: The Resource class
         type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
+        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
         default: 'medium'
     working_directory: /tmp/storybook
     docker:
@@ -19,7 +19,7 @@ executors:
       class:
         description: The Resource class
         type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
+        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
         default: 'medium'
     working_directory: /tmp/storybook
     docker:
@@ -32,7 +32,7 @@ executors:
       class:
         description: The Resource class
         type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
+        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
         default: 'medium'
     working_directory: /tmp/storybook
     docker:
@@ -134,7 +134,7 @@ jobs:
             yarn packtracker
   examples:
     executor:
-      class: medium
+      class: medium+
       name: sb_node_14_browsers
     parallelism: 17
     steps:

.github/workflows/cron-weekly.yml

@@ -0,0 +1,19 @@
+name: Markdown Links Check
+# runs every monday at 9 am
+on:
+  schedule:
+    - cron: "0 9 * * 1"
+
+jobs:
+  check-links:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: gaurav-nelson/github-action-markdown-link-check@v1
+        # checks all markdown files from important folders including all subfolders
+        with:
+          # only show errors that occur instead of successful links + errors
+          use-quiet-mode: 'yes'
+          # output full HTTP info for broken links
+          use-verbose-mode: 'yes'
+          config-file: '.github/workflows/markdown-link-check-config.json'

.github/workflows/markdown-link-check-config.json

@@ -0,0 +1,19 @@
+{
+  "replacementPatterns": [
+    {
+      "pattern": "^/",
+      "replacement": "./"
+    }
+  ],
+  "ignorePatterns": [
+    {
+      "pattern": "localhost"
+    },
+    {
+      "pattern": "https://github.com/storybookjs/storybook/pull/*"
+    },
+    {
+      "pattern": "https://stackblitz.com/*"
+    }
+  ]
+}

RELEASES.md

@@ -114,5 +114,5 @@ in a patch release.
 #### How does my PR get merged?
 
 - For PATCH PR's, any maintainer can review, test, approve, and merge it.
-- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, s/he should clear it with the other maintainers before merging it into the release branch.
+- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, they should clear it with the other maintainers before merging it into the release branch.
 - Once a release date has been set and we cut off merging, we'll create a temporary branch to hold that release so that it doesn't block merging to `next`.

lib/cli/src/generators/baseGenerator.ts

@@ -1,4 +1,5 @@
 import fse from 'fs-extra';
+import dedent from 'ts-dedent';
 import { getStorybookBabelDependencies } from '@storybook/core-common';
 import { NpmOptions } from '../NpmOptions';
 import { SupportedLanguage, SupportedFrameworks, Builder, CoreBuilder } from '../project_types';
@@ -51,6 +52,8 @@ const builderDependencies = (builder: Builder) => {
       return [];
     case CoreBuilder.Webpack5:
       return ['@storybook/builder-webpack5', '@storybook/manager-webpack5'];
+    case CoreBuilder.Vite:
+      return ['@storybook/builder-vite'];
     default:
       return [builder];
   }
@@ -121,11 +124,15 @@ export async function baseGenerator(
 
   const versionedPackages = await packageManager.getVersionedPackages(...packages);
 
+  const coreBuilders = [CoreBuilder.Webpack4, CoreBuilder.Webpack5, CoreBuilder.Vite] as string[];
+  const expandedBuilder = coreBuilders.includes(builder)
+    ? `@storybook/builder-${builder}`
+    : builder;
   const mainOptions =
     builder !== CoreBuilder.Webpack4
       ? {
           core: {
-            builder,
+            builder: expandedBuilder,
           },
           ...extraMain,
         }
@@ -141,6 +148,16 @@ export async function baseGenerator(
     copyComponents(framework, language);
   }
 
+  // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
+  if (expandedBuilder === '@storybook/builder-vite') {
+    const previewHead = dedent`
+      <script>
+        window.global = window;
+      </script>
+    `;
+    await fse.writeFile(`.storybook/preview-head.html`, previewHead, { encoding: 'utf8' });
+  }
+
   const babelDependencies = addBabel ? await getBabelDependencies(packageManager, packageJson) : [];
   if (isNewFolder) {
     babelDependencies.push(...getStorybookBabelDependencies());

lib/cli/src/project_types.ts

@@ -81,6 +81,7 @@ export const SUPPORTED_FRAMEWORKS: SupportedFrameworks[] = [
 export enum CoreBuilder {
   Webpack4 = 'webpack4',
   Webpack5 = 'webpack5',
+  Vite = 'vite',
 }
 
 // The `& {}` bit allows for auto-complete, see: https://github.com/microsoft/TypeScript/issues/29729

lib/core-server/src/utils/get-manager-builder.ts

@@ -14,10 +14,9 @@ export async function getManagerBuilder(configDir: Options['configDir']) {
   // - Everything else builds with `manager-webpack4`
   //
   // Unlike preview builders, manager building is not pluggable!
-  const builderPackage =
-    builderName === 'webpack5'
-      ? require.resolve('@storybook/manager-webpack5', { paths: [main] })
-      : '@storybook/manager-webpack4';
+  const builderPackage = ['webpack5', '@storybook/builder-webpack5'].includes(builderName)
+    ? require.resolve('@storybook/manager-webpack5', { paths: [main] })
+    : '@storybook/manager-webpack4';
 
   const managerBuilder = await import(builderPackage);
   return managerBuilder;

scripts/bootstrap.js

@@ -124,7 +124,7 @@ function run() {
       defaultValue: false,
       option: '--reg',
       command: () => {
-        spawn('yarn local-registry --publish --open');
+        spawn('yarn local-registry --publish --open --port 6000');
       },
       order: 11,
     }),