@varlet/cli 2.7.3-alpha.1675189320554 → 2.7.3-alpha.1675238644507

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

@@ -1,3 +1,4 @@
+export declare function declareEmptySFC(): string;
 export declare function replaceExportToDeclare(script: string): string;
 export declare function injectExport(script: string): string;
 export declare function injectScopeId(script: string, scopeId: string): string;

package/lib/node/compiler/compileSFC.js

@@ -10,6 +10,9 @@ 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);
 }
@@ -33,9 +36,9 @@ export async function compileSFC(sfc) {
     const id = hash(sources);
     const { descriptor } = parseSFC(sources, { sourceMap: false });
     const { script, scriptSetup, template, styles } = descriptor;
+    let scriptContent;
+    let bindingMetadata;
     if (script || scriptSetup) {
-        let scriptContent;
-        let bindingMetadata;
         if (scriptSetup) {
             const { content, bindings } = compileScriptSFC(descriptor, { id });
             scriptContent = content;
@@ -46,45 +49,48 @@ export async function compileSFC(sfc) {
             scriptContent = script.content;
         }
         scriptContent = replaceExportToDeclare(scriptContent);
-        // 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);
-            }
+    }
+    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);
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "2.7.3-alpha.1675189320554",
+  "version": "2.7.3-alpha.1675238644507",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -68,8 +68,8 @@
     "vite": "4.0.4",
     "vue": "3.2.25",
     "vue-jest": "^5.0.0-alpha.8",
-    "@varlet/vite-plugins": "2.7.3-alpha.1675189320554",
-    "@varlet/shared": "2.7.3-alpha.1675189320554"
+    "@varlet/vite-plugins": "2.7.3-alpha.1675238644507",
+    "@varlet/shared": "2.7.3-alpha.1675238644507"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.12",
@@ -82,8 +82,8 @@
     "@types/semver": "^7.3.9",
     "@types/inquirer": "^9.0.2",
     "@types/sharp": "0.31.1",
-    "@varlet/icons": "2.7.3-alpha.1675189320554",
-    "@varlet/touch-emulator": "2.7.3-alpha.1675189320554"
+    "@varlet/icons": "2.7.3-alpha.1675238644507",
+    "@varlet/touch-emulator": "2.7.3-alpha.1675238644507"
   },
   "peerDependencies": {
     "@vue/runtime-core": "3.2.16",
@@ -93,8 +93,8 @@
     "lodash-es": "^4.17.21",
     "vue": "3.2.25",
     "vue-router": "4.0.12",
-    "@varlet/icons": "2.7.3-alpha.1675189320554",
-    "@varlet/touch-emulator": "2.7.3-alpha.1675189320554"
+    "@varlet/icons": "2.7.3-alpha.1675238644507",
+    "@varlet/touch-emulator": "2.7.3-alpha.1675238644507"
   },
   "scripts": {
     "dev": "tsc --watch",

package/template/generators/config/default/sfc/src/button/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="var-button" :style="{ background: color }">
+  <button class="var-button" :style="{ background: color }" @click="handleClick">
     <slot />
   </button>
 </template>
@@ -18,7 +18,10 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const handleClick = (e: Event) => props.onClick?.(e)
+    const handleClick = (e: Event) => {
+      props.onClick?.(e)
+    }
+    
     return {
       handleClick,
     }

package/template/generators/config/default/tsx/src/button/Button.tsx

@@ -18,11 +18,9 @@ export default defineComponent({
       const { color } = props
 
       return (
-        <>
-          <button class="var-button" style={{ background: color }} onClick={handleClick}>
-            {slots.default?.()}
-          </button>
-        </>
+        <button class="var-button" style={{ background: color }} onClick={handleClick}>
+          {slots.default?.()}
+        </button>
       )
     }
   },

package/template/generators/config/i18n/sfc/src/button/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="var-button" :style="{ background: color }">
+  <button class="var-button" :style="{ background: color }" @click="handleClick">
     {{ pack.button }}
     <slot />
   </button>
@@ -22,7 +22,9 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const handleClick = (e: Event) => props.onClick?.(e)
+    const handleClick = (e: Event) => {
+      props.onClick?.(e)
+    }
 
     return {
       pack,

package/template/generators/config/i18n/tsx/src/button/Button.tsx

@@ -15,7 +15,9 @@ export default defineComponent({
     },
   },
   setup(props, { slots }) {
-    const handleClick = (e: Event) => props.onClick?.(e)
+    const handleClick = (e: Event) => {
+      props.onClick?.(e)
+    }
 
     return () => {
       const { color } = props