Svelte support #3770

plumpNation · 2018-06-17T05:27:33Z

What I did

Added support for Svelte.
I added example kitchen sink for Svelte.
Added or tested support for add ons:
- centered
- actions
- background
- knobs
- links
- notes
- options
- storyshots
- storysource
- viewport

How to test

In root folder yarn test
Select core tests.

Is this testable with Jest or Chromatic screenshots? Yes, both
Does this need a new example in the kitchen sink apps? Yes
Does this need an update to the documentation? Yes

igor-dv · 2018-06-17T05:35:44Z

Oh, one more framework support, that's awesome!

codecov · 2018-06-17T05:44:54Z

Codecov Report

Merging #3770 into master will decrease coverage by 0.48%.
The diff coverage is 1.4%.

@@            Coverage Diff             @@
##           master    #3770      +/-   ##
==========================================
- Coverage   39.36%   38.87%   -0.49%     
==========================================
  Files         430      442      +12     
  Lines        5475     5546      +71     
  Branches      740      744       +4     
==========================================
+ Hits         2155     2156       +1     
- Misses       2935     3001      +66     
- Partials      385      389       +4

Impacted Files	Coverage Δ
addons/storyshots/storyshots-core/.eslintrc.js	`0% <ø> (ø)`	⬆️
...ts/storyshots-core/src/frameworks/svelte/loader.js	`0% <0%> (ø)`
app/svelte/src/server/wrapInitialConfig.js	`0% <0%> (ø)`
app/svelte/src/server/build.js	`0% <0%> (ø)`
app/svelte/src/server/index.js	`0% <0%> (ø)`
...toryshots-core/src/frameworks/svelte/renderTree.js	`0% <0%> (ø)`
addons/centered/src/helpers/json2CSS.js	`0% <0%> (ø)`
app/svelte/src/client/preview/render.js	`0% <0%> (ø)`
addons/centered/src/svelte.js	`0% <0%> (ø)`
app/svelte/src/client/preview/globals.js	`0% <0%> (ø)`
... and 15 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b2b275b...fb28658. Read the comment docs.

igor-dv · 2018-06-17T08:39:21Z

addons/backgrounds/svelte.js

@@ -0,0 +1 @@
+module.exports = require('./dist/deprecated');


This is deprecated, so you don't need to add a new one. You should just import from the @storybook/addon-backgrounds

igor-dv · 2018-06-17T08:42:42Z

addons/centered/src/components/Centered.svelte

+</div>
+
+<style>
+  .style {


Could styles be imported from the ./styles.js ?

I can, but it will make the svelte template "worse". The style attribute doesn't work the same way as in react or vue, so I can't just pass the object in there.

I'll have a go, and see what you think.

I'm adding a small helper function to convert it to plain CSS strings before applying it inline in the component. Not very pretty but solves the problem. It doesn't make the component 'worse', so I guess there's that.

igor-dv · 2018-06-17T08:43:25Z

addons/centered/src/index.js

@@ -2,5 +2,15 @@ import { window } from 'global';
 import ReactCentered from './react';
 import VueCentered from './vue';

-const Centered = window.STORYBOOK_ENV === 'vue' ? VueCentered : ReactCentered;
+function getCentered(env) {


what is the purpose of this refactoring?

Sorry, this is from when I didn't understand that the other frameworks are importing the centered addon directly.

I have used Vue as the main starting point since it works in the closest way. So I had svelte in here too, but didn't like it.

I'll checkout this file again from master.

igor-dv · 2018-06-17T08:44:36Z

addons/knobs/svelte.js

@@ -0,0 +1 @@
+module.exports = require('./dist/deprecated');


Same here, knobs are framework agnostic.

igor-dv · 2018-06-17T08:56:20Z

app/svelte/src/client/index.js

+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,


you can also export here the forceReRender.

igor-dv · 2018-06-17T09:14:25Z

examples/svelte-kitchen-sink/.babelrc

@@ -0,0 +1,12 @@
+{


Doesn't the root .babelrc match your needs?

igor-dv · 2018-06-17T09:18:17Z

examples/svelte-kitchen-sink/package.json

+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+    "storybook": "start-storybook -p 9009 -s public"
+  },
+  "dependencies": {},


you should probably add svelte deps here

Svelte components are compiled, so all Svelte components are vanilla js functions. So, no runtime deps.

igor-dv · 2018-06-17T10:08:10Z

examples/svelte-kitchen-sink/public/index.html

+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>


igor-dv · 2018-06-17T10:26:02Z

ADDONS_SUPPORT.md

+|[links](addons/links)            |+|+|+|+|+|+|+| | |
+|[notes](addons/notes)            |+| |+|+|+|+|+| | |
+|[options](addons/options)        |+|+|+|+|+|+|+| | |
+|[storyshots](addons/storyshots)  |+|+|+|+| | |+| | |


please mark all the supported addons

I'm working my way through them, marking them off and committing as I go. I think I've marked off everything I've tested so far.

igor-dv · 2018-06-17T10:28:47Z

addons/storyshots/storyshots-core/src/frameworks/svelte/loader.js

@@ -0,0 +1,32 @@
+import global from 'global';


I don't see any committed snapshots, does this addon really work?

Not yet, I had to stop and sleep yesterday, got a bit late 😸

This should now be generating snapshots.

plumpNation · 2018-06-17T14:49:05Z

app/svelte/package.json

+  "name": "@storybook/svelte",
+  "version": "4.0.0-alpha.9",
+  "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/apps/vue",


plumpNation · 2018-06-17T14:49:30Z

examples/vue-kitchen-sink/src/stories/addon-centered.stories.js

@@ -1,11 +1,13 @@
 import { storiesOf } from '@storybook/vue';
 import Centered from '@storybook/addon-centered';

-import MyButton from './Button.vue';


Not relevant to this review.

plumpNation · 2018-08-04T12:04:27Z

From what I can see with the CodeFactor issues, these exist in all the other framework examples. If this is acceptable, is there anything else I need to do before this is merged into master?

plumpNation · 2018-08-04T12:06:27Z

Ah, the chromatic test.

tmeasday · 2018-08-05T10:28:42Z

Hey, to fix chromatic, you just need to change the file examples/official-storybook/built-storybooks/svelte-kitchen-sink to be a symlink to ../../svelte-kitchen-sink/storybook-static.

# Conflicts: # package.json

ndelangen · 2018-08-06T20:07:44Z

I created the symlink but this did not resolve the chromatic issue.

Also a unittest is failing:

 FAIL  examples/svelte-kitchen-sink/svelteshots.test.js
  ● Test suite failed to run

    storyshots is intended only to be used with storybook

      2 | import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
      3 |
    > 4 | initStoryshots({
        | ^
      5 |   framework: 'svelte',
      6 |   configPath: path.join(__dirname, '.storybook'),
      7 |   integrityOptions: { cwd: path.join(__dirname, 'src', 'stories') },

      at loadFramework (examples/svelte-kitchen-sink/node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:42:11)
      at testStorySnapshots (examples/svelte-kitchen-sink/node_modules/@storybook/addon-storyshots/dist/api/index.js:54:54)
      at Object.<anonymous> (examples/svelte-kitchen-sink/svelteshots.test.js:4:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.13s
Ran all test suites matching /svelteshots.test.js/i.

Watch Usage: Press w to show more.

igor-dv · 2018-08-06T20:13:20Z

It is because a wrong alpha versions after the merge. Everything should be 16

ndelangen · 2018-08-06T20:56:08Z

Thanks for that @igor-dv, I fixed it.

igor-dv · 2018-08-06T22:01:09Z

Ok, I think we've tried everything to solve chromatic. I've even tried to exorcise my laptop...
Chromatic people, can you please teach me how to do this?

tmeasday · 2018-08-06T23:12:13Z

Just as a note -- I could get the Acceptance story running properly locally when i removed the file at examples/official-storybook/built-storybooks/svelte-kitchen-sink and recreated the symlink. However git was confused.

I suspect the solution is to remove the file that currently exists, commit, recreate the symlink, then commit again. I can do it if you like -- not sure where to commit to?

igor-dv · 2018-08-07T06:41:25Z

This file was my attempt to create a symlink on windows 😓
I've deleted it now.

tmeasday · 2018-08-09T05:06:24Z

Sorry I didn't realise I could push to the fork. Did that, hopefully fixed now.

tmeasday · 2018-08-09T06:58:43Z

Ugh, Ok hopefully did it properly this time.

igor-dv · 2018-08-09T07:32:02Z

plumpNation · 2018-08-25T18:30:56Z

Yes! Thank you so much guys. Really appreciate you not only accepting it, but helping out to push it out too.

plumpNation requested review from alexandrebodin, alterx, Hypnosphi, igor-dv, kazupon, leonrodenburg, ndelangen, shilman, theinterned and thomasbertet as code owners June 17, 2018 05:27

plumpNation added 5 commits June 17, 2018 07:30

Basic Svelte support

1381b93

Added knob addon example

40660ea

Centered addon working with Svelte

306b580

Added background addon support

5f64ea3

Added support for actions addon

f64ec68

igor-dv added the feature request label Jun 17, 2018

plumpNation force-pushed the svelte-support branch from 0690b24 to f64ec68 Compare June 17, 2018 05:44

Easier to see the centering when we break the sentences

295f4e2

igor-dv reviewed Jun 17, 2018

View reviewed changes

Hypnosphi self-assigned this Jun 17, 2018

plumpNation commented Jun 17, 2018

View reviewed changes

plumpNation added 7 commits June 17, 2018 17:56

Updating root README with svelte links

adabc88

File not required

9acf5f5

No longer using this file for svelte, refactor not required for review

ce09ea7

File not required

cf72ffd

File was changed by accident

ba11d16

referencing incorrect app

cecc676

File not required

bab002e

ndelangen and others added 2 commits August 6, 2018 20:29

Merge branch 'master' into svelte-support

70b4dd1

# Conflicts: # package.json

Bring "tslint-plugin-prettier" back

0fffe6e

FIX versions in package.json

86afcac

Delete false symlink =/

2a5e762

Added symlink to svelte example

60ff6ab

fix svelte symlink

fb28658

igor-dv merged commit 6d7c3c9 into storybookjs:master Aug 9, 2018

igor-dv added the svelte label Aug 9, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Svelte support #3770

Svelte support #3770

plumpNation commented Jun 17, 2018 •

edited

igor-dv commented Jun 17, 2018

codecov bot commented Jun 17, 2018 •

edited

igor-dv Jun 17, 2018 •

edited

igor-dv Jun 17, 2018

plumpNation Jun 17, 2018

plumpNation Jun 17, 2018

igor-dv Jun 17, 2018

plumpNation Jun 17, 2018

igor-dv Jun 17, 2018

igor-dv Jun 17, 2018

igor-dv Jun 17, 2018

igor-dv Jun 17, 2018

plumpNation Jun 17, 2018

igor-dv Jun 17, 2018

igor-dv Jun 17, 2018

plumpNation Jun 17, 2018

igor-dv Jun 17, 2018

plumpNation Jun 17, 2018

plumpNation Jun 17, 2018

plumpNation Jun 17, 2018

plumpNation Jun 17, 2018

plumpNation commented Aug 4, 2018

plumpNation commented Aug 4, 2018

tmeasday commented Aug 5, 2018 •

edited

ndelangen commented Aug 6, 2018

igor-dv commented Aug 6, 2018

ndelangen commented Aug 6, 2018

igor-dv commented Aug 6, 2018

tmeasday commented Aug 6, 2018

igor-dv commented Aug 7, 2018

tmeasday commented Aug 9, 2018

tmeasday commented Aug 9, 2018

igor-dv commented Aug 9, 2018

plumpNation commented Aug 25, 2018

Svelte support #3770

Svelte support #3770

Conversation

plumpNation commented Jun 17, 2018 • edited

What I did

How to test

igor-dv commented Jun 17, 2018

codecov bot commented Jun 17, 2018 • edited

Codecov Report

igor-dv Jun 17, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

plumpNation commented Aug 4, 2018

plumpNation commented Aug 4, 2018

tmeasday commented Aug 5, 2018 • edited

ndelangen commented Aug 6, 2018

igor-dv commented Aug 6, 2018

ndelangen commented Aug 6, 2018

igor-dv commented Aug 6, 2018

tmeasday commented Aug 6, 2018

igor-dv commented Aug 7, 2018

tmeasday commented Aug 9, 2018

tmeasday commented Aug 9, 2018

igor-dv commented Aug 9, 2018

plumpNation commented Aug 25, 2018

plumpNation commented Jun 17, 2018 •

edited

codecov bot commented Jun 17, 2018 •

edited

igor-dv Jun 17, 2018 •

edited

tmeasday commented Aug 5, 2018 •

edited