• Added new method to dox - called add it allows you to chain add elements to dom

 let rules = dox.add('div', { class: 'collapse collapse-arrow  ' })
      rules. Add('input', { type: 'radio', name: 'my-accordion-2' })
      rules.add('div', { class: 'collapse-title text-lg font-medium' }).html('Rules')

• Fixed dox wouldn't resolve dom unless set timer - blocked execute for 0 seconds to resolve issue
• added dox:domChange - a method soon to allow dynamic component imports - currently it allows you to check if dom has been either updated or changed and run code after it! works better than content loaded & onload!
• fixed state attribute it only added the current value and now updates respectively
• variables now can now be reused multiple times

• Fixed dox previous it had lengthy useless code it now appends methods at elements at once and traverses on children/ancestors
• Added post put delete and get to dox method
• Added the option to import js files from base js imported files in index file
• Fixed title previously it was not used so route titles were not set but now they are set!

• Added ability to set a element to current state

<div state="time">
<!--- This element will be changed to the current state.time value!  this will be updated every second!---->
</div>

setInterval(()=>{
 let time = current_time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  setState('time', time);
}, 1000)

• Fixed base exported element var expressions not working
• Fixed query Selector - inject not applying to elements removed the need for a target since the element was already selected
• Added title to render elements just add a title attribute to change route title

• Added stateManagement
  this allows apps to be more dynamically diverse

 <input type="text" class="input input-bordered w-full input-accent" placeholder="Insert dat..." onchange="setState('todo', this. Value)">

we can use the following methods to either watch or get state

effect((stateName), (value)=>{
// use changed value!
})
// or
let some = getState('name') // that simple

example using state

• Added prepend, append, before, last and fixed traverse querying of dox!

Changelog

• Fixed scope emmet expressions: Previously, setting a prop with the same name as the parent element would set the prop on the parent element of the component. Now, it sets the prop to the parent element that the button is in, ensuring separate scopes.

  <dox-button props="type:text:size:custom"> 
      <button>
          {{text}}
      </button>
  </dox-button>
  

• Added support for reverse component props: You can now set props in components in a reverse manner. Additionally, you can set props in element attributes. This functionality also works within main component scopes.

  <!-- components/button.html -->
  <dox-button props="type:text:size:custom"> 
      <button class="btn btn-{{type}} btn-{{size}} {{custom}}">
          {{text}}
      </button>
  </dox-button>
  <export>
      dox-button
  </export>
  
  <!-- pages/app.html -->
  <dox-button type="secondary" text="primary btn" size="lg" custom="text-sm"></dox-button>
  

Full Changelog: https://github.com/MalikWhitten67/html-dox/compare/v1.0.5...v1.0.6

• Fixed nested props - originally setting the same prop multiple times in the code would not work this is now fixed!

lazy load image assets

• All images/svg's are preloaded and lazily loaded!

Children props

• There originally was no way we can reverse set an element before its rendered but now their is a way using the children prop

<!---/pages/Test.html--->
<test props="children:text">
<div class="text-2xl">
{{children}}  <!---this gets replaced with the children!--->  
</div>
</test>
<export>
test
</export>

<!---/pages/somepage.html--->

<import src="/pages/Test.html" exports="test"></import>

<test>
<slot>
<!---any code here replaces {{children}} before rendered!--->
</slot>
</test>

v1.0.4 changelog:

• Fixed module loading where it was excessively loading the same imported modules over and over - this was due to lack of cache control, but also reimported as routes changed! #3
• Fixed module handling styling & added in preloads/prefetching to improve load times of applications
• various performance tweaks/bug fixes

• Improved dox - fixed bugs

• Fixed route issues where imported elements would not render when sequentially rendered

• Router now allows you to set routes in the meta tag - fallback is used incase routes does not have a current route soon will allow 404 pages!

  • <meta config routes="/home,/changelog,/car" fallback="/home">

• Added $import & $export to dox - now you can import and export jsdox components

  • $import('file' || 'exportName')
  • $export('name', value)

v1.0.2 htmldox release

Whats new? - routing each element is now set to render on a route so that you can dynamically show components!

• set the root route to fallback to
  <html lang="en" data-theme="winter" root="/home">

<render position="first"
route="/home" // if i go to #/home this will show
>
    <!-- this is ran first-->
    <myComponent 
    text="Sequential Rendering"
    button="Get Started"
    learnbtn="Learn More"
    ></myComponent>
</render>

Variables yayy - just like jsx we can set var's just use the <var name="variable'>inner code</var> then place {{variable}} anywhere in your code!

Mutiple dox performance improvements, you can also import components within imported components!
just call: <import src="./components/footer.html" exports="footer"></import> then use anywhere in your code!

<var name="versionLogo">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    stroke-width="1.5"
    stroke="currentColor"
    class="w-6 h-6"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
    />
  </svg>
</var>

<li>
  <details>
    <summary>Resources</summary>
    <ul
      class="p-2 bg-base-100 shadow-lg w-40 rounded-xl"
      style="z-index: 9999; background-color: #f5f4f4;"
    >
      <li><a> {{versionLogo}} Changelog</a></li>
      <li><a>Link 2</a></li>
    </ul>
  </details>
</li>

returns