Support template literal types in docs generator (#3856)

adobe · Dec 15, 2022 · 703ab7b · 703ab7b
1 parent f5f2631
commit 703ab7b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git 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
@@ -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