doz

doz copied to clipboard

Almost like writing in VanillaJS. For modern browser.



Documentation | API | Demo | Browse example code

👉 SEE A PROJECT BUILT WITH DOZ 👈


Look at the code on Codepen

Why

• 🎼 Works with tagged template literals
• 🎳 Component based
• 🧩 WebComponent ready
• 🏪 Global stores
• 😆 Global components
• 🔫 Fast performance
• 💅 Scoped style
• 📡 Uses ES6 proxy to observe changes
• 😁 Simple and familiar API
• 😱‍ No extra syntax like JSX
• 💣 No confusion with props and state
• ⛏ Extensible through: plugins, mixin, components
• 📽 CSS animation support

Get started

$ npx doz-cli app my-app
$ cd my-app
$ npm start

Example

<div id="app"></div>

Component definition

ButtonCounter.js

import {Component} from 'doz'

export default class ButtonCounter extends Component {
    
    constructor(o) {
        super(o);
        this.props = {
            counter: 0
        };
    }

    template(h) {
        return h`
            <style>
                button {
                    font-size: 16px;
                    padding: 20px;
                }
            </style>

            <button onclick="${this.increase}">
                count ${this.props.counter}
            </button>
        `
    }
    
    increase() {
        this.props.counter++;
    }

};

Make an app with the component defined above

app.js

import {appCreate} from 'doz'
import ButtonCounter from './ButtonCounter'

appCreate('#app', ButtonCounter);

Doz ecosystem

• 👨🏻‍💻 doz-cli provides a boilerplate to creating app and component
• 👨🏼‍🎨 doz-ssr server side rendering
• 🤳🏼 doz-snap transforms app to static HTML
• 👩🏼‍🚀 doz-router a complete component for routing
• ✍🏼 doz-metatag a plugin for managing basic OG meta tag in your app (perfect with doz-ssr)

CDN unpkg

<script type="module">
    import {Component} from 'https://unpkg.com/doz/dist/doz.min.js'
    //...
</script>

Changelog

You can view the changelog here

License

Doz is open-sourced software licensed under the MIT license

Author

Fabio Ricali