fix: handle "new" expressions in MDX

ccontrols · Jul 4, 2020 · 8ebf546 · 8ebf546
1 parent be140e0
commit 8ebf546
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 45 deletions.
diff --git a/core/instrument/src/babel/extract-attributes.ts b/core/instrument/src/babel/extract-attributes.ts
@@ -1,3 +1,5 @@
+import { stringifyObject } from '../misc/stringify-object';
+
 interface StoryAttribute {
   name: string;
   value: any;
@@ -28,6 +30,16 @@ const nodeToValue = (node: any): any => {
           : value;
       case 'MemberExpression':
         return new String(`${node.object.name}.${node.property.name}`);
+      case 'NewExpression':
+        return new String(
+          `new ${node.callee.name}(${
+            node.arguments
+              ? node.arguments
+                  .map((arg: any) => stringifyObject(nodeToValue(arg)))
+                  .join(', ')
+              : ''
+          })`,
+        );
       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,49 +1,5 @@
-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();
-  }
-};
+import { stringifyObject } from './stringify-object';
 
 const mdxPropertiesExport = (exportType: MDXExportType): string | undefined => {
   return exportType ? stringifyObject(exportType.story) : undefined;

diff --git a/core/instrument/src/misc/stringify-object.ts b/core/instrument/src/misc/stringify-object.ts
@@ -0,0 +1,44 @@
+import jsStringEscape from 'js-string-escape';
+
+export const stringifyObject = (
+  val: any,
+  sep: string = '  ',
+  depth: number = 1,
+): string => {
+  switch (typeof val) {
+    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();
+  }
+};