GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-02 05:03:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'future/base' into feat/tsup-addons-a11y

Browse Source
This commit is contained in:
Norbert de Langen 2022-07-23 17:55:27 +02:00
commit e5d138eff8
No known key found for this signature in database
GPG Key ID: FD0E78AF9A837762
14 changed files with 127 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
examples/official-storybook/stories/addon-docs/container-override.stories.mdx
View File

@ -1,19 +1,38 @@
import { Meta, DocsContainer, Story } from '@storybook/addon-docs';
import { useRef } from 'react';
import { Meta, DocsContainer, Story, ArgsTable } from '@storybook/addon-docs';
<Meta
title="Addons/Docs/container-override"
parameters={{
docs: {
// eslint-disable-next-line react/prop-types
container: ({ children, context }) => (
<DocsContainer context={context}>
<div style={{ border: '5px solid red' }}>{children}</div>
</DocsContainer>
),
container: ({ children, context }) => {
const countRef = useRef();
countRef.current = (countRef.current || 0) + 1;
return (
<DocsContainer context={context}>
<div style={{ border: '5px solid red' }}>{children}</div>
<p>Container rendered {countRef.current} times</p>
<p>Try changing:</p>
<ul>
<li>the arg - story should rerender but container should not</li>
<li>a global (eg theme) - both should rerender</li>
</ul>
</DocsContainer>
);
},
},
}}
/>
export const Component = () => {
const countRef = useRef();
countRef.current = (countRef.current || 0) + 1;
return <div>Story rendered {countRef.current} times</div>;
};
<Story name="dummy" parameters={{ layout: 'fullscreen' }}>
<div>some content</div>
<Component />
</Story>
<ArgsTable story="." />

7
lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix
View File

@ -413,6 +413,13 @@ Object {
},
Object {
"loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
"options": Object {
"remarkPlugins": Array [
[Function],
[Function],
],
"skipCsf": false,
},
},
],
},

7
lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix
View File

@ -430,6 +430,13 @@ Object {
},
Object {
"loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
"options": Object {
"remarkPlugins": Array [
[Function],
[Function],
],
"skipCsf": false,
},
},
],
},

7
lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix
View File

@ -97,6 +97,13 @@ Object {
},
Object {
"loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
"options": Object {
"remarkPlugins": Array [
[Function],
[Function],
],
"skipCsf": false,
},
},
],
},

7
lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix
View File

@ -96,6 +96,13 @@ Object {
},
Object {
"loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
"options": Object {
"remarkPlugins": Array [
[Function],
[Function],
],
"skipCsf": false,
},
},
],
},

7
lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix
View File

@ -126,6 +126,13 @@ Object {
},
Object {
"loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
"options": Object {
"remarkPlugins": Array [
[Function],
[Function],
],
"skipCsf": false,
},
},
],
},

7
lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix
View File

@ -125,6 +125,13 @@ Object {
},
Object {
"loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
"options": Object {
"remarkPlugins": Array [
[Function],
[Function],
],
"skipCsf": false,
},
},
],
},

7
lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix
View File

@ -133,6 +133,13 @@ Object {
},
Object {
"loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
"options": Object {
"remarkPlugins": Array [
[Function],
[Function],
],
"skipCsf": false,
},
},
],
},

7
lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix
View File

@ -132,6 +132,13 @@ Object {
},
Object {
"loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
"options": Object {
"remarkPlugins": Array [
[Function],
[Function],
],
"skipCsf": false,
},
},
],
},

6
lib/preview-web/src/PreviewWeb.test.ts
View File

@ -765,7 +765,7 @@ describe('PreviewWeb', () => {
});
describe('in docs mode', () => {
it('does not re-render the docs container', async () => {
it('re-renders the docs container', async () => {
document.location.search = '?id=component-one--docs&viewMode=docs';
await createAndRenderPreview();
@ -775,7 +775,7 @@ describe('PreviewWeb', () => {
emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
await waitForEvents([GLOBALS_UPDATED]);
expect(docsRenderer.render).not.toHaveBeenCalled();
expect(docsRenderer.render).toHaveBeenCalled();
});
});
});
@ -1038,7 +1038,7 @@ describe('PreviewWeb', () => {
});
});
describe('in docs mode, modern inline render', () => {
describe('in docs mode', () => {
it('does not re-render the docs container', async () => {
document.location.search = '?id=component-one--docs&viewMode=docs';

6
lib/preview-web/src/PreviewWeb.tsx
View File

@ -228,6 +228,12 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
async onUpdateGlobals({ globals }: { globals: Globals }) {
super.onUpdateGlobals({ globals });
if (
this.currentRender instanceof StandaloneDocsRender ||
this.currentRender instanceof TemplateDocsRender
) {
await this.currentRender.rerender?.();
}
}
async onUpdateArgs({ storyId, updatedArgs }: { storyId: StoryId; updatedArgs: Args }) {

18
lib/preview-web/src/render/StandaloneDocsRender.ts
View File

@ -24,6 +24,8 @@ export class StandaloneDocsRender<TFramework extends AnyFramework> implements Re
private exports?: ModuleExports;
public rerender?: () => Promise<void>;
public teardown?: (options: { viewModeChanged?: boolean }) => Promise<void>;
public torndown = false;
@ -85,17 +87,21 @@ export class StandaloneDocsRender<TFramework extends AnyFramework> implements Re
`Cannot render a story in viewMode=docs if \`@storybook/addon-docs\` is not installed`
);
const docsParameter = { ...docs, page: this.exports.default };
const renderer = await docs.renderer();
(renderer.render as DocsRenderFunction<TFramework>)(
docsContext,
{ ...docs, page: this.exports.default },
canvasElement,
() => this.channel.emit(DOCS_RENDERED, this.id)
);
const { render } = renderer as { render: DocsRenderFunction<TFramework> };
const renderDocs = async () => {
await new Promise<void>((r) => render(docsContext, docsParameter, canvasElement, r));
this.channel.emit(DOCS_RENDERED, this.id);
};
this.rerender = async () => renderDocs();
this.teardown = async ({ viewModeChanged }: { viewModeChanged?: boolean } = {}) => {
if (!viewModeChanged || !canvasElement) return;
renderer.unmount(canvasElement);
this.torndown = true;
};
return renderDocs();
}
}

20
lib/preview-web/src/render/TemplateDocsRender.ts
View File

@ -27,6 +27,8 @@ export class TemplateDocsRender<TFramework extends AnyFramework> implements Rend
public story?: Story<TFramework>;
public rerender?: () => Promise<void>;
public teardown?: (options: { viewModeChanged?: boolean }) => Promise<void>;
public torndown = false;
@ -95,21 +97,27 @@ export class TemplateDocsRender<TFramework extends AnyFramework> implements Rend
true
);
const { docs } = this.story.parameters || {};
const { docs: docsParameter } = this.story.parameters || {};
if (!docs)
if (!docsParameter)
throw new Error(
`Cannot render a story in viewMode=docs if \`@storybook/addon-docs\` is not installed`
);
const renderer = await docs.renderer();
(renderer.render as DocsRenderFunction<TFramework>)(docsContext, docs, canvasElement, () =>
this.channel.emit(DOCS_RENDERED, this.id)
);
const renderer = await docsParameter.renderer();
const { render } = renderer as { render: DocsRenderFunction<TFramework> };
const renderDocs = async () => {
await new Promise<void>((r) => render(docsContext, docsParameter, canvasElement, r));
this.channel.emit(DOCS_RENDERED, this.id);
};
this.rerender = async () => renderDocs();
this.teardown = async ({ viewModeChanged }: { viewModeChanged?: boolean } = {}) => {
if (!viewModeChanged || !canvasElement) return;
renderer.unmount(canvasElement);
this.torndown = true;
};
return renderDocs();
}
}

20
scripts/dts-localize.ts
View File

@ -1,5 +1,5 @@
/* eslint-disable no-param-reassign */
import path, { dirname, isAbsolute, join, resolve } from 'path';
import path, { dirname, isAbsolute, join, relative, resolve, sep } from 'path';
import fs from 'fs-extra';
import { sync } from 'read-pkg-up';
import slash from 'slash';
@ -47,7 +47,7 @@ function getCompilerOptions(inputFileNames: string[], preferredConfigPath?: stri
const compilerOptionsParseResult = ts.parseJsonConfigFileContent(
configParseResult.config,
parseConfigHost,
path.resolve(path.dirname(configFileName)),
resolve(dirname(configFileName)),
undefined,
getAbsolutePath(configFileName)
);
@ -86,7 +86,7 @@ export const run = async (entrySourceFiles: string[], outputPath: string, option
* @param {string} filePath the path of the current file
*/
function getReplacementPathRelativeToBase(basePath: string, filePath: string) {
const relative = path.relative(basePath, filePath);
const relativePath = relative(basePath, filePath);
let newPath = '';
/*
@ -101,16 +101,16 @@ export const run = async (entrySourceFiles: string[], outputPath: string, option
*/
if (relative.includes(`node_modules${path.sep}`)) {
const [, ...parts] = relative.split(`node_modules${path.sep}`);
const filename = parts.join(`node_modules${path.sep}`).split(path.sep).join('-');
if (relativePath.includes(`node_modules${sep}`)) {
const [, ...parts] = relativePath.split(`node_modules${sep}`);
const filename = parts.join(`node_modules${sep}`).split(sep).join('-');
newPath = join(outputPath, '_modules', filename);
} else if (relative.includes(join('dist', `ts-tmp${path.sep}`))) {
const [, ...parts] = relative.split(join('dist', `ts-tmp${path.sep}`));
const filename = parts.join('').split(path.sep).join('-');
} else if (relativePath.includes(join('dist', `ts-tmp${sep}`))) {
const [, ...parts] = relativePath.split(join('dist', `ts-tmp${sep}`));
const filename = parts.join('').split(sep).join('-');
newPath = join(outputPath, filename);
} else {
const filename = relative.split(path.sep).join('-');
const filename = relativePath.split(sep).join('-');
newPath = join(outputPath, filename);
}
return newPath;