Merge branch 'next' into bugfix/standalone-angular-directives

.circleci/config.yml

@@ -609,30 +609,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 34
+          parallelism: 36
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 34
+          parallelism: 36
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 31
+          parallelism: 33
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 31
+          parallelism: 33
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 4
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 31
+          parallelism: 33
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness

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

@@ -43,7 +43,7 @@ jobs:
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
       - name: Generate
-        run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease
+        run: yarn generate-sandboxes --local-registry
         working-directory: ./code
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=main

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

@@ -43,7 +43,7 @@ jobs:
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
       - name: Generate
-        run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease --debug
+        run: yarn generate-sandboxes --local-registry --debug
         working-directory: ./code
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next

code/builders/builder-vite/package.json

@@ -72,7 +72,7 @@
   "peerDependencies": {
     "@preact/preset-vite": "*",
     "typescript": ">= 4.3.x",
-    "vite": "^3.0.0 || ^4.0.0",
+    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0",
     "vite-plugin-glimmerx": "*"
   },
   "peerDependenciesMeta": {

code/builders/builder-vite/src/build.ts

@@ -1,10 +1,10 @@
-import { build as viteBuild, mergeConfig } from 'vite';
 import type { Options } from '@storybook/types';
 import { commonConfig } from './vite-config';
 
 import { sanitizeEnvVars } from './envs';
 
 export async function build(options: Options) {
+  const { build: viteBuild, mergeConfig } = await import('vite');
   const { presets } = options;
 
   const config = await commonConfig(options, 'build');
@@ -21,6 +21,5 @@ export async function build(options: Options) {
   }).build;
 
   const finalConfig = await presets.apply('viteFinal', config, options);
-
   await viteBuild(await sanitizeEnvVars(options, finalConfig));
 }

code/builders/builder-vite/src/codegen-entries.ts

@@ -1,15 +1,19 @@
 import { loadPreviewOrConfigFile } from '@storybook/core-common';
 import type { Options } from '@storybook/types';
 import slash from 'slash';
-import { normalizePath } from 'vite';
 import { listStories } from './list-stories';
 
-const absoluteFilesToImport = (files: string[], name: string) =>
+const absoluteFilesToImport = async (
+  files: string[],
+  name: string,
+  normalizePath: (id: string) => string
+) =>
   files
     .map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`)
     .join('\n');
 
 export async function generateVirtualStoryEntryCode(options: Options) {
+  const { normalizePath } = await import('vite');
   const storyEntries = await listStories(options);
   const resolveMap = storyEntries.reduce<Record<string, string>>(
     (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }),
@@ -18,7 +22,7 @@ export async function generateVirtualStoryEntryCode(options: Options) {
   const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(',');
 
   return `
-    ${absoluteFilesToImport(storyEntries, 'story')}
+    ${await absoluteFilesToImport(storyEntries, 'story', normalizePath)}
 
     function loadable(key) {
       return {${modules}}[key];

code/builders/builder-vite/src/codegen-importfn-script.ts

@@ -1,5 +1,5 @@
 import * as path from 'path';
-import { normalizePath } from 'vite';
+
 import type { Options } from '@storybook/types';
 import { logger } from '@storybook/node-logger';
 
@@ -26,6 +26,7 @@ function toImportPath(relativePath: string) {
  * @param stories An array of absolute story paths.
  */
 async function toImportFn(stories: string[]) {
+  const { normalizePath } = await import('vite');
   const objectEntries = stories.map((file) => {
     const ext = path.extname(file);
     const relativePath = normalizePath(path.relative(process.cwd(), file));

code/builders/builder-vite/src/list-stories.ts

@@ -4,9 +4,10 @@ import { glob } from 'glob';
 import { normalizeStories, commonGlobOptions } from '@storybook/core-common';
 
 import type { Options } from '@storybook/types';
-import { normalizePath } from 'vite';
 
 export async function listStories(options: Options) {
+  const { normalizePath } = await import('vite');
+
   return (
     await Promise.all(
       normalizeStories(await options.presets.apply('stories', [], options), {

code/builders/builder-vite/src/optimizeDeps.ts

@@ -1,5 +1,4 @@
 import * as path from 'path';
-import { normalizePath, resolveConfig } from 'vite';
 import type { InlineConfig as ViteInlineConfig, UserConfig } from 'vite';
 import type { Options } from '@storybook/types';
 import { listStories } from './list-stories';
@@ -128,6 +127,7 @@ const asyncFilter = async (arr: string[], predicate: (val: string) => Promise<bo
 
 export async function getOptimizeDeps(config: ViteInlineConfig, options: Options) {
   const { root = process.cwd() } = config;
+  const { normalizePath, resolveConfig } = await import('vite');
   const absoluteStories = await listStories(options);
   const stories = absoluteStories.map((storyPath) => normalizePath(path.relative(root, storyPath)));
   // TODO: check if resolveConfig takes a lot of time, possible optimizations here

code/builders/builder-vite/src/plugins/external-globals-plugin.ts

@@ -3,7 +3,6 @@ import findCacheDirectory from 'find-cache-dir';
 import { init, parse } from 'es-module-lexer';
 import MagicString from 'magic-string';
 import { ensureFile, writeFile } from 'fs-extra';
-import { mergeAlias } from 'vite';
 import type { Alias, Plugin } from 'vite';
 
 const escapeKeys = (key: string) => key.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
@@ -38,6 +37,8 @@ const replacementMap = new Map([
  */
 export async function externalGlobalsPlugin(externals: Record<string, string>) {
   await init;
+  const { mergeAlias } = await import('vite');
+
   return {
     name: 'storybook:external-globals-plugin',
     enforce: 'post',

code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts

@@ -1,32 +1,35 @@
 import { parse } from 'es-module-lexer';
 import MagicString from 'magic-string';
-import { createFilter } from 'vite';
 
-const include = [/\.stories\.([tj])sx?$/, /(stories|story).mdx$/];
-const filter = createFilter(include);
+export async function injectExportOrderPlugin() {
+  const { createFilter } = await import('vite');
 
-export const injectExportOrderPlugin = {
-  name: 'storybook:inject-export-order-plugin',
-  // This should only run after the typescript has been transpiled
-  enforce: 'post',
-  async transform(code: string, id: string) {
-    if (!filter(id)) return undefined;
+  const include = [/\.stories\.([tj])sx?$/, /(stories|story).mdx$/];
+  const filter = createFilter(include);
 
-    // TODO: Maybe convert `injectExportOrderPlugin` to function that returns object,
-    //  and run `await init;` once and then call `parse()` without `await`,
-    //  instead of calling `await parse()` every time.
-    const [, exports] = await parse(code);
+  return {
+    name: 'storybook:inject-export-order-plugin',
+    // This should only run after the typescript has been transpiled
+    enforce: 'post',
+    async transform(code: string, id: string) {
+      if (!filter(id)) return undefined;
 
-    if (exports.includes('__namedExportsOrder')) {
-      // user has defined named exports already
-      return undefined;
-    }
-    const s = new MagicString(code);
-    const orderedExports = exports.filter((e) => e !== 'default');
-    s.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`);
-    return {
-      code: s.toString(),
-      map: s.generateMap({ hires: true, source: id }),
-    };
-  },
-};
+      // TODO: Maybe convert `injectExportOrderPlugin` to function that returns object,
+      //  and run `await init;` once and then call `parse()` without `await`,
+      //  instead of calling `await parse()` every time.
+      const [, exports] = await parse(code);
+
+      if (exports.includes('__namedExportsOrder')) {
+        // user has defined named exports already
+        return undefined;
+      }
+      const s = new MagicString(code);
+      const orderedExports = exports.filter((e) => e !== 'default');
+      s.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`);
+      return {
+        code: s.toString(),
+        map: s.generateMap({ hires: true, source: id }),
+      };
+    },
+  };
+}

code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts

@@ -1,13 +1,14 @@
 import type { Plugin } from 'vite';
-import { createFilter } from 'vite';
 import MagicString from 'magic-string';
 
 /**
  * This plugin removes HMR `accept` calls in story files.  Stories should not be treated
  * as hmr boundaries, but vite has a bug which causes them to be treated as boundaries
  * (https://github.com/vitejs/vite/issues/9869).
  */
-export function stripStoryHMRBoundary(): Plugin {
+export async function stripStoryHMRBoundary(): Promise<Plugin> {
+  const { createFilter } = await import('vite');
+
   const filter = createFilter(/\.stories\.([tj])sx?$/);
   return {
     name: 'storybook:strip-hmr-boundary-plugin',

code/builders/builder-vite/src/vite-config.ts

@@ -1,5 +1,4 @@
 import * as path from 'path';
-import { loadConfigFromFile, mergeConfig } from 'vite';
 import findCacheDirectory from 'find-cache-dir';
 import type {
   ConfigEnv,
@@ -41,6 +40,8 @@ export async function commonConfig(
   _type: PluginConfigType
 ): Promise<ViteInlineConfig> {
   const configEnv = _type === 'development' ? configEnvServe : configEnvBuild;
+  const { loadConfigFromFile, mergeConfig } = await import('vite');
+
   const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);
 
   const projectRoot = path.resolve(options.configDir, '..');
@@ -80,8 +81,8 @@ export async function pluginConfig(options: Options) {
   const plugins = [
     codeGeneratorPlugin(options),
     await csfPlugin(options),
-    injectExportOrderPlugin,
-    stripStoryHMRBoundary(),
+    await injectExportOrderPlugin(),
+    await stripStoryHMRBoundary(),
     {
       name: 'storybook:allow-storybook-dir',
       enforce: 'post',

code/builders/builder-vite/src/vite-server.ts

@@ -1,5 +1,4 @@
 import type { Server } from 'http';
-import { createServer } from 'vite';
 import type { Options } from '@storybook/types';
 import { commonConfig } from './vite-config';
 import { getOptimizeDeps } from './optimizeDeps';
@@ -29,5 +28,6 @@ export async function createViteServer(options: Options, devServer: Server) {
 
   const finalConfig = await presets.apply('viteFinal', config, options);
 
+  const { createServer } = await import('vite');
   return createServer(await sanitizeEnvVars(options, finalConfig));
 }

code/frameworks/nextjs/package.json

@@ -119,7 +119,7 @@
     "@types/babel__core": "^7",
     "@types/babel__plugin-transform-runtime": "^7",
     "@types/babel__preset-env": "^7",
-    "next": "13.4.19",
+    "next": "13.5.4",
     "typescript": "^4.9.3",
     "webpack": "^5.65.0"
   },

code/frameworks/nextjs/src/config/webpack.ts

@@ -48,7 +48,7 @@ const setupRuntimeConfig = (baseConfig: WebpackConfig, nextConfig: NextConfig):
     }),
   };
 
-  const newNextLinkBehavior = nextConfig.experimental?.newNextLinkBehavior;
+  const newNextLinkBehavior = (nextConfig.experimental as any)?.newNextLinkBehavior;
 
   /**
    * In Next 13.0.0 - 13.0.5, the `newNextLinkBehavior` option now defaults to truthy (still

code/frameworks/nextjs/src/dependency-map.ts

@@ -6,17 +6,19 @@ const mapping: Record<string, Record<string, string>> = {
   '<11.1.0': {
     'next/dist/next-server/lib/router-context': 'next/dist/next-server/lib/router-context',
   },
-  '>=11.1.0': {
+  '>=11.1.0 <13.5.0': {
     'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context',
   },
-  '>=13.5.0': {
-    'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context.shared-runtime',
-    'next/dist/shared/lib/head-manager-context':
-      'next/dist/shared/lib/head-manager-context.shared-runtime',
-    'next/dist/shared/lib/app-router-context':
-      'next/dist/shared/lib/app-router-context.shared-runtime',
-    'next/dist/shared/lib/hooks-client-context':
-      'next/dist/shared/lib/hooks-client-context.shared-runtime',
+  '>=13.0.2 <13.5.0': {
+    'next/dist/shared/lib/hooks-client-context.shared-runtime':
+      'next/dist/shared/lib/hooks-client-context',
+  },
+  '<13.5.0': {
+    'next/dist/shared/lib/router-context.shared-runtime': 'next/dist/shared/lib/router-context',
+    'next/dist/shared/lib/head-manager-context.shared-runtime':
+      'next/dist/shared/lib/head-manager-context',
+    'next/dist/shared/lib/app-router-context.shared-runtime':
+      'next/dist/shared/lib/app-router-context',
   },
 };
 

code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context';
+import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context.shared-runtime';
 import initHeadManager from 'next/dist/client/head-manager';
 
 type HeadManagerValue = {

code/frameworks/nextjs/src/routing/app-router-provider.tsx

@@ -3,11 +3,11 @@ import type {
   LayoutRouterContext as TLayoutRouterContext,
   AppRouterContext as TAppRouterContext,
   GlobalLayoutRouterContext as TGlobalLayoutRouterContext,
-} from 'next/dist/shared/lib/app-router-context';
+} from 'next/dist/shared/lib/app-router-context.shared-runtime';
 import type {
   PathnameContext as TPathnameContext,
   SearchParamsContext as TSearchParamsContext,
-} from 'next/dist/shared/lib/hooks-client-context';
+} from 'next/dist/shared/lib/hooks-client-context.shared-runtime';
 import type { FlightRouterState } from 'next/dist/server/app-render/types';
 import type { RouteParams } from './types';
 
@@ -25,12 +25,16 @@ let SearchParamsContext: typeof TSearchParamsContext;
 let GlobalLayoutRouterContext: typeof TGlobalLayoutRouterContext;
 
 try {
-  AppRouterContext = require('next/dist/shared/lib/app-router-context').AppRouterContext;
-  LayoutRouterContext = require('next/dist/shared/lib/app-router-context').LayoutRouterContext;
-  PathnameContext = require('next/dist/shared/lib/hooks-client-context').PathnameContext;
-  SearchParamsContext = require('next/dist/shared/lib/hooks-client-context').SearchParamsContext;
+  AppRouterContext =
+    require('next/dist/shared/lib/app-router-context.shared-runtime').AppRouterContext;
+  LayoutRouterContext =
+    require('next/dist/shared/lib/app-router-context.shared-runtime').LayoutRouterContext;
+  PathnameContext =
+    require('next/dist/shared/lib/hooks-client-context.shared-runtime').PathnameContext;
+  SearchParamsContext =
+    require('next/dist/shared/lib/hooks-client-context.shared-runtime').SearchParamsContext;
   GlobalLayoutRouterContext =
-    require('next/dist/shared/lib/app-router-context').GlobalLayoutRouterContext;
+    require('next/dist/shared/lib/app-router-context.shared-runtime').GlobalLayoutRouterContext;
 } catch {
   AppRouterContext = React.Fragment as any;
   LayoutRouterContext = React.Fragment as any;

code/frameworks/nextjs/src/routing/page-router-provider.tsx

@@ -1,5 +1,5 @@
 import type { Globals } from '@storybook/csf';
-import { RouterContext } from 'next/dist/shared/lib/router-context';
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime';
 import React from 'react';
 import type { RouteParams } from './types';
 

code/frameworks/preact-vite/package.json

@@ -58,7 +58,7 @@
   },
   "peerDependencies": {
     "preact": ">=10",
-    "vite": "^3.0.0 || ^4.0.0"
+    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
   },
   "engines": {
     "node": ">=16"