https://github.com/malikwhitten67/html-dox

html dox is a sequential pwa optimized dom lib
https://github.com/malikwhitten67/html-dox

dom frontend graphql html-css-javascript js library nestjs nextjs nuxt react sequential sql vercel vue

Last synced: 2 months ago
JSON representation

html dox is a sequential pwa optimized dom lib

• Host: GitHub
• URL: https://github.com/malikwhitten67/html-dox
• Owner: MalikWhitten67
• License: mit
• Created: 2023-06-16T04:08:10.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-12T22:29:08.000Z (over 1 year ago)
• Last Synced: 2024-10-10T23:04:45.221Z (3 months ago)
• Topics: dom, frontend, graphql, html-css-javascript, js, library, nestjs, nextjs, nuxt, react, sequential, sql, vercel, vue
• Language: JavaScript
• Homepage: https://malikwhitten67.github.io/html-dox/
• Size: 531 KB
• Stars: 6
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
## [Html-Dox](https://malikwhitten67.github.io/html-dox/) |  [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/MalikWhitten67/html-dox/blob/main/LICENSE) | [Docs](https://github.com/MalikWhitten67/html-dox/wiki)

  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

| Step                                      | Description                                                                      |

| ----------------------------------------- | -------------------------------------------------------------------------------- |

| Components/Pages/config                   | Check if there are any components and pages in use. Convert them into functions and set the configuration (if supplied) to `window.config` for later use. |

| Sequential Selection                      | Select components/pages in a sequential order.                                  |

| Value Splitting/Value Replacing            | Replace variables with current variable state and set listeners for state changes. |

| Execution of Scripts                      | Execute any specified `` tags.                                         |

| Combining Imported Components to Main Page functions| Combine the imported components with the main pages.                           |

| Bind templates to window.templates               | Generate a complete webpage with the manipulated components/pages. binded into the template object           |

| End                                       | End of the process.                                                            |

| Router                                   | Determine if there's a router involved in the framework.                        |

 

## Installation

Dox has been developed to be easy to use/install all u have to do is add a `<script>` tag!! [Guide To Installing](https://github.com/MalikWhitten67/html-dox/wiki/Getting-started)

# Examples

We have a few [Examples](https://github.com/MalikWhitten67/html-dox/tree/main/examples) - that show you how each aspect of dox is used.

```html

 <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);

    }

 

    interface count {

            type: Number,

    }

    interface array {

            type: Object,

    }

    div {

        background-color: #eee;

        padding: 20px;

        border-radius: 5px;

        margin: 20px;

    }



     

     

     

     ${

        getState('count') > 5 ? `` : 'Not Greater'

     }



 ```

any other code

```


 

    

        console.log('Card Loaded');

        console.log('you can execute js in your app')

    

    
Card

    
Count: ${getState('count') || 0}

    Increment

    ${

        getState('count') > 5 ? '' : 'Not Greater'

    }

    
Array: ${getState('array') ? getState('array').title : `Woppy` } 


```

This example shows the use of components in dox2.0