Doars

Build reactive websites without leaving your HTML. Ditch the hassle with other frameworks. Doars is a declarative and light solution that scans the webpage then processes the instructions found as well as keep the state and content up-to-date.

You can write logic directly in your layout, as a result you have to simply look at the HTML to read what the elements do. You won't need to dig through other files because the functionality is written on the structure itself.

<!-- Add library to the document from a CDN. -->
<script src="https://cdn.jsdelivr.net/npm/@doars/doars@2/dst/doars.iife.js"></script>
<script>
  // Wait for the DOM to be interactive.
  document.addEventListener('DOMContentLoaded', () => {
    // Setup a library instance.
    const doars = new window.Doars()
    // Enable library.
    doars.enable()
  })
</script>

<!-- Define component with a list of messages. -->
<div d-state="{ messages: [ 'Hello there!', 'General Kenobi.' ] }">
  <!-- Create a list item for each message. -->
  <ol>
    <template d-for="message of messages">
      <li d-text="message"></li>
    </template>
  </ol>

  <!-- Store input as a reference. -->
  <input type="text" d-reference="input">

  <!-- On click add input value to the messages. -->
  <button d-on:click="messages.push($references.input.value); $references.input.value = ''">
    Add
  </button>
</div>

But don't worry, the markup is still yours! We promise we won't take it away. You can still modify the document directly in your own code and the library will do all the work to stay up to date.

Use as much or as little as you want. Doars can easily be added to an existing server side rendered or statically generated project because this solution doesn't force you to adopt an application wide architecture. You only need to load the library onto the page and add instructions in the form of attributes to your layouts.

Packages

This mono-repository includes the core library as well as several plugins. See the full list below or the packages directory.

Name	Description
@doars/doars	The core library, it manages the components and plugins as well as includes the basic contexts and directives.
@doars/doars-alias	Plugin for creating aliases or renaming any context or directive.
@doars/doars-cookies	Plugin that adds a cookies context to get and set browser cookies.
@doars/doars-local-storage	Plugin that adds a local storage context to get values from and set values in local storage.
@doars/doars-fetch	Plugin that adds a fetch context that handles parsing the returned content.
@doars/doars-intersect	Plugin that adds an intersect directive for reacting to intersection changes.
@doars/doars-morph	Plugin that adds a morph context and directive that instead of setting directly to the innerHTML of an element morphs the DOM to the new structure.
@doars/doars-navigate	Plugin that adds a navigation directive that loads pages without unloading the current page by listening to anchor tags.
@doars/doars-router	Plugin that adds a router context with set of directives to control it.
@doars/doars-store	Plugin that adds a store context for global state management.
@doars/doars-update	Plugin that adds an update loop context and directive.

Ideas

• Memoization context for faster updates.
• Watch context in addition to the directive.
• Handling form submissions to allow in page changes.
• Add section loading directive to the navigate plugin where another page gets loaded in below the directive.
• Visibility directives similar to intersection plugin.
• Realtime shared state between clients using WebRTC.
• Sensor access via context and react to changes via directives (Accelerometer, etc.)

Contributing

If you are using the library and are running into an problem that you don't know how to solve, or would love to see a particular feature then feel free to create an issue. Or perhaps you want to make that cool feature, or help out in any other way. Then you are more then welcome! Read more about how to contribute.

In the wild

If you are using Doars then please let me know, I would love to hear about it!