storybook 🚀 - Angular 2支持

我们已经将核心用户界面制作成单独的应用。我们计划将其直接用于NG2。参见： https :

arunoda 于 2016-06-22

👍2

凉。期待它！ :)

tycho01 于 2016-06-23

嘿， @ arunoda ，那么这个方法将是什么？
我们是否要创建特定于ng2的故事书UI？只是想很好地了解你们想要达到的目标，看看我是否能帮上忙

alterx 于 2016-07-01

随着RC5的发布，Angular 2 API已变得稳定。现在不会有任何重大变化。因此，这是开始开发它的好时机。抄送： @arunoda @mnmtanish

ritz078 于 2016-08-15

@arunoda ：我倾向于认为这在路线图上很低，但是在Angular情况下，在这种情况下，想法是让理论上的ng2-storybook来让storybook-ui的React接口嵌入Angular组件呢？完成了吗？

tycho01 于 2016-11-26

@ tycho01你是对的。这是我们的优先事项。
我希望我们可以从Storybook-ui作为基础开始。因此，大多数插件都可以使用它。
我正在寻找帮助某个人开始工作的人。如果是这样，请在我们的Slack上ping我一下。再说吧

arunoda 于 2016-11-26

@ tycho01，@arunoda你们让我知道如果你开始这方面的工作。

alterx 于 2016-11-29

@alterx ：我得到的指针： storybook-react与storybook-ui分开（在iframe中运行）；下一步是尝试看看是否可以将其替换为Angular版本。自上次尝试以来没有开始。

tycho01 于 2016-11-30

签出-https: //twitter.com/amcdnl/status/804776546246520832

amcdnl 于 2016-12-02

👍3

@ tycho01 ，我检查了源代码，他们有一个完全独立的react组件，基本上是一个美化的iframe（https://github.com/storybooks/react-storybook/blob/master/src/client/manager/preview.js）。我们应该能够在该预览iframe中加载ng2故事。

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处于控制状态，它构建上下文（包括提供程序）并创建应用程序（使用mantra-core的createApp ）。然后将提供程序（以及其他上下文道具）注入到ui模块（https://github.com/storybooks/storybook-ui/blob/master/src/modules/ui/routes.js ），营造使用预览renderPreview时，我们在创造它定义的方法react-storybook

@arunoda ，如果我缺少什么，请告诉我

alterx 于 2016-12-03

@amcdnl ，看起来很有希望。您介意快速介绍一下它的工作原理吗？（没什么花样，只是全局）

alterx 于 2016-12-03

@amcdnl ：感谢您的链接，将对其进行检查。
编辑：您也许有任何演示吗？我找不到任何可以运行的东西。

tycho01 于 2016-12-03

@ MikeRyan52 ^^

amcdnl 于 2016-12-03

@alterx是的您是100％正确的。
我们还需要公开类似于React Storybook的API来创建故事。

可能是从angular-storybook或类似货币中导入的。

arunoda 于 2016-12-05

@arunoda您是否有提到的angular-storybook的网址，Google快干了。

bcowgill 于 2017-04-12

@bcowgill afaik除了上面提到的@amcdnl之外，

tycho01 于 2017-04-12

现在也有这个-http: //www.angularplayground.it/

amcdnl 于 2017-04-12

现在在路线图上：
https://github.com/storybooks/storybook/blob/master/ROADMAP.md#angular

ndelangen 于 2017-05-28

👍8

所以Vue的Storybook即将发布🎉

这为如何完成NG2版本添加了一个很好的例子。
有没有勇敢的人看着这个愿意合作并实现的线程？

ndelangen 于 2017-07-07

👍2

我可以看看，您是否有方便的回购网址， @ndelangen ？

alterx 于 2017-07-07

👍2 ❤1 🎉1 😄1

你在看😄

故事书是一个monorepo，我们这里有软件包，分别发布到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配置。

首先可以复制很多代码！我们稍后会解决。之后，我们发现什么是真正的共同点，什么不是。

ndelangen 于 2017-07-07

刚开始，我会说

将整个应用程序/ vue复制到应用程序/ angular（我们正在谈论angular2及以上吗？）
调整webpack配置，以便它加载一些有角度的东西并进行编译。
调整render.js直到出现某些东西，最好是您期望的组件
尝试一些插件
修正错误
尝试现在可能的
编写文档，列出可以使用的插件
博客文章草稿（我可以这样做，或者将您的帐户添加到我们的中型出版物中）
计划发布
做Alpha发布
修正错误
实际发布，发布博客，推文公告
修复更多错误
尝试添加对更多插件的支持

@shilman是我们的发行总厨👨‍🍳

ndelangen 于 2017-07-07

👍1

您可以轻松地加入我们，获得比github💬更快的聊天体验

https://storybooks-slackin.herokuapp.com

ndelangen 于 2017-07-07

完美，@ ndelangen！
我看一下代码并加入Slack频道：D

alterx 于 2017-07-07

😄1

@alterx您现在正在处理吗？我现在正在克隆vue.js版本

Jordan-Hall 于 2017-07-19

@ Jordan-Hall，已经有了可以运行基本应用程序的PR。
请参考＃1474
我目前正在检查加载项，以查看开箱即用的工作。您介意加入Slack渠道以便我们进行协调吗？

alterx 于 2017-07-19

❤2

@alterx当然。 https://storybooks-slackin.herokuapp.com的频道似乎已关闭？

Jordan-Hall 于 2017-07-19

哇，应该是supposed
也许@ndelangen可以帮助您。
目前，我的PR负责基础工作（渲染组件，发送输入）。这与其他人对vue和react所做的操作有些不同，但是angular的处理方式（ NgModules ）需要进行一些更改。

我们旨在将Angular（2+）支持作为3.3版本的一部分。

alterx 于 2017-07-19

👍5

是的，heroku决定关闭该应用程序，所以我才部署到now.sh：
https://now-examples-slackin-nqnzoygycp.now.sh/

¯\_(ツ)_/¯

ndelangen 于 2017-07-21

🎉2

我不明白为什么人们不仅仅将gitter用于此类项目xD

agalazis 于 2017-07-22

嘿，大家只是想看看是否有人还在积极地进行这项工作？

tomatosource 于 2017-09-06

是的，工作正在进行中：
https://github.com/storybooks/storybook/pull/1474

ndelangen 于 2017-09-06

❤4

是的，我今天需要抽出一些时间来提交我在计算机上所做的更改。午餐期间可能会做😄

alterx 于 2017-09-06

❤5 🎉1 👍1

恭喜合并！
我可以npm i -g @storybook/[email protected]尝试一下吗？还是需要更多手动设置才能玩游戏？

很想帮助测试一下并做出贡献👍

tomatosource 于 2017-10-24

👍5

@shilman @alterx我有一个印象是使用angular应用发布了alpha版本？
似乎还不是这样吗？

我们多久可以做1个？ @tomatosource愿意为我们做一些测试🙇

ndelangen 于 2017-10-25

👍2

@shilman提到他想在Angular松弛频道中“在未来几天内”发布它，所以我想它还没有发布:)

alterx 于 2017-10-25

❤3 👍3

任何更新？ :-)

marcelnem 于 2017-11-07

👍1

其实是=） https://github.com/storybooks/storybook/releases/tag/v3.3.0-alpha.3

Hypnosphi 于 2017-11-07

🎉5

@Hypnosphi您如何实际安装它？不支持的项目类型。（代码：未检测到）

aaronksaunders 于 2017-11-08

@aaronksaunders您是否有可以与我们共享的存储库，以帮助我们调试CLI？另外，如果您想手动操作，这里有一个具有完整设置的示例应用程序： https :

@alterx @tomatosource对不起发布延迟了-它现在已经发布，很乐意您的帮助测试！

shilman 于 2017-11-08

它支持什么版本的angular？

ToniaDemchuk 于 2017-11-14

ndelangen 于 2017-11-14

@Insayt @ LTiger14 @MTariqAziz @MathieuFouillet @Quramy @RemiAWE @VadimDez @aitboudad @bermanboris @cheapsteak @基督教bromann @diagramatics @dlcardozo @ ELAD-morphisec @jbueza @johannesjo @jshthornton @ justinlee0777 @mixn @ npatta01 @qrrock @realappie @ruedap @ tiny-dancer @ tycho01 @ priley86

Angular2 +支持是阿尔法（ 3.3.0-alpha.4要准确）得益于@alterx一个艰巨的努力得到它的工作。请帮助我们对其进行测试，以便我们可以将其发布！

只需一分钟，即可开始以下操作：

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

这是我们仓库中的examples/angular-cli故事书的外观，您应该在浏览器中看到精简版本：

storybook

请尝试一下，如果您有任何问题，请在这里告诉我们。您也可以加入Storybook闲暇的#angular频道，以获取实时帮助。

非常感谢您的帮助！

shilman 于 2017-11-21

❤1

运行yarn getstorybook @shilman引发以下错误：

(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)/
});

aitboudad 于 2017-11-22

👍1

很奇怪，我们实际上在cli@alpha使用babel-register

Hypnosphi 于 2017-11-22

@aitboudad您使用哪个节点版本？

Hypnosphi 于 2017-11-22

您使用哪个节点版本？

v8.9.0，与节点版本无关，但与babel有关，它将忽略转译位于node_modules中的所有文件

aitboudad 于 2017-11-22

@shilman我

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

通过在/node_modules/@storybook/angular/dist/server/config/webpack.config.js中将transpileOnly设置为true来解决

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

缺少功能：

传递自定义NgModule ：
现在还没有办法传递自定义NgModule ，这使当前的实现非常有限。

aitboudad 于 2017-11-22

这是关于babel的，它忽略了转译位于node_modules中的所有文件

哦，我明白了，会解决的。我不知道它以前如何工作

Hypnosphi 于 2017-11-22

@aitboudad非常感谢您调试此功能！ @Hypnosphi解决了CLI问题，我刚刚发布了它。将尝试尽快获得角度修正！

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

shilman 于 2017-11-22

🎉2

@aitboudad ，我们知道该功能的缺失，我们正在努力弥补这一

您的确切用例是什么？也许我们可以找出答案。

alterx 于 2017-11-22

另外，仅使用transpile将使您无需进行类型检查。在进行更改之前，我们需要研究一下。

alterx 于 2017-11-22

@alterx您的确切用例是什么？

如果我的组件需要某些外部模块（例如材料）或其他可用的模块，该怎么办，如何用当前的方法处理它？

aitboudad 于 2017-11-22

在这种情况下，它应该足以满足提供程序，导入和模式（如果需要，请提供idk，自定义元素）。引入自定义模块的问题在于，我们无法控制用户可以提交的组件数量，并且有可能破坏该组件。故事书是关于作为独立单元开发和测试组件的。在React和Vue中这有点不同，但是对于角度，我们需要做一些假设并限制范围。

我正在做一些事情，应该允许您通过导入和声明来传递提供程序和架构，这要复杂一些。这种反馈是完美的，我们希望得到一些可以测试的东西，看看人们需要什么。

alterx 于 2017-11-22

❤3 🎉3

@aitboudad我尝试使用新创建的@angular/cli应用程序和getstorybook复制您的问题，但一切正常。您能否提供有关设置的更多详细信息？角版本？ TypeScript版本？
我将无法立即对其进行测试。
screen shot 2017-11-22 at 10 27 33 am

alterx 于 2017-11-22

👍2

@alterx再次尝试过，它似乎可以在新的Alpha版本中正常工作，谢谢！

aitboudad 于 2017-11-22

哦，太好了！
放心，我们计划支持某种方式为我们创建的模块提供导入，提供程序等。我们只需要弄清楚:)

alterx 于 2017-11-22

👍4

刚尝试使用以下软件包版本运行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"
  }

在尝试获取component.__annotations__[0]出现错误的_Addon Knobs_组件后，它在浏览器控制台中崩溃：

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 于 2017-11-22

@ToniaDemchuk非常感谢您对其进行测试。您是如何在计算机上进行设置的？您可以分享一个复制品吗？非常感谢！

shilman 于 2017-11-23

大家好，超级赞！几个问题。

我还必须向package.json添加"@storybook/addon-notes": "3.3.0-alpha.4", 。

有没有办法尊重我的本地打字稿路径？它们是在tsconfig中定义的。
回购： https :
我得到Cannot find module 'ngx-color/helpers'.因为它没有接他们。

scttcper 于 2017-11-23

❤2

@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_

ToniaDemchuk 于 2017-11-23

这工作：

这不是：

控制台错误：

neo 于 2017-11-27

@neo ，我试图进行复制，但是对我而言一切正常。您可以分享更多背景信息吗？也许您有回购协议？

igor-dv 于 2017-12-07

@shilman ， @alterx ，关于角度v4.3.5（ @ToniaDemchuk ）的问题，我已经研究了这个问题（我对角度不很熟悉，所以...）在旋钮插件中，有一些代码依赖于组件对象上具有annotations数组的事实。此数组由新版本的angular/core软件包设置。但是在以前的版本（在本例中为v4.3.5）中，他们使用了reflect-metadata软件包（此处是diff被删除的地方）。我真的不知道该怎么办。

igor-dv 于 2017-12-09

是的，这种变化肯定会影响我们获取元数据的方式。将
有空的时候看看。大概在下一个时间
周

2017年12月9日星期六，上午11:41 Igor [email protected]写道：

@shilman https://github.com/shilman，@alterx
https://github.com/alterx ，关于angular v4.3.5的问题（
@ToniaDemchuk https://github.com/toniademchuk ），我已经研究了
问题（我对Angular不太熟悉，所以...）在旋钮插件中，
有一些代码依赖于组件对象具有一个
注释数组就可以了。该数组是由
新版本。但是在以前的版本（在本例中为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
。

alterx 于 2017-12-09

@aitboudad ，这是PR，用于支持自定义模块元数据。
到目前为止，我已经添加了管道和服务的示例。我需要测试指令，模式等，但是它们也应该正常工作。

让我知道你的想法

alterx 于 2017-12-20

🎉1

@ToniaDemchuk ，您介意再次检查新的变化吗？

igor-dv 于 2017-12-21

我刚刚发布了3.3.0-alpha.6，其中包含来自@alterx @ igor-dv @ralzinov的许多Angular更改

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

Storybook: Angular 2支持

最有用的评论

所有76条评论

缺少功能：

相关问题