domma

Keep your live and static documents in sync

Usage no npm install needed!

<script type="module">
  import domma from 'https://cdn.skypack.dev/domma';
</script>

README

Domma

Keep your live and static documents in sync

Build Status Coverage Status NPM Version

Overview

How to Install

npm install --save domma

Get Started

import Domma from "domma";

// Get your own static document
const staticDocument = document.implementation.createHTMLDocument('');

// Create Domma instance
const domma = new Domma();

// Connect your static document to domma
domma.connectStaticDocument(staticDocument);

// Compose a "live" clone of your document 
domma.composeLiveDocument();

// Apply any dynamic changes that should not be synced with static DOM
const liveDocument = domma.getLiveDocument();
liveDocument.body.setAttribute('id', 'dynamic-id');

// Apply changes that should be synced with static DOM
domma.conductTransaction((liveDOM) => {
  liveDOM.body.innerHTML = 'hello world';
}).then(() => {
  const staticDOM = domma.getStaticDocument();
  const body = staticDOM.body;
  
  // Dynamic changes are not synced
  const id = body.getAttribute('id'); // id => undefined
  
  // Transaction changes are synced
  const html = body.innerHTML; // html => 'hello world'
});

Contributing to Domma

Contributions are always welcome. Before contributing please read the code of conduct & search the issue tracker (your issue may have already been discussed or fixed).

To contribute, follow next steps:

  • Fork Domma
  • Commit your changes
  • Open a Pull Request.

Feature Requests

Feature requests should be submitted in the issue tracker, with a description of the expected behavior & use case, where they'll remain closed until sufficient interest (e.g. :+1: reactions). Before submitting a feature request, please search for similar ones in the closed issues.

License

Released under the MIT License