feat(svelte): adding svelte cli generator

lib/cli/generators/SVELTE/index.js

@@ -0,0 +1,43 @@
+import path from 'path';
+import mergeDirs from 'merge-dirs';
+import { getVersions, getPackageJson, writePackageJson, installBabel } from '../../lib/helpers';
+
+export default async npmOptions => {
+  const [
+    storybookVersion,
+    actionsVersion,
+    linksVersion,
+    addonsVersion,
+    svelte,
+    svelteLoader,
+  ] = await getVersions(
+    npmOptions,
+    '@storybook/svelte',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addons',
+    'svelte',
+    'svelte-loader'
+  );
+
+  mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+
+  const packageJson = getPackageJson();
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+  packageJson.devDependencies['@storybook/svelte'] = storybookVersion;
+  packageJson.devDependencies['@storybook/addon-actions'] = actionsVersion;
+  packageJson.devDependencies['@storybook/addon-links'] = linksVersion;
+  packageJson.devDependencies['@storybook/addons'] = addonsVersion;
+  packageJson.devDependencies.svelte = svelte;
+  packageJson.devDependencies['svelte-loader'] = svelteLoader;
+
+  await installBabel(npmOptions, packageJson);
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+};

lib/cli/generators/SVELTE/template/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

lib/cli/generators/SVELTE/template/.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/svelte';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

lib/cli/generators/SVELTE/template/stories/button.svelte

@@ -0,0 +1,25 @@
+<button class="button" on:click="onClick(event)">
+    {text}
+</button>
+
+<style>
+    .button {
+      border: 1px solid #eee;
+      border-radius: 3px;
+      backgroundColor: #FFFFFF;
+      cursor: pointer;
+      font-size: 15px;
+      padding: 3px 10px;
+      margin: 10px;
+    }
+</style>
+
+<script>
+  export default {
+    methods: {
+      onClick(event) {
+        this.fire('click', event)
+      }
+    }
+  }
+</script>

lib/cli/generators/SVELTE/template/stories/index.stories.js

@@ -0,0 +1,18 @@
+import { storiesOf } from '@storybook/svelte';
+import { action } from '@storybook/addon-actions';
+
+import Button from './button.svelte';
+
+storiesOf('Button', module)
+  .add('with text', () => ({
+    Component: Button,
+    data: { text: 'Hello Button' },
+    on: { click: action('clicked') },
+  }))
+  .add('with some emoji', () => ({
+    Component: Button,
+    data: {
+      text: '😀 😎 👍 💯',
+    },
+    on: { click: action('clicked') },
+  }));

lib/cli/lib/initiate.js

@@ -21,6 +21,7 @@ import markoGenerator from '../generators/MARKO';
 import htmlGenerator from '../generators/HTML';
 import riotGenerator from '../generators/RIOT';
 import preactGenerator from '../generators/PREACT';
+import svelteGenerator from '../generators/SVELTE';
 
 const logger = console;
 
@@ -168,6 +169,11 @@ const installStorybook = (projectType, options) => {
           .then(commandLog('Adding storybook support to your "Preact" app'))
           .then(end);
 
+      case types.SVELTE:
+        return svelteGenerator(npmOptions)
+          .then(commandLog('Adding storybook support to your "Svelte" app'))
+          .then(end);
+
       default:
         paddedLog(`We couldn't detect your project type. (code: ${projectType})`);
         paddedLog(

lib/cli/lib/project_types.js

@@ -18,6 +18,7 @@ const projectTypes = {
   HTML: 'HTML',
   RIOT: 'RIOT',
   PREACT: 'PREACT',
+  SVELTE: 'SVELTE',
 };
 
 export default projectTypes;
@@ -34,6 +35,7 @@ export const supportedFrameworks = [
   'marko',
   'meteor',
   'preact',
+  'svelte',
 ];
 
 const notInstallableProjectTypes = [

lib/cli/package.json

@@ -67,6 +67,7 @@
     "@storybook/react": "5.1.0-alpha.7",
     "@storybook/react-native": "5.1.0-alpha.7",
     "@storybook/riot": "5.1.0-alpha.7",
+    "@storybook/svelte": "5.1.0-alpha.7",
     "@storybook/ui": "5.1.0-alpha.7",
     "@storybook/vue": "5.1.0-alpha.7"
   },