@terrafirmagreg-team/mdx 1.2.10 → 1.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrafirmagreg-team/mdx",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "type": "module",
   "description": "MDX/markdown pipeline",
   "license": "LGPL-3.0-only",
@@ -20,8 +20,8 @@
     "./lib/markdown": "./src/lib/markdown/index.ts"
   },
   "dependencies": {
-    "@terrafirmagreg-team/translate": "^1.2.10",
-    "@terrafirmagreg-team/ui": "^1.2.13",
+    "@terrafirmagreg-team/translate": "^1.2.11",
+    "@terrafirmagreg-team/ui": "^1.2.16",
     "fumadocs-docgen": "^3.2.0",
     "fumadocs-twoslash": "^4.0.4",
     "fumadocs-typescript": "5.6.0",

package/src/components/mdx-story.tsx

@@ -1,8 +1,22 @@
 'use client';
 
-import { storyFor } from '../lib/story';
+import { useEffect, useState } from 'react';
+import { ensureStories, storyFor } from '../lib/story-registry';
+import type { Story } from '@fumadocs/story/next/client';
 
 export function MdxStory({ name }: { name?: string }) {
-  const entry = name ? storyFor(name) : undefined;
-  return entry ? <entry.WithControl /> : null;
+  const [story, setStory] = useState<Story | undefined>(() =>
+    name ? storyFor(name) : undefined,
+  );
+  useEffect(() => {
+    if (story || !name) return;
+    let live = true;
+    void ensureStories().then(() => {
+      if (live) setStory(storyFor(name));
+    });
+    return () => {
+      live = false;
+    };
+  }, [name, story]);
+  return story ? <story.WithControl /> : null;
 }

package/src/lib/story-registry.ts

@@ -0,0 +1,28 @@
+import type { Story } from '@fumadocs/story/next/client';
+
+const registry = ((globalThis as Record<symbol, unknown>)[
+  Symbol.for('terrafirmagreg.mdx.stories')
+] ??= {}) as Record<string, Story>;
+
+const state = ((globalThis as Record<symbol, unknown>)[
+  Symbol.for('terrafirmagreg.mdx.storyLoader')
+] ??= {}) as {
+  load?: () => Promise<unknown>;
+  loaded?: Promise<unknown>;
+};
+
+export function registerStory(name: string, story: Story): void {
+  registry[name] = story;
+}
+
+export function storyFor(name: string): Story | undefined {
+  return registry[name];
+}
+
+export function registerStoryLoader(load: () => Promise<unknown>): void {
+  state.load = load;
+}
+
+export function ensureStories(): Promise<unknown> {
+  return (state.loaded ??= state.load?.() ?? Promise.resolve());
+}

package/src/lib/story-remark.ts

@@ -402,7 +402,7 @@ const DIRECTIVE_META: Record<string, DirectiveMeta> = {
     remark: false,
     props: ['url', 'section', 'dataset', 'slug', 'lang', 'version'],
     descriptions: {
-      url: 'Page or image.png URL — overrides the fields below',
+      url: 'Page or image.webp URL — overrides the fields below',
       section: 'Site section the page belongs to',
       dataset: 'Dataset id within the section',
       slug: 'Page path inside the dataset, e.g. getting-started/install',

package/src/lib/story.ts

@@ -6,6 +6,7 @@ import type {
   StoryOptions,
 } from '@fumadocs/story/next/client';
 import { DocsWithControl } from '../components/story-panel';
+import { registerStory } from './story-registry';
 import type { ComponentType } from 'react';
 
 export { useStory } from '@fumadocs/story';
@@ -16,19 +17,10 @@ const factory = defineStoryFactory({
   WithControl: DocsWithControl,
 });
 
-const registry = ((globalThis as Record<symbol, unknown>)[
-  Symbol.for('terrafirmagreg.mdx.stories')
-] ??= {}) as Record<string, Story>;
-
 export function defineStory<C extends ComponentType<any>>(
   options: StoryOptions<C>,
 ): Story<C> {
   const story = factory.defineStory(options);
-  if (options.displayName)
-    registry[options.displayName] = story as Story;
+  if (options.displayName) registerStory(options.displayName, story as Story);
   return story;
 }
-
-export function storyFor(name: string): Story | undefined {
-  return registry[name];
-}