feat(ssr): support getSSRProps for vnode directives

vuejs · Mar 16, 2020 · c450ede · c450ede
1 parent a46f3b3
commit c450ede
Show file tree

Hide file tree

Showing 5 changed files with 458 additions and 6 deletions.
diff --git a/packages/runtime-core/src/directives.ts b/packages/runtime-core/src/directives.ts
@@ -14,7 +14,7 @@ return withDirectives(h(comp), [
 import { VNode } from './vnode'
 import { isFunction, EMPTY_OBJ, makeMap, EMPTY_ARR } from '@vue/shared'
 import { warn } from './warning'
-import { ComponentInternalInstance } from './component'
+import { ComponentInternalInstance, Data } from './component'
 import { currentRenderingInstance } from './componentRenderUtils'
 import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
 import { ComponentPublicInstance } from './componentProxy'
@@ -35,13 +35,19 @@ export type DirectiveHook<T = any> = (
   prevVNode: VNode<any, T> | null
 ) => void
 
+export type SSRDirectiveHook = (
+  binding: DirectiveBinding,
+  vnode: VNode
+) => Data | undefined
+
 export interface ObjectDirective<T = any> {
   beforeMount?: DirectiveHook<T>
   mounted?: DirectiveHook<T>
   beforeUpdate?: DirectiveHook<T>
   updated?: DirectiveHook<T>
   beforeUnmount?: DirectiveHook<T>
   unmounted?: DirectiveHook<T>
+  getSSRProps?: SSRDirectiveHook
 }
 
 export type FunctionDirective<T = any> = DirectiveHook<T>
@@ -81,7 +87,7 @@ const directiveToVnodeHooksMap = /*#__PURE__*/ [
       const prevBindings = prevVnode ? prevVnode.dirs! : EMPTY_ARR
       for (let i = 0; i < bindings.length; i++) {
         const binding = bindings[i]
-        const hook = binding.dir[key]
+        const hook = binding.dir[key] as DirectiveHook
         if (hook != null) {
           if (prevVnode != null) {
             binding.oldValue = prevBindings[i].value

diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts
@@ -218,7 +218,7 @@ function callModelHook(
   binding: DirectiveBinding,
   vnode: VNode,
   prevVNode: VNode | null,
-  hook: keyof ObjectDirective
+  hook: 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated'
 ) {
   let modelToUse: ObjectDirective
   switch (el.tagName) {
@@ -243,3 +243,24 @@ function callModelHook(
   const fn = modelToUse[hook]
   fn && fn(el, binding, vnode, prevVNode)
 }
+
+// SSR vnode transforms
+if (__NODE_JS__) {
+  vModelText.getSSRProps = ({ value }) => ({ value })
+
+  vModelRadio.getSSRProps = ({ value }, vnode) => {
+    if (vnode.props && looseEqual(vnode.props.value, value)) {
+      return { checked: true }
+    }
+  }
+
+  vModelCheckbox.getSSRProps = ({ value }, vnode) => {
+    if (isArray(value)) {
+      if (vnode.props && looseIndexOf(value, vnode.props.value) > -1) {
+        return { checked: true }
+      }
+    } else if (value) {
+      return { checked: true }
+    }
+  }
+}
diff --git a/packages/runtime-dom/src/directives/vShow.ts b/packages/runtime-dom/src/directives/vShow.ts
@@ -40,6 +40,14 @@ export const vShow: ObjectDirective<VShowElement> = {
   }
 }
 
+if (__NODE_JS__) {
+  vShow.getSSRProps = ({ value }) => {
+    if (!value) {
+      return { style: { display: 'none' } }
+    }
+  }
+}
+
 function setDisplay(el: VShowElement, value: unknown): void {
   el.style.display = value ? el._vod : 'none'
 }