* Fix globalStore bug
* Expose to more parameters to render and store method
* More unit tesing
This commit is contained in:
dntzhang 2019-07-26 15:04:24 +08:00
parent 9e76a23368
commit 0987e14ef3
9 changed files with 1941 additions and 8 deletions

View File

@ -1,6 +1,6 @@
import { render, h } from '../../src/omis'
const Counter = function (props, store, context) {
const Counter = function (props, store) {
return (

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,10 @@
<html>
<head></head>
<body>
<script src="b.js"></script>
</body>
</html>

View File

@ -0,0 +1,20 @@
import { render, h } from '../../src/omis'
const HelloMessage = (props, store, _) => {
return h('div', { ref: ele => _.abc = ele }, `Hello ${props.name}`)
}
HelloMessage.store = _ => {
return {
installed() {
console.log(_.abc)
}
}
}
HelloMessage.css = `div{
color: red;
}`
render(<HelloMessage name="Omis" />, 'body')

View File

@ -68,7 +68,7 @@ function extendStoreUpate(store) {
if(instance.constructor.use){
instance.using = getUse(store.data, instance.constructor.use)
} else if(instance.use){
instance.using = getUse(store.data, instance.initUse())
instance.using = getUse(store.data, typeof instance.use === 'function' ? instance.use() : instance.use)
}
instance.update()

View File

@ -23,7 +23,7 @@ export function createComponent(Ctor, props, $) {
inst.constructor = Ctor;
inst.render = doRender;
if(Ctor.store){
inst.store = Ctor.store(inst)
inst.store = Ctor.store(inst, $)
inst.store.update = inst.update.bind(inst)
}
@ -34,7 +34,7 @@ export function createComponent(Ctor, props, $) {
inst.using = getUse(inst.$.data, inst.constructor.use)
inst.$.instances.push(inst)
} else if(inst.use){
const use = inst.use()
const use = typeof inst.use === 'function' ? inst.use() : inst.use
inst._updatePath = getPath(use)
inst.using = getUse(inst.$.data, use)
inst.$.instances.push(inst)
@ -55,5 +55,5 @@ export function createComponent(Ctor, props, $) {
/** The `.render()` method for a PFC backing instance. */
function doRender(props, $) {
return this.constructor(props, this.store, $);
return this.constructor(props, this.store, this, $);
}

View File

@ -0,0 +1,101 @@
import {
render, h
} from '../../src/omis'
describe('global store', () => {
let scratch
//const Empty = () => null
before(() => {
scratch = document.createElement('div')
; (document.body || document.documentElement).appendChild(scratch)
})
beforeEach(() => {
//let c = scratch.firstElementChild;
//if (c) render(<Empty />, scratch, { merge: c })
scratch.innerHTML = ''
})
after(() => {
scratch.parentNode.removeChild(scratch)
scratch = null
})
it('simple test', () => {
const HelloMessage = (props, store, _, $) => {
return h('div', { ref: ele => _.abc = ele }, `Hello ${$.data.name}`)
}
let a
HelloMessage.store = _ => {
return {
installed() {
}
}
}
render(<HelloMessage />, scratch,{
data:{
name: 'abc'
}
})
expect(scratch.innerHTML).to.deep.equal('<div>Hello abc</div>')
})
it('observer testA', () => {
const HelloMessage = (props, store, _, $) => {
return h('div', { ref: ele => _.abc = ele }, `Hello ${$.data.name}`)
}
let a
HelloMessage.store = (_, $) => {
_.use = ['name']
return {
installed() {
$.data.name = 'cde'
}
}
}
render(<HelloMessage />, scratch,{
data:{
name: 'abc'
}
})
expect(scratch.innerHTML).to.deep.equal('<div>Hello cde</div>')
})
it('observer testB', () => {
const HelloMessage = (props, store, _, $) => {
return h('div', { ref: ele => _.abc = ele }, `Hello ${$.data.name}`)
}
HelloMessage.store = (_, $) => {
_.use = ()=> ['name']
return {
installed() {
$.data.name = 'cde'
}
}
}
render(<HelloMessage />, scratch,{
data:{
name: 'abc'
}
})
expect(scratch.innerHTML).to.deep.equal('<div>Hello cde</div>')
})
})

View File

@ -2,7 +2,7 @@ import {
render, h
} from '../../src/omis'
describe('context', () => {
describe('ref', () => {
let scratch
//const Empty = () => null
@ -24,7 +24,25 @@ describe('context', () => {
it('simple test', () => {
expect(1).to.deep.equal(1)
})
const HelloMessage = (props, store, _) => {
return h('div', { ref: ele => _.abc = ele }, `Hello ${props.name}`)
}
let a
HelloMessage.store = _ => {
return {
installed() {
a = _.abc
}
}
}
HelloMessage.css = `div{
color: red;
}`
render(<HelloMessage name="Omis" />, 'body')
expect(a.innerHTML).to.deep.equal('Hello Omis')
})
})