Incompatible with vue 3.0 #111
Comments
|
In the interim, I've utilized yarn's patch capabilities to solve this for me: First, Create file diff --git a/lib/preset.js b/lib/preset.js
index e5c85e120ce743d879044dfed9a77451eeabdaf1..ba340af5f10747ba4cf56bc4610942e9d69367f3 100644
--- a/lib/preset.js
+++ b/lib/preset.js
@@ -36,7 +36,7 @@ module.exports = {
...webpackConfig.resolve,
alias: {
...webpackConfig.resolve && webpackConfig.resolve.alias,
- vue$: require.resolve('vue/dist/vue.esm.js'),
+ vue$: require.resolve('vue/dist/vue.esm-browser.js'),
},
},
resolveLoader: webpackConfig.resolveLoader,Then tell yarn to use the patched version in your and lastly |
|
Is the patch working for you? I can't build storybook for my vue3 project even with |
|
Yeah, I think I called my patch a solution too soon. It builds successfully and I assumed the lack of output was because the boilerplate component was broken for TS projects. After fixing that, there appears to be console errors because I think the provided patch is all that is needed here, but more work will be necessary in the storybook side to fix vue rendering. |
|
@pksunkara I think I've got the yarn patchable (post transpile) changes figured out. There's some HMR issues with it for sure, and I'm seeing that click events (and probably other listeners) are firing twice. But this could at least serve as a starting place for using storybook with vue 3. The changes below mostly follow the migration guides for render functions and creating components. But that alone didn't render the story, so it was necessary to begin using the composition api to make the reactive storybook properties added on the root app. While this is a bit of a hack, I suspect the storybook team will be able to leverage composition APIs to drastically simplify their vue integration.
diff --git a/dist/client/preview/index.js b/dist/client/preview/index.js
index 38a6be377c58c2efab3fdd446a0272e30045ced9..3accfe7f72096cfce6d2bd63f37fd3005819a231 100644
--- a/dist/client/preview/index.js
+++ b/dist/client/preview/index.js
@@ -70,18 +70,19 @@ function prepare(rawStory, innerStory) {
});
}
- story = _vue["default"].extend(story); // @ts-ignore // https://github.com/storybookjs/storybook/pull/7578#discussion_r307984824
- } else if (story.options[WRAPS]) {
+ story = _vue["defineComponent"](story); // @ts-ignore // https://github.com/storybookjs/storybook/pull/7578#discussion_r307984824
+ } else if (story[WRAPS]) {
return story;
}
- return _vue["default"].extend((_Vue$extend = {}, _defineProperty(_Vue$extend, WRAPS, story), _defineProperty(_Vue$extend, _render.VALUES, Object.assign(Object.assign({}, innerStory ? innerStory.options[_render.VALUES] : {}), (0, _util.extractProps)(story))), _defineProperty(_Vue$extend, "functional", true), _defineProperty(_Vue$extend, "render", function render(h, _ref) {
- var data = _ref.data,
- parent = _ref.parent,
- children = _ref.children;
- return h(story, Object.assign(Object.assign({}, data), {}, {
+ return _vue["defineComponent"]((_Vue$extend = {}, _defineProperty(_Vue$extend, WRAPS, story), _defineProperty(_Vue$extend, _render.VALUES, Object.assign(Object.assign({}, innerStory ? innerStory[_render.VALUES] : {}), (0, _util.extractProps)(story))), _defineProperty(_Vue$extend, "functional", true), _defineProperty(_Vue$extend, "render", function render(_ref) {
+ var data = _ref.$data,
+ props = _ref.$props,
+ parent = _ref.$parent,
+ children = _ref.$children;
+ return _vue['h'](story, Object.assign(Object.assign({}, data), {}, {
// @ts-ignore // https://github.com/storybookjs/storybook/pull/7578#discussion_r307986196
- props: Object.assign(Object.assign({}, data.props || {}), parent.$root[_render.VALUES])
+ props: Object.assign(Object.assign({}, props || {}), parent.$root[_render.VALUES])
}), children);
}), _Vue$extend));
}
diff --git a/dist/client/preview/render.js b/dist/client/preview/render.js
index 510391bf8a72e0ae4246176901522654e425b4b0..6b914faad18f7f69af30456d30a08c77fd02eaea 100644
--- a/dist/client/preview/render.js
+++ b/dist/client/preview/render.js
@@ -44,20 +44,24 @@ var COMPONENT = 'STORYBOOK_COMPONENT';
exports.COMPONENT = COMPONENT;
var VALUES = 'STORYBOOK_VALUES';
exports.VALUES = VALUES;
-var root = new _vue["default"]({
- data: function data() {
- var _ref;
-
- return _ref = {}, _defineProperty(_ref, COMPONENT, undefined), _defineProperty(_ref, VALUES, {}), _ref;
+var _ref = _vue['markRaw']({
+ [COMPONENT]: undefined,
+ [VALUES]: {},
+});
+var root = _vue["createApp"]({
+ setup(props, { slots, attrs, emit }) {
+ var children = _ref[COMPONENT] ? [_vue['h'](_ref[COMPONENT])] : undefined;
+
+ return () => _vue['h'](
+ 'div',
+ {
+ id: 'root',
+ [COMPONENT]: _ref[COMPONENT],
+ [VALUES]: _ref[VALUES],
+ },
+ children
+ );
},
- render: function render(h) {
- var children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined;
- return h('div', {
- attrs: {
- id: 'root'
- }
- }, children);
- }
});
function render(_ref2) {
@@ -69,7 +73,7 @@ function render(_ref2) {
showError = _ref2.showError,
showException = _ref2.showException,
forceRender = _ref2.forceRender;
- _vue["default"].config.errorHandler = showException; // FIXME: move this into root[COMPONENT] = element
+ root.config.errorHandler = showException; // FIXME: move this into root[COMPONENT] = element
// once we get rid of knobs so we don't have to re-create
// a new component each time
@@ -85,14 +89,14 @@ function render(_ref2) {
showMain(); // at component creation || refresh by HMR or switching stories
- if (!root[COMPONENT] || !forceRender) {
- root[COMPONENT] = element;
+ if (!_ref[COMPONENT] || !forceRender) {
+ _ref[COMPONENT] = element;
} // @ts-ignore https://github.com/storybookjs/storrybook/pull/7578#discussion_r307986139
- root[VALUES] = Object.assign(Object.assign({}, element.options[VALUES]), args);
+ _ref[VALUES] = Object.assign(Object.assign({}, element[VALUES]), args);
if (!root.$el) {
- root.$mount('#root');
+ root.mount('#root');
}
}
\ No newline at end of file
diff --git a/dist/client/preview/util.js b/dist/client/preview/util.js
index ab8c1d3cdb5424fc782e3fb3bee8951ee2d6c7e0..90bbd09f5a6276ea6592c7c0d0a9ba63df83e140 100644
--- a/dist/client/preview/util.js
+++ b/dist/client/preview/util.js
@@ -79,7 +79,7 @@ function resolveDefault(_ref) {
function extractProps(component) {
// @ts-ignore this options business seems not good according to the types
- return Object.entries(component.options.props || {}).map(function (_ref2) {
+ return Object.entries(component.props || {}).map(function (_ref2) {
var _ref3 = _slicedToArray(_ref2, 2),
name = _ref3[0],
prop = _ref3[1]; |
|
You should probably help at storybookjs/storybook#10654 instead of here. |
|
Given that vue3 support has landed in storybook 6.2, this should be doable now. Here are some things, that I definitely had to change:
The only thing that doesn’t work for me is storybook-vue-router and the property tables in docs mode. |
|
What do you think, would it be better to have one version of vue-cli-plugin-storybook to support both vue2 and vue3 or separate versions? |
|
We can try. Would welcome a PR |
|
From a user perspective I would prefer to have only one plugin no matter my vue version. |
|
Ok, I solved it with optional peerDependencies. They work with npm 7. In npm 6 peerDependencies are not pulled in automatically anyways. Please have a look at the PR @pksunkara . |
Describe the bug
When using this plugin on a vue 3.0 based repo, the storybook build/serve commands fail due to the absence of the
vue/dist/vue.esm.jsfile. I believe it has been renamedvue/dist/vue.esm-browser.js. Possibly, but not likely, this is because of yarn 2 (berry).Steps to reproduce the behavior
vue create .and follow prompts selecting vue 3.0vue add storybookand use^6.0.0as the versionyarn set version berry.yarnrc.yml)yarn installyarn storybook:buildExpected behavior
I expect a default vue project, adding this plugin's generated code, and a build to succeed without failure.
Screenshots and/or logs
Environment
Additional context
#110 must be fixed if using yarn2
Example
.yarnrc.ymlThe text was updated successfully, but these errors were encountered: