Automention: Hola @ backbone87 @pocka , ¡te etiquetaron! ¿Puedes echar una mano aquí?

Hmm ... Es posible que necesitemos hacer un ajuste preestablecido de vue3

Hmm ... Es posible que necesitemos hacer un ajuste preestablecido de vue3

¿puedo ayudar?

lo que intenté hasta ahora (aunque solo en archivos dist ubicados en el directorio de módulos de nodo):

vue / dist / server / framework-preset.js

• VueLoaderPlugin ahora es una exportación de vue-loader
• reemplace vue-esm.js con vue.esm-browser.js

11c11
< var _plugin = _interopRequireDefault(require("vue-loader/lib/plugin"));
---
> var _plugin = _interopRequireDefault(require("vue-loader").VueLoaderPlugin);
34c34
<         vue$: require.resolve('vue/dist/vue.esm.js')
---
>         vue$: require.resolve('vue/dist/vue.esm-browser.js')

vue / dist / client / preview / render.js

El componente de la aplicación ahora se instancia con createApp() , toda la configuración, etc. debe aplicarse a la instancia

`` dif
21c21

<var _vue = _interopRequireDefault (require ("vue"));

var _vue = _interopRequireDefault (require ("vue"). createApp);
43c43

<var root = new _vue ["predeterminado"] ({

var root = _vue ["predeterminado"] ({
67c67

<_vue ["predeterminado"]. config.errorHandler = showException;

root.config.errorHandler = showException;
88c88

<raíz. $ montaje ('# raíz');

root.mount('#root');

''

ahora estoy atascado con vue/dist/client/preview/index.js porque la instancia de la aplicación se necesita allí, por ejemplo, para definir la propiedad extends , y eso solo parece factible de implementar con una construcción de libro de cuentos adecuada ...

Con suerte, estos pequeños pasos son de alguna utilidad.

¡Hola a todos! Parece que últimamente no ha habido mucho en este tema. Si todavía hay preguntas, comentarios o errores, no dude en continuar con la discusión. Desafortunadamente, no tenemos tiempo para abordar todos los problemas. Siempre estamos abiertos a contribuciones, así que envíenos una solicitud de extracción si desea ayudar. Los problemas inactivos se cerrarán después de 30 días. ¡Gracias!

bache

@pksunkara @graup @ Aaron-Pool, ¿alguien tiene tiempo para investigar esto? Si hay cambios importantes que necesitamos y podemos llevarlos a 6.0, ¡ahora sería el mejor momento para hacerlo!

Todavía necesitaríamos admitir Vue2 durante bastante tiempo después del lanzamiento de Vue3. Una cosa que debemos verificar es si de alguna manera podemos admitirlos a ambos al mismo tiempo.

También teniendo en cuenta que Vue3 aún no está fuera de la versión beta, y suponiendo que queramos sacar el libro de cuentos v6, pospondría el soporte de vue3 para que sea posterior al lanzamiento de v6.

Estoy pensando en investigar esto pronto, pero no puedo dar una ETA. Todavía no he tenido la oportunidad de probar Vue 3.

Estoy de acuerdo con @pksunkara en que esto no es urgente para 6.0, ya que de todos modos sigue siendo beta.

Gracias @graup. También estoy de acuerdo en que no es urgente; no se debería esperar que admitamos software inédito en Storybook. Mi única preocupación es que, por ejemplo, lanzamos 6.0 en julio, Vue3 se lanza en agosto, vamos a admitirlo en septiembre y encontramos que se requiere un cambio importante. Y no podemos lograr ese cambio radical sin un aumento importante de la versión en octubre, que debería ocurrir en junio de 2021.

Solo estaba tratando de obtener algunas luces en el canal de discordia en este momento sobre cómo voy a intentar que funcione con Vue 3, requeriría un nuevo ajuste preestablecido ya que la lógica para arrancar el marco es un poco diferente. creo que el código actual en la carpeta vue funcionará con vue 3 ..

Entiendo @shilman. Permítanme aclarar un poco más, ya que parece que no entendí correctamente mi punto.

Por lo que entiendo con los intentos de @ p3k y el comentario de @milewski , no solo necesitamos un nuevo ajuste preestablecido, sino que también necesitamos hacer cambios importantes en el paquete @storybook/vue .

Pero todavía necesitaríamos admitir Vue v2 durante bastante tiempo, no todos se cambiarían a Vue v3. Entonces, a menos que queramos decir que Vue v2 ya no es compatible, sería mejor si creamos un nuevo paquete @storybook/vue3 .

Pero si decidimos cortar el soporte de Vue v2, entonces sí, estoy de acuerdo en que probablemente deberíamos hacer cambios importantes antes de Storybook v6.

@pksunkara Su solución propuesta suena genial. 💯

No creo que podamos cortar el soporte de vue2 en el corto plazo, por lo que querríamos ejecutar esos dos paquetes en paralelo, y tal vez hacer un corte completo en alguna versión importante futura (¿7.0? 8.0? ¿Nunca?). Después de que se publiquen los dos paquetes, podemos usar las estadísticas de descarga de npm para determinar cuándo es el momento adecuado para eliminar el soporte de Vue2. WDYT?

cc @ndelangen

Le di una sesión: https://github.com/milewski/storybook/tree/vue3 esto esencialmente funciona para mí con vue3 ..

sin embargo, había un bloque de código que no estoy seguro de qué se suponía que debía hacer https://github.com/milewski/storybook/blob/vue3/app/vue/src/client/preview/index.ts#L41 -L58 En realidad, nunca antes había usado un libro de cuentos ... Solo quería comenzar a usarlo ahora con mi proyecto vue3 ...

por lo que puedo decir, https://storybook.js.org/docs/guides/guide-vue/ siguiendo las instrucciones de esta guía, obtuve mi componente usando vue 3 procesado con éxito ... sin esa pieza de código que dejé off ... ¿Quizás es necesario trabajar con algún complemento específico? ¿Alguien puede decirme con qué configuración / complemento / complemento sería útil ese código? para que pueda encontrar una manera de solucionarlo y alguien pueda inspirarse en mi versión y seguir correctamente los procedimientos del código para lanzar un nuevo ajuste preestablecido aquí.

Buen trabajo

Me di cuenta de lo que hacía ese código ... era necesario aplicar las opciones dadas en las perillas ... lo he arreglado ... ¿puedes probarlo ya que parece que has estado usando Storybook por más tiempo? @ p3k

Puede instalarlo ejecutando:

git clone --branch vue3 https://github.com/milewski/storybook.git
cd storybook
yarn bootstrap --core
yarn build (select vue)
cd app/vue
yarn link

then cd to your project and:

yarn link @storybook/vue

muchas gracias por sus esfuerzos @milewski - estoy probando su rama y recibí un error al ejecutar yarn bootstrap --core :

…
$ node ../../scripts/prepare.js
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/globals.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/types.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/render.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/index.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/index.d.ts
Built: @storybook/[email protected]
lerna ERR! yarn run prepare exited 1 in '@storybook/vue'
lerna ERR! yarn run prepare stdout:
$ node ../../scripts/prepare.js
src/server/framework-preset-vue.ts(5,17): error TS4058: Return type of exported function has or is using name 'VueLoaderPlugin' from external module "/home/tobi/Projects/modul/storybook/app/vue/node_modules/vue-loader/dist/plugin" but cannot be named.
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/globals.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/types.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/render.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/util.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/index.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/index.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/server/options.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/server/build.d.ts
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run prepare stderr:
ERR! FAILED (ts) :  
ERR! FAILED to compile ts: @storybook/[email protected] 
error Command failed with exit code 1.

lerna ERR! yarn run prepare exited 1 in '@storybook/vue'
lerna WARN complete Waiting for 3 child processes to exit. CTRL-C to exit immediately.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Uhm. Hubo un problema con el mecanografiado. Acabo de deshabilitar la comprobación de ts por ahora. Extraiga el último código de mi rama e intente nuevamente

sí, ahora el comando se ejecutó sin errores.

re yarn build (select vue) recibo el mensaje _storybook WARN build ¡Nada que construir! _ - ¿es correcto?

No, en el menú interactivo que aparece, debe presionar la barra espaciadora para seleccionar

ah! lo siento, mi mal, seguro.

ahora se construyó bien y puedo ejecutar un libro de cuentos con mi primer componente vue3, ¡espléndido! gracias de nuevo, @milewski

@milewski ¡

Por lo que puedo decir, los únicos cambios importantes son las importaciones y las cosas createApp , ¿verdad? ¿Quizás es posible escribir código compatible con versiones anteriores que verifique la versión de vue instalada y haga lo correcto automáticamente? Entonces podríamos evitar tener dos versiones del preset.

Intenté actualizar nuestros ejemplos de vue, pero parece que algunas de las cosas que se usan allí aún no tienen versiones de vue3. En general, todavía parece haber una gran cantidad de paquetes beta y no coincidentes, por lo que sería mejor esperar un poco antes de intentar actualizar la base de código completa del libro de cuentos, incluidos los complementos, etc. Habrá mucho trabajo por hacer.

Por lo que puedo decir, los únicos cambios importantes son las importaciones y las cosas de createApp, ¿verdad?

sí, yo también lo diría.

de las cosas que probé inicialmente (ver mi comentario inicial), todo lo que guardé fue la combinación de configuración: el empuje de VueLoaderPlugin ya no es necesario, gracias a la contribución de @ milewski, supongo: cat:

(re) inicializar el libro de cuentos fue sencillo como se describe en los documentos: npm install @storybook/vue --save-dev ; Ni siquiera necesitaba instalar otras dependencias de pares (de todos modos, podría deberse a que ya las instalamos para nuestro proyecto).

Entonces podríamos evitar tener dos versiones del preset.

Supongo que sería muy preferible, y tal vez incluso haría posible tener los cambios en el próximo lanzamiento del libro de cuentos ...

con respecto a los ejemplos de vue, ¿quizás podría ayudar a crear versiones compatibles con vue3 de (algunos de) ellos? (Sin embargo, todavía no soy un experto en vue).

@graup

Por lo que puedo decir, los únicos cambios importantes son las importaciones y las cosas de createApp, ¿verdad? ¿Quizás es posible escribir código compatible con versiones anteriores que verifique la versión de vue instalada y haga lo correcto automáticamente? Entonces podríamos evitar tener dos versiones del preset.

También enfrenté problemas con la reactividad, traté de seguir la forma en que la versión actual estaba configurando / extendiendo el objeto pero vue3 ya no rastrea los cambios en ese tipo de objetos, especialmente los creados dentro de la función de render, tuve que crear referencias con ref () o reactivo () para que active las actualizaciones.

Intenté actualizar nuestros ejemplos de vue, pero parece que algunas de las cosas que se usan allí aún no tienen versiones de vue3. En general, todavía parece haber una gran cantidad de paquetes beta y no coincidentes, por lo que sería mejor esperar un poco antes de intentar actualizar la base de código completa del libro de cuentos, incluidos los complementos, etc. Habrá mucho trabajo por hacer.

Intenté usar ese como punto de partida, pero trató de instalar vue2 cosas incluso si había configurado explícitamente la versión en el packagejson ... vue 3 no funciona en absoluto si tiene vue-template-compiler o el antiguo vue loader instalado .. puede haber algunas dependencias allí que están importando esos

@ p3k

(re) inicializar el libro de cuentos fue sencillo como se describe en los documentos: npm install @ storybook / vue --save-dev; Ni siquiera necesitaba instalar otras dependencias de pares (de todos modos, podría deberse a que ya las instalamos para nuestro proyecto).

Creo que esto sucedió porque incluí vue3 y vue-loader ^ 16 como una dependencia de packages.json

Estaría bien con un paquete @storybook/vue3 si es realmente necesario.

Para su información, acabo de corregir un error de representación central en el código Storybook Vue2: https://github.com/storybookjs/storybook/pull/11076

Esto hace que el "comportamiento forzado de actualización" utilizado por addon-knobs y addon-controls realmente fuerce una actualización. No estoy seguro de si tiene alguna relación con el código de Vue3, pero para su información, si está probando, combínelo en esa actualización.

¡Hecho también aplicado en la versión bifurcada!

Solo para poner mis dos centavos, parece que vite será la herramienta _defacto_ utilizada para vue 3, al igual que vue-cli se usó para vue 2. Tuvimos varios usuarios con problemas para tener que hacer toda la configuración de configuración dos veces al usar vue-cli con storybook, un probalem @pksunkara hizo un gran trabajo resolviendo con su plugin vue-cli storybook. Debemos asegurarnos de que cualquier preset / paquete que configuremos funcione sin problemas con vite, si es posible.

Editar: Me acabo de dar cuenta de que esto podría ser complicado, porque Vite usa rollup debajo del capó, en lugar de paquete web

Creo que realmente debería ver si Storybook puede usar el paquete web / sistema de compilación de los usuarios y no necesitar su propia configuración en absoluto.

Dejando de lado los pensamientos, creo que no he revisado vite, pero tal vez adapten el sistema de complementos vue cli

No pensamos ni pretendemos que Vite se convierta en "la" herramienta. Una gran cantidad de proyectos necesitarán la potencia y la flexibilidad que proporciona el paquete web, y el objetivo de vite no es satisfacer todas estas necesidades.

Así que no me preocuparía demasiado por vite por ahora, y ciertamente no por el soporte de Vue3 para el libro de cuentos en sí.

@LinusBorg, la razón por la que

¿No ves que nos encontramos con un problema similar con vite cuando la gente intenta integrar el libro de cuentos en un proyecto basado en vite?

no, realmente no. Vite en sí es bastante básico en comparación con una configuración de Vue CLI.

Lo que proporciona Vite está cubierto por cualquier configuración simple de Webpack que tenga reglas para manejar archivos .vue , ts(x) y .css . Y si bien es extensible, esa API está bastante cerca del metal, por lo que no esperamos que la gente agregue transformaciones personalizadas y cosas de izquierda a derecha.

No tiene una API de complementos extensa por diseño. Si las personas necesitan magia personalizada elegante para sus proyectos, es probable que necesiten Webpack de todos modos más temprano que tarde, así que vaya con Vue CLI.

Vite no ve la "extensibilidad para ningún caso de uso" como uno de sus objetivos.

Entonces, diría que cualquier proyecto de Vite generalmente debería funcionar con storybook / vue siempre que su configuración de paquete web cubra las reglas básicas que expuse, lo cual creo que sí.

@LinusBorg Ok, eso tiene sentido. Agradecido por la contribución 👍 ¡Cualquier guía del equipo de Core Vue siempre es muy apreciada!

Gracias por el trabajo que todos están poniendo en el libro de cuentos, no puedo esperar para usarlo para mi proyecto Vue 3 :)

Dado que Vue3 ahora está en RC , podría valer la pena reevaluar si se debe considerar agregar soporte de Vue3 a v6.

@hollandThomas ya estamos en mitad de RC, por lo que vue3 tendrá que venir en 6.1. Dicho esto, deberíamos lanzar los primeros 6.1 alphas en unas pocas semanas, así que si alguien quiere comenzar a armar esto, ¡estoy seguro de que hay una gran audiencia que está hambrienta de esto!

¿Hay alguna rama activa que podamos utilizar o en la que podamos contribuir para ayudar a preparar el soporte de Vue 3?

En nuestra organización, nuestra biblioteca de componentes de interfaz de usuario de Vue toca todos nuestros proyectos de Vue, por lo que es una de las primeras cosas que nos impide probar Vue 3, y estaríamos ansiosos por ayudar a probar o migrar si es necesario. Supongo que otros están en el mismo barco.

Ahora también hay una guía de migración v2 -> v3 en los documentos https://v3.vuejs.org/guide/migration/introduction.html#overview

@milewski @graup @ Aaron-Pool @elevatebart estamos en 6.1-alpha ahora. ¿Alguien quiere probar un PR por esto?

@ p3k gracias. recién creado con sus descripciones, para mí parece un trabajo, no probé tanta funcionalidad
La configuración del paquete web se puede arreglar fácilmente en main.js como

webpackFinal: async (config, {configType}) => {

    config.resolve.alias['vue$'] = 'vue/dist/vue.esm-browser.js'

    return config
  }

y el cargador puede ser

con render.js atascado un poco cómo configurar en .storybook

@shilman ¿esta versión '6.1.0-alpha.1' es compatible con vue3?

no estoy seguro, pero parece que no. todavía se admite la segunda versión ..

No, no todavía. Espero que alguien aquí contribuya, según mi comentario anterior.

@shilman Todavía no he tenido la oportunidad de usar Vue 3 😞 Mi trabajo tiene una fecha límite para el lanzamiento de un producto basado en Vue 2 este mes, así que no he tenido tiempo de incursionar.

Entonces las tareas son básicamente

• copiar app / vue a app / vue3
• asegúrese de modificar todas las referencias del marco
• aplicar los cambios realizados por @milewski en https://github.com/milewski/storybook/tree/vue3
• modificar o crear nuevos ejemplos de fregadero
• Pruebe diferentes combinaciones de métodos de definición de componentes de story / vue3 y compruebe si funcionan

?

@chartinger me parece el camino más directo. si podemos averiguar cómo aplicar condicionalmente esos cambios en función de la versión de vue que está usando y mantener un solo paquete, sería aún mejor.

Hice una vista de experimentos en https://github.com/chartinger/storybook/tree/app-vue3 (necesitaba algunos cambios de la bifurcación anterior) lo que encontré hasta ahora:

Bueno:

• Los componentes básicos de vue3 se renderizarán
• Los cambios de los controles se actualizan en vivo

Malo:

• Parece que no se pueden cargar los componentes de vue decorados en clase
• No tengo idea de si las perillas funcionan, quería aprender un libro de cuentos con vue3, así que no hay código de demostración o proyectos anteriores para probar
• Sin detección automática de atributos de control de accesorios

Otro:

• Importar el componente en StoryMeta no hace nada, tiene que estar en Story
• Los componentes globales ahora están vinculados a la instancia de la aplicación, ¿es posible proporcionarlos a .storybook / preview.js o de alguna otra manera? (¿es necesario?)

@elevatebart ¿Cuál es el estado de vue-docgen-api para vue3? ☝️

Es compatible en general. Pero aún no se trata la emisión de eventos en la función de configuración.

Para esto, todavía necesito una forma eficaz de ingresar a las funciones de configuración y detectar esas emisiones.

Dado que las funciones pueden estar en varios archivos, puede llevar un poco de tiempo.

@chartinger quiere actualizar su rama con algunos de los experimentos? Me gustaría profundizar en el problema de "autodetección de atributos de control" que encontró, y probablemente pueda conseguir que alguien mire el problema de la decoración de clases.

@shilman Agregué un ejemplo de vue3, basado en vue-cli y migré el ejemplo del botón a la composición y la clase api (lo llamé anotación en el código, que tiene que cambiar, pero lo hará por ahora). De alguna manera, los componentes de la API de clase se cargaron esta vez.

Para las pruebas, no olvide npm link y npm link @storybook/vue3 consecuencia.

FYI: Acabo de publicar @andoshin11/storybook-vue3 en npm, así que siéntete libre de probarlo 👇

https://www.npmjs.com/package/@andoshin11/storybook -vue3

por cierto, Vue 3 está oficialmente fuera de la versión beta.

PD. Gracias por tu fork / versión del storybook @ andoshin11

// editar: solo lean el hilo y buen trabajo, chicos ... Podría intentarlo :)

Increíble trabajo para todos. Me encantaría incluir esto en la versión 6.1. ¿Alguien quiere asumir esto? Será una contribución de muy alto impacto. Idealmente, admitimos vue3 y vue2 en el mismo paquete, realizando una autodetección o configuración de usuario para averiguar qué versión usar.

Alcance de este trabajo:

• [] Realización de los cambios necesarios para admitir vue3
• [] Agregar pruebas de e2e para vue3 a un proyecto de vue (ya tenemos una plantilla para esto, y no debería ser demasiado difícil)
• [] Actualización de la documentación
• [] Estar disponible para corrección de errores y soporte a medida que lo promocionamos en la versión preliminar.

Por favor contácteme en nuestra discordia si le gustaría trabajar en esto - ¡He creado un canal #vue3 temp para discutir! https://discord.com/invite/UUt2PJb

Hay un poco de trabajo realizado en https://github.com/storybookjs/storybook/issues/12632. Anotarlo aquí para que no se pierda.

Dado que Vue 3 está fuera de la versión beta y estará disponible en la etiqueta latest en un par de meses, ¿hay una ETA disponible para el soporte de Vue 3 en el libro de cuentos?

Además, sería útil agregar CHANGELOG a @storybook/vue - https://github.com/storybookjs/storybook/tree/master/app/vue , para que podamos tener una idea sobre lo que cambió con las versiones @storybook/vue .

@palerdot Me encantaría que se envíe el soporte de vue3 como parte del libro de cuentos 6.1. buscando a alguien que contribuya con esto, ¿está interesado? https://github.com/storybookjs/storybook/issues/10654#issuecomment -698200547

en cuanto al CHANGELOG, tenemos uno para todo el monorepo y no es realista mantener uno adicional para cada marco. sin embargo, consideraré hacer resúmenes específicos del framework con cada anuncio de lanzamiento, que es probablemente lo que realmente quieres como usuario.

@shilman

buscando a alguien que contribuya con esto, ¿está interesado?

Desafortunadamente, no podré dedicar tiempo a esto actualmente (sin mencionar que no estoy tan familiarizado con storybook codebase).

Consideraré hacer resúmenes específicos del marco con cada anuncio de lanzamiento, que es probablemente lo que realmente desea como usuario.

Gracias. Eso estaría mejor. Estás en lo correcto. Como usuario, solo quiero saber qué marco es compatible (como Vue 3, por ejemplo) con cada versión. Por lo tanto, será útil agregar esa información al CHANGELOG principal.

Solo dejo un punto de datos que me encantaría que Vue3 también funcionara con el libro de cuentos. ¿Quizás algunos de los desarrolladores de herramientas / núcleo de Vue podrían ayudar aquí, como @Akryum ?

@shilman
Creo que encontré la solución para trabajar el libro de cuentos con vue2 y vue3. Intento convertirlo en un POC si espero encontrar el tiempo para ello ;-). Ninguna promesa. ^^
Pero pensé que ya compartía mi idea.
Encontré Vue Demi que parece prometedor para resolver el problema de usar un paquete para vue2 y vue3.
Por supuesto, todavía queda trabajo por hacer con la API de composición. Pero creo que con ese paquete es un paso adelante hacia un paquete prometedor

13224 mismo problema. @shilman, ¿deberíamos esperar el soporte de Vue 3 en la próxima versión de Storybook?

Sí, con suerte aterrizará en 6.2. ¡Todavía estoy buscando a alguien que lo haga realidad!