html-dox

Html-Dox | | Docs

lts:114 ✅ | lts:113 ✅ | lts:113 ✅

Fast pwa optimized sequential dom lib

• Sequential - Dox adopts a unique approach called sequential processing. It treats all files as strings and efficiently splits the values, allowing for smooth manipulation of data. This method significantly contributes to faster rendering and improved performance, making your single-page applications (SPAs) highly responsive.
• Component-based - Similar to popular frameworks like React, Dox follows a component-based architecture. This modularity enables you to build your application in smaller, reusable components. This approach offers several benefits, particularly when collaborating with other developers. Additionally, you have the flexibility to write inline JavaScript within components, facilitating a dynamic and interactive user experience.
• Learn once - Dox focuses on simplicity and ease of use. It introduces new features only when necessary and adheres to established syntax constraints. This means you won't have to worry about constantly relearning the framework or dealing with major changes. Dox keeps it fast and straightforward, as it primarily utilizes raw HTML with enhanced functionality.

How it Works

Installation

Dox has been developed to be easy to use/install all u have to do is add a <script> tag!! Guide To Installing

Examples

We have a few Examples - that show you how each aspect of dox is used.

 <import src="/dox2.0/components/card.html"></import>
<script>
    let count = getState('count') || 0;
    let array = fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(json => json);
  

    async function increment() {
        setState('count', ++count);
        setState('array', await  array);
    }
</script>
<script types>
 
    interface count {
            type: Number,
    }
    interface array {
            type: Object,
    }
</script>
<style>
    div {
        background-color: #eee;
        padding: 20px;
        border-radius: 5px;
        margin: 20px;
    }
</style>
<div>
     <card></card>
     <card></card>
     <card></card>
     ${
        getState('count') > 5 ? `<card></card>` : 'Not Greater'
     }
</div>

any other code

</container>

<!--card.html--->

 <card>
    <script execute>
        console.log('Card Loaded');
        console.log('you can execute js in your app')
    </script>
    <h1>Card</h1>
    <p>Count: ${getState('count') || 0}</p>
    <button onclick="increment()">Increment</button>
    ${
        getState('count') > 5 ? '<card></card>' : 'Not Greater'
    }
    <p>Array: ${getState('array') ? getState('array').title : `Woppy` } </p>
</card>

This example shows the use of components in dox2.0