Merge pull request #24623 from storybookjs/norbert/split-docs-entries

Maintenance: Split renderers preview entrypoints

code/lib/core-server/src/presets/common-preset.ts

@@ -225,10 +225,13 @@ export const frameworkOptions = async (
 export const docs = (
   docsOptions: StorybookConfig['docs'],
   { docs: docsMode }: CLIOptions
-): StorybookConfig['docs'] => ({
-  ...docsOptions,
-  docsMode,
-});
+): StorybookConfig['docs'] =>
+  docsOptions && docsMode !== undefined
+    ? {
+        ...docsOptions,
+        docsMode,
+      }
+    : docsOptions;
 
 export const managerHead = async (_: any, options: Options) => {
   const location = join(options.configDir, 'manager-head.html');

code/lib/preview-api/template/stories/args.stories.ts

@@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { pick } from 'lodash';
+import pick from 'lodash/pick';
 import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS } from '@storybook/core-events';
 
 export default {

code/renderers/html/package.json

@@ -26,11 +26,9 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./preview": {
-      "types": "./dist/config.d.ts",
-      "require": "./dist/config.js",
-      "import": "./dist/config.mjs"
-    },
+    "./preset": "./preset.js",
+    "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
+    "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -71,7 +69,9 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts"
+      "./src/preset.ts",
+      "./src/entry-preview.ts",
+      "./src/entry-preview-docs.ts"
     ],
     "platform": "browser"
   },

code/renderers/html/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

code/renderers/html/src/docs/sourceDecorator.ts

@@ -2,13 +2,13 @@
 
 import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 import { addons, useEffect } from '@storybook/preview-api';
-import type { PartialStoryFn } from '@storybook/types';
+import type { DecoratorFunction } from '@storybook/types';
 
-import type { HtmlRenderer, StoryContext } from '../types';
+import type { HtmlRenderer } from '../types';
 
 import type { StoryFn } from '../public-types';
 
-function skipSourceRender(context: StoryContext) {
+function skipSourceRender(context: Parameters<DecoratorFunction<HtmlRenderer>>[1]) {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
 
@@ -22,7 +22,7 @@ function skipSourceRender(context: StoryContext) {
   return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
 }
 
-export function sourceDecorator(storyFn: PartialStoryFn<HtmlRenderer>, context: StoryContext) {
+export const sourceDecorator: DecoratorFunction<HtmlRenderer> = (storyFn, context) => {
   const story = storyFn();
   const renderedForSource = context?.parameters.docs?.source?.excludeDecorators
     ? (context.originalStoryFn as StoryFn)(context.args, context)
@@ -42,4 +42,4 @@ export function sourceDecorator(storyFn: PartialStoryFn<HtmlRenderer>, context:
   });
 
   return story;
-}
+};

code/renderers/html/src/entry-preview-docs.ts

@@ -0,0 +1,21 @@
+import type { ArgTypesEnhancer, DecoratorFunction } from '@storybook/types';
+import { SourceType, enhanceArgTypes } from '@storybook/docs-tools';
+
+import { sourceDecorator } from './docs/sourceDecorator';
+import type { HtmlRenderer } from './types';
+
+export const decorators: DecoratorFunction<HtmlRenderer>[] = [sourceDecorator];
+
+export const parameters = {
+  docs: {
+    story: { inline: true },
+    source: {
+      type: SourceType.DYNAMIC,
+      language: 'html',
+      code: undefined,
+      excludeDecorators: undefined,
+    },
+  },
+};
+
+export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];

code/renderers/html/src/entry-preview.ts

@@ -0,0 +1,5 @@
+import type { Parameters } from './types';
+
+export const parameters: Parameters = { renderer: 'html' };
+
+export { renderToCanvas, render } from './render';

code/renderers/html/src/preset.ts

@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/types';
+import { join } from 'path';
+
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input, options) => {
+  const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;
+  const result: string[] = [];
+
+  return result
+    .concat(input)
+    .concat([join(__dirname, 'entry-preview.mjs')])
+    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []);
+};

code/renderers/preact/package.json

@@ -26,11 +26,9 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./preview": {
-      "types": "./dist/config.d.ts",
-      "require": "./dist/config.js",
-      "import": "./dist/config.mjs"
-    },
+    "./preset": "./preset.js",
+    "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
+    "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -71,7 +69,9 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts"
+      "./src/preset.ts",
+      "./src/entry-preview.ts",
+      "./src/entry-preview-docs.ts"
     ],
     "platform": "browser"
   },

code/renderers/preact/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

code/renderers/preact/src/entry-preview.ts

@@ -0,0 +1,3 @@
+export { renderToCanvas, render } from './render';
+
+export const parameters = { renderer: 'preact' };

code/renderers/preact/src/preset.ts

@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/types';
+import { join } from 'path';
+
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input, options) => {
+  const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;
+  const result: string[] = [];
+
+  return result
+    .concat(input)
+    .concat([join(__dirname, 'entry-preview.mjs')])
+    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []);
+};

code/renderers/react/package.json

@@ -26,15 +26,9 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./preview": {
-      "types": "./dist/config.d.ts",
-      "require": "./dist/config.js",
-      "import": "./dist/config.mjs"
-    },
-    "./dist/preset": {
-      "types": "./dist/preset.d.ts",
-      "require": "./dist/preset.js"
-    },
+    "./preset": "./preset.js",
+    "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
+    "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -102,8 +96,9 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts",
-      "./src/preset.ts"
+      "./src/preset.ts",
+      "./src/entry-preview.ts",
+      "./src/entry-preview-docs.ts"
     ],
     "platform": "browser"
   },

code/renderers/react/src/applyDecorators.ts → code/renderers/react/src/docs/applyDecorators.ts

@@ -1,8 +1,8 @@
 import { defaultDecorateStory } from '@storybook/preview-api';
 import type { LegacyStoryFn, DecoratorFunction } from '@storybook/types';
 
-import type { ReactRenderer } from './types';
-import { jsxDecorator } from './docs/jsxDecorator';
+import type { ReactRenderer } from '../types';
+import { jsxDecorator } from './jsxDecorator';
 
 export const applyDecorators = (
   storyFn: LegacyStoryFn<ReactRenderer>,

code/renderers/react/src/entry-preview-docs.ts

@@ -0,0 +1,20 @@
+import type { ArgTypesEnhancer, DecoratorFunction } from '@storybook/types';
+import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
+
+import { extractArgTypes } from './docs/extractArgTypes';
+import { jsxDecorator } from './docs/jsxDecorator';
+import type { ReactRenderer } from './types';
+
+export const parameters = {
+  docs: {
+    story: { inline: true },
+    extractArgTypes,
+    extractComponentDescription,
+  },
+};
+
+export const decorators: DecoratorFunction<ReactRenderer>[] = [jsxDecorator];
+
+export const argTypesEnhancers: ArgTypesEnhancer<ReactRenderer>[] = [enhanceArgTypes];
+
+export { applyDecorators } from './docs/applyDecorators';

code/renderers/react/src/entry-preview.ts

@@ -0,0 +1,2 @@
+export const parameters: {} = { renderer: 'react' };
+export { render, renderToCanvas } from './render';

code/renderers/react/src/preset.ts

@@ -1,5 +1,18 @@
 import type { StorybookConfig } from '@storybook/types';
 
+import { join } from 'path';
+
 export const addons: StorybookConfig['addons'] = [
   require.resolve('@storybook/react-dom-shim/dist/preset'),
 ];
+
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input, options) => {
+  const docsConfig = await options.presets.apply('docs', {}, options);
+  const docsEnabled = Object.keys(docsConfig).length > 0;
+  const result: string[] = [];
+
+  return result
+    .concat(input)
+    .concat([join(__dirname, 'entry-preview.mjs')])
+    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []);
+};

code/renderers/server/package.json

@@ -26,16 +26,8 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./preview": {
-      "types": "./dist/config.d.ts",
-      "require": "./dist/config.js",
-      "import": "./dist/config.mjs"
-    },
-    "./preset": {
-      "types": "./dist/preset.d.ts",
-      "require": "./dist/preset.js",
-      "import": "./dist/preset.mjs"
-    },
+    "./preset": "./preset.js",
+    "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -77,8 +69,8 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts",
-      "./src/preset.ts"
+      "./src/preset.ts",
+      "./src/entry-preview.ts"
     ],
     "platform": "browser"
   },

code/renderers/server/src/preset.ts

@@ -2,6 +2,8 @@ import fs from 'fs-extra';
 import yaml from 'yaml';
 import type { StorybookConfig, Tag, StoryName, ComponentTitle } from '@storybook/types';
 
+import { join } from 'path';
+
 type FileContent = {
   title: ComponentTitle;
   tags?: Tag[];
@@ -34,3 +36,13 @@ export const experimental_indexers: StorybookConfig['experimental_indexers'] = (
   },
   ...(existingIndexers || []),
 ];
+
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input, options) => {
+  const { presetsList } = options;
+  if (!presetsList) {
+    return input;
+  }
+  const result: string[] = [];
+
+  return result.concat(input).concat([join(__dirname, 'entry-preview.mjs')]);
+};