Merge pull request #22443 from storybookjs/shilman/fix-cli-server-init

CLI: Fix server init

code/lib/cli/src/generators/SERVER/index.ts

@@ -1,18 +1,10 @@
-import { join } from 'path';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
-import { copyTemplate } from '../../helpers';
-import { getCliDir } from '../../dirs';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
   await baseGenerator(packageManager, npmOptions, options, 'server', {
     extensions: ['json'],
   });
-
-  const templateDir = join(getCliDir(), 'templates', 'server');
-  if (templateDir) {
-    copyTemplate(templateDir);
-  }
 };
 
 export default generator;

code/lib/cli/src/sandbox-templates.ts

@@ -455,6 +455,17 @@ const internalTemplates = {
       },
     },
   },
+  'internal/server-webpack5': {
+    name: 'Server Webpack5',
+    script: 'yarn init -y',
+    expected: {
+      framework: '@storybook/server-webpack5',
+      renderer: '@storybook/server',
+      builder: '@storybook/builder-webpack5',
+    },
+    isInternal: true,
+    inDevelopment: true,
+  },
   // 'internal/pnp': {
   //   ...baseTemplates['cra/default-ts'],
   //   name: 'PNP (cra/default-ts)',

code/renderers/server/package.json

@@ -31,6 +31,11 @@
       "require": "./dist/config.js",
       "import": "./dist/config.mjs"
     },
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -49,9 +54,12 @@
   },
   "dependencies": {
     "@storybook/core-client": "7.1.0-alpha.12",
+    "@storybook/csf": "^0.1.0",
     "@storybook/global": "^5.0.0",
     "@storybook/preview-api": "7.1.0-alpha.12",
     "@storybook/types": "7.1.0-alpha.12",
+    "@types/fs-extra": "^11.0.1",
+    "fs-extra": "^11.1.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
@@ -66,7 +74,8 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts"
+      "./src/config.ts",
+      "./src/preset.ts"
     ],
     "platform": "browser"
   },

code/renderers/server/preset.js

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

code/renderers/server/src/preset.ts

@@ -0,0 +1,33 @@
+import fs from 'fs-extra';
+import { toId } from '@storybook/csf';
+import type { StaticMeta } from '@storybook/csf-tools';
+import type { IndexerOptions, IndexedStory, StoryIndexer } from '@storybook/types';
+
+export const storyIndexers = (indexers: StoryIndexer[] | null) => {
+  const jsonIndexer = async (fileName: string, opts: IndexerOptions) => {
+    const json = await fs.readJson(fileName, 'utf-8');
+    const meta: StaticMeta = {
+      title: json.title,
+    };
+    const stories: IndexedStory[] = json.stories.map((story: { name: string }) => {
+      const id = toId(meta.title, story.name);
+      const { name } = story;
+      const indexedStory: IndexedStory = {
+        id,
+        name,
+      };
+      return indexedStory;
+    });
+    return {
+      meta,
+      stories,
+    };
+  };
+  return [
+    {
+      test: /(stories|story)\.json$/,
+      indexer: jsonIndexer,
+    },
+    ...(indexers || []),
+  ];
+};

code/renderers/server/template/cli/button.stories.json

@@ -1,7 +1,10 @@
 {
   "title": "Example/Button",
   "parameters": {
-    "server": { "id": "button" }
+    "server": {
+      "url": "https://storybook-server-demo.netlify.app/api",
+      "id": "button"
+    }
   },
   "args": { "label": "Button" },
   "argTypes": {

code/renderers/server/template/cli/header.stories.json

@@ -1,7 +1,10 @@
 {
   "title": "Example/Header",
   "parameters": {
-    "server": { "id": "header" }
+    "server": {
+      "url": "https://storybook-server-demo.netlify.app/api",
+      "id": "header"
+    }
   },
   "stories": [
     {

code/renderers/server/template/cli/page.stories.json

@@ -1,7 +1,10 @@
 {
   "title": "Example/Page",
   "parameters": {
-    "server": { "id": "page" }
+    "server": {
+      "url": "https://storybook-server-demo.netlify.app/api",
+      "id": "page"
+    }
   },
   "stories": [
     {

code/yarn.lock

@@ -7051,9 +7051,12 @@ __metadata:
   resolution: "@storybook/server@workspace:renderers/server"
   dependencies:
     "@storybook/core-client": 7.1.0-alpha.12
+    "@storybook/csf": ^0.1.0
     "@storybook/global": ^5.0.0
     "@storybook/preview-api": 7.1.0-alpha.12
     "@storybook/types": 7.1.0-alpha.12
+    "@types/fs-extra": ^11.0.1
+    fs-extra: ^11.1.0
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
   languageName: unknown

scripts/sandbox/generate.ts

@@ -132,7 +132,9 @@ const runGenerators = async (
   await Promise.all(
     generators.map(({ dirName, name, script, expected }) =>
       limit(async () => {
-        const flags = expected.renderer === '@storybook/html' ? ['--type html'] : [];
+        let flags: string[] = [];
+        if (expected.renderer === '@storybook/html') flags = ['--type html'];
+        else if (expected.renderer === '@storybook/server') flags = ['--type server'];
 
         const time = process.hrtime();
         console.log(`🧬 Generating ${name}`);

scripts/tasks/sandbox-parts.ts

@@ -100,7 +100,9 @@ export const install: Task['run'] = async (
     );
   }
 
-  const extra = template.expected.renderer === '@storybook/html' ? { type: 'html' } : {};
+  let extra = {};
+  if (template.expected.renderer === '@storybook/html') extra = { type: 'html' };
+  else if (template.expected.renderer === '@storybook/server') extra = { type: 'server' };
 
   await executeCLIStep(steps.init, {
     cwd,
@@ -368,7 +370,9 @@ export const addStories: Task['run'] = async (
   const packageJson = await import(join(cwd, 'package.json'));
   updateStoriesField(mainConfig, detectLanguage(packageJson) === SupportedLanguage.JAVASCRIPT);
 
-  const isCoreRenderer = template.expected.renderer.startsWith('@storybook/');
+  const isCoreRenderer =
+    template.expected.renderer.startsWith('@storybook/') &&
+    template.expected.renderer !== '@storybook/server';
 
   const sandboxSpecificStoriesFolder = key.replaceAll('/', '-');
   const storiesVariantFolder = getStoriesFolderWithVariant(sandboxSpecificStoriesFolder);