feat: initial subcomponents support

ccontrols · Mar 16, 2020 · 496524f · 496524f
1 parent 812b515
commit 496524f
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 116 deletions.
diff --git a/core/instrument/src/babel/extract-component.ts b/core/instrument/src/babel/extract-component.ts
@@ -30,22 +30,31 @@ export const extractComponent = async (
     initialAST,
   );
   const { components } = options || {};
-  const component: StoryComponent = follow
-    ? {
-        name: componentName,
-        from: follow.from,
-        request: follow.filePath,
-        loc: follow.loc,
-        importedName: follow.importedName,
-        source: components?.storeSourceFile ? follow.source : undefined,
-        repository: await packageInfo(
-          follow.originalFilePath,
-          options?.components?.package,
-        ),
-      }
-    : {
-        name: componentName,
-      };
+  let component: StoryComponent;
+  if (follow) {
+    component = {
+      name: componentName,
+      from: follow.from,
+      request: follow.filePath,
+
+      importedName: follow.importedName,
+    };
+    if (components?.storeSourceFile) {
+      component.source = follow.source;
+      component.loc = follow.loc;
+    }
+    const repository = await packageInfo(
+      follow.originalFilePath,
+      options?.components?.package,
+    );
+    if (repository !== undefined) {
+      component.repository = repository;
+    }
+  } else {
+    component = {
+      name: componentName,
+    };
+  }
   const { propsLoaders } = options || {};
   if (follow && follow.filePath && Array.isArray(propsLoaders)) {
     const info = await propsInfo(
@@ -83,8 +92,9 @@ export const extractStoreComponent = async (
           initialAST,
         );
         if (component) {
-          store.components[filePath] = component;
-          kind.components[componentName] = filePath;
+          const componentKey = component.request ?? filePath;
+          store.components[componentKey] = component;
+          kind.components[componentName] = componentKey;
         }
       }
     }

diff --git a/core/instrument/src/misc/componentAttributes.ts b/core/instrument/src/misc/componentAttributes.ts
@@ -22,8 +22,8 @@ export const componentsFromParams = (
   if (typeof subcomponents === 'string') {
     result.push(subcomponents);
   }
-  if (subcomponents) {
-    console.log(subcomponents);
+  if (typeof subcomponents === 'object') {
+    Object.keys(subcomponents).forEach(key => result.push(subcomponents[key]));
   }
   return result;
 };
diff --git a/core/instrument/test/__snapshots__/csf-components.test.ts.snap b/core/instrument/test/__snapshots__/csf-components.test.ts.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-components default-import.js 1`] = `
+Object {
+  "components": Object {
+    "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js": Object {
+      "from": "../../components/button-default-arrow-func",
+      "importedName": "default",
+      "name": "Button",
+      "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
+    },
+  },
+  "kinds": Object {
+    "Story": Object {
+      "component": "Button",
+      "components": Object {
+        "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
+      },
+      "title": "Story",
+    },
+  },
+  "stories": Object {},
+}
+`;
+
+exports[`csf-components subcomponents.js 1`] = `
+Object {
+  "components": Object {
+    "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js": Object {
+      "from": "../../components/button-default-arrow-func",
+      "importedName": "default",
+      "name": "ArrowButton",
+      "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
+    },
+  },
+  "kinds": Object {
+    "Story": Object {
+      "component": "ArrowButton",
+      "components": Object {
+        "ArrowButton": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
+        "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
+      },
+      "subcomponents": Object {
+        "Button": "Button",
+      },
+      "title": "Story",
+    },
+  },
+  "stories": Object {},
+}
+`;
diff --git a/core/instrument/test/__snapshots__/csf-toggle.test.ts.snap b/core/instrument/test/__snapshots__/csf-toggle.test.ts.snap
@@ -8,7 +8,6 @@ Object {
       "importedName": "Toggle",
       "loc": undefined,
       "name": "Toggle",
-      "repository": undefined,
       "request": undefined,
       "source": undefined,
     },

diff --git a/core/instrument/test/__snapshots__/extract-component.test.ts.snap b/core/instrument/test/__snapshots__/extract-component.test.ts.snap
@@ -4,49 +4,27 @@ exports[`extract-component default-alias-import.js 1`] = `
 Object {
   "from": "../components/button-default-class-export",
   "importedName": "namespace",
-  "loc": Object {
-    "end": Object {
-      "column": 1,
-      "line": 7,
-    },
-    "start": Object {
-      "column": 37,
-      "line": 3,
-    },
-  },
   "name": "Button",
   "repository": Object {
     "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/components/button-default-class-export.js",
     "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
     "issues": "https://github.com/ccontrols/component-controls/issues",
   },
   "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-class-export.js",
-  "source": undefined,
 }
 `;
 
 exports[`extract-component default-import.js 1`] = `
 Object {
   "from": "../components/button-default-arrow-func",
   "importedName": "default",
-  "loc": Object {
-    "end": Object {
-      "column": 65,
-      "line": 3,
-    },
-    "start": Object {
-      "column": 24,
-      "line": 3,
-    },
-  },
   "name": "Button",
   "repository": Object {
     "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/components/button-default-arrow-func.js",
     "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
     "issues": "https://github.com/ccontrols/component-controls/issues",
   },
   "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
-  "source": undefined,
 }
 `;
 
@@ -60,147 +38,86 @@ exports[`extract-component named-alias-import.js 1`] = `
 Object {
   "from": "../components/button-named-arrow-func",
   "importedName": "Btn",
-  "loc": undefined,
   "name": "Button",
-  "repository": undefined,
   "request": undefined,
-  "source": undefined,
 }
 `;
 
 exports[`extract-component named-import.js 1`] = `
 Object {
   "from": "../components/button-named-class",
   "importedName": "Button",
-  "loc": Object {
-    "end": Object {
-      "column": 1,
-      "line": 7,
-    },
-    "start": Object {
-      "column": 44,
-      "line": 3,
-    },
-  },
   "name": "Button",
   "repository": Object {
     "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/components/button-named-class.js",
     "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
     "issues": "https://github.com/ccontrols/component-controls/issues",
   },
   "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-class.js",
-  "source": undefined,
 }
 `;
 
 exports[`extract-component node-modules.js 1`] = `
 Object {
   "from": "theme-ui",
   "importedName": "Button",
-  "loc": Object {
-    "end": Object {
-      "column": 2,
-      "line": 26,
-    },
-    "start": Object {
-      "column": 22,
-      "line": 4,
-    },
-  },
   "name": "Button",
   "repository": Object {
     "browse": "https://github.com/system-ui/theme-ui/tree/master/dist/index.js",
     "docs": "https://github.com/system-ui/theme-ui/tree/master#readme",
     "issues": "https://github.com/system-ui/theme-ui/issues",
   },
   "request": "/Users/atanasster/component-controls/node_modules/@theme-ui/components/src/Button.js",
-  "source": undefined,
 }
 `;
 
 exports[`extract-component node-modules-source.js 1`] = `
 Object {
   "from": "@component-controls/components",
   "importedName": "Subtitle",
-  "loc": Object {
-    "end": Object {
-      "column": 1,
-      "line": 104,
-    },
-    "start": Object {
-      "column": 23,
-      "line": 91,
-    },
-  },
   "name": "Button",
   "repository": Object {
     "browse": "https://github.com/ccontrols/component-controls/tree/master/ui/components/dist/index.js",
     "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
     "issues": "https://github.com/ccontrols/component-controls/issues",
   },
   "request": "/Users/atanasster/component-controls/node_modules/@component-controls/components/dist/index.js",
-  "source": undefined,
 }
 `;
 
 exports[`extract-component non-existing-file.js 1`] = `
 Object {
   "from": "./Button",
   "importedName": "Btn",
-  "loc": undefined,
   "name": "Button",
-  "repository": undefined,
   "request": undefined,
-  "source": undefined,
 }
 `;
 
 exports[`extract-component parameters-component.js 1`] = `
 Object {
   "from": "../components/button-named-arrow-func",
   "importedName": "Button",
-  "loc": Object {
-    "end": Object {
-      "column": 72,
-      "line": 3,
-    },
-    "start": Object {
-      "column": 31,
-      "line": 3,
-    },
-  },
   "name": "Button",
   "repository": Object {
     "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/components/button-named-arrow-func.js",
     "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
     "issues": "https://github.com/ccontrols/component-controls/issues",
   },
   "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js",
-  "source": undefined,
 }
 `;
 
 exports[`extract-component story-component.js 1`] = `
 Object {
   "from": "../components/button-named-class",
   "importedName": "Button",
-  "loc": Object {
-    "end": Object {
-      "column": 1,
-      "line": 7,
-    },
-    "start": Object {
-      "column": 44,
-      "line": 3,
-    },
-  },
   "name": "Button",
   "repository": Object {
     "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/components/button-named-class.js",
     "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
     "issues": "https://github.com/ccontrols/component-controls/issues",
   },
   "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-class.js",
-  "source": undefined,
 }
 `;
diff --git a/core/instrument/test/__snapshots__/mdx-component.test.ts.snap b/core/instrument/test/__snapshots__/mdx-component.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`mdx-component component-parameters.mdx 1`] = `
 Object {
   "components": Object {
-    "/Users/atanasster/component-controls/core/instrument/test/fixtures/mdx/component/component-parameters.mdx": Object {
+    "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js": Object {
       "from": "../../components/button-named-arrow-func",
       "importedName": "Button",
       "loc": Object {
@@ -34,7 +34,7 @@ export const Button = props => <button>{\`Hello, \${props.name}\`}</button>;
     "Storybook/MDX": Object {
       "component": "Button",
       "components": Object {
-        "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/mdx/component/component-parameters.mdx",
+        "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js",
       },
       "repository": Object {
         "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/mdx/component/component-parameters.mdx",
@@ -62,7 +62,6 @@ Object {
       "importedName": "Btn",
       "loc": undefined,
       "name": "Button",
-      "repository": undefined,
       "request": undefined,
       "source": undefined,
     },
@@ -97,7 +96,6 @@ Object {
       "importedName": "Btn",
       "loc": undefined,
       "name": "Button",
-      "repository": undefined,
       "request": undefined,
       "source": undefined,
     },