From ea768c932ada6be5325525c64e5d56c895a9ab30 Mon Sep 17 00:00:00 2001
From: Thomas Allmer <thomas.allmer@ing.com>
Date: Thu, 8 Jul 2021 12:26:52 +0200
Subject: [PATCH] fix(rocket-preset-extend-lion-docs): handle html stories

---
 .changeset/short-rockets-fail.md              |  5 +++
 .../src/remarkExtendLionDocsTransformJs.js    | 40 ++++++++++++++++++-
 .../remarkExtendLionDocsTransformJs.test.js   |  8 ++++
 3 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/short-rockets-fail.md

diff --git a/.changeset/short-rockets-fail.md b/.changeset/short-rockets-fail.md
new file mode 100644
index 000000000..cdc72a219
--- /dev/null
+++ b/.changeset/short-rockets-fail.md
@@ -0,0 +1,5 @@
+---
+'rocket-preset-extend-lion-docs': patch
+---
+
+Replace tags in html stories when extending
diff --git a/packages-node/rocket-preset-extend-lion-docs/src/remarkExtendLionDocsTransformJs.js b/packages-node/rocket-preset-extend-lion-docs/src/remarkExtendLionDocsTransformJs.js
index b70804333..e24b431f5 100644
--- a/packages-node/rocket-preset-extend-lion-docs/src/remarkExtendLionDocsTransformJs.js
+++ b/packages-node/rocket-preset-extend-lion-docs/src/remarkExtendLionDocsTransformJs.js
@@ -16,9 +16,38 @@ const { transformSync } = babelPkg;
 
 /** @typedef {Node & CodeProperties} CodeNode */
 
+/**
+ * @param {string} value
+ * @param {string} from
+ * @param {string} to
+ */
+function replaceTag(value, from, to) {
+  return value
+    .replace(new RegExp(`<${from}(?=\\s|>)`, 'g'), `<${to}`) // positive lookahead for '>' or ' ' after the tagName
+    .replace(new RegExp(`/${from}>`, 'g'), `/${to}>`);
+}
+
+/**
+ * @param {string} value
+ * @param {{changes: Array<{ tag: { from: string, to: string }}> }} config
+ * @returns {string} value with replaced tags
+ */
+function replaceTags(value, config) {
+  let newValue = value;
+  if (config && config.changes) {
+    for (const change of config.changes) {
+      if (change.tag) {
+        const { from, to } = change.tag;
+        newValue = replaceTag(newValue, from, to);
+      }
+    }
+  }
+  return newValue;
+}
+
 /**
  * @param {object} opts
- * @param {object} opts.extendDocsConfig
+ * @param {{changes: Array<{ tag: { from: string, to: string }}> }} opts.extendDocsConfig
  * @returns
  */
 export function remarkExtendLionDocsTransformJs({ extendDocsConfig }) {
@@ -40,6 +69,15 @@ export function remarkExtendLionDocsTransformJs({ extendDocsConfig }) {
       }
     }
 
+    if (
+      node.type === 'code' &&
+      node.lang === 'html' &&
+      (node.meta === 'story' || node.meta === 'preview-story' || node.meta === 'script') &&
+      node.value
+    ) {
+      node.value = replaceTags(node.value, extendDocsConfig);
+    }
+
     return node;
   };
 
diff --git a/packages-node/rocket-preset-extend-lion-docs/test-node/remarkExtendLionDocsTransformJs.test.js b/packages-node/rocket-preset-extend-lion-docs/test-node/remarkExtendLionDocsTransformJs.test.js
index a034f8810..b94d3ca9e 100644
--- a/packages-node/rocket-preset-extend-lion-docs/test-node/remarkExtendLionDocsTransformJs.test.js
+++ b/packages-node/rocket-preset-extend-lion-docs/test-node/remarkExtendLionDocsTransformJs.test.js
@@ -132,4 +132,12 @@ describe('remarkExtendLionDocsTransformJs', () => {
       ].join('\n'),
     );
   });
+
+  it('processes html stories', async () => {
+    const result = await execute(
+      ['', '```html preview-story', '<lion-accordion></lion-accordion>', '```'].join('\n'),
+    );
+
+    expect(result.html).to.include('ing-accordion');
+  });
 });