Storybook: Поддержка Angular 2

Мы сделали наш основной интерфейс в отдельном приложении. Мы планируем использовать его напрямую для NG2. См .: https://github.com/kadirahq/storybook-ui

Круто. С нетерпением жду этого! :)

Привет, @arunoda , так какой подход будет для этого?
Хотим ли мы создать пользовательский интерфейс сборника рассказов ng2? Просто интересно получить подробное описание того, чего вы, ребята, хотите достичь, и посмотреть, смогу ли я помочь

API-интерфейсы Angular 2 стали стабильными с выпуском RC5. Никаких критических изменений сейчас не будет. Так что сейчас хорошее время, чтобы начать его разработку. Копия: @arunoda @mnmtanish

@arunoda : Я склонен думать, что этого мало в дорожной карте, но поэтому в случае Angular в этом разделении идея будет заключаться в теоретическом ng2-storybook чтобы позволить storybook-ui React тогда интерфейс встраивает компоненты Angular? Это было сделано?

@ tycho01 Вы правы. Это как бы низкий приоритет для нас.
Я надеюсь, что мы могли бы начать с Storybook-ui в качестве основы. Таким образом, большинство аддонов могут это использовать.
Я ищу помощь, чтобы кто-нибудь начал над этим работать. Если да, напишите мне в Slack. Давайте поговорим подробнее.

@ tycho01 , @arunoda , ребята, дайте мне знать, если вы начнете над этим работать.

@alterx : Указатели, которые я получил: storybook-react отделен от storybook-ui (выполняется внутри iframe); Следующий шаг - поэкспериментировать, чтобы увидеть, можно ли заменить его версией Angular. Не запускались с моей последней попытки.

Проверить это - https://twitter.com/amcdnl/status/804776546246520832

@ tycho01 , я проверил источник, и у них есть полностью отдельный компонент реакции, который в основном представляет собой прославленный iframe (https://github.com/storybooks/react-storybook/blob/master/src/client/manager/preview.js). Мы должны иметь возможность загружать истории ng2 в этот предварительный iframe.

react-storybook основном расширяет Provider предоставленный storybook-ui , отображает вышеупомянутый Preview и обрабатывает api истории. Затем новый экземпляр этого поставщика передается renderStorybookUI

import renderStorybookUI from '@kadira/storybook-ui';
import Provider from './provider';

const rootEl = document.getElementById('root');
renderStorybookUI(rootEl, new Provider());

После этого storybook-ui контролирует, он строит контекст (который включает поставщика) и создает приложение (используя createApp mantra-core). Затем поставщик (вместе с другими контекстными реквизитами) вводится в модуль ui (https://github.com/storybooks/storybook-ui/blob/master/src/modules/ui/routes.js ), который создает предварительный просмотр с использованием метода renderPreview определенного при его создании в react-storybook

@arunoda , дайте мне знать, если я что-то

@amcdnl , это выглядит многообещающе. Не могли бы вы дать мне краткий обзор того, как это работает? (ничего особенного, просто общая картина)

@amcdnl : спасибо за
Изменить: возможно, у вас есть демо-версия? Мне не удается найти что-нибудь готовое к запуску.

@MikeRyan52 ^^

@alterx Ага. Вы правы на 100%.
Нам также необходимо предоставить API, похожий на React Storybook, для создания историй.

Возможно импортировано из angular-storybook или аналогичного.

@arunoda У вас есть URL-адрес

@bcowgill afaik этого еще не существует, за исключением упомянутого выше @amcdnl

Также есть это сейчас - http://www.angularplayground.it/

Сейчас это на дорожной карте:
https://github.com/storybooks/storybook/blob/master/ROADMAP.md#angular

Так что Storybook for Vue скоро будет выпущен 🎉

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

Я могу взглянуть, есть ли у вас под рукой URL-адрес репо, @ndelangen ?

Вы смотрите на это

Storybook - это монорепозиторий, у нас есть пакеты, которые публикуются в npm отдельно.

В настоящее время приложение vue еще не является основным, поэтому вот 3 ссылки, чтобы начать работу:
https://github.com/storybooks/storybook/tree/release/3.2/app/vue
https://github.com/storybooks/storybook/blob/release/3.2/app/vue/src/client/preview/render.js
https://github.com/storybooks/storybook/blob/release/3.2/app/vue/src/server/config/webpack.config.js#L40

В render.js находится большая часть кода, специфичного для Vue, а в серверной части есть другая конфигурация webpack.

Поначалу копировать много кода - это нормально! Мы вернемся к этому позже. После того, как мы найдем, что действительно распространено, а что нет.

Для начала я бы сказал

1. дублируйте целиком app / vue в app / angular (мы говорим об angular2 и выше, верно?)
2. настроить конфигурацию веб-пакета, чтобы он загружал код некоторого углового материала и компилировался.
3. настраивайте render.js, пока что-нибудь не появится, желательно тот компонент, который вы ожидали
4. Попробуйте некоторые дополнения
5. Исправить ошибки
6. Попробуйте то, что теперь возможно
7. Напишите документацию, перечислите, какие аддоны работают
8. Черновик сообщения в блоге (я могу это сделать, или добавлю ваш аккаунт в нашу публикацию в среднем)
9. Выпуск плана
10. Сделать альфа-релиз
11. Исправить ошибки
12. Актуальный выпуск, публикация поста в блоге, твит-анонс
13. Исправить больше ошибок
14. Попробуйте добавить поддержку дополнительных дополнений

@shilman - наш шеф-повар релиза

Вы можете присоединиться к нам на Slack, чтобы получить немного более быстрый чат, чем на github 💬

https://storybooks-slackin.herokuapp.com

Отлично, @ndelangen!
Я посмотрю код и присоединюсь к каналу Slack: D

@alterx Вы сейчас над этим работаете? Я клонирую версию vue.js сейчас

@ Jordan-Hall, там уже есть пиар с работающим базовым приложением.
Пожалуйста, обратитесь к # 1474
В настоящее время я проверяю надстройки, чтобы увидеть, какие из них работают из коробки. Не могли бы вы присоединиться к каналу Slack, чтобы мы могли координировать свои действия?

@alterx Конечно. Какой канал https://storybooks-slackin.herokuapp.com не работает?

Ого, это должно быть так 🤔
Может быть, @ndelangen поможет с этим.
На данный момент мой PR охватывает базовую работу (рендеринг компонента, отправка входных данных). Это немного отличается от того, что делали другие с vue и react но способ работы angular ( NgModules ) потребовал некоторых изменений.

Мы стремимся включить поддержку Angular (2+) в выпуск 3.3.

Да, героку решил закрыть приложение, поэтому я просто развернул его на now.sh:
https://now-examples-slackin-nqnzoygycp.now.sh/

¯\_(ツ)_/¯

Я не понимаю, почему люди просто не используют gitter для таких проектов xD

Привет, ребята, просто хотели посмотреть, активно ли кто-нибудь еще работает над этим?

Да, работа продолжается:
https://github.com/storybooks/storybook/pull/1474

Ага, мне нужно найти время сегодня, чтобы внести некоторые изменения в моем компьютере. Наверное, сделаю это во время обеда 😄

Поздравляю со слиянием!
Могу ли я npm i -g @storybook/[email protected] и попробовать это, или для игры требуется ручная настройка?

Хотел бы помочь проверить это и внести свой вклад 👍

@shilman @alterx У меня сложилось впечатление, что с помощью приложения
Похоже, что это еще не так?

Как скоро мы сможем сделать 1? @tomatosource готов провести для нас тестирование 🙇

@shilman упомянул, что хотел бы выпустить его "в ближайшие несколько дней" на канале

любые обновления? :-)

Собственно да =) https://github.com/storybooks/storybook/releases/tag/v3.3.0-alpha.3

@Hypnosphi, как это установить? Неподдерживаемый тип проекта. (код: НЕ ОБНАРУЖЕН)

@aaronksaunders У вас есть репо, которым вы можете поделиться с нами, чтобы помочь нам отладить интерфейс командной строки? Также, если вы хотите сделать это вручную, здесь есть пример приложения с полной настройкой: https://github.com/storybooks/storybook/tree/release/3.3/examples/angular-cli

@alterx @tomatosource Приносим извинения за задержку с выпуском - сейчас он вышел, и мы будем рады вашей помощи в тестировании!

какую версию angular он поддерживает?

@ToniaDemchuk связанные:
https://github.com/storybooks/storybook/pull/1474#issuecomment -329659825
https://github.com/storybooks/storybook/pull/1474#issuecomment -335527228

@Insayt @ LTiger14 @MTariqAziz @MathieuFouillet @Quramy @RemiAWE @VadimDez @aitboudad @bermanboris @cheapsteak @ Христианско-bromann @diagramatics @dlcardozo @ Elad-morphisec @jbueza @johannesjo @jshthornton @ justinlee0777 @mixn @ npatta01 @qrrock @realappie @ruedap @ крошечный танцор @ tycho01 @ priley86

Поддержка Angular2 + находится в альфа-версии ( 3.3.0-alpha.4 если быть точным) благодаря титаническим усилиям

Вот как начать работу всего за минуту:

cd my-angular-project
yarn add @storybook/cli<strong i="33">@alpha</strong>
yarn getstorybook
yarn storybook
open http://localhost:6006

Вот как выглядит сборник рассказов examples/angular-cli из нашего репозитория, и вы должны увидеть урезанную версию в своем браузере:

Пожалуйста, попробуйте и дайте нам знать здесь, если у вас возникнут проблемы. Вы также можете присоединиться к нам в канале Slack #angular Storybook для получения помощи в реальном времени.

Большое спасибо за вашу помощь!

@shilman при запуске yarn getstorybook выдает следующую ошибку:

(function (exports, require, module, __filename, __dirname) { import updateNotifier from 'update-notifier';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)

изменение файла node_modules/@storybook/cli/bin/index.js:1 решит проблему:

require("babel-register")({
  ignore: /node_modules\/(?!@storybook)/
});

Странно, но на самом деле мы используем babel-register в cli@alpha

@aitboudad какую версию узла вы используете?

какую версию узла вы используете?

v8.9.0, это не связано с версией узла, а связано с babel, который игнорирует транспиляцию всех файлов, расположенных в node_modules

@shilman второй выпуск, который у меня есть, это

odule build failed: Error: Typescript emitted no output for node_modules/@storybook/angular/dist/client/preview/angular/app.token.ts.

решается установкой transpileOnly в true в /node_modules/@storybook/angular/dist/server/config/webpack.config.js

{
  test: /\.ts?$/,
  use: [
    {
      loader: 'ts-loader',
      options: {
        transpileOnly: true
      }
    },
    { loader: 'angular2-template-loader' }
  ]
}

Отсутствующая функция:

Передача пользовательского NgModule :
Прямо сейчас нет возможности передать пользовательский модуль NgModule, который сильно ограничивает текущую реализацию.

это про babel, который игнорирует транспиляцию всех файлов, расположенных в node_modules

Понятно, исправлю. Интересно, как это раньше работало

@aitboudad Большое спасибо за отладку! @Hypnosphi исправил проблему с интерфейсом командной строки, и я только что ее выпустил. Постараюсь в ближайшее время получить исправления angular!

https://github.com/storybooks/storybook/releases/tag/v3.3.0-alpha.4

@aitboudad , мы знаем об этой недостающей функции и пытаемся восполнить ее. Проблема с пользовательскими модулями NgModules заключается в том, что в нашей текущей реализации мы программно создаем наши модули и предоставляем их. У меня есть некоторые изменения в моем локальном хранилище, чтобы разрешить передачу поставщиков и схем, но сейчас мы не можем просто разрешить передачу настраиваемых модулей, поскольку модуль потенциально может содержать несколько компонентов.

Каков ваш конкретный вариант использования? Может, мы что-нибудь придумаем.

Кроме того, использование только транспиле оставит вас без проверки типа. Нам необходимо изучить это, прежде чем вносить изменения.

@alterx Каков ваш конкретный вариант использования?

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

В этом случае должно хватить поставщиков, импорта и схем (в случае необходимости, idk, пользовательских элементов). Проблема с включением настраиваемого модуля заключается в том, что мы не можем контролировать количество компонентов, которые может отправить пользователь, и это потенциально может сломаться. Storybook - это разработка и тестирование компонента как отдельных единиц. Это работает немного по-другому в React и Vue, но для angular нам нужно сделать некоторые предположения и ограничить область действия.

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

@aitboudad Я попытался воспроизвести вашу проблему с помощью недавно созданного приложения @angular/cli и getstorybook но все работает должным образом. Не могли бы вы подробнее рассказать о своей настройке? Угловая версия? Версия TypeScript?
Но я не смогу сразу это проверить.

@alterx только что попробовал еще раз, и, похоже, он отлично работает с новой альфа-версией, спасибо!

Ой, отлично!
И будьте уверены, у нас есть планы по поддержке некоторого способа предоставления импорта, поставщиков и так далее для создаваемого модуля. Нам просто нужно разобраться :)

Просто попытался запустить storybook / examples / angular-cli со следующими версиями пакетов:

  "dependencies": {
    "@angular/animations": "4.3.5",
    "@angular/common": "4.3.5",
    "@angular/compiler": "4.3.5",
    "@angular/core": "4.3.5",
    "@angular/forms": "4.3.5",
    "@angular/http": "4.3.5",
    "@angular/platform-browser": "4.3.5",
    "@angular/platform-browser-dynamic": "4.3.5",
    "@angular/router": "4.3.5",
    "core-js": "2.4.1",
    "rxjs": "5.4.3",
    "zone.js": "0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "4.3.5",
    "@angular/language-service": "4.3.5",
    "@storybook/addon-actions": "3.3.0-alpha.4",
    "@storybook/addon-links": "3.3.0-alpha.4",
    "@storybook/addon-notes": "3.3.0-alpha.4",
    "@storybook/addon-knobs": "3.3.0-alpha.4",
    "@storybook/addons": "3.3.0-alpha.4",
    "@storybook/angular": "3.3.0-alpha.4",
    "@types/jasmine": "2.5.53",
    "@types/node": "6.0.87",
    "codelyzer": "3.1.2",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.1",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "0.2.3",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-trx-reporter": "0.2.9",
    "protractor": "5.2.0",
    "ts-node": "3.2.0",
    "tslint": "5.6.0",
    "typescript": "2.4.0"
  }

Он вылетает в консоли браузера после перехода к компонентам _Addon Knobs_ с ошибкой при попытке получить component.__annotations__[0] :

helpers.js:32 Uncaught TypeError: Cannot read property '0' of undefined
    at getComponentMetadata (helpers.js:32)
    at prepareComponent (helpers.js:140)
    at index.js:33
    at withKnobs (index.js:48)
    at client_api.js:109
    at initModule (helpers.ts:87)
    at helpers.ts:167
    at later (helpers.ts:27)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:191)

@ToniaDemchuk Большое спасибо за тестирование. Как вы настроили его на своей машине? Можете поделиться репродукцией? Большое спасибо!

Привет, ребята, невероятно приятно, как легко это было добавить. Несколько вопросов.

Мне также пришлось добавить "@storybook/addon-notes": "3.3.0-alpha.4", в package.json.

Есть ли способ уважать мои локальные пути машинописного текста? Они определены в tsconfig.
репо: https://github.com/scttcper/ngx-color
Я получаю Cannot find module 'ngx-color/helpers'. потому что он их не забирает.

@shilman Пример вы можете найти здесь https://github.com/ToniaDemchuk/storybook/tree/angular-4.3.5-sample
Команды настройки:

npm i
npm i -g @storybook/cli
npm run storybook

Откройте localhost:9009 в браузере и перейдите к _Addon Knobs> Simple_ в меню

Это сработало:

Этого не произошло:

Ошибка в консоли:

@neo , пробовал воспроизвести, но у меня все нормально работает. Не могли бы вы поделиться дополнительным контекстом? Может у вас репо?

@shilman , @alterx , Что касается проблемы с angular v4.3.5 ( @ToniaDemchuk ), я исследовал проблему (я не очень знаком с angular, поэтому ...) В дополнении knobs есть код, который полагается на тот факт, что объект-компонент имеет массив annotations . Этот массив устанавливается пакетом angular/core в новой версии. Но в предыдущей версии (в данном случае v4.3.5) они использовали пакет reflect-metadata (вот разница, где он был удален). Я действительно не знаю, что с этим делать.

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

В сб, 9 декабря 2017 г., 11:41 Игорь [email protected] написал:

@shilman https://github.com/shilman , @alterx
https://github.com/alterx , по поводу проблемы с angular v4.3.5 (
@ToniaDemchuk https://github.com/toniademchuk ), я исследовал
проблема (я не очень знаком с angular, поэтому ...) В дополнении knobs,
есть код, который полагается на то, что объект-компонент имеет
массив аннотаций на нем. Этот массив устанавливается пакетом angular / core в
новая версия. Но в предыдущей версии (в данном случае v4.3.5) они использовали
пакет отражений-метаданных (вот разница
https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d#diff-635fe23be5795132e3385c8f4899dc3aR58
где его сняли). Я действительно не знаю, что с этим делать.

-
Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/storybooks/storybook/issues/269#issuecomment-350492916 ,
или отключить поток
https://github.com/notifications/unsubscribe-auth/ABhRmCjzdKQq2NNVYU7UTc-NVmvd8a9Tks5s-sZEgaJpZM4I70nl
.

@aitboudad , вот PR для поддержки метаданных настраиваемого модуля.
Пока что я добавил примеры для каналов и служб. Мне нужно протестировать директивы, схемы и т. Д., Но они тоже должны работать.

Дайте мне знать, что вы думаете

@ToniaDemchuk , не могли бы вы еще раз проверить с новыми изменениями?

Я только что выпустил 3.3.0-alpha.6, содержащий кучу изменений Angular из @alterx @ igor-dv @ralzinov

https://github.com/storybooks/storybook/releases/tag/v3.3.0-alpha.6

Соответствующие изменения Angular включают:

• Добавлена ​​аннотация типа для помощников, добавлены файлы объявлений ts для angu… # 2459
• Добавление дополнительных метаданных в модуль / компоненты # 2526
• Исправить переопределение вывода ng component prop # 2456
• [WIP] Поддержка версий Angular # 2467
• Angular Опора для добавления пользовательских каналов # 2518

Попробуйте обновить свои проекты до этой версии и сообщите нам, если у вас возникнут какие-либо проблемы. Я надеюсь, что это будет последний релиз RC, и к завтрашнему дню мы сможем выпустить полноценный релиз 3.3!

@alterx это именно то, что я ищу, спасибо!

было бы неплохо, если бы мы могли предоставить содержимое шаблона вместо компонента:

storiesOf('Welcome', module).add('to Storybook', () => ({
  moduleMetadata: { imports: [FormModule] },
  template: '<dynamic-forms [form]="form"></dynamic-forms>',
  props: {
    form: [{ key: name }]
  },
}));

@shilman for 3.3.0-alpha.6 мне нравится, единственная проблема, которую я заметил, это то, что аддоны не включены в пакет, например @storybook/angular , решается

yarn add @storybook/addon-actions<strong i="14">@alpha</strong> @storybook/addon-links<strong i="15">@alpha</strong> @storybook/addon-notes<strong i="16">@alpha</strong>

@ igor-dv, спасибо за ответ. Теперь все работает нормально.

@shilman , Некоторые изменения сломали пример angular-cli, теперь NameComponent и ServiceComponent не компилируются из-за типажей:

ERROR in ./src/stories/index.ts
(200,19): error TS2345: Argument of type '() => { component: typeof NameComponent; props: { field: string; }; moduleMetadata: { imports: an...' is not assignable to parameter of type 'IGetStory'.
  Type '{ component: typeof NameComponent; props: { field: string; }; moduleMetadata: { imports: any[]; s...' is not assignable to type '{ props?: { [p: string]: any; }; moduleMetadata?: { [p: string]: NgModuleMetadata; }; component: ...'.
    Types of property 'moduleMetadata' are incompatible.
      Type '{ imports: any[]; schemas: any[]; declarations: (typeof CustomPipePipe)[]; providers: any[]; }' is not assignable to type '{ [p: string]: NgModuleMetadata; }'.
        Property 'imports' is incompatible with index signature.
          Type 'any[]' is not assignable to type 'NgModuleMetadata'.

Я полагаю, что moduleMetadata?: { [p: string]: NgModuleMetadata; } в IGetStory должно быть как moduleMetadata?: NgModuleMetadata . После преобразования метаданных модуля в примерах в any все работает должным образом.

Я также столкнулся с некоторыми проблемами с загрузчиками scss для angular, похожими на проблему @neo, описанную выше.
Я решил проблему с помощью следующего правила конфигурации веб-пакета:

    storybookBaseConfig.module.rules.push({
      test: /\.scss$/,
      loaders: ["to-string-loader", "css-loader", "sass-loader"],
      include: path.resolve(__dirname, '../')
    });

Похоже, что angular не работает с style-loader и вам нужно вместо этого использовать to-string-loader .
Было бы неплохо предоставить документацию и (или) пример использования компонентов с таблицами стилей scss.

@ToniaDemchuk Да вы правы, проблема с moduleMetadata?: { [p: string]: NgModuleMetadata; } . На самом деле я исправил это уже здесь с помощью moduleMetadata?: Partial<NgModuleMetadata>;

Я опубликовал изменение @ralzinov в 3.3.0-rc.0 которое находится под тегом NPM rc вместо alpha .

@ToniaDemchuk, пожалуйста, попробуйте и дайте нам знать,

Спасибо всем за терпение и упорный труд, чтобы помочь нам решить эту проблему!

По-прежнему есть ошибка с загрузчиком scss и angular storybook v3.3.3 с изменениями @ralzinov :

node_modules / @ storybook /: grep -r "moduleMetadata ?: Частично"
angular/index.d.ts: moduleMetadata?: Partial<NgModuleMetadata>;

npm run сборник рассказов
https://gist.github.com/karlos1337/18e4538b37128818ec3e4b507b3b3a3c

Благодарю.

@ karlos1337 , взгляните на этот выпуск - № 2616.

Выпущено в версии 3.3! 🎉

Если закрыть эту проблему, и если у вас возникли проблемы со сборником рассказов для angular, отправьте отдельную проблему. Благодаря!