import { html } from 'lit' ; import { Directive , PartInfo , directive } from 'lit/directive.js' ; import equals from 'ramda/es/equals' ; import { random , render , UllrElement } from '../lib/element' ; import { define } from '../lib/define' ; import { isNodeEnv } from '../lib/is-node-env' ; import { Templatable } from '..' ; const templates = new Map < string , Templatable > ( ) ; define ( class extends UllrElement { token : string ; template : Templatable | undefined ; static get is ( ) : string { return 'ullr-shdw' ; } static get observedAttributes ( ) : string [ ] { return [ 't' ] ; } attributeChangedCallback ( _ , prev , next ) { this . token = next ! ; if ( next !== null ) { this . template = templates . get ( next ) ; } if ( prev !== null ) { templates . delete ( prev ) ; } if ( this . connected ) { this . _render ( ) ; } } connectedCallback ( ) { super . connectedCallback ( ) ; this . _render ( ) ; } disconnectedCallback ( ) { super . disconnectedCallback ( ) ; templates . delete ( this . token ) ; } private _render ( ) { if ( this . template === undefined ) { return ; } render ( html `${ this . template }` , this ) ; } } ) ; const innerTemplate = isNodeEnv ( ) ? ( token , inner ) => html ` <ullr-shdw t="${ token }">${ inner }</ullr-shdw> ` : ( token ) => html ` <ullr-shdw t="${ token }"></ullr-shdw> ` ; class Shadow extends Directive { prev : Templatable | undefined ; constructor ( partInfo ) { super ( partInfo ) ; } render ( inner ) { if ( this . prev !== undefined && equals ( this . prev , inner ) ) { return ; } this . prev = inner ; const t = random ( ) ; templates . set ( t , inner ) ; return innerTemplate ( t , inner ) ; } } export const shadow = directive ( Shadow ) ;