Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(plugin-vue): generate tree-shakable code
  • Loading branch information
yyx990803 committed Sep 19, 2021
1 parent deb84c0 commit 316d7af
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 21 deletions.
10 changes: 10 additions & 0 deletions packages/plugin-vue/src/helper.ts
@@ -0,0 +1,10 @@
export const EXPORT_HELPER_ID = 'plugin-vue:export-helper'

export const helperCode = `
export default (sfc, props) => {
for (const [key, val] of props) {
sfc[key] = val
}
return sfc
}
`
11 changes: 10 additions & 1 deletion packages/plugin-vue/src/index.ts
Expand Up @@ -25,6 +25,7 @@ import { transformMain } from './main'
import { handleHotUpdate } from './handleHotUpdate'
import { transformTemplateAsModule } from './template'
import { transformStyle } from './style'
import { EXPORT_HELPER_ID, helperCode } from './helper'

// extend the descriptor so we can store the scopeId on it
declare module '@vue/compiler-sfc' {
Expand Down Expand Up @@ -156,14 +157,22 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
options.devServer = server
},

async resolveId(id, importer) {
async resolveId(id) {
// component export helper
if (id === EXPORT_HELPER_ID) {
return id
}
// serve sub-part requests (*?vue) as virtual modules
if (parseVueRequest(id).query.vue) {
return id
}
},

load(id, ssr = !!options.ssr) {
if (id === EXPORT_HELPER_ID) {
return helperCode
}

const { filename, query } = parseVueRequest(id)
// select corresponding block for sub-part virtual modules
if (query.vue) {
Expand Down
49 changes: 29 additions & 20 deletions packages/plugin-vue/src/main.ts
Expand Up @@ -15,6 +15,7 @@ import { isOnlyTemplateChanged, isEqualBlock } from './handleHotUpdate'
import { RawSourceMap, SourceMapConsumer, SourceMapGenerator } from 'source-map'
import { createRollupError } from './utils/error'
import { transformWithEsbuild } from 'vite'
import { EXPORT_HELPER_ID } from './helper'

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export async function transformMain(
Expand All @@ -39,6 +40,7 @@ export async function transformMain(
}

// feature information
const attachedProps: [string, string][] = []
const hasScoped = descriptor.styles.some((s) => s.scoped)

// script
Expand Down Expand Up @@ -70,29 +72,27 @@ export async function transformMain(
))
}

let renderReplace = ''
if (hasTemplateImport) {
renderReplace = ssr
? `_sfc_main.ssrRender = _sfc_ssrRender`
: `_sfc_main.render = _sfc_render`
attachedProps.push(
ssr ? ['ssrRender', '_sfc_ssrRender'] : ['render', '_sfc_render']
)
} else {
// #2128
// User may empty the template but we didn't provide rerender function before
if (
prevDescriptor &&
!isEqualBlock(descriptor.template, prevDescriptor.template)
) {
renderReplace = ssr
? `_sfc_main.ssrRender = () => {}`
: `_sfc_main.render = () => {}`
attachedProps.push([ssr ? 'ssrRender' : 'render', '() => {}'])
}
}

// styles
const stylesCode = await genStyleCode(
descriptor,
pluginContext,
asCustomElement
asCustomElement,
attachedProps
)

// custom blocks
Expand All @@ -102,17 +102,14 @@ export async function transformMain(
scriptCode,
templateCode,
stylesCode,
customBlocksCode,
renderReplace
customBlocksCode
]
if (hasScoped) {
output.push(
`_sfc_main.__scopeId = ${JSON.stringify(`data-v-${descriptor.id}`)}`
)
attachedProps.push([`__scopeId`, JSON.stringify(`data-v-${descriptor.id}`)])
}
if (devServer && !isProduction) {
// expose filename during serve for devtools to pickup
output.push(`_sfc_main.__file = ${JSON.stringify(filename)}`)
attachedProps.push([`__file`, JSON.stringify(filename)])
}

// HMR
Expand Down Expand Up @@ -185,7 +182,16 @@ export async function transformMain(
resolvedMap.sourcesContent = templateMap.sourcesContent
}

output.push(`export default _sfc_main`)
if (!attachedProps.length) {
output.push(`export default _sfc_main`)
} else {
output.push(
`import _export_sfc from '${EXPORT_HELPER_ID}'`,
`export default /*#__PURE__*/_export_sfc(_sfc_main, [${attachedProps
.map(([key, val]) => `['${key}',${val}]`)
.join(',')}])`
)
}

// handle TS transpilation
let resolvedCode = output.join('\n')
Expand Down Expand Up @@ -290,7 +296,8 @@ async function genScriptCode(
async function genStyleCode(
descriptor: SFCDescriptor,
pluginContext: PluginContext,
asCustomElement: boolean
asCustomElement: boolean,
attachedProps: [string, string][]
) {
let stylesCode = ``
let hasCSSModules = false
Expand All @@ -315,7 +322,8 @@ async function genStyleCode(
)
}
if (!hasCSSModules) {
stylesCode += `\nconst cssModules = _sfc_main.__cssModules = {}`
stylesCode += `\nconst cssModules = {}`
attachedProps.push([`__cssModules`, `cssModules`])
hasCSSModules = true
}
stylesCode += genCSSModulesCode(i, styleRequest, style.module)
Expand All @@ -331,9 +339,10 @@ async function genStyleCode(
// TODO SSR critical CSS collection
}
if (asCustomElement) {
stylesCode += `\n_sfc_main.styles = [${descriptor.styles
.map((_, i) => `_style_${i}`)
.join(',')}]`
attachedProps.push([
`styles`,
`[${descriptor.styles.map((_, i) => `_style_${i}`).join(',')}]`
])
}
}
return stylesCode
Expand Down

0 comments on commit 316d7af

Please sign in to comment.