refactor: ensure ssr branches are included in esm-bundler build

This commit is contained in:
Evan You 2021-09-23 15:02:19 -04:00
parent 4886a63d82
commit 87c86e4cc2
11 changed files with 52 additions and 26 deletions

View File

@ -11,6 +11,7 @@ module.exports = {
__ESM_BUNDLER__: true, __ESM_BUNDLER__: true,
__ESM_BROWSER__: false, __ESM_BROWSER__: false,
__NODE_JS__: true, __NODE_JS__: true,
__SSR__: true,
__FEATURE_OPTIONS_API__: true, __FEATURE_OPTIONS_API__: true,
__FEATURE_SUSPENSE__: true, __FEATURE_SUSPENSE__: true,
__FEATURE_PROD_DEVTOOLS__: false, __FEATURE_PROD_DEVTOOLS__: false,

View File

@ -8,6 +8,7 @@ declare var __GLOBAL__: boolean
declare var __ESM_BUNDLER__: boolean declare var __ESM_BUNDLER__: boolean
declare var __ESM_BROWSER__: boolean declare var __ESM_BROWSER__: boolean
declare var __NODE_JS__: boolean declare var __NODE_JS__: boolean
declare var __SSR__: boolean
declare var __COMMIT__: string declare var __COMMIT__: string
declare var __VERSION__: string declare var __VERSION__: string
declare var __COMPAT__: boolean declare var __COMPAT__: boolean

View File

@ -141,7 +141,7 @@ export function defineAsyncComponent<
// suspense-controlled or SSR. // suspense-controlled or SSR.
if ( if (
(__FEATURE_SUSPENSE__ && suspensible && instance.suspense) || (__FEATURE_SUSPENSE__ && suspensible && instance.suspense) ||
(__NODE_JS__ && isInSSRComponentSetup) (__SSR__ && isInSSRComponentSetup)
) { ) {
return load() return load()
.then(comp => { .then(comp => {

View File

@ -280,7 +280,7 @@ function doWatch(
// in SSR there is no need to setup an actual effect, and it should be noop // in SSR there is no need to setup an actual effect, and it should be noop
// unless it's eager // unless it's eager
if (__NODE_JS__ && isInSSRComponentSetup) { if (__SSR__ && isInSSRComponentSetup) {
// we will also not call the invalidate callback (+ runner is not set up) // we will also not call the invalidate callback (+ runner is not set up)
onInvalidate = NOOP onInvalidate = NOOP
if (!cb) { if (!cb) {

View File

@ -678,7 +678,7 @@ export function handleSetupResult(
) { ) {
if (isFunction(setupResult)) { if (isFunction(setupResult)) {
// setup returned an inline render function // 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), // when the function's name is `ssrRender` (compiled by SFC inline mode),
// set it as ssrRender instead. // set it as ssrRender instead.
instance.ssrRender = setupResult instance.ssrRender = setupResult
@ -751,18 +751,11 @@ export function finishComponentSetup(
} }
// template / render function normalization // template / render function normalization
if (__NODE_JS__ && isSSR) { // could be already set when returned from setup()
// 1. the render function may already exist, returned by `setup` if (!instance.render) {
// 2. otherwise try to use the `Component.render` // only do on-the-fly compile if not in SSR - SSR on-the-fly compliation
// 3. if the component doesn't have a render function, // is done by server-renderer
// set `instance.render` to NOOP so that it can inherit the render if (!isSSR && compile && !Component.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) {
const template = const template =
(__COMPAT__ && (__COMPAT__ &&
instance.vnode.props && instance.vnode.props &&

View File

@ -315,9 +315,7 @@ const _ssrUtils = {
* SSR utils for \@vue/server-renderer. Only exposed in cjs builds. * SSR utils for \@vue/server-renderer. Only exposed in cjs builds.
* @internal * @internal
*/ */
export const ssrUtils = ( export const ssrUtils = (__SSR__ ? _ssrUtils : null) as typeof _ssrUtils
__NODE_JS__ || __ESM_BUNDLER__ ? _ssrUtils : null
) as typeof _ssrUtils
// 2.x COMPAT ------------------------------------------------------------------ // 2.x COMPAT ------------------------------------------------------------------

View File

@ -303,8 +303,9 @@ function callModelHook(
fn && fn(el, binding, vnode, prevVNode) fn && fn(el, binding, vnode, prevVNode)
} }
// SSR vnode transforms // SSR vnode transforms, only used when user includes client-oriented render
if (__NODE_JS__) { // function in SSR
export function initVModelForSSR() {
vModelText.getSSRProps = ({ value }) => ({ value }) vModelText.getSSRProps = ({ value }) => ({ value })
vModelRadio.getSSRProps = ({ value }, vnode) => { vModelRadio.getSSRProps = ({ value }, vnode) => {

View File

@ -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 }) => { vShow.getSSRProps = ({ value }) => {
if (!value) { if (!value) {
return { style: { display: 'none' } } return { style: { display: 'none' } }
} }
} }
} }
function setDisplay(el: VShowElement, value: unknown): void {
el.style.display = value ? el._vod : 'none'
}

View File

@ -15,7 +15,14 @@ import {
import { nodeOps } from './nodeOps' import { nodeOps } from './nodeOps'
import { patchProp } from './patchProp' import { patchProp } from './patchProp'
// Importing from the compiler, will be tree-shaken in prod // 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' { declare module '@vue/reactivity' {
export interface RefUnwrapBailTypes { export interface RefUnwrapBailTypes {
@ -225,6 +232,24 @@ export {
export { withModifiers, withKeys } from './directives/vOn' export { withModifiers, withKeys } from './directives/vOn'
export { vShow } from './directives/vShow' 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 // re-export everything from core
// h, Component, reactivity API, nextTick, flags & types // h, Component, reactivity API, nextTick, flags & types
export * from '@vue/runtime-core' export * from '@vue/runtime-core'

View File

@ -1,3 +1,6 @@
import { initDirectivesForSSR } from 'vue'
initDirectivesForSSR()
// public // public
export { SSRContext } from './render' export { SSRContext } from './render'
export { renderToString } from './renderToString' export { renderToString } from './renderToString'

View File

@ -242,6 +242,8 @@ function createReplacePlugin(
__ESM_BROWSER__: isBrowserESMBuild, __ESM_BROWSER__: isBrowserESMBuild,
// is targeting Node (SSR)? // is targeting Node (SSR)?
__NODE_JS__: isNodeBuild, __NODE_JS__: isNodeBuild,
// need SSR-specific branches?
__SSR__: isNodeBuild || isBundlerESMBuild,
// for compiler-sfc browser build inlined deps // for compiler-sfc browser build inlined deps
...(isBrowserESMBuild ...(isBrowserESMBuild