diff --git a/lib/cli/generators/SVELTE/index.js b/lib/cli/generators/SVELTE/index.js
new file mode 100644
index 00000000000..49026e04130
--- /dev/null
+++ b/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);
+};
diff --git a/lib/cli/generators/SVELTE/template/.storybook/addons.js b/lib/cli/generators/SVELTE/template/.storybook/addons.js
new file mode 100644
index 00000000000..6aed412d04a
--- /dev/null
+++ b/lib/cli/generators/SVELTE/template/.storybook/addons.js
@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
diff --git a/lib/cli/generators/SVELTE/template/.storybook/config.js b/lib/cli/generators/SVELTE/template/.storybook/config.js
new file mode 100644
index 00000000000..38704e222b6
--- /dev/null
+++ b/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);
diff --git a/lib/cli/generators/SVELTE/template/stories/button.svelte b/lib/cli/generators/SVELTE/template/stories/button.svelte
new file mode 100644
index 00000000000..8ba29bed25b
--- /dev/null
+++ b/lib/cli/generators/SVELTE/template/stories/button.svelte
@@ -0,0 +1,25 @@
+
+
+
+
+
diff --git a/lib/cli/generators/SVELTE/template/stories/index.stories.js b/lib/cli/generators/SVELTE/template/stories/index.stories.js
new file mode 100644
index 00000000000..ddf44bb7af8
--- /dev/null
+++ b/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') },
+ }));
diff --git a/lib/cli/lib/initiate.js b/lib/cli/lib/initiate.js
index fca756e4784..86b3b75b6db 100644
--- a/lib/cli/lib/initiate.js
+++ b/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(
diff --git a/lib/cli/lib/project_types.js b/lib/cli/lib/project_types.js
index e027b3faae0..c597ef9a566 100644
--- a/lib/cli/lib/project_types.js
+++ b/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 = [
diff --git a/lib/cli/package.json b/lib/cli/package.json
index 70082885f52..87e742a55bc 100644
--- a/lib/cli/package.json
+++ b/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"
},