diff --git a/.changeset/purple-ways-shout.md b/.changeset/purple-ways-shout.md new file mode 100644 index 000000000..b80c89391 --- /dev/null +++ b/.changeset/purple-ways-shout.md @@ -0,0 +1,5 @@ +--- +'babel-plugin-extend-docs': patch +--- + +Replace `scopedElements` keys (= tag names) when extending diff --git a/packages-node/babel-plugin-extend-docs/src/babelPluginExtendDocs.js b/packages-node/babel-plugin-extend-docs/src/babelPluginExtendDocs.js index 3dcb43897..c2e9d0bd2 100644 --- a/packages-node/babel-plugin-extend-docs/src/babelPluginExtendDocs.js +++ b/packages-node/babel-plugin-extend-docs/src/babelPluginExtendDocs.js @@ -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 }); diff --git a/packages-node/babel-plugin-extend-docs/test-node/babelPluginExtendDocs.test.js b/packages-node/babel-plugin-extend-docs/test-node/babelPluginExtendDocs.test.js index 450adfed1..fc374ede0 100644 --- a/packages-node/babel-plugin-extend-docs/test-node/babelPluginExtendDocs.test.js +++ b/packages-node/babel-plugin-extend-docs/test-node/babelPluginExtendDocs.test.js @@ -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`',