@terrafirmagreg-team/mdx 1.2.9 → 1.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrafirmagreg-team/mdx",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "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.9",
-    "@terrafirmagreg-team/ui": "^1.2.12",
+    "@terrafirmagreg-team/translate": "^1.2.11",
+    "@terrafirmagreg-team/ui": "^1.2.15",
     "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/md-plugins.ts

@@ -54,7 +54,7 @@ const rehypeCodeOptions = {
 };
 
 export const mdOptions = (
-  datasetConfig: Record<string, { repo?: string }> = {},
+  datasetConfig: Record<string, { github?: { repo?: string } }> = {},
 ) => ({
   mdOptions: {
     remarkImageOptions: { onError: 'ignore' },

package/src/lib/mdx/github-autolinks.ts

@@ -25,7 +25,7 @@ const DEFAULT_PATHS = [
 ];
 
 export function remarkGithubAutolinks(options: {
-  datasetConfig?: Record<string, { repo?: string }>;
+  datasetConfig?: Record<string, { github?: { repo?: string } }>;
   paths?: RegExp[];
 } = {}) {
   const { datasetConfig = {}, paths = DEFAULT_PATHS } = options;
@@ -34,7 +34,7 @@ export function remarkGithubAutolinks(options: {
     const pack = paths
       .map((pattern) => pattern.exec(filePath)?.[1])
       .find(Boolean);
-    const repo = pack ? datasetConfig[pack]?.repo : undefined;
+    const repo = pack ? datasetConfig[pack]?.github?.repo : undefined;
     if (!repo) return;
     const repoUrl = `https://github.com/${repo}`;
     const visit = (node: MdastNode) => {

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.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];
-}