fix(cli): sfc missing render fn when using defineComponent (#8940)

This commit is contained in:
neverland 2021-06-27 20:16:02 +08:00 committed by GitHub
parent 44bb37f637
commit 26cdd94aaf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -9,7 +9,6 @@ import { compileStyle } from './compile-style';
const RENDER_FN = '__vue_render__'; const RENDER_FN = '__vue_render__';
const STATIC_RENDER_FN = '__vue_staticRenderFns__'; const STATIC_RENDER_FN = '__vue_staticRenderFns__';
const EXPORT = 'export default {';
// trim some unused code // trim some unused code
function trim(code: string) { function trim(code: string) {
@ -21,6 +20,14 @@ function getSfcStylePath(filePath: string, ext: string, index: number) {
return replaceExt(filePath, `-sfc${number}.${ext}`); return replaceExt(filePath, `-sfc${number}.${ext}`);
} }
function getExportKeyword(script: string) {
const EXPORT_DEFAULT = 'export default {';
const EXPORT_WITH_DEFINE_COMPONENT = 'export default defineComponent({';
return script.includes(EXPORT_WITH_DEFINE_COMPONENT)
? EXPORT_WITH_DEFINE_COMPONENT
: EXPORT_DEFAULT;
}
// inject render fn to script // inject render fn to script
function injectRender(script: string, render: string) { function injectRender(script: string, render: string) {
script = trim(script); script = trim(script);
@ -29,14 +36,20 @@ function injectRender(script: string, render: string) {
.replace('var render', `var ${RENDER_FN}`) .replace('var render', `var ${RENDER_FN}`)
.replace('var staticRenderFns', `var ${STATIC_RENDER_FN}`); .replace('var staticRenderFns', `var ${STATIC_RENDER_FN}`);
const exportKeyword = getExportKeyword(script);
return script.replace( return script.replace(
EXPORT, exportKeyword,
`${render}\n${EXPORT}\n render: ${RENDER_FN},\n\n staticRenderFns: ${STATIC_RENDER_FN},\n` `${render}\n${exportKeyword}\n render: ${RENDER_FN},\n\n staticRenderFns: ${STATIC_RENDER_FN},\n`
); );
} }
function injectScopeId(script: string, scopeId: string) { function injectScopeId(script: string, scopeId: string) {
return script.replace(EXPORT, `${EXPORT}\n _scopeId: '${scopeId}',\n\n`); const exportKeyword = getExportKeyword(script);
return script.replace(
exportKeyword,
`${exportKeyword}\n _scopeId: '${scopeId}',\n\n`
);
} }
function injectStyle( function injectStyle(
@ -45,6 +58,7 @@ function injectStyle(
filePath: string filePath: string
) { ) {
if (styles.length) { if (styles.length) {
const exportKeyword = getExportKeyword(script);
const imports = styles const imports = styles
.map((style, index) => { .map((style, index) => {
const { base } = parse(getSfcStylePath(filePath, 'css', index)); const { base } = parse(getSfcStylePath(filePath, 'css', index));
@ -52,7 +66,7 @@ function injectStyle(
}) })
.join('\n'); .join('\n');
return script.replace(EXPORT, `${imports}\n\n${EXPORT}`); return script.replace(exportKeyword, `${imports}\n\n${exportKeyword}`);
} }
return script; return script;