jlengrand/open-wc
1
0
Fork 0
mirror of https://github.com/jlengrand/open-wc.git synced 2026-03-10 08:31:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(scoped-elements): add data-tag-name with the original tagName

Browse Source
This commit is contained in:
Manuel Martin
2020-08-04 22:54:59 +02:00
committed by Lars den Bakker
parent 2c77477bdc
commit d97454ea7e
3 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/scoped-elements/README.md
View File

@@ -243,7 +243,7 @@ To demonstrate, we made three demos:
## How it works
`ScopedElementsMixin` is mixed into your LitElement and via `static get scopedElements()` you define the tags and classes you wanna use in your elements template.
Under the hood it changes your template so `<my-button>${this.text}</my-button>` becomes `<my-button-2748>${this.text}</my-button-2748>`.
Under the hood it changes your template so `<my-button>${this.text}</my-button>` becomes `<my-button-2748 data-tag-name="my-button">${this.text}</my-button-2748>`.
Every auto-defined scoped elements gets a random\* 4 digits number suffix. This suffix changes every time to make sure developers are not inclined to use it the generated tag name as a styling hook. Additionally the suffix allows scoped-elements and traditional self-defined elements to coexist, avoiding name collision.

14
packages/scoped-elements/src/transform.js
View File

@@ -58,12 +58,16 @@ const transformTemplate = (strings, scopedElements, templateCache, tagsCache) =>
for (let i = matches.length - 1; i >= 0; i -= 1) {
const item = matches[i];
const klass = scopedElements[item[1]];
const tag = registerElement(item[1], klass, tagsCache);
const start = item.index + item[0].length - item[1].length;
const end = start + item[1].length;
const [block, tagName] = item;
const tag = registerElement(tagName, scopedElements[tagName], tagsCache);
const start = item.index + block.length - tagName.length;
const end = start + tagName.length;
const isClosingTag = block.startsWith('</');
acc = acc.slice(0, start) + tag + acc.slice(end);
acc =
acc.slice(0, start) +
(isClosingTag ? tag : `${tag} data-tag-name="${tagName}"`) +
acc.slice(end);
}
return acc;

25
packages/scoped-elements/test/transform.test.js
View File

@@ -9,23 +9,38 @@ describe('html', () => {
[
{
input: ['<mandalore-planet>', '</mandalore-planet>'],
output: ['<mandalore-planet-\\d{1,5}>', '</mandalore-planet-\\d{1,5}>'],
output: [
'<mandalore-planet-\\d{1,5} data-tag-name="mandalore-planet">',
'</mandalore-planet-\\d{1,5}>',
],
},
{
input: ['<mandalore-planet class="sample">', '</mandalore-planet>'],
output: ['<mandalore-planet-\\d{1,5} class="sample">', '</mandalore-planet-\\d{1,5}>'],
output: [
'<mandalore-planet-\\d{1,5} data-tag-name="mandalore-planet" class="sample">',
'</mandalore-planet-\\d{1,5}>',
],
},
{
input: ['<mandalore-planet\tclass="sample">', '</mandalore-planet>'],
output: ['<mandalore-planet-\\d{1,5}\tclass="sample">', '</mandalore-planet-\\d{1,5}>'],
output: [
'<mandalore-planet-\\d{1,5} data-tag-name="mandalore-planet"\tclass="sample">',
'</mandalore-planet-\\d{1,5}>',
],
},
{
input: ['<mandalore-planet\rclass="sample">', '</mandalore-planet>'],
output: ['<mandalore-planet-\\d{1,5}\rclass="sample">', '</mandalore-planet-\\d{1,5}>'],
output: [
'<mandalore-planet-\\d{1,5} data-tag-name="mandalore-planet"\rclass="sample">',
'</mandalore-planet-\\d{1,5}>',
],
},
{
input: ['<mandalore-planet class="sample"></mandalore-planet>'],
output: ['<mandalore-planet-\\d{1,5} class="sample"></mandalore-planet-\\d{1,5}>'],
output: [
'<mandalore-planet-\\d{1,5} data-tag-name="mandalore-planet"' +
' class="sample"></mandalore-planet-\\d{1,5}>',
],
},
].forEach(({ input, output }, index) => {
it(`should transform strings tags into the actual registered tags - ${index}`, () => {