Merge pull request #494 from yiliang114/master

Omiv.render 小优化以及添加测试用例

.gitignore

@@ -19,4 +19,7 @@ vue-ms
 
 npm-debug.log
 /packages/*/todo.md
-bak.js
+bak.js
+
+# test ouput
+coverage

packages/omiv/package.json

@@ -23,6 +23,7 @@
     "strip": "npm-run-all strip:main strip:esm",
     "size": "node -e \"process.stdout.write('gzip size: ')\" && gzip-size --raw dist/omiv.min.js",
     "test": "karma start test/karma.conf.js --single-run",
+    "coverage": "cross-env COVERAGE=true karma start test/karma.conf.js --single-run",
     "fix": "eslint src --fix",
     "fix-e": "eslint examples --fix",
     "lint": "eslint src test",

packages/omiv/src/omiv.d.ts

@@ -4,7 +4,7 @@ export as namespace omiv;
 declare namespace omiv {
   function $(options: any): void;
 
-  function render(app: any, renderTo: string, store: any, options: any): void;
+  function render(app: any, renderTo: string, store: any, options: any): any
 
   function reset(store: any): void;
 

packages/omiv/src/vue.js

@@ -129,8 +129,7 @@ function removeItem(item, arr) {
   }
 }
 
-export function render(app, renderTo, store, options) {
-  reset(store)
+export function render(app, renderTo, initStore, options) {
   if (!Vue) {
     if (process.env.NODE_ENV !== 'production') {
       // eslint-disable-next-line
@@ -140,13 +139,17 @@ export function render(app, renderTo, store, options) {
     }
     return
   }
-  new Vue(
+  // fix: 如果是在子节点通过 $ 注入的 store， 在 根实例中拿不到 $store
+  initStore = initStore || store
+  reset(initStore)
+
+  return new Vue(
     Object.assign(
       {
         render: h => h(app)
       },
       options,
-      store ? { store } : {}
+      initStore ? { store: initStore } : {}
     )
   ).$mount(renderTo)
 }
@@ -173,16 +176,8 @@ export function reset(s) {
   }
 }
 
+// Vue.use 会判断是否重复安装
 export function install(_Vue) {
-  if (Vue && _Vue === Vue) {
-    if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line
-      console.error(
-        '[omiv] already installed. Vue.use(Omiv) should be called only once.'
-      )
-    }
-    return
-  }
   Vue = _Vue
   applyMixin(Vue)
 }

packages/omiv/test/browser/components/child3.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id='app'>
+  <div id="app">
     <span class="count">{{ $state.count }}</span>
     <button @click="$store.add">Increment</button>
   </div>

packages/omiv/test/browser/components/child4.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="app">
+    <span class="count">{{ $store.data.count }}</span>
+    <button @click="$store.add">Increment</button>
+  </div>
+</template>
+
+<script>
+import { $ } from '../../../src/omiv'
+
+export default $({
+  store: new (class {
+    data = {
+      count: 2
+    }
+    sub = () => {
+      this.data.count--
+    }
+    add = () => {
+      this.data.count++
+    }
+  })(),
+  use: ['count']
+})
+</script>

packages/omiv/test/browser/components/child5.vue

@@ -0,0 +1,14 @@
+<template>
+  <div id="app">
+    <span class="count">{{ state.count }}</span>
+    <button @click="store.add">Increment</button>
+  </div>
+</template>
+
+<script>
+import { $ } from '../../../src/omiv'
+
+export default $({
+  useSelf: ['count']
+})
+</script>

packages/omiv/test/browser/components/child6.vue

@@ -0,0 +1,40 @@
+<template>
+  <div id="app">
+    <span class="count">{{ state.cs.count }}</span>
+    <button @click="store.cs.add">Increment</button>
+  </div>
+</template>
+
+<script>
+import { $ } from '../../../src/omiv'
+
+export default $({
+  store: {
+    cs: new (class {
+      data = {
+        count: 2
+      }
+      sub = () => {
+        this.data.count--
+      }
+      add = () => {
+        this.data.count++
+      }
+    })(),
+    rs: new (class {
+      data = {
+        count: 2
+      }
+      sub = () => {
+        this.data.count--
+      }
+      add = () => {
+        this.data.count++
+      }
+    })()
+  },
+  use: {
+    cs: ['count']
+  }
+})
+</script>

packages/omiv/test/browser/components/child7.vue

@@ -0,0 +1,23 @@
+<template>
+  <div id="app">
+    <span class="count">{{ $state.count }}</span>
+    <button @click="$store.add">Increment</button>
+  </div>
+</template>
+
+<script>
+export default {
+  store: new (class {
+    data = {
+      count: 2
+    }
+    sub = () => {
+      this.data.count--
+    }
+    add = () => {
+      this.data.count++
+    }
+  })(),
+  use: ['count']
+}
+</script>

packages/omiv/test/browser/components/multi-store-useSelf-$.vue

@@ -0,0 +1,17 @@
+<template>
+  <div id="app">
+    <span class="count">{{ $state.cs.count }}</span>
+    <button id="btn"
+      @click="$store.cs.sub">sub</button>
+  </div>
+</template>
+
+<script>
+import { $ } from '../../../src/omiv'
+
+export default $({
+  useSelf: {
+    cs: ['count']
+  }
+})
+</script>

packages/omiv/test/browser/components/multi-store-useSelf.vue

@@ -0,0 +1,15 @@
+<template>
+  <div id="app">
+    <span class="count">{{ $state.cs.count }}</span>
+    <button id="btn"
+      @click="$store.cs.sub">sub</button>
+  </div>
+</template>
+
+<script>
+export default {
+  useSelf: {
+    cs: ['count']
+  }
+}
+</script>

packages/omiv/test/browser/components/multi-store.vue

@@ -1,7 +1,8 @@
 <template>
   <div id="app">
     <span class="count">{{ $state.cs.count }}</span>
-    <button id="btn" @click="$store.cs.sub">sub</button>
+    <button id="btn"
+      @click="$store.cs.sub">sub</button>
   </div>
 </template>
 

packages/omiv/test/browser/index.js

@@ -3,8 +3,9 @@ import Simple from './components/simple.vue'
 import Event from './components/event.vue'
 import Nest2 from './components/nest2.vue'
 import Vue from 'vue'
-import Omiv, { render } from '../../src/omiv'
+import Omiv, { render, reset } from '../../src/omiv'
 //import Nest from './components/nest.vue'
+import Child2 from './components/child2.vue'
 
 const errorHandler = (error, vm) => {
   console.error(
@@ -39,7 +40,6 @@ describe('base', () => {
     new Vue({
       render: h => h(Counter)
     }).$mount('#app')
-
     expect(document.querySelector('#app').innerHTML).to.equal(
       '<span class="count">0</span> <button>Increment</button>'
     )
@@ -67,6 +67,41 @@ describe('base', () => {
     )
   })
 
+  it('simple test', () => {
+    // 跑测试用例情况特殊， 重置一下 store.
+    reset()
+    render(require('./components/child7.vue').default, '#app')
+
+    expect(document.querySelector('#app').innerHTML).to.equal(
+      '<span class="count">2</span> <button>Increment</button>'
+    )
+  })
+
+  it('install omiv repeatedly test', () => {
+    Vue.use(Omiv)
+    Vue.use(Omiv)
+
+    render(
+      Simple,
+      '#app',
+      new (class {
+        data = {
+          count: 2
+        }
+        sub = () => {
+          this.data.count--
+        }
+        add = () => {
+          this.data.count++
+        }
+      })()
+    )
+
+    expect(document.querySelector('#app').innerHTML).to.equal(
+      '<span class="count">2</span> <button>Increment</button>'
+    )
+  })
+
   it('simple event test', done => {
     render(
       Event,
@@ -94,7 +129,7 @@ describe('base', () => {
     })
   })
 
-  it('multi-store test', done => {
+  it('multi-store use use test', done => {
     const cs = new (class {
       data = {
         count: 2
@@ -128,6 +163,43 @@ describe('base', () => {
     })
   })
 
+  it('multi-store use useSelf test', done => {
+    const cs = new (class {
+      data = {
+        count: 2
+      }
+      sub = () => {
+        this.data.count--
+      }
+      add = () => {
+        this.data.count++
+      }
+    })()
+
+    const rs = new (class {
+      data = {
+        name: 'omiv'
+      }
+      rename = () => {
+        this.data.name = 'omiv + vue'
+      }
+    })()
+
+    render(require('./components/multi-store-useSelf.vue').default, '#app', {
+      cs,
+      rs
+    })
+
+    document.querySelector('#btn').click()
+
+    Vue.nextTick(() => {
+      done()
+      expect(document.querySelector('#app').innerHTML).to.equal(
+        '<span class="count">1</span> <button id="btn">sub</button>'
+      )
+    })
+  })
+
   it('nest test', done => {
     const cs = new (class {
       data = {
@@ -178,19 +250,22 @@ describe('base', () => {
     })
   })
 
-  it('mixin $store test use', done => {
-    const cs = new (class {
-      data = {
-        count: 2
-      }
-      sub = () => {
-        this.data.count--
-      }
-      add = () => {
-        this.data.count++
-      }
-    })()
-    render(require('./components/child2.vue').default, '#app', cs)
+  it('mixin $store test', done => {
+    render(
+      Child2,
+      '#app',
+      new (class {
+        data = {
+          count: 2
+        }
+        sub = () => {
+          this.data.count--
+        }
+        add = () => {
+          this.data.count++
+        }
+      })()
+    )
 
     document.querySelector('button').click()
 
@@ -226,18 +301,156 @@ describe('base', () => {
     })
   })
 
-  it('child vue component inject store', done => {
+  it('mixin single-store vm omivDestroyed test', done => {
+    const cs = new (class {
+      data = {
+        count: 2
+      }
+      sub = () => {
+        this.data.count--
+      }
+      add = () => {
+        this.data.count++
+      }
+    })()
+    const vm = render(require('./components/child3.vue').default, '#app', cs)
 
-    render(require('./components/nest3.vue').default, '#app')
+    vm.$children[0].$destroy()
+
+    Vue.nextTick(() => {
+      done()
+      expect(vm.$store.components.length).to.equal(0)
+    })
+  })
+
+  it('mixin multi-store vm omivDestroyed test', done => {
+    const cs = new (class {
+      data = {
+        count: 2
+      }
+      sub = () => {
+        this.data.count--
+      }
+      add = () => {
+        this.data.count++
+      }
+    })()
+
+    const rs = new (class {
+      data = {
+        name: 'omiv'
+      }
+      rename = () => {
+        this.data.name = 'omiv + vue'
+      }
+    })()
+
+    const vm = render(require('./components/multi-store.vue').default, '#app', {
+      cs,
+      rs
+    })
+
+    vm.$children[0].$destroy()
+
+    Vue.nextTick(() => {
+      done()
+      expect(vm.$store.cs.components.length).to.equal(0)
+    })
+  })
+
+  it('$ simple test', done => {
+    const vm = render(require('./components/child4.vue').default, '#app')
 
     document.querySelector('button').click()
 
     Vue.nextTick(() => {
       done()
       expect(document.querySelector('#app').innerHTML).to.equal(
-        '<div><span class="count">2</span> <button>Increment</button></div>'
+        '<span class="count">3</span> <button>Increment</button>'
       )
     })
   })
 
+  it('$ destroyed test', done => {
+    const cs = new (class {
+      data = {
+        count: 2
+      }
+      sub = () => {
+        this.data.count--
+      }
+      add = () => {
+        this.data.count++
+      }
+    })()
+
+    const rs = new (class {
+      data = {
+        name: 'omiv'
+      }
+      rename = () => {
+        this.data.name = 'omiv + vue'
+      }
+    })()
+    render(require('./components/multi-store-useSelf-$.vue').default, '#app', {
+      cs,
+      rs
+    })
+
+    document.querySelector('button').click()
+
+    Vue.nextTick(() => {
+      done()
+      expect(document.querySelector('#app').innerHTML).to.equal(
+        '<span class="count">1</span> <button id="btn">sub</button>'
+      )
+    })
+  })
+
+  it('$ useSelf test', done => {
+    const cs = new (class {
+      data = {
+        count: 2
+      }
+      sub = () => {
+        this.data.count--
+      }
+      add = () => {
+        this.data.count++
+      }
+    })()
+
+    render(require('./components/child5.vue').default, '#app', cs)
+
+    document.querySelector('button').click()
+
+    Vue.nextTick(() => {
+      done()
+      expect(document.querySelector('#app').innerHTML).to.equal(
+        '<span class="count">3</span> <button>Increment</button>'
+      )
+    })
+  })
+
+  it('$ simple destroyed test ', done => {
+    const vm = render(require('./components/child4.vue').default, '#app')
+    vm.$children[0].$destroy()
+
+    Vue.nextTick(() => {
+      done()
+      expect(vm.$store.components.length).to.equal(0)
+    })
+  })
+
+  it('$ options.computed.state test ', done => {
+    const vm = render(require('./components/child6.vue').default, '#app')
+    document.querySelector('button').click()
+
+    Vue.nextTick(() => {
+      done()
+      expect(document.querySelector('#app').innerHTML).to.equal(
+        '<span class="count">3</span> <button>Increment</button>'
+      )
+    })
+  })
 })

packages/omiv/test/browser/vue.js

@@ -0,0 +1,53 @@
+import Vue from 'vue'
+import Simple from './components/simple.vue'
+import { render } from '../../src/omiv'
+
+const errorHandler = (error, vm) => {
+  console.error(
+    '--------------------------------------------------------------------'
+  )
+  throw error
+}
+
+Vue.config.errorHandler = errorHandler
+Vue.prototype.$throw = error => errorHandler(error, this)
+
+describe('vue.js', () => {
+  let scratch
+
+  before(() => {
+    scratch = document.createElement('div')
+    scratch.id = 'app'
+    document.body.appendChild(scratch)
+  })
+
+  beforeEach(() => {
+    scratch.innerHTML = ''
+  })
+
+  after(() => {
+    scratch.parentNode && scratch.parentNode.removeChild(scratch)
+    scratch = null
+  })
+
+  it('render test', () => {
+    // Vue.use(Omiv)
+    const vm = render(
+      Simple,
+      '#app',
+      new (class {
+        data = {
+          count: 2
+        }
+        sub = () => {
+          this.data.count--
+        }
+        add = () => {
+          this.data.count++
+        }
+      })()
+    )
+
+    expect(vm).to.equal(undefined)
+  })
+})

packages/omiv/test/karma.conf.js

@@ -1,165 +1,163 @@
 /*eslint no-var:0, object-shorthand:0 */
 
-//var coverage = String(process.env.COVERAGE) === 'true',
-// ci = String(process.env.CI).match(/^(1|true)$/gi),
-// pullRequest = !String(process.env.TRAVIS_PULL_REQUEST).match(/^(0|false|undefined)$/gi),
-// masterBranch = String(process.env.TRAVIS_BRANCH).match(/^master$/gi),
-// sauceLabs = ci && !pullRequest && masterBranch,
-var coverage = false,
-	sauceLabs = false,
-	performance = !coverage && String(process.env.PERFORMANCE)!=='false',
-	webpack = require('webpack');
+var coverage = String(process.env.COVERAGE) === 'true',
+  // ci = String(process.env.CI).match(/^(1|true)$/gi),
+  // pullRequest = !String(process.env.TRAVIS_PULL_REQUEST).match(/^(0|false|undefined)$/gi),
+  // masterBranch = String(process.env.TRAVIS_BRANCH).match(/^master$/gi),
+  // sauceLabs = ci && !pullRequest && masterBranch,
+  // var coverage = false,
+  sauceLabs = false,
+  performance = !coverage && String(process.env.PERFORMANCE) !== 'false',
+  webpack = require('webpack');
 
 var VueLoaderPlugin = require('vue-loader/lib/plugin')
 var sauceLabsLaunchers = {
-	sl_chrome: {
-		base: 'SauceLabs',
-		browserName: 'chrome',
-		platform: 'Windows 10'
-	},
-	sl_firefox: {
-		base: 'SauceLabs',
-		browserName: 'firefox',
-		platform: 'Windows 10'
-	},
-	sl_safari: {
-		base: 'SauceLabs',
-		browserName: 'safari',
-		platform: 'OS X 10.11'
-	},
-	sl_edge: {
-		base: 'SauceLabs',
-		browserName: 'MicrosoftEdge',
-		platform: 'Windows 10'
-	},
-	sl_ie_11: {
-		base: 'SauceLabs',
-		browserName: 'internet explorer',
-		version: '11.103',
-		platform: 'Windows 10'
-	}
+  sl_chrome: {
+    base: 'SauceLabs',
+    browserName: 'chrome',
+    platform: 'Windows 10'
+  },
+  sl_firefox: {
+    base: 'SauceLabs',
+    browserName: 'firefox',
+    platform: 'Windows 10'
+  },
+  sl_safari: {
+    base: 'SauceLabs',
+    browserName: 'safari',
+    platform: 'OS X 10.11'
+  },
+  sl_edge: {
+    base: 'SauceLabs',
+    browserName: 'MicrosoftEdge',
+    platform: 'Windows 10'
+  },
+  sl_ie_11: {
+    base: 'SauceLabs',
+    browserName: 'internet explorer',
+    version: '11.103',
+    platform: 'Windows 10'
+  }
 };
 
 var localLaunchers = {
-	ChromeNoSandboxHeadless: {
-		base: 'Chrome',
-		flags: [
-			'--no-sandbox',
-			// See https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
-			'--headless',
-			'--disable-gpu',
-			// Without a remote debugging port, Google Chrome exits immediately.
-			'--remote-debugging-port=9333'
-		]
-	}
+  ChromeNoSandboxHeadless: {
+    base: 'Chrome',
+    flags: [
+      '--no-sandbox',
+      // See https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
+      '--headless',
+      '--disable-gpu',
+      // Without a remote debugging port, Google Chrome exits immediately.
+      '--remote-debugging-port=9333'
+    ]
+  }
 };
 
-module.exports = function(config) {
-	config.set({
-		browsers: sauceLabs
-			? Object.keys(sauceLabsLaunchers)
-			: Object.keys(localLaunchers),
+module.exports = function (config) {
+  config.set({
+    browsers: sauceLabs
+      ? Object.keys(sauceLabsLaunchers)
+      : Object.keys(localLaunchers),
 
-		frameworks: ['source-map-support', 'mocha', 'chai-sinon'],
+    frameworks: ['source-map-support', 'mocha', 'chai-sinon'],
 
-		reporters: ['mocha'].concat(
-			coverage ? 'coverage' : [],
-			sauceLabs ? 'saucelabs' : []
-		),
+    reporters: ['mocha'].concat(
+      coverage ? 'coverage' : [],
+      sauceLabs ? 'saucelabs' : []
+    ),
 
-		// 		coverageReporter: {
-		// 			dir: __dirname+'/../coverage',
-		// 			reporters: [
-		// 				{ type: 'text-summary' },
-		// 				{ type: 'html' },
-		// 				{ type: 'lcovonly', subdir: '.', file: 'lcov.info' }
-		// 			]
-		// 		},
+    coverageReporter: {
+      dir: __dirname + '/../coverage',
+      reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text-summary' }]
+    },
 
-		mochaReporter: {
-			showDiff: true
-		},
+    mochaReporter: {
+      showDiff: true
+    },
 
-		browserLogOptions: { terminal: true },
-		browserConsoleLogOptions: { terminal: true },
+    browserLogOptions: { terminal: true },
+    browserConsoleLogOptions: { terminal: true },
 
-		browserNoActivityTimeout: 5 * 60 * 1000,
+    browserNoActivityTimeout: 5 * 60 * 1000,
 
-		// Use only two browsers concurrently, works better with open source Sauce Labs remote testing
-		concurrency: 2,
+    // Use only two browsers concurrently, works better with open source Sauce Labs remote testing
+    concurrency: 2,
 
-		// sauceLabs: {
-		// 	tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER || ('local'+require('./package.json').version),
-		// 	startConnect: false
-		// },
+    // sauceLabs: {
+    // 	tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER || ('local'+require('./package.json').version),
+    // 	startConnect: false
+    // },
 
-		customLaunchers: sauceLabs ? sauceLabsLaunchers : localLaunchers,
+    customLaunchers: sauceLabs ? sauceLabsLaunchers : localLaunchers,
 
-		files: [
-			{ pattern: 'polyfills.js', watched: false },
-			{ pattern: '{browser,shared}/**.js', watched: false }
-		],
+    files: [
+      { pattern: 'polyfills.js', watched: false },
+      { pattern: '{browser,shared}/**.js', watched: false }
+    ],
 
-		preprocessors: {
-			'**/*': ['webpack', 'sourcemap']
-		},
+    preprocessors: {
+      '**/*': ['webpack', 'sourcemap']
+    },
 
-		webpack: {
-			mode: 'development',
-			devtool: 'inline-source-map',
-			module: {
-				/* Transpile source and test files */
-				rules: [
-					{
-						// enforce: 'pre',
-						test: /\.jsx?$/,
-						exclude: /node_modules/,
-						loader: 'babel-loader',
-						options: {
-							comments: false,
-							compact: true,
-							plugins : [ 
-								'transform-class-properties',
-								["transform-react-jsx", { "pragma":"h" }] 
-							] 
-						}
-					},
-					{
-						test: /\.vue$/,
-						exclude: /node_modules/,
-						loader: 'vue-loader'
-					},
-					/* Only Instrument our source files for coverage */
-					coverage ? {
-						test: /\.jsx?$/,
-						loader: 'istanbul-instrumenter-loader',
-						include: /src/
-					} : {}
-				]
-			},
-			resolve: {
-				// The React DevTools integration requires preact as a module
-				// rather than referencing source files inside the module
-				// directly
-				alias: { Omi: '../src/omi' },
-				modules: [__dirname, 'node_modules']
-			},
-			plugins: [
-				new webpack.DefinePlugin({
-					coverage: coverage,
-					NODE_ENV: JSON.stringify(process.env.NODE_ENV || ''),
-					ENABLE_PERFORMANCE: performance,
-					DISABLE_FLAKEY: !!String(process.env.FLAKEY).match(/^(0|false)$/gi)
-				}),
-    	  new VueLoaderPlugin()
-			],
-			performance: {
-				hints: false
-			}
-		},
+    webpack: {
+      mode: 'development',
+      devtool: 'inline-source-map',
+      module: {
+        /* Transpile source and test files */
+        rules: [
+          {
+            // enforce: 'pre',
+            test: /\.jsx?$/,
+            exclude: /node_modules/,
+            loader: 'babel-loader',
+            options: {
+              comments: false,
+              compact: true,
+              plugins: [
+                'transform-class-properties',
+                ["transform-react-jsx", { "pragma": "h" }]
+              ]
+            }
+          },
+          {
+            test: /\.vue$/,
+            exclude: /node_modules/,
+            loader: 'vue-loader'
+          },
+          /* Only Instrument our source files for coverage */
+          coverage ? {
+            test: /\.jsx?$/,
+            loader: 'istanbul-instrumenter-loader',
+            include: /src/,
+            // enable esModules for coverage
+            options: { esModules: true }
+          } : {}
+        ]
+      },
+      resolve: {
+        // The React DevTools integration requires preact as a module
+        // rather than referencing source files inside the module
+        // directly
+        alias: { Omi: '../src/omi' },
+        modules: [__dirname, 'node_modules']
+      },
+      plugins: [
+        new webpack.DefinePlugin({
+          coverage: coverage,
+          NODE_ENV: JSON.stringify(process.env.NODE_ENV || ''),
+          ENABLE_PERFORMANCE: performance,
+          DISABLE_FLAKEY: !!String(process.env.FLAKEY).match(/^(0|false)$/gi)
+        }),
+        new VueLoaderPlugin()
+      ],
+      performance: {
+        hints: false
+      }
+    },
 
-		webpackMiddleware: {
-			noInfo: true
-		}
-	});
+    webpackMiddleware: {
+      noInfo: true
+    }
+  });
 };