Initial public release

Author: Akryum

packages/vue-ssr/README.md

@@ -1,5 +1,115 @@
 # Vue+Meteor SSR
 
+> Add Server-Side Rendering in your Vue+Meteor application
+
+## Installation:
+
+```
+meteor add akryum:vue-ssr
+```
+
+## Usage
+
+**:warning: All your client-side code should be available on the server (which means they shouldn't be in a `client` folder), and the code and libraries should be able to run on the server.**
+
+*:warning: vuex & apollo are not tested yet.*
+
+Wrap your Vue root instance in a `createApp` function and export it, alongside with the router instance:
+
+```javascript
+import Vue from 'vue'
+
+// Meteor Tracker integration
+import VueMeteorTracker from 'vue-meteor-tracker'
+Vue.use(VueMeteorTracker)
+
+import App from './ui/App.vue'
+import router from './router'
+
+function createApp () {
+  return {
+    app: new Vue({
+      el: '#app',
+      router,
+      ...App,
+    }),
+    router,
+  }
+}
+
+export default createApp
+```
+
+In your client code, start the app as usual:
+
+```javascript
+import { Meteor } from 'meteor/meteor'
+import CreateApp from './app'
+
+Meteor.startup(() => {
+  CreateApp()
+})
+```
+
+In your server code, you need to set the `VueSSR.createApp` method with a function that returns the Vue instance:
+
+```javascript
+import { VueSSR } from 'meteor/akryum:vue-ssr'
+import CreateApp from './app'
+
+VueSSR.createApp = function ({ url }) {
+  const { app, router } = CreateApp()
+  // Set the url in the router
+  router.push(url)
+  return app
+}
+```
+
+Returning a promise works too:
+
+```javascript
+VueSSR.createApp = function ({ url }) {
+  return new Promise((resolve, reject) => {
+    const { app, router } = CreateApp()
+    // Set the URL in the router
+    router.push(url)
+
+    router.onReady(() => {
+      const matchedComponents = router.getMatchedComponents()
+
+      // no matched routes
+      if (!matchedComponents.length) {
+        reject({ code: 404 })
+      }
+
+      // Can use components prefetch here...
+
+      resolve(app)
+    })
+  })
+}
+```
+
+Add the `<!--vue-ssr-outlet-->` comment in you HTML where you want to render the Vue app. If you don't, the app will be rendered at the beginning of the page body.
+
+You can change the replacing snippet by setting the `VUE_OUTLET` environment variable, or by setting the `VueSSR.outlet` property:
+
+```javascript
+VueSSR.outlet = '<!--my-app-here-->'
+```
+
+You can also customize the template of the rendered HTML with the `VueSSR.template` property:
+
+```javascript
+VueSSR.template = `
+<div class="app-wrapper">
+  <!--vue-ssr-outlet-->
+</div>
+`
+```
+
+*:warning: The CSS can flicker in developpement mode and load after the app is rendered. This is due to the HMR system having to append dynamic style tag in the page to get the fastest reloading possible. This is not the case in production mode (try running your app with `meteor --production`).*
+
 ---
 
 LICENCE ISC - Created by Guillaume CHAU (@Akryum)

packages/vue-ssr/compile-html.js

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "vue": "2.2.4",
-    "vue-router": "^2.3.0"
+    "vue-router": "^2.3.0",
+    "vue-meteor-tracker": "^1.2.0"
   }
 }

packages/vue-ssr/npm.json

@@ -1,34 +1,34 @@
 Package.describe({
   name: 'akryum:vue-ssr',
-  version: '0.0.1',
+  version: '0.1.0',
   summary: 'Render Vue server-side',
   git: 'https://github.com/Akryum/meteor-vue-component',
   documentation: 'README.md'
 });
 
-
-Package.registerBuildPlugin({
-  name: "compileStaticHtmlBatch",
-  use: [
-    'ecmascript@0.6.3',
-    'underscore@1.0.10',
-    'caching-html-compiler@1.1.1',
-    'templating-tools@1.1.1'
-  ],
-  sources: [
-    'compile-html.js'
-  ]
-});
-
 Package.onUse(function(api) {
   api.versionsFrom('1.4.3.1');
-  api.use('akryum:npm-check@0.0.3');
-  api.use('isobuild:compiler-plugin@1.0.0');
-  api.use('ecmascript');
+  api.use([
+    'isobuild:compiler-plugin@1.0.0',
+    'ecmascript',
+    'tracker',
+    'minimongo',
+    'underscore',
+    'webapp',
+    'mongo',
+    'routepolicy',
+    'url',
+    'akryum:npm-check@0.0.3',
+    'staringatlights:fast-render@2.16.2',
+    'staringatlights:inject-data@2.0.4',
+  ]);
   api.mainModule('server/index.js', 'server');
   api.export('VueSSR', 'server');
 });
 
 Npm.depends({
   'vue-server-renderer': '2.2.4',
+  'vue-ssr-html-stream': '2.2.0',
+  'cookie-parser': '1.4.1',
+  'cheerio': '0.20.0',
 })

packages/vue-ssr/package.js

@@ -0,0 +1,48 @@
+// server/ssr_context.js
+// stolen from https://github.com/kadirahq/flow-router/blob/ssr/server/ssr_context.js
+
+export default class SsrContext {
+  constructor() {
+    this._collections = {};
+  }
+
+  getCollection(collName) {
+    let collection = this._collections[collName];
+    if (!collection) {
+      const minimongo = Package.minimongo;
+      collection = this._collections[collName] = new minimongo.LocalCollection();
+    }
+
+    return collection;
+  }
+
+  addSubscription(name, params) {
+    const fastRenderContext = FastRender.frContext.get();
+    if (!fastRenderContext) {
+      throw new Error(
+        `Cannot add a subscription: ${name} without FastRender Context`
+      );
+    }
+
+    const data = fastRenderContext.subscribe(name, ...params);
+    this.addData(data);
+  }
+
+  addData(data) {
+    _.each(data, (collDataCollection, collectionName) => {
+      const collection = this.getCollection(collectionName);
+      collDataCollection.forEach((collData) => {
+        collData.forEach((item) => {
+          const existingDoc = collection.findOne(item._id);
+          if (existingDoc) {
+            const newDoc = { ...existingDoc, ...item };
+            delete newDoc._id;
+            collection.update(item._id, { $set: newDoc });
+          } else {
+            collection.insert(item);
+          }
+        });
+      });
+    });
+  }
+}