html dox is a sequential pwa optimized dom lib
MIT License
lts:114 ✅ | lts:113 ✅ | lts:113 ✅
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 <script> 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. |
Dox has been developed to be easy to use/install all u have to do is add a <script>
tag!! Guide To Installing
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