WIP

addons/docs/src/blocks/Meta.tsx

@@ -18,7 +18,7 @@ function getFirstStoryId(docsContext: DocsContextProps): string {
 
 function renderAnchor() {
   const context = useContext(DocsContext);
-  if (context.type !== 'legacy') {
+  if (context.type === 'external') {
     return null;
   }
   const anchorId = getFirstStoryId(context) || context.id;

lib/preview-web/src/Preview.tsx

@@ -26,8 +26,8 @@ import {
   RenderToDOM,
 } from '@storybook/store';
 
-import { StoryRender } from './StoryRender';
-import { DocsRender } from './DocsRender';
+import { StoryRender } from './render/StoryRender';
+import { AbstractDocsRender } from './render/AbstractDocsRender';
 
 const { fetch } = global;
 
@@ -324,7 +324,7 @@ export class Preview<TFramework extends AnyFramework> {
   }
 
   async teardownRender(
-    render: StoryRender<TFramework> | DocsRender<TFramework>,
+    render: StoryRender<TFramework> | AbstractDocsRender<TFramework>,
     { viewModeChanged }: { viewModeChanged?: boolean } = {}
   ) {
     this.storyRenders = this.storyRenders.filter((r) => r !== render);

lib/preview-web/src/PreviewWeb.tsx

@@ -35,8 +35,9 @@ import { Preview } from './Preview';
 
 import { UrlStore } from './UrlStore';
 import { WebView } from './WebView';
-import { PREPARE_ABORTED, Render, StoryRender } from './StoryRender';
-import { DocsRender } from './DocsRender';
+import { PREPARE_ABORTED, StoryRender } from './render/StoryRender';
+import { TemplateDocsRender } from './render/TemplateDocsRender';
+import { StandaloneDocsRender } from './render/StandaloneDocsRender';
 
 const { window: globalWindow } = global;
 
@@ -46,6 +47,16 @@ function focusInInput(event: Event) {
 }
 
 type MaybePromise<T> = Promise<T> | T;
+type PossibleRender<TFramework extends AnyFramework> =
+  | StoryRender<TFramework>
+  | TemplateDocsRender<TFramework>
+  | StandaloneDocsRender<TFramework>;
+
+function isStoryRender<TFramework extends AnyFramework>(
+  r: PossibleRender<TFramework>
+): r is StoryRender<TFramework> {
+  return r.type === 'story';
+}
 
 export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramework> {
   urlStore: UrlStore;
@@ -56,7 +67,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
 
   currentSelection?: Selection;
 
-  currentRender?: StoryRender<TFramework> | DocsRender<TFramework>;
+  currentRender?: PossibleRender<TFramework>;
 
   constructor() {
     super();
@@ -217,21 +228,10 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
 
   async onUpdateGlobals({ globals }: { globals: Globals }) {
     super.onUpdateGlobals({ globals });
-
-    if (this.currentRender instanceof DocsRender) await this.currentRender.rerender();
   }
 
   async onUpdateArgs({ storyId, updatedArgs }: { storyId: StoryId; updatedArgs: Args }) {
     super.onUpdateArgs({ storyId, updatedArgs });
-
-    // NOTE: we aren't checking to see the story args are targetted at the "right" story.
-    // This is because we may render >1 story on the page and there is no easy way to keep track
-    // of which ones were rendered by the docs page.
-    // However, in `modernInlineRender`, the individual stories track their own events as they
-    // each call `renderStoryToElement` below.
-    if (this.currentRender instanceof DocsRender) {
-      await this.currentRender.rerender();
-    }
   }
 
   async onPreloadStories(ids: string[]) {
@@ -261,15 +261,12 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
       return;
     }
 
-    // Docs entries cannot be rendered in 'story' viewMode.
-    // For now story entries can be rendered in docs mode.
-    const viewMode = (entry?.type === 'docs' ? 'docs' : selection.viewMode) || 'story';
-
     const storyIdChanged = this.currentSelection?.storyId !== storyId;
-    const viewModeChanged = this.currentSelection?.viewMode !== viewMode;
+    // FIXME: suspect line
+    const viewModeChanged = this.currentRender?.type !== entry.type;
 
     // Show a spinner while we load the next story
-    if (viewMode === 'story') {
+    if (entry.type === 'story') {
       this.view.showPreparingStory({ immediate: viewModeChanged });
     } else {
       this.view.showPreparingDocs();
@@ -285,8 +282,8 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
       await this.teardownRender(this.currentRender);
     }
 
-    let render;
-    if (viewMode === 'story') {
+    let render: PossibleRender<TFramework>;
+    if (entry.type === 'story') {
       render = new StoryRender<TFramework>(
         this.channel,
         this.storyStore,
@@ -299,8 +296,10 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
         storyId,
         'story'
       );
+    } else if (entry.standalone) {
+      render = new StandaloneDocsRender<TFramework>(this.channel, this.storyStore, entry);
     } else {
-      render = new DocsRender<TFramework>(this.channel, this.storyStore, entry);
+      render = new TemplateDocsRender<TFramework>(this.channel, this.storyStore, entry);
     }
 
     // We need to store this right away, so if the story changes during
@@ -324,7 +323,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
     }
     const implementationChanged = !storyIdChanged && lastRender && !render.isEqual(lastRender);
 
-    if (persistedArgs && entry.type !== 'docs') {
+    if (persistedArgs && isStoryRender(render)) {
       if (!render.story) throw new Error('Render has not been prepared!');
       this.storyStore.args.updateFromPersisted(render.story, persistedArgs);
     }
@@ -352,7 +351,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
       this.channel.emit(STORY_CHANGED, storyId);
     }
 
-    if (entry.type !== 'docs') {
+    if (isStoryRender(render)) {
       if (!render.story) throw new Error('Render has not been prepared!');
       const { parameters, initialArgs, argTypes, args } = this.storyStore.getStoryContext(
         render.story
@@ -376,17 +375,17 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
       }
     }
 
-    if (viewMode === 'docs') {
-      this.currentRender.renderToElement(
-        this.view.prepareForDocs(),
-        this.renderStoryToElement.bind(this)
-      );
-    } else {
+    if (isStoryRender(render)) {
       if (!render.story) throw new Error('Render has not been prepared!');
       this.storyRenders.push(render as StoryRender<TFramework>);
       (this.currentRender as StoryRender<TFramework>).renderToElement(
         this.view.prepareForStory(render.story)
       );
+    } else {
+      this.currentRender.renderToElement(
+        this.view.prepareForDocs(),
+        this.renderStoryToElement.bind(this)
+      );
     }
   }
 
@@ -418,7 +417,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
   }
 
   async teardownRender(
-    render: Render<TFramework>,
+    render: PossibleRender<TFramework>,
     { viewModeChanged = false }: { viewModeChanged?: boolean } = {}
   ) {
     this.storyRenders = this.storyRenders.filter((r) => r !== render);