feat(cli): add preview command that can preview document site for pro…

…duction affects: @varlet/cli, @varlet/ui
varletjs · Sep 26, 2021 · 3fea1f1 · 3fea1f1
1 parent 3ee3548
commit 3fea1f1
Show file tree

Hide file tree

Showing 7 changed files with 485 additions and 26 deletions.
diff --git a/packages/varlet-cli/lib/index.js b/packages/varlet-cli/lib/index.js
@@ -29,12 +29,14 @@ var create_1 = require("./commands/create");
 var jest_1 = require("./commands/jest");
 var lint_1 = require("./commands/lint");
 var gen_1 = require("./commands/gen");
+var preview_1 = require("./commands/preview");
 commander_1.version("varlet-cli " + require('../package.json').version).usage('<command> [options]');
 commander_1.command('dev')
     .option('-f --force', 'Force dep pre-optimization regardless of whether deps have changed')
     .description('Run varlet development environment')
     .action(dev_1.dev);
 commander_1.command('build').description('Build varlet site for production').action(build_1.build);
+commander_1.command('preview').description('Preview varlet site for production').action(preview_1.preview);
 commander_1.command('compile')
     .description('Compile varlet components library code')
     .option('-nu, --noUmd', 'Do not compile umd target code')

diff --git a/packages/varlet-cli/package.json b/packages/varlet-cli/package.json
@@ -78,7 +78,8 @@
     "vite": "^2.6.0-beta.2",
     "@vitejs/plugin-vue": "1.9.2",
     "@vitejs/plugin-vue-jsx": "1.1.8",
-    "@vue/compiler-sfc": "3.2.16"
+    "@vue/compiler-sfc": "3.2.16",
+    "live-server": "^1.2.1"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.12",

diff --git a/packages/varlet-cli/src/commands/preview.ts b/packages/varlet-cli/src/commands/preview.ts
@@ -0,0 +1,17 @@
+import logger from '../shared/logger'
+import execa from 'execa'
+import { SITE_OUTPUT_PATH } from '../shared/constant'
+import { pathExistsSync } from 'fs-extra'
+
+export async function preview() {
+  if (!pathExistsSync(SITE_OUTPUT_PATH)) {
+    logger.warning('Cannot find the site folder, you must first run the build command to build the document site')
+    return
+  }
+
+  try {
+    execa.command('live-server --port=5500', { cwd: SITE_OUTPUT_PATH }).stdout?.pipe(process.stdout)
+  } catch (e) {
+    logger.error(e)
+  }
+}
diff --git a/packages/varlet-cli/src/index.ts b/packages/varlet-cli/src/index.ts
@@ -8,6 +8,7 @@ import { create } from './commands/create'
 import { jest } from './commands/jest'
 import { lint } from './commands/lint'
 import { gen } from './commands/gen'
+import { preview } from './commands/preview'
 
 version(`varlet-cli ${require('../package.json').version}`).usage('<command> [options]')
 
@@ -18,6 +19,8 @@ command('dev')
 
 command('build').description('Build varlet site for production').action(build)
 
+command('preview').description('Preview varlet site for production').action(preview)
+
 command('compile')
   .description('Compile varlet components library code')
   .option('-nu, --noUmd', 'Do not compile umd target code')

diff --git a/packages/varlet-ui/package.json b/packages/varlet-ui/package.json
@@ -37,6 +37,7 @@
   "scripts": {
     "dev": "varlet-cli dev",
     "build": "varlet-cli build",
+    "preview": "varlet-cli preview",
     "compile": "varlet-cli compile",
     "create": "varlet-cli create",
     "test": "varlet-cli jest",

diff --git a/packages/varlet-ui/src/table/example/index.vue b/packages/varlet-ui/src/table/example/index.vue
@@ -26,7 +26,7 @@
   <var-table>
     <thead>
       <tr>
-        <th style="padding: 16px 8px">
+        <th>
           <var-checkbox :model-value="isAllCheck" @change="handleAllCheckChange" />
         </th>
         <th>{{ pack.name }}</th>
@@ -46,7 +46,7 @@
     </thead>
     <tbody>
       <tr v-for="item in data" :key="item.nameValue">
-        <td style="padding: 16px 8px">
+        <td>
           <var-checkbox v-model="item.isCheck" />
         </td>
         <td>{{ item.name[item.nameValue] }}</td>