Merge pull request #32861 from storybookjs/version-non-patch-from-10.0.0-rc.3

Release: Prerelease 10.0.0-rc.4

Author: yannbf

CHANGELOG.prerelease.md

@@ -1,3 +1,10 @@
+## 10.0.0-rc.4
+
+- Core: Add `experimental_devServer` preset - [#32862](https://github.com/storybookjs/storybook/pull/32862), thanks @yannbf!
+- Core: Fix stepping back through story interactions panel - [#32793](https://github.com/storybookjs/storybook/pull/32793), thanks @ia319!
+- Core: Join framework preset path with slash - [#32838](https://github.com/storybookjs/storybook/pull/32838), thanks @brandonroberts!
+- Telemetry: Fix preview-first-load event - [#32859](https://github.com/storybookjs/storybook/pull/32859), thanks @shilman!
+
 ## 10.0.0-rc.3
 
 - A11y: Persist tab/highlight across docs navigation - [#32762](https://github.com/storybookjs/storybook/pull/32762), thanks @404Dealer!

code/core/src/common/utils/validate-config.test.ts

@@ -1,7 +1,12 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
+import { resolveModulePath } from 'exsolve';
+
 import { validateFrameworkName } from './validate-config';
 
+// mock exsolve to spy
+vi.mock('exsolve', { spy: true });
+
 describe('validateFrameworkName', () => {
   afterEach(() => {
     vi.resetAllMocks();
@@ -20,15 +25,20 @@ describe('validateFrameworkName', () => {
   });
 
   it('should not throw if framework is unknown (community) but can be resolved', () => {
-    // mock require.resolve to return a value
-    vi.spyOn(require, 'resolve').mockReturnValue('some-community-framework');
-    expect(() => validateFrameworkName('some-community-framework')).toThrow();
+    vi.mocked(resolveModulePath).mockImplementation(() => {});
+
+    expect(() => validateFrameworkName('some-community-framework')).not.toThrow();
+  });
+
+  it('should not throw if scoped framework is unknown (community) but can be resolved', () => {
+    vi.mocked(resolveModulePath).mockImplementation(() => {});
+
+    expect(() => validateFrameworkName('@some-community/framework')).not.toThrow();
   });
 
   it('should throw if framework is unknown and cannot be resolved', () => {
-    // mock require.resolve to fail
-    vi.spyOn(require, 'resolve').mockImplementation(() => {
-      throw new Error('Cannot resolve');
+    vi.mocked(resolveModulePath).mockImplementation(() => {
+      throw new Error('cannot resolve');
     });
 
     expect(() => validateFrameworkName('foo')).toThrow();

code/core/src/common/utils/validate-config.ts

@@ -1,5 +1,3 @@
-import { join } from 'node:path';
-
 import {
   CouldNotEvaluateFrameworkError,
   InvalidFrameworkNameError,
@@ -35,7 +33,7 @@ export function validateFrameworkName(
 
   // If it's not a known framework, we need to validate that it's a valid package at least
   try {
-    resolveModulePath(join(frameworkName, 'preset'), {
+    resolveModulePath(`${frameworkName}/preset`, {
       extensions: ['.mjs', '.js', '.cjs'],
       conditions: ['node', 'import', 'require'],
     });

code/core/src/core-server/dev-server.ts

@@ -50,6 +50,9 @@ export async function storybookDevServer(options: Options) {
 
   (await getMiddleware(options.configDir))(app);
 
+  // Apply experimental_devServer preset to allow addons/frameworks to extend the dev server with middlewares, etc.
+  await options.presets.apply('experimental_devServer', app);
+
   const { port, host, initialPath } = options;
   invariant(port, 'expected options to have a port');
   const proto = options.https ? 'https' : 'http';

code/core/src/core-server/server-channel/preview-initialized-channel.test.ts

@@ -0,0 +1,86 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { makePayload } from './preview-initialized-channel';
+
+describe('makePayload', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2024-01-01T00:00:00Z'));
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('new user init session', () => {
+    const userAgent = 'Mozilla/5.0';
+    const sessionId = 'session-123';
+    const lastInit = {
+      timestamp: Date.now() - 3000,
+      body: {
+        sessionId,
+        payload: { newUser: true },
+      },
+    };
+
+    expect(makePayload(userAgent, lastInit as any, sessionId)).toMatchInlineSnapshot(`
+      {
+        "isNewUser": true,
+        "timeSinceInit": 3000,
+        "userAgent": "Mozilla/5.0",
+      }
+    `);
+  });
+
+  it('existing user init session', () => {
+    const userAgent = 'Mozilla/5.0';
+    const sessionId = 'session-123';
+    const lastInit = {
+      timestamp: Date.now() - 3000,
+      body: {
+        sessionId,
+        payload: {},
+      },
+    };
+
+    expect(makePayload(userAgent, lastInit as any, sessionId)).toMatchInlineSnapshot(`
+      {
+        "isNewUser": false,
+        "timeSinceInit": 3000,
+        "userAgent": "Mozilla/5.0",
+      }
+    `);
+  });
+
+  it('no init session', () => {
+    const userAgent = 'Mozilla/5.0';
+    const sessionId = 'session-123';
+    const lastInit = undefined;
+
+    expect(makePayload(userAgent, lastInit, sessionId)).toMatchInlineSnapshot(`
+      {
+        "isNewUser": false,
+        "timeSinceInit": undefined,
+        "userAgent": "Mozilla/5.0",
+      }
+    `);
+  });
+
+  it('init session with different sessionId', () => {
+    const userAgent = 'Mozilla/5.0';
+    const sessionId = 'session-123';
+    const lastInit = {
+      timestamp: Date.now() - 3000,
+      body: {
+        sessionId: 'session-456',
+      },
+    };
+
+    expect(makePayload(userAgent, lastInit as any, sessionId)).toMatchInlineSnapshot(`
+      {
+        "isNewUser": false,
+        "timeSinceInit": undefined,
+        "userAgent": "Mozilla/5.0",
+      }
+    `);
+  });
+});

code/core/src/core-server/server-channel/preview-initialized-channel.ts

@@ -1,11 +1,30 @@
 import type { Channel } from 'storybook/internal/channels';
 import { PREVIEW_INITIALIZED } from 'storybook/internal/core-events';
-import { telemetry } from 'storybook/internal/telemetry';
+import { type InitPayload, telemetry } from 'storybook/internal/telemetry';
 import type { CoreConfig, Options } from 'storybook/internal/types';
 
-import { getLastEvents } from '../../telemetry/event-cache';
+import { type CacheEntry, getLastEvents } from '../../telemetry/event-cache';
 import { getSessionId } from '../../telemetry/session-id';
 
+export const makePayload = (
+  userAgent: string,
+  lastInit: CacheEntry | undefined,
+  sessionId: string
+) => {
+  let timeSinceInit: number | undefined;
+  const payload = {
+    userAgent,
+    isNewUser: false,
+    timeSinceInit,
+  };
+
+  if (sessionId && lastInit?.body?.sessionId === sessionId) {
+    payload.timeSinceInit = Date.now() - lastInit.timestamp;
+    payload.isNewUser = !!(lastInit.body.payload as InitPayload).newUser;
+  }
+  return payload;
+};
+
 export function initPreviewInitializedChannel(
   channel: Channel,
   options: Options,
@@ -19,9 +38,8 @@ export function initPreviewInitializedChannel(
         const lastInit = lastEvents.init;
         const lastPreviewFirstLoad = lastEvents['preview-first-load'];
         if (!lastPreviewFirstLoad) {
-          const isInitSession = lastInit?.body.sessionId === sessionId;
-          const timeSinceInit = lastInit ? Date.now() - lastInit.body.timestamp : undefined;
-          telemetry('preview-first-load', { timeSinceInit, isInitSession, userAgent });
+          const payload = makePayload(userAgent, lastInit, sessionId);
+          telemetry('preview-first-load', payload);
         }
       } catch (e) {
         // do nothing

code/core/src/instrumenter/instrumenter.ts

@@ -223,7 +223,7 @@ export class Instrumenter {
     }) => {
       const { isDebugging } = this.getState(storyId);
       if (newPhase === 'preparing' && isDebugging) {
-        return resetState({ storyId, renderPhase: newPhase });
+        return resetState({ storyId, renderPhase: newPhase, isDebugging });
       } else if (newPhase === 'playing') {
         return resetState({ storyId, renderPhase: newPhase, isDebugging });
       }

code/core/src/telemetry/event-cache.ts

@@ -1,6 +1,6 @@
 import { cache } from 'storybook/internal/common';
 
-import type { EventType } from './types';
+import type { EventType, TelemetryEvent } from './types';
 
 interface UpgradeSummary {
   timestamp: number;
@@ -9,9 +9,14 @@ interface UpgradeSummary {
   sessionId?: string;
 }
 
+export interface CacheEntry {
+  timestamp: number;
+  body: TelemetryEvent;
+}
+
 let operation: Promise<any> = Promise.resolve();
 
-const setHelper = async (eventType: EventType, body: any) => {
+const setHelper = async (eventType: EventType, body: TelemetryEvent) => {
   const lastEvents = (await cache.get('lastEvents')) || {};
   lastEvents[eventType] = { body, timestamp: Date.now() };
   await cache.set('lastEvents', lastEvents);
@@ -23,16 +28,16 @@ export const set = async (eventType: EventType, body: any) => {
   return operation;
 };
 
-export const get = async (eventType: EventType) => {
+export const get = async (eventType: EventType): Promise<CacheEntry | undefined> => {
   const lastEvents = await getLastEvents();
   return lastEvents[eventType];
 };
 
-export const getLastEvents = async () => {
+export const getLastEvents = async (): Promise<Record<EventType, CacheEntry>> => {
   return (await cache.get('lastEvents')) || {};
 };
 
-const upgradeFields = (event: any): UpgradeSummary => {
+const upgradeFields = (event: CacheEntry): UpgradeSummary => {
   const { body, timestamp } = event;
   return {
     timestamp,

code/core/src/telemetry/index.ts

@@ -43,21 +43,21 @@ export const telemetry = async (
       telemetryData.metadata = await getStorybookMetadata(options?.configDir);
     }
   } catch (error: any) {
-    telemetryData.payload.metadataErrorMessage = sanitizeError(error).message;
+    payload.metadataErrorMessage = sanitizeError(error).message;
 
     if (options?.enableCrashReports) {
-      telemetryData.payload.metadataError = sanitizeError(error);
+      payload.metadataError = sanitizeError(error);
     }
   } finally {
-    const { error } = telemetryData.payload;
+    const { error } = payload;
     // make sure to anonymise possible paths from error messages
 
     // make sure to anonymise possible paths from error messages
     if (error) {
-      telemetryData.payload.error = sanitizeError(error);
+      payload.error = sanitizeError(error);
     }
 
-    if (!telemetryData.payload.error || options?.enableCrashReports) {
+    if (!payload.error || options?.enableCrashReports) {
       if (process.env?.STORYBOOK_TELEMETRY_DEBUG) {
         logger.info('\n[telemetry]');
         logger.info(JSON.stringify(telemetryData, null, 2));

code/core/src/telemetry/types.ts

@@ -34,7 +34,6 @@ export type EventType =
   | 'onboarding-survey'
   | 'mocking'
   | 'preview-first-load';
-
 export interface Dependency {
   version: string | undefined;
   versionSpecifier?: string;
@@ -90,6 +89,10 @@ export interface Payload {
   [key: string]: any;
 }
 
+export interface Context {
+  [key: string]: any;
+}
+
 export interface Options {
   retryDelay: number;
   immediate: boolean;
@@ -104,3 +107,17 @@ export interface TelemetryData {
   payload: Payload;
   metadata?: StorybookMetadata;
 }
+
+export interface TelemetryEvent extends TelemetryData {
+  eventId: string;
+  sessionId: string;
+  context: Context;
+}
+
+export interface InitPayload {
+  projectType: string;
+  features: { dev: boolean; docs: boolean; test: boolean; onboarding: boolean };
+  newUser: boolean;
+  versionSpecifier: string | undefined;
+  cliIntegration: string | undefined;
+}