Fix head extension by plugins

4 files changed, 55 insertions, 20 deletions

diff --git a/packages/gitbook-core/src/components/InjectedComponent.js b/packages/gitbook-core/src/components/InjectedComponent.js
index 2acc5db..f8b1ab8 100644
--- a/packages/gitbook-core/src/components/InjectedComponent.js
+++ b/packages/gitbook-core/src/components/InjectedComponent.js
@@ -26,6 +26,23 @@ const { findMatchingComponents } = require('../actions/components');
     If no matching components is found, the InjectedComponent renders an empty span.
  */
 
+const Injection = React.createClass({
+    propTypes: {
+        component: React.PropTypes.func,
+        props:     React.PropTypes.object
+    },
+
+    render() {
+        const Comp = this.props.component;
+        const { props } = this.props;
+
+        if (Comp.sandbox === false) {
+            return <Comp {...props} />;
+        } else {
+            return <UnsafeComponent Component={Comp} props={props} />;
+        }
+    }
+});
 
 const InjectedComponentSet = React.createClass({
     propTypes: {
@@ -40,13 +57,7 @@ const InjectedComponentSet = React.createClass({
     render() {
         const { components, props, ...divProps } = this.props;
 
-        const inner = components.map(Comp => {
-            if (Comp.sandbox === false) {
-                return <Comp key={Comp.displayName} {...props} />;
-            } else {
-                return <UnsafeComponent key={Comp.displayName} Component={Comp} props={props} />;
-            }
-        });
+        const inner = components.map(Comp => <Injection key={Comp.displayName} component={Comp} props={props} />);
 
         return (
             <div {...divProps}>
@@ -57,26 +68,47 @@ const InjectedComponentSet = React.createClass({
 });
 
 /**
+ * Render only the first component matching
+ */
+const InjectedComponent = React.createClass({
+    propTypes: {
+        components:    React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.func),
+            React.PropTypes.instanceOf(List)
+        ]).isRequired,
+        props:    React.PropTypes.object,
+        children: React.PropTypes.node
+    },
+
+    render() {
+        const { components, props, children } = this.props;
+        const base = children ? React.Children.only(children) : undefined;
+
+        return components.reduce((inner, Comp) => {
+            return (
+                <Injection component={Comp} props={props}>
+                    {inner}
+                </Injection>
+            );
+        }, base);
+    }
+});
+
+/**
  * Map Redux state to InjectedComponentSet's props
  */
 function mapStateToProps(state, props) {
     const { components } = state;
     const { matching } = props;
 
-    console.log('get components matching', matching);
     return {
         components: findMatchingComponents(components, matching)
     };
 }
 
-const InjectedComponent = ReactRedux.connect((state, props) => {
-    const result = mapStateToProps(state, props);
-    result.components = result.components.slice(0, 1);
-    result.withContainer = false;
-    return result;
-})(InjectedComponentSet);
+const connect = ReactRedux.connect(mapStateToProps);
 
 module.exports = {
-    InjectedComponent,
-    InjectedComponentSet: ReactRedux.connect(mapStateToProps)(InjectedComponentSet)
+    InjectedComponent:    connect(InjectedComponent),
+    InjectedComponentSet: connect(InjectedComponentSet)
 };
diff --git a/packages/gitbook-core/src/renderComponent.js b/packages/gitbook-core/src/renderComponent.js
index 365a037..14e7bf8 100644
--- a/packages/gitbook-core/src/renderComponent.js
+++ b/packages/gitbook-core/src/renderComponent.js
@@ -17,9 +17,9 @@ function renderComponent(store, matching) {
             <InjectedComponent matching={matching} />
         </ReactRedux.Provider>
     );
-    const head = Helmet.rewind();
+    const getHead = Helmet.rewind;
 
-    return { el, head };
+    return { el, getHead };
 }
 
 module.exports = renderComponent;
diff --git a/packages/gitbook-plugin-theme-default/src/index.js b/packages/gitbook-plugin-theme-default/src/index.js
index f85e6bc..86b2135 100644
--- a/packages/gitbook-plugin-theme-default/src/index.js
+++ b/packages/gitbook-plugin-theme-default/src/index.js
@@ -12,7 +12,6 @@ let ThemeBody = React.createClass({
     render() {
         const { page } = this.props;
 
-        console.log('render theme', page);
         return (
             <div className="GitBook book">
                 <GitBook.Head
diff --git a/packages/gitbook/src/browser/render.js b/packages/gitbook/src/browser/render.js
index 9c2e065..e397279 100644
--- a/packages/gitbook/src/browser/render.js
+++ b/packages/gitbook/src/browser/render.js
@@ -12,6 +12,7 @@ function HTML({head, innerHTML, props}) {
                 {head.title.toComponent()}
                 {head.meta.toComponent()}
                 {head.link.toComponent()}
+                {head.style.toComponent()}
             </head>
             <body>
                 <div id="content" dangerouslySetInnerHTML={{__html: innerHTML}} />
@@ -37,11 +38,14 @@ HTML.propTypes = {
  */
 function render(plugins, initialState) {
     const store = GitBook.createStore(plugins, initialState);
-    const { el, head } = GitBook.renderComponent(store, { role: 'Body' });
+    const { el, getHead } = GitBook.renderComponent(store, { role: 'Body' });
 
     // Render inner body
     const innerHTML = ReactDOMServer.renderToString(el);
 
+    // Get headers
+    const head = getHead();
+
     // Render whole HTML page
     const htmlEl = <HTML
         head={head}