storybook-addon-jarle-monaco

作为 Storybook 插件提供实时编辑编辑器和预览功能，它使用了 jarle 和 monaco editor

你可以在编辑器中修改代码并在预览中查看结果

示例

yarn # install dependencies
yarn storybook # start storybook

演示 Storybook 页面

用法

npm i --save-dev storybook-addon-jarle-monaco
# or
yarn add -D storybook-addon-jarle-monaco

在 Storybook 中注册插件

module.exports = {
  // ...
  addons: [
    // ... other addons
    'storybook-addon-jarle-monaco',
  ],
}

在 Stories 中使用

// *.stories.jsx
import { generateLivePreviewStory } from 'storybook-addon-jarle-monaco'

// use generateLivePreviewStory HoC to generate live preview
export const LiveEdit = generateLivePreviewStory({
  code: `() => <Button primary label={foo} />`,
  scope: {
    Button,
    foo: 'bar',
  }
})

export const LiveEditUseLivePreview = () => (
  <LivePreview
    channel={addons.getChannel()}
    code={`<Button primary label={'hello'} />`}
    providerProps={{
      scope: {
        Button,
      }
    }}
  />
)

// use LivePreview alone, you need to set showEditor manually
LiveEditUseLivePreview.parameters = {
  liveEdit: {
    showEditor: true,
  }
}

在 MDX 中使用

import { Meta } from '@storybook/addon-docs';
import { Button } from './Button';
import { Playground } from '@pupu/storybook-addon-jarle-monaco';

<Meta title="Example/LiveEdit in MDX" />

> Use `Playground` in *.stories.mdx file, it provides live preview and editor

### Button

<Playground
  code="<Button primary label={'hello'} />"
  providerProps={{
    scope: {
      Button,
    },
  }}
/>

TypeScript 类型定义解析

查看 Story AutoTypings.stories.mdx

使用 liveDecorator

1. 将 liveDecorator 添加为全局装饰器

import { liveDecorator } from 'storybook-addon-jarle-monaco'

// .storybook/preview.js
export const decorators = [
  liveDecorator
]

2. 在 Stories 中的用法

// *.stories.jsx

// with liveDecorator will read the story's source code,
// so we can avoid writing live preview's code in plain text.
export const LiveEditWithLiveDecorator = () => <Button primary label="hello" />

// but you still need to provide scope or custom LivePreviewProps
LiveEditWithLiveDecorator.parameters = {
  liveEdit: {
    showEditor: true,
    withLiveDecorator: true,
    scope: {
      Button,
    }
  }
}

配置

Monaco 文件

此插件使用 @monaco-editor/react，monaco 文件默认从 CDN 下载，你可以更改路径以使用其他 CDN 域。

例如：

import { loader } from '@monaco-editor/react'

loader.config({ paths: { vs: 'https://cdn.bootcdn.net/ajax/libs/monaco-editor/0.33.0/min/vs' } })

Story 参数

Story 参数中的 liveEdit 配置

属性	类型	默认值	描述
showEditor	boolean	false	是否显示实时编辑面板
withLiveDecorator	boolean	false	是否使用 LivePreview 装饰器包裹 Story

Playground 组件

属性	类型	默认值	描述
code	string	--	必填，用于实时编辑的代码
autoTypings	boolean	false	启用自动类型推断功能，如果为 true，将默认把语言设置为 typescript
defaultExpand	boolean	false	展开编辑器内容
scope	object	--	Jarle Preview 的属性，用于全局作用域注入
providerProps	ProviderProps	--	Jarle Provider 的属性
resolveTypeDefinition	(packageName: string) => Promise<string | null> | string | null	--	为特定包提供自定义类型定义
editorProps	Partial<EditorProps>	--	MonacoEditor 的属性
className	string	--	包裹器的 class

你可以在 liveEdit 中添加 Jarle 的 Provider 属性，查看 Jarle 的文档获取更多信息。