Split client into client and iframe client

.gitignore

@@ -6,9 +6,8 @@ npm-debug.log.*
 dist
 stats.json
 webpack-plugin/src/assets/client-bundle.js
-webpack-plugin/src/client-bundle.js
-webpack-plugin/src/assets/main.css
-webpack-plugin/src/main.css
+webpack-plugin/src/assets/iframe-client-bundle.js
+webpack-plugin/src/assets/client.css
 webpack-plugin/dist
 client/user-bundle.js
 

client/client.js

@@ -13,70 +13,52 @@ import Plugins from './components/Plugins';
 import App from './components/App';
 import FourOhFour from './components/FourOhFour';
 import map from 'lodash/map';
-import find from 'lodash/find';
 import createNavigationStore from './navigationStore';
 
-if (window.frameElement) {
-  // in iframe
-  window.$INITIALIZE_COMPONENT_GUI = function initializeComponentGui(components) {
-    const componentData = components[window.COMPONENT_PATH];
-    let Component = componentData.getCompiledComponent();
-    if (Component.default) {
-      Component = Component.default;
-    }
-    const activePlugin = find(componentData.getMeta(), (plugin) => plugin.name === 'react');
+let rootElement;
+window.$INITIALIZE_COMPONENT_GUI = function initializeComponentGui(components) {
+  if (rootElement) {
+    rootElement.forceUpdate();
+    return;
+  }
 
-    ReactDOM.render(
-      (activePlugin.frontendPlugin(Component)),
-      document.getElementById('root')
-    );
-  };
-} else {
-  let rootElement;
-  window.$INITIALIZE_COMPONENT_GUI = function initializeComponentGui(components) {
-    if (rootElement) {
-      rootElement.forceUpdate();
-      return;
-    }
+  const navigationStore = createNavigationStore(components);
 
-    const navigationStore = createNavigationStore(components);
+  // Generate a view per user component that renders the frontend part of the
+  // plugins for each component
+  const routes = map(components, (component, componentPath) => (
+    <Route
+      key={componentPath}
+      path={componentPath}
+      component={() => (
+        <Plugins
+          componentPath={componentPath}
+          componentData={component}
+          navigationStore={navigationStore}
+        />
+      )}
+    />
+  ));
 
-    // Generate a view per user component that renders the frontend part of the
-    // plugins for each component
-    const routes = map(components, (component, componentPath) => (
+  const appRoute = (<Route
+    path="/"
+    component={(props) => (
+      <App {...props} navigationStore={navigationStore} />
+    )}
+  >
+    {routes}
+  </Route>);
+
+  rootElement = ReactDOM.render(
+    (<Router history={hashHistory}>
+      {appRoute}
       <Route
-        key={componentPath}
-        path={componentPath}
-        component={() => (
-          <Plugins
-            componentPath={componentPath}
-            componentData={component}
-            navigationStore={navigationStore}
-          />
+        path="*"
+        component={(props) => (
+          <FourOhFour {...props} navigationStore={navigationStore} />
         )}
       />
-    ));
-
-    const appRoute = (<Route
-      path="/"
-      component={(props) => (
-        <App {...props} navigationStore={navigationStore} />
-      )}
-    >
-      {routes}
-    </Route>);
-
-    rootElement = ReactDOM.render(
-      (<Router history={hashHistory}>
-        {appRoute}
-        <Route
-          path="*"
-          component={(props) => (
-            <FourOhFour {...props} navigationStore={navigationStore} />
-          )}
-        />
-      </Router>),
-      document.getElementById('carte-blanche-root')
-    );
-  };
-}
+    </Router>),
+    document.getElementById('carte-blanche-root')
+  );
+};

client/iframe-client.js

@@ -0,0 +1,20 @@
+/**
+ * Main entry point for the CarteBlanche iframes
+ */
+
+import ReactDOM from 'react-dom';
+import find from 'lodash/find';
+
+window.$INITIALIZE_COMPONENT_GUI = function initializeComponentGui(components) {
+  const componentData = components[window.COMPONENT_PATH];
+  let Component = componentData.getCompiledComponent();
+  if (Component.default) {
+    Component = Component.default;
+  }
+  const activePlugin = find(componentData.getMeta(), (plugin) => plugin.name === 'react');
+
+  ReactDOM.render(
+    (activePlugin.frontendPlugin(Component)),
+    document.getElementById('root')
+  );
+};

client/webpack.prod.babel.js

@@ -7,12 +7,13 @@ export default {
   devtool: 'eval',
   output: {
     path: path.join(__dirname, '../webpack-plugin/src/assets/'),
-    filename: 'client-bundle.js',
+    filename: '[name]-bundle.js',
     publicPath: '/',
   },
-  entry: [
-    path.join(__dirname, './client.js'),
-  ],
+  entry: {
+    client: path.join(__dirname, './client.js'),
+    'iframe-client': path.join(__dirname, './iframe-client.js'),
+  },
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {

plugins/react/frontend/components/common/IFrame/index.js

@@ -30,7 +30,7 @@ const createHtml = (componentPath, dest, userFiles, injectTags) => (
       <script>
         ${userFiles && userFiles.scripts.join('\n')}
       </script>
-      <script src="${(dest) ? `/${path.join(dest, 'client-bundle.js')}` : 'client-bundle.js'}"></script>
+      <script src="${(dest) ? `/${path.join(dest, 'iframe-client-bundle.js')}` : 'iframe-client-bundle.js'}"></script>
       <script src="${(dest) ? `/${path.join(dest, 'user-bundle.js')}` : 'user-bundle.js'}"></script>
     </body>
   </html>

webpack-plugin/src/apply.js

@@ -64,7 +64,10 @@ function apply(compiler) {
   const clientAssets = {
     'index.html': createHTML(dest),
     'client-bundle.js': fs.readFileSync(path.resolve(__dirname, './assets/client-bundle.js')),
-    'client-bundle.css': fs.readFileSync(path.resolve(__dirname, './assets/main.css')),
+    'client-bundle.css': fs.readFileSync(path.resolve(__dirname, './assets/client.css')),
+    'iframe-client-bundle.js': fs.readFileSync(
+      path.resolve(__dirname, './assets/iframe-client-bundle.js')
+    ),
   };
 
   compiler.plugin('emit', (compilation, callback) => {