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

• Fixed memory leaks and logging issue
• Fixed dynamic components causing errors if no component is visible in dom due to parent checking logic
• Revamped state -> State now properly updates the element based on the dox-shadow element

<dox-shadow>
{{state.name}} <!---can be anything and placed anywhere in this element!--->
</dox-shadow>
setState('name', 'hello world')

• Added Defered Functions

//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)
     })
  })">

• It Fetches file.js once and allows you to utilize its functions throughout your application!

1. Improved Dynamic Component Management:

   • Components now render smoothly without causing performance issues, even when many components are appended.

2. Better Management of JavaScript Literals:

   • The use of ${{}} is now the recommended way for conditional rendering, moving away from using #if.
   • New JavaScript literals like $CURRENT_URL, $URL_PARAMS, and dox itself can be utilized more effectively.

3. Render Locks:

   • Dynamic components now have render locks to prevent unnecessary DOM changes when state is being used. This helps in optimizing rendering behavior.

4. New State Management:

   • The recommended way to add state to the application is by using the "dox-shadow" element.
   • State can be accessed and manipulated using {{state.statename}} literals within the "dox-shadow" element.
   • The state management feature allows for advanced UI applications, enabling targeted manipulation of elements or segments of elements.

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.

5. Debugging Enhancements:
   • A new attribute <meta debug="true"> allows you to see how "dox" works in real-time.
   • It aids in debugging by providing information about errors and the render process, helping to identify element positions during the rendering.

dox 1.2.6 Release Notes

This release brings several important improvements and fixes to the dox library. Here are the key changes:

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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!

• Fixed markdown blockquotes
• Fixed props not being set when used in beforeRender scripts
• Fixed import issue where it nested two tags with the same tagName this has been resolved
• Fixed script execution
• Fixed block quotes in markdown
• Added tables to markdown

• Fixed script tags appending multiple times
• Fixed props not working when setting props in the imported scope
• Improvements to variables: if not string - execute the values else return the string
• Added Input validation to dox
• Fixed before render scopes. You can now render data & add elements with events - before it is rendered!
• Added input validation works for both passwords and email inputs!

<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()'
        }
    })">

• Added .getId(elid) to dox as a method

let el = dox.getId('someid').methods

This is a stable release for 1.2.3-pre

What has changed

• Added <markdown>

<markdown>
# Hello world
** this is strong**
* this is italic *
 [this is a link](link)
</markdown>

• Allowed js expressions in variable and prop scopes

  • This is helpful for dynamic apps that need to derive specific values vs static values

• 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

Introducing Dox 1.2.3: Improved Flexibility and Developer Experience

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.

Variables and Props Reworked

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.

Improved Data Manipulation

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.

Enhanced Developer Experience

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!

Full release date

• Once this is deemed stable and not a problem it will no longer be pre. Currently there are 0 issues but further tests can be done to ensure it is deemed stable!

• Fixed cls issue with map - no longer causes rendering issues
• Improved performance - and added a render comment to show how fast the component rendered
• Fixed route performance issues
• dox object is no longer async v1.2.0 refer to the old method dox.querySelector(item).any_method

Version 1.2.1 Release Notes:

• Fixed layout shifts caused by manipulation at routes, resolving any issues with the layout.
• Improved import system to eliminate the need for re-importing files. Imports are now accessible across all components.
• Resolved issues with the map function, ensuring it works correctly and no longer blocks the sequence.
• Implemented a new type system. Please refer to the updated implementation in the wiki for more details.
• Fixed setVar function to correctly set variables and follow the specified types, if any.
• Resolved variable scope issues. Previously, variables had trouble setting their values due to timing, but this has been resolved.

Release 1.2.0

Features and Fixes

1. 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.

2. 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.

3. 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())
    })

4. 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.

5. 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.

6. 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.

This is a pre/fix release

• Fixed error where if one file passed in the imports tag it will not render

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

• Resolved the problem where query routes with params or params as routes were not rendering due to the missing this.render() method in the logic.
• Improved the implementation of asterisk routes by utilizing lookahead properly, resolving render issues.
• Fixed the issue where query routes were overwriting param routes if query parameters were set in the URL and params were also defined as route parameters.

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.

• Fixed 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:

• String
• Boolean
• Number
• Json
• Array

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.

Improved js.map() Function and Enhanced Array Manipulation

Summary

This 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.

Key Updates

• Refactored the js.map() function to improve its capabilities and resolve issues related to element selection.
• Introduced the map() method as an alternative for manipulating JSON data, offering greater flexibility and functionality.
• With map(), JSON data can be set directly into a variable or dynamically using the setVar function.
• Both methods are executed during the rendering process, eliminating the need for additional loaders and ensuring efficient display of JSON data within the HTML structure.

map return

• just like js all you have to do is return(filter - or any array method)

Example Usage

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

JavaScript Code (app.js)

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

Output

1. Added 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"]

2. Introduced 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.

• 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

Commit: v1.1.4 - July 3rd, 2023

Implemented #7 - Added setProp() to Dox

• Added the ability to reverse set prop values and update Dox!

dox.querySelector('nav').setProp('text', 'home').setProp('url', '/');

• Render Fixes - Fixed timing of imports without query or param routes

This commit introduces the following changes:

1. 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.

2. 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

Commit: v1.1.3 - July 3rd, 2023

Implemented #6: Added support for asterisk routes in Router:get

• Added the ability to define asterisk routes in Router:get by using the format /route/*.
• When a matching route with an asterisk is accessed in the browser, such as /route/something/, the request will return an object with the key asterisk containing the value '/something/other_routes_specified'.

Deprecated <imports> tag

• The <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.
• Instead, we have introduced a new approach using the <meta imports="someimport, anotherimport"> tag.
• This new approach is cleaner and doesn't require manipulation for rendering purposes.

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

• Implemented https://github.com/MalikWhitten67/html-dox/issues/2
• fixed dox - issues with timing per dom rendered
• Fixed dox chain methods - before you couldn't chain added elements back to parent, so now if you do .parent() it selects parent element
• Fixed render times
• Fixed state dom changes and imports