First working version in the browser

7 files changed, 112 insertions, 105 deletions

diff --git a/packages/gitbook-core/src/bootstrap.js b/packages/gitbook-core/src/bootstrap.js
new file mode 100644
index 0000000..a5b457b
--- /dev/null
+++ b/packages/gitbook-core/src/bootstrap.js
@@ -0,0 +1,28 @@
+const ReactDOM = require('react-dom');
+
+const getPayload = require('./lib/getPayload');
+const createStore = require('./createStore');
+const renderWithStore = require('./renderWithStore');
+
+/**
+ * Bootstrap GitBook on the browser (this function should not be called on the server side)
+ */
+function bootstrap() {
+    const initialState = getPayload(window.document);
+    const plugins = window.gitbookPlugins;
+
+    const mountNode = document.getElementById('content');
+
+    // Create the redux store
+    const store = createStore(plugins, initialState);
+
+    window.appStore = store;
+
+    // Render with the store
+    const el = renderWithStore(store);
+
+    ReactDOM.render(el, mountNode);
+}
+
+
+module.exports = bootstrap;
diff --git a/packages/gitbook-core/src/components/Import.js b/packages/gitbook-core/src/components/Import.js
new file mode 100644
index 0000000..057ef7a
--- /dev/null
+++ b/packages/gitbook-core/src/components/Import.js
@@ -0,0 +1,37 @@
+const React = require('react');
+const Head = require('react-helmet');
+const ReactRedux = require('react-redux');
+
+const ImportLink = ReactRedux.connect((state, {rel, href}) => {
+    href = href; // TODO: resolve using current page
+
+    return {
+        link: [
+            {
+                rel,
+                href
+            }
+        ]
+    };
+})(Head);
+
+const ImportScript = ReactRedux.connect((state, {type, src}) => {
+    src = src; // TODO: resolve using current page
+
+    return {
+        script: [
+            {
+                type,
+                src
+            }
+        ]
+    };
+})(Head);
+
+const ImportCSS = props => <ImportLink rel="stylesheet" {...props} />;
+
+module.exports = {
+    ImportLink,
+    ImportScript,
+    ImportCSS
+};
diff --git a/packages/gitbook-core/src/components/InjectedComponent.js b/packages/gitbook-core/src/components/InjectedComponent.js
index a4f81fe..cb50e02 100644
--- a/packages/gitbook-core/src/components/InjectedComponent.js
+++ b/packages/gitbook-core/src/components/InjectedComponent.js
@@ -2,7 +2,6 @@ const React = require('react');
 const ReactRedux = require('react-redux');
 const { List } = require('immutable');
 
-const UnsafeComponent = require('./UnsafeComponent');
 const { findMatchingComponents } = require('../actions/components');
 
 /*
@@ -37,11 +36,8 @@ const Injection = React.createClass({
         const Comp = this.props.component;
         const { props, children } = this.props;
 
-        if (Comp.sandbox === false) {
-            return <Comp {...props}>{children}</Comp>;
-        } else {
-            return <UnsafeComponent Component={Comp} props={props}>{children}</UnsafeComponent>;
-        }
+        // TODO: try to render with an error handling for unsafe component
+        return <Comp {...props}>{children}</Comp>;
     }
 });
 
diff --git a/packages/gitbook-core/src/components/UnsafeComponent.js b/packages/gitbook-core/src/components/UnsafeComponent.js
deleted file mode 100644
index 3534f45..0000000
--- a/packages/gitbook-core/src/components/UnsafeComponent.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/* eslint-disable no-console */
-const React = require('react');
-const ReactDOM = require('react-dom');
-const ReactRedux = require('react-redux');
-
-const isServerSide = typeof window === 'undefined';
-
-/*
- Public: Renders a component provided via the `component` prop, and ensures that
- failures in the component's code do not cause state inconsistencies elsewhere in
- the application. This component is used by {InjectedComponent} and
- {InjectedComponentSet} to isolate third party code that could be buggy.
-
- Occasionally, having your component wrapped in {UnsafeComponent} can cause style
- issues. For example, in a Flexbox, the `div.unsafe-component-wrapper` will cause
- your `flex` and `order` values to be one level too deep. For these scenarios,
- UnsafeComponent looks for `containerStyles` on your React component and attaches
- them to the wrapper div.
- */
-
-
-const UnsafeComponent = React.createClass({
-    propTypes: {
-        Component: React.PropTypes.func.isRequired,
-        props:     React.PropTypes.object,
-        children:  React.PropTypes.node
-    },
-    contextTypes: {
-        store: React.PropTypes.object
-    },
-
-    componentDidMount() {
-        return this.renderInjected();
-    },
-
-    componentDidUpdate() {
-        return this.renderInjected();
-    },
-
-    componentWillUnmount() {
-        return this.unmountInjected();
-    },
-
-    getInjected() {
-        const { Component, props, children } = this.props;
-        const { store } = this.context;
-
-        return (
-            <ReactRedux.Provider store={store}>
-                <Component {...props}>{children}</Component>
-            </ReactRedux.Provider>
-        );
-    },
-
-    renderInjected() {
-        const node = ReactDOM.findDOMNode(this);
-
-        try {
-            this.injected = this.getInjected();
-
-            ReactDOM.render(this.injected, node);
-        } catch (err) {
-            console.error(err);
-        }
-    },
-
-    unmountInjected() {
-        try {
-            const node = ReactDOM.findDOMNode(this);
-            return ReactDOM.unmountComponentAtNode(node);
-        } catch (err) {
-            console.error(err);
-        }
-    },
-
-    focus() {
-        if (this.injected.focus != null) {
-            return this.injected.focus();
-        }
-    },
-
-    blur() {
-        if (this.injected.blur != null) {
-            return this.injected.blur();
-        }
-    },
-
-    render() {
-        let inner;
-
-        if (isServerSide) {
-            inner = this.getInjected();
-        }
-
-        return <div name="unsafe-component-wrapper">{inner}</div>;
-    }
-});
-
-module.exports = ReactRedux.connect()(UnsafeComponent);
diff --git a/packages/gitbook-core/src/index.js b/packages/gitbook-core/src/index.js
index b4b2abd..46892e4 100644
--- a/packages/gitbook-core/src/index.js
+++ b/packages/gitbook-core/src/index.js
@@ -2,6 +2,7 @@ const Head = require('react-helmet');
 const { Provider } = require('react-redux');
 
 const { InjectedComponent, InjectedComponentSet } = require('./components/InjectedComponent');
+const { ImportLink, ImportScript, ImportCSS } = require('./components/Import');
 const HTMLContent = require('./components/HTMLContent');
 
 const { registerComponent } = require('./actions/components');
@@ -12,9 +13,13 @@ const connect = require('./connect');
 const createPlugin = require('./createPlugin');
 const createReducer = require('./createReducer');
 const createStore = require('./createStore');
+const bootstrap = require('./bootstrap');
+const renderWithStore = require('./renderWithStore');
 
 module.exports = {
     ACTIONS,
+    bootstrap,
+    renderWithStore,
     connect,
     createPlugin,
     createReducer,
@@ -26,6 +31,9 @@ module.exports = {
     HTMLContent,
     Head,
     Provider,
+    ImportLink,
+    ImportScript,
+    ImportCSS,
     // Utilities
     Shapes
 };
diff --git a/packages/gitbook-core/src/lib/getPayload.js b/packages/gitbook-core/src/lib/getPayload.js
new file mode 100644
index 0000000..2d54b9e
--- /dev/null
+++ b/packages/gitbook-core/src/lib/getPayload.js
@@ -0,0 +1,19 @@
+
+/**
+ * Get the payload for a GitBook page
+ * @param  {String|DOMDocument} html
+ * @return {Object}
+ */
+function getPayload(html) {
+    if (typeof html === 'string') {
+        const parser = new DOMParser();
+        html = parser.parseFromString(html, 'text/html');
+    }
+
+    const script = html.querySelector('script[type="application/payload+json"]');
+    const payload = JSON.parse(script.innerHTML);
+
+    return payload;
+}
+
+module.exports = getPayload;
diff --git a/packages/gitbook-core/src/renderWithStore.js b/packages/gitbook-core/src/renderWithStore.js
new file mode 100644
index 0000000..af86704
--- /dev/null
+++ b/packages/gitbook-core/src/renderWithStore.js
@@ -0,0 +1,18 @@
+const React = require('react');
+const { Provider } = require('react-redux');
+const { InjectedComponent } = require('./components/InjectedComponent');
+
+/**
+ * Render the application for a store
+ * @param  {ReduxStore} store
+ * @return {React.Element} element
+ */
+function renderWithStore(store) {
+    return (
+        <Provider store={store}>
+            <InjectedComponent matching={{ role: 'Body' }} />
+        </Provider>
+    );
+}
+
+module.exports = renderWithStore;