From 93f3e0e5b5e7177440ebae3d514147fe83d50c6d Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Sun, 31 Jul 2022 14:27:09 +1000 Subject: [PATCH] Get react18 example working via preserve missing --- scripts/example.ts | 72 ++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 67 insertions(+), 5 deletions(-) diff --git a/scripts/example.ts b/scripts/example.ts index 250c489053b4..27f83b1d751b 100644 --- a/scripts/example.ts +++ b/scripts/example.ts @@ -1,10 +1,14 @@ import path from 'path'; -import { remove, pathExists } from 'fs-extra'; +import { remove, pathExists, readJSON, writeJSON } from 'fs-extra'; import prompts from 'prompts'; import { getOptionsOrPrompt } from './utils/options'; import { executeCLIStep } from './utils/cli-step'; import { exec } from '../code/lib/cli/src/repro-generators/scripts'; +import type { Parameters } from '../code/lib/cli/src/repro-generators/configs'; +import { getInterpretedFile } from '../code/lib/core-common'; +import { readConfig, writeConfig } from '../code/lib/csf-tools'; +import { babelParse } from '../code/lib/csf-tools/src/babelParse'; const frameworks = ['react', 'angular']; const addons = ['a11y', 'storysource']; @@ -16,12 +20,12 @@ async function getOptions() { framework: { description: 'Which framework would you like to use?', values: frameworks, - required: true, + required: true as const, }, addon: { description: 'Which extra addons (beyond the CLI defaults) would you like installed?', values: addons, - multiple: true, + multiple: true as const, }, includeStories: { description: "Include Storybook's own stories?", @@ -81,7 +85,7 @@ const steps = { description: 'Linking packages', icon: '🔗', hasArgument: true, - options: { local: {} }, + options: { local: {}, start: { inverse: true } }, }, build: { command: 'build', @@ -97,6 +101,46 @@ const steps = { }, }; +const logger = console; + +export const overrideMainConfig = async ({ + cwd, + mainOverrides, +}: { + cwd: string; + mainOverrides: Parameters['mainOverrides']; +}) => { + logger.info(`📝 Overwriting main.js with the following configuration:`); + const configDir = path.join(cwd, '.storybook'); + const mainConfigPath = getInterpretedFile(path.resolve(configDir, 'main')); + logger.debug(mainOverrides); + const mainConfig = await readConfig(mainConfigPath); + + Object.keys(mainOverrides).forEach((field) => { + // NOTE: using setFieldNode and passing the output of babelParse() + mainConfig.setFieldNode([field], mainOverrides[field]); + }); + + await writeConfig(mainConfig); +}; + +const addPackageScripts = async ({ + cwd, + scripts, +}: { + cwd: string; + scripts: Record; +}) => { + logger.info(`🔢 Adding package resolutions:`); + const packageJsonPath = path.join(cwd, 'package.json'); + const packageJson = await readJSON(packageJsonPath); + packageJson.scripts = { + ...packageJson.scripts, + ...scripts, + }; + await writeJSON(packageJsonPath, packageJson, { spaces: 2 }); +}; + async function main() { const optionValues = await getOptions(); @@ -146,7 +190,25 @@ async function main() { argument: cwd, cwd: codeDir, dryRun, - optionValues: { local: true }, + optionValues: { local: true, start: false }, + }); + + // TODO -- work out exactly where this should happen + const code = '(c) => ({ ...c, resolve: { ...c.resolve, symlinks: false } })'; + const mainOverrides = { + // @ts-ignore (not sure why TS complains here, it does exist) + webpackFinal: babelParse(code).program.body[0].expression, + }; + await overrideMainConfig({ cwd, mainOverrides } as any); + + await addPackageScripts({ + cwd, + scripts: { + storybook: + 'NODE_OPTIONS="--preserve-symlinks --preserve-symlinks-main" storybook dev -p 6006', + 'build-storybook': + 'NODE_OPTIONS="--preserve-symlinks --preserve-symlinks-main" storybook build', + }, }); } }