Add js scripts to html

packages/gitbook-core/src/components/InjectedComponent.js

@@ -29,17 +29,18 @@ const { findMatchingComponents } = require('../actions/components');
 const Injection = React.createClass({
     propTypes: {
         component: React.PropTypes.func,
-        props:     React.PropTypes.object
+        props:     React.PropTypes.object,
+        children:  React.PropTypes.node
     },
 
     render() {
         const Comp = this.props.component;
-        const { props } = this.props;
+        const { props, children } = this.props;
 
         if (Comp.sandbox === false) {
-            return <Comp {...props} />;
+            return <Comp {...props}>{children}</Comp>;
         } else {
-            return <UnsafeComponent Component={Comp} props={props} />;
+            return <UnsafeComponent Component={Comp} props={props}>{children}</UnsafeComponent>;
         }
     }
 });
@@ -82,7 +83,6 @@ const InjectedComponent = React.createClass({
 
     render() {
         const { components, props, children } = this.props;
-        const base = children ? React.Children.only(children) : undefined;
 
         return components.reduce((inner, Comp) => {
             return (
@@ -90,7 +90,7 @@ const InjectedComponent = React.createClass({
                     {inner}
                 </Injection>
             );
-        }, base);
+        }, children);
     }
 });
 

packages/gitbook-core/src/components/UnsafeComponent.js

@@ -22,7 +22,8 @@ const isServerSide = typeof window === 'undefined';
 const UnsafeComponent = React.createClass({
     propTypes: {
         Component: React.PropTypes.func.isRequired,
-        props:     React.PropTypes.object
+        props:     React.PropTypes.object,
+        children:  React.PropTypes.node
     },
     contextTypes: {
         store: React.PropTypes.object
@@ -41,12 +42,12 @@ const UnsafeComponent = React.createClass({
     },
 
     getInjected() {
-        const { Component, props } = this.props;
+        const { Component, props, children } = this.props;
         const { store } = this.context;
 
         return (
             <ReactRedux.Provider store={store}>
-                <Component {...props}/>
+                <Component {...props}>{children}</Component>
             </ReactRedux.Provider>
         );
     },

packages/gitbook-core/src/index.js

@@ -1,4 +1,5 @@
 const Head = require('react-helmet');
+const { Provider } = require('react-redux');
 
 const { InjectedComponent, InjectedComponentSet } = require('./components/InjectedComponent');
 const HTMLContent = require('./components/HTMLContent');
@@ -11,7 +12,6 @@ const connect = require('./connect');
 const createPlugin = require('./createPlugin');
 const createReducer = require('./createReducer');
 const createStore = require('./createStore');
-const renderComponent = require('./renderComponent');
 
 module.exports = {
     ACTIONS,
@@ -19,13 +19,13 @@ module.exports = {
     createPlugin,
     createReducer,
     createStore,
-    renderComponent,
     registerComponent,
     // React Components
     InjectedComponent,
     InjectedComponentSet,
     HTMLContent,
     Head,
+    Provider,
     // Utilities
     Shapes
 };

packages/gitbook-core/src/renderComponent.js

@@ -1,25 +0,0 @@
-const React = require('react');
-const Helmet = require('react-helmet');
-const ReactRedux = require('react-redux');
-const { InjectedComponent } = require('./components/InjectedComponent');
-
-/**
- * Render a registered component from a store.
- * This method is intended for server-side use in "gitbook".
- *
- * @param  {ReduxStore} store
- * @param  {Descriptor} matching
- * @return {Object} { el, meta }
- */
-function renderComponent(store, matching) {
-    const el = (
-        <ReactRedux.Provider store={store}>
-            <InjectedComponent matching={matching} />
-        </ReactRedux.Provider>
-    );
-    const getHead = Helmet.rewind;
-
-    return { el, getHead };
-}
-
-module.exports = renderComponent;

packages/gitbook-plugin-theme-default/src/index.js

@@ -6,11 +6,12 @@ const Page = require('./Page');
 
 let ThemeBody = React.createClass({
     propTypes: {
-        page: GitBook.Shapes.Page
+        page:     GitBook.Shapes.Page,
+        children: React.PropTypes.node
     },
 
     render() {
-        const { page } = this.props;
+        const { page, children } = this.props;
 
         return (
             <div className="GitBook book">
@@ -21,6 +22,7 @@ let ThemeBody = React.createClass({
 
                 <Sidebar />
                 <Page page={page} />
+                {children}
             </div>
         );
     }

packages/gitbook/src/browser/render.js

@@ -2,9 +2,10 @@ const React = require('react');
 const ReactDOMServer = require('react-dom/server');
 const GitBook = require('gitbook-core');
 
-function HTML({head, innerHTML, props}) {
+const loadPlugins = require('./loadPlugins');
+
+function HTML({head, innerHTML}) {
     const attrs = head.htmlAttributes.toComponent();
-    const propsJSON = JSON.stringify(props);
 
     return (
         <html {...attrs}>
@@ -17,40 +18,58 @@ function HTML({head, innerHTML, props}) {
             <body>
                 <div id="content" dangerouslySetInnerHTML={{__html: innerHTML}} />
                 {head.script.toComponent()}
-                <script
-                    type="application/payload+json"
-                    dangerouslySetInnerHTML={{__html: propsJSON}} />
             </body>
         </html>
     );
 }
 HTML.propTypes = {
     head:      React.PropTypes.object,
-    props:     React.PropTypes.object,
     innerHTML: React.PropTypes.string
 };
 
 /**
  * Render a page
- * @param  {List<Plugin>} plugin
+ * @param  {OrderedMap<String:Plugin>} plugin
  * @param  {Object} initialState
  * @return {String} html
  */
 function render(plugins, initialState) {
-    const store = GitBook.createStore(plugins, initialState);
-    const { el, getHead } = GitBook.renderComponent(store, { role: 'Body' });
+    // Load the plugins
+    const browserPlugins = loadPlugins(plugins);
+    const store = GitBook.createStore(browserPlugins, initialState);
+
+    const scripts = plugins.toList()
+        .filter(plugin => plugin.getPackage().has('browser'))
+        .map(plugin => {
+            return { src: '/gitbook/plugins/' + plugin.getName() + '.js' };
+        })
+        .toArray();
+
+    scripts.push({
+        type: 'application/payload+json',
+        innerHTML: JSON.stringify(initialState)
+    });
+
+    const el = (
+        <GitBook.Provider store={store}>
+            <GitBook.InjectedComponent matching={{ role: 'Body' }}>
+                <GitBook.Head
+                    script={scripts}
+                />
+            </GitBook.InjectedComponent>
+        </GitBook.Provider>
+    );
 
     // Render inner body
     const innerHTML = ReactDOMServer.renderToString(el);
 
     // Get headers
-    const head = getHead();
+    const head = GitBook.Head.rewind();
 
     // Render whole HTML page
     const htmlEl = <HTML
         head={head}
         innerHTML={innerHTML}
-        props={initialState}
     />;
 
     const html = ReactDOMServer.renderToStaticMarkup(htmlEl);

packages/gitbook/src/output/website/onPage.js

@@ -1,15 +1,10 @@
-const path = require('path');
-
 const Plugins = require('../../plugins');
 const JSONUtils = require('../../json');
-const LocationUtils = require('../../utils/location');
 const Modifiers = require('../modifiers');
 const writeFile = require('../helper/writeFile');
 const fileToOutput = require('../helper/fileToOutput');
 const getModifiers = require('../getModifiers');
-const createTemplateEngine = require('./createTemplateEngine');
 const render = require('../../browser/render');
-const loadBrowserPlugins = require('../../browser/loadPlugins');
 
 /**
  * Write a page as a json file
@@ -34,14 +29,8 @@ function onPage(output, page) {
             resources: Plugins.listResources(plugins, resources).toJS()
         };
 
-        // We should probabbly move it to "template" or a "site" namespace
-        // context.basePath = basePath;
-
-        // Load the plugins
-        const browserPlugins = loadBrowserPlugins(plugins);
-
         // Render the theme
-        const html = render(browserPlugins, initialState);
+        const html = render(plugins, initialState);
 
         // Write it to the disk
         return writeFile(output, filePath, html);