Refactor vue materials (alibaba#409)

* fix: update HeaderAsideLayout * fix: update materials config * fix: update materials path * fix: add vue lint * fix: use cross-spawn * chore: code optim
LawrenceZHLee · Apr 25, 2018 · 2cafeff · 2cafeff
1 parent 0b29f2d
commit 2cafeff
Show file tree

Hide file tree

Showing 48 changed files with 355 additions and 358 deletions.
diff --git a/package.json b/package.json
@@ -8,14 +8,16 @@
     "setup": "lerna setup",
     "generate": "ice-devtools generate && node ./scripts/generate-docs-database",
     "lint": "npm run lint:nofix -- --fix",
-    "lint:nofix": "eslint --cache --ext .js --ext .jsx ./",
+    "lint:nofix": "eslint --cache --ext .js .vue .jsx react-materials vue-materials",
     "format": "prettier blocks/*/src/**/*.js blocks/*/src/**/*.jsx layouts/*/src/**/*.js layouts/*/src/**/*.jsx scaffolds/*/src/**/*.js scaffolds/*/src/**/*.jsx tools/**/*.js --write"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/alibaba/ice"
   },
   "devDependencies": {
+    "@vue/cli-plugin-eslint": "^3.0.0-beta.6",
+    "@vue/cli-service": "^3.0.0-beta.6",
     "@vue/eslint-config-airbnb": "^3.0.0-beta.6",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.1.2",
@@ -30,6 +32,7 @@
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.5.1",
+    "eslint-plugin-vue": "^4.5.0",
     "findup": "^0.1.5",
     "ghooks": "^2.0.2",
     "ice-devtools": "^1.0.0-beta.19",
@@ -52,12 +55,14 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
-  "materials": {
-    "react-materials": {
+  "materials": [
+    {
+      "directory": "react-materials",
       "type": "react"
     },
-    "vue-materials": {
+    {
+      "directory": "vue-materials",
       "type": "vue"
     }
-  }
+  ]
 }
diff --git a/templates/ice-react-app-template/package.json b/templates/ice-react-app-template/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ice-react-app-template",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0",
   "description": "ice react app template",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

diff --git a/templates/ice-react-block-template/package.json b/templates/ice-react-block-template/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ice-react-block-template",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0",
   "description": "ice react block template",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

diff --git a/templates/ice-react-layout-template/package.json b/templates/ice-react-layout-template/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ice-react-layout-template",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0",
   "description": "ice react layout template",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

diff --git a/templates/ice-vue-app-template/package.json b/templates/ice-vue-app-template/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ice-vue-app-template",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.1",
   "description": "ice vue app template",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

diff --git a/templates/ice-vue-app-template/template/.babelrc b/templates/ice-vue-app-template/template/.babelrc
@@ -1,3 +1,21 @@
 {
-  "presets": ["@vue/app"]
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "browsers": [
+          "> 5%",
+          "last 2 versions",
+          "not ie <= 8"
+        ]
+      },
+      "modules": false,
+      "exclude": [
+        "transform-regenerator"
+      ]
+    }],
+    ["@babel/preset-stage-2", {
+      "useBuiltIns": true,
+      "decoratorsLegacy": true
+    }]
+  ]
 }
diff --git a/templates/ice-vue-block-template/package.json b/templates/ice-vue-block-template/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ice-vue-block-template",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "ice vue block template",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

diff --git a/templates/ice-vue-layout-template/package.json b/templates/ice-vue-layout-template/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ice-vue-layout-template",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "ice vue layout template",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

diff --git a/templates/ice-vue-layout-template/template/src/__className__.vue b/templates/ice-vue-layout-template/template/src/__className__.vue
@@ -1,7 +1,6 @@
 <template>
   <div className={{name}}>
     <h1>{{className}}</h1>
-    <router-view/>
   </div>
 </template>
 

diff --git a/tools/ice-devtools/bin/add.js b/tools/ice-devtools/bin/add.js
@@ -4,9 +4,9 @@ const exists = require('fs').existsSync;
 const path = require('path');
 const ora = require('ora');
 const home = require('user-home');
-const tildify = require('tildify');
 const chalk = require('chalk');
 const inquirer = require('inquirer');
+const spawn = require('cross-spawn');
 const rm = require('rimraf').sync;
 const logger = require('../lib/logger');
 const generate = require('../lib/generate');
@@ -205,19 +205,43 @@ function getDefaultData() {
  * @param {String} template
  */
 function downloadAndGenerate(template) {
-  const spinner = ora('downloading template');
-  spinner.start();
+  const downloadspinner = ora('downloading template');
+  downloadspinner.start();
 
   const tmp = path.join(home, '.ice-templates', templateName);
 
   if (exists(tmp)) rm(tmp);
   download({ template })
     .then(() => {
-      spinner.stop();
+      downloadspinner.stop();
       setTimeout(() => {
         generate(name, tmp, to, (err, callback) => {
           if (err) logger.fatal(err);
           logger.success('Generated "%s".', name);
+
+          const installSpinner = ora('npm install');
+          installSpinner.start();
+
+          const npm = spawn('npm', ['install'], { cwd: to });
+          npm.stdout.on('data', (data) => {
+            chalk.gray(`${data} \n`)
+          });
+
+          npm.stderr.on('data', (data) => {
+            installSpinner.stop();
+            console.log(
+              chalk.red(`${data} \n`)
+            );
+          });
+
+          npm.on('close', (code) => {
+            installSpinner.stop();
+            console.log(
+              chalk.white('   npm install finished \n')
+            );
+            callback();
+          });
+
           callback();
         });
       }, 1000);

diff --git a/tools/ice-devtools/bin/init.js b/tools/ice-devtools/bin/init.js
@@ -8,12 +8,12 @@ const tildify = require('tildify');
 const chalk = require('chalk');
 const inquirer = require('inquirer');
 const rm = require('rimraf').sync;
+const spawn = require('cross-spawn');
 const logger = require('../lib/logger');
 const generate = require('../lib/generate');
 const checkVersion = require('../lib/check-version');
 const localPath = require('../lib/local-path');
 const download = require('../lib/download');
-const { spawn } = require('child_process');
 
 const isLocalPath = localPath.isLocalPath;
 const getTemplatePath = localPath.getTemplatePath;

diff --git a/tools/ice-devtools/lib/config/getWebpackConfig.js b/tools/ice-devtools/lib/config/getWebpackConfig.js
@@ -1,8 +1,6 @@
 const merge = require('webpack-merge');
 const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const getBabelConfig = require('./getBabelConfig');
-const blockTemplate = require.resolve('../template/block.hbs');
+
 const BABEL_LOADER = require.resolve('babel-loader');
 const STYLE_LOADER = require.resolve('style-loader');
 const CSS_LOADER = require.resolve('css-loader');
@@ -11,6 +9,8 @@ const VUE_STYLE_LOADER = require.resolve('vue-style-loader');
 const VUE_LOADER = require.resolve('vue-loader');
 const WebpackPluginImport = require('webpack-plugin-import');
 
+const getBabelConfig = require('./getBabelConfig');
+
 const baseConfig = {
   mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
   output: {

diff --git a/tools/ice-devtools/lib/server/controllers/block.js b/tools/ice-devtools/lib/server/controllers/block.js
@@ -1,11 +1,11 @@
 const path = require('path');
 const { existsSync } = require('fs');
 const MultiEntryPlugin = require('webpack/lib/MultiEntryPlugin');
-const { getMaterials } = require('../utils');
-const getMaterialLists = require('../getMaterialLists');
-const { getMaterialList } = require('../utils')
-const cwd = process.cwd();
+
 const webpackHotClient = require.resolve('webpack-hot-client/client');
+const { getMaterialList, getMaterials } = require('../utils');
+
+const cwd = process.cwd();
 const cachedChunks = {};
 let watchingHandler;
 let warned = false;
@@ -25,12 +25,12 @@ module.exports = async (ctx) => {
 
   const materials = getMaterials(cwd);
   let type;
-  try {
-    type = materials[material].type;
-  } catch (err) {
-    warnOnce('使用默认物料类型 react');
-    type = 'react';
-  }
+
+  materials.find((m) => {
+    if (m.directory === material) {
+      type = m.type;
+    }
+  });
 
   const currentMaterial = material;
   const entryPath = path.resolve(
@@ -45,14 +45,14 @@ module.exports = async (ctx) => {
     return ctx.render('404.hbs');
   }
 
-  const chunkName = currentMaterial + '/' + params.blockName;
+  const chunkName = `${currentMaterial}/${params.blockName}`;
   if (!(chunkName in cachedChunks)) {
     ctx.compiler.running = false;
     ctx.compiler.apply(
       new MultiEntryPlugin(cwd, [webpackHotClient, entryPath], chunkName)
     );
     // wait until bundle ok
-    await new Promise((resolve, reject) => {
+    await new Promise((resolve) => {
       const watchOpts = {
         aggregateTimeout: 20,
       };
@@ -64,7 +64,7 @@ module.exports = async (ctx) => {
         watchingHandler = ctx.compiler.watch(watchOpts, handler);
       }
 
-      function handler(err, stats) {
+      function handler(err) {
         if (err) {
           resolve(err);
         } else {
@@ -86,7 +86,7 @@ module.exports = async (ctx) => {
     isVue: type === 'vue',
     blocks: materialList.blocks,
     layouts: materialList.layouts,
-    isBlock: true
+    isBlock: true,
   };
   return ctx.render('block.hbs', state);
 };
diff --git a/tools/ice-devtools/lib/server/controllers/layout.js b/tools/ice-devtools/lib/server/controllers/layout.js
@@ -2,6 +2,7 @@ const path = require('path');
 const { existsSync } = require('fs');
 const MultiEntryPlugin = require('webpack/lib/MultiEntryPlugin');
 const { getMaterials } = require('../utils');
+
 const cwd = process.cwd();
 const webpackHotClient = require.resolve('webpack-hot-client/client');
 const cachedChunks = {};
@@ -23,12 +24,11 @@ module.exports = async (ctx) => {
 
   const materials = getMaterials(cwd);
   let type;
-  try {
-    type = materials[material].type;
-  } catch (err) {
-    warnOnce('使用默认物料类型 react');
-    type = 'react';
-  }
+  materials.find((m) => {
+    if (m.directory === material) {
+      type = m.type;
+    }
+  });
 
   const currentMaterial = material;
   const entryPath = path.resolve(
@@ -43,7 +43,7 @@ module.exports = async (ctx) => {
     return ctx.render('404.hbs');
   }
 
-  const chunkName = currentMaterial + '/' + params.layoutName;
+  const chunkName = `${currentMaterial}/${params.layoutName}`;
   if (!(chunkName in cachedChunks)) {
     ctx.compiler.running = false;
     ctx.compiler.apply(

diff --git a/tools/ice-devtools/lib/server/controllers/materialList.js b/tools/ice-devtools/lib/server/controllers/materialList.js
@@ -8,6 +8,6 @@ module.exports = async (ctx) => {
   return ctx.render('blocks.hbs', {
     currentMaterial,
     blocks: result.blocks,
-    layouts: result.layouts
+    layouts: result.layouts,
   });
 };
diff --git a/tools/ice-devtools/lib/server/getMaterialLists.js b/tools/ice-devtools/lib/server/getMaterialLists.js
@@ -3,7 +3,7 @@ const fs = require('fs');
 const upperCamelCase = require('uppercamelcase');
 
 function getBlockEntries(dir, material) {
-  let result = {};
+  const result = {};
   const blockDirs = fs.readdirSync(path.join(dir, material, 'blocks'));
   const layoutDirs = fs.readdirSync(path.join(dir, material, 'layouts'));
 
@@ -12,8 +12,8 @@ function getBlockEntries(dir, material) {
     if (fs.existsSync(fullPath) && isDirectory(fullPath)) {
       const pkgData = require(path.join(fullPath, 'package.json'));
       result[pkgData.blockConfig.name] = {
+        material,
         type: 'block',
-        material: material,
         className: upperCamelCase(pkgData.blockConfig.name),
         name: pkgData.blockConfig.name,
         title: pkgData.blockConfig.title,
@@ -31,8 +31,8 @@ function getBlockEntries(dir, material) {
     if (fs.existsSync(fullPath) && isDirectory(fullPath)) {
       const pkgData = require(path.join(fullPath, 'package.json'));
       result[pkgData.layoutConfig.name] = {
+        material,
         type: 'layout',
-        material: material,
         className: upperCamelCase(pkgData.layoutConfig.name),
         name: pkgData.layoutConfig.name,
         title: pkgData.layoutConfig.title,
@@ -58,17 +58,17 @@ module.exports = function getMaterialLists(dir) {
   const result = {};
   checkMaterial(pkg);
 
-  Object.keys(pkg.materials)
-    .map((m) => {
+  pkg.materials
+    .map((material) => {
       return {
-        key: m,
-        path: path.join(dir, m),
+        key: material.directory,
+        fullpath: path.join(dir, material.directory),
       };
     })
-    .filter(({ path }) => {
-      return fs.existsSync(path);
+    .filter(({ fullpath }) => {
+      return fs.existsSync(fullpath);
     })
-    .forEach(({ key, path }) => {
+    .forEach(({ key }) => {
       result[key] = getBlockEntries(dir, key);
     });