fix(docs): fix SSR of examples

packages/docs/dev/generateLiveCodeEditorGlobalImports.ts

@@ -33,13 +33,15 @@ async function generateImportMappings(pattern: string, outputPath: string) {
   const imports = mapImports(fileContents.flatMap(extractRawImports));
 
   const importStatements = Object.entries(imports).map(
-    ([key, value]) => `"${key}": () => import("${value}"),`,
+    ([key, value]) =>
+      `"${key}": dynamic(() => import("${value}"), { ssr: true }),`,
   );
 
   const generatedFileContents = `
 /* eslint-disable */
 /* auto-generated file */
 import { ImportMapping } from "@/lib/LiveCodeEditor/types";
+import dynamic from "next/dynamic";
 
 export const liveCodeEditorGlobalImports: ImportMapping = {
   ${importStatements.join("\r\n")}
@@ -57,5 +59,5 @@ export const liveCodeEditorGlobalImports: ImportMapping = {
 
 void generateImportMappings(
   "./src/docs/**/examples/*.tsx",
-  "./src/lib/liveCodeEditorGlobalImports.ts",
+  "./src/lib/LiveCodeEditor/dynamicImports.ts",
 );

packages/docs/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
+    "@mfalkenberg/react-live-ssr": "^4.1.7",
     "@mittwald/flow-next-components": "workspace:^",
     "@next/mdx": "^14.1.0",
     "@types/mdx": "^2.0.10",
@@ -29,7 +30,7 @@
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-live": "^4.1.5",
+    "react-stately": "^3.29.1",
     "remark-frontmatter": "^5.0.0",
     "remark-mdx-frontmatter": "^4.0.0",
     "remeda": "^1.38.0",

packages/docs/src/lib/LiveCodeEditor/component/LiveCodeEditor.tsx

@@ -1,6 +1,11 @@
 "use client";
 import React, { FC } from "react";
-import { LiveEditor, LiveError, LivePreview, LiveProvider } from "react-live";
+import {
+  LiveEditor,
+  LiveError,
+  LivePreview,
+  LiveProvider,
+} from "@mfalkenberg/react-live-ssr";
 import { extractEditorScope } from "@/lib/LiveCodeEditor/component/lib/extractEditorScope";
 import { LiveCodeEditorProps } from "@/lib/LiveCodeEditor/component/types";
 import extractDefaultExport from "@/lib/LiveCodeEditor/component/lib/extractDefaultExport";

packages/docs/src/lib/LiveCodeEditor/component/lib/extractEditorScope.ts

@@ -1,6 +1,6 @@
 import { getDynamicComponent } from "../../getDynamicComponent";
 import { ComponentProps } from "react";
-import { LiveProvider } from "react-live";
+import { LiveProvider } from "@mfalkenberg/react-live-ssr";
 import { extractRawImports } from "@/lib/LiveCodeEditor/extractImports";
 
 type Scope = ComponentProps<typeof LiveProvider>["scope"];

packages/docs/src/lib/LiveCodeEditor/dynamicImports.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+/* auto-generated file */
+import { ImportMapping } from "@/lib/LiveCodeEditor/types";
+import dynamic from "next/dynamic";
+
+export const liveCodeEditorGlobalImports: ImportMapping = {
+  "Link:@mittwald/flow-next-components/Link": dynamic(() => import("@mittwald/flow-next-components/Link"), { ssr: true }),
+"Button:@mittwald/flow-next-components/Button": dynamic(() => import("@mittwald/flow-next-components/Button"), { ssr: true }),
+};

packages/docs/src/lib/LiveCodeEditor/getDynamicComponent.ts

@@ -1,11 +1,9 @@
-import dynamic from "next/dynamic";
-import { liveCodeEditorGlobalImports } from "@/lib/LiveCodeEditor/liveCodeEditorGlobalImports";
+import { liveCodeEditorGlobalImports } from "@/lib/LiveCodeEditor/dynamicImports";
 import { ComponentType } from "react";
 
 export const getDynamicComponent = (name: string): ComponentType => {
   if (!(name in liveCodeEditorGlobalImports)) {
     throw new Error(`Could not find ${name} in generatedImports.`);
   }
-  const component = liveCodeEditorGlobalImports[name];
-  return dynamic(component, { ssr: false });
+  return liveCodeEditorGlobalImports[name];
 };

packages/docs/src/lib/LiveCodeEditor/types.ts

@@ -1,5 +1,3 @@
-import { Loader } from "next/dynamic";
+import { ComponentType } from "react";
 
-// eslint-disable-next-line
-type AnyLoader = Loader<any>;
-export interface ImportMapping extends Record<string, AnyLoader> {}
+export interface ImportMapping extends Record<string, ComponentType> {}

yarn.lock

@@ -3112,6 +3112,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mfalkenberg/react-live-ssr@npm:^4.1.7":
+  version: 4.1.7
+  resolution: "@mfalkenberg/react-live-ssr@npm:4.1.7"
+  dependencies:
+    prism-react-renderer: "npm:^2.0.6"
+    sucrase: "npm:^3.31.0"
+    use-editable: "npm:^2.3.3"
+  peerDependencies:
+    react: ">=18.0.0"
+    react-dom: ">=18.0.0"
+  checksum: 67df20d130a9d13c734baf314231f3998f120f847fbd13979e8efe91d09fad010f887672f1c9c7db0473b9e2f60ffc6c7b824bc8e232a44813160e93c0059934
+  languageName: node
+  linkType: hard
+
 "@microsoft/api-extractor-model@npm:7.28.3":
   version: 7.28.3
   resolution: "@microsoft/api-extractor-model@npm:7.28.3"
@@ -3242,6 +3256,7 @@ __metadata:
   dependencies:
     "@mdx-js/loader": "npm:^3.0.0"
     "@mdx-js/react": "npm:^3.0.0"
+    "@mfalkenberg/react-live-ssr": "npm:^4.1.7"
     "@mittwald/flow-next-components": "workspace:^"
     "@next/mdx": "npm:^14.1.0"
     "@types/mdx": "npm:^2.0.10"
@@ -3263,7 +3278,7 @@ __metadata:
     raw-loader: "npm:^4.0.2"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
-    react-live: "npm:^4.1.5"
+    react-stately: "npm:^3.29.1"
     remark-frontmatter: "npm:^5.0.0"
     remark-mdx-frontmatter: "npm:^4.0.0"
     remeda: "npm:^1.38.0"
@@ -19479,20 +19494,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-live@npm:^4.1.5":
-  version: 4.1.5
-  resolution: "react-live@npm:4.1.5"
-  dependencies:
-    prism-react-renderer: "npm:^2.0.6"
-    sucrase: "npm:^3.31.0"
-    use-editable: "npm:^2.3.3"
-  peerDependencies:
-    react: ">=18.0.0"
-    react-dom: ">=18.0.0"
-  checksum: 188448f53e7edf4834f0b24703bcba644cfa1ab64fc68fa50c944333f3b581035d363e8af8321c8b5a7bee17900b9cf48dca3e8c1288796a38d6a8c87a6d4c1d
-  languageName: node
-  linkType: hard
-
 "react-property@npm:2.0.2":
   version: 2.0.2
   resolution: "react-property@npm:2.0.2"