split styled-components into their own package

packages/vulcan-lib/lib/client/main.js

@@ -1,7 +1,6 @@
 import './auth.js';
 
 export * from '../modules/index.js';
-export * from './mongo_redux.js';
 export * from './render_context.js';
 export * from './inject_data.js';
 

packages/vulcan-lib/lib/modules/index.js

@@ -7,7 +7,6 @@ import './deep_extend.js';
 // import './intl_polyfill.js';
 // import './graphql.js';
 import './icons.js';
-import './mongo_redux.js';
 
 export * from './components.js';
 export * from './collections.js';

packages/vulcan-lib/lib/server/apollo-ssr/components/AppGenerator.jsx

@@ -4,11 +4,7 @@
 import React from 'react';
 import { ApolloProvider } from 'react-apollo';
 import { StaticRouter } from 'react-router';
-import { runCallbacks } from '../../../modules'
 
-// TODO:
-// Problem: Components is only created on Startup
-// so Components.App is not defined here
 import { Components } from 'meteor/vulcan:lib'
 
 import { CookiesProvider } from 'react-cookie';
@@ -30,12 +26,6 @@ const AppGenerator = ({ req, apolloClient, context }) => {
       </StaticRouter>
     </ApolloProvider>
   );
-  // run user registered callbacks
-  const WrappedApp = runCallbacks({
-    name: 'router.server.wrapper', 
-    iterator: App, 
-    properties: { req, context, apolloClient }
-  });
-  return WrappedApp;
+  return App
 };
 export default AppGenerator;

packages/vulcan-lib/lib/server/apollo-ssr/renderPage.js

@@ -23,7 +23,8 @@ const makePageRenderer = ({ computeContext }) => {
         // this avoids caching server side
         const client = await createClient({req, computeContext});
 
-        // TODO? do we need this?
+        // Used by callbacks to handle side effects
+        // E.g storing the stylesheet generated by styled-components
         const context = {};
 
 
@@ -31,16 +32,22 @@ const makePageRenderer = ({ computeContext }) => {
         // middlewares at this point
         // @see https://github.com/meteor/meteor-feature-requests/issues/174#issuecomment-441047495
 
-        const Main = () => <AppGenerator req={req} apolloClient={client} context={context} />
+        const App = <AppGenerator req={req} apolloClient={client} context={context} />
 
+        // run user registered callbacks that wraps the React app
+        const WrappedApp = runCallbacks({
+            name: 'router.server.wrapper',
+            iterator: App,
+            properties: { req, context, apolloClient: client }
+        });
 
         // equivalent to calling getDataFromTree and then renderToStringWithData
-        const content = await renderToStringWithData(<Main />)
+        const htmlContent = await renderToStringWithData(WrappedApp)
 
         // TODO: there should be a cleaner way to set this wrapper
         // id must always match the client side start.jsx file
-        const wrappedContent = `<div id="react-app">${content}</div>`
-        sink.appendToBody(wrappedContent)
+        const wrappedHtmlContent = `<div id="react-app">${htmlContent}</div>`
+        sink.appendToBody(wrappedHtmlContent)
         // TODO: this sounds cleaner but where do we add the <div id="react-app"> ?
         //sink.renderIntoElementById('react-app', content)
 
@@ -54,6 +61,8 @@ const makePageRenderer = ({ computeContext }) => {
             <ApolloState initialState={initialState} />
         )
         sink.appendToBody(serializedApolloState)
+
+        // post render callback
         runCallbacks({
             name: 'router.server.postRender',
             iterator: sink,

packages/vulcan-redux/package.js

@@ -8,22 +8,11 @@ Package.describe({
 Package.onUse(function(api) {
   api.versionsFrom('1.6.1');
 
-  var packages = [
+
+  api.use([
     'vulcan:core@1.12.8',
-  ];
-
-  api.use(packages);
-
-  api.imply(packages);
-
-  api.export(['Vulcan']);
+  ]);
 
   api.mainModule('lib/server/main.js', 'server');
   api.mainModule('lib/client/main.js', 'client');
-});
-
-Package.onTest(function(api) {
-  api.use(['ecmascript', 'meteortesting:mocha', 'vulcan:lib']);
-  api.mainModule('./test/index.js');
-  api.mainModule('./test/server/index.js', 'server');
-});
+});

packages/vulcan-styled-components/lib/client/main.js

@@ -0,0 +1 @@
+export * from '../modules/index';

packages/vulcan-styled-components/lib/server/main.js

@@ -0,0 +1,4 @@
+import setupStyledComponents from './setupStyledComponents';
+setupStyledComponents();
+
+export * from '../modules/index';

packages/vulcan-styled-components/lib/server/setupStyledComponents.js

@@ -0,0 +1,23 @@
+// Setup SSR
+import { ServerStyleSheet } from 'styled-components'
+import { addCallback } from 'meteor/vulcan:core';
+
+const setupStyledComponents = () => {
+    addCallback('router.server.wrapper', function collectStyles(app, { context }) {
+        const stylesheet = new ServerStyleSheet();
+        // @see https://www.styled-components.com/docs/advanced/#example
+        const wrappedApp =  stylesheet.collectStyles(app)
+        // store the stylesheet to reuse it later
+        context.stylesheet = stylesheet
+        return wrappedApp
+
+    })
+
+    addCallback('router.server.postRender', function appendStyleTags(sink, { context }) {
+        sink.appendToHead(context.stylesheet.getStyleTags())
+        return sink
+    })
+}
+
+
+export default setupStyledComponents

packages/vulcan-styled-components/package.js

@@ -0,0 +1,17 @@
+Package.describe({
+  name: 'vulcan:styled-components',
+  summary: 'Add Styled Components to Vulcan.',
+  version: '1.12.8',
+  git: 'https://github.com/VulcanJS/Vulcan.git'
+});
+
+Package.onUse(function(api) {
+  api.versionsFrom('1.6.1');
+
+  api.use([
+    'vulcan:core@1.12.8',
+  ]);
+
+  api.mainModule('lib/server/main.js', 'server');
+  api.mainModule('lib/client/main.js', 'client');
+});