Merge pull request #14384 from j3rem1e/sveltekit

CLI: Compatibility with sveltekit
storybookjs · Mar 29, 2021 · 7c274e1 · 7c274e1
2 parents 2a29e90 + 2da4151
commit 7c274e1
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/lib/cli/src/generators/SVELTE/index.ts b/lib/cli/src/generators/SVELTE/index.ts
@@ -5,13 +5,22 @@ import { baseGenerator, Generator } from '../baseGenerator';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
   let extraMain;
+  let commonJs = false;
   // 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 if (fse.existsSync('./svelte.config.cjs')) {
+    logger.info("Configuring preprocessor from 'svelte.config.cjs'");
+
+    commonJs = true;
+
+    extraMain = {
+      svelteOptions: { preprocess: '%%require("../svelte.config.cjs").preprocess%%' },
+    };
   } else {
     // svelte-preprocess dependencies ?
     const packageJson = packageManager.retrievePackageJson();
@@ -29,6 +38,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
     extraAddons: ['@storybook/addon-svelte-csf'],
     extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'],
     extraMain,
+    commonJs,
   });
 };
 

diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts
@@ -20,6 +20,7 @@ export interface FrameworkOptions {
   addESLint?: boolean;
   extraMain?: any;
   extensions?: string[];
+  commonJs?: boolean;
 }
 
 export type Generator = (
@@ -38,6 +39,7 @@ const defaultOptions: FrameworkOptions = {
   addESLint: false,
   extraMain: undefined,
   extensions: undefined,
+  commonJs: false,
 };
 
 export async function baseGenerator(
@@ -105,6 +107,7 @@ export async function baseGenerator(
   configure(framework, {
     addons: [...addons, ...extraAddons],
     extensions,
+    commonJs: options.commonJs,
     ...mainOptions,
   });
   if (addComponents) {

diff --git a/lib/cli/src/generators/configure.ts b/lib/cli/src/generators/configure.ts
@@ -4,6 +4,7 @@ import { SupportedFrameworks } from '../project_types';
 interface ConfigureMainOptions {
   addons: string[];
   extensions?: string[];
+  commonJs?: boolean;
   /**
    * Extra values for main.js
    *
@@ -19,6 +20,7 @@ interface ConfigureMainOptions {
 function configureMain({
   addons,
   extensions = ['js', 'jsx', 'ts', 'tsx'],
+  commonJs = false,
   ...custom
 }: ConfigureMainOptions) {
   const prefix = fse.existsSync('./src') ? '../src' : '../stories';
@@ -35,10 +37,12 @@ function configureMain({
     .replace(/['"]%%/g, '')
     .replace(/%%['"]/, '')}`;
   fse.ensureDirSync('./.storybook');
-  fse.writeFileSync('./.storybook/main.js', stringified, { encoding: 'utf8' });
+  fse.writeFileSync(`./.storybook/main.${commonJs ? 'cjs' : 'js'}`, stringified, {
+    encoding: 'utf8',
+  });
 }
 
-function configurePreview(framework: SupportedFrameworks) {
+function configurePreview(framework: SupportedFrameworks, commonJs: boolean) {
   const parameters = `
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -60,11 +64,14 @@ setCompodocJson(docJson);
 ${parameters}`
       : parameters;
 
-  fse.writeFileSync('./.storybook/preview.js', preview, { encoding: 'utf8' });
+  fse.writeFileSync(`./.storybook/preview.${commonJs ? 'cjs' : 'js'}`, preview, {
+    encoding: 'utf8',
+  });
 }
 
 export function configure(framework: SupportedFrameworks, mainOptions: ConfigureMainOptions) {
   fse.ensureDirSync('./.storybook');
+
   configureMain(mainOptions);
-  configurePreview(framework);
+  configurePreview(framework, mainOptions.commonJs);
 }