fix(rocket-preset-extend-lion-docs): handle html stories

.changeset/short-rockets-fail.md

@@ -0,0 +1,5 @@
+---
+'rocket-preset-extend-lion-docs': patch
+---
+
+Replace tags in html stories when extending

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;
   };
 

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');
+  });
 });