Skip to content

Commit

Permalink
Merge branch 'next' into larsrickert/1898-story-code-panel
Browse files Browse the repository at this point in the history
  • Loading branch information
shilman committed Dec 3, 2024
2 parents 9f35083 + 9b55e8e commit a228b17
Show file tree
Hide file tree
Showing 12 changed files with 125 additions and 34 deletions.
4 changes: 2 additions & 2 deletions code/addons/test/src/components/TestProviderRender.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export const TestProviderRender: FC<
padding="small"
active={state.watching}
onClick={() => api.setTestProviderWatchMode(state.id, !state.watching)}
disabled={state.crashed || state.running || isEditing}
disabled={state.running || isEditing}
>
<EyeIcon />
</Button>
Expand All @@ -152,7 +152,7 @@ export const TestProviderRender: FC<
variant="ghost"
padding="small"
onClick={() => api.runTestProvider(state.id, { entryId })}
disabled={state.crashed || state.running || isEditing}
disabled={state.running || isEditing}
>
<PlayHollowIcon />
</Button>
Expand Down
2 changes: 2 additions & 0 deletions code/builders/builder-vite/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,9 @@
"es-module-lexer": "^1.5.0",
"find-cache-dir": "^3.0.0",
"glob": "^10.0.0",
"knitwork": "^1.1.0",
"magic-string": "^0.30.0",
"pathe": "^1.1.2",
"polka": "^1.0.0-next.28",
"sirv": "^2.0.4",
"slash": "^5.0.0",
Expand Down
56 changes: 56 additions & 0 deletions code/builders/builder-vite/src/codegen-importfn-script.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';

import { toImportFn } from './codegen-importfn-script';

describe('toImportFn', () => {
it('should correctly map story paths to import functions for absolute paths on Linux', async () => {
const root = '/absolute/path';
const stories = ['/absolute/path/to/story1.js', '/absolute/path/to/story2.js'];

const result = await toImportFn(root, stories);

expect(result).toMatchInlineSnapshot(`
"const importers = {
"./to/story1.js": () => import("/absolute/path/to/story1.js"),
"./to/story2.js": () => import("/absolute/path/to/story2.js")
};
export async function importFn(path) {
return await importers[path]();
}"
`);
});

it('should correctly map story paths to import functions for absolute paths on Windows', async () => {
const root = 'C:\\absolute\\path';
const stories = ['C:\\absolute\\path\\to\\story1.js', 'C:\\absolute\\path\\to\\story2.js'];

const result = await toImportFn(root, stories);

expect(result).toMatchInlineSnapshot(`
"const importers = {
"./to/story1.js": () => import("C:/absolute/path/to/story1.js"),
"./to/story2.js": () => import("C:/absolute/path/to/story2.js")
};
export async function importFn(path) {
return await importers[path]();
}"
`);
});

it('should handle an empty array of stories', async () => {
const root = '/absolute/path';
const stories: string[] = [];

const result = await toImportFn(root, stories);

expect(result).toMatchInlineSnapshot(`
"const importers = {};
export async function importFn(path) {
return await importers[path]();
}"
`);
});
});
31 changes: 16 additions & 15 deletions code/builders/builder-vite/src/codegen-importfn-script.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { relative } from 'node:path';

import type { Options } from 'storybook/internal/types';

import { genDynamicImport, genImport, genObjectFromRawEntries } from 'knitwork';
import { normalize, relative } from 'pathe';
import { dedent } from 'ts-dedent';

import { listStories } from './list-stories';

/**
Expand All @@ -21,34 +23,33 @@ function toImportPath(relativePath: string) {
/**
* This function takes an array of stories and creates a mapping between the stories' relative paths
* to the working directory and their dynamic imports. The import is done in an asynchronous
* function to delay loading. It then creates a function, `importFn(path)`, which resolves a path to
* an import function and this is called by Storybook to fetch a story dynamically when needed.
* function to delay loading and to allow Vite to split the code into smaller chunks. It then
* creates a function, `importFn(path)`, which resolves a path to an import function and this is
* called by Storybook to fetch a story dynamically when needed.
*
* @param stories An array of absolute story paths.
*/
async function toImportFn(stories: string[]) {
const { normalizePath } = await import('vite');
export async function toImportFn(root: string, stories: string[]) {
const objectEntries = stories.map((file) => {
const relativePath = normalizePath(relative(process.cwd(), file));
const relativePath = relative(root, file);

return ` '${toImportPath(relativePath)}': async () => import('/@fs/${file}')`;
return [toImportPath(relativePath), genDynamicImport(normalize(file))] as [string, string];
});

return `
const importers = {
${objectEntries.join(',\n')}
};
return dedent`
const importers = ${genObjectFromRawEntries(objectEntries)};
export async function importFn(path) {
return importers[path]();
return await importers[path]();
}
`;
}

export async function generateImportFnScriptCode(options: Options) {
export async function generateImportFnScriptCode(options: Options): Promise<string> {
// First we need to get an array of stories and their absolute paths.
const stories = await listStories(options);

// We can then call toImportFn to create a function that can be used to load each story dynamically.
return (await toImportFn(stories)).trim();
// eslint-disable-next-line @typescript-eslint/return-await
return await toImportFn(options.projectRoot || process.cwd(), stories);
}
6 changes: 3 additions & 3 deletions code/builders/builder-vite/src/vite-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,18 +53,18 @@ export async function commonConfig(

const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);

const projectRoot = resolve(options.configDir, '..');
options.projectRoot = options.projectRoot || resolve(options.configDir, '..');

// I destructure away the `build` property from the user's config object
// I do this because I can contain config that breaks storybook, such as we had in a lit project.
// If the user needs to configure the `build` they need to do so in the viteFinal function in main.js.
const { config: { build: buildProperty = undefined, ...userConfig } = {} } =
(await loadConfigFromFile(configEnv, viteConfigPath, projectRoot)) ?? {};
(await loadConfigFromFile(configEnv, viteConfigPath, options.projectRoot)) ?? {};

const sbConfig: InlineConfig = {
configFile: false,
cacheDir: resolvePathInStorybookCache('sb-vite', options.cacheKey),
root: projectRoot,
root: options.projectRoot,
// Allow storybook deployed as subfolder. See https://github.com/storybookjs/builder-vite/issues/238
base: './',
plugins: await pluginConfig(options),
Expand Down
23 changes: 12 additions & 11 deletions code/core/src/core-server/utils/whats-new.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/* eslint-disable no-underscore-dangle */
import { writeFile } from 'node:fs/promises';

import type { Channel } from '@storybook/core/channels';
import { findConfigFile } from '@storybook/core/common';
import { findConfigFile, loadMainConfig } from '@storybook/core/common';
import { telemetry } from '@storybook/core/telemetry';
import type { CoreConfig, Options } from '@storybook/core/types';

Expand Down Expand Up @@ -58,15 +59,9 @@ export function initializeWhatsNew(
throw response;
})) as WhatsNewResponse;

const configFileName = findConfigFile('main', options.configDir);
if (!configFileName) {
throw new Error(`unable to find storybook main file in ${options.configDir}`);
}
const main = await readConfig(configFileName);
const disableWhatsNewNotifications = main.getFieldValue([
'core',
'disableWhatsNewNotifications',
]);
const main = await loadMainConfig({ configDir: options.configDir, noCache: true });
const disableWhatsNewNotifications =
(main.core as CoreConfig)?.disableWhatsNewNotifications === true;

const cache: WhatsNewCache = (await options.cache.get(WHATS_NEW_CACHE)) ?? {};
const data = {
Expand All @@ -91,8 +86,14 @@ export function initializeWhatsNew(
const isTelemetryEnabled = coreOptions.disableTelemetry !== true;
try {
const mainPath = findConfigFile('main', options.configDir);
invariant(mainPath, `unable to find storybook main file in ${options.configDir}`);
invariant(mainPath, `unable to find Storybook main file in ${options.configDir}`);
const main = await readConfig(mainPath);
if (!main._exportsObject) {
// eslint-disable-next-line local-rules/no-uncategorized-errors
throw new Error(
`Unable to parse Storybook main file while trying to read 'core' property`
);
}
main.setFieldValue(['core', 'disableWhatsNewNotifications'], disableWhatsNewNotifications);
await writeFile(mainPath, printConfig(main).code);
if (isTelemetryEnabled) {
Expand Down
3 changes: 2 additions & 1 deletion code/core/src/manager-api/modules/experimental_testmodule.ts
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, fullAPI }) => {
runTestProvider(id, options) {
const index = store.getState().index;
invariant(index, 'The index is currently unavailable');
api.updateTestProviderState(id, { running: true });
api.updateTestProviderState(id, { running: true, failed: false, crashed: false });

const provider = store.getState().testProviders[id];

Expand Down Expand Up @@ -152,6 +152,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, fullAPI }) => {
...config,
...initialTestProviderState,
...(state?.testProviders?.[id] || {}),
running: false,
} as TestProviders[0],
]
)
Expand Down
2 changes: 1 addition & 1 deletion code/core/src/manager/components/sidebar/TestingModule.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,7 @@ export const TestingModule = ({
onClick={(e: SyntheticEvent) => {
e.stopPropagation();
testProviders
.filter((state) => !state.crashed && !state.running && state.runnable)
.filter((state) => !state.running && state.runnable)
.forEach(({ id }) => api.runTestProvider(id));
}}
disabled={isRunning}
Expand Down
1 change: 0 additions & 1 deletion code/core/src/types/modules/addons.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/* eslint-disable @typescript-eslint/naming-convention */
import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';

import type { ListItem } from '../../components';
import type { TestProviderConfig, TestingModuleProgressReportProgress } from '../../core-events';
import type { RenderData as RouterData } from '../../router/types';
import type { ThemeVars } from '../../theming/types';
Expand Down
1 change: 1 addition & 0 deletions code/core/src/types/modules/core-common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,7 @@ export interface BuilderOptions {
ignorePreview?: boolean;
cache?: FileSystemCache;
configDir: string;
projectRoot?: string;
docsMode?: boolean;
features?: StorybookConfigRaw['features'];
versionCheck?: VersionCheck;
Expand Down
21 changes: 21 additions & 0 deletions code/sandbox/nuxt-vite-default-ts/project.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"name": "nuxt-vite/default-ts",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"implicitDependencies": [
"storybook",
"core",
"addon-essentials",
"addon-interactions",
"addon-links",
"addon-onboarding",
"blocks",
"vue3-vite"
],
"targets": {
"sandbox": {},
"sb:dev": {},
"sb:build": {}
},
"tags": ["ci:normal", "ci:merged", "ci:daily"]
}
9 changes: 9 additions & 0 deletions code/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -6172,7 +6172,9 @@ __metadata:
es-module-lexer: "npm:^1.5.0"
find-cache-dir: "npm:^3.0.0"
glob: "npm:^10.0.0"
knitwork: "npm:^1.1.0"
magic-string: "npm:^0.30.0"
pathe: "npm:^1.1.2"
polka: "npm:^1.0.0-next.28"
sirv: "npm:^2.0.4"
slash: "npm:^5.0.0"
Expand Down Expand Up @@ -19330,6 +19332,13 @@ __metadata:
languageName: node
linkType: hard

"knitwork@npm:^1.1.0":
version: 1.1.0
resolution: "knitwork@npm:1.1.0"
checksum: 10c0/e23c679d4ded01890ab2669ccde2e85e4d7e6ba327b1395ff657f8067c7d73dc134fc8cd8188c653de4a687be7fa9c130bd36c3e2f76d8685e8b97ff8b30779c
languageName: node
linkType: hard

"language-subtag-registry@npm:^0.3.20":
version: 0.3.22
resolution: "language-subtag-registry@npm:0.3.22"
Expand Down

0 comments on commit a228b17

Please sign in to comment.