Plugin API first draft

loaders/styleguide-loader.js

@@ -10,21 +10,10 @@ const getAllContentPages = require('./utils/getAllContentPages');
 const getComponentFilesFromSections = require('./utils/getComponentFilesFromSections');
 const getComponentPatternsFromSections = require('./utils/getComponentPatternsFromSections');
 const getSections = require('./utils/getSections');
+const getPlugins = require('./utils/getPlugins');
 const filterComponentsWithExample = require('./utils/filterComponentsWithExample');
 const slugger = require('./utils/slugger');
-
-// Config options that should be passed to the client
-const CLIENT_CONFIG_OPTIONS = [
-	'title',
-	'highlightTheme',
-	'showCode',
-	'showUsage',
-	'showSidebar',
-	'previewDelay',
-	'theme',
-	'styles',
-	'compilerConfig',
-];
+const CLIENT_CONFIG_OPTIONS = require('../scripts/schemas/config').CLIENT_CONFIG_OPTIONS;
 
 module.exports = function() {};
 module.exports.pitch = function() {
@@ -64,6 +53,7 @@ module.exports.pitch = function() {
 
 	const styleguide = {
 		config: pick(config, CLIENT_CONFIG_OPTIONS),
+		plugins: getPlugins(config.plugins),
 		welcomeScreen,
 		patterns,
 		sections,

loaders/utils/getPlugins.js

@@ -0,0 +1,23 @@
+'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 => {
+		// './plugin/test' vs [ './plugin/test', { options } ]
+		const moduleIsString = typeof module === 'string';
+		const path = moduleIsString ? module : module[0];
+		const options = moduleIsString ? {} : module[1];
+		return {
+			module: requireIt(path),
+			options,
+		};
+	});
+};

package.json

@@ -105,7 +105,7 @@
     "dog-names": "^1.0.2",
     "enzyme": "^3.1.1",
     "enzyme-adapter-react-16": "^1.0.4",
-    "enzyme-to-json": "^3.2.1",
+    "enzyme-to-json": "^3.2.2",
     "eslint": "^4.10.0",
     "eslint-config-tamia": "^4.2.3",
     "eslint-plugin-compat": "^2.1.0",
@@ -121,9 +121,9 @@
     "lint-staged": "^4.3.0",
     "prettier": "~1.8.1",
     "raf": "^3.4.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-test-renderer": "^16.0.0",
+    "react": "^16.1.0",
+    "react-dom": "^16.1.0",
+    "react-test-renderer": "^16.1.0",
     "rimraf": "^2.6.2",
     "semantic-release-tamia": "^1.1.1",
     "strip-shebang": "^1.0.2",

scripts/make-webpack-config.js

@@ -31,6 +31,7 @@ module.exports = function(config, env) {
 		resolve: {
 			extensions: ['.js', '.jsx', '.json'],
 			alias: {
+				'rsg-plugins': path.resolve(sourceDir, 'plugins'),
 				'rsg-codemirror-theme.css': `codemirror/theme/${config.highlightTheme}.css`,
 			},
 		},

scripts/schemas/config.js

@@ -1,9 +1,23 @@
 '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
+
+// 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 path = require('path');
 const startCase = require('lodash/startCase');
@@ -93,6 +107,11 @@ module.exports = {
 	logger: {
 		type: 'object',
 	},
+	plugins: {
+		type: 'array',
+		default: [],
+		process: val => (val || []).concat(CORE_PLUGINS),
+	},
 	previewDelay: {
 		type: 'number',
 		default: 500,
@@ -254,3 +273,5 @@ module.exports = {
 		},
 	},
 };
+
+module.exports.CLIENT_CONFIG_OPTIONS = CLIENT_CONFIG_OPTIONS;

src/consts.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
-
 export const DisplayModes = Object.freeze({
 	// Show all sections and components (default)
 	all: 'all',
@@ -11,3 +9,14 @@ export const DisplayModes = Object.freeze({
 	example: 'example',
 	// TODO: error (404)
 });
+
+export const Slots = Object.freeze({
+	sectionToolbarButton: 'sectionToolbarButton',
+	componentToolbarButton: 'componentToolbarButton',
+	playgroundToolbarButton: 'playgroundToolbarButton',
+	playgroundTabButton: 'playgroundTabButton',
+	playgroundTab: 'playgroundTab',
+	docsTabButton: 'docsTabButton',
+	docsTab: 'docsTab',
+	previewContainer: 'previewContainer',
+});

src/index.js

@@ -3,11 +3,11 @@
 import './polyfills';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import slots from 'rsg-components/slots';
 import StyleGuide from 'rsg-components/StyleGuide';
 import getPageTitle from './utils/getPageTitle';
 import getRouteData from './utils/getRouteData';
 import globalizeComponents from './utils/globalizeComponents';
+import loadPlugins from './utils/loadPlugins';
 import './styles';
 
 // Examples code revision to rerender only code examples (not the whole page) when code changes
@@ -17,12 +17,13 @@ function renderStyleguide() {
 	// eslint-disable-next-line import/no-unresolved
 	const styleguide = require('!!../loaders/styleguide-loader!./index.js');
 
+	const { config } = styleguide;
 	const { hash } = window.location;
-
 	const { sections, displayMode } = getRouteData(styleguide.sections, hash);
+	const plugins = loadPlugins(styleguide.plugins, config);
 
 	// Update page title
-	document.title = getPageTitle(sections, styleguide.config.title, displayMode);
+	document.title = getPageTitle(sections, config.title, displayMode);
 
 	// If the current hash location was set to just `/` (e.g. when navigating back from isolated view to overview)
 	// replace the URL with one without hash, to present the user with a single address of the overview screen
@@ -36,8 +37,8 @@ function renderStyleguide() {
 	ReactDOM.render(
 		<StyleGuide
 			codeRevision={codeRevision}
-			config={styleguide.config}
-			slots={slots}
+			config={config}
+			slots={plugins}
 			welcomeScreen={styleguide.welcomeScreen}
 			patterns={styleguide.patterns}
 			sections={sections}

src/rsg-components/slots/CodeTabButton.js → src/plugins/code-editor/CodeTabButton.js

@@ -1,13 +1,6 @@
 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;