2.1.0 • Published 8 months ago
@doars/doars-morph v2.1.0
@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="'<h1>Hello world!</h1>'"></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 |