26 lines
899 B
TypeScript
26 lines
899 B
TypeScript
|
import { customElement as litCustomElement } from 'lit/decorators/custom-element.js';
|
||
|
|
|
||
|
|
const camelToKebab = (name: string) =>
|
||
|
|
name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
||
|
|
|
||
|
|
export function customElement(tagName: string) {
|
||
|
|
return (classOrTarget: any, context?: any) => {
|
||
|
|
// Set .is so that other decorators and utilities can read the tag name
|
||
|
|
classOrTarget.is = tagName;
|
||
|
|
|
||
|
|
// Warn if class name convention doesn't match the tag
|
||
|
|
if (classOrTarget.name) {
|
||
|
|
const derived = camelToKebab(classOrTarget.name);
|
||
|
|
if (derived !== tagName) {
|
||
|
|
console.warn(
|
||
|
|
`[dees-element] Class "${classOrTarget.name}" kebab-cases to "${derived}" but tag is "${tagName}". ` +
|
||
|
|
`Container queries use .is ("${tagName}").`
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Delegate to Lit's original decorator
|
||
|
|
return litCustomElement(tagName)(classOrTarget, context);
|
||
|
|
};
|
||
|
|
}
|