2.0.0 (August 12th 2023)

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: v1.2.7...v2.0

1.2.8(July 22d 2023)

• 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.2.7(July 20th 2023)

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.

1.2.6(July 17th 2023)

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!

1.2.5(July 15th 2023)

• 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

1.2.4(July 14th 2023)

• 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

1.2.3

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

1.2.3( July 12th 2023)

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!

1.2.2(July 8th 2023)

• 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

1.2.1(July 8th 2023)

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.