How to use the lit-html.directive function in lit-html

defaultContent?: TemplateResult
		  ): void => {
				part.setValue(
					html`
						
					`
				)
				part.commit()
		  }
)

export const subscribe = directive(f) as (
	observable: Observable,
	template: TemplateCallback,
	defaultContent?: TemplateResult
) => (part: Part) => void

for (let i = 0; i < config.args.length; i++) {
			if (config.args[i] !== args[i]) {
				part.setValue(fn(...args));
				return;
			}
		}
	});

export const onTypeChange = directive((actual: CHANGE_TYPE, expected: CHANGE_TYPE, 
	fn: (...arg: any[]) => any, ...args: any[]) => (part: Part) => {
		if (actual & expected) {
			part.setValue(fn(...args));
		}
	});

export const __ = directive((actual: CHANGE_TYPE, 
	key: string, ...values: (DirectiveFn|string|number|(() => string|number))[]) => (part: Part) => {
		if (actual & CHANGE_TYPE.LANG) {
			const prom = WebComponent.__prom(key, ...values.map((value) => {
				if (typeof value === 'function' && !isDirective(value)) {
					return (value as () => string|number)();
				}
				return value;
			})) as Promise;
			part.setValue(`{{${key}}}`);
			prom.then((value) => {
				part.setValue(value);
				part.commit();
			});
		}
	});

import {MDCTextFieldCharacterCounterFoundation} from '@material/textfield/character-counter/foundation.js';
import {directive, PropertyPart} from 'lit-html';

export interface CharacterCounter extends HTMLElement {
  foundation: MDCTextFieldCharacterCounterFoundation;
}

const createAdapter =
    (hostElement: HTMLElement): MDCTextFieldCharacterCounterAdapter => {
      return {setContent: (content) => hostElement.textContent = content};
    };

const partToFoundationMap =
    new WeakMap();

export const characterCounter = directive(() => (part: PropertyPart) => {
  const lastFoundation = partToFoundationMap.get(part);
  if (!lastFoundation) {
    const hostElement = part.committer.element as CharacterCounter;
    hostElement.classList.add('mdc-text-field-character-counter');
    const adapter = createAdapter(hostElement);
    const foundation = new MDCTextFieldCharacterCounterFoundation(adapter);
    foundation.init();
    part.setValue(foundation);
    partToFoundationMap.set(part, foundation);
  }
});

addClass: (className) => labelElement.classList.add(className),
    removeClass: (className) => labelElement.classList.remove(className),
    getWidth: () => labelElement.scrollWidth,
    registerInteractionHandler: (evtType, handler) => {
      labelElement.addEventListener(evtType, handler);
    },
    deregisterInteractionHandler: (evtType, handler) => {
      labelElement.removeEventListener(evtType, handler);
    },
  };
};

const partToFoundationMap =
    new WeakMap();

export const floatingLabel = directive(() => (part: PropertyPart) => {
  const lastFoundation = partToFoundationMap.get(part);
  if (!lastFoundation) {
    const labelElement = part.committer.element as FloatingLabel;
    labelElement.classList.add('mdc-floating-label');
    const adapter = createAdapter(labelElement);
    const foundation = new MDCFloatingLabelFoundation(adapter);
    foundation.init();
    part.setValue(foundation);
    partToFoundationMap.set(part, foundation);
  }
});

function virtual(renderer: Renderer) {
    function factory(...args: unknown[]) {
      return (part: NodePart) => {
        let cont = partToScheduler.get(part);
        if(!cont) {
          cont = new Scheduler(renderer, part);
          partToScheduler.set(part, cont);
          schedulerToPart.set(cont, part);
          teardownOnRemove(cont, part);
        }
        cont.args = args;
        cont.update();
      };
    }

    return directive(factory);
  }

if (!partMap.has(part)) {
			partMap.set(part, {
				fn,
				args: [...args]
			});
		}
		const config = partMap.get(part)!;
		for (let i = 0; i < config.args.length; i++) {
			if (config.args[i] !== args[i]) {
				part.setValue(fn(...args));
				return;
			}
		}
	});

export const onTypeChange = directive((actual: CHANGE_TYPE, expected: CHANGE_TYPE, 
	fn: (...arg: any[]) => any, ...args: any[]) => (part: Part) => {
		if (actual & expected) {
			part.setValue(fn(...args));
		}
	});

export const __ = directive((actual: CHANGE_TYPE, 
	key: string, ...values: (DirectiveFn|string|number|(() => string|number))[]) => (part: Part) => {
		if (actual & CHANGE_TYPE.LANG) {
			const prom = WebComponent.__prom(key, ...values.map((value) => {
				if (typeof value === 'function' && !isDirective(value)) {
					return (value as () => string|number)();
				}
				return value;
			})) as Promise;
			part.setValue(`{{${key}}}`);

import { directive, Part, NodePart } from "lit-html";

export const dynamicElement = directive(
  (tag: string, properties?: { [key: string]: any }) => (part: Part): void => {
    if (!(part instanceof NodePart)) {
      throw new Error(
        "dynamicContentDirective can only be used in content bindings"
      );
    }

    let element = part.value as HTMLElement | undefined;

    if (
      element !== undefined &&
      tag.toUpperCase() === (element as HTMLElement).tagName
    ) {
      if (properties) {
        Object.entries(properties).forEach(([key, value]) => {
          element![key] = value;

distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {directive, PropertyPart} from 'lit-html';
import {AnchorableElement} from './mwc-menu-ponyfill';

export interface MenuAnchor extends HTMLElement {
  anchoring: Element|null;
}

const partToTarget = new WeakMap();

export const menuAnchor =
    directive((forSelector: string) => (part: PropertyPart) => {
      const lastTarget = partToTarget.get(part);
      const anchorElement = part.committer.element;
      const root = anchorElement.getRootNode() as Document | ShadowRoot;
      const target =
          root.querySelector(forSelector) as AnchorableElement | null;

      if (target !== lastTarget) {
        anchorElement.classList.add('mdc-menu-anchor');

        if (target) {
          target.anchorElement = anchorElement;
          partToTarget.set(part, target);
        }

        partToTarget.set(part, target);
        part.setValue(target);

function getActions(instance) {
    return directive(function actionsDirective(createFunctions, props) {
      return function partial(part) {
        const element = part.committer.element;
        for (const create of createFunctions) {
          if (typeof create === 'function') {
            const exists = actions.find(
              action =>
                action.instance === instance && action.componentAction.create === create && action.element === element
            );
            if (!exists) {
              if (typeof element.__vido__ !== 'undefined') delete element.__vido__;
              const componentAction = { create, update() {}, destroy() {} };
              actions.push({ instance, componentAction, element, props });
            } else {
              exists.props = props;
            }
          }

return actionhandler as ActionHandler;
};

export const actionHandlerBind = (
  element: ActionHandlerElement,
  options: ActionHandlerOptions
) => {
  const actionhandler: ActionHandler = getActionHandler();
  if (!actionhandler) {
    return;
  }
  actionhandler.bind(element, options);
};

export const actionHandler = directive(
  (options: ActionHandlerOptions = {}) => (part: PropertyPart) => {
    actionHandlerBind(part.committer.element as ActionHandlerElement, options);
  }
);