https://podkite.com/assets/ref.js

1import { directive } from '@lion/core';
2
3/**
4 * @typedef {import('@lion/core').PropertyPart} PropertyPart
5 */
6
7/** @type {WeakSet<Element>} */
8const cache = new WeakSet();
9
10/**
11 * @desc Allows to have references to different parts of your lit template.
12 * Without it, seperate renders to different nodes would have been needed, leading to more verbose,
13 * less readable and less performant code.
14 * Inspired by Angular template refeference variables:
15 * https://angular.io/guide/template-syntax#ref-vars
16 *
17 * @example
18 * ```js
19 * const refObj = {};
20 * ```
21 * ```html
22 * <my-element #myElement=${ref(refObj)}>
23 *   <button @click=${() => refObj.myElement.publicMethod()}>click</button>
24 * </my-element>
25 *```
26 *
27 * @param {object} refObj will be used to store reference to attribute names like #myElement
28 */
29export const ref = directive(refObj => (/** @type {PropertyPart} */ part) => {
30  if (cache.has(part.committer.element)) {
31    return;
32  }
33  cache.add(part.committer.element);
34  const attrName = part.committer.name;
35  const key = attrName.replace(/^#/, '');
36  // eslint-disable-next-line no-param-reassign
37  refObj[key] = part.committer.element;
38});