feat(main): first version

BREAKING CHANGE: 支持 组可见或即将可见时懒加载

Author: binggg

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    ["es2015", { "modules": false }]
+  ],
+  "plugins": [
+    "external-helpers"
+  ]
+}

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules/
+npm-debug.log

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 xunlei
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,112 @@
+# Vue Lazy Component
+
+> Vue.js 2.0 组件级懒加载方案
+
+![Preview](https://github.com/binggg/vue-lazy-component/blob/master/demo/assets/demo.jpeg?raw=true)
+
+## 安装
+```
+npm install @xunlei/vue-lazy-component
+```
+
+## 在线Demo
+
+https://xunleif2e.github.io/vue-lazy-component/demo/dist
+
+## 使用
+
+### 1. 注册组件
+
+#### 方式1 利用插件方式全局注册
+
+```javascript
+import VueContextMenu from '@xunlei/vue-lazy-component'
+import Vue from 'vue'
+
+Vue.use(VueContextMenu)
+```
+#### 方式2 局部注册
+
+```javascript
+import { component as VueContextMenu } from '@xunlei/vue-lazy-component'
+
+export default {
+  // ...
+  components: {
+    'vue-lazy-component': VueContextMenu
+  }
+}
+```
+
+#### 方式3 独立版本引入，自动全局注册
+> 前提是 vue 也是独立版本通过script标签引入
+
+```html
+<script src="./node_modules/dist/vue-lazy-component.js"></script>
+```
+
+### 2. 模版语法
+```html
+ <context-menu class="right-menu"
+    :target="contextMenuTarget"
+    :show="contextMenuVisible"
+    @update:show="(show) => contextMenuVisible = show">
+    <a href="javascript:;" @click="copyMsg">复制</a>
+    <a href="javascript:;" @click="quoteMsg">引用</a>
+    <a href="javascript:;" @click="deleteMsg">删除</a>
+</context-menu>
+```
+
+## Props
+
+| 参数                    | 说明  | 类型 | 可选值 | 默认值 |
+|-------------------------|-------|------|--------|--------|
+| target | 触发右键事件的元素  | Element | -      | -      |
+| show | 是否显示右键菜单  | Boolean | -      | false      |
+
+
+## Events
+
+| 事件名                    | 说明  | 事件参数
+|-------------------------|-------|------|
+| update:show | 右键菜单显示/隐藏时触发  | 是否显示 |
+
+
+## 注意
+
+如果target是某个兄弟元素，可以使用 `$refs`来访问，但是注意请在父组件mounted 之后获取。
+
+参考 https://cn.vuejs.org/v2/guide/components.html#子组件索引
+
+
+## ChangeLog
+- [1.0.1] 2017-07-10
+  - 修复 target 为空时可能出错的bug
+
+- [1.0.0] 2017-06-23
+  - 实现右键菜单基本功能
+
+## Development Setup
+
+``` bash
+# install deps
+npm install
+
+# serve demo at localhost:8080
+npm run dev
+
+# build library and demo
+npm run build
+
+# build library
+npm run build:library
+
+# build demo
+npm run build:demo
+```
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2017 赵兵

build/build.js

@@ -0,0 +1,35 @@
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack')
+var config = require('../config')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

build/build.rollup.js

@@ -0,0 +1,50 @@
+var fs = require('fs')
+var path = require('path')
+var chalk = require('chalk')
+var rollup = require('rollup')
+var babel = require('rollup-plugin-babel')
+var uglify = require('rollup-plugin-uglify')
+
+var version = process.env.VERSION || require('../package.json').version
+var author = process.env.VERSION || require('../package.json').author
+var license = process.env.VERSION || require('../package.json').license
+
+var banner =
+  '/**\n' +
+  ' * vue-context-menu v' + version + '\n' +
+  ' * (c) ' + new Date().getFullYear() + ' ' + author + '\n' +
+  ' * @license ' + license + '\n' +
+  ' */\n'
+
+rollup.rollup({
+    entry: path.resolve(__dirname, '..', 'src/vue-context-menu.js'),
+    plugins: [
+      babel(),
+      uglify()
+    ]
+})
+.then(bundle => {
+    return write(path.resolve(__dirname, '../dist/vue-context-menu.js'), bundle.generate({
+        format: 'umd',
+        moduleName: 'vueContextMenu'
+    }).code)
+})
+.then(() => {
+    console.log(chalk.green('\nAwesome! vue-context-menu v' + version + ' builded.\n'))
+})
+.catch(console.log)
+
+function getSize (code) {
+  return (code.length / 1024).toFixed(2) + 'kb'
+}
+
+function write (dest, code) {
+  return new Promise(function (resolve, reject) {
+    code = banner + code
+    fs.writeFile(dest, code, function (err) {
+      if (err) return reject(err)
+      console.log(chalk.blue(dest) + ' ' + getSize(code))
+      resolve()
+    })
+  })
+}

build/check-versions.js

@@ -0,0 +1,48 @@
+var chalk = require('chalk')
+var semver = require('semver')
+var packageConfig = require('../package.json')
+var shell = require('shelljs')
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+var versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  },
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  var warnings = []
+  for (var i = 0; i < versionRequirements.length; i++) {
+    var mod = versionRequirements[i]
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+    for (var i = 0; i < warnings.length; i++) {
+      var warning = warnings[i]
+      console.log('  ' + warning)
+    }
+    console.log()
+    process.exit(1)
+  }
+}

build/dev-client.js

@@ -0,0 +1,9 @@
+/* eslint-disable */
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})

build/dev-server.js

@@ -0,0 +1,89 @@
+require('./check-versions')()
+
+var config = require('../config')
+if (!process.env.NODE_ENV) {
+  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+}
+
+var opn = require('opn')
+var path = require('path')
+var express = require('express')
+var webpack = require('webpack')
+var proxyMiddleware = require('http-proxy-middleware')
+var webpackConfig = require('./webpack.dev.conf')
+
+// default port where dev server listens for incoming traffic
+var port = process.env.PORT || config.dev.port
+// automatically open browser, if not set will be false
+var autoOpenBrowser = !!config.dev.autoOpenBrowser
+// Define HTTP proxies to your custom API backend
+// https://github.com/chimurai/http-proxy-middleware
+var proxyTable = config.dev.proxyTable
+
+var app = express()
+var compiler = webpack(webpackConfig)
+
+var devMiddleware = require('webpack-dev-middleware')(compiler, {
+  publicPath: webpackConfig.output.publicPath,
+  quiet: true
+})
+
+var hotMiddleware = require('webpack-hot-middleware')(compiler, {
+  log: () => {}
+})
+// force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function (compilation) {
+  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+    hotMiddleware.publish({ action: 'reload' })
+    cb()
+  })
+})
+
+// proxy api requests
+Object.keys(proxyTable).forEach(function (context) {
+  var options = proxyTable[context]
+  if (typeof options === 'string') {
+    options = { target: options }
+  }
+  app.use(proxyMiddleware(options.filter || context, options))
+})
+
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')())
+
+// serve webpack bundle output
+app.use(devMiddleware)
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware)
+
+// serve pure static assets
+var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+app.use(staticPath, express.static('./demo/static'))
+
+var uri = 'http://localhost:' + port
+
+var _resolve
+var readyPromise = new Promise(resolve => {
+  _resolve = resolve
+})
+
+console.log('> Starting dev server...')
+devMiddleware.waitUntilValid(() => {
+  console.log('> Listening at ' + uri + '\n')
+  // when env is testing, don't need open it
+  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+    opn(uri)
+  }
+  _resolve()
+})
+
+var server = app.listen(port)
+
+module.exports = {
+  ready: readyPromise,
+  close: () => {
+    server.close()
+  }
+}