From 51d5eb20ff2792de288e998cc1964d9248861265 Mon Sep 17 00:00:00 2001 From: Chris Visser <2496739+chris-visser@users.noreply.github.com> Date: Sat, 13 Jun 2020 10:59:21 +0200 Subject: [PATCH 1/3] Refactor vue-ssr index. fix console warning --- packages/vue-router2/plugin/plugin.js | 2 - packages/vue-ssr/package.js | 4 +- packages/vue-ssr/server/data.js | 2 + packages/vue-ssr/server/index.js | 158 +++++------------- .../vue-ssr/server/lib/createDefaultApp.js | 9 + .../vue-ssr/server/lib/defaultAppTemplate.js | 21 +++ packages/vue-ssr/server/lib/isAppUrl.js | 14 ++ 7 files changed, 89 insertions(+), 121 deletions(-) create mode 100644 packages/vue-ssr/server/lib/createDefaultApp.js create mode 100644 packages/vue-ssr/server/lib/defaultAppTemplate.js create mode 100644 packages/vue-ssr/server/lib/isAppUrl.js diff --git a/packages/vue-router2/plugin/plugin.js b/packages/vue-router2/plugin/plugin.js index 839bbbf..957067b 100644 --- a/packages/vue-router2/plugin/plugin.js +++ b/packages/vue-router2/plugin/plugin.js @@ -38,9 +38,7 @@ class VueRouterCompiler extends CachingCompiler { let map = '' let babelOptions = Babel.getDefaultOptions() - babelOptions.sourceMap = true babelOptions.filename = babelOptions.sourceFileName = sourcePath - babelOptions.sourceMapTarget = babelOptions.filename + '.map' // Babel compilation let output = Babel.compile(code, babelOptions) diff --git a/packages/vue-ssr/package.js b/packages/vue-ssr/package.js index 7134a93..68d02a5 100644 --- a/packages/vue-ssr/package.js +++ b/packages/vue-ssr/package.js @@ -19,7 +19,7 @@ Package.onUse(function (api) { 'routepolicy', 'url', 'akryum:npm-check@0.1.1', - 'staringatlights:fast-render@3.2.0', + 'thespider:fast-render@3.2.1', 'ejson', 'server-render', ]) @@ -28,6 +28,6 @@ Package.onUse(function (api) { }) Npm.depends({ - 'vue-server-renderer': '2.6.10', + 'vue-server-renderer': '2.6.11', 'cookie-parser': '1.4.4', }) diff --git a/packages/vue-ssr/server/data.js b/packages/vue-ssr/server/data.js index cd3607d..a9a07c3 100644 --- a/packages/vue-ssr/server/data.js +++ b/packages/vue-ssr/server/data.js @@ -5,6 +5,7 @@ export default function patchSubscribeData (VueSSR) { const originalSubscribe = Meteor.subscribe Meteor.subscribe = function (pubName, ...params) { + console.log('SUBSCRIBE TO', pubName) const ssrContext = VueSSR.ssrContext.get() if (ssrContext) { VueSSR.inSubscription.withValue(true, () => { @@ -37,6 +38,7 @@ export default function patchSubscribeData (VueSSR) { const collection = ssrContext.getCollection(collName) const cursor = collection.find(selector, options) + console.log('SSR LOCAL COLLECTION WAS USED') return cursor } diff --git a/packages/vue-ssr/server/index.js b/packages/vue-ssr/server/index.js index de7e855..1bdbc3c 100644 --- a/packages/vue-ssr/server/index.js +++ b/packages/vue-ssr/server/index.js @@ -1,62 +1,22 @@ -import Vue from 'vue' import { createRenderer } from 'vue-server-renderer' import { WebApp } from 'meteor/webapp' import cookieParser from 'cookie-parser' import { onPageLoad } from 'meteor/server-render' import { FastRender } from 'meteor/staringatlights:fast-render' +import defaultAppTemplate from './lib/defaultAppTemplate' +import createDefaultApp from './lib/createDefaultApp' + import SsrContext from './context' import patchSubscribeData from './data' -function IsAppUrl (req) { - var url = req.url - if (url === '/favicon.ico' || url === '/robots.txt') { - return false - } - - if (url === '/app.manifest') { - return false - } - - // Avoid serving app HTML for declared routes such as /sockjs/. - if (RoutePolicy.classify(url)) { - return false - } - return true -} +export { default as IsAppUrl } from './lib/isAppUrl' -VueSSR = {} +const VueSSR = {} VueSSR.outlet = process.env.VUE_OUTLET || 'app' - -VueSSR.defaultAppTemplate = ` -
-

This is not what you expected

-

- You need to tell vue-ssr how to create your app by setting the VueSSR.createApp function. It should return a new Vue instance. -

-

- Here is an example of server-side code: -

- 
import Vue from 'vue'
-import { VueSSR } from 'meteor/akryum:vue-ssr'
-
-function createApp () {
-  return new Vue({
-    render: h => h('div', 'Hello world'),
-  })
-}
-
-VueSSR.createApp = createApp
-
-` - -VueSSR.createApp = function () { - return new Vue({ - template: VueSSR.defaultAppTemplate, - }) -} - +VueSSR.defaultAppTemplate = defaultAppTemplate +VueSSR.createApp = createDefaultApp() VueSSR.ssrContext = new Meteor.EnvironmentVariable() VueSSR.inSubscription = new Meteor.EnvironmentVariable() // <-- needed in data.js @@ -64,7 +24,7 @@ patchSubscribeData(VueSSR) const renderer = createRenderer() -function writeServerError (sink) { +function writeServerError(sink) { sink.appendToBody('Server Error') } @@ -83,63 +43,42 @@ onPageLoad(sink => new Promise((resolve, reject) => { // https://github.com/kadirahq/flow-router/blob/ssr/server/route.js#L61 const ssrContext = new SsrContext() - VueSSR.ssrContext.withValue(ssrContext, () => { + VueSSR.ssrContext.withValue(ssrContext, async () => { try { - // const frData = InjectData.getData(res, 'fast-render-data') - // if (frData) { - // ssrContext.addData(frData.collectionData) - // } - // Vue const context = { url: req.url } - let asyncResult + const result = VueSSR.createApp(context) - if (result && typeof result.then === 'function') { - asyncResult = result - } else { - asyncResult = Promise.resolve(result) - } - - asyncResult.then(app => { - renderer.renderToString( - app, - context, - (error, html) => { - if (error) { - console.error(error) - writeServerError(sink) - return - } - - // const frContext = FastRender.frContext.get() - // const data = frContext.getData() - // // InjectData.pushData(res, 'fast-render-data', data) - // const injectData = EJSON.stringify({ - // 'fast-render-data': data, - // }) - // // sink.appendToHead(``) - - let appendHtml - if (typeof context.appendHtml === 'function') appendHtml = context.appendHtml() - - const head = ((appendHtml && appendHtml.head) || context.head) || '' - const body = ((appendHtml && appendHtml.body) || context.body) || '' - const js = ((appendHtml && appendHtml.js) || context.js) || '' - - const script = js && `` - - sink.renderIntoElementById(VueSSR.outlet, html) - sink.appendToHead(head) - sink.appendToBody([body, script]) - - resolve() - }, - ) - }).catch(e => { - console.error(e) - writeServerError(sink) - resolve() - }) + + const asyncResult = typeof result.then === 'function' ? result : Promise.resolve(result) + + const app = await asyncResult + + renderer.renderToString( + app, + context, + (error, html) => { + if (error) { + console.error(error) + writeServerError(sink) + return + } + + const appendHtml = typeof context.appendHtml === 'function' && context.appendHtml() + + const head = ((appendHtml && appendHtml.head) || context.head) || '' + const body = ((appendHtml && appendHtml.body) || context.body) || '' + const js = ((appendHtml && appendHtml.js) || context.js) || '' + + const script = js && `` + + sink.renderIntoElementById(VueSSR.outlet, html) + sink.appendToHead(head) + sink.appendToBody([body, script]) + + resolve() + } + ) } catch (error) { console.error(error) writeServerError(sink) @@ -149,19 +88,4 @@ onPageLoad(sink => new Promise((resolve, reject) => { }) })) -return - -/* eslint-disable */ - -Meteor.bindEnvironment(function () { - WebApp.rawConnectHandlers.use(cookieParser()) - - WebApp.connectHandlers.use((req, res, next) => { - if (!IsAppUrl(req)) { - next() - return - } - - - }) -})() +export { VueSSR } diff --git a/packages/vue-ssr/server/lib/createDefaultApp.js b/packages/vue-ssr/server/lib/createDefaultApp.js new file mode 100644 index 0000000..ebe8efa --- /dev/null +++ b/packages/vue-ssr/server/lib/createDefaultApp.js @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import defaultAppTemplate from './defaultAppTemplate' + +export default () => { + return new Vue({ + template: defaultAppTemplate + }) +} diff --git a/packages/vue-ssr/server/lib/defaultAppTemplate.js b/packages/vue-ssr/server/lib/defaultAppTemplate.js new file mode 100644 index 0000000..08f5d77 --- /dev/null +++ b/packages/vue-ssr/server/lib/defaultAppTemplate.js @@ -0,0 +1,21 @@ +export default ` +
+

This is not what you expected

+

+ You need to tell vue-ssr how to create your app by setting the VueSSR.createApp function. It should return a new Vue instance. +

+

+ Here is an example of server-side code: +

+ 
import Vue from 'vue'
+import { VueSSR } from 'meteor/akryum:vue-ssr'
+
+function createApp () {
+  return new Vue({
+    render: h => h('div', 'Hello world'),
+  })
+}
+
+VueSSR.createApp = createApp
+
+` diff --git a/packages/vue-ssr/server/lib/isAppUrl.js b/packages/vue-ssr/server/lib/isAppUrl.js new file mode 100644 index 0000000..91f44f2 --- /dev/null +++ b/packages/vue-ssr/server/lib/isAppUrl.js @@ -0,0 +1,14 @@ +import { RoutePolicy } from 'meteor/routepolicy' + +const nonAppUrls = ['/favicon.ico', '/robots.txt', '/app.manifest'] + +export default (req) => { + const url = req.url + + if (nonAppUrls.includes(url)) { + return false + } + + // Avoid serving app HTML for declared routes such as /sockjs/. + return !RoutePolicy.classify(url) +} From f07673ef590d370163a18136edf68c18f19d879d Mon Sep 17 00:00:00 2001 From: Chris Visser <2496739+chris-visser@users.noreply.github.com> Date: Sat, 13 Jun 2020 12:47:00 +0200 Subject: [PATCH 2/3] Switch to maintained fast-render --- packages/vue-ssr/.versions | 2 +- packages/vue-ssr/package.js | 2 +- packages/vue-ssr/server/context.js | 2 +- packages/vue-ssr/server/index.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vue-ssr/.versions b/packages/vue-ssr/.versions index 7214cb8..159e892 100644 --- a/packages/vue-ssr/.versions +++ b/packages/vue-ssr/.versions @@ -51,7 +51,7 @@ routepolicy@1.0.12 server-render@0.3.0 service-configuration@1.0.11 socket-stream-client@0.1.0 -staringatlights:fast-render@2.16.5 +cloudspider:fast-render@3.2.1 staringatlights:inject-data@2.0.5 tracker@1.1.3 underscore@1.0.10 diff --git a/packages/vue-ssr/package.js b/packages/vue-ssr/package.js index 68d02a5..0167741 100644 --- a/packages/vue-ssr/package.js +++ b/packages/vue-ssr/package.js @@ -19,7 +19,7 @@ Package.onUse(function (api) { 'routepolicy', 'url', 'akryum:npm-check@0.1.1', - 'thespider:fast-render@3.2.1', + 'cloudspider:fast-render@3.2.1', 'ejson', 'server-render', ]) diff --git a/packages/vue-ssr/server/context.js b/packages/vue-ssr/server/context.js index e0e00ed..a7dda40 100644 --- a/packages/vue-ssr/server/context.js +++ b/packages/vue-ssr/server/context.js @@ -1,7 +1,7 @@ // server/ssr_context.js // stolen from https://github.com/kadirahq/flow-router/blob/ssr/server/ssr_context.js -import { FastRender } from 'meteor/staringatlights:fast-render' +import { FastRender } from 'meteor/cloudspider:fast-render' export default class SsrContext { constructor () { diff --git a/packages/vue-ssr/server/index.js b/packages/vue-ssr/server/index.js index 1bdbc3c..da965d4 100644 --- a/packages/vue-ssr/server/index.js +++ b/packages/vue-ssr/server/index.js @@ -2,7 +2,7 @@ import { createRenderer } from 'vue-server-renderer' import { WebApp } from 'meteor/webapp' import cookieParser from 'cookie-parser' import { onPageLoad } from 'meteor/server-render' -import { FastRender } from 'meteor/staringatlights:fast-render' +import { FastRender } from 'meteor/cloudspider:fast-render' import defaultAppTemplate from './lib/defaultAppTemplate' import createDefaultApp from './lib/createDefaultApp' From b1d8dbbf2a997cb3130c8542dab8f54f83ca1b8e Mon Sep 17 00:00:00 2001 From: Chris Visser <2496739+chris-visser@users.noreply.github.com> Date: Sat, 13 Jun 2020 12:48:41 +0200 Subject: [PATCH 3/3] Remove console log --- packages/vue-ssr/server/data.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/vue-ssr/server/data.js b/packages/vue-ssr/server/data.js index a9a07c3..cd3607d 100644 --- a/packages/vue-ssr/server/data.js +++ b/packages/vue-ssr/server/data.js @@ -5,7 +5,6 @@ export default function patchSubscribeData (VueSSR) { const originalSubscribe = Meteor.subscribe Meteor.subscribe = function (pubName, ...params) { - console.log('SUBSCRIBE TO', pubName) const ssrContext = VueSSR.ssrContext.get() if (ssrContext) { VueSSR.inSubscription.withValue(true, () => { @@ -38,7 +37,6 @@ export default function patchSubscribeData (VueSSR) { const collection = ssrContext.getCollection(collName) const cursor = collection.find(selector, options) - console.log('SSR LOCAL COLLECTION WAS USED') return cursor }