feat: added moduleid logic for __webpack_require__

ccontrols · Mar 15, 2020 · 7c97c9f · 7c97c9f
1 parent d11cbe6
commit 7c97c9f
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 9 deletions.
diff --git a/core/loader/src/loader.ts b/core/loader/src/loader.ts
@@ -16,6 +16,8 @@ module.exports.default = async function(source: string) {
 
   const store: StoriesStore = await parseStories(source, filePath, options);
   if (store) {
+    const relPath = path.relative(context.rootContext, context.resourcePath);
+    const moduleId = relPath.startsWith('.') ? relPath : `./${relPath}`;
     const time = new Date();
     const fileName = path.join(__dirname, 'story-store-data.js');
     fs.utimesSync(fileName, time, time);
@@ -28,9 +30,7 @@ module.exports.default = async function(source: string) {
           ...acc,
           [key]: {
             ...store.kinds[key],
-            request: require.resolve(
-              path.relative(__dirname, context.resourcePath),
-            ),
+            moduleId: moduleId,
           },
         }),
         {},

diff --git a/core/loader/src/story-store-data.ts b/core/loader/src/story-store-data.ts
@@ -1,5 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/camelcase */
 import { StoriesStore, Story } from '@component-controls/specification';
+import deepMerge from 'deepmerge';
 import { toId, storyNameFromExport } from '@storybook/csf';
 const injectedStories = '__STORIES_HASH__INJECTED_STORIES__';
 
@@ -22,19 +24,46 @@ const loadStoryStore = (): StoriesStore | undefined => {
           if (Object.keys(store.kinds).length > 0) {
             Object.keys(store.kinds).forEach(kindName => {
               const kind = store.kinds[kindName];
-              /*
-              if (kind.request) {
+
+              if (kind.moduleId) {
                 try {
-                  const exports = require(kind.request);
-                  console.log(exports);
+                  // './src/stories/smart-prop-type.stories.js'
+                  const exports = __webpack_require__(kind.moduleId);
+                  Object.keys(exports).forEach(key => {
+                    const exported = exports[key];
+                    if (key === 'default') {
+                      const { storySource, ...rest } = exported;
+                      Object.assign(kind, rest);
+                    } else {
+                      const story = store.stories[key];
+                      if (story) {
+                        story.renderFn = exported;
+                        if (exported.story) {
+                          Object.assign(story, exported.story);
+                        }
+                      }
+                    }
+                  });
                 } catch (e) {
-                  console.log(e);
+                  console.error(`unable to load module ${kind.moduleId}`);
                 }
               }
-              */
               globalStore.kinds[kindName] = kind;
               Object.keys(store.stories).forEach(storyName => {
                 const story: Story = store.stories[storyName];
+                const {
+                  title,
+                  stories,
+                  source,
+                  component,
+                  fileName,
+                  repository,
+                  components,
+                  excludeStories,
+                  includeStories,
+                  ...rest
+                } = kind;
+                Object.assign(story, deepMerge(rest, story));
                 if (kind.title && story.name) {
                   const id = toId(kind.title, storyNameFromExport(story.name));
                   if (!kind.stories) {

diff --git a/core/specification/src/stories.ts b/core/specification/src/stories.ts
@@ -78,10 +78,16 @@ export interface Story {
    * title of the file/group of stories
    */
   kind?: string;
+
+  /**
+   * render function for the story
+   */
+  renderFn?: (controls: { [key: string]: any; context: any }) => any;
   /**
    * arguments pass to a CSF story
    * eg `export const story = props => <Story {...props} />;`
    */
+
   arguments?: StoryArguments;
   /**
    * configuration parameters passed to the story - either CSF or MDX

diff --git a/ui/blocks/src/BlocksContext/BlockContext.tsx b/ui/blocks/src/BlocksContext/BlockContext.tsx
@@ -84,6 +84,7 @@ export const useControlsContext = ({
       ? myStoryStore.components[kind.components[componentName]]
       : undefined;
   const sbStory = (storyStore && storyStore.fromId(previewId)) || {};
+  console.log(kind, story);
   return {
     id: previewId,
     api,