omis
* Fix globalStore bug * Expose to more parameters to render and store method * More unit tesing
This commit is contained in:
parent
9e76a23368
commit
0987e14ef3
|
@ -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
|
@ -0,0 +1,10 @@
|
|||
<html>
|
||||
|
||||
<head></head>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="b.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -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')
|
|
@ -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()
|
||||
|
|
|
@ -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, $);
|
||||
}
|
||||
|
|
|
@ -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>')
|
||||
})
|
||||
})
|
|
@ -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')
|
||||
})
|
||||
})
|
Loading…
Reference in New Issue