ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(babel-plugin-extend-docs): handle scopedElement renames

Browse source
This commit is contained in:
Thomas Allmer 2021-07-29 14:40:53 +02:00 committed by Thomas Allmer
parent bffd6db9df
commit dd3fd33109
3 changed files with 91 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/purple-ways-shout.md Normal file
View file

@ -0,0 +1,5 @@
---
'babel-plugin-extend-docs': patch
---
Replace `scopedElements` keys (= tag names) when extending

33
packages-node/babel-plugin-extend-docs/src/babelPluginExtendDocs.js
View file

@ -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 }) { function insertImportStatements({ imports, path }) {
path.node.body = [...imports, ...path.node.body]; path.node.body = [...imports, ...path.node.body];
} }
@ -36,6 +45,30 @@ module.exports = ({ types: t }) => ({
replaceTagImports({ path, state, opts: state.opts, 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) { TaggedTemplateExpression(path, state) {
if (t.isIdentifier(path.node.tag) && path.node.tag.name === 'html') { if (t.isIdentifier(path.node.tag) && path.node.tag.name === 'html') {
replaceTemplateElements({ path, opts: state.opts }); replaceTemplateElements({ path, opts: state.opts });

53
packages-node/babel-plugin-extend-docs/test-node/babelPluginExtendDocs.test.js
View file

@ -126,6 +126,59 @@ describe('babel-plugin-extend-docs', () => {
expect(executeBabel(code, testConfig)).to.equal(output); 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'}}", () => { it("replaces tags also if using ${{key: 'value'}}", () => {
const code = [ const code = [
'export const forceLocale = () => html`', 'export const forceLocale = () => html`',