Merge pull request #762 from ing-bank/fix/babel-plugin-tagnames

fix(babel-plugin-extend-docs): check more strictly on tagnames

packages/babel-plugin-extend-docs/src/babelPluginExtendDocs.js

@@ -9,8 +9,8 @@ const { validateOptions } = require('./validateOptions.js');
 function replaceTemplateElements({ path, opts }) {
   const replaceTag = (value, from, to) =>
     value
-      .replace(new RegExp(`<${from}`, 'g'), `<${to}`)
+      .replace(new RegExp(`<${from}(?= |>)`, 'g'), `<${to}`) // positive lookahead for '>' or ' ' after the tagName
-      .replace(new RegExp(`${from}>`, 'g'), `${to}>`);
+      .replace(new RegExp(`/${from}>`, 'g'), `/${to}>`);
   path.node.quasi.quasis.forEach(quasi => {
     opts.changes.forEach(change => {
       if (change.tag && quasi.value.raw.match(change.tag.from)) {

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

@@ -207,7 +207,7 @@ describe('babel-plugin-extend-docs', () => {
     expect(executeBabel(code, testConfig)).to.equal(output);
   });
 
-  it('will no touch content of tags', () => {
+  it('will not touch content of tags', () => {
     const code = [
       'export const main = () => html`',
       `  <lion-input \${'hi'} label="lion-input"></lion-input>`,
@@ -227,6 +227,48 @@ describe('babel-plugin-extend-docs', () => {
     expect(executeBabel(code, testConfig)).to.equal(output);
   });
 
+  it('will not replace opening tags that are not the exact same tag name', () => {
+    const code = [
+      'export const main = () => html`',
+      `  <lion-checkbox-group \${'hi'} label="lion-checkbox-group"></lion-checkbox-group>`,
+      '  <lion-checkbox ',
+      '    label="some label"',
+      '  ></lion-checkbox>',
+      '  <lion-checkbox></lion-checkbox>',
+      '`;',
+    ].join('\n');
+    const output = [
+      'export const main = () => html`',
+      `  <lion-checkbox-group \${'hi'} label="lion-checkbox-group"></lion-checkbox-group>`,
+      '  <wolf-checkbox ',
+      '    label="some label"',
+      '  ></wolf-checkbox>',
+      '  <wolf-checkbox></wolf-checkbox>',
+      '`;',
+    ].join('\n');
+    expect(executeBabel(code, testConfig)).to.equal(output);
+  });
+
+  it('will not replace closing tags that are not the exact same tag name', () => {
+    const code = [
+      'export const main = () => html`',
+      `  <group-lion-checkbox \${'hi'} label="group-lion-checkbox"></group-lion-checkbox>`,
+      '  <lion-checkbox ',
+      '    label="some label"',
+      '  ></lion-checkbox>',
+      '`;',
+    ].join('\n');
+    const output = [
+      'export const main = () => html`',
+      `  <group-lion-checkbox \${'hi'} label="group-lion-checkbox"></group-lion-checkbox>`,
+      '  <wolf-checkbox ',
+      '    label="some label"',
+      '  ></wolf-checkbox>',
+      '`;',
+    ].join('\n');
+    expect(executeBabel(code, testConfig)).to.equal(output);
+  });
+
   it('replaces nested tags in function occurrences', () => {
     const code = [
       'export const main = () => html`',

packages/babel-plugin-extend-docs/test-node/helpers.js

@@ -81,6 +81,41 @@ const baseConfig = {
         ],
       },
     },
+    {
+      description: 'LionCheckbox',
+      variable: {
+        from: 'LionCheckbox',
+        to: 'WolfCheckbox',
+        paths: [
+          {
+            from: './index.js',
+            to: './index.js',
+          },
+          {
+            from: './src/LionCheckbox.js',
+            to: './index.js',
+          },
+          {
+            from: '@lion/checkbox-group',
+            to: './index.js',
+          },
+        ],
+      },
+      tag: {
+        from: 'lion-checkbox',
+        to: 'wolf-checkbox',
+        paths: [
+          {
+            from: './lion-checkbox.js',
+            to: './__element-definitions/wolf-checkbox.js',
+          },
+          {
+            from: '@lion/checkbox-group/lion-checkbox.js',
+            to: './__element-definitions/wolf-checkbox.js',
+          },
+        ],
+      },
+    },
     {
       description: 'localize',
       variable: {