Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make watchStorySpecifiers use @parcel/watcher #27081

Draft
wants to merge 9 commits into
base: next
Choose a base branch
from
Draft

Make watchStorySpecifiers use @parcel/watcher #27081

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
dc4f4d3
Prevent long hang on startup
heyimalex May 2, 2024
5f698d2
fixes
heyimalex May 2, 2024
1450b49
shadowing fix
heyimalex May 2, 2024
d750423
howd this slip through
heyimalex May 2, 2024
17f9b72
Fixup tests
heyimalex May 2, 2024
b6e3747
fixup stores json test
heyimalex May 8, 2024
91cc891
use @parcel/watcher
heyimalex May 9, 2024
24e274a
Fixup stories json test
heyimalex May 9, 2024
0046857
await a call
heyimalex May 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions code/lib/core-server/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"@babel/core": "^7.24.4",
"@babel/parser": "^7.24.4",
"@discoveryjs/json-ext": "^0.5.3",
"@parcel/watcher": "^2.4.1",
"@storybook/builder-manager": "workspace:*",
"@storybook/channels": "workspace:*",
"@storybook/core-common": "workspace:*",
Expand Down
2 changes: 1 addition & 1 deletion code/lib/core-server/src/utils/getStoryIndexGenerator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export async function getStoryIndexGenerator(

const initializedStoryIndexGenerator = generator.initialize().then(() => generator);

useStoriesJson({
await useStoriesJson({
router,
initializedStoryIndexGenerator,
normalizedStories,
Expand Down
66 changes: 33 additions & 33 deletions code/lib/core-server/src/utils/stories-json.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { describe, beforeEach, it, expect, vi } from 'vitest';
import type { Mocked } from 'vitest';

import type { Router, Request, Response } from 'express';
import Watchpack from 'watchpack';
import path from 'path';
import debounce from 'lodash/debounce.js';
import watchImport from '@parcel/watcher';
import { STORY_INDEX_INVALIDATED } from '@storybook/core-events';
import { normalizeStoriesEntry } from '@storybook/core-common';

Expand All @@ -13,9 +14,17 @@ import type { StoryIndexGeneratorOptions } from './StoryIndexGenerator';
import { StoryIndexGenerator } from './StoryIndexGenerator';
import { csfIndexer } from '../presets/common-preset';

vi.mock('watchpack');
const watch = watchImport as Mocked<typeof watchImport>;

vi.mock('lodash/debounce');
vi.mock('@storybook/node-logger');
vi.mock('@parcel/watcher', () => {
return {
default: {
subscribe: vi.fn(() => Promise.resolve({ unsubscribe: () => Promise.resolve() })),
},
};
});

const workingDir = path.join(__dirname, '__mockdata__');
const normalizedStories = [
Expand Down Expand Up @@ -85,7 +94,7 @@ describe('useStoriesJson', () => {
it('scans and extracts index', async () => {
const mockServerChannel = { emit: vi.fn() } as any as ServerChannel;
console.time('useStoriesJson');
useStoriesJson({
await useStoriesJson({
router,
serverChannel: mockServerChannel,
workingDir,
Expand Down Expand Up @@ -254,7 +263,7 @@ describe('useStoriesJson', () => {
it('can handle simultaneous access', async () => {
const mockServerChannel = { emit: vi.fn() } as any as ServerChannel;

useStoriesJson({
await useStoriesJson({
router,
serverChannel: mockServerChannel,
workingDir,
Expand Down Expand Up @@ -286,7 +295,7 @@ describe('useStoriesJson', () => {

it('sends invalidate events', async () => {
const mockServerChannel = { emit: vi.fn() } as any as ServerChannel;
useStoriesJson({
await useStoriesJson({
router,
serverChannel: mockServerChannel,
workingDir,
Expand All @@ -301,21 +310,19 @@ describe('useStoriesJson', () => {

expect(write).not.toHaveBeenCalled();

expect(Watchpack).toHaveBeenCalledTimes(1);
const watcher = Watchpack.mock.instances[0];
expect(watcher.watch).toHaveBeenCalledWith({ directories: ['./src'] });

expect(watcher.on).toHaveBeenCalledTimes(2);
const onChange = watcher.on.mock.calls[0][1];
expect(watch.subscribe).toHaveBeenCalledTimes(1);
const subscribeCallback = watch.subscribe.mock.lastCall?.[1] || (() => {});

await onChange('src/nested/Button.stories.ts');
await subscribeCallback(null, [
{ type: 'update', path: `${workingDir}/src/nested/Button.stories.ts` },
]);
expect(mockServerChannel.emit).toHaveBeenCalledTimes(1);
expect(mockServerChannel.emit).toHaveBeenCalledWith(STORY_INDEX_INVALIDATED);
});

it('only sends one invalidation when multiple event listeners are listening', async () => {
const mockServerChannel = { emit: vi.fn() } as any as ServerChannel;
useStoriesJson({
await useStoriesJson({
router,
serverChannel: mockServerChannel,
workingDir,
Expand All @@ -334,14 +341,12 @@ describe('useStoriesJson', () => {

expect(write).not.toHaveBeenCalled();

expect(Watchpack).toHaveBeenCalledTimes(1);
const watcher = Watchpack.mock.instances[0];
expect(watcher.watch).toHaveBeenCalledWith({ directories: ['./src'] });

expect(watcher.on).toHaveBeenCalledTimes(2);
const onChange = watcher.on.mock.calls[0][1];
expect(watch.subscribe).toHaveBeenCalledTimes(1);
const subscribeCallback = watch.subscribe.mock.lastCall?.[1] || (() => {});

await onChange('src/nested/Button.stories.ts');
await subscribeCallback(null, [
{ type: 'update', path: `${workingDir}/src/nested/Button.stories.ts` },
]);
expect(mockServerChannel.emit).toHaveBeenCalledTimes(1);
expect(mockServerChannel.emit).toHaveBeenCalledWith(STORY_INDEX_INVALIDATED);
});
Expand All @@ -353,7 +358,7 @@ describe('useStoriesJson', () => {
);

const mockServerChannel = { emit: vi.fn() } as any as ServerChannel;
useStoriesJson({
await useStoriesJson({
router,
serverChannel: mockServerChannel,
workingDir,
Expand All @@ -368,18 +373,13 @@ describe('useStoriesJson', () => {

expect(write).not.toHaveBeenCalled();

expect(Watchpack).toHaveBeenCalledTimes(1);
const watcher = Watchpack.mock.instances[0];
expect(watcher.watch).toHaveBeenCalledWith({ directories: ['./src'] });

expect(watcher.on).toHaveBeenCalledTimes(2);
const onChange = watcher.on.mock.calls[0][1];

await onChange('src/nested/Button.stories.ts');
await onChange('src/nested/Button.stories.ts');
await onChange('src/nested/Button.stories.ts');
await onChange('src/nested/Button.stories.ts');
await onChange('src/nested/Button.stories.ts');
expect(watch.subscribe).toHaveBeenCalledTimes(1);
const subscribeCallback = watch.subscribe.mock.lastCall?.[1] || (() => {});
for (let i = 0; i < 5; i++) {
await subscribeCallback(null, [
{ type: 'update', path: `${workingDir}/src/nested/Button.stories.ts` },
]);
}

expect(mockServerChannel.emit).toHaveBeenCalledTimes(1);
expect(mockServerChannel.emit).toHaveBeenCalledWith(STORY_INDEX_INVALIDATED);
Expand Down
19 changes: 13 additions & 6 deletions code/lib/core-server/src/utils/stories-json.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export async function extractStoriesJson(
await writeJSON(outputFile, transform ? transform(storyIndex) : storyIndex);
}

export function useStoriesJson({
export async function useStoriesJson({
router,
initializedStoryIndexGenerator,
workingDir = process.cwd(),
Expand All @@ -37,11 +37,18 @@ export function useStoriesJson({
const maybeInvalidate = debounce(() => serverChannel.emit(STORY_INDEX_INVALIDATED), DEBOUNCE, {
leading: true,
});
watchStorySpecifiers(normalizedStories, { workingDir }, async (specifier, path, removed) => {
const generator = await initializedStoryIndexGenerator;
generator.invalidate(specifier, path, removed);
maybeInvalidate();
});
await watchStorySpecifiers(
normalizedStories,
{ workingDir },
async (specifier, path, removed) => {
const generator = await initializedStoryIndexGenerator;
generator.invalidate(specifier, path, removed);
maybeInvalidate();
},
(err) => {
console.log(err);
}
Comment on lines +48 to +50
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure about the best way to handle errors coming from the watcher.

);

router.use('/index.json', async (req: Request, res: Response) => {
try {
Expand Down
Loading