-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Plugin API first draft #505
Changes from 3 commits
d75f39d
38ed686
fc63efd
dfca756
15668d7
9040ef0
d5d90e6
1ed17a0
3b2cef5
25042c6
14dfbed
9da5ae3
7869f9f
29a9f07
1cebc00
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
'use strict'; | ||
|
||
const map = require('lodash/map'); | ||
const requireIt = require('./requireIt'); | ||
|
||
/** | ||
* TODO | ||
* | ||
* @param {object} plugins | ||
* @returns {object[]} | ||
*/ | ||
module.exports = function getPlugins(plugins) { | ||
return map(plugins, module => { | ||
const path = typeof module === 'string' ? module : module[0]; | ||
const options = typeof module === 'string' ? {} : module[1]; | ||
return { | ||
module: requireIt(path), | ||
options, | ||
}; | ||
}); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,25 @@ | ||
'use strict'; | ||
|
||
// If you want to access any of these options in React, don’t forget to update CLIENT_CONFIG_OPTIONS array | ||
// in loaders/styleguide-loader.js | ||
|
||
/* eslint-disable no-console */ | ||
|
||
// Config options that should be passed to the client | ||
const CLIENT_CONFIG_OPTIONS = [ | ||
'compilerConfig', | ||
'highlightTheme', | ||
'showCode', | ||
'showUsage', | ||
'showSidebar', | ||
'plugins', | ||
'previewDelay', | ||
'theme', | ||
'title', | ||
'styles', | ||
]; | ||
|
||
const DEFAULT_COMPONENTS_PATTERN = 'src/@(components|Components)/**/*.{js,jsx}'; | ||
const CORE_PLUGINS = ['rsg-plugins/code-editor', 'rsg-plugins/isolate', 'rsg-plugins/usage']; | ||
|
||
const fs = require('fs'); | ||
const path = require('path'); | ||
|
@@ -90,6 +104,15 @@ module.exports = { | |
type: 'string', | ||
default: 'base16-light', | ||
}, | ||
plugins: { | ||
type: 'array', | ||
default: [], | ||
process: val => | ||
CORE_PLUGINS.reduce((allPlugins, plugin) => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
allPlugins.push(plugin); | ||
return allPlugins; | ||
}, val || []), | ||
}, | ||
previewDelay: { | ||
type: 'number', | ||
default: 500, | ||
|
@@ -237,3 +260,5 @@ module.exports = { | |
}, | ||
}, | ||
}; | ||
|
||
module.exports.CLIENT_CONFIG_OPTIONS = CLIENT_CONFIG_OPTIONS; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,9 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import TabButton from 'rsg-components/TabButton'; | ||
|
||
const CodeTabButton = props => | ||
<TabButton {...props}> | ||
Code | ||
</TabButton>; | ||
|
||
CodeTabButton.propTypes = { | ||
onClick: PropTypes.func.isRequired, | ||
name: PropTypes.string.isRequired, | ||
active: PropTypes.bool, | ||
}; | ||
|
||
export default CodeTabButton; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import Editor from 'rsg-components/Editor'; | ||
import CodeTabButton from './CodeTabButton'; | ||
|
||
export const EXAMPLE_TAB_CODE_EDITOR = 'rsg-code-editor'; | ||
|
||
const codeEditorPlugin = () => ({ | ||
fills: [ | ||
{ | ||
id: EXAMPLE_TAB_CODE_EDITOR, | ||
type: 'exampleTabButton', | ||
render: CodeTabButton, | ||
}, | ||
{ | ||
id: EXAMPLE_TAB_CODE_EDITOR, | ||
type: 'exampleTab', | ||
render: Editor, | ||
}, | ||
], | ||
}); | ||
|
||
export default codeEditorPlugin; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import IsolateButton from './IsolateButton'; | ||
|
||
const isolatePlugin = () => ({ | ||
fills: [ | ||
{ | ||
type: 'sectionToolbarButton', | ||
render: IsolateButton, | ||
}, | ||
{ | ||
type: 'componentToolbarButton', | ||
render: IsolateButton, | ||
}, | ||
{ | ||
type: 'exampleToolbarButton', | ||
render: IsolateButton, | ||
}, | ||
], | ||
}); | ||
|
||
export default isolatePlugin; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import Usage from 'rsg-components/Usage'; | ||
import UsageTabButton from './UsageTabButton'; | ||
|
||
export const DOCS_TAB_USAGE = 'rsg-usage'; | ||
|
||
const usagePlugin = () => ({ | ||
fills: [ | ||
{ | ||
id: DOCS_TAB_USAGE, | ||
type: 'docsTabButton', | ||
render: UsageTabButton, | ||
}, | ||
{ | ||
id: DOCS_TAB_USAGE, | ||
type: 'docsTab', | ||
render: Usage, | ||
}, | ||
], | ||
}); | ||
|
||
export default usagePlugin; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,7 +4,7 @@ import debounce from 'lodash/debounce'; | |
import Preview from 'rsg-components/Preview'; | ||
import Slot from 'rsg-components/Slot'; | ||
import PlaygroundRenderer from 'rsg-components/Playground/PlaygroundRenderer'; | ||
import { EXAMPLE_TAB_CODE_EDITOR } from '../slots'; | ||
import { EXAMPLE_TAB_CODE_EDITOR } from '../../plugins/code-editor'; | ||
|
||
export default class Playground extends Component { | ||
static propTypes = { | ||
|
@@ -71,21 +71,24 @@ export default class Playground extends Component { | |
preview={<Preview code={code} evalInContext={evalInContext} />} | ||
tabButtons={ | ||
<Slot | ||
name="exampleTabButtons" | ||
name="exampleTabButton" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think a more specific name like "playgroundTabButton" would be better here There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 |
||
active={activeTab} | ||
props={{ onClick: this.handleTabChange }} | ||
/> | ||
} | ||
tabBody={ | ||
<Slot | ||
name="exampleTabs" | ||
name="exampleTab" | ||
active={activeTab} | ||
onlyActive | ||
props={{ code, onChange: this.handleChange }} | ||
/> | ||
} | ||
toolbar={ | ||
<Slot name="exampleToolbar" props={{ name, isolated: isolatedExample, example: index }} /> | ||
<Slot | ||
name="exampleToolbarButton" | ||
props={{ name, isolated: isolatedExample, example: index }} | ||
/> | ||
} | ||
/> | ||
); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think now just
concat
should be enough ;-)