Skip to content

Commit

Permalink
refactor: ensure ssr branches are included in esm-bundler build
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Sep 23, 2021
1 parent 4886a63 commit 87c86e4
Show file tree
Hide file tree
Showing 11 changed files with 52 additions and 26 deletions.
1 change: 1 addition & 0 deletions jest.config.js
Expand Up @@ -11,6 +11,7 @@ module.exports = {
__ESM_BUNDLER__: true,
__ESM_BROWSER__: false,
__NODE_JS__: true,
__SSR__: true,
__FEATURE_OPTIONS_API__: true,
__FEATURE_SUSPENSE__: true,
__FEATURE_PROD_DEVTOOLS__: false,
Expand Down
1 change: 1 addition & 0 deletions packages/global.d.ts
Expand Up @@ -8,6 +8,7 @@ declare var __GLOBAL__: boolean
declare var __ESM_BUNDLER__: boolean
declare var __ESM_BROWSER__: boolean
declare var __NODE_JS__: boolean
declare var __SSR__: boolean
declare var __COMMIT__: string
declare var __VERSION__: string
declare var __COMPAT__: boolean
Expand Down
2 changes: 1 addition & 1 deletion packages/runtime-core/src/apiAsyncComponent.ts
Expand Up @@ -141,7 +141,7 @@ export function defineAsyncComponent<
// suspense-controlled or SSR.
if (
(__FEATURE_SUSPENSE__ && suspensible && instance.suspense) ||
(__NODE_JS__ && isInSSRComponentSetup)
(__SSR__ && isInSSRComponentSetup)
) {
return load()
.then(comp => {
Expand Down
2 changes: 1 addition & 1 deletion packages/runtime-core/src/apiWatch.ts
Expand Up @@ -280,7 +280,7 @@ function doWatch(

// in SSR there is no need to setup an actual effect, and it should be noop
// unless it's eager
if (__NODE_JS__ && isInSSRComponentSetup) {
if (__SSR__ && isInSSRComponentSetup) {
// we will also not call the invalidate callback (+ runner is not set up)
onInvalidate = NOOP
if (!cb) {
Expand Down
19 changes: 6 additions & 13 deletions packages/runtime-core/src/component.ts
Expand Up @@ -678,7 +678,7 @@ export function handleSetupResult(
) {
if (isFunction(setupResult)) {
// setup returned an inline render function
if (__NODE_JS__ && (instance.type as ComponentOptions).__ssrInlineRender) {
if (__SSR__ && (instance.type as ComponentOptions).__ssrInlineRender) {
// when the function's name is `ssrRender` (compiled by SFC inline mode),
// set it as ssrRender instead.
instance.ssrRender = setupResult
Expand Down Expand Up @@ -751,18 +751,11 @@ export function finishComponentSetup(
}

// template / render function normalization
if (__NODE_JS__ && isSSR) {
// 1. the render function may already exist, returned by `setup`
// 2. otherwise try to use the `Component.render`
// 3. if the component doesn't have a render function,
// set `instance.render` to NOOP so that it can inherit the render
// function from mixins/extend
instance.render = (instance.render ||
Component.render ||
NOOP) as InternalRenderFunction
} else if (!instance.render) {
// could be set from setup()
if (compile && !Component.render) {
// could be already set when returned from setup()
if (!instance.render) {
// only do on-the-fly compile if not in SSR - SSR on-the-fly compliation
// is done by server-renderer
if (!isSSR && compile && !Component.render) {
const template =
(__COMPAT__ &&
instance.vnode.props &&
Expand Down
4 changes: 1 addition & 3 deletions packages/runtime-core/src/index.ts
Expand Up @@ -315,9 +315,7 @@ const _ssrUtils = {
* SSR utils for \@vue/server-renderer. Only exposed in cjs builds.
* @internal
*/
export const ssrUtils = (
__NODE_JS__ || __ESM_BUNDLER__ ? _ssrUtils : null
) as typeof _ssrUtils
export const ssrUtils = (__SSR__ ? _ssrUtils : null) as typeof _ssrUtils

// 2.x COMPAT ------------------------------------------------------------------

Expand Down
5 changes: 3 additions & 2 deletions packages/runtime-dom/src/directives/vModel.ts
Expand Up @@ -303,8 +303,9 @@ function callModelHook(
fn && fn(el, binding, vnode, prevVNode)
}

// SSR vnode transforms
if (__NODE_JS__) {
// SSR vnode transforms, only used when user includes client-oriented render
// function in SSR
export function initVModelForSSR() {
vModelText.getSSRProps = ({ value }) => ({ value })

vModelRadio.getSSRProps = ({ value }, vnode) => {
Expand Down
12 changes: 7 additions & 5 deletions packages/runtime-dom/src/directives/vShow.ts
Expand Up @@ -40,14 +40,16 @@ export const vShow: ObjectDirective<VShowElement> = {
}
}

if (__NODE_JS__) {
function setDisplay(el: VShowElement, value: unknown): void {
el.style.display = value ? el._vod : 'none'
}

// SSR vnode transforms, only used when user includes client-oriented render
// function in SSR
export function initVShowForSSR() {
vShow.getSSRProps = ({ value }) => {
if (!value) {
return { style: { display: 'none' } }
}
}
}

function setDisplay(el: VShowElement, value: unknown): void {
el.style.display = value ? el._vod : 'none'
}
27 changes: 26 additions & 1 deletion packages/runtime-dom/src/index.ts
Expand Up @@ -15,7 +15,14 @@ import {
import { nodeOps } from './nodeOps'
import { patchProp } from './patchProp'
// Importing from the compiler, will be tree-shaken in prod
import { isFunction, isString, isHTMLTag, isSVGTag, extend } from '@vue/shared'
import {
isFunction,
isString,
isHTMLTag,
isSVGTag,
extend,
NOOP
} from '@vue/shared'

declare module '@vue/reactivity' {
export interface RefUnwrapBailTypes {
Expand Down Expand Up @@ -225,6 +232,24 @@ export {
export { withModifiers, withKeys } from './directives/vOn'
export { vShow } from './directives/vShow'

import { initVModelForSSR } from './directives/vModel'
import { initVShowForSSR } from './directives/vShow'

let ssrDirectiveInitialized = false

/**
* @internal
*/
export const initDirectivesForSSR = __SSR__
? () => {
if (!ssrDirectiveInitialized) {
ssrDirectiveInitialized = true
initVModelForSSR()
initVShowForSSR()
}
}
: NOOP

// re-export everything from core
// h, Component, reactivity API, nextTick, flags & types
export * from '@vue/runtime-core'
3 changes: 3 additions & 0 deletions packages/server-renderer/src/index.ts
@@ -1,3 +1,6 @@
import { initDirectivesForSSR } from 'vue'
initDirectivesForSSR()

// public
export { SSRContext } from './render'
export { renderToString } from './renderToString'
Expand Down
2 changes: 2 additions & 0 deletions rollup.config.js
Expand Up @@ -242,6 +242,8 @@ function createReplacePlugin(
__ESM_BROWSER__: isBrowserESMBuild,
// is targeting Node (SSR)?
__NODE_JS__: isNodeBuild,
// need SSR-specific branches?
__SSR__: isNodeBuild || isBundlerESMBuild,

// for compiler-sfc browser build inlined deps
...(isBrowserESMBuild
Expand Down

0 comments on commit 87c86e4

Please sign in to comment.