diff --git a/.circleci/config.yml b/.circleci/config.yml index 9b03dd3739bc..2273bcc5bdf3 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -609,22 +609,22 @@ 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: @@ -632,7 +632,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 31 + parallelism: 33 requires: - build-sandboxes # TODO: reenable once we find out the source of flakyness diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml index 77d3f8c8646d..7d9328578493 100644 --- a/.github/workflows/generate-sandboxes-main.yml +++ b/.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 diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml index 92e79bef6468..8a28c4cbb23a 100644 --- a/.github/workflows/generate-sandboxes-next.yml +++ b/.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 diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 61231c2eb352..c55075c292aa 100644 --- a/code/builders/builder-vite/package.json +++ b/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": { diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts index 0a75cc71b3a2..67da9f989692 100644 --- a/code/builders/builder-vite/src/build.ts +++ b/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)); } diff --git a/code/builders/builder-vite/src/codegen-entries.ts b/code/builders/builder-vite/src/codegen-entries.ts index 6a6328cf8f96..44c3163b1def 100644 --- a/code/builders/builder-vite/src/codegen-entries.ts +++ b/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>( (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]; diff --git a/code/builders/builder-vite/src/codegen-importfn-script.ts b/code/builders/builder-vite/src/codegen-importfn-script.ts index f81c4647f641..5df14d875f25 100644 --- a/code/builders/builder-vite/src/codegen-importfn-script.ts +++ b/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)); diff --git a/code/builders/builder-vite/src/list-stories.ts b/code/builders/builder-vite/src/list-stories.ts index 746373c4c0f5..521952bff15a 100644 --- a/code/builders/builder-vite/src/list-stories.ts +++ b/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), { diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index 43c64f34a7e4..ddb32c800403 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/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 normalizePath(path.relative(root, storyPath))); // TODO: check if resolveConfig takes a lot of time, possible optimizations here diff --git a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts b/code/builders/builder-vite/src/plugins/external-globals-plugin.ts index dd53ab4a4e56..1debc299aa99 100644 --- a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts +++ b/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) { await init; + const { mergeAlias } = await import('vite'); + return { name: 'storybook:external-globals-plugin', enforce: 'post', diff --git a/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts b/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts index 743043f7427c..621dae80e647 100644 --- a/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts +++ b/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 }), + }; + }, + }; +} diff --git a/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts b/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts index 46ca7045e6d5..c249fc523d1a 100644 --- a/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts +++ b/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts @@ -1,5 +1,4 @@ import type { Plugin } from 'vite'; -import { createFilter } from 'vite'; import MagicString from 'magic-string'; /** @@ -7,7 +6,9 @@ import MagicString from 'magic-string'; * 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 { + const { createFilter } = await import('vite'); + const filter = createFilter(/\.stories\.([tj])sx?$/); return { name: 'storybook:strip-hmr-boundary-plugin', diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index dd0bf56d1d05..31e6ac016d19 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/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 { const configEnv = _type === 'development' ? configEnvServe : configEnvBuild; + const { loadConfigFromFile, mergeConfig } = await import('vite'); + const { viteConfigPath } = await getBuilderOptions(options); const projectRoot = path.resolve(options.configDir, '..'); @@ -84,8 +85,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', diff --git a/code/builders/builder-vite/src/vite-server.ts b/code/builders/builder-vite/src/vite-server.ts index 13489d8580e5..ce4631cabaed 100644 --- a/code/builders/builder-vite/src/vite-server.ts +++ b/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)); } diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 891ea29585ee..cbe8a52f0360 100644 --- a/code/frameworks/nextjs/package.json +++ b/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" }, diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts index f5e72bc360d8..9d7c85d8c003 100644 --- a/code/frameworks/nextjs/src/config/webpack.ts +++ b/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 diff --git a/code/frameworks/nextjs/src/dependency-map.ts b/code/frameworks/nextjs/src/dependency-map.ts index 70ad2ece94e0..dd848087f3e3 100644 --- a/code/frameworks/nextjs/src/dependency-map.ts +++ b/code/frameworks/nextjs/src/dependency-map.ts @@ -6,17 +6,19 @@ const mapping: Record> = { '<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', }, }; diff --git a/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx b/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx index 6d8ab263f92c..45c3a4ab4c33 100644 --- a/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx +++ b/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 = { diff --git a/code/frameworks/nextjs/src/routing/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx index e25c2f1488b4..a7f0bd326f9b 100644 --- a/code/frameworks/nextjs/src/routing/app-router-provider.tsx +++ b/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; diff --git a/code/frameworks/nextjs/src/routing/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/page-router-provider.tsx index c882e3bee5b3..e91819fde38e 100644 --- a/code/frameworks/nextjs/src/routing/page-router-provider.tsx +++ b/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'; diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index c33b5b9948b7..5fa528cfe7ee 100644 --- a/code/frameworks/preact-vite/package.json +++ b/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" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 71ea061a59c8..1e622335d41f 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -47,7 +47,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@joshwooding/vite-plugin-react-docgen-typescript": "0.2.1", + "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0", "@rollup/pluginutils": "^5.0.2", "@storybook/builder-vite": "workspace:*", "@storybook/react": "workspace:*", @@ -63,7 +63,7 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "vite": "^3.0.0 || ^4.0.0" + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" }, "engines": { "node": ">=16" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 2200efa272f2..a02162344839 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -63,7 +63,7 @@ }, "peerDependencies": { "svelte": "^3.0.0 || ^4.0.0", - "vite": "^3.0.0 || ^4.0.0" + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" }, "engines": { "node": "^14.18 || >=16" diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index 53a77f737db4..2317827d8d32 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -62,7 +62,7 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "vite": "^3.0.0 || ^4.0.0", + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0", "vue": "^2.7.0" }, "engines": { diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index bd71d67b23c1..57a52ec60845 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -62,7 +62,7 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "vite": "^3.0.0 || ^4.0.0" + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" }, "engines": { "node": "^14.18 || >=16" diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 69e858f1d14f..f9bc041d73f3 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -137,9 +137,20 @@ 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', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template react', expected: { framework: '@storybook/react-vite', renderer: '@storybook/react', @@ -149,7 +160,7 @@ const baseTemplates = { }, 'react-vite/default-ts': { name: 'React Latest (Vite | TypeScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template react-ts', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template react-ts', expected: { framework: '@storybook/react-vite', renderer: '@storybook/react', @@ -204,7 +215,7 @@ const baseTemplates = { }, 'vue3-vite/default-js': { name: 'Vue v3 (Vite | JavaScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template vue', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template vue', expected: { framework: '@storybook/vue3-vite', renderer: '@storybook/vue3', @@ -214,7 +225,7 @@ const baseTemplates = { }, 'vue3-vite/default-ts': { name: 'Vue v3 (Vite | TypeScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template vue-ts', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template vue-ts', expected: { framework: '@storybook/vue3-vite', renderer: '@storybook/vue3', @@ -246,7 +257,7 @@ const baseTemplates = { 'html-vite/default-js': { name: 'HTML Latest (Vite | JavaScript)', script: - 'npm create vite@latest --yes {{beforeDir}} -- --template vanilla && cd {{beforeDir}} && echo "export default {}" > vite.config.js', + 'npm create vite@beta --yes {{beforeDir}} -- --template vanilla && cd {{beforeDir}} && echo "export default {}" > vite.config.js', expected: { framework: '@storybook/html-vite', renderer: '@storybook/html', @@ -257,7 +268,7 @@ const baseTemplates = { 'html-vite/default-ts': { name: 'HTML Latest (Vite | TypeScript)', script: - 'npm create vite@latest --yes {{beforeDir}} -- --template vanilla-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js', + 'npm create vite@beta --yes {{beforeDir}} -- --template vanilla-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js', expected: { framework: '@storybook/html-vite', renderer: '@storybook/html', @@ -267,7 +278,7 @@ const baseTemplates = { }, 'svelte-vite/default-js': { name: 'Svelte Latest (Vite | JavaScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template svelte', expected: { framework: '@storybook/svelte-vite', renderer: '@storybook/svelte', @@ -277,7 +288,7 @@ const baseTemplates = { }, 'svelte-vite/default-ts': { name: 'Svelte Latest (Vite | TypeScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte-ts', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template svelte-ts', expected: { framework: '@storybook/svelte-vite', renderer: '@storybook/svelte', @@ -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)', @@ -346,7 +355,7 @@ const baseTemplates = { 'lit-vite/default-js': { name: 'Lit Latest (Vite | JavaScript)', script: - 'npm create vite@latest --yes {{beforeDir}} -- --template lit && cd {{beforeDir}} && echo "export default {}" > vite.config.js', + 'npm create vite@beta --yes {{beforeDir}} -- --template lit && cd {{beforeDir}} && echo "export default {}" > vite.config.js', expected: { framework: '@storybook/web-components-vite', renderer: '@storybook/web-components', @@ -358,7 +367,7 @@ const baseTemplates = { 'lit-vite/default-ts': { name: 'Lit Latest (Vite | TypeScript)', script: - 'npm create vite@latest --yes {{beforeDir}} -- --template lit-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js', + 'npm create vite@beta --yes {{beforeDir}} -- --template lit-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js', expected: { framework: '@storybook/web-components-vite', renderer: '@storybook/web-components', @@ -415,7 +424,7 @@ const baseTemplates = { }, 'preact-vite/default-js': { name: 'Preact Latest (Vite | JavaScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template preact', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template preact', expected: { framework: '@storybook/preact-vite', renderer: '@storybook/preact', @@ -425,7 +434,7 @@ const baseTemplates = { }, 'preact-vite/default-ts': { name: 'Preact Latest (Vite | TypeScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template preact-ts', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template preact-ts', expected: { framework: '@storybook/preact-vite', renderer: '@storybook/preact', @@ -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', diff --git a/code/yarn.lock b/code/yarn.lock index f93c6945d572..f794656b97db 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -3702,9 +3702,9 @@ __metadata: languageName: node linkType: hard -"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.2.1": - version: 0.2.1 - resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.2.1" +"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0": + version: 0.3.0 + resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0" dependencies: glob: ^7.2.0 glob-promise: ^4.2.0 @@ -3712,11 +3712,11 @@ __metadata: react-docgen-typescript: ^2.2.2 peerDependencies: typescript: ">= 4.3.x" - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 peerDependenciesMeta: typescript: optional: true - checksum: 506fea864748cce273d19c628c69ef529c4ec4b3d3a5f0d8fb9ab430dc45a0155a2ac52881410f5a475ddb6c34bc8a344b64f4edd9f738c02d43275e991906ee + checksum: 31098ad8fcc2440437534599c111d9f2951dd74821e8ba46c521b969bae4c918d830b7bb0484efbad29a51711bb62d3bc623d5a1ed5b1695b5b5594ea9dd4ca0 languageName: node linkType: hard @@ -3944,72 +3944,72 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:13.4.19": - version: 13.4.19 - resolution: "@next/env@npm:13.4.19" - checksum: 0d9cb76fedcde6f8116c5f029d999cccaf929c9eb8c55daf1d38ae223a80113abae28834e537b26b81731d84ed14fd5231301b2126cd7d9097a7e175dd79bf59 +"@next/env@npm:13.5.4": + version: 13.5.4 + resolution: "@next/env@npm:13.5.4" + checksum: 69c013047371bde6c4dc6d03ec77140059bd4e3db38c1991a8aa8a9c8ce4d1370b98a141145a6f60e23f32ce97a3040b448bfd0455b0d9e5ba6efda8df33c89f languageName: node linkType: hard -"@next/swc-darwin-arm64@npm:13.4.19": - version: 13.4.19 - resolution: "@next/swc-darwin-arm64@npm:13.4.19" +"@next/swc-darwin-arm64@npm:13.5.4": + version: 13.5.4 + resolution: "@next/swc-darwin-arm64@npm:13.5.4" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-x64@npm:13.4.19": - version: 13.4.19 - resolution: "@next/swc-darwin-x64@npm:13.4.19" +"@next/swc-darwin-x64@npm:13.5.4": + version: 13.5.4 + resolution: "@next/swc-darwin-x64@npm:13.5.4" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@next/swc-linux-arm64-gnu@npm:13.4.19": - version: 13.4.19 - resolution: "@next/swc-linux-arm64-gnu@npm:13.4.19" +"@next/swc-linux-arm64-gnu@npm:13.5.4": + version: 13.5.4 + resolution: "@next/swc-linux-arm64-gnu@npm:13.5.4" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:13.4.19": - version: 13.4.19 - resolution: "@next/swc-linux-arm64-musl@npm:13.4.19" +"@next/swc-linux-arm64-musl@npm:13.5.4": + version: 13.5.4 + resolution: "@next/swc-linux-arm64-musl@npm:13.5.4" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:13.4.19": - version: 13.4.19 - resolution: "@next/swc-linux-x64-gnu@npm:13.4.19" +"@next/swc-linux-x64-gnu@npm:13.5.4": + version: 13.5.4 + resolution: "@next/swc-linux-x64-gnu@npm:13.5.4" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:13.4.19": - version: 13.4.19 - resolution: "@next/swc-linux-x64-musl@npm:13.4.19" +"@next/swc-linux-x64-musl@npm:13.5.4": + version: 13.5.4 + resolution: "@next/swc-linux-x64-musl@npm:13.5.4" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:13.4.19": - version: 13.4.19 - resolution: "@next/swc-win32-arm64-msvc@npm:13.4.19" +"@next/swc-win32-arm64-msvc@npm:13.5.4": + version: 13.5.4 + resolution: "@next/swc-win32-arm64-msvc@npm:13.5.4" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:13.4.19": - version: 13.4.19 - resolution: "@next/swc-win32-ia32-msvc@npm:13.4.19" +"@next/swc-win32-ia32-msvc@npm:13.5.4": + version: 13.5.4 + resolution: "@next/swc-win32-ia32-msvc@npm:13.5.4" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@next/swc-win32-x64-msvc@npm:13.4.19": - version: 13.4.19 - resolution: "@next/swc-win32-x64-msvc@npm:13.4.19" +"@next/swc-win32-x64-msvc@npm:13.5.4": + version: 13.5.4 + resolution: "@next/swc-win32-x64-msvc@npm:13.5.4" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -6099,7 +6099,7 @@ __metadata: 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: "@preact/preset-vite": @@ -6858,7 +6858,7 @@ __metadata: fs-extra: ^11.1.0 image-size: ^1.0.0 loader-utils: ^3.2.0 - next: 13.4.19 + next: 13.5.4 node-polyfill-webpack-plugin: ^2.0.1 pnp-webpack-plugin: ^1.7.0 postcss: ^8.4.21 @@ -6927,7 +6927,7 @@ __metadata: vite: ^4.0.0 peerDependencies: preact: ">=10" - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -7235,7 +7235,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react-vite@workspace:frameworks/react-vite" dependencies: - "@joshwooding/vite-plugin-react-docgen-typescript": 0.2.1 + "@joshwooding/vite-plugin-react-docgen-typescript": 0.3.0 "@rollup/pluginutils": ^5.0.2 "@storybook/builder-vite": "workspace:*" "@storybook/react": "workspace:*" @@ -7248,7 +7248,7 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -7602,7 +7602,7 @@ __metadata: vite: ^4.0.0 peerDependencies: svelte: ^3.0.0 || ^4.0.0 - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -7764,7 +7764,7 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 vue: ^2.7.0 languageName: unknown linkType: soft @@ -7810,7 +7810,7 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -8224,12 +8224,12 @@ __metadata: languageName: node linkType: hard -"@swc/helpers@npm:0.5.1": - version: 0.5.1 - resolution: "@swc/helpers@npm:0.5.1" +"@swc/helpers@npm:0.5.2": + version: 0.5.2 + resolution: "@swc/helpers@npm:0.5.2" dependencies: tslib: ^2.4.0 - checksum: 2e2272c8278351670e1daf27cc634ace793afb378dcc85be2800d30a7b4d3afad37707371ead2a6d96662fa30294da678d66cdc4dc7f3e698bd8e111235c60fc + checksum: b6fa49bcf6c00571d0eb7837b163f8609960d4d77538160585e27ed167361e9776bd6e5eb9646ffac2fb4d43c58df9ca50dab9d96ab097e6591bc82a75fd1164 languageName: node linkType: hard @@ -23372,7 +23372,7 @@ __metadata: languageName: node linkType: hard -"nanoid@npm:^3.3.4, nanoid@npm:^3.3.6": +"nanoid@npm:^3.3.6": version: 3.3.6 resolution: "nanoid@npm:3.3.6" bin: @@ -23467,27 +23467,26 @@ __metadata: languageName: node linkType: hard -"next@npm:13.4.19": - version: 13.4.19 - resolution: "next@npm:13.4.19" +"next@npm:13.5.4": + version: 13.5.4 + resolution: "next@npm:13.5.4" dependencies: - "@next/env": 13.4.19 - "@next/swc-darwin-arm64": 13.4.19 - "@next/swc-darwin-x64": 13.4.19 - "@next/swc-linux-arm64-gnu": 13.4.19 - "@next/swc-linux-arm64-musl": 13.4.19 - "@next/swc-linux-x64-gnu": 13.4.19 - "@next/swc-linux-x64-musl": 13.4.19 - "@next/swc-win32-arm64-msvc": 13.4.19 - "@next/swc-win32-ia32-msvc": 13.4.19 - "@next/swc-win32-x64-msvc": 13.4.19 - "@swc/helpers": 0.5.1 + "@next/env": 13.5.4 + "@next/swc-darwin-arm64": 13.5.4 + "@next/swc-darwin-x64": 13.5.4 + "@next/swc-linux-arm64-gnu": 13.5.4 + "@next/swc-linux-arm64-musl": 13.5.4 + "@next/swc-linux-x64-gnu": 13.5.4 + "@next/swc-linux-x64-musl": 13.5.4 + "@next/swc-win32-arm64-msvc": 13.5.4 + "@next/swc-win32-ia32-msvc": 13.5.4 + "@next/swc-win32-x64-msvc": 13.5.4 + "@swc/helpers": 0.5.2 busboy: 1.6.0 caniuse-lite: ^1.0.30001406 - postcss: 8.4.14 + postcss: 8.4.31 styled-jsx: 5.1.1 watchpack: 2.4.0 - zod: 3.21.4 peerDependencies: "@opentelemetry/api": ^1.1.0 react: ^18.2.0 @@ -23519,7 +23518,7 @@ __metadata: optional: true bin: next: dist/bin/next - checksum: 557fd15a52220f003ec88a79f51de41c5bb9cda5294944985f31ce45e75f98dd3caf902896d8419d96cc81596976671e953391b1eb3707757d261e362a242310 + checksum: 0b0bc7fa42844859a0444a79122a48b5e65116c30ce077a3edaaecd7cee1d7925214a659391ae6ecf8dc612869a7a646ab3a1a8aa12d074ff17e3f18c53a2621 languageName: node linkType: hard @@ -25627,25 +25626,25 @@ __metadata: languageName: node linkType: hard -"postcss@npm:8.4.14": - version: 8.4.14 - resolution: "postcss@npm:8.4.14" +"postcss@npm:8.4.27": + version: 8.4.27 + resolution: "postcss@npm:8.4.27" dependencies: - nanoid: ^3.3.4 + nanoid: ^3.3.6 picocolors: ^1.0.0 source-map-js: ^1.0.2 - checksum: 2a4cfa28e2f1bfd358313501f7771bd596e494487c7b735c492e2f8b1faf493d24fcb43e2e6ad825863fc65a77abb949ca8f228602ae46a022f02dc812c4ac8b + checksum: 41a0476e05cb97514ff8d75e4ff9fdcf778f22b2e0d25b7028f219cd408e01d3c4f50459d4a1cd9a430d8ef08202c881374a4fa4ea6009f4a135a07315d606e5 languageName: node linkType: hard -"postcss@npm:8.4.27": - version: 8.4.27 - resolution: "postcss@npm:8.4.27" +"postcss@npm:8.4.31, postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.4.14, postcss@npm:^8.4.21, postcss@npm:^8.4.23, postcss@npm:^8.4.26, postcss@npm:^8.4.27": + version: 8.4.31 + resolution: "postcss@npm:8.4.31" dependencies: nanoid: ^3.3.6 picocolors: ^1.0.0 source-map-js: ^1.0.2 - checksum: 41a0476e05cb97514ff8d75e4ff9fdcf778f22b2e0d25b7028f219cd408e01d3c4f50459d4a1cd9a430d8ef08202c881374a4fa4ea6009f4a135a07315d606e5 + checksum: 748b82e6e5fc34034dcf2ae88ea3d11fd09f69b6c50ecdd3b4a875cfc7cdca435c958b211e2cb52355422ab6fccb7d8f2f2923161d7a1b281029e4a913d59acf languageName: node linkType: hard @@ -25659,17 +25658,6 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.4.14, postcss@npm:^8.4.21, postcss@npm:^8.4.23, postcss@npm:^8.4.26, postcss@npm:^8.4.27": - version: 8.4.31 - resolution: "postcss@npm:8.4.31" - dependencies: - nanoid: ^3.3.6 - picocolors: ^1.0.0 - source-map-js: ^1.0.2 - checksum: 748b82e6e5fc34034dcf2ae88ea3d11fd09f69b6c50ecdd3b4a875cfc7cdca435c958b211e2cb52355422ab6fccb7d8f2f2923161d7a1b281029e4a913d59acf - languageName: node - linkType: hard - "preact-render-to-string@npm:^5.1.19": version: 5.2.6 resolution: "preact-render-to-string@npm:5.2.6" @@ -32778,13 +32766,6 @@ __metadata: languageName: node linkType: hard -"zod@npm:3.21.4": - version: 3.21.4 - resolution: "zod@npm:3.21.4" - checksum: 161e8cf7aea38a99244d65da4a9477d9d966f6a533e503feaa20ff7968a9691065c38c6f1eab5cbbdc8374142fff4a05c9cacb8479803ab50ab6a6ca80e5d624 - languageName: node - linkType: hard - "zone.js@npm:^0.13.0": version: 0.13.3 resolution: "zone.js@npm:0.13.3"