Skip to content

dozjs/doz

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation







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