element-vir
Version:
Heroic. Reactive. Declarative. Type safe. Web components without compromise.
79 lines (78 loc) • 3.44 kB
JavaScript
/* eslint-disable @typescript-eslint/no-deprecated */
import { check } from '@augment-vir/assert';
import { getOrSet } from '@augment-vir/common';
import { assign } from '../../declarative-element/directives/assign.directive.js';
import { hasTagName, isMinimalDefinitionWithInputs, } from '../minimal-element-definition.js';
import { transformTemplate } from '../transform-template.js';
import { tagNameKeys } from './tag-name-keys.js';
export function mapHtmlValues(inputTemplateStrings, inputValues) {
return inputValues.map((currentValue, currentValueIndex) => {
const lastString = inputTemplateStrings[currentValueIndex];
const nextString = inputTemplateStrings[currentValueIndex + 1];
if (lastString && nextString) {
const { shouldHaveTagNameHere } = classifyValue(lastString, nextString);
if (shouldHaveTagNameHere && check.isString(currentValue)) {
const replacement = {
tagName: currentValue,
tagInterpolationKey: getOrSet(tagNameKeys, currentValue, () => {
return {
tagName: currentValue,
};
}),
};
return replacement;
}
}
return currentValue;
});
}
function classifyValue(lastNewString, currentTemplateString) {
const isOpeningTag = lastNewString.trim().endsWith('<') && !!currentTemplateString.match(/^[\s>]/);
const isClosingTag = lastNewString.trim().endsWith('</') && currentTemplateString.trim().startsWith('>');
const shouldHaveTagNameHere = isOpeningTag || isClosingTag;
return {
isOpeningTag,
shouldHaveTagNameHere,
};
}
function transformHtml(...[lastNewString, currentTemplateString, rawCurrentValue,]) {
const currentValue = isMinimalDefinitionWithInputs(rawCurrentValue)
? rawCurrentValue.definition
: rawCurrentValue;
const { isOpeningTag, shouldHaveTagNameHere } = classifyValue(lastNewString, currentTemplateString);
const isTagNameWrapper = hasTagName(currentValue);
if (isTagNameWrapper && shouldHaveTagNameHere && currentValue.tagInterpolationKey) {
return {
replacement: currentValue.tagName,
getExtraValues: undefined,
};
}
else if (shouldHaveTagNameHere && !isTagNameWrapper) {
console.error({
lastNewString,
currentTemplateString,
currentValue,
});
throw new Error(`Got interpolated tag name but found no tag name on the given value: '${currentValue?.tagName ||
currentValue?.prototype?.constructor?.name ||
currentValue?.constructor?.name}'`);
}
else if (!shouldHaveTagNameHere || !isTagNameWrapper) {
return undefined;
}
const replacement = currentValue.tagName;
return {
replacement,
getExtraValues(extraValueCurrentValue) {
const assignedInputs = isMinimalDefinitionWithInputs(extraValueCurrentValue)
? extraValueCurrentValue.inputs
: undefined;
return [
isOpeningTag && assignedInputs ? assign(assignedInputs) : undefined,
].filter(check.isTruthy);
},
};
}
export function transformHtmlTemplate(litTemplate) {
return transformTemplate(litTemplate.strings, litTemplate.values, transformHtml);
}