JSPM

diffhtml-inline-transitions

1.0.0-rc2
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 1
    • Score
      100M100P100Q32231F
    • License MIT

    Monitors inline attributes and assigns transition hooks

    Package Exports

    • diffhtml-inline-transitions

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (diffhtml-inline-transitions) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    diffHTML Inline Transitions

    Tiny module to support binding/unbinding transition hooks declaratively.

    npm install diffhtml-inline-transitions
    import * as diff from 'diffhtml';
    import inlineTransitions from 'diffhtml-inline-transitions';
    
    const html = diff.html;
    const innerHTML = diff.innerHTML;
    
    // Sets up a global attribute handler that will monitor for hooks and
    // auto-assign/remove them. If you don't want to globally import diffhtml, you
    // pass an object with just addTransitionState and removeTransitionState.
    inlineTransitions(diff);
    
    // Logs out whenever the element or a child triggers the hook.
    function attachedHook(parent, child) {
      console.log('Parent attached', parent === child ? 'itself' : child);
    }
    
    function render() {
      return html`<div attached=${attachedhook}>
        <div>I'm new!</div>
      </div>`;
    }
    
    innerHTML(document.body, render());