html dox is a sequential pwa optimized dom lib
MIT License
Bot releases are hidden (Show)
Dox 2.0 Rewrite: Enhanced Performance, Customization, and Security
This commit introduces Dox 2.0, a significant rewrite of the framework, bringing forth a range of improvements designed to elevate your web development experience:
Improved Performance: In contrast to previous versions, which incurred high main thread overhead while handling JavaScript expressions, Dox 2.0 adopts a function-oriented paradigm. This innovative approach eliminates the need to extract and execute expressions separately, resulting in significantly improved performance across the board.
Customizability at its Best: Dox 2.0 empowers developers with unparalleled customizability. New additions to the Dox API that manipulate your app's templates can now be effortlessly fine-tuned through your config.json
file. This level of configurability grants you precise control over various aspects of your template manipulation, enabling a tailored development experience.
Enhanced Security and Patch Updates: A core focus of Dox 2.0 is the assurance of a secure application environment. To achieve this, we've committed to providing 3 months of security and patch updates for versions where significant issues are identified. This commitment ensures that your applications remain protected and up to date, giving you peace of mind as you develop and deploy.
Introducing Type Checking: With Dox 2.0 comes an innovative feature: a built-in type checking mechanism. Utilizing interfaces and type annotations within your function parameters, you can now ensure robust type safety. By catching type-related errors early, this feature enhances code reliability, reduces runtime issues, and elevates the overall quality of your applications.
Markdown Processing Engine: Dox 2.0 further enhances your workflow with the Markdown Processing Engine. You can now compose content using Markdown syntax directly within your templates. This feature simplifies the creation of content-rich platforms like blogs, making content creation faster and more efficient.
Emoji Processing Engine: Communicate effectively with the Emoji Processing Engine. Dox 2.0 introduces the ability to use custom emojis and seamlessly parse strings for emojis, enriching your content with expressive visual elements.
Dynamic State Engine: Achieve seamless reactivity with the Dynamic State Engine. State changes trigger automatic re-rendering, ensuring that your app stays up-to-date with the latest data and interactions.
With Dox 2.0, we're committed to providing a framework that's not only powerful but also highly customizable and secure. These enhancements collectively contribute to a more efficient and enjoyable development journey. We invite you to explore and leverage these features, elevating your web development projects to new heights.
Learn More
Full Changelog: https://github.com/MalikWhitten67/html-dox/compare/v1.2.7...v2.0
Published by MalikWhitten67 about 1 year ago
dox-shadow
element<dox-shadow>
{{state.name}} <!---can be anything and placed anywhere in this element!--->
</dox-shadow>
setState('name', 'hello world')
//file.js
function call(name){
console.log(name);
}
function callback(name){
call(name);
}
<script src="./path/to/file.js" id="controller">
</script>
<button onclick="defer(event, 'controller', ()=>{
effect('sum', (v)=>{
callback(v)
})
})">
Published by MalikWhitten67 over 1 year ago
Improved Dynamic Component Management:
Better Management of JavaScript Literals:
${{}}
is now the recommended way for conditional rendering, moving away from using #if
.$CURRENT_URL
, $URL_PARAMS
, and dox
itself can be utilized more effectively.Render Locks:
New State Management:
{{state.statename}}
literals within the "dox-shadow" element.Example usage of state management:
<dox-shadow>
<!-- This element at runtime gets the data-state="hello" attribute. That's how DOM checks for it. -->
<div class="{{state.hello}}">
<h1>hello</h1>
</div>
</dox-shadow>
You can update the state using setState('hello', 'changedValue')
to change the value of the "hello" state.
<meta debug="true">
allows you to see how "dox" works in real-time.Published by MalikWhitten67 over 1 year ago
dox 1.2.6 Release Notes
This release brings several important improvements and fixes to the dox
library. Here are the key changes:
After Render Removed:
The after render
functionality has been removed from the library. This decision was made to avoid unpredictable script execution. Instead, we recommend using scripts within the main router file, as these will be executed after dox
, ensuring better control over the execution order.
Memory Leak Fixes in Props Parsing:
We have addressed a significant issue where memory leaks occurred during props parsing. This fix ensures that applications no longer get stuck in constant loops due to improper memory management.
Fixed Reverse Props & Added Dynamic Components:
We have resolved the problem related to reverse props, and dynamic components have been introduced. Now, dox
intelligently searches for newly appended elements that act as components. When found, dox
obtains the imported element data and adjusts values based on attributes, allowing for dynamic component behavior.
Conditional Logic Enhanced with #else if:
We've enhanced the conditional logic support by adding #else if
statements. This addition provides users with more flexibility and control when handling complex conditional scenarios.
JavaScript Expressions Added:
Introducing JavaScript expressions! You can now use ${{javascript}}
anywhere within your code. This feature enables you to embed and execute JavaScript code directly in your templates, providing dynamic behavior and advanced calculations.
Introducing dox.awaitElement()
:
With the new dox.awaitElement()
function, you can now await an element's appearance in the DOM. This feature allows you to pause execution until the desired element is visible, ensuring smoother interactions and a better user experience.
These updates will enhance the overall performance, flexibility, and usability of the dox
library. We advise users to review and test these changes thoroughly to take full advantage of the improvements. As always, we appreciate your feedback and contributions in making dox
even better!
Published by MalikWhitten67 over 1 year ago
Published by MalikWhitten67 over 1 year ago
<input type="password onblur="dox.validate('password', this.value, {
required: true,
min: 8,
max: 20,
message: {
tooShort: 'Password is too short!',
tooLong: 'Password is too long!',
required: 'Email is required'
},
style: 'border: 1px solid red',
await: {
time: '3000',
fn: 'clearStyles()'
}
})">
.getId(elid)
to dox as a methodlet el = dox.getId('someid').methods
Published by MalikWhitten67 over 1 year ago
This is a stable release for 1.2.3-pre
<markdown>
<markdown>
# Hello world
** this is strong**
* this is italic *
[this is a link](link)
</markdown>
Allowed js expressions in variable and prop scopes
Added if and else statements
<script>
let c = localStorage.getItem('todo') || 'no todo';
</script>
#if (c == 'no todo');
return <button onclick="localStorage.setItem('todo','hello world')">Add Todo</button>
#else
return <button onclick="localStorage.removeItem('todo')">Remove Todo</button>
#endif
Published by MalikWhitten67 over 1 year ago
We are excited to announce the release of Dox version 1.2.3, which brings significant enhancements to improve flexibility and developer experience. This update introduces a cohesive API that is both user-friendly and efficient, offering a more streamlined approach to rendering and fetching data. These changes are particularly beneficial for applications that heavily rely on data manipulation and require efficient load balancing. Let's explore the key improvements in this version.
In Dox 1.2.3, we have completely reworked the implementation of variables and props, providing a more intuitive and powerful solution for rendering and manipulating data. Script tags now serve as variable definition scopes, similar to popular frameworks like Svelte. This approach simplifies the process of managing props and variables within your components' attributes.
For instance, consider the following example:
<!-- hello.html -->
<script props>
let color = "orange";
</script>
<div style="color: {{color}}">Hello, World!</div>
In this example, the hello
component defines a prop named color
using a script tag. The value of color
is set to "orange". When using this component, you can pass a different color by setting the color
attribute, like so:
<!-- app.html -->
<hello color="red"></hello>
By providing a prop value of "red", the element's color will be dynamically set to red when rendering the component.
Dox 1.2.3 introduces an enhanced approach to rendering and editing data on the fly. With the execution of scripts before and after rendering, developers can now manipulate data seamlessly during the rendering process.
Let's consider an example showcasing data manipulation using beforeRender execution:
<script execute="beforeRender">
fetch("https://jsonplaceholder.typicode.com/todos")
.then(response => response.json())
.then(data => {
data.forEach(todo => {
dox.querySelector("#data").html(dox.querySelector("#data").html() + `<div>${todo.title}</div>`);
});
});
</script>
<div id="data"></div>
In this example, a beforeRender script is used to fetch data from an external API and dynamically render it within the specified element with the ID "data". Each todo item's title is rendered as a separate div
element. This approach allows for faster data manipulation during the rendering process and eliminates the need for additional spinners. The data is rendered as soon as the fetch operation completes.
Furthermore, you can also leverage afterRender execution for data manipulation that does not require immediate rendering.
These improvements in data manipulation provide developers with greater control and efficiency when handling dynamic data within their Dox applications.
Dox 1.2.3 aims to provide an improved developer experience by offering a simple yet powerful API. The cohesive nature of the updated API ensures ease of use and enables developers to build applications with greater flexibility and efficiency. With a more organized structure for managing multiple pages and smoother handling of data, Dox empowers developers to create web applications with confidence and maintainability.
We invite you to explore the latest version of Dox and experience the benefits firsthand. Happy coding!
Published by MalikWhitten67 over 1 year ago
v1.2.0
refer to the old method dox.querySelector(item).any_method
Published by MalikWhitten67 over 1 year ago
Version 1.2.1 Release Notes:
map
function, ensuring it works correctly and no longer blocks the sequence.setVar
function to correctly set variables and follow the specified types, if any.Published by MalikWhitten67 over 1 year ago
Fixed router issue refusing to render components that do not have import tags:
The router was not rendering components that didn't have import tags. This issue has been resolved, and components without import tags can now be rendered correctly.
Added a 404 route using route="404"
:
A new route has been added to handle 404 errors in the router. By specifying route="404"
, you can now handle requests for non-existent routes or pages gracefully.
Changes to dox library to make it asynchronous:
The dox library has undergone changes to support asynchronous functionality. Methods like dox.querySelector
now return promises and require the use of .then()
to handle the results asynchronously.
Note this is not the case for second level element selecting after dox is resolved
dox.querySelector('.menu').then((menu)=>{
console.log(menu.html())
})
Fixed issue with duplicate or unset variables in dox templates:
Previously, there was an issue with duplicate variables or variables not being set properly in dox templates. This issue has been addressed, and dox now correctly replaces template literals with variable values in components.
Removed the use of the map
function in second level components:
To enhance performance for both top-level pages and second-level components, the usage of the map
function has been removed from second-level component scopes. This change mitigates potential risks associated with using map
in components.
Deprecation of json.map
and introduction of a more versatile traversal method:
The json.map
method has been deprecated in favor of a new traversal method that offers multiple manipulation methods and value getters. This change provides increased flexibility compared to json.map
.
Please note these updates and improvements in the 1.2.0 release. Upgrade your codebase to leverage these enhancements and resolve any previous issues.
Published by MalikWhitten67 over 1 year ago
This is a pre/fix release
Published by MalikWhitten67 over 1 year ago
Release Notes - Version 1.1.9
This release addresses several critical issues and improves the functionality of the router. Please review the following changes:
Fixed router issues with params, query routes, and asterisk routes
this.render()
method in the logic.These fixes ensure that the router now works correctly and renders the appropriate components based on the defined routes.
We appreciate your continued support and feedback. If you encounter any further issues or have any suggestions, please don't hesitate to reach out.
Published by MalikWhitten67 over 1 year ago
map()
: The updated map()
method now returns the first element as the parent in the return body. This approach is more efficient compared to the previous method, where we created a new element and then appended data into it.Here's an example showcasing the updated map()
method:
<import src="./components/navbar.html" exports="navbar">
<var name="js"></var>
<app props="color">
<navbar></navbar>
<span map="js"></span>
</app>
{{
map(js).return() {
<div class="card">
<div class="card-body">
<h1>{js.author}</h1>
<h2>{js.title}</h2>
<img src="{js.urlToImage}" alt="" class="w-32 h-32">
<p>{js.description}</p>
<a href="{js.url}">Read more</a>
</div>
</div>
}
}}
<export>
app
</export>
const app = new Router()
app.get('/', (req) => {
console.log('home')
dox.querySelector("[map]").html('<span class="loading loading-lg mx-auto flex justify-center h-screen "></span>')
fetch('https://newsapi.org/v2/everything?domains=cnn.com&apiKey=')
.then((response) => {
return response.json();
})
.then((myJson) => {
console.log(myJson.articles)
dox.setVar('js', myJson.articles);
})
.finally(() => {
dox.querySelector(".loading").remove();
})
})
app.route()
In the above code, we have a route that fetches data from an API and updates the js
variable using dox.setVar()
. The fetched JSON data is assigned to the js
variable, which is then used in the HTML template.
Furthermore, the type system in Dox has been improved. You can now define types for variables and props using the <types>
tag. The available type values are:
You can set a default value for each type, ensuring proper type handling within your application.
For example:
<types>
<type var="color" type="String" default="green"></type>
<type prop="color" type="String" default="green"></type>
</types>
These updates enhance the performance and functionality of Dox, providing a more efficient and robust development experience.
Published by MalikWhitten67 over 1 year ago
js.map()
Function and Enhanced Array ManipulationThis commit introduces enhancements to the js.map()
function in order to improve its functionality and address issues related to element selection within the document. Additionally, a new method called map()
is introduced, which allows for more flexible and functional manipulation of JSON data, resembling frameworks like React.
js.map()
function to improve its capabilities and resolve issues related to element selection.map()
method as an alternative for manipulating JSON data, offering greater flexibility and functionality.map()
, JSON data can be set directly into a variable or dynamically using the setVar
function.map
return<import src="./components/navbar.html" exports="navbar">
<var name="js"></var>
<app>
<navbar></navbar>
<div class="p-5">
<span map="js"></span>
</div>
</app>
{{map(js).return(){
<div class="card">
<div class="card-body">
<h1>{js.author}</h1>
<h2>{js.title}</h2>
<img src="{js.urlToImage}" alt="">
<p>{js.description}</p>
<a href="{js.url}">Read more</a>
</div>
</div>
}}}
<export>
app
</export>
const app = new Router()
app.get('/', (req) => {
console.log('home')
fetch('https://newsapi.org/v2/everything?domains=cnn.com&apiKey=')
.then((response) => {
return response.json();
})
.then((myJson) => {
dox.setVar('js', myJson.articles)
})
})
app.route()
Published by MalikWhitten67 over 1 year ago
json.map
functionality: Now you can leverage the power of json.map
to easily sort and manipulate variables that contain arrays. By using this feature, you can iterate through array elements and apply filters or transformations as needed. Here's an example of its usage:<var name="someJson" >
[
{
"name": "Malik",
"age": 17,
"location": "USA"
},
{
"name": "John",
"age": 18,
"location": "USA"
},
{
"name": "Jane",
"age": 19,
"location": "USA"
}]
</var>
<span>{{json.map(someJson.age.filter(age => age > 18).return('li.class(text-sky-500)'))}}</span>
In the above example, the json.map
function is applied to the someJson.age
array. It filters out ages that are greater than 18 and returns them as <li>
elements with the class text-sky-500
.
Return Methods:
.class() .style() .id() [name="value"]
dox:setVar
command: To provide more flexibility and control, a new command called dox:setVar
has been added. This command allows you to alter variables used within the json.map
function. It is particularly useful for applications that rely on datasets and want to manipulate HTML with minimal JavaScript code in their files. By using this command, you can update variables and immediately reflect the changes in the rendered HTML without blocking the rendering process. Here's an example of how to use it:dox.setVar("someJson", JSON.stringify([
{
"name": "Malik",
"age": 20,
"location": "USA"
},
{
"name": "John",
"age": 18,
"location": "USA"
},
{
"name": "Jane",
"age": 19,
"location": "USA"
}
]));
In the above example, the dox.setVar
command updates the someJson
variable with a new dataset. It converts the JavaScript object array into a JSON string using JSON.stringify
. This feature allows you to dynamically update your data and have the changes automatically reflected in the rendered HTML.
These new features enhance the flexibility and efficiency of your application by providing powerful data manipulation capabilities and seamless integration between JavaScript and HTML rendering.
Published by MalikWhitten67 over 1 year ago
Fixed dox timing issue: Implemented a wait system to wait for elements to show before modifying them. This change ensures that the modifications are made only when the required elements are visible, resolving the timing issue.
Improved performance: By default, most landing pages of sites now have 100% performance. This enhancement focuses on optimizing the performance of the landing pages to provide a better user experience.
Fixed variables not working inside of props on second-level components: Previously, there was an issue where variables were not functioning correctly within props on second-level components. This problem has been resolved, and now imported component variables work as intended.
Fixed import component with prop timing: Previously, there was an error when importing a component with props, as it couldn't find the imported component. With the new implementations, this issue has been addressed, and importing components with props now works without any errors. This fix is part of the v1.1.5 rewrite commit made on 7/4/23.
Full Changelog: https://github.com/MalikWhitten67/html-dox/compare/v1.1.4...v1.1.5
Published by MalikWhitten67 over 1 year ago
Commit: v1.1.4
- July 3rd, 2023
Implemented #7 - Added setProp()
to Dox
dox.querySelector('nav').setProp('text', 'home').setProp('url', '/');
This commit introduces the following changes:
Added a new method setProp()
to the Dox library, allowing users to set prop values on elements.
Example usage: dox.querySelector('nav').setProp('text', 'home').setProp('url', '/');
sets the text
prop to 'home'
and the url
prop to '/'
on the <nav>
element.
Fixed timing issues related to rendering imports without query or param routes. This resolves an issue where the rendering of imports was not occurring at the appropriate time.
Full Changelog: https://github.com/MalikWhitten67/html-dox/compare/v1.1.3...v1.1.4
Published by MalikWhitten67 over 1 year ago
Commit: v1.1.3
- July 3rd, 2023
Implemented #6: Added support for asterisk routes in Router:get
Router:get
by using the format /route/*
./route/something/
, the request will return an object with the key asterisk
containing the value '/something/other_routes_specified'
.Deprecated <imports>
tag
<imports>
tag has been deprecated due to rendering performance issues caused by the need to time its order in the DOM, which can be slow.<meta imports="someimport, anotherimport">
tag.This commit enhances the Router class by adding support for asterisk routes, allowing more flexible and dynamic routing. Additionally, it deprecates the <imports>
tag in favor of a more efficient and cleaner alternative using the <meta>
tag.
Full Changelog: https://github.com/MalikWhitten67/html-dox/compare/v1.1.1...v1.1.3
Published by MalikWhitten67 over 1 year ago