@varlet/cli 2.10.0 → 2.10.1-alpha.1682608027166

package/lib/node/compiler/compileSFC.js

@@ -1,96 +1,97 @@
-import fse from 'fs-extra';
-import hash from 'hash-sum';
-import { parse, resolve } from 'path';
-import { parse as parseSFC, compileTemplate, compileStyle, compileScript as compileScriptSFC } from '@vue/compiler-sfc';
-import { replaceExt, smartAppendFileSync } from '../shared/fsUtils.js';
-import { compileScript, getScriptExtname } from './compileScript.js';
-import { clearEmptyLine, compileLess, extractStyleDependencies, normalizeStyleDependency, STYLE_IMPORT_RE, } from './compileStyle.js';
-const { readFile, writeFileSync } = fse;
-const EXPORT = 'export default';
-const SFC = '__sfc__';
-const SFC_DECLARE = `const ${SFC} = `;
-const RENDER = '__render__';
-export function declareEmptySFC() {
-    return `${SFC_DECLARE}{}\n`;
-}
-export function replaceExportToDeclare(script) {
-    return script.replace(EXPORT, SFC_DECLARE);
-}
-export function injectExport(script) {
-    script += `\n${EXPORT} ${SFC}`;
-    return script;
-}
-export function injectScopeId(script, scopeId) {
-    script += `\n${SFC}.__scopeId = '${scopeId}'`;
-    return script;
-}
-export function injectRender(script, render) {
-    script = script.trim();
-    render = render.replace('export function render', `function ${RENDER}`);
-    script = script.replace(SFC_DECLARE, `${render}\n${SFC_DECLARE}`);
-    script += `\n${SFC}.render = ${RENDER}`;
-    return script;
-}
-export async function compileSFC(sfc) {
-    const sources = await readFile(sfc, 'utf-8');
-    const id = hash(sources);
-    const { descriptor } = parseSFC(sources, { sourceMap: false });
-    const { script, scriptSetup, template, styles } = descriptor;
-    let scriptContent;
-    let bindingMetadata;
-    if (script || scriptSetup) {
-        if (scriptSetup) {
-            const { content, bindings } = compileScriptSFC(descriptor, { id });
-            scriptContent = content;
-            bindingMetadata = bindings;
-        }
-        else {
-            // script only
-            scriptContent = script.content;
-        }
-        scriptContent = replaceExportToDeclare(scriptContent);
-    }
-    if (!scriptContent) {
-        scriptContent = declareEmptySFC();
-    }
-    // scoped
-    const hasScope = styles.some((style) => style.scoped);
-    const scopeId = hasScope ? `data-v-${id}` : '';
-    if (template) {
-        const render = compileTemplate({
-            id,
-            source: template.content,
-            filename: sfc,
-            compilerOptions: {
-                scopeId,
-                bindingMetadata,
-            },
-        }).code;
-        scriptContent = injectRender(scriptContent, render);
-    }
-    if (scopeId) {
-        scriptContent = injectScopeId(scriptContent, scopeId);
-    }
-    scriptContent = injectExport(scriptContent);
-    await compileScript(scriptContent, sfc);
-    // style
-    for (let index = 0; index < styles.length; index++) {
-        const style = styles[index];
-        const file = replaceExt(sfc, `Sfc${index || ''}.${style.lang || 'css'}`);
-        const { base, dir } = parse(file);
-        const dependencyPath = normalizeStyleDependency(base, STYLE_IMPORT_RE);
-        const cssFile = resolve(dir, `./style/index${getScriptExtname()}`);
-        let { code } = compileStyle({
-            source: style.content,
-            filename: file,
-            id: scopeId,
-            scoped: style.scoped,
-        });
-        code = extractStyleDependencies(file, code, STYLE_IMPORT_RE);
-        writeFileSync(file, clearEmptyLine(code), 'utf-8');
-        smartAppendFileSync(cssFile, `import '${dependencyPath}.css'\n`);
-        if (style.lang === 'less') {
-            await compileLess(file);
-        }
-    }
-}
+import fse from 'fs-extra';
+import hash from 'hash-sum';
+import { parse, resolve } from 'path';
+import { parse as parseSFC, compileTemplate, compileStyle, compileScript as compileScriptSFC } from '@vue/compiler-sfc';
+import { replaceExt, smartAppendFileSync } from '../shared/fsUtils.js';
+import { compileScript, getScriptExtname } from './compileScript.js';
+import { clearEmptyLine, compileLess, extractStyleDependencies, normalizeStyleDependency, STYLE_IMPORT_RE, } from './compileStyle.js';
+const { readFile, writeFileSync } = fse;
+const EXPORT = 'export default';
+const SFC = '__sfc__';
+const SFC_DECLARE = `const ${SFC} = `;
+const RENDER = '__render__';
+export function declareEmptySFC() {
+    return `${SFC_DECLARE}{}\n`;
+}
+export function replaceExportToDeclare(script) {
+    return script.replace(EXPORT, SFC_DECLARE);
+}
+export function injectExport(script) {
+    script += `\n${EXPORT} ${SFC}`;
+    return script;
+}
+export function injectScopeId(script, scopeId) {
+    script += `\n${SFC}.__scopeId = '${scopeId}'`;
+    return script;
+}
+export function injectRender(script, render) {
+    script = script.trim();
+    render = render.replace('export function render', `function ${RENDER}`);
+    script = script.replace(SFC_DECLARE, `${render}\n${SFC_DECLARE}`);
+    script += `\n${SFC}.render = ${RENDER}`;
+    return script;
+}
+export async function compileSFC(sfc) {
+    const sources = await readFile(sfc, 'utf-8');
+    const id = hash(sources);
+    const { descriptor } = parseSFC(sources, { sourceMap: false });
+    const { script, scriptSetup, template, styles } = descriptor;
+    let scriptContent;
+    let bindingMetadata;
+    if (script || scriptSetup) {
+        if (scriptSetup) {
+            const { content, bindings } = compileScriptSFC(descriptor, { id });
+            scriptContent = content;
+            bindingMetadata = bindings;
+        }
+        else {
+            // script only
+            scriptContent = script.content;
+        }
+        scriptContent = replaceExportToDeclare(scriptContent);
+    }
+    if (!scriptContent) {
+        scriptContent = declareEmptySFC();
+    }
+    // scoped
+    const hasScope = styles.some((style) => style.scoped);
+    const scopeId = hasScope ? `data-v-${id}` : '';
+    if (template) {
+        const render = compileTemplate({
+            id,
+            source: template.content,
+            filename: sfc,
+            compilerOptions: {
+                scopeId,
+                expressionPlugins: ['typescript'],
+                bindingMetadata,
+            },
+        }).code;
+        scriptContent = injectRender(scriptContent, render);
+    }
+    if (scopeId) {
+        scriptContent = injectScopeId(scriptContent, scopeId);
+    }
+    scriptContent = injectExport(scriptContent);
+    await compileScript(scriptContent, sfc);
+    // style
+    for (let index = 0; index < styles.length; index++) {
+        const style = styles[index];
+        const file = replaceExt(sfc, `Sfc${index || ''}.${style.lang || 'css'}`);
+        const { base, dir } = parse(file);
+        const dependencyPath = normalizeStyleDependency(base, STYLE_IMPORT_RE);
+        const cssFile = resolve(dir, `./style/index${getScriptExtname()}`);
+        let { code } = compileStyle({
+            source: style.content,
+            filename: file,
+            id: scopeId,
+            scoped: style.scoped,
+        });
+        code = extractStyleDependencies(file, code, STYLE_IMPORT_RE);
+        writeFileSync(file, clearEmptyLine(code), 'utf-8');
+        smartAppendFileSync(cssFile, `import '${dependencyPath}.css'\n`);
+        if (style.lang === 'less') {
+            await compileLess(file);
+        }
+    }
+}

package/lib/node/compiler/compileScript.d.ts

@@ -1,13 +1,13 @@
-export declare const IMPORT_FROM_DEPENDENCE_RE: RegExp;
-export declare const EXPORT_FROM_DEPENDENCE_RE: RegExp;
-export declare const IMPORT_DEPENDENCE_RE: RegExp;
-export declare const scriptExtNames: string[];
-export declare const styleExtNames: string[];
-export declare const scriptIndexes: string[];
-export declare const styleIndexes: string[];
-export declare const tryMatchExtname: (file: string, extname: string[]) => string | undefined;
-export declare const resolveDependence: (file: string, script: string) => string;
-export declare function compileScript(script: string, file: string): Promise<void>;
-export declare function compileScriptFile(file: string): Promise<void>;
-export declare function getScriptExtname(): string;
-export declare function compileESEntry(dir: string, publicDirs: string[]): Promise<void>;
+export declare const IMPORT_FROM_DEPENDENCE_RE: RegExp;
+export declare const EXPORT_FROM_DEPENDENCE_RE: RegExp;
+export declare const IMPORT_DEPENDENCE_RE: RegExp;
+export declare const scriptExtNames: string[];
+export declare const styleExtNames: string[];
+export declare const scriptIndexes: string[];
+export declare const styleIndexes: string[];
+export declare const tryMatchExtname: (file: string, extname: string[]) => string | undefined;
+export declare const resolveDependence: (file: string, script: string) => string;
+export declare function compileScript(script: string, file: string): Promise<void>;
+export declare function compileScriptFile(file: string): Promise<void>;
+export declare function getScriptExtname(): string;
+export declare function compileESEntry(dir: string, publicDirs: string[]): Promise<void>;

package/lib/node/compiler/compileScript.js

@@ -1,124 +1,124 @@
-import fse from 'fs-extra';
-import { transformAsync } from '@babel/core';
-import { bigCamelize } from '@varlet/shared';
-import { getVersion, isDir, replaceExt } from '../shared/fsUtils.js';
-import { extractStyleDependencies, IMPORT_CSS_RE, IMPORT_LESS_RE } from './compileStyle.js';
-import { resolve, extname, dirname } from 'path';
-const { writeFileSync, readdirSync, readFileSync, removeSync, writeFile, pathExistsSync } = fse;
-// https://regexr.com/765a4
-export const IMPORT_FROM_DEPENDENCE_RE = /import\s+?[\w\s{},$*]+\s+from\s+?(".*?"|'.*?')/g;
-// https://regexr.com/767e6
-export const EXPORT_FROM_DEPENDENCE_RE = /export\s+?[\w\s{},$*]+\s+from\s+?(".*?"|'.*?')/g;
-// https://regexr.com/764ve
-export const IMPORT_DEPENDENCE_RE = /import\s+(".*?"|'.*?')/g;
-export const scriptExtNames = ['.vue', '.ts', '.tsx', '.mjs', '.js', '.jsx'];
-export const styleExtNames = ['.less', '.css'];
-export const scriptIndexes = ['index.mjs', 'index.vue', 'index.ts', 'index.tsx', 'index.js', 'index.jsx'];
-export const styleIndexes = ['index.less', 'index.css'];
-export const tryMatchExtname = (file, extname) => {
-    // eslint-disable-next-line no-restricted-syntax
-    for (const ext of extname) {
-        const matched = `${file}${ext}`;
-        if (pathExistsSync(matched)) {
-            return ext;
-        }
-    }
-};
-export const resolveDependence = (file, script) => {
-    const replacer = (source, dependence) => {
-        dependence = dependence.slice(1, dependence.length - 1);
-        const ext = extname(dependence);
-        const targetDependenceFile = resolve(dirname(file), dependence);
-        const scriptExtname = getScriptExtname();
-        const inNodeModules = !dependence.startsWith('.');
-        const done = (targetDependence) => source.replace(dependence, targetDependence);
-        if (inNodeModules) {
-            // e.g. @varlet/shared
-            return source;
-        }
-        if (ext) {
-            if (scriptExtNames.includes(ext)) {
-                // e.g. './a.vue' -> './a.mjs'
-                return done(dependence.replace(ext, scriptExtname));
-            }
-            if (styleExtNames.includes(ext)) {
-                // e.g. './a.css' -> './a.css' './a.less' -> './a.less'
-                return source;
-            }
-        }
-        if (!ext) {
-            // e.g. ../button/props -> ../button/props.mjs
-            const matchedScript = tryMatchExtname(targetDependenceFile, scriptExtNames);
-            if (matchedScript) {
-                return done(`${dependence}${scriptExtname}`);
-            }
-            const matchedStyle = tryMatchExtname(targetDependenceFile, styleExtNames);
-            if (matchedStyle) {
-                return done(`${dependence}${matchedStyle}`);
-            }
-        }
-        if (!ext && isDir(targetDependenceFile)) {
-            // e.g. ../button
-            const files = readdirSync(targetDependenceFile);
-            const hasScriptIndex = files.some((file) => scriptIndexes.some((name) => file.endsWith(name)));
-            if (hasScriptIndex) {
-                // e.g. -> ../button/index.mjs
-                return done(`${dependence}/index${scriptExtname}`);
-            }
-            const hasStyleIndex = files.some((file) => styleIndexes.some((name) => file.endsWith(name)));
-            if (hasStyleIndex) {
-                // e.g. -> ../button/index.css
-                return done(`${dependence}/index.css`);
-            }
-        }
-        return '';
-    };
-    return script
-        .replace(IMPORT_FROM_DEPENDENCE_RE, replacer)
-        .replace(EXPORT_FROM_DEPENDENCE_RE, replacer)
-        .replace(IMPORT_DEPENDENCE_RE, replacer);
-};
-export async function compileScript(script, file) {
-    let { code } = (await transformAsync(script, {
-        filename: file,
-    }));
-    if (code) {
-        code = resolveDependence(file, code);
-        code = extractStyleDependencies(file, code, IMPORT_CSS_RE);
-        code = extractStyleDependencies(file, code, IMPORT_LESS_RE);
-        removeSync(file);
-        writeFileSync(replaceExt(file, getScriptExtname()), code, 'utf8');
-    }
-}
-export async function compileScriptFile(file) {
-    const sources = readFileSync(file, 'utf-8');
-    await compileScript(sources, file);
-}
-export function getScriptExtname() {
-    return '.mjs';
-}
-export async function compileESEntry(dir, publicDirs) {
-    const imports = [];
-    const plugins = [];
-    const exports = [];
-    const cssImports = [];
-    const publicComponents = [];
-    const scriptExtname = getScriptExtname();
-    publicDirs.forEach((dirname) => {
-        const publicComponent = bigCamelize(dirname);
-        const module = `'./${dirname}/index${scriptExtname}'`;
-        publicComponents.push(publicComponent);
-        imports.push(`import ${publicComponent} from ${module}`);
-        exports.push(`export * from ${module}`);
-        plugins.push(`${publicComponent}.install && app.use(${publicComponent})`);
-        cssImports.push(`import './${dirname}/style/index${scriptExtname}'`);
-    });
+import fse from 'fs-extra';
+import { transformAsync } from '@babel/core';
+import { bigCamelize } from '@varlet/shared';
+import { getVersion, isDir, replaceExt } from '../shared/fsUtils.js';
+import { extractStyleDependencies, IMPORT_CSS_RE, IMPORT_LESS_RE } from './compileStyle.js';
+import { resolve, extname, dirname } from 'path';
+const { writeFileSync, readdirSync, readFileSync, removeSync, writeFile, pathExistsSync } = fse;
+// https://regexr.com/765a4
+export const IMPORT_FROM_DEPENDENCE_RE = /import\s+?[\w\s{},$*]+\s+from\s+?(".*?"|'.*?')/g;
+// https://regexr.com/767e6
+export const EXPORT_FROM_DEPENDENCE_RE = /export\s+?[\w\s{},$*]+\s+from\s+?(".*?"|'.*?')/g;
+// https://regexr.com/764ve
+export const IMPORT_DEPENDENCE_RE = /import\s+(".*?"|'.*?')/g;
+export const scriptExtNames = ['.vue', '.ts', '.tsx', '.mjs', '.js', '.jsx'];
+export const styleExtNames = ['.less', '.css'];
+export const scriptIndexes = ['index.mjs', 'index.vue', 'index.ts', 'index.tsx', 'index.js', 'index.jsx'];
+export const styleIndexes = ['index.less', 'index.css'];
+export const tryMatchExtname = (file, extname) => {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const ext of extname) {
+        const matched = `${file}${ext}`;
+        if (pathExistsSync(matched)) {
+            return ext;
+        }
+    }
+};
+export const resolveDependence = (file, script) => {
+    const replacer = (source, dependence) => {
+        dependence = dependence.slice(1, dependence.length - 1);
+        const ext = extname(dependence);
+        const targetDependenceFile = resolve(dirname(file), dependence);
+        const scriptExtname = getScriptExtname();
+        const inNodeModules = !dependence.startsWith('.');
+        const done = (targetDependence) => source.replace(dependence, targetDependence);
+        if (inNodeModules) {
+            // e.g. @varlet/shared
+            return source;
+        }
+        if (ext) {
+            if (scriptExtNames.includes(ext)) {
+                // e.g. './a.vue' -> './a.mjs'
+                return done(dependence.replace(ext, scriptExtname));
+            }
+            if (styleExtNames.includes(ext)) {
+                // e.g. './a.css' -> './a.css' './a.less' -> './a.less'
+                return source;
+            }
+        }
+        if (!ext) {
+            // e.g. ../button/props -> ../button/props.mjs
+            const matchedScript = tryMatchExtname(targetDependenceFile, scriptExtNames);
+            if (matchedScript) {
+                return done(`${dependence}${scriptExtname}`);
+            }
+            const matchedStyle = tryMatchExtname(targetDependenceFile, styleExtNames);
+            if (matchedStyle) {
+                return done(`${dependence}${matchedStyle}`);
+            }
+        }
+        if (!ext && isDir(targetDependenceFile)) {
+            // e.g. ../button
+            const files = readdirSync(targetDependenceFile);
+            const hasScriptIndex = files.some((file) => scriptIndexes.some((name) => file.endsWith(name)));
+            if (hasScriptIndex) {
+                // e.g. -> ../button/index.mjs
+                return done(`${dependence}/index${scriptExtname}`);
+            }
+            const hasStyleIndex = files.some((file) => styleIndexes.some((name) => file.endsWith(name)));
+            if (hasStyleIndex) {
+                // e.g. -> ../button/index.css
+                return done(`${dependence}/index.css`);
+            }
+        }
+        return '';
+    };
+    return script
+        .replace(IMPORT_FROM_DEPENDENCE_RE, replacer)
+        .replace(EXPORT_FROM_DEPENDENCE_RE, replacer)
+        .replace(IMPORT_DEPENDENCE_RE, replacer);
+};
+export async function compileScript(script, file) {
+    let { code } = (await transformAsync(script, {
+        filename: file,
+    }));
+    if (code) {
+        code = resolveDependence(file, code);
+        code = extractStyleDependencies(file, code, IMPORT_CSS_RE);
+        code = extractStyleDependencies(file, code, IMPORT_LESS_RE);
+        removeSync(file);
+        writeFileSync(replaceExt(file, getScriptExtname()), code, 'utf8');
+    }
+}
+export async function compileScriptFile(file) {
+    const sources = readFileSync(file, 'utf-8');
+    await compileScript(sources, file);
+}
+export function getScriptExtname() {
+    return '.mjs';
+}
+export async function compileESEntry(dir, publicDirs) {
+    const imports = [];
+    const plugins = [];
+    const exports = [];
+    const cssImports = [];
+    const publicComponents = [];
+    const scriptExtname = getScriptExtname();
+    publicDirs.forEach((dirname) => {
+        const publicComponent = bigCamelize(dirname);
+        const module = `'./${dirname}/index${scriptExtname}'`;
+        publicComponents.push(publicComponent);
+        imports.push(`import ${publicComponent} from ${module}`);
+        exports.push(`export * from ${module}`);
+        plugins.push(`${publicComponent}.install && app.use(${publicComponent})`);
+        cssImports.push(`import './${dirname}/style/index${scriptExtname}'`);
+    });
     const install = `
 function install(app) {
   ${plugins.join('\n  ')}
 }
-`;
-    const version = `const version = '${getVersion()}'`;
+`;
+    const version = `const version = '${getVersion()}'`;
     const indexTemplate = `\
 ${imports.join('\n')}\n
 ${exports.join('\n')}\n
@@ -135,10 +135,10 @@ export default {
   install,
   ${publicComponents.join(',\n  ')}
 }
-`;
+`;
     const styleTemplate = `\
 ${cssImports.join('\n')}
-`;
+`;
     const bundleTemplate = `\
 ${imports.join('\n')}\n
 ${exports.join('\n')}\n
@@ -156,10 +156,10 @@ export default {
   install,
   ${publicComponents.join(',\n  ')}
 }
-`;
-    await Promise.all([
-        writeFile(resolve(dir, 'index.mjs'), indexTemplate, 'utf-8'),
-        writeFile(resolve(dir, 'index.bundle.mjs'), bundleTemplate, 'utf-8'),
-        writeFile(resolve(dir, 'style.mjs'), styleTemplate, 'utf-8'),
-    ]);
-}
+`;
+    await Promise.all([
+        writeFile(resolve(dir, 'index.mjs'), indexTemplate, 'utf-8'),
+        writeFile(resolve(dir, 'index.bundle.mjs'), bundleTemplate, 'utf-8'),
+        writeFile(resolve(dir, 'style.mjs'), styleTemplate, 'utf-8'),
+    ]);
+}

package/lib/node/compiler/compileSiteEntry.d.ts

@@ -1,18 +1,18 @@
-export declare function getExampleRoutePath(examplePath: string): string;
-export declare function getComponentDocRoutePath(componentDocsPath: string): string;
-export declare function getRootDocRoutePath(rootDocsPath: string): string;
-export declare function getPageRoutePath(rootLocalePath: string): string;
-export declare function getPageFilePath(rootLocalePath: string): string;
-export declare function isDraftExample(example: string): boolean;
-export declare function hasDraftExample(examples: string[], example: string): boolean;
-export declare function isDraftDoc(doc: string): boolean;
-export declare function hasDraftDoc(docs: string[], doc: string): boolean;
-export declare function findExamples(draftMode: boolean): Promise<string[]>;
-export declare function filterDraftDocs(docs: string[], draftMode: boolean): string[];
-export declare function findComponentDocs(draftMode: boolean): Promise<string[]>;
-export declare function findRootDocs(draftMode: boolean): Promise<string[]>;
-export declare function findPageLocales(): Promise<string[]>;
-export declare function buildMobileSiteRoutes(draftMode: boolean): Promise<void>;
-export declare function buildPcSiteRoutes(draftMode: boolean): Promise<void>;
-export declare function buildSiteSource(): Promise<void>;
-export declare function buildSiteEntry(draftMode: boolean): Promise<void>;
+export declare function getExampleRoutePath(examplePath: string): string;
+export declare function getComponentDocRoutePath(componentDocsPath: string): string;
+export declare function getRootDocRoutePath(rootDocsPath: string): string;
+export declare function getPageRoutePath(rootLocalePath: string): string;
+export declare function getPageFilePath(rootLocalePath: string): string;
+export declare function isDraftExample(example: string): boolean;
+export declare function hasDraftExample(examples: string[], example: string): boolean;
+export declare function isDraftDoc(doc: string): boolean;
+export declare function hasDraftDoc(docs: string[], doc: string): boolean;
+export declare function findExamples(draftMode: boolean): Promise<string[]>;
+export declare function filterDraftDocs(docs: string[], draftMode: boolean): string[];
+export declare function findComponentDocs(draftMode: boolean): Promise<string[]>;
+export declare function findRootDocs(draftMode: boolean): Promise<string[]>;
+export declare function findPageLocales(): Promise<string[]>;
+export declare function buildMobileSiteRoutes(draftMode: boolean): Promise<void>;
+export declare function buildPcSiteRoutes(draftMode: boolean): Promise<void>;
+export declare function buildSiteSource(): Promise<void>;
+export declare function buildSiteEntry(draftMode: boolean): Promise<void>;