From f215a50cf0c065a74330f115ebdae9151913ce6c Mon Sep 17 00:00:00 2001 From: Arman Sargsyan Date: Sun, 17 Mar 2019 13:18:17 +0300 Subject: [PATCH] feat(svelte): adding svelte cli generator --- lib/cli/generators/SVELTE/index.js | 43 +++++++++++++++++++ .../SVELTE/template/.storybook/addons.js | 2 + .../SVELTE/template/.storybook/config.js | 9 ++++ .../SVELTE/template/stories/button.svelte | 25 +++++++++++ .../SVELTE/template/stories/index.stories.js | 18 ++++++++ lib/cli/lib/initiate.js | 6 +++ lib/cli/lib/project_types.js | 2 + lib/cli/package.json | 1 + 8 files changed, 106 insertions(+) create mode 100644 lib/cli/generators/SVELTE/index.js create mode 100644 lib/cli/generators/SVELTE/template/.storybook/addons.js create mode 100644 lib/cli/generators/SVELTE/template/.storybook/config.js create mode 100644 lib/cli/generators/SVELTE/template/stories/button.svelte create mode 100644 lib/cli/generators/SVELTE/template/stories/index.stories.js 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" },