fix: handle of="." in MDX

ccontrols · Jul 9, 2020 · 98cbb2d · 98cbb2d
1 parent aaab6c3
commit 98cbb2d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/core/instrument/src/babel/mdx-stories.ts b/core/instrument/src/babel/mdx-stories.ts
@@ -49,7 +49,12 @@ export const extractMDXStories = (props: any) => (
   const collectComponent = (attributes: any) => {
     const attrComponents = componentsFromParams(attributes);
     components = attrComponents.reduce(
-      (acc, componentName) => ({ ...acc, [componentName]: undefined }),
+      (acc, componentName) => ({
+        ...acc,
+        [componentName === '.' && store.doc
+          ? (store.doc.component as string)
+          : componentName]: undefined,
+      }),
       components,
     );
     return attrComponents.length > 0 ? attrComponents[0] : undefined;

diff --git a/ui/blocks/src/context/block/BlockDataContext.tsx b/ui/blocks/src/context/block/BlockDataContext.tsx
@@ -117,21 +117,25 @@ export const BlockDataContextProvider: React.FC<BlockDataContextInoutProps> = ({
   const getComponents = (
     components: { [key: string]: any } | undefined,
     doc: Document | undefined,
-  ): StoryComponents =>
-    store && doc && components
+  ): StoryComponents => {
+    return store && doc && components
       ? Object.keys(components).reduce((acc, key) => {
-          const name = getComponentName(components[key]);
-          const component =
-            name &&
-            doc?.componentsLookup[name] &&
-            store?.components[doc.componentsLookup[name]];
-          if (component) {
-            return { ...acc, [key]: component };
-          } else {
-            return acc;
+          const comp = components[key];
+          const name = getComponentName(
+            comp === CURRENT_STORY ? doc.component : comp,
+          );
+          if (name) {
+            const component =
+              doc?.componentsLookup[name] &&
+              store?.components[doc.componentsLookup[name]];
+            if (component) {
+              return { ...acc, [key]: component };
+            }
           }
+          return acc;
         }, {})
       : {};
+  };
 
   const storyIdFromName = (name: string): string | undefined => {
     if (store) {

diff --git a/ui/blocks/src/context/components/ComponentsContext.tsx b/ui/blocks/src/context/components/ComponentsContext.tsx
@@ -60,14 +60,8 @@ export const useComponentsContext = ({
       removeObserver(onChange);
     };
   }, [docId, storyId, addObserver, getStoryData, removeObserver]);
-
-  if (!story) {
-    return {
-      components: {},
-    };
-  }
   let components: StoryComponents = {};
-  if (of === CURRENT_STORY) {
+  if (of === CURRENT_STORY && story) {
     if (component) {
       const name = getComponentName(component);
       if (name) {