import create from 'mobz'


const store = create({
    count: 0,
    inc() { this.count++ }  // first level will auto bind this
})

// or

const store = create<{ count: number, inc: () => void }>(self => ({
    count: 0,
    inc() { self().count++ }
}))


function Inc() {
    const count = store(s => s.count) // computed and auto rerender

    // or

    const count = store.count // with out auto rerender， you need observer()

    const inc = store(s => s.inc)

    return <div>
        <div>{count}</div>
        <button onClick={inc}>Inc</button>
    </div>
}

document.addEventListener('DOMContentLoaded', () => {
    render(<div id='app'>
        <Inc></Inc>
    </div>, document.querySelector('#app'))
})

import { define } from 'mobz'


const useCounter = define(() => ({
    count: 0,
    inc() { this.count++ }
}))

// or

const useCounter = define<{ count: number, inc: () => void }>(self => ({
    count: 0,
    inc() { self().count++ }
}))

//or 

const useCounter = define(() => (a: number) => ({
    count: a,
    inc() { this.count++ }
}))

// or

const useCounter = define<{ count: number, inc: () => void }, [a: number]>(self => (a) => ({
    count: a,
    inc() { self().count++ }
}))


function Inc() {
    const store = useCounter() // new a local store

    // or

    const store = useCounter(1)


    const count = store(s => s.count)
    const inc = store(s => s.inc)

    return <div>
        <div>{count}</div>
        <button onClick={inc}>Inc</button>
    </div>
}

document.addEventListener('DOMContentLoaded', () => {
    render(<div id='app'>
        <Inc></Inc>
    </div>, document.querySelector('#app'))
})

import { define } from 'mobz'


const Counter = define(() => ({
    count: 0,
    inc() { this.count++ }
}))

const store = new Counter(1) // Use new to construct outside the component

function Inc() {
    const count = store(s => s.count)
    const inc = store(s => s.inc)

    return <div>
        <div>{count}</div>
        <button onClick={inc}>Inc</button>
    </div>
}

document.addEventListener('DOMContentLoaded', () => {
    render(<div id='app'>
        <Inc></Inc>
    </div>, document.querySelector('#app'))
})

import create, { merge } from 'mobz'

const store = create({
    count: 0,
    inc() { 
        merge(this, { count: this.count + 1 })
    }
})

// or

const store = create<{ count: number, inc: () => void }>((self, set) => ({
    count: 0,
    inc() {
        set({ count: self().count + 1 })
        // or
        set(s => ({ count: s.count + 1 }))
    }
}))