Merge pull request #24453 from storybookjs/valentin/setup-sandboxes

Sandbox: Add new sandboxes

.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/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/lib/cli/src/sandbox-templates.ts

@@ -137,6 +137,17 @@ const baseTemplates = {
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
+  'nextjs/prerelease': {
+    name: 'Next.js Prerelease (Webpack | TypeScript)',
+    script:
+      'npx create-next-app@canary {{beforeDir}} --typescript --eslint --tailwind --app --import-alias="@/*" --src-dir',
+    expected: {
+      framework: '@storybook/nextjs',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-webpack5',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
   'react-vite/default-js': {
     name: 'React Latest (Vite | JavaScript)',
     script: 'npm create vite@latest --yes {{beforeDir}} -- --template react',
@@ -296,8 +307,6 @@ const baseTemplates = {
       builder: '@storybook/builder-webpack5',
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
-    // TODO: Should be removed after we merge this PR: https://github.com/storybookjs/storybook/pull/24188
-    inDevelopment: true,
   },
   'angular-cli/default-ts': {
     name: 'Angular CLI Latest (Webpack | TypeScript)',
@@ -586,8 +595,7 @@ export const merged: TemplateKey[] = [
 ];
 export const daily: TemplateKey[] = [
   ...merged,
-  // TODO: Should be re-added after we merge this PR: https://github.com/storybookjs/storybook/pull/24188
-  // 'angular-cli/prerelease',
+  'angular-cli/prerelease',
   'cra/default-js',
   'react-vite/default-js',
   'vue3-vite/default-js',
@@ -598,6 +606,7 @@ export const daily: TemplateKey[] = [
   'svelte-vite/default-js',
   'nextjs/12-js',
   'nextjs/default-js',
+  'nextjs/prerelease',
   'qwik-vite/default-ts',
   'preact-webpack5/default-js',
   'preact-vite/default-js',