NextJS-server: Experimental WIP framework

code/builders/builder-manager/src/utils/template.ts

@@ -34,7 +34,7 @@ export const renderHTML = async (
   refs: Promise<Record<string, Ref>>,
   logLevel: Promise<string>,
   docsOptions: Promise<DocsOptions>,
-  { versionCheck, previewUrl, configType }: Options
+  { versionCheck, previewUrl, configType, ignorePreview }: Options
 ) => {
   const titleRef = await title;
   const templateRef = await template;
@@ -54,5 +54,6 @@ export const renderHTML = async (
       PREVIEW_URL: JSON.stringify(previewUrl, null, 2), // global preview URL
     },
     head: (await customHead) || '',
+    ignorePreview,
   });
 };

code/builders/builder-manager/templates/template.ejs

@@ -66,6 +66,8 @@
       import './sb-manager/runtime.js';
     </script>
 
+    <% if (!ignorePreview) { %>
     <link href="./sb-preview/runtime.js" rel="prefetch" as="script" />
+    <% } %>
   </body>
 </html>

code/frameworks/nextjs-server/README.md

@@ -0,0 +1,3 @@
+# Storybook NextJS Server
+
+https://chromatic-ui.notion.site/Storybook-NextJS-Server-df380c489bae4a5e9d6f326d703e4c4c?pvs=4

code/frameworks/nextjs-server/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/frameworks/nextjs-server/package.json

@@ -0,0 +1,135 @@
+{
+  "name": "@storybook/nextjs-server",
+  "version": "8.0.0-alpha.0",
+  "description": "Storybook for NextJS Server: Server-side rendering.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/nextjs-server",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/frameworks/nextjs-server"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./dist/index.js",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "require": "./dist/preset.js"
+    },
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "require": "./dist/plugin.js"
+    },
+    "./mock": {
+      "types": "./dist/mock.d.ts",
+      "node": "./dist/mock.js",
+      "require": "./dist/mock.js",
+      "import": "./dist/mock.mjs"
+    },
+    "./next-config": {
+      "node": "./dist/next-config.js"
+    },
+    "./pages": {
+      "types": "./dist/pages/index.d.ts",
+      "import": "./dist/pages/index.mjs"
+    },
+    "./channels": {
+      "types": "./dist/reexports/channels.d.ts",
+      "node": "./dist/reexports/channels.js",
+      "require": "./dist/reexports/channels.js",
+      "import": "./dist/reexports/channels.mjs"
+    },
+    "./core-events": {
+      "types": "./dist/reexports/core-events.d.ts",
+      "node": "./dist/reexports/core-events.js",
+      "require": "./dist/reexports/core-events.js",
+      "import": "./dist/reexports/core-events.mjs"
+    },
+    "./preview-api": {
+      "types": "./dist/reexports/preview-api.d.ts",
+      "node": "./dist/reexports/preview-api.js",
+      "require": "./dist/reexports/preview-api.js",
+      "import": "./dist/reexports/preview-api.mjs"
+    },
+    "./types": {
+      "types": "./dist/reexports/types.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "template/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
+    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@babel/core": "^7.22.9",
+    "@babel/types": "^7.22.5",
+    "@storybook/channels": "workspace:*",
+    "@storybook/core-common": "workspace:*",
+    "@storybook/core-events": "workspace:*",
+    "@storybook/core-server": "workspace:*",
+    "@storybook/csf-tools": "workspace:*",
+    "@storybook/node-logger": "workspace:*",
+    "@storybook/preview-api": "workspace:*",
+    "@storybook/react": "workspace:*",
+    "@storybook/types": "workspace:*",
+    "@types/node": "^18.0.0",
+    "fs-extra": "^11.1.0",
+    "ts-dedent": "^2.0.0",
+    "unplugin": "^1.3.1"
+  },
+  "devDependencies": {
+    "typescript": "~4.9.3"
+  },
+  "peerDependencies": {
+    "next": "^13",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/null-builder.ts",
+      "./src/null-renderer.ts",
+      "./src/preset.ts",
+      "./src/mock.ts",
+      "./src/next-config.cts",
+      "./src/pages/index.ts",
+      "./src/reexports/channels.ts",
+      "./src/reexports/core-events.ts",
+      "./src/reexports/preview-api.ts",
+      "./src/reexports/types.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "72ae6b0d965d1ae596159cdb15109c5e13376d78"
+}

code/frameworks/nextjs-server/preset.js

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

code/frameworks/nextjs-server/project.json

@@ -0,0 +1,6 @@
+{
+  "name": "@storybook/nextjs-server",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "implicitDependencies": [],
+  "type": "library"
+}

code/frameworks/nextjs-server/server.d.ts

@@ -0,0 +1 @@
+export * from './dist/server/index.d';

code/frameworks/nextjs-server/server.js

@@ -0,0 +1 @@
+export * from './dist/server';

code/frameworks/nextjs-server/src/index.ts

@@ -0,0 +1 @@
+export * from './types';

code/frameworks/nextjs-server/src/indexers.ts

@@ -0,0 +1,181 @@
+import { cp, readFile, writeFile } from 'fs/promises';
+import { ensureDir, exists } from 'fs-extra';
+import { join, relative, resolve } from 'path';
+import { dedent } from 'ts-dedent';
+import type { Indexer, PreviewAnnotation } from '@storybook/types';
+import { loadCsf } from '@storybook/csf-tools';
+import type { StorybookNextJSOptions } from './types';
+
+const LAYOUT_FILES = ['layout.tsx', 'layout.jsx'];
+
+export const appIndexer = (
+  allPreviewAnnotations: PreviewAnnotation[],
+  { previewPath }: StorybookNextJSOptions
+): Indexer => {
+  return {
+    test: /(stories|story)\.[tj]sx?$/,
+    createIndex: async (fileName, opts) => {
+      console.log('indexing', fileName);
+      const code = (await readFile(fileName, 'utf-8')).toString();
+      const csf = await loadCsf(code, { ...opts, fileName }).parse();
+
+      const inputAppDir = resolve(__dirname, '../template/app');
+      const inputGroupDir = join(inputAppDir, 'groupLayouts');
+      const inputStorybookDir = join(inputAppDir, 'storybook-preview');
+      const appDir = join(process.cwd(), 'app');
+      const sbGroupDir = join(appDir, '(sb)');
+      const storybookDir = join(sbGroupDir, previewPath);
+      await ensureDir(storybookDir);
+
+      try {
+        await cp(inputStorybookDir, storybookDir, { recursive: true });
+        const hasRootLayout = await Promise.any(
+          LAYOUT_FILES.map((file) => exists(join(appDir, file)))
+        );
+        const inputLayout = hasRootLayout ? 'layout-nested.tsx' : 'layout-root.tsx';
+        await cp(`${inputGroupDir}/${inputLayout}`, join(sbGroupDir, 'layout.tsx'));
+
+        const routeLayoutTsx = dedent`import type { PropsWithChildren } from 'react';
+          import React from 'react';
+          import { Storybook } from './components/Storybook';
+
+          export default function NestedLayout({ children }: PropsWithChildren<{}>) {
+            return <Storybook previewPath="${previewPath}">{children}</Storybook>;
+          }`;
+        const routeLayoutFile = join(storybookDir, 'layout.tsx');
+        await writeFile(routeLayoutFile, routeLayoutTsx);
+      } catch (err) {
+        // FIXME: assume we've copied already
+        // console.log({ err });
+      }
+
+      await Promise.all(
+        csf.stories.map(async (story) => {
+          const storyDir = join(storybookDir, story.id);
+          await ensureDir(storyDir);
+          const relativeStoryPath = relative(storyDir, fileName).replace(/\.tsx?$/, '');
+          const { exportName } = story;
+
+          const pageTsx = dedent`
+            import React from 'react';
+            import { composeStory } from '@storybook/react/testing-api';
+            import { getArgs } from '../components/args';
+            import { Prepare, StoryAnnotations } from '../components/Prepare';
+            import { Args } from '@storybook/react';
+
+            const page = async () => {
+              const stories = await import('${relativeStoryPath}');
+              const projectAnnotations = {};
+              const Composed = composeStory(stories.${exportName}, stories.default, projectAnnotations?.default || {}, '${exportName}');
+              const extraArgs = await getArgs(Composed.id);
+
+              const { id, parameters, argTypes, initialArgs } = Composed;
+              const args = { ...initialArgs, ...extraArgs };
+
+              const storyAnnotations: StoryAnnotations<Args> = {
+                id,
+                parameters,
+                argTypes,
+                initialArgs,
+                args,
+              };
+              return (
+                <>
+                <Prepare story={storyAnnotations} />
+                {/* @ts-ignore TODO -- why? */}
+                <Composed {...extraArgs} />
+                </>
+                );
+              };
+              export default page;
+            `;
+
+          const pageFile = join(storyDir, 'page.tsx');
+          await writeFile(pageFile, pageTsx);
+        })
+      );
+
+      return csf.indexInputs;
+    },
+  };
+};
+
+export const pagesIndexer = (
+  allPreviewAnnotations: PreviewAnnotation[],
+  { previewPath }: StorybookNextJSOptions
+): Indexer => {
+  const workingDir = process.cwd(); // TODO we should probably put this on the preset options
+
+  return {
+    test: /(stories|story)\.[tj]sx?$/,
+    createIndex: async (fileName, opts) => {
+      console.log('indexing', fileName);
+      const code = (await readFile(fileName, 'utf-8')).toString();
+      const csf = await loadCsf(code, { ...opts, fileName }).parse();
+
+      const routeDir = 'pages';
+      const storybookDir = join(process.cwd(), routeDir, previewPath);
+      await ensureDir(storybookDir);
+
+      const indexTsx = dedent`
+        import React from 'react';
+        import { Storybook } from './components/Storybook';
+
+        const page = () => <Storybook />;
+        export default page;
+      `;
+      const indexFile = join(storybookDir, 'index.tsx');
+      await writeFile(indexFile, indexTsx);
+
+      const projectAnnotationImports = allPreviewAnnotations
+        .map((path, index) => `const projectAnnotations${index} = await import('${path}');`)
+        .join('\n');
+
+      const projectAnnotationArray = allPreviewAnnotations
+        .map((_, index) => `projectAnnotations${index}`)
+        .join(',');
+
+      const storybookTsx = dedent`
+        import React, { useEffect } from 'react';
+        import { composeConfigs } from '@storybook/preview-api';
+        import { Preview } from '@storybook/nextjs-server/pages';
+
+        const getProjectAnnotations = async () => {
+          ${projectAnnotationImports}
+          return composeConfigs([${projectAnnotationArray}]);
+        }
+
+        export const Storybook = () => (
+          <Preview getProjectAnnotations={getProjectAnnotations} previewPath="${previewPath}" />
+        );
+      `;
+
+      const componentsDir = join(storybookDir, 'components');
+      await ensureDir(componentsDir);
+      const storybookFile = join(componentsDir, 'Storybook.tsx');
+      await writeFile(storybookFile, storybookTsx);
+
+      const componentId = csf.stories[0].id.split('--')[0];
+      const relativeStoryPath = relative(storybookDir, fileName).replace(/\.tsx?$/, '');
+      const importPath = relative(workingDir, fileName).replace(/^([^./])/, './$1');
+
+      const csfImportTsx = dedent`
+        import React from 'react';
+        import { Storybook } from './components/Storybook';
+        import * as stories from '${relativeStoryPath}';
+
+        if (typeof window !== 'undefined') {
+          window._storybook_onImport('${importPath}', stories);
+        }
+
+        const page = () => <Storybook />;
+        export default page;
+      `;
+
+      const csfImportFile = join(storybookDir, `${componentId}.tsx`);
+      await writeFile(csfImportFile, csfImportTsx);
+
+      return csf.indexInputs;
+    },
+  };
+};