Automention: Ei @ backbone87 @pocka , você foi marcado! Você pode dar uma mão aqui?

Hmm .. Podemos precisar fazer uma predefinição vue3

Hmm .. Podemos precisar fazer uma predefinição vue3

posso ajudar?

o que tentei até agora (apenas em arquivos dist localizados no diretório de módulos do nó, no entanto):

vue / dist / server / framework-preset.js

• VueLoaderPlugin agora é uma exportação de vue-loader
• substitua vue-esm.js por 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

o componente do aplicativo agora é instanciado com createApp() , todas as configurações etc. precisam ser aplicadas à instância

`` `diff
21c21

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

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

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

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

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

root.config.errorHandler = showException;
88c88

<root. $ mount ('# root');

root.mount('#root');

`` `

agora estou preso com vue/dist/client/preview/index.js porque a instância do aplicativo é necessária lá, por exemplo, para definir a propriedade extends - e isso só parece viável de implementar com uma construção de livro de histórias adequada ...

espero que esses passos de bebê tenham alguma utilidade.

Olá a todos! Parece que não tem havido muito nesta edição ultimamente. Se ainda houver perguntas, comentários ou bugs, fique à vontade para continuar a discussão. Infelizmente, não temos tempo para abordar todos os problemas. Estamos sempre abertos a contribuições, portanto, envie-nos uma solicitação de pull se quiser ajudar. Os problemas inativos serão fechados após 30 dias. Obrigado!

colisão

@pksunkara @graup @ Aaron-Pool, alguém tem tempo para se aprofundar nisso? se houver alterações significativas de que precisamos e podemos colocá-las no 6.0, agora seria o melhor momento para fazê-lo!

Ainda precisaríamos dar suporte ao Vue2 por um bom tempo após o lançamento do Vue3. Uma coisa que precisamos verificar é se podemos de alguma forma apoiar os dois ao mesmo tempo.

Além disso, considerando que o Vue3 ainda não saiu do beta e supondo que queremos lançar o storybook v6, eu adiaria o suporte ao vue3 para depois do lançamento do v6

Estou planejando analisar isso em breve, mas não posso dar um ETA. Ainda não tive a chance de experimentar o Vue 3.

Eu concordo com @pksunkara que isso não é urgente para 6.0, pois ainda é beta de qualquer maneira.

Obrigado @graup. Também concordo que não é urgente - não devemos oferecer suporte a software não lançado no Storybook. Minha única preocupação é que, por exemplo, lançamos o 6.0 em julho, o Vue3 é lançado em agosto, vamos oferecer suporte em setembro e descobrimos que é necessária uma alteração significativa. E não podemos obter essa alteração significativa sem um aumento na versão principal em outubro, o que deveria acontecer em junho de 2021.

Eu estava apenas tentando obter algumas luzes no canal de discórdia agora sobre como devo tentar fazê-lo funcionar com o Vue 3, isso exigiria uma nova predefinição, pois a lógica para inicializar o framework é um pouco diferente. Eu não acho que o código atual na pasta vue funcionará com vue 3 ..

Eu entendo @shilman. Deixe-me esclarecer um pouco mais, já que parece que não entendi corretamente.

Pelo que entendi com as tentativas de @ p3k e o comentário de @milewski , não precisamos apenas de uma nova predefinição, mas também precisamos fazer alterações significativas no pacote @storybook/vue .

Mas ainda precisaríamos dar suporte ao Vue v2 por um bom tempo, nem todos estariam migrando para o Vue v3. Portanto, a menos que queiramos dizer que o Vue v2 não é mais compatível, seria melhor se criarmos um novo pacote @storybook/vue3 .

Mas se decidirmos cortar o suporte Vue v2, então sim, eu concordo que provavelmente deveríamos fazer mudanças significativas antes do Storybook v6.

@pksunkara Sua solução proposta parece ótima. 💯

Eu não acho que podemos cortar o suporte vue2 tão cedo, então gostaríamos de rodar esses dois pacotes em paralelo, e talvez fazer um cut-over completo em algum futuro lançamento principal (7.0? 8.0? Nunca?). Depois que os dois pacotes forem lançados, podemos usar as estatísticas de download do npm para determinar quando é o momento certo para remover o suporte Vue2. WDYT?

cc @ndelangen

Eu fiz uma foto: https://github.com/milewski/storybook/tree/vue3 isso está basicamente funcionando para mim com o vue3 ..

no entanto, havia um bloco de código que não tenho certeza do que deveria fazer https://github.com/milewski/storybook/blob/vue3/app/vue/src/client/preview/index.ts#L41 -L58 Eu nunca usei o livro de histórias antes. Eu só queria começar a usá-lo agora com meu projeto vue3.

pelo que posso dizer https://storybook.js.org/docs/guides/guide-vue/ seguindo as instruções neste guia, obtive meu componente usando o vue 3 renderizado com sucesso ... sem aquele pedaço de código que deixei desligado ... Talvez seja necessário trabalhar com algum plugin específico? alguém pode me dizer com qual configuração / addon / plugin esse código seria útil? para que eu possa encontrar uma maneira de consertar isso e alguém possa se inspirar na minha versão e seguir corretamente os procedimentos de código para lançar um novo preset aqui?

Ótimo trabalho @milewski - super emocionante !!! 🚀

Eu descobri o que aquele código fazia .. era necessário aplicar as opções fornecidas nos botões .. eu consertei isso .. você pode experimentar, pois parece que você usa o livro de histórias há mais tempo? @ p3k

Você pode instalá-lo executando:

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

muito obrigado por seus esforços @milewski - estou apenas testando seu branch e recebi um erro ao executar 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. Ocorreu um problema com o texto datilografado. Acabei de desabilitar a verificação de ts por agora .. puxe o código mais recente do meu branch e tente novamente

sim, agora o comando foi executado sem erros.

re yarn build (select vue) i recebo a mensagem _storybook WARN build Nothing to build! _ - correto?

Não no menu interativo que aparece, você precisa pressionar a barra de espaço para selecionar

ah! desculpe, meu mal, com certeza.

agora ele construiu bem e eu posso executar o livro de histórias com meu primeiro componente vue3 - esplêndido! obrigado novamente, @milewski

@milewski Ótimo trabalho! Acabei de testar e parece funcionar.

Pelo que eu posso dizer, as únicas mudanças importantes são as importações e as coisas de createApp , certo? Talvez seja possível escrever código compatível com versões anteriores que verifica a versão vue instalada e faz a coisa certa automaticamente? Assim, poderíamos evitar ter duas versões do preset.

Tentei atualizar nossos exemplos vue, mas parece que algumas das coisas usadas lá não têm versões vue3 ainda. Geralmente ainda parece haver muitos pacotes beta e incompatíveis, então pode ser melhor esperar um pouco antes de tentar atualizar a base de código inteira do storybook, incluindo os addons, etc. etc. Haverá muito trabalho a fazer.

Pelo que eu posso dizer, as únicas grandes mudanças importantes são as importações e as coisas do createApp, certo?

sim, eu diria isso também.

das coisas que experimentei inicialmente (veja meu comentário inicial), tudo o que mantive foi a mesclagem de configuração - o push do VueLoaderPlugin não é mais necessário, graças à contribuição de @milewski, presumo: cat:

(re) inicializar o livro de histórias foi direto, conforme descrito na documentação: npm install @storybook/vue --save-dev ; eu nem precisei instalar nenhuma outra dependência de mesmo nível (pode ser porque já as instalamos em nosso projeto, de qualquer maneira).

Assim, poderíamos evitar ter duas versões do preset.

suponho que seria muito preferível, e talvez até possibilitar que as mudanças no próximo lançamento do livro de histórias ...?

em relação aos exemplos vue, talvez eu pudesse ajudar a criar versões compatíveis com vue3 de (alguns) deles? (ainda não sou um especialista em vue)

@graup

Pelo que eu posso dizer, as únicas grandes mudanças importantes são as importações e as coisas do createApp, certo? Talvez seja possível escrever código compatível com versões anteriores que verifica a versão vue instalada e faz a coisa certa automaticamente? Assim, poderíamos evitar ter duas versões do preset.

Também enfrentei problemas com a reatividade, tentei seguir a forma como a versão atual estava configurando / estendendo o objeto, mas vue3 não rastreia mais alterações nesse tipo de objeto, especialmente aqueles criados dentro da função de renderização, tive que criar referências com ref () ou reativo () para acionar atualizações.

Tentei atualizar nossos exemplos vue, mas parece que algumas das coisas usadas lá não têm versões vue3 ainda. Geralmente ainda parece haver muitos pacotes beta e incompatíveis, então pode ser melhor esperar um pouco antes de tentar atualizar a base de código inteira do storybook, incluindo os addons, etc. etc. Haverá muito trabalho a fazer.

Eu tentei usar esse como ponto de partida, mas ele tentou instalar coisas do vue2, mesmo que eu tenha definido explicitamente a versão no pacotejson ... o vue 3 não funciona se você tiver o vue-template-compiler ou o antigo carregador do vue instalado .. pode haver algumas dependências lá que estão importando esses

@ p3k

(re) inicializar o livro de histórias foi direto, conforme descrito na documentação: npm install @ storybook / vue --save-dev; eu nem precisei instalar nenhuma outra dependência de mesmo nível (pode ser porque já as instalamos em nosso projeto, de qualquer maneira).

Eu acho que isso aconteceu porque eu incluí vue3 e vue-loader ^ 16 como uma dependência do packages.json

Eu ficaria bem com um pacote @storybook/vue3 se for realmente necessário.

Para sua informação, acabei de consertar um bug de renderização principal no código do Storybook Vue2: https://github.com/storybookjs/storybook/pull/11076

Isso faz com que o "comportamento de atualização forçada" usado por addon-knobs e addon-controls para realmente forçar uma atualização. Não tenho certeza se isso tem alguma relação com o código Vue3, mas apenas para sua informação, se você estiver testando, mescle essa atualização.

Feito também aplicado na versão bifurcada!

Só para colocar meus dois centavos, parece que o vite será a ferramenta _defacto_ usada para o vue 3, assim como o vue-cli foi usado para o vue 2. Vários usuários tiveram problemas em ter que fazer todas as configurações duas vezes ao usar vue-cli com livro de histórias, um probalem @pksunkara fez um ótimo trabalho ao resolver com seu plugin de livro de histórias vue-cli. Devemos garantir que qualquer preset / pacote que configuramos funcione perfeitamente com o vite, se possível.

Edit: Acabei de perceber que isso pode ser complicado, porque Vite usa rollup sob o capô, em vez de webpack 😬

Eu acho que deveria realmente olhar para ver se o Storybook pode apenas usar o sistema de webpack / build do usuário e não precisa de sua própria configuração.

Pensamentos à parte, acho que não verifiquei o vite, mas talvez eles adaptem o sistema de plug-ins vue cli

Não pensamos ou pretendemos que o Vite se torne "o" ferramental. Um grande número de projetos precisará do poder e da flexibilidade que o webpack oferece, e o objetivo do vite não é atender a todas essas necessidades.

Então, eu não me preocuparia muito com o vite por enquanto, e certamente não com o suporte Vue3 para o livro de histórias em si.

@LinusBorg, o motivo pelo qual

Você não nos vê enfrentando um problema semelhante com o vite enquanto as pessoas tentam integrar o livro de histórias em um projeto baseado no vite?

não, realmente não. O próprio Vite é bastante básico em comparação com uma configuração Vue CLI.

O que o Vite fornece é coberto por qualquer configuração simples de Webpack que tenha regras para lidar com arquivos .vue , ts(x) e .css . E embora seja extensível, essa API é muito parecida com o metal, então não esperamos que as pessoas adicionem transformações personalizadas e outras coisas a torto e a direito.

Ele não possui uma API de plug-in extensa por design. se as pessoas precisam de magia customizada para seus projetos, é provável que precisem do Webpack de qualquer maneira, mais cedo ou mais tarde, então vá com o Vue CLI.

Vite não vê a "extensibilidade para qualquer caso de uso" como um de seus objetivos.

Então, eu diria que qualquer projeto Vite normalmente deve funcionar com storybook / vue, desde que sua configuração do webpack cubra as regras básicas que eu apresentei, o que eu acho que sim

@LinusBorg Ok, isso faz sentido. Grato pela contribuição 👍 Qualquer orientação da equipe Core Vue é sempre muito apreciada!

Obrigado pelo trabalho que todos estão colocando no livro de histórias, mal posso esperar para usá-lo no meu projeto Vue 3 :)

Uma vez que Vue3 agora está em RC , pode valer a pena reavaliar se a adição ou não do suporte Vue3 à v6 deve ser considerada.

@hollandThomas já estamos no meio do RC, então vue3 terá que vir em 6.1. Dito isso, devemos lançar os primeiros 6.1 alfas em algumas semanas, então se alguém quiser começar a montar isso, tenho certeza de que há um grande público que está ansioso por isso!

Há algum branch ativo que possamos usar ou contribuir para ajudar a preparar o suporte Vue 3?

Em nossa organização, nossa biblioteca de componentes de ui do Vue toca todos os nossos projetos Vue, então é uma das primeiras coisas que nos impede de experimentar o Vue 3, e estaríamos ansiosos para ajudar a testar ou migrar se necessário. Eu acho que outros estão no mesmo barco.

Agora também existe um guia de migração v2 -> v3 nos documentos https://v3.vuejs.org/guide/migration/introduction.html#overview

@milewski @graup @ Aaron-Pool @elevatebart estamos em 6.1-alpha agora. Alguém quer tentar um RP para isso?

@ p3k obrigado. acabei de criar com suas descrições, para mim parece funcionar, não testei tanta funcionalidade
a configuração do webpack pode ser facilmente corrigida em main.js como

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

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

    return config
  }

e o carregador pode ser para

com render.js travou um pouco como configurar em .storybook

@shilman, esta versão '6.1.0-alpha.1' é compatível com vue3?

não tenho certeza, mas parece não. ainda uma segunda versão suportada ..

Não, ainda não. Espero que alguém aqui contribua, de acordo com meu comentário acima

@shilman Ainda não tive a chance de usar o Vue 3 😞 Meu trabalho tem um prazo para o lançamento de um produto baseado no Vue 2 este mês, então não tive tempo de mexer.

Então, as tarefas são basicamente

• copiar app / vue para app / vue3
• certifique-se de modificar todas as referências do framework
• aplique as alterações feitas por @milewski em https://github.com/milewski/storybook/tree/vue3
• modificar ou criar novos exemplos de cozinhas
• experimente diferentes combinações de método de definição de componente story / vue3 e verifique se funcionam

?

@chartinger soa como o caminho mais direto para mim. se pudermos descobrir como aplicar condicionalmente essas mudanças com base na versão do vue que você está usando e manter um único pacote, isso seria ainda melhor.

Fiz experimentos de visualização em https://github.com/chartinger/storybook/tree/app-vue3 (precisava de algumas mudanças no fork acima) o que encontrei até agora:

Boa:

• Os componentes básicos do vue3 serão renderizados
• As alterações dos controles são atualizadas ao vivo

Ruim:

• Não consigo fazer com que os componentes vue decorados pela classe carreguem
• Não tenho ideia se os botões funcionam, eu queria aprender o livro de histórias com o vue3, então nenhum código de demonstração ou projetos anteriores para testar
• Sem detecção automática de atributos de controle de adereços

De outros:

• Importar o componente no StoryMeta não faz nada, tem que estar na história
• Os componentes globais agora estão vinculados à instância do aplicativo, é possível fornecê-lo ao .storybook / preview.js ou de alguma outra forma? (é necessário?)

@elevatebart Qual é o status de vue-docgen-api para vue3? ☝️

É totalmente compatível. Mas a emissão de eventos na função de configuração ainda não foi tratada.

Para isso, ainda preciso de uma maneira eficiente de entrar nas funções de configuração e detectar essas emissões.

Como as funções podem estar em vários arquivos, pode levar algum tempo.

@chartinger deseja atualizar seu branch com alguns dos experimentos? gostaria de me aprofundar no problema de "autodetecção de atributos de controle" que você encontrou e provavelmente posso pedir a alguém que examine o problema relacionado à classe.

@shilman Eu adicionei um exemplo vue3, baseado em vue-cli e migrei o exemplo de botão para composição e API de classe (chamei de anotação no código, que tem que mudar, mas servirá por enquanto). De alguma forma, os componentes da API de classe carregaram desta vez.

Para testar, não se esqueça de npm link e npm link @storybook/vue3 acordo.

Para sua informação: Acabei de publicar @andoshin11/storybook-vue3 para npm, então sinta-se à vontade para experimentar 👇

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

A propósito, o Vue 3 está oficialmente fora do beta.

PS. Obrigado por seu fork / versão do livro de histórias @ andoshin11

// editar: basta ler o tópico e bom trabalho, pessoal. Posso tentar isso :)

Ótimo trabalho, pessoal. Eu adoraria colocar isso na versão 6.1. Alguém quer assumir isso? Será uma contribuição de alto impacto. Idealmente, suportamos vue3 e vue2 no mesmo pacote, fazendo alguma autodetecção ou configuração do usuário para descobrir qual versão usar.

Escopo deste trabalho:

• [] Fazendo as mudanças necessárias para dar suporte ao vue3
• [] Adicionando testes e2e para vue3 a vue project (já temos um modelo para isso, e não deve ser muito difícil)
• [] Atualizando a documentação
• [] Estar disponível para correções de bugs e suporte conforme promovemos no pré-lançamento

Entre em contato comigo sobre nossa discussão se quiser trabalhar nisso - criei um canal temporário #vue3 para discutir! https://discord.com/invite/UUt2PJb

Há um pouco de trabalho realizado em https://github.com/storybookjs/storybook/issues/12632. Anotando aqui embaixo para que não se perca.

Como o Vue 3 saiu da versão beta e estará disponível na tag latest em alguns meses, há um ETA disponível para suporte de Vue 3 no livro de histórias?

Além disso, seria útil adicionar CHANGELOG a @storybook/vue - https://github.com/storybookjs/storybook/tree/master/app/vue , para que possamos ter uma ideia sobre o que mudou nas versões de @storybook/vue .

@palerdot, adoraria receber suporte vue3 como parte do livro de histórias 6.1. procurando alguém para contribuir com isso - você está interessado? https://github.com/storybookjs/storybook/issues/10654#issuecomment -698200547

quanto ao CHANGELOG, temos um para todo o monorepo e não é realista manter um adicional para cada framework. entretanto, considerarei fazer resumos específicos da estrutura com cada anúncio de lançamento, que é provavelmente o que você realmente deseja como usuário.

@shilman

procurando alguém para contribuir com isso - você está interessado?

Infelizmente, não poderei dedicar tempo a isso no momento (sem mencionar que não estou familiarizado com a base de código storybook ).

Vou considerar fazer resumos específicos da estrutura com cada anúncio de lançamento, que é provavelmente o que você realmente deseja como usuário.

Obrigado. Isso seria melhor. Você está certo. Como usuário, eu só quero saber qual estrutura é compatível (como Vue 3, por exemplo) com cada versão. Portanto, adicionar essa informação ao CHANGELOG principal será útil.

Acabei de mencionar um ponto de dados que eu adoraria que o Vue3 funcionasse com o livro de histórias também. Talvez alguns dos desenvolvedores de núcleo / ferramentas do Vue possam ajudar aqui, como @Akryum ?

@shilman
Acho que encontrei a solução para trabalhar o livro de histórias com vue2 e vue3. Tento fazer um POC disso se espero encontrar tempo para isso ;-). Sem promessa. ^^
Mas pensei já ter partilhado a minha ideia.
Eu encontrei o Vue Demi que parece promissor para resolver o problema de usar um pacote para vue2 e vue3.
Claro que ainda há trabalho a ser feito com a API de composição. Mas acho que com esse pacote é um passo em frente para um pacote promissor

13224 mesmo problema. @shilman devemos esperar pelo suporte do Vue 3 na próxima versão do Storybook?

Sim, espero que chegue em 6.2. ainda procurando por alguém para fazer acontecer!