From 1890ac41eec7a1353af72a664fc4940eae5df8f8 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Thu, 15 Dec 2022 15:12:54 -0800
Subject: [PATCH] Support template literal types in docs generator

---
 packages/dev/docs/src/types.js                | 24 +++++++++++++++++++
 .../DocsTransformer.js                        | 23 ++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/packages/dev/docs/src/types.js b/packages/dev/docs/src/types.js
index 51819c6e353..2474fca7368 100644
--- a/packages/dev/docs/src/types.js
+++ b/packages/dev/docs/src/types.js
@@ -132,6 +132,8 @@ export function Type({type}) {
       return <IndexedAccess {...type} />;
     case 'keyof':
       return <Keyof {...type} />;
+    case 'template':
+      return <TemplateLiteral {...type} />;
     default:
       console.log('no render component for TYPE', type);
       return null;
@@ -602,3 +604,25 @@ function ConditionalType({checkType, extendsType, trueType, falseType}) {
     </>
   );
 }
+
+function TemplateLiteral({elements}) {
+  return (
+    <>
+      <span className="token hljs-string">{'`'}</span>
+      {elements.map((element, i) => {
+        if (element.type === 'string' && element.value) {
+          return <span className="token hljs-string" key={i}>{element.value}</span>;
+        }
+
+        return (
+          <React.Fragment key={i}>
+            <span className="token punctuation">{'${'}</span>
+            <Type type={element} />
+            <span className="token punctuation">{'}'}</span>
+          </React.Fragment>
+        );
+      })}
+      <span className="token hljs-string">{'`'}</span>
+    </>
+  );
+}
diff --git a/packages/dev/parcel-transformer-docs/DocsTransformer.js b/packages/dev/parcel-transformer-docs/DocsTransformer.js
index 4633297788f..3893f2d66ec 100644
--- a/packages/dev/parcel-transformer-docs/DocsTransformer.js
+++ b/packages/dev/parcel-transformer-docs/DocsTransformer.js
@@ -483,6 +483,29 @@ module.exports = new Transformer({
       }
 
       if (path.isTSLiteralType()) {
+        if (t.isTemplateLiteral(path.node.literal)) {
+          let expressions = path.get('literal.expressions').map(e => processExport(e));
+          let elements = [];
+          let i = 0;
+          for (let q of path.node.literal.quasis) {
+            if (q.value.raw) {
+              elements.push({
+                type: 'string',
+                value: q.value.raw
+              });
+            }
+
+            if (!q.tail) {
+              elements.push(expressions[i++]);
+            }
+          }
+
+          return Object.assign(node, {
+            type: 'template',
+            elements
+          });
+        }
+
         return Object.assign(node, {
           type: typeof path.node.literal.value,
           value: path.node.literal.value