From dc143b7323590ebb46054d22abfb16aa2090c110 Mon Sep 17 00:00:00 2001
From: Joren Broekema <joren.broekema@ing.com>
Date: Wed, 10 Jun 2020 10:50:06 +0200
Subject: [PATCH] fix(babel-plugin-extend-docs): check more strictly on
 tagnames

---
 .../src/babelPluginExtendDocs.js              |  4 +-
 .../test-node/babelPluginExtendDocs.test.js   | 44 ++++++++++++++++++-
 .../test-node/helpers.js                      | 35 +++++++++++++++
 3 files changed, 80 insertions(+), 3 deletions(-)

diff --git a/packages/babel-plugin-extend-docs/src/babelPluginExtendDocs.js b/packages/babel-plugin-extend-docs/src/babelPluginExtendDocs.js
index 9264a364c..4204f96d9 100644
--- a/packages/babel-plugin-extend-docs/src/babelPluginExtendDocs.js
+++ b/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}>`);
+      .replace(new RegExp(`<${from}(?= |>)`, 'g'), `<${to}`) // positive lookahead for '>' or ' ' after the tagName
+      .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)) {
diff --git a/packages/babel-plugin-extend-docs/test-node/babelPluginExtendDocs.test.js b/packages/babel-plugin-extend-docs/test-node/babelPluginExtendDocs.test.js
index c57edbe50..7533ac37c 100644
--- a/packages/babel-plugin-extend-docs/test-node/babelPluginExtendDocs.test.js
+++ b/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`',
diff --git a/packages/babel-plugin-extend-docs/test-node/helpers.js b/packages/babel-plugin-extend-docs/test-node/helpers.js
index d0356eb1e..2bb416e7c 100644
--- a/packages/babel-plugin-extend-docs/test-node/helpers.js
+++ b/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: {