Code-design-runtime NPM

✨ Features

🔑 Based on Web Component
🏁 Reactive Web Framework
⚽ Support DOM property and HTML attribute
⚾ Minimum Sub-Tree Update
⛄ Directives supported such as cdu-if|for|on|bind

🔨 Install

yarn add code-design-runtime
# Or with npm:
npm i code-design-runtime

🍴 Usage

Demo

<test-el id="testEl" content="something interesting"></test-el>
<script type="module">
    import CduRuntime from './dist/index.js' 
    const name = 'test-el'
    class TestEl extends CduRuntime {
        name = name    `

        commonStyleSheet = `
        span {
            font-weight: bold;
        }
    `

        styleSheet = `
        span{
            color:red;
        }
    `

        html = `
        <span cdu-on@click="this.methods.handleClick">
            {{this.prop.content}}
        </span>
        `

        propTypes = {
            props: {
                content: {
                    type: 'string',
                    description: '内容'
                }
            },
            events: {
                click: {
                    name: 'click-event',
                    description: '点击事件'
                }
            }
        }

        methods = {
            handleClick: (event) => {
                this.emitEvent(event, this.propTypes.events.click.name)
            },
        }
    }
    window.customElements.define(name, TestEl)
    window.onload = () => {
        const el = document.querySelector('#testEl')
        el.addEventListener('click-event', (event) => {
            console.log(event)
        })
    }
</script>

Directives Supported

{{ xxx }} 或 cdu-bind:textContent="xxx" 例：{{ this.state.name + this.prop.code + this.inherit.item.label}} 、 {{ this.format.call(this, this.state.name, this.state.code) }}
cdu-on@click="xxx" 例： this.handleClick、this.handleClick.bind(this, this.state.showList)
cdu-if="xxx" -> 例： this.state.name && this.prop.code && this.inherit.item.label、this.validate.call(this,this.state.list)
cdu-for="xxx" -> 例：item in this.state.list/this.props.list/this.getList.call(this, this.state.name)