feat: custom serialization of mdx attributes

ccontrols · Jul 3, 2020 · 028e366 · 028e366
1 parent 563add3
commit 028e366
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 3 deletions.
diff --git a/core/instrument/src/babel/extract-attributes.ts b/core/instrument/src/babel/extract-attributes.ts
@@ -2,6 +2,7 @@ interface StoryAttribute {
   name: string;
   value: any;
 }
+
 const nodeToValue = (node: any): any => {
   if (node) {
     switch (node.type) {
@@ -10,7 +11,8 @@ const nodeToValue = (node: any): any => {
       case 'StringLiteral':
         return node.value;
       case 'Identifier':
-        return node.name;
+        //String class is used when the prop value should not be stringified when serializing
+        return new String(node.name);
       case 'Property':
         return node.name;
       case 'ObjectProperty':
@@ -25,7 +27,7 @@ const nodeToValue = (node: any): any => {
           ? value.replace(/^\/|\/$/g, '')
           : value;
       case 'MemberExpression':
-        return `${node.object.name}.${node.property.name}`;
+        return new String(`${node.object.name}.${node.property.name}`);
       case 'ObjectExpression':
         return extractAttributes(node);
       case 'ArrayExpression':

diff --git a/core/instrument/src/misc/mdx-exports.ts b/core/instrument/src/misc/mdx-exports.ts
@@ -1,7 +1,52 @@
+import jsStringEscape from 'js-string-escape';
 import { MDXExportType, MDXExportTypes } from '../types';
 
+const stringifyObject = (
+  val: any,
+  sep: string = '  ',
+  depth: number = 1,
+): string => {
+  const t = typeof val;
+  switch (t) {
+    case 'string':
+      return `"${jsStringEscape(val)}"`;
+    case 'function':
+      return val.name || val.toString();
+    case 'object':
+      if (val instanceof Date) {
+        return '"' + val.toISOString() + '"';
+      }
+      if (val instanceof String) {
+        return val.toString();
+      }
+      if (Array.isArray(val)) {
+        return (
+          '[' +
+          val.map(v => stringifyObject(v, sep, depth + 1)).join(', ') +
+          ']'
+        );
+      }
+      if (val === null) {
+        return 'null';
+      }
+      return `
+        {
+        ${Object.keys(val)
+          .map(key => {
+            return typeof val[key] === 'function'
+              ? null
+              : `${key}: ${stringifyObject(val[key], sep, depth + 1)}`;
+          })
+          .filter(v => v)}
+        }
+        `;
+    default:
+      return val.toString();
+  }
+};
+
 const mdxPropertiesExport = (exportType: MDXExportType): string | undefined => {
-  return exportType ? JSON.stringify(exportType.story, null, 2) : undefined;
+  return exportType ? stringifyObject(exportType.story) : undefined;
 };
 
 const mdxFunctionExport = (