blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(cli): updating sfc compiler

Browse Source
This commit is contained in:
chenjiahan 2020-10-25 09:46:34 +08:00
parent 59ed9eee51
commit ec09c70d67
1 changed files with 27 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
packages/vant-cli/src/compiler/compile-sfc.ts
View File

@ -1,14 +1,12 @@
import * as compiler from '@vue/compiler-sfc';
import * as compileUtils from '@vue/component-compiler-utils';
import hash from 'hash-sum'; import hash from 'hash-sum';
import { parse } from 'path'; import path from 'path';
import { parse, SFCBlock, compileTemplate } from '@vue/compiler-sfc';
import { remove, writeFileSync, readFileSync } from 'fs-extra'; import { remove, writeFileSync, readFileSync } from 'fs-extra';
import { replaceExt } from '../common'; import { replaceExt } from '../common';
import { compileJs } from './compile-js'; import { compileJs } from './compile-js';
import { compileStyle } from './compile-style'; import { compileStyle } from './compile-style';
const RENDER_FN = '__vue_render__'; const RENDER_FN = '__vue_render__';
const STATIC_RENDER_FN = '__vue_staticRenderFns__';
const EXPORT = 'export default {'; const EXPORT = 'export default {';
// trim some unused code // trim some unused code
@ -25,13 +23,11 @@ function getSfcStylePath(filePath: string, ext: string, index: number) {
function injectRender(script: string, render: string) { function injectRender(script: string, render: string) {
script = trim(script); script = trim(script);
render = render render = render.replace('export function render', `function ${RENDER_FN}`);
.replace('var render', `var ${RENDER_FN}`)
.replace('var staticRenderFns', `var ${STATIC_RENDER_FN}`);
return script.replace( return script.replace(
EXPORT, EXPORT,
`${render}\n${EXPORT}\n render: ${RENDER_FN},\n\n staticRenderFns: ${STATIC_RENDER_FN},\n` `${render}\n${EXPORT}\n render: ${RENDER_FN},\n`
); );
} }
@ -39,15 +35,11 @@ function injectScopeId(script: string, scopeId: string) {
return script.replace(EXPORT, `${EXPORT}\n _scopeId: '${scopeId}',\n\n`); return script.replace(EXPORT, `${EXPORT}\n _scopeId: '${scopeId}',\n\n`);
} }
function injectStyle( function injectStyle(script: string, styles: SFCBlock[], filePath: string) {
script: string,
styles: compileUtils.SFCBlock[],
filePath: string
) {
if (styles.length) { if (styles.length) {
const imports = styles const imports = styles
.map((style, index) => { .map((style, index) => {
const { base } = parse(getSfcStylePath(filePath, 'css', index)); const { base } = path.parse(getSfcStylePath(filePath, 'css', index));
return `import './${base}';`; return `import './${base}';`;
}) })
.join('\n'); .join('\n');
@ -58,24 +50,13 @@ function injectStyle(
return script; return script;
} }
function compileTemplate(template: string) { export function parseSfc(filename: string) {
const result = compileUtils.compileTemplate({ const source = readFileSync(filename, 'utf-8');
compiler, const { descriptor } = parse(source, {
source: template, filename,
isProduction: true, });
} as any);
return result.code; console.log(descriptor);
}
export function parseSfc(filePath: string) {
const source = readFileSync(filePath, 'utf-8');
const descriptor = compileUtils.parse({
source,
compiler,
needMap: false,
} as any);
return descriptor; return descriptor;
} }
@ -98,7 +79,10 @@ export async function compileSfc(filePath: string): Promise<any> {
script = injectStyle(script, styles, filePath); script = injectStyle(script, styles, filePath);
if (template) { if (template) {
const render = compileTemplate(template.content); const render = compileTemplate({
source: template.content,
filename: filePath,
}).code;
script = injectRender(script, render); script = injectRender(script, render);
} }
@ -117,17 +101,18 @@ export async function compileSfc(filePath: string): Promise<any> {
...styles.map((style, index: number) => { ...styles.map((style, index: number) => {
const cssFilePath = getSfcStylePath(filePath, style.lang || 'css', index); const cssFilePath = getSfcStylePath(filePath, style.lang || 'css', index);
let styleSource = trim(style.content); const styleSource = trim(style.content);
if (style.scoped) { // TODO support scoped
styleSource = compileUtils.compileStyle({ // if (style.scoped) {
id: scopeId, // styleSource = compileUtils.compileStyle({
scoped: true, // id: scopeId,
source: styleSource, // scoped: true,
filename: cssFilePath, // source: styleSource,
preprocessLang: style.lang, // filename: cssFilePath,
}).code; // preprocessLang: style.lang,
} // }).code;
// }
writeFileSync(cssFilePath, styleSource); writeFileSync(cssFilePath, styleSource);