WIP - add vue support #1267

ndelangen · 2017-06-12T19:15:28Z

What we did

Get a working webpack build (vue-loader)
POC of rendering a vue component inside preview via storiesOf('myComponent').add()

How to test

After checkout out the branch locally run the commands:

$ npm install
$ npm run bootstrap
$ cd examples/vue
$ npm run storybook

TODO

investigate if usage of https://github.com/vuejs/babel-plugin-transform-vue-jsx would be beneficial
support for addon-actions
support for addon-links
support for addon-notes (@alexandrebodin)
support for addon-knobs (@ndelangen)
FIX Hot Module Replacement

codecov · 2017-06-12T19:30:48Z

Codecov Report

Merging #1267 into release/3.2 will decrease coverage by 0.94%.
The diff coverage is 13.89%.

@@               Coverage Diff               @@
##           release/3.2    #1267      +/-   ##
===============================================
- Coverage        15.29%   14.35%   -0.95%     
===============================================
  Files              202      234      +32     
  Lines             4706     4919     +213     
  Branches           627      686      +59     
===============================================
- Hits               720      706      -14     
- Misses            3456     3624     +168     
- Partials           530      589      +59

Impacted Files	Coverage Δ
lib/cli/lib/project_types.js	`0% <ø> (ø)`	⬆️
addons/knobs/src/react/WrapStory.js	`11.11% <ø> (ø)`
app/vue/src/client/preview/render.js	`0% <0%> (ø)`
addons/knobs/src/index.js	`0% <0%> (ø)`	⬆️
...p/vue/src/server/config/defaults/webpack.config.js	`0% <0%> (ø)`
lib/cli/bin/generate.js	`0% <0%> (ø)`	⬆️
app/vue/src/server/config.js	`0% <0%> (ø)`
app/vue/src/server/index.html.js	`0% <0%> (ø)`
addons/notes/src/index.js	`0% <0%> (ø)`	⬆️
app/vue/src/client/preview/actions.js	`0% <0%> (ø)`
... and 117 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 80f7ab2...83bb874. Read the comment docs.

hzoo · 2017-06-12T21:43:33Z

app/vue/package.json

+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-plugin-react-docgen": "^1.5.0",
+    "babel-preset-es2015": "^6.24.1",


It's unnecessary to have es2015, es2016 here and in .babelrc (I noticed this for all the apps (react/react-native) - can switch to preset-env instead.

"es2015", "es2016" -> "env"

Yeah that's on my todolist 😅

…ustom components

alexandrebodin · 2017-06-13T13:27:16Z

I made some of the examples work but still a few issues to fix.

I add to remount for every story (not sure why)
We need to find a way to make sure Vue.use / Vue.component calls in the stories are processed before mounting the root Vue.
(Maybe there are Vue tricks to declare a Component globally after but could'nt find one)

Waiting for some feedback before continuing

…sions

…mponents

ndelangen · 2017-06-14T09:32:49Z

app/vue/src/server/config/webpack.config.js

@@ -52,7 +52,7 @@ export default function() {
      // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
      modules: ['node_modules'].concat(nodePaths),
      alias: {
-        'vue$': 'vue/dist/vue.esm.js'
+        'vue': path.resolve(path.join(__dirname, '../../../node_modules', 'vue/dist/vue.esm.js'))


this needs a explanatory comment ⁉️

why do you change it? 🤔
I think 'vue$': 'vue/dist/vue.esm.js' is correct.

See the docs:
https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

Not correct in our case because of webpack being in storybook/vue and not ine the example app.

Not pointing to the correct dep will have webpack load 2 times vie and thus make it impossible to ise extension or global custom components

@kazupon I fyou could try to run the example s storybook and see if all the stories are working :)

shilman · 2017-06-14T11:34:18Z

examples/vue/package.json

@@ -4,11 +4,11 @@
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.5",
-    "@storybook/vue": "^3.0.0",
+    "@storybook/vue": "3.0.0-alpha.0",


@ndelangen @alexandrebodin If these deps are filled in by bootstrap, can we use *?

I'll try to see if that works ;)

@shilman Ok so. Semver will not match a prerelease tag with *. Wee need to specify -tag

I will use ^3.0.0-alpha.0 to match any of the next versions until we up app/vue version to 3.x ;)

@alexandrebodin can you explain a little more? i'm wondering if this is related to my problems on the kitchen-sink project.

shilman · 2017-06-24T00:27:55Z

lib/cli/generators/REACT_NATIVE/index.js

@@ -31,7 +31,8 @@ module.exports = latestVersion('@storybook/react-native').then(version => {
  packageJson.devDependencies['@storybook/react-native'] = `^${version}`;

  if (!packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']) {
-    packageJson.devDependencies['react-dom'] = '^15.5.4';
+    const reactVersion = packageJson.dependencies.react;


how did this get in here?

shilman · 2017-06-24T00:28:05Z

lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js

@@ -15,7 +15,8 @@ module.exports = latestVersion('@storybook/react-native').then(version => {
  packageJson.devDependencies['@storybook/react-native'] = `^${version}`;

  if (!packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']) {
-    packageJson.devDependencies['react-dom'] = '^15.5.4';
+    const reactVersion = packageJson.dependencies.react;


how did this get in here?

This was merged from master, no?

shilman · 2017-06-24T00:42:15Z

@ndelangen @alexandrebodin I took a first pass through the code and was surprised—it looks really good!

My biggest concern at this point is addons. As far as a I can tell in the code above, when a react user loads addon-notes (for example) in dev mode, they also load vue. For a single framework, this isn't the end of the world, but if we plan to roll out a bunch of new frameworks then this is going to bloat.

Furthermore, I worry about changing the addon API with this release (e.g. addonNotes) and then changing it again once we figure out how to clean up this problem and others. I think this is an excellent case study with which we can work through our addon discussion #1212

cc @tmeasday

tmeasday

Looks great guys! Let's get a preview alpha out!

tmeasday · 2017-06-24T09:49:19Z

addons/knobs/src/react/index.test.js

+      expect(storyWrapperProps.context).toEqual(testContext);
+    });
+  });
+});


It's great to have some tests for knobs! Even better would be more tests that fully exercised it. I think we can do this later: #1355

shilman · 2017-06-24T09:54:36Z

@tmeasday alpha is already live AFAIK @3.2.0-alpha.0 and has been for a few days -- these guys
are on fire 🔥

shilman · 2017-06-29T19:44:14Z

@kazupon @ndelangen @alexandrebodin mind fixing the conflicts so we can merge this and I can release an alpha.1 with vue + story hierarchy?

alexandrebodin · 2017-06-30T07:46:43Z

@shilman Will do in a few hours ;)

…d-app-vue

…-vue

shilman · 2017-07-02T19:04:30Z

WIP

c3b35e6

ndelangen self-assigned this Jun 12, 2017

ndelangen added the in progress label Jun 12, 2017

WIP, webpack succesful

fcd6283

ndelangen mentioned this pull request Jun 12, 2017

Feature: Support Vue #1262

Closed

hzoo reviewed Jun 12, 2017

View reviewed changes

ndelangen mentioned this pull request Jun 12, 2017

Working with storybooks vue-play/vue-play#64

Open

ndelangen and others added 2 commits June 13, 2017 00:48

testing

7b53666

Implement basic working version, Cannot handle extension and global c…

b1470eb

…ustom components

shilman added the feature request label Jun 13, 2017

kazupon and others added 5 commits June 14, 2017 03:33

👕 refactor(client): update preview rendering

23aadf4

👕 refactor(examples): update stories

c23caa9

Publish alpha.0

ccbbf6e

Make global examples work if config.js bootstrap components and exten…

55aa3ff

…sions

Make working examples for functions, Vue extensions and Vue global co…

e7b9b0a

…mponents

ndelangen commented Jun 14, 2017

View reviewed changes

alexandrebodin and others added 2 commits June 14, 2017 12:02

fix dep for lerna bootstrap

6b21da8

HMR works!

cc546c5

shilman reviewed Jun 14, 2017

View reviewed changes

ndelangen and others added 5 commits June 14, 2017 14:46

CHANGE favicon

d51f83e

ADD example with actions and links

9454fa7

Update the dep value to work with next releases of @storybook/vue

d0dc873

Merge branch 'master' into add-app-vue

385611b

Add support for vue in addon-notes

9974a3b

ndelangen added the vue label Jun 14, 2017

alexandrebodin added 3 commits June 14, 2017 18:37

Make addon notes agnostic

bf00a9a

deprecate old WithNotes but keep backward compatible

514f4b7

Cleaning up deps and comments

5a6472d

shilman reviewed Jun 24, 2017

View reviewed changes

shilman added the ci: do not merge label Jun 24, 2017

tmeasday mentioned this pull request Jun 24, 2017

Properly test controlling a component through knobs #1355

Closed

tmeasday approved these changes Jun 24, 2017

View reviewed changes

🆙 update(server): tweak consoleoutputing

ec67cc5

shilman removed the ci: do not merge label Jun 29, 2017

kazupon mentioned this pull request Jun 30, 2017

Add __VUE_DEVTOOLS_CONTEXT__ to allow for iframe compatibility vuejs/devtools#361

Closed

alexandrebodin and others added 4 commits July 1, 2017 10:29

Merge branch 'add-app-vue' of github.com:storybooks/storybook into ad…

d2f259b

…d-app-vue

Merge branch 'master' of github.com:storybooks/storybook into add-app…

929eb38

…-vue

fix version in package.json

864e97e

Merge branch 'release/3.2' into add-app-vue

83bb874

shilman merged commit cf94190 into release/3.2 Jul 2, 2017

shilman removed the in progress label Jul 2, 2017

ndelangen deleted the add-app-vue branch July 31, 2017 15:56

azl397985856 mentioned this pull request Mar 22, 2024

[Snyk] Security upgrade webpack-dev-middleware from 1.12.2 to 5.3.4 azl397985856/react-storybook#19

Open

adrianblynch mentioned this pull request Mar 22, 2024

[Snyk] Security upgrade webpack-dev-middleware from 1.12.2 to 5.3.4 adrianblynch/storybook#259

Open

This was referenced Mar 22, 2024

[Snyk] Fix for 1 vulnerabilities adrukh/storybook#419

Open

[Snyk] Security upgrade webpack-dev-middleware from 1.12.2 to 5.3.4 adrukh/storybook#420

Open

lili2311 mentioned this pull request Mar 22, 2024

[Snyk-dev] Security upgrade webpack-dev-middleware from 3.7.3 to 5.3.4 lili2311/storybook#294

Open

This was referenced Mar 22, 2024

[Snyk] Security upgrade webpack-dev-middleware from 1.12.2 to 5.3.4 adrianblynch/storybook#260

Open

[Snyk] Security upgrade webpack-dev-middleware from 1.12.2 to 5.3.4 adrianblynch/storybook#261

Open

This was referenced Mar 22, 2024

[Snyk] Security upgrade webpack-dev-middleware from 1.12.2 to 5.3.4 Bhanditz/storybook#128

Open

[Snyk] Security upgrade webpack-dev-middleware from 1.12.2 to 5.3.4 Bhanditz/storybook#130

Open

kazupon mentioned this pull request Mar 28, 2024

feat: support flat config and eslint v9 storybookjs/eslint-plugin-storybook#152

Closed

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP - add vue support #1267

WIP - add vue support #1267

ndelangen commented Jun 12, 2017 •

edited by alexandrebodin

Loading

codecov bot commented Jun 12, 2017 •

edited

Loading

hzoo Jun 12, 2017

ndelangen Jun 13, 2017

alexandrebodin commented Jun 13, 2017

ndelangen Jun 14, 2017

kazupon Jun 14, 2017

alexandrebodin Jun 14, 2017

alexandrebodin Jun 14, 2017

shilman Jun 14, 2017

alexandrebodin Jun 14, 2017

alexandrebodin Jun 14, 2017

shilman Jun 14, 2017

shilman Jun 24, 2017

shilman Jun 24, 2017

tmeasday Jun 24, 2017

shilman commented Jun 24, 2017 •

edited

Loading

tmeasday left a comment

tmeasday Jun 24, 2017

shilman commented Jun 24, 2017

shilman commented Jun 29, 2017

alexandrebodin commented Jun 30, 2017

shilman commented Jul 2, 2017

WIP - add vue support #1267

WIP - add vue support #1267

Conversation

ndelangen commented Jun 12, 2017 • edited by alexandrebodin Loading

What we did

How to test

TODO

codecov bot commented Jun 12, 2017 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexandrebodin commented Jun 13, 2017

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

shilman commented Jun 24, 2017 • edited Loading

tmeasday left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shilman commented Jun 24, 2017

shilman commented Jun 29, 2017

alexandrebodin commented Jun 30, 2017

shilman commented Jul 2, 2017

ndelangen commented Jun 12, 2017 •

edited by alexandrebodin

Loading

codecov bot commented Jun 12, 2017 •

edited

Loading

shilman commented Jun 24, 2017 •

edited

Loading