vant components

build/bin/build-all.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const components = require('../../components.json');
+const execSync = require('child_process').execSync;
+const existsSync = require('fs').existsSync;
+const path = require('path');
+
+const componentPaths = [];
+
+delete components.font;
+
+Object.keys(components).forEach(key => {
+  const filePath = path.join(__dirname, `../../packages/${key}/webpack.conf.js`);
+
+  if (existsSync(filePath)) {
+    componentPaths.push(`packages/${key}/webpack.conf.js`);
+  }
+});
+
+const paths = componentPaths.join(',');
+const cli = `node_modules/.bin/webpack build -c ${paths} -p`;
+
+execSync(cli, {
+  stdio: 'inherit'
+});

build/bin/build-entry.js

@@ -0,0 +1,75 @@
+var Components = require('../../components.json');
+var fs = require('fs');
+var render = require('json-templater/string');
+var uppercamelcase = require('uppercamelcase');
+var path = require('path');
+var chalk = require('chalk');
+
+var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
+var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
+var ISNTALL_COMPONENT_TEMPLATE = '  Vue.component({{name}}.name, {{name}});';
+var MAIN_TEMPLATE = `{{include}}
+
+const install = function(Vue) {
+  if (install.installed) return;
+
+{{install}}
+};
+
+// auto install
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+}
+
+module.exports = {
+  install,
+  version: '{{version}}',
+{{list}}
+};
+`;
+
+delete Components.font;
+
+var ComponentNames = Object.keys(Components);
+
+var includeComponentTemplate = [];
+var installTemplate = [];
+var listTemplate = [];
+
+ComponentNames.forEach(name => {
+  var componentName = uppercamelcase(name);
+
+  includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
+    name: componentName,
+    package: name
+  }));
+
+  if ([
+    // directives
+    'Lazyload',
+    'Waterfall',
+
+    // services
+    'Dialog',
+    'Toast',
+    'ImagePreview'
+  ].indexOf(componentName) === -1) {
+    installTemplate.push(render(ISNTALL_COMPONENT_TEMPLATE, {
+      name: componentName,
+      component: name
+    }));
+  }
+
+  listTemplate.push(`  ${componentName}`);
+});
+
+var template = render(MAIN_TEMPLATE, {
+  include: includeComponentTemplate.join('\n'),
+  install: installTemplate.join('\n'),
+  version: process.env.VERSION || require('../../package.json').version,
+  list: listTemplate.join(',\n')
+});
+
+fs.writeFileSync(OUTPUT_PATH, template);
+console.log(chalk.green('[build entry] DONE:' + OUTPUT_PATH));
+

build/bin/init.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+const ch = require('child_process');
+const gulp = require('gulp');
+const runSequence = require('run-sequence');
+const gutil = require('gulp-util');
+const fileSave = require('file-save');
+const path = require('path');
+const exec = ch.exec;
+
+if (!process.argv[2]) {
+  console.error('[组件名]必填.');
+  process.exit(1);
+}
+
+const name = process.argv[2];
+
+
+// 项目规范文件拷贝
+gulp.task('copy', function(callback) {
+  gutil.log(gutil.colors.yellow('-------> 开始初始化'));
+
+  exec('cd packages && git clone git@gitlab.qima-inc.com:fe/vue-seed.git ' + name, function(err, stdout, stderr) {
+    gutil.log('-------> 拉取 vue-seed');
+    exec('rm -rf ./packages/' + name + '/.git', function(err, stdout, stderr) {
+      gutil.log('-------> ' + name + '组件初始化成功');
+      callback();
+    });
+  });
+});
+
+
+// 添加到 components.json
+gulp.task('addComponents', function(callback) {
+  const componentsFile = require('../../components.json');
+  if (componentsFile[name]) {
+    console.error(`${name} 已存在.`);
+    process.exit(1);
+  }
+  componentsFile[name] = `./packages/${name}/index.js`;
+  fileSave(path.join(__dirname, '../../components.json'))
+    .write(JSON.stringify(componentsFile, null, '  '), 'utf8')
+    .end('\n');
+  gutil.log('-------> components.json文件更新成功');
+  gutil.log(gutil.colors.yellow('-------> 请无视下面的make报错'));
+});
+
+runSequence('copy', 'addComponents');
+

build/genExamples.js

@@ -0,0 +1,114 @@
+var markdownIt = require('markdown-it');
+var markdownItContainer = require('markdown-it-container');
+var fs = require('fs');
+var path = require('path');
+var cheerio = require('cheerio');
+var chalk = require('chalk');
+var decamelize = require('decamelize');
+var striptags = require('./strip-tags');
+var navs = require('../docs/src/nav.config.js');
+navs = navs['zh-CN'];
+
+var parser = markdownIt('default', {
+  html: true
+});
+
+var renderVueTemplate = function(html, componentTitle) {
+  var $ = cheerio.load(html, {
+    decodeEntities: false,
+    lowerCaseAttributeNames: false,
+    lowerCaseTags: false
+  });
+
+  var output = {
+    style: $.html('style'),
+    script: $.html('script'),
+    'example-block': $.html('example-block')
+  };
+  var result;
+
+  $('style').remove();
+  $('script').remove();
+
+  var script = '';
+  if (output.script) {
+    script = output.script.replace('<script>', '<script>\nimport Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);');
+  } else {
+    script = '<script>\nimport Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>';
+  }
+
+  var componentName = componentTitle.split(' ')[0];
+  componentName = decamelize(componentName, '-');
+  result = `<template><section class="demo-${componentName}"><h1 class="demo-title">${componentTitle}</h1>` + output['example-block'] + '</section></template>\n' +
+    output.style + '\n' +
+    script;
+
+  return result;
+};
+
+function convert(str) {
+  str = str.replace(/(&#x)(\w{4});/gi, function($0) {
+    return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
+  });
+  return str;
+}
+
+parser.use(markdownItContainer, 'demo', {
+  validate: function(params) {
+    return params.trim().match(/^demo\s*(.*)$/);
+  },
+
+  render: function(tokens, idx) {
+    var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
+    if (tokens[idx].nesting === 1) {
+      var description = (m && m.length > 1) ? m[1] : '';
+      var content = tokens[idx + 1].content;
+      var html = convert(striptags.strip(content, ['script', 'style']));
+
+      return `<example-block title="${description}">
+                ${html}
+              </example-block>\n`;
+    }
+    return '';
+  }
+});
+
+var docsDir = path.resolve(__dirname, '../docs');
+var components = [];
+for (var i = 0; i < navs.length; i++) {
+  var navItem = navs[i];
+
+  if (!navItem.showInMobile) continue;
+
+  if (!navItem.groups) {
+    components.push(navs[i]);
+  } else {
+    for (var j = 0; j < navItem.groups.length; j++) {
+      components = components.concat(navItem.groups[j].list);
+    }
+  }
+}
+for (var i = 0; i < components.length; i++) {
+  var item = components[i];
+  var itemMdFile = `${docsDir}/examples-docs${item.path}.md`;
+  if (!fs.existsSync(itemMdFile)) {
+    continue;
+  }
+
+  var itemMd = fs.readFileSync(`${docsDir}/examples-docs${item.path}.md`).toString();
+  var content = parser.render(itemMd);
+  var result = renderVueTemplate(content, item.title);
+
+  var exampleVueName = `${docsDir}/examples-dist/${item.path}.vue`;
+
+  // 新建一个文件
+  if (!fs.existsSync(exampleVueName)) {
+    fs.closeSync(fs.openSync(exampleVueName, 'w'));
+  }
+  fs.writeFileSync(exampleVueName, result, {
+    encoding: 'utf8'
+  });
+}
+
+console.log(chalk.green('generate examples success!'));
+

build/release.sh

@@ -0,0 +1,35 @@
+git checkout master
+git merge dev
+
+#!/usr/bin/env sh
+set -e
+echo "Enter release version: "
+read VERSION
+
+read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r
+echo    # (optional) move to a new line
+if [[ $REPLY =~ ^[Yy]$ ]]
+then
+  echo "Releasing $VERSION ..."
+
+  # build
+  VERSION=$VERSION npm run dist
+
+  # publish zanui-css
+  echo "Releasing zanui-css $VERSION ..."
+  cd packages/zanui-css
+  npm version $VERSION --message "[release] $VERSION"
+  npm publish --registry=http://registry.npm.qima-inc.com
+  cd ../..
+
+  # commit
+  git add -A
+  git commit -m "[build] $VERSION"
+  npm version $VERSION --message "[release] $VERSION"
+
+  # publish
+  git push origin master
+  git push origin refs/tags/v$VERSION
+
+  npm publish --registry=http://registry.npm.qima-inc.com
+fi

build/strip-tags.js

@@ -0,0 +1,34 @@
+/*!
+ * strip-tags <https://github.com/jonschlinkert/strip-tags>
+ *
+ * Copyright (c) 2015 Jon Schlinkert, contributors.
+ * Licensed under the MIT license.
+ */
+
+'use strict';
+
+var cheerio = require('cheerio');
+
+exports.strip = function(str, tags) {
+  var $ = cheerio.load(str, {decodeEntities: false});
+
+  if (!tags || tags.length === 0) {
+    return str;
+  }
+
+  tags = !Array.isArray(tags) ? [tags] : tags;
+  var len = tags.length;
+
+  while (len--) {
+    $(tags[len]).remove();
+  }
+
+  return $.html();
+};
+
+exports.fetch = function(str, tag) {
+  var $ = cheerio.load(str, {decodeEntities: false});
+  if (!tag) return str;
+
+  return $(tag).html();
+};

build/utils/postcss_pipe.js

@@ -0,0 +1,28 @@
+var config = {
+    'bem': {
+        'shortcuts': {'component': 'b', 'modifier': 'm', 'descendent': 'e'},
+        'separators': {'descendent': '__', 'modifier': '--'}
+    }
+};
+// https://github.com/trysound/postcss-easy-import
+var partialImport = require("postcss-easy-import")();
+
+// 这不是bem，虽然名字叫bem，其实它是suit
+// https://github.com/saladcss/saladcss-bem
+var bem = require("saladcss-bem")(config.bem);
+
+// https://github.com/jonathantneal/precss
+var precss = require("precss")();
+
+// https://github.com/postcss/autoprefixer
+var autoprefixer = require("autoprefixer")();
+
+module.exports = function (webpack) {
+  // 顺序很重要
+  return [
+    partialImport,
+    bem,
+    precss,
+    autoprefixer
+  ];
+};

build/webpack.build.js

@@ -0,0 +1,43 @@
+var webpack = require('webpack');
+var getPostcssPlugin = require('./utils/postcss_pipe');
+var config = require('./webpack.config.js');
+
+config.entry = {
+  'vant': './src/index.js'
+};
+
+config.output = {
+  filename: './lib/[name].js',
+  library: 'vant',
+  libraryTarget: 'umd'
+};
+
+config.externals = {
+  vue: 'vue'
+};
+
+config.plugins = [
+  new webpack.DefinePlugin({
+    'process.env.NODE_ENV': '"production"'
+  }),
+  new webpack.LoaderOptionsPlugin({
+    minimize: true,
+    debug: false,
+    options: {
+      postcss: getPostcssPlugin,
+      babel: {
+        presets: ['es2015'],
+        plugins: ['transform-runtime', 'transform-vue-jsx']
+      },
+      vue: {
+        autoprefixer: false,
+        preserveWhitespace: false,
+        postcss: getPostcssPlugin
+      }
+    }
+  })
+];
+
+delete config.devtool;
+
+module.exports = config;

build/webpack.build.min.js

@@ -0,0 +1,18 @@
+var webpack = require('webpack');
+var config = require('./webpack.config.js');
+
+config.output.filename = config.output.filename.replace(/\.js$/, '.min.js');
+
+config.plugins = config.plugins.concat([
+  new webpack.optimize.UglifyJsPlugin({
+    compress: {
+      warnings: false
+    },
+    output: {
+      comments: false
+    },
+    sourceMap: false
+  })
+]);
+
+module.exports = config;

build/webpack.components.js

@@ -0,0 +1,19 @@
+var path = require('path');
+var Components = require('../components.json');
+var config = require('./webpack.build.js');
+
+delete config.devtool;
+
+config.entry = Components;
+
+config.externals = {
+  vue: 'vue'
+};
+
+config.output = {
+  path: path.join(__dirname, '../lib'),
+  filename: '[name].js',
+  libraryTarget: 'umd'
+};
+
+module.exports = config;

build/webpack.config.js

@@ -0,0 +1,195 @@
+var webpack = require('webpack');
+var path = require('path');
+var slugify = require('transliteration').slugify;
+var striptags = require('./strip-tags');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var getPoastcssPlugin = require('./utils/postcss_pipe');
+var ProgressBarPlugin = require('progress-bar-webpack-plugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+
+var StyleExtractPlugin;
+if (process.env.NODE_ENV === 'production') {
+  StyleExtractPlugin = new ExtractTextPlugin('[name].[hash:8].css');
+} else {
+  StyleExtractPlugin = new ExtractTextPlugin('[name].css');
+}
+
+function convert(str) {
+  str = str.replace(/(&#x)(\w{4});/gi, function($0) {
+    return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
+  });
+  return str;
+}
+
+function wrap(render) {
+  return function() {
+    return render.apply(this, arguments)
+      .replace('<code class="', '<code class="hljs ')
+      .replace('<code>', '<code class="hljs">');
+  };
+};
+
+module.exports = {
+  entry: {
+    'vendor': ['vue', 'vue-router'],
+    'vant-docs': './docs/src/index.js',
+    'vant-examples': './docs/src/examples.js'
+  },
+  output: {
+    path: path.join(__dirname, '../docs/dist'),
+    publicPath: '/',
+    filename: '[name].js'
+  },
+  resolve: {
+    modules: [
+      path.join(__dirname, '../node_modules'),
+      'node_modules'
+    ],
+    extensions: ['.js', '.vue', '.css'],
+    alias: {
+      'vue$': 'vue/dist/vue.runtime.common.js',
+      'vant': path.join(__dirname, '..'),
+      'src': path.join(__dirname, '../src'),
+      'packages': path.join(__dirname, '../packages'),
+      'lib': path.join(__dirname, '../lib'),
+      'components': path.join(__dirname, '../docs/src/components')
+    }
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.vue$/,
+        use: [{
+          loader: 'vue-loader',
+          options: {
+            loaders: {
+              css: ExtractTextPlugin.extract({
+                use: 'css-loader!postcss-loader',
+                fallback: 'vue-style-loader'
+              })
+            }
+          }
+        }]
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          use: 'css-loader!postcss-loader'
+        })
+      },
+      {
+        test: /\.md/,
+        loader: 'vue-markdown-loader'
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
+        loader: 'url-loader'
+      }
+    ]
+  },
+  devtool: 'source-map',
+  plugins: [
+    new ProgressBarPlugin(),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      options: {
+        postcss: getPoastcssPlugin,
+        babel: {
+          presets: ['es2015'],
+          plugins: ['transform-runtime', 'transform-vue-jsx']
+        },
+        vue: {
+          autoprefixer: false,
+          postcss: getPoastcssPlugin
+        },
+        vueMarkdown: {
+          use: [
+            [require('markdown-it-anchor'), {
+              level: 2,
+              slugify: slugify,
+              permalink: true,
+              permalinkBefore: true
+            }],
+            [require('markdown-it-container'), 'demo', {
+              validate: function(params) {
+                return params.trim().match(/^demo\s*(.*)$/);
+              },
+
+              render: function(tokens, idx) {
+                var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
+                if (tokens[idx].nesting === 1) {
+                  var description = (m && m.length > 1) ? m[1] : '';
+                  var content = tokens[idx + 1].content;
+                  var html = convert(striptags.strip(content, ['script', 'style']));
+
+                  return `<demo-block class="demo-box" description="${description}">
+                            <div class="examples" slot="examples">${html}</div>
+                            <div class="highlight" slot="highlight">`;
+                }
+                return '</div></demo-block>\n';
+              }
+            }]
+          ],
+          preprocess: function(MarkdownIt, source) {
+            MarkdownIt.renderer.rules.table_open = function() {
+              return '<table class="table">';
+            };
+            MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
+            return source;
+          }
+        }
+      }
+    }),
+    new HtmlWebpackPlugin({
+      chunks: ['vendor', 'vant-docs'],
+      template: 'docs/src/index.tpl',
+      filename: 'index.html',
+      inject: true
+    }),
+    new HtmlWebpackPlugin({
+      chunks: ['vendor', 'vant-examples'],
+      template: 'docs/src/index.tpl',
+      filename: 'examples.html',
+      inject: true
+    }),
+    new OptimizeCssAssetsPlugin(),
+    StyleExtractPlugin
+  ]
+};
+
+if (process.env.NODE_ENV === 'production') {
+  delete module.exports.devtool;
+  module.exports.output = {
+    path: path.join(__dirname, '../docs/dist'),
+    publicPath: '/zanui/vue',
+    filename: '[name].[hash:8].js'
+  };
+  module.exports.plugins = module.exports.plugins.concat([
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false,
+        drop_console: true
+      },
+      output: {
+        comments: false
+      },
+      sourceMap: false
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: Infinity
+    })
+  ]);
+}