Merge pull request #14161 from j3rem1e/svelte-cli

CLI: Improve init for svelte
storybookjs · Mar 16, 2021 · 41efaee · 41efaee
2 parents daba428 + 99d8293
commit 41efaee
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 9 deletions.
diff --git a/lib/cli/src/generators/SVELTE/index.ts b/lib/cli/src/generators/SVELTE/index.ts
@@ -1,8 +1,34 @@
+import fse from 'fs-extra';
+import { logger } from '@storybook/node-logger';
+
 import { baseGenerator, Generator } from '../baseGenerator';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  baseGenerator(packageManager, npmOptions, options, 'svelte', {
+  let extraMain;
+  // svelte.config.js ?
+  if (fse.existsSync('./svelte.config.js')) {
+    logger.info("Configuring preprocessor from 'svelte.config.js'");
+
+    extraMain = {
+      svelteOptions: { preprocess: '%%require("../svelte.config.js").preprocess%%' },
+    };
+  } else {
+    // svelte-preprocess dependencies ?
+    const packageJson = packageManager.retrievePackageJson();
+    if (packageJson.devDependencies && packageJson.devDependencies['svelte-preprocess']) {
+      logger.info("Configuring preprocessor with 'svelte-preprocess'");
+
+      extraMain = {
+        svelteOptions: { preprocess: '%%require("svelte-preprocess")()%%' },
+      };
+    }
+  }
+
+  await baseGenerator(packageManager, npmOptions, options, 'svelte', {
     extraPackages: ['svelte', 'svelte-loader'],
+    extraAddons: ['@storybook/addon-svelte-csf'],
+    extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'],
+    extraMain,
   });
 };
 

diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts
@@ -18,6 +18,8 @@ export interface FrameworkOptions {
   addComponents?: boolean;
   addBabel?: boolean;
   addESLint?: boolean;
+  extraMain?: any;
+  extensions?: string[];
 }
 
 export type Generator = (
@@ -34,6 +36,8 @@ const defaultOptions: FrameworkOptions = {
   addComponents: true,
   addBabel: true,
   addESLint: false,
+  extraMain: undefined,
+  extensions: undefined,
 };
 
 export async function baseGenerator(
@@ -51,6 +55,8 @@ export async function baseGenerator(
     addComponents,
     addBabel,
     addESLint,
+    extraMain,
+    extensions,
   } = {
     ...defaultOptions,
     ...options,
@@ -87,15 +93,20 @@ export async function baseGenerator(
 
   const versionedPackages = await packageManager.getVersionedPackages(...packages);
 
-  const extraMain =
+  const mainOptions =
     builder !== Builder.Webpack4
       ? {
           core: {
             builder,
           },
+          ...extraMain,
         }
-      : undefined;
-  configure(framework, [...addons, ...extraAddons], extraMain);
+      : extraMain;
+  configure(framework, {
+    addons: [...addons, ...extraAddons],
+    extensions,
+    ...mainOptions,
+  });
   if (addComponents) {
     copyComponents(framework, language);
   }

diff --git a/lib/cli/src/generators/configure.ts b/lib/cli/src/generators/configure.ts
@@ -1,16 +1,39 @@
 import fse from 'fs-extra';
 import { SupportedFrameworks } from '../project_types';
 
-function configureMain(addons: string[], custom?: any) {
+interface ConfigureMainOptions {
+  addons: string[];
+  extensions?: string[];
+  /**
+   * Extra values for main.js
+   *
+   * In order to provide non-serializable data like functions, you can use
+   * { value: '%%yourFunctionCall()%%' }
+   *
+   * '%% and %%' will be replace.
+   *
+   */
+  [key: string]: any;
+}
+
+function configureMain({
+  addons,
+  extensions = ['js', 'jsx', 'ts', 'tsx'],
+  ...custom
+}: ConfigureMainOptions) {
   const prefix = fse.existsSync('./src') ? '../src' : '../stories';
 
   const config = {
-    stories: [`${prefix}/**/*.stories.mdx`, `${prefix}/**/*.stories.@(js|jsx|ts|tsx)`],
+    stories: [`${prefix}/**/*.stories.mdx`, `${prefix}/**/*.stories.@(${extensions.join('|')})`],
     addons,
     ...custom,
   };
 
-  const stringified = `module.exports = ${JSON.stringify(config, null, 2)}`;
+  // replace escaped values and delimiters
+  const stringified = `module.exports = ${JSON.stringify(config, null, 2)
+    .replace(/\\"/g, '"')
+    .replace(/['"]%%/g, '')
+    .replace(/%%['"]/, '')}`;
   fse.ensureDirSync('./.storybook');
   fse.writeFileSync('./.storybook/main.js', stringified, { encoding: 'utf8' });
 }
@@ -40,8 +63,8 @@ ${parameters}`
   fse.writeFileSync('./.storybook/preview.js', preview, { encoding: 'utf8' });
 }
 
-export function configure(framework: SupportedFrameworks, addons: string[], custom?: any) {
+export function configure(framework: SupportedFrameworks, mainOptions: ConfigureMainOptions) {
   fse.ensureDirSync('./.storybook');
-  configureMain(addons, custom);
+  configureMain(mainOptions);
   configurePreview(framework);
 }