Addon-docs: Refactor DocsRender/Context

[tmeasday]

Telescoping on #18634

What I did

Refactored DocsContextProps to be a little bit simpler, and much more consistently implemented across the three different docs contexts:

• Standalone - .mdx files that may have a primary CSF file (<Meta of={}>) as well as reference others (<Story ... meta={}>)
• Template - *.stories.mdx files or docs page entries that are attached to one (or more, in the case of component stories spread across CSF files) CSF files. (NOTE this is the legacy case)
• External - similar to Standalone, but running in an external system.

The APIs available to doc blocks are backwards compatible, with the following changes:

• storyById can now be called with no parameters to get the primary story. This is preferred (and the blocks are changed) as the context.id may not be a story id in the standalone or external case.
• mdxStoryNameToKey/mdxComponentAnnotations are no longer defined. There is a new API available, context.storyIdByName that serves the same purpose. It is used by our blocks to get ids for MDX defined stories. This is a breaking change, however I am not sure if it was ever used externally.

Now that the MDX compilers don't need to append mdxStoryNameToKey/mdxComponentAnnotations any more, there's no need for the AddContext utility either. I've got a task to do this cleanup later: https://linear.app/chromaui/issue/SB-465/remove-call-to-addtemplate-from-mdx-generators

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit b50523d. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel=8 --max-parallel=15 -- --reset --optimized

---

Sent with 💌 from NxCloud.

[tmeasday]

This was duplicated from the super class, I think from a merge conflict.

[tmeasday]

@ndelangen I got a flaky test run: https://app.circleci.com/pipelines/github/storybookjs/storybook/27512/workflows/ea52cb29-f334-4cb2-9192-f7c8df1c1bf6/jobs/394112

I tracked down the issue -- the problem is the project react_legacy_root_api, which sets (in main.js):

reactOptions: {
  legacyRootApi: true,
},

No longer gets FRAMEWORK_OPTIONS set in the preview, which means it renders in react 18 mode, which makes this test flaky. I'll discuss the flakiness below. But @ndelangen I assume the lack of globals in the preview is due to changes in setup that you might know about?

---

Regarding the flakiness. The reason is that the new react-dom/client API no longer has a "done" callback, so now we have a simple setTimeout(,0) before assuming the story is rendered:

storybook/renderers/react/src/render.tsx

Lines 42 to 44 in 849cfca

	setTimeout(() => {
	resolve(null);
	}, 0);

@valentinpalkovic I think we are going to need to come up with a better solution than that. The problem is that our "storybook hooks" that e.g. run inside the JSX decorator rely on the current story still being in the "render" phase at the time the hook is called to work properly.

[ndelangen]

@tmeasday I don't see why that config/setting would be missing. That code didn't change AFAIK, the code is here:

storybook/lib/builder-webpack5/src/preview/iframe-webpack.config.ts

Lines 206 to 218 in 5683419

	globals: {
	CONFIG_TYPE: configType,
	LOGLEVEL: logLevel,
	FRAMEWORK_OPTIONS: frameworkOptions,
	CHANNEL_OPTIONS: coreOptions.channelOptions,
	FEATURES: features,
	PREVIEW_URL: previewUrl,
	STORIES: stories.map((specifier) => ({
	...specifier,
	importPathMatcher: specifier.importPathMatcher.source,
	})),
	SERVER_CHANNEL_URL: serverChannelUrl,
	},

[ndelangen]

So that might mean getting the value coming from preset changed somehow.. I'm investigating.

[ndelangen]

I figured it out... opening PR soon

[shilman]

Nice one 🙌