Автоматическое упоминание: Привет, @ backbone87 @pocka , тебя отметили! Можете ли вы помочь здесь?

Хм .. Нам может понадобиться сделать пресет vue3

Хм .. Нам может понадобиться сделать пресет vue3

могу ли я помочь?

то, что я пробовал до сих пор (правда, только в файлах dist, расположенных в каталоге модулей узлов):

vue / dist / server / framework-preset.js

• VueLoaderPlugin теперь является экспортом vue-loader
• заменить vue-esm.js на 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 / клиент / предварительный просмотр / render.js

компонент приложения теперь создается с помощью createApp() , все настройки и т. д. должны быть применены к экземпляру

`` `diff
21c21

<var _vue = _interopRequireDefault (требуется ("vue"));

var _vue = _interopRequireDefault (требуется ("vue"). createApp);
43c43

<var root = new _vue ["по умолчанию"] ({

var root = _vue ["по умолчанию"] ({
67c67

<_vue ["по умолчанию"]. config.errorHandler = showException;

root.config.errorHandler = showException;
88c88

<корень. $ mount ('# корень');

root.mount('#root');

``

Теперь я застрял с vue/dist/client/preview/index.js потому что там требуется экземпляр приложения, например, для определения свойства extends - и это кажется возможным реализовать только с помощью правильной сборки сборника рассказов ...

Надеюсь, эти детские шаги пригодятся.

Всем привет! Похоже, что в последнее время в этом вопросе не так много происходило. Если все еще есть вопросы, комментарии или ошибки, пожалуйста, продолжайте обсуждение. К сожалению, у нас нет времени разбираться в каждой проблеме. Мы всегда открыты для предложений, поэтому, если вы хотите помочь, отправьте нам запрос на перенос. Неактивные вопросы будут закрыты через 30 дней. Благодаря!

удар

@pksunkara @graup @ Аарон-Пул, есть ли у кого-нибудь время

Нам все равно потребуется поддерживать Vue2 в течение некоторого времени после выпуска Vue3. Одна вещь, которую нам нужно проверить, - это то, можем ли мы каким-то образом поддерживать их обоих одновременно.

Также учитывая, что Vue3 еще не вышел из бета-версии, и предполагая, что мы хотим выпустить сборник рассказов v6, я бы отложил поддержку vue3 до выпуска v6.

Я планирую в ближайшее время это рассмотреть, но не могу назвать расчетное время прибытия. Еще не было возможности попробовать Vue 3.

Я согласен с @pksunkara, что для 6.0 это не срочно, так как это все еще бета.

Спасибо @graup. Я также согласен, что это не срочно - мы не должны ожидать поддержки невыпущенного программного обеспечения в Storybook. Меня беспокоит только то, что, например, мы выпускаем 6.0 в июле, Vue3 запускаем в августе, мы идем на его поддержку в сентябре и обнаруживаем, что требуется критическое изменение. И мы не сможем получить это критическое изменение без повышения основной версии в октябре, которое должно произойти в июне 2021 года.

Я просто пытался пролить свет на канал Discord прямо сейчас о том, как мне попытаться заставить его работать с Vue 3, для этого потребуется новый пресет, поскольку логика для начальной загрузки фреймворка немного другая .. Я не думаю, что текущий код в папке vue будет работать с vue 3 ..

Я понимаю @shilman. Позвольте мне уточнить немного больше, поскольку, похоже, я неправильно понял свою точку зрения.

Насколько я понимаю из попыток @ p3k и комментария @milewski , нам не только нужен новый пресет, но также необходимо внести критические изменения в пакет @storybook/vue .

Но нам все равно нужно будет поддерживать Vue v2 в течение некоторого времени, не все будут переходить на Vue v3. Итак, если мы не хотим сказать, что Vue v2 больше не поддерживается, было бы лучше, если бы мы создали новый пакет @storybook/vue3 .

Но если мы решим прекратить поддержку Vue v2, то да, я согласен, что, вероятно, нам следует внести критические изменения до Storybook v6.

@pksunkara Предлагаемое

Я не думаю, что мы сможем прекратить поддержку vue2 в ближайшее время, поэтому мы хотели бы запускать эти два пакета параллельно и, возможно, сделать полное сокращение в каком-нибудь будущем крупном выпуске (7.0? 8.0? Никогда?). После выпуска двух пакетов мы можем использовать статистику загрузок npm, чтобы определить, когда настало время удалить поддержку Vue2. WDYT?

cc @ndelangen

Я попробовал: https://github.com/milewski/storybook/tree/vue3, это, по сути, работает для меня с vue3 ..

однако был блок кода, в котором я не уверен, что он должен был делать https://github.com/milewski/storybook/blob/vue3/app/vue/src/client/preview/index.ts#L41 -L58 Я никогда раньше не использовал сборник рассказов .. Я просто хотел начать использовать его сейчас в моем проекте vue3 ..

насколько я могу судить https://storybook.js.org/docs/guides/guide-vue/, следуя инструкциям в этом руководстве, я получил свой компонент, использующий vue 3, успешно обработанный ... без того фрагмента кода, который я оставил офф ... Может, это нужно для работы с каким-то конкретным плагином? может кто-нибудь сказать мне, с какой конфигурацией / аддоном / плагином будет полезен этот код? так что я могу найти способ исправить это, и кто-то может вдохновиться моей версией и правильно следовать процедурам кода, чтобы выпустить здесь новый пресет?

Отличная работа @milewski - супер захватывающе !!! 🚀

Я выяснил, что делает этот код ... необходимо было применить параметры, заданные с помощью ручек ... я исправил это ... вы можете попробовать, поскольку кажется, что вы используете сборник рассказов дольше? @ p3k

Вы можете установить его, запустив:

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

Большое спасибо за ваши усилия 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.

Гм. Возникла проблема с машинописным текстом. Я просто отключил проверку ts на данный момент ... возьмите последний код из моей ветки и попробуйте снова

да, теперь команда прошла без ошибок.

re yarn build (select vue) я получаю сообщение _storybook WARN build Нечего строить! _ - это правильно?

Нет, в появившемся интерактивном меню вам нужно нажать пробел, чтобы выбрать

ах! извините моя плохая, конечно.

Теперь он построен отлично, и я могу запустить сборник рассказов с моим первым компонентом vue3 - великолепно! еще раз спасибо, @milewski

@milewski Отличная работа! Только что протестировал и вроде работает.

Насколько я могу судить, единственные серьезные критические изменения - это импорт и прочее createApp , верно? Может быть, можно написать обратно совместимый код, который проверяет установленную версию vue и автоматически делает правильные вещи? Тогда мы могли бы избежать двух версий пресета.

Я попытался обновить наши примеры vue, но похоже, что некоторые из используемых там вещей еще не имеют версий vue3. Как правило, все еще кажется, что существует много бета-версий и несовпадающих пакетов, поэтому, возможно, лучше немного подождать, прежде чем пытаться обновить всю кодовую базу сборника рассказов, включая надстройки и т.д.

Насколько я могу судить, единственные серьезные критические изменения - это импорт и материал createApp, верно?

да, я бы тоже так сказал.

из того, что я изначально пробовал (см. мой первоначальный комментарий), все, что я сохранил, это слияние конфигурации - толчок VueLoaderPlugin больше не нужен, благодаря вкладу @ milewski, я предполагаю:

(повторная) инициализация сборника рассказов была простой, как описано в документации: npm install @storybook/vue --save-dev ; Мне даже не нужно было устанавливать какие-либо другие одноранговые зависимости (в любом случае, это может быть связано с тем, что мы уже устанавливаем их для нашего проекта).

Тогда мы могли бы избежать двух версий пресета.

я полагаю, что это было бы очень предпочтительно, и, возможно, даже сделало бы возможным внесение изменений в следующий выпуск сборника рассказов…?

Что касается примеров vue, может быть, я мог бы помочь создать vue3-совместимые версии (некоторых из них)? (Впрочем, я еще не эксперт по vue.)

@graup

Насколько я могу судить, единственные серьезные критические изменения - это импорт и материал createApp, верно? Может быть, можно написать обратно совместимый код, который проверяет установленную версию vue и автоматически делает правильные вещи? Тогда мы могли бы избежать двух версий пресета.

У меня тоже возникли проблемы с реактивностью, я пытался следить за тем, как текущая версия устанавливала / расширяла объект, но vue3 больше не отслеживает изменения в этом типе объектов, особенно тех, которые созданы внутри функции рендеринга, мне пришлось создавать ссылки с ref () или reactive (), чтобы он запускал обновления.

Я попытался обновить наши примеры vue, но похоже, что некоторые из используемых там вещей еще не имеют версий vue3. Как правило, все еще кажется, что существует много бета-версий и несовпадающих пакетов, поэтому, возможно, лучше немного подождать, прежде чем пытаться обновить всю кодовую базу сборника рассказов, включая надстройки и т.д.

Я попытался использовать его в качестве отправной точки, но он попытался установить материал vue2, даже если я явно установил версию в пакете json ... vue 3 вообще не работает, если у вас установлен vue-template-compiler или старый загрузчик vue .. там могут быть некоторые зависимости, которые импортируют thoses

@ p3k

(повторная) инициализация сборника рассказов была простой, как описано в документации: npm install @ storybook / vue --save-dev; Мне даже не нужно было устанавливать какие-либо другие одноранговые зависимости (в любом случае, это может быть связано с тем, что мы уже устанавливаем их для нашего проекта).

Я думаю, это произошло потому, что я включил vue3 и vue-loader ^ 16 как зависимость от packages.json

Я был бы в порядке с пакетом @storybook/vue3 , если это действительно необходимо.

К вашему сведению, я только что исправил основную ошибку рендеринга в коде Storybook Vue2: https://github.com/storybookjs/storybook/pull/11076

Это вызывает "поведение принудительного обновления", используемое addon-knobs и addon-controls для фактического принудительного обновления. Я не уверен, имеет ли это какое-либо отношение к коду Vue3, но просто к сведению, если вы тестируете, пожалуйста, слейте это обновление.

Сделано применимо и к разветвленной версии!

Просто чтобы вложить мои два цента, похоже, что vite будет _defacto_ инструментом, используемым для vue 3, так же, как vue-cli использовался для vue 2. У нас были проблемы с тем, что у нескольких пользователей возникали проблемы с необходимостью выполнять всю настройку конфигурации дважды при использовании vue-cli со сборником рассказов, проблема @pksunkara отлично

Изменить: я только что понял, что это может быть сложно, потому что Vite использует свертку под капотом, а не веб-пакет 😬

Я думаю, мне действительно стоит посмотреть, может ли Storybook просто использовать систему веб-пакетов / сборки пользователей и вообще не нуждаться в собственной конфигурации.

Помимо мыслей, я думаю, что не проверял vite, но, возможно, они адаптируют систему плагинов vue cli

Мы не думаем и не стремимся к тому, чтобы Vite стал «инструментом». Большое количество проектов потребуют мощности и гибкости, которые предоставляет webpack, и цель vite не состоит в том, чтобы удовлетворить все эти потребности.

Так что сейчас я бы не стал особо беспокоиться о vite, и уж тем более о поддержке Vue3 самого сборника рассказов.

@LinusBorg, причина, по которой я специально

Разве вы не видите, что мы сталкиваемся с аналогичной проблемой с vite, когда люди пытаются интегрировать сборник рассказов в проект, основанный на vite?

не на самом деле нет. Сам Vite довольно прост по сравнению с настройкой Vue CLI.

То, что предоставляет Vite, покрывается любой простой конфигурацией Webpack, в которой есть правила для обработки файлов .vue , ts(x) и .css . И в то время как он является расширяемым, что API довольно близко к металлу , поэтому мы не ожидаем , что людей добавляющих пользовательских преобразований и вещей влево и вправо.

Он не имеет обширного API плагина по дизайну. Если людям нужна необычная магия для своих проектов, скорее всего, Webpack им понадобится раньше, чем позже, поэтому используйте Vue CLI.

Vite не считает «расширяемость для любого варианта использования» одной из своих целей.

Поэтому я бы сказал, что любой проект Vite обычно должен работать с Storybook / vue, если его конфигурация webpack охватывает основные правила, которые я изложил, что, я думаю, так и есть.

@LinusBorg Хорошо, в этом есть смысл. Спасибо за вклад 👍 Мы всегда очень ценим любые рекомендации от команды Core Vue!

Спасибо за работу, которую каждый вкладывает в сборник рассказов, не могу дождаться, чтобы использовать его для моего проекта Vue 3 :)

Поскольку Vue3 сейчас находится в RC , возможно, стоит переоценить, следует ли рассматривать добавление поддержки Vue3 в v6.

@hollandThomas, мы уже в середине RC, поэтому vue3 должен появиться в 6.1. Тем не менее, мы должны выпустить первые версии 6.1 альфа через несколько недель, так что если кто-то захочет начать собирать это вместе, я уверен, что есть большая аудитория, которая жаждет этого!

Есть ли какие-либо активные ветки, которые мы можем использовать или внести свой вклад, чтобы подготовить поддержку Vue 3?

В нашей организации библиотека компонентов пользовательского интерфейса Vue затрагивает все наши проекты Vue, поэтому это одна из первых вещей, которые мешают нам попробовать Vue 3, и мы были бы готовы помочь в тестировании или миграции, если это необходимо. Я предполагаю, что другие находятся в той же лодке.

Также теперь в документации https://v3.vuejs.org/guide/migration/introduction.html#overview есть руководство по миграции с версии 2 на версию 3.

@milewski @graup @ Aaron-Pool @elevatebart сейчас мы находимся в

@ p3k спасибо. только что создан с вашими описаниями, на мой взгляд, работа, столько функциональности не тестировал
Конфигурацию webpack можно легко исправить в main.js, например

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

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

    return config
  }

и загрузчик может быть

с render.js немного застрял, как настроить в .storybook

@shilman совместима ли эта версия 6.1.0-alpha.1 с vue3?

не уверен, но похоже, что нет. еще поддерживается вторая версия ..

Нет еще нет. Я надеюсь, что кто-то здесь внесет свой вклад в мой комментарий выше

@shilman У меня еще не было возможности использовать Vue 3 😞 У моей работы есть крайний срок для выпуска продукта на основе Vue 2 в этом месяце, так что у меня не было времени баловаться.

Итак, задачи в основном

• скопируйте приложение / vue в приложение / vue3
• не забудьте изменить все ссылки на фреймворк
• применить изменения, сделанные @milewski в https://github.com/milewski/storybook/tree/vue3
• изменить или создать новые примеры кухонных раковин
• попробуйте разные комбинации методов определения компонентов story / vue3 и проверьте, работают ли они

?

@chartinger кажется мне самым прямым путем. если бы мы могли выяснить, как условно применить эти изменения в зависимости от версии vue, которую вы используете, и поддерживать единый пакет, это было бы еще лучше.

Я провел эксперименты с просмотром в https://github.com/chartinger/storybook/tree/app-vue3 (потребовались некоторые изменения из приведенной выше вилки), что я нашел до сих пор:

Хорошо:

• Основные компоненты vue3 будут отображать
• Изменения из элементов управления обновляются в реальном времени

Плохо:

• Кажется, не удается загрузить компоненты vue, украшенные классом
• Не знаю, работают ли ручки, я хотел изучить сборник рассказов с vue3, поэтому нет демонстрационного кода или прошлых проектов для тестирования
• Нет автоматического определения атрибутов управления из реквизита

Разное:

• Импорт компонента в StoryMeta ничего не делает, он должен быть в Story
• Теперь глобальные компоненты привязаны к экземпляру приложения. Можно ли передать его в .storybook / preview.js или каким-либо другим способом? (это нужно?)

@elevatebart Каков статус vue-docgen-api для vue3? ☝️

Он полностью совместим. Но генерация событий в функции настройки еще не обработана.

Для этого мне все еще нужен эффективный способ ввода функций настройки и обнаружения этих излучений.

Поскольку функции могут находиться в нескольких файлах, это может занять некоторое время.

@chartinger хотите обновить свою ветку некоторыми экспериментами? Я хотел бы покопаться в проблеме "автоматического определения атрибутов управления", которую вы нашли, и, вероятно, смогу заставить кого-нибудь взглянуть на проблему с декорированием классов.

@shilman Я добавил пример vue3, основанный на vue-

Для тестирования не забудьте npm link и npm link @storybook/vue3 соответственно.

К вашему сведению: я только что опубликовал @andoshin11/storybook-vue3 в npm, так что не стесняйтесь попробовать 👇

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

Кстати, Vue 3 официально вышел из бета-версии.

PS. Спасибо за вилку / версию сборника рассказов @ andoshin11

// редактировать: просто прочтите ветку и молодцы, ребята, я могу попробовать :)

Отличная работа всем. Я бы с удовольствием включил это в версию 6.1. Кто-нибудь хочет взяться за это? Это будет очень важный вклад. В идеале мы поддерживаем vue3 и vue2 в одном пакете, выполняя автоматическое определение или настраивая пользователя, чтобы выяснить, какую версию использовать.

Объем этой работы:

• [] Внесение необходимых изменений для поддержки vue3
• [] Добавление тестов e2e для vue3 проекта vue (у нас уже есть шаблон для этого, и это не должно быть слишком сложно)
• [] Обновление документации
• [] Доступны для исправления ошибок и поддержки, поскольку мы продвигаем это в предварительном выпуске

Пожалуйста, свяжитесь со мной по поводу разногласий, если вы хотите поработать над этим - я создал канал #vue3 temp для обсуждения! https://discord.com/invite/UUt2PJb

На https://github.com/storybookjs/storybook/issues/12632 проделана небольшая работа

Поскольку Vue 3 находится вне стадии бета-тестирования и будет доступен в теге latest через пару месяцев, есть ли в сборнике рассказов ETA для поддержки Vue 3 ?

Кроме того, было бы полезно добавить CHANGELOG к @storybook/vue - https://github.com/storybookjs/storybook/tree/master/app/vue , чтобы мы могли получить представление о том, что изменилось в версиях @storybook/vue .

@palerdot, я бы хотел получить поддержку vue3 как часть сборника рассказов 6.1. ищу кого-нибудь, кто внесет свой вклад в это - вам интересно? https://github.com/storybookjs/storybook/issues/10654#issuecomment -698200547

Что касается CHANGELOG, у нас есть один для всего монорепозитория, и нереально поддерживать по одному для каждого фреймворка. тем не менее, я подумаю над составлением сводок для каждой платформы с объявлением о выпуске, что, вероятно, именно то, что вы действительно хотите как пользователь.

@shilman

ищу кого-нибудь, кто внесет свой вклад в это - вам интересно?

К сожалению, в настоящее время я не смогу уделить этому время (не говоря уже о том, что я не так хорошо знаком с storybook codebase).

Я подумаю над составлением сводок по фреймворку с каждым объявлением о выпуске, что, вероятно, именно то, что вы действительно хотите как пользователь.

Спасибо. Это было бы лучше. Ты прав. Как пользователь я просто хочу знать, какой фреймворк поддерживается (например, Vue 3) с каждым выпуском. Так что добавление этой информации в основной CHANGELOG будет полезным.

Просто отбросив точку данных, я бы хотел, чтобы Vue3 также работал со сборником рассказов. Может быть, здесь могут помочь некоторые из разработчиков ядра / инструментов Vue, например @Akryum ?

@shilman
Думаю, я нашел решение для работы со сборником рассказов с vue2 и vue3. Я пытаюсь сделать из этого POC, если надеюсь, что найду для этого время ;-). Никакого обещания. ^^
Но я думал, что уже разделяю свою идею.
Я нашел Vue Demi, который обещает решить проблему использования одного пакета для vue2 и vue3.
Конечно, с api композиции еще предстоит проделать работу. Но я думаю, что с этим пакетом это еще один шаг вперед к многообещающему пакету.

13224 такая же проблема. @shilman, стоит ли ждать поддержки Vue 3 в следующей версии Storybook?

Да, надеюсь, он появится в 6.2. все еще ищу кого-нибудь, чтобы это произошло!