element-vir/dist/declarative-element/directives/on-dom-created.directive.js

Heroic. Reactive. Declarative. Type safe. Web components without compromise.

import { directive, Directive } from '../../lit-exports/all-lit-exports.js';
import { assertIsElementPartInfo } from './directive-helpers.js';
const directiveName = 'onDomCreated';
/**
 * A directive that fires its listener only once, when the element that it's attached to is
 * constructed. This is particularly useful for getting references to internal elements immediately
 * after they've rendered.
 *
 * @category Directives
 * @example
 *
 * ```ts
 * import {html, defineElement, onDomCreated} from 'element-vir';
 *
 * const MyElement = defineElement()({
 *     tagName: 'my-element',
 *     render() {
 *         return html`
 *             <div
 *                 ${onDomCreated((element) => {
 *                     console.log('created!', element);
 *                 })}
 *             >
 *                 Some div
 *             </div>
 *         `;
 *     },
 * });
 * ```
 */
export const onDomCreated = directive(class extends Directive {
    element;
    constructor(partInfo) {
        super(partInfo);
        assertIsElementPartInfo(partInfo, directiveName);
    }
    update(partInfo, [callback]) {
        assertIsElementPartInfo(partInfo, directiveName);
        const newElement = partInfo.element;
        if (newElement !== this.element) {
            // use requestAnimationFrame here so it can fire property changes outside of a render loop
            window.requestAnimationFrame(() => callback(newElement));
            this.element = newElement;
        }
        return this.render(callback);
    }
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    render(callback) {
        return undefined;
    }
});