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

Merge pull request #15987 from storybookjs/on-demand-store-sync-arg

Browse Source 
Refactor to pass sync as an arg rather than using a separate method
This commit is contained in:
Tom Coleman 2021-09-09 19:34:04 +10:00 committed by GitHub
commit 18ed032164
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 151 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/core-client/src/preview/start.ts
View File

@ -82,7 +82,7 @@ export function start<TFramework extends AnyFramework>(
clientApi.onImportFnChanged = preview.onImportFnChanged.bind(preview);
clientApi.storyStore = preview.storyStore;
preview.initializeSync({ cacheAllCSFFiles: true });
preview.initialize({ cacheAllCSFFiles: true, sync: true });
} else {
getProjectAnnotations();
preview.onImportFnChanged({ importFn: (path: Path) => clientApi.importFn(path) });

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

@ -37,6 +37,7 @@ function focusInInput(event: Event) {
}
type InitialRenderPhase = 'init' | 'loaded' | 'rendered' | 'done';
type MaybePromise<T> = Promise<T> | T;
export class PreviewWeb<TFramework extends AnyFramework> {
channel: Channel;
@ -90,17 +91,21 @@ export class PreviewWeb<TFramework extends AnyFramework> {
}
}
async initialize({ cacheAllCSFFiles = false }: { cacheAllCSFFiles?: boolean } = {}) {
await this.storyStore.initialize({ cacheAllCSFFiles });
await this.setupListenersAndRenderSelection();
}
// We have a second "sync" code path through `initialize` for back-compat reasons.
// Specifically Storyshots requires the story store to be syncronously loaded completely on bootup
initializeSync({ cacheAllCSFFiles = false }: { cacheAllCSFFiles?: boolean } = {}) {
this.storyStore.initializeSync({ cacheAllCSFFiles });
// NOTE: we don't await this, but return the promise so the caller can await it if they want
return this.setupListenersAndRenderSelection();
initialize({
cacheAllCSFFiles = false,
sync = false,
}: { cacheAllCSFFiles?: boolean; sync?: boolean } = {}): MaybePromise<void> {
if (sync) {
this.storyStore.initialize({ cacheAllCSFFiles, sync: true });
// NOTE: we don't await this, but return the promise so the caller can await it if they want
return this.setupListenersAndRenderSelection();
}
return this.storyStore
.initialize({ cacheAllCSFFiles, sync: false })
.then(() => this.setupListenersAndRenderSelection());
}
async setupListenersAndRenderSelection() {
@ -296,7 +301,9 @@ export class PreviewWeb<TFramework extends AnyFramework> {
async renderDocs({ story }: { story: Story<TFramework> }) {
const { id, title, name } = story;
const element = this.view.prepareForDocs();
const csfFile: CSFFile<TFramework> = await this.storyStore.loadCSFFileByStoryId(id);
const csfFile: CSFFile<TFramework> = await this.storyStore.loadCSFFileByStoryId(id, {
sync: false,
});
const docsContext = {
id,
title,

45
lib/store/src/StoryIndexStore.ts
View File

@ -16,12 +16,34 @@ export class StoryIndexStore {
this.fetchStoryIndex = fetchStoryIndex;
}
async initialize() {
return this.cache();
initialize(options: { sync: false }): Promise<void>;
initialize(options: { sync: true }): void;
initialize({ sync = false } = {}) {
return sync ? this.cache(true) : this.cache(false);
}
initializeSync() {
return this.cacheSync();
cache(sync: false): Promise<void>;
cache(sync: true): void;
cache(sync = false): Promise<void> | void {
const fetchResult = this.fetchStoryIndex();
if (sync) {
if (!(fetchResult as StoryIndex).v) {
throw new Error(
`fetchStoryIndex() didn't return an index, did you pass an async version then call initialize({ sync: true })?`
);
}
this.stories = (fetchResult as StoryIndex).stories;
return null;
}
return Promise.resolve(fetchResult).then(({ stories }) => {
this.stories = stories;
});
}
async onStoriesChanged() {
@ -29,21 +51,6 @@ export class StoryIndexStore {
this.stories = stories;
}
async cache() {
const { stories } = await this.fetchStoryIndex();
this.stories = stories;
}
async cacheSync() {
const data = this.fetchStoryIndex() as StoryIndex;
if (!data.v) {
throw new Error(
`fetchStoryIndex() didn't return a stories list, did you pass an async version then call initializeSync()?`
);
}
this.stories = data.stories;
}
storyIdFromSpecifier(specifier: StorySpecifier) {
const storyIds = Object.keys(this.stories);
if (specifier === '*') {

40
lib/store/src/StoryStore.test.ts
View File

@ -68,7 +68,7 @@ describe('StoryStore', () => {
describe('projectAnnotations', () => {
it('normalizes on initialization', async () => {
const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
await store.initialize();
await store.initialize({ sync: false });
expect(store.projectAnnotations.globalTypes).toEqual({
a: { name: 'a', type: { name: 'string' } },
@ -78,9 +78,9 @@ describe('StoryStore', () => {
});
});
it('normalizes on updateProjectAnnotations', async () => {
it('normalizes on updateGlobalAnnotations', async () => {
const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
await store.initialize();
await store.initialize({ sync: false });
store.updateProjectAnnotations(projectAnnotations);
expect(store.projectAnnotations.globalTypes).toEqual({
@ -95,7 +95,7 @@ describe('StoryStore', () => {
describe('loadStory', () => {
it('pulls the story via the importFn', async () => {
const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
await store.initialize();
await store.initialize({ sync: false });
importFn.mockClear();
expect(await store.loadStory({ storyId: 'component-one--a' })).toMatchObject({
@ -109,7 +109,7 @@ describe('StoryStore', () => {
it('uses a cache', async () => {
const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
await store.initialize();
await store.initialize({ sync: false });
const story = await store.loadStory({ storyId: 'component-one--a' });
expect(processCSFFile).toHaveBeenCalledTimes(1);
@ -133,9 +133,9 @@ describe('StoryStore', () => {
describe('componentStoriesFromCSFFile', () => {
it('returns all the stories in the file', async () => {
const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
await store.initialize();
await store.initialize({ sync: false });
const csfFile = await store.loadCSFFileByStoryId('component-one--a');
const csfFile = await store.loadCSFFileByStoryId('component-one--a', { sync: false });
const stories = store.componentStoriesFromCSFFile({ csfFile });
expect(stories).toHaveLength(2);
@ -146,7 +146,7 @@ describe('StoryStore', () => {
describe('getStoryContext', () => {
it('returns the args and globals correctly', async () => {
const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
await store.initialize();
await store.initialize({ sync: false });
const story = await store.loadStory({ storyId: 'component-one--a' });
@ -158,7 +158,7 @@ describe('StoryStore', () => {
it('returns the args and globals correctly when they change', async () => {
const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
await store.initialize();
await store.initialize({ sync: false });
const story = await store.loadStory({ storyId: 'component-one--a' });
@ -173,7 +173,7 @@ describe('StoryStore', () => {
it('returns the same hooks each time', async () => {
const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
await store.initialize();
await store.initialize({ sync: false });
const story = await store.loadStory({ storyId: 'component-one--a' });
@ -185,7 +185,7 @@ describe('StoryStore', () => {
describe('cleanupStory', () => {
it('cleans the hooks from the context', async () => {
const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
await store.initialize();
await store.initialize({ sync: false });
const story = await store.loadStory({ storyId: 'component-one--a' });
@ -199,10 +199,10 @@ describe('StoryStore', () => {
describe('loadAllCSFFiles', () => {
it('imports *all* csf files', async () => {
const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
await store.initialize();
await store.initialize({ sync: false });
importFn.mockClear();
const csfFiles = await store.loadAllCSFFiles();
const csfFiles = await store.loadAllCSFFiles(false);
expect(Object.keys(csfFiles)).toEqual([
'./src/ComponentOne.stories.js',
@ -214,15 +214,15 @@ describe('StoryStore', () => {
describe('extract', () => {
it('throws if you have not called cacheAllCSFFiles', async () => {
const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
await store.initialize();
await store.initialize({ sync: false });
expect(() => store.extract()).toThrow(/Cannot call extract/);
});
it('produces objects with functions and hooks stripped', async () => {
const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
await store.initialize();
await store.cacheAllCSFFiles();
await store.initialize({ sync: false });
await store.cacheAllCSFFiles(false);
expect(store.extract()).toMatchInlineSnapshot(`
Array [
@ -343,8 +343,8 @@ describe('StoryStore', () => {
projectAnnotations,
fetchStoryIndex,
});
await store.initialize();
await store.cacheAllCSFFiles();
await store.initialize({ sync: false });
await store.cacheAllCSFFiles(false);
expect((store.extract() as { id: StoryId }[]).map((s) => s.id)).toEqual([
'component-one--b',
@ -360,8 +360,8 @@ describe('StoryStore', () => {
describe('getSetStoriesPayload', () => {
it('maps stories list to payload correctly', async () => {
const store = new StoryStore({ importFn, projectAnnotations, fetchStoryIndex });
await store.initialize();
await store.cacheAllCSFFiles();
await store.initialize({ sync: false });
await store.cacheAllCSFFiles(false);
expect(store.getSetStoriesPayload()).toMatchInlineSnapshot(`
Object {

146
lib/store/src/StoryStore.ts
View File

@ -31,6 +31,8 @@ import { normalizeInputTypes } from './normalizeInputTypes';
import { inferArgTypes } from './inferArgTypes';
import { inferControls } from './inferControls';
type MaybePromise<T> = Promise<T> | T;
// TODO -- what are reasonable values for these?
const CSF_CACHE_SIZE = 100;
const STORY_CACHE_SIZE = 1000;
@ -101,21 +103,29 @@ export class StoryStore<TFramework extends AnyFramework> {
this.prepareStoryWithCache = memoize(STORY_CACHE_SIZE)(prepareStory) as typeof prepareStory;
}
async initialize({ cacheAllCSFFiles = false }: { cacheAllCSFFiles?: boolean } = {}) {
await this.storyIndex.initialize();
if (cacheAllCSFFiles) {
await this.cacheAllCSFFiles();
}
}
// See note in PreviewWeb about the 'sync' init path.
initializeSync({ cacheAllCSFFiles = false }: { cacheAllCSFFiles?: boolean } = {}) {
this.storyIndex.initializeSync();
initialize(options: { sync: false; cacheAllCSFFiles?: boolean }): Promise<void>;
if (cacheAllCSFFiles) {
this.cacheAllCSFFilesSync();
initialize(options: { sync: true; cacheAllCSFFiles?: boolean }): void;
initialize({
sync = false,
cacheAllCSFFiles = false,
}: {
sync?: boolean;
cacheAllCSFFiles?: boolean;
} = {}): MaybePromise<void> {
if (sync) {
this.storyIndex.initialize({ sync: true });
if (cacheAllCSFFiles) {
this.cacheAllCSFFiles(true);
}
return null;
}
return this.storyIndex
.initialize({ sync: false })
.then(() => (cacheAllCSFFiles ? this.cacheAllCSFFiles(false) : null));
}
updateProjectAnnotations(projectAnnotations: ProjectAnnotations<TFramework>) {
@ -129,82 +139,100 @@ export class StoryStore<TFramework extends AnyFramework> {
this.importFn = importFn;
// We need to refetch the stories list as it may have changed too
await this.storyIndex.cache();
await this.storyIndex.cache(false);
if (this.cachedCSFFiles) {
await this.cacheAllCSFFiles();
await this.cacheAllCSFFiles(false);
}
}
// To load a single CSF file to service a story we need to look up the importPath in the index
async loadCSFFileByStoryId(storyId: StoryId): Promise<CSFFile<TFramework>> {
const { importPath, title } = this.storyIndex.storyIdToEntry(storyId);
const moduleExports = await this.importFn(importPath);
// We pass the title in here as it may have been generated by autoTitle on the server.
return this.processCSFFileWithCache(moduleExports, title);
}
loadCSFFileByStoryId(storyId: StoryId, options: { sync: false }): Promise<CSFFile<TFramework>>;
loadCSFFileByStoryIdSync(storyId: StoryId): CSFFile<TFramework> {
loadCSFFileByStoryId(storyId: StoryId, options: { sync: true }): CSFFile<TFramework>;
loadCSFFileByStoryId(
storyId: StoryId,
{ sync = false }: { sync?: boolean } = {}
): MaybePromise<CSFFile<TFramework>> {
const { importPath, title } = this.storyIndex.storyIdToEntry(storyId);
const moduleExports = this.importFn(importPath);
if (Promise.resolve(moduleExports) === moduleExports) {
const moduleExportsOrPromise = this.importFn(importPath);
const isPromise = Promise.resolve(moduleExportsOrPromise) === moduleExportsOrPromise;
if (!isPromise) {
// We pass the title in here as it may have been generated by autoTitle on the server.
return this.processCSFFileWithCache(moduleExportsOrPromise as ModuleExports, title);
}
if (sync) {
throw new Error(
`importFn() returned a promise, did you pass an async version then call initializeSync()?`
);
}
return this.processCSFFileWithCache(moduleExports as ModuleExports, title);
}
// Load all CSF files into the cache so we can call synchronous functions like `extract()`.
async loadAllCSFFiles(): Promise<Record<Path, CSFFile<TFramework>>> {
const importPaths: Record<Path, StoryId> = {};
Object.entries(this.storyIndex.stories).forEach(([storyId, { importPath }]) => {
importPaths[importPath] = storyId;
});
const csfFileList = await Promise.all(
Object.entries(importPaths).map(
async ([importPath, storyId]): Promise<[Path, CSFFile<TFramework>]> => [
importPath,
await this.loadCSFFileByStoryId(storyId),
]
)
return (moduleExportsOrPromise as Promise<ModuleExports>).then((moduleExports) =>
// We pass the title in here as it may have been generated by autoTitle on the server.
this.processCSFFileWithCache(moduleExports, title)
);
return csfFileList.reduce((acc, [importPath, csfFile]) => {
acc[importPath] = csfFile;
return acc;
}, {} as Record<Path, CSFFile<TFramework>>);
}
loadAllCSFFilesSync(): Record<Path, CSFFile<TFramework>> {
loadAllCSFFiles(sync: false): Promise<StoryStore<TFramework>['cachedCSFFiles']>;
loadAllCSFFiles(sync: true): StoryStore<TFramework>['cachedCSFFiles'];
loadAllCSFFiles(sync: boolean): MaybePromise<StoryStore<TFramework>['cachedCSFFiles']> {
const importPaths: Record<Path, StoryId> = {};
Object.entries(this.storyIndex.stories).forEach(([storyId, { importPath }]) => {
importPaths[importPath] = storyId;
});
const csfFileList = Object.entries(importPaths).map(([importPath, storyId]): [
Path,
CSFFile<TFramework>
] => [importPath, this.loadCSFFileByStoryIdSync(storyId)]);
const csfFileList = Object.entries(importPaths).map(([importPath, storyId]) => ({
importPath,
csfFileOrPromise: sync
? this.loadCSFFileByStoryId(storyId, { sync: true })
: this.loadCSFFileByStoryId(storyId, { sync: false }),
}));
return csfFileList.reduce((acc, [importPath, csfFile]) => {
acc[importPath] = csfFile;
return acc;
}, {} as Record<Path, CSFFile<TFramework>>);
function toObject(list: { importPath: Path; csfFile: CSFFile<TFramework> }[]) {
return list.reduce((acc, { importPath, csfFile }) => {
acc[importPath] = csfFile;
return acc;
}, {} as Record<Path, CSFFile<TFramework>>);
}
if (sync) {
return toObject(
csfFileList.map(({ importPath, csfFileOrPromise }) => ({
importPath,
csfFile: csfFileOrPromise,
})) as { importPath: Path; csfFile: CSFFile<TFramework> }[]
);
}
return Promise.all(
csfFileList.map(async ({ importPath, csfFileOrPromise }) => ({
importPath,
csfFile: await csfFileOrPromise,
}))
).then(toObject);
}
async cacheAllCSFFiles(): Promise<void> {
this.cachedCSFFiles = await this.loadAllCSFFiles();
}
cacheAllCSFFiles(sync: false): Promise<void>;
cacheAllCSFFilesSync() {
this.cachedCSFFiles = this.loadAllCSFFilesSync();
cacheAllCSFFiles(sync: true): void;
cacheAllCSFFiles(sync: boolean): MaybePromise<void> {
if (sync) {
this.cachedCSFFiles = this.loadAllCSFFiles(true);
return null;
}
return this.loadAllCSFFiles(false).then((csfFiles) => {
this.cachedCSFFiles = csfFiles;
});
}
// Load the CSF file for a story and prepare the story from it and the project annotations.
async loadStory({ storyId }: { storyId: StoryId }): Promise<Story<TFramework>> {
const csfFile = await this.loadCSFFileByStoryId(storyId);
const csfFile = await this.loadCSFFileByStoryId(storyId, { sync: false });
return this.storyFromCSFFile({ storyId, csfFile });
}