@doars/doars-morph

---

@doars/doars-morph

Plugin that adds a morph context and directive which instead of setting directly to the innerHTML of an element morphs the DOM to the new structure.

Install

From NPM

Install the package from NPM, then import and enable the library in your build.

npm i @doars/doars @doars/doars-morph

// Import library.
import Doars from '@doars/doars'
import DoarsMorph from '@doars/doars-morph'

// Setup a library instance.
const doars = new Doars()

// Setup the plugin.
const doarsMorph = DoarsMorph(doars /*, options */)

// Enable library.
doars.enable()

IIFE build from jsDelivr

Add the IIFE build to the page from for example the jsDelivr CDN and enable the library.

<!-- Import library. -->
<script src="https://cdn.jsdelivr.net/npm/@doars/doars@2/dst/doars.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@doars/doars-morph@2/dst/doars-morph.iife.js"></script>
<script type="application/javascript">
  document.addEventListener('DOMContentLoaded', () => {
    // Setup a library instance.
    const doars = new window.Doars()

    // Setup the plugin.
    const doarsMorph = window.DoarsMorph(doars /*, options */)

    // Enable library.
    doars.enable()
  })
</script>

ESM and IIFE builds are also available via the jsDelivr CDN.

Directives

The following directives are added by the plugin.

d-morph

Modifiers

• {Boolean} decode = false If the returned type is a string the value will's special HTML characters will be decoded. For example > will become >.

Examples

<!-- Morph the inner HTML of the element to the string. -->
<div d-morph="'<h1>Hello world!</h1>'"></div>

<!-- Decodes the special HTML characters before morphing the inner HTML of the element to the string. -->
<div d-morph.decode="'&lt;h1&gt;Hello world!&lt;/h1&gt;'"></div>

<!-- Morph the outer HTML of the element, changing this element in the process. -->
<div d-html.outer="'<h1>Hello world!</h1>'"></div>

<!-- Morph the inner HTML of the element to a value from the state. -->
<div d-morph="$state.message"></div>

API

DoarsMorph

• constructor Create plugin instance.
  • @param {Doars} library A doars library instance.
  • @returns {DoarsMorph}
• disable Disables the plugin. Can only be called when the doars is disabled.
• enable Enables the plugin. Can only be called when the doars is disabled.

Compatible versions

@doars/doars-morph version	@doars/doars version
2.x	2.x