fix(babel-plugin-extend-docs): handle scopedElement renames
This commit is contained in:
parent
bffd6db9df
commit
dd3fd33109
3 changed files with 91 additions and 0 deletions
5
.changeset/purple-ways-shout.md
Normal file
5
.changeset/purple-ways-shout.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'babel-plugin-extend-docs': patch
|
||||
---
|
||||
|
||||
Replace `scopedElements` keys (= tag names) when extending
|
||||
|
|
@ -23,6 +23,15 @@ function replaceTemplateElements({ path, opts }) {
|
|||
});
|
||||
}
|
||||
|
||||
function replaceTagName(tagName, opts) {
|
||||
for (const change of opts.changes) {
|
||||
if (change.tag && change.tag.from === tagName) {
|
||||
return change.tag.to;
|
||||
}
|
||||
}
|
||||
return tagName;
|
||||
}
|
||||
|
||||
function insertImportStatements({ imports, path }) {
|
||||
path.node.body = [...imports, ...path.node.body];
|
||||
}
|
||||
|
|
@ -36,6 +45,30 @@ module.exports = ({ types: t }) => ({
|
|||
replaceTagImports({ path, state, opts: state.opts, types: t });
|
||||
}
|
||||
},
|
||||
ClassMethod(path, state) {
|
||||
// replace keys (= tag names) in static get scopedElements()
|
||||
if (path.node.static === true && path.node.key.name === 'scopedElements') {
|
||||
if (
|
||||
path.node.body.type === 'BlockStatement' &&
|
||||
path.node.body.body[0].type === 'ReturnStatement'
|
||||
) {
|
||||
const { argument } = path.node.body.body[0];
|
||||
for (const prop of argument.properties) {
|
||||
prop.key.value = replaceTagName(prop.key.value, state.opts);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
ClassProperty(path, state) {
|
||||
// replace keys (= tag names) in scopedElements =
|
||||
if (path.node.static === true && path.node.key.name === 'scopedElements') {
|
||||
if (path.node.value.type === 'ObjectExpression') {
|
||||
for (const prop of path.node.value.properties) {
|
||||
prop.key.value = replaceTagName(prop.key.value, state.opts);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
TaggedTemplateExpression(path, state) {
|
||||
if (t.isIdentifier(path.node.tag) && path.node.tag.name === 'html') {
|
||||
replaceTemplateElements({ path, opts: state.opts });
|
||||
|
|
|
|||
|
|
@ -126,6 +126,59 @@ describe('babel-plugin-extend-docs', () => {
|
|||
expect(executeBabel(code, testConfig)).to.equal(output);
|
||||
});
|
||||
|
||||
it('replaces tags in static get scopedElements()', () => {
|
||||
const code = [
|
||||
"import { html, LitElement, ScopedElementsMixin } from '@lion/core';",
|
||||
"import { LionInput } from '@lion/input';",
|
||||
'',
|
||||
'class MyComponent extends ScopedElementsMixin(LitElement) {',
|
||||
' static get scopedElements() {',
|
||||
' return {',
|
||||
' "lion-input": LionInput',
|
||||
' };',
|
||||
' }',
|
||||
'}',
|
||||
].join('\n');
|
||||
const output = [
|
||||
'import { html, LitElement, ScopedElementsMixin } from "@lion/core";',
|
||||
'import { WolfInput } from "wolf-web/input";',
|
||||
'',
|
||||
'class MyComponent extends ScopedElementsMixin(LitElement) {',
|
||||
' static get scopedElements() {',
|
||||
' return {',
|
||||
' "wolf-input": WolfInput',
|
||||
' };',
|
||||
' }',
|
||||
'',
|
||||
'}',
|
||||
].join('\n');
|
||||
expect(executeBabel(code, testConfig)).to.equal(output);
|
||||
});
|
||||
|
||||
it('replaces tags in static scopedElements =', () => {
|
||||
const code = [
|
||||
"import { html, LitElement, ScopedElementsMixin } from '@lion/core';",
|
||||
"import { LionInput } from '@lion/input';",
|
||||
'',
|
||||
'class MyComponent extends ScopedElementsMixin(LitElement) {',
|
||||
' static scopedElements = {',
|
||||
' "lion-input": LionInput',
|
||||
' };',
|
||||
'}',
|
||||
].join('\n');
|
||||
const output = [
|
||||
'import { html, LitElement, ScopedElementsMixin } from "@lion/core";',
|
||||
'import { WolfInput } from "wolf-web/input";',
|
||||
'',
|
||||
'class MyComponent extends ScopedElementsMixin(LitElement) {',
|
||||
' static scopedElements = {',
|
||||
' "wolf-input": WolfInput',
|
||||
' };',
|
||||
'}',
|
||||
].join('\n');
|
||||
expect(executeBabel(code, testConfig)).to.equal(output);
|
||||
});
|
||||
|
||||
it("replaces tags also if using ${{key: 'value'}}", () => {
|
||||
const code = [
|
||||
'export const forceLocale = () => html`',
|
||||
|
|
|
|||
Loading…
Reference in a new issue