feature: package vue-ssr-jit

SmallComfort · SmallComfort · commit 17f5cbd55efc · 2020-05-06T08:33:18.000+08:00
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "dev:weex:compiler": "rollup -w -c scripts/config.js --environment TARGET:weex-compiler ",
     "build": "node scripts/build.js",
     "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
+    "build:ssr-jit": "rollup -w -c scripts/config.js --environment TARGET:vue-ssr-jit-prod",
     "build:weex": "npm run build -- weex",
     "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr && npm run test:weex",
     "test:unit": "karma start test/unit/karma.unit.config.js",
diff --git a/packages/vue-ssr-jit/README.md b/packages/vue-ssr-jit/README.md
@@ -1,116 +1,69 @@
 # vue-ssr-jit
 
-vue ssr 运行时优化
-
-## 安装
-```
-npm install --save-dev vue-ssr-jit
-```
-
-## 使用
-> vue 最低版本为 2.6.x ，vue-loader 最低版本为 15.x
-
-```js
-/*
- * 将官方 ssr 渲染器替换成如下渲染器
- */
-const { createBundleRenderer } = require('vue-ssr')
+A just in time compilation technique for server-side rendering. Use the Diff algorithm to derive dynamic and static nodes at runtime, and then generate and run a new rendering tree to dramatically increase rendering performance.
+
+The following vue template: 
+```html
+<template>
+  <div>
+    <router-link to="/">{{name}}</router-link>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      name: 'vue-ssr-jit'
+    }
+  }
+}
+</script>
 ```
 
-如下为要被替换的官方渲染器
+Code generated by the official compiler: 
 ```js
-const { createBundleRenderer } = require('vue-server-renderer')
+_c("div", [
+  _c("router-link", {attrs: { to: "/" }}, [
+    _vm._v(_vm._s(_vm.name))
+  ]),
+  _c("router-view")
+], 1)
 ```
 
-vue-loader webpack 配置 修改如下，添加自定义 compiler
+Code generated using vue-ssr-jit: 
 ```js
-const compiler = require('vue-ssr/compiler')
-
-...
-
-{
-    test: /\.vue$/,
-    loader: 'vue-loader',
-    options: {
-        compiler,
-    }
-}
+_c("div", [
+  _vm._ssrNode(
+    "<a href=\"/\" class=\"router-link-active\">vue-ssr-jit</a>"
+  ),
+  _c("router-view")
+], 1);
 ```
 
-
-#### entry-server.js 写法一
-适用于在实例化前就需要载入数据的应用
+## Use
 
 ```js
-/* entry-server.js */
-
-import { createApp } from './app'
-
-/*
- * base 方法用于导出一个静态的 vue 实例
- */
-export const base = () => {
-    const {app} = createApp()
-    return Promise.resolve(app)
-}
-
-/*
- * 默认导出的 vue 实例
- */
-export default (context) => {
-    return base().then((app) => {
-        return context.initSyncData(app.$store, context.payload).then(() => {
-            context.state = app.$store.state
-            return app
-        })
-    })
-}
+npm install --save vue-ssr-jit
 ```
 
-#### entry-server.js 写法二
-适用于在渲染过程中载入数据的应用
-
 ```js
-/* entry-server.js */
-
-import { createApp } from './app'
-
-/*
- * 直接导出 Vue 实例，渲染器自动根据动静配置选择是否载入 serverPrefetch
- */
-export default (context) => {
-    const {app} = createApp()
-    return Promise.resolve(app)
-}
+const { createBundleRenderer } = require('vue-ssr-jit')
 ```
 
-## 注意
+`createBundleRenderer` is consistent with the official function interface of the same name, see the [vue ssr guide](https://ssr.vuejs.org/api/#createbundlerenderer)
 
-ssr 推导需要取一份静态实例作为优化基准，在静态实例服务端渲染周期内不要出现与特定用户相关的代码操作，类似如下操作不建议使用，除非你确定此数据与用户无关
+It is recommended to use `serverPrefetch` for prefetching data, and it is also supported to use `asyncData` for prefetching data, see [demo](https://github.com/SmallComfort/vue-ssr-jit-demo)
 
-```js
-data() {
-    let cookie = cookie
-    try {
-        cookie = document.cookie
-    } catch(e) {
-        // 以某种方式取到了后台 cookie
-        cookie = global.xxx.cookie
-    }
-    return {
-        cookie
-    }
-},
-```
+## Implementation principle
 
-cookie 在 serverPrefetch 方法内可被使用，以及在服务端渲染周期结束后也可以被使用，例如：`mounted`，`updated` 等等
+[Vue SSR Just In Time Compilation](/PRINCIPLE.md)
 
-可以使用如下插件检测页面代码是否在服务端渲染周期内使用了 cookie
-```js
-/* entry-client.js*/
-import ssrSafety from 'vue-ssr/ssr-safety'
+## Be careful
 
-Vue.use(ssrSafety)
+This technology is currently in the experimental stage.
 
-```
+## License
 
+[MIT](http://opensource.org/licenses/MIT)
diff --git a/packages/vue-ssr-jit/build.dev.js b/packages/vue-ssr-jit/build.dev.js
@@ -6575,7 +6575,6 @@ function renderSSRStyle (
 
 /*  */
 
-
 var isJS = function (file) { return /\.js(\?[^.]+)?$/.test(file); };
 
 var isCSS = function (file) { return /\.css(\?[^.]+)?$/.test(file); };
@@ -6695,7 +6694,7 @@ function getVNodeRenderAst(ast) {
     noScope: true,
     ReturnStatement: function ReturnStatement(path) {
       var arg = path.node.argument;
-      if (isCCallExpression(arg) || isSSRNodeCallExpression(arg) || isHCallExpression(arg)) {
+      if (isCCallExpression(arg) || isSSRNodeCallExpression(arg)) {
         vNodeAst = arg;
       }
       path.stop();
@@ -6752,22 +6751,28 @@ function isCCallExpression(node) {
 }
 
 /**
- * check if a call expression has name 'h'
+ * check if a call expression has name '_l'
  * match code example:
- *    h(__WEBPACK_IMPORTED_MODULE_1__App_vue__["a"])
+ *    _vm._l()
  * @param {*} node
  */
-function isHCallExpression(node) {
+function isLCallExpression(node) {
   if (!types.isCallExpression(node)) {
     return false
   }
   if (!Array.isArray(node.arguments)) {
     return false
   }
-  if (!types.isIdentifier(node.callee)) {
+  if (!types.isMemberExpression(node.callee)) {
+    return false
+  }
+  if (!types.isIdentifier(node.callee.object)) {
+    return false
+  }
+  if (!types.isIdentifier(node.callee.property)) {
     return false
   }
-  if (node.callee.name === 'h') {
+  if (node.callee.object.name === '_vm' && node.callee.property.name === '_l') {
     return true
   }
 
@@ -22854,7 +22859,6 @@ var lib_2 = lib.parseExpression;
 var lib_3 = lib.tokTypes;
 
 /*  */
-
 var vm$2 = require('vm');
 
 var onCompilationError$1 = function (err, vm) {
@@ -23010,6 +23014,7 @@ function calcuConditionalExpression(context, ast) {
 /**
  * 设置 VNode 子节点的抽象语法树
  * 对于条件判断语句，通过 VNode 上下文对其求值
+ * 如果子语法树里面有循环语句，则当前语法树和子语法树全部都置为 unMatchedAst
  * @param {VNode} node VNode 节点
  * @param {Object} ast 抽象语法树
  */
@@ -23019,6 +23024,16 @@ function setVNodeChildrenAst(node, ast, context) {
 
   var unMatchedAst = !astChildren || astChildren.elements.length !== nodeChildren.length;
 
+  // 如果子语法树里面有循环语句，则当前语法树和子语法树全部都置为 unMatchedAst
+  if (astChildren && Array.isArray(astChildren.elements)) {
+    astChildren.elements.forEach(function (node) {
+      if (isLCallExpression(node)) {
+        ast.unMatchedAst = true;
+        unMatchedAst = true;
+      }
+    });
+  }
+
   if (unMatchedAst === false) {
     node.children.forEach(function (v, i) {
       var ast = astChildren.elements[i];
@@ -23395,8 +23410,13 @@ function createPatchFunction (ref) {
       var staticVNode = staticComponent._render();
       var dynamicVNode = dynamiComponent._render();
 
-      // todo 这里的 ast 生成是否可以更统一更严格：仅模板语法生成 ast，否则仅检测当前组件是否全静态
-      staticVNode.ast = getVNodeRenderAst(staticAst);
+      var childAst = getVNodeRenderAst(staticAst);
+      if (childAst) {
+        staticVNode.ast = childAst;
+      } else {
+        staticVNode.ast = Object.assign(staticAst, { unMatchedAst: true });
+      }
+
 
       patchContext.patchStates.push({
         type: 'Component',
@@ -23522,6 +23542,7 @@ function createBundleRendererCreator (
           var ssrRenderTree = ssrRenderMap[ssrRenderUrl] && ssrRenderMap[ssrRenderUrl].tree;
 
           if (!ssrRenderTree) {
+            console.log('start parse ssr render');
             return new Promise(function (resolve) {
               Promise.all([base(context), runner(context)]).then(function (res) {
                 var ssrRender = {};
@@ -23546,6 +23567,9 @@ function createBundleRendererCreator (
                   if (e && e.success) {
                     context.ssrRenderTree = e.ssrRenderTree;
                     ssrRender.tree = e.ssrRenderTree;
+                    {
+                      console.log('new ssrRenderTree: ', e.ssrRenderTree);
+                    }
                     resolve(res[1]);
                   } else {
                     rewriteErrorTrace(e, maps);
diff --git a/packages/vue-ssr-jit/build.prod.js b/packages/vue-ssr-jit/build.prod.js
