From 0121d353eae10a3d21f580fd245fd22bf139d479 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 3 May 2023 10:41:34 +0200 Subject: [PATCH 1/8] make copyTemplate fault-tolerant and less error prone --- code/lib/cli/src/generators/ANGULAR/index.ts | 11 +++++++++-- code/lib/cli/src/generators/AURELIA/index.ts | 5 ++++- code/lib/cli/src/generators/SERVER/index.ts | 4 +++- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/code/lib/cli/src/generators/ANGULAR/index.ts b/code/lib/cli/src/generators/ANGULAR/index.ts index 2740be11589a..8c33e83239f6 100644 --- a/code/lib/cli/src/generators/ANGULAR/index.ts +++ b/code/lib/cli/src/generators/ANGULAR/index.ts @@ -79,8 +79,15 @@ const generator: Generator<{ projectName: string }> = async ( }); } - const templateDir = join(getCliDir(), 'templates', 'angular', projectType || 'application'); - copyTemplate(templateDir, root || undefined); + let projectTypeValue = projectType || 'application'; + if (projectTypeValue !== 'application' && projectTypeValue !== 'library') { + projectTypeValue = 'application'; + } + + const templateDir = join(getCliDir(), 'templates', 'angular', projectTypeValue); + if (templateDir) { + copyTemplate(templateDir, root || undefined); + } return { projectName: angularProjectName, diff --git a/code/lib/cli/src/generators/AURELIA/index.ts b/code/lib/cli/src/generators/AURELIA/index.ts index bb7c66d4d0be..04101f26c857 100644 --- a/code/lib/cli/src/generators/AURELIA/index.ts +++ b/code/lib/cli/src/generators/AURELIA/index.ts @@ -25,8 +25,11 @@ const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'aurelia', { extraPackages: ['aurelia'], }); + const templateDir = join(getCliDir(), 'templates', 'aurelia'); - copyTemplate(templateDir); + if (templateDir) { + copyTemplate(templateDir); + } }; export default generator; diff --git a/code/lib/cli/src/generators/SERVER/index.ts b/code/lib/cli/src/generators/SERVER/index.ts index 8653c25dba25..1b6d2c4d9a6b 100755 --- a/code/lib/cli/src/generators/SERVER/index.ts +++ b/code/lib/cli/src/generators/SERVER/index.ts @@ -10,7 +10,9 @@ const generator: Generator = async (packageManager, npmOptions, options) => { }); const templateDir = join(getCliDir(), 'templates', 'server'); - copyTemplate(templateDir); + if (templateDir) { + copyTemplate(templateDir); + } }; export default generator; From 959f53794915b4280d81917dcf0c02b496a3d94b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 8 May 2023 18:05:38 +0800 Subject: [PATCH 2/8] CLI: Fix server init --- code/lib/cli/src/generators/SERVER/index.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/code/lib/cli/src/generators/SERVER/index.ts b/code/lib/cli/src/generators/SERVER/index.ts index 1b6d2c4d9a6b..92bda9526d18 100755 --- a/code/lib/cli/src/generators/SERVER/index.ts +++ b/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; From 0c12ac28eee00fdca45977d16cb0fa9e4ec3a85b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 9 May 2023 00:26:52 +0800 Subject: [PATCH 3/8] CLI: Set URL in server demo stories --- code/renderers/server/template/cli/button.stories.json | 5 ++++- code/renderers/server/template/cli/header.stories.json | 5 ++++- code/renderers/server/template/cli/page.stories.json | 5 ++++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/code/renderers/server/template/cli/button.stories.json b/code/renderers/server/template/cli/button.stories.json index 3a9f73934385..f42672368f8c 100644 --- a/code/renderers/server/template/cli/button.stories.json +++ b/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": { diff --git a/code/renderers/server/template/cli/header.stories.json b/code/renderers/server/template/cli/header.stories.json index e51cbfac7669..ee9aaae50acc 100644 --- a/code/renderers/server/template/cli/header.stories.json +++ b/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": [ { diff --git a/code/renderers/server/template/cli/page.stories.json b/code/renderers/server/template/cli/page.stories.json index 2245cb3f9db8..abbc4e809188 100644 --- a/code/renderers/server/template/cli/page.stories.json +++ b/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": [ { From 1d2b175f7cb552eda9185d3cfbd4ab38580373c6 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 9 May 2023 00:27:23 +0800 Subject: [PATCH 4/8] Server: Add json indexer to preset --- code/renderers/server/package.json | 11 +++++++++- code/renderers/server/preset.js | 1 + code/renderers/server/src/preset.ts | 33 +++++++++++++++++++++++++++++ code/yarn.lock | 3 +++ 4 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 code/renderers/server/preset.js create mode 100644 code/renderers/server/src/preset.ts diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 357fdd467584..00706d2f1b5a 100644 --- a/code/renderers/server/package.json +++ b/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" }, diff --git a/code/renderers/server/preset.js b/code/renderers/server/preset.js new file mode 100644 index 000000000000..a83f95279e7f --- /dev/null +++ b/code/renderers/server/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/preset'); diff --git a/code/renderers/server/src/preset.ts b/code/renderers/server/src/preset.ts new file mode 100644 index 000000000000..cb33b9d801de --- /dev/null +++ b/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: any) => { + 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 || []), + ]; +}; diff --git a/code/yarn.lock b/code/yarn.lock index de0195bd6909..eda0ed0f1f79 100644 --- a/code/yarn.lock +++ b/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 From f99db50e56591d4b8a4e8d08945c0308dbae95ee Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 9 May 2023 00:28:16 +0800 Subject: [PATCH 5/8] Build: Add server-webpack5 sandbox --- code/lib/cli/src/sandbox-templates.ts | 11 +++++++++++ scripts/sandbox/generate.ts | 4 +++- scripts/tasks/sandbox-parts.ts | 8 ++++++-- 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 6b3bc9b96668..7d77b7c4f041 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/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)', diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index 8e3d1d0c3ad9..10afdced2b83 100755 --- a/scripts/sandbox/generate.ts +++ b/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}`); diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index c26a6f24b8c7..6224e63b2699 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/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); From f8cb089d65d67941ef1fe143ef585fdbe8b0366c Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 9 May 2023 00:27:23 +0800 Subject: [PATCH 6/8] Server: Add json indexer to preset Server: Add json indexer to preset Co-authored-by: Donnie Flood --- code/renderers/server/package.json | 11 +++++++++- code/renderers/server/preset.js | 1 + code/renderers/server/src/preset.ts | 33 +++++++++++++++++++++++++++++ code/yarn.lock | 3 +++ 4 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 code/renderers/server/preset.js create mode 100644 code/renderers/server/src/preset.ts diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 357fdd467584..00706d2f1b5a 100644 --- a/code/renderers/server/package.json +++ b/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" }, diff --git a/code/renderers/server/preset.js b/code/renderers/server/preset.js new file mode 100644 index 000000000000..a83f95279e7f --- /dev/null +++ b/code/renderers/server/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/preset'); diff --git a/code/renderers/server/src/preset.ts b/code/renderers/server/src/preset.ts new file mode 100644 index 000000000000..cb33b9d801de --- /dev/null +++ b/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: any) => { + 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 || []), + ]; +}; diff --git a/code/yarn.lock b/code/yarn.lock index de0195bd6909..eda0ed0f1f79 100644 --- a/code/yarn.lock +++ b/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 From 40f92444e3feb41178c27cb108d1b18c464b00ea Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 9 May 2023 00:28:16 +0800 Subject: [PATCH 7/8] Build: Add server-webpack5 sandbox --- code/lib/cli/src/sandbox-templates.ts | 11 +++++++++++ scripts/sandbox/generate.ts | 4 +++- scripts/tasks/sandbox-parts.ts | 8 ++++++-- 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 6b3bc9b96668..7d77b7c4f041 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/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)', diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index 8e3d1d0c3ad9..10afdced2b83 100755 --- a/scripts/sandbox/generate.ts +++ b/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}`); diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index c26a6f24b8c7..6224e63b2699 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/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); From c236f772afd0c2e2d846daad336b46f3c69402aa Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 9 May 2023 10:59:20 +0800 Subject: [PATCH 8/8] Stricter type --- code/renderers/server/src/preset.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/renderers/server/src/preset.ts b/code/renderers/server/src/preset.ts index cb33b9d801de..fced651731c3 100644 --- a/code/renderers/server/src/preset.ts +++ b/code/renderers/server/src/preset.ts @@ -9,7 +9,7 @@ export const storyIndexers = (indexers: StoryIndexer[] | null) => { const meta: StaticMeta = { title: json.title, }; - const stories: IndexedStory[] = json.stories.map((story: any) => { + const stories: IndexedStory[] = json.stories.map((story: { name: string }) => { const id = toId(meta.title, story.name); const { name } = story; const indexedStory: IndexedStory = {