hot reload context vars

Author: junzyx

.changeset/serious-months-report.md

@@ -0,0 +1,5 @@
+---
+"htmldocs": patch
+---
+
+hot reload context vars

packages/htmldocs/src/app/actions/get-document-schema.ts

@@ -0,0 +1,27 @@
+"use server";
+
+import path from 'node:path';
+import fs from 'node:fs';
+import { DOCUMENT_SCHEMAS_DIR } from '../../utils/paths';
+import { JSONSchema7Definition } from 'json-schema';
+import logger from '~/lib/logger';
+
+export async function getDocumentSchema(documentPath: string): Promise<JSONSchema7Definition | null> {
+  const baseName = path.basename(documentPath, path.extname(documentPath));
+  const schemaPath = path.join(
+    DOCUMENT_SCHEMAS_DIR,
+    baseName,
+    `${baseName}.schema.json`
+  );
+  
+  try {
+    if (fs.existsSync(schemaPath)) {
+      const rawSchema = JSON.parse(await fs.promises.readFile(schemaPath, 'utf-8'));
+      return rawSchema?.definitions?.ComponentProps || null;
+    }
+  } catch (error) {
+    logger.warn('Failed to load schema:', error);
+  }
+  
+  return null;
+} 

packages/htmldocs/src/app/contexts/documents.tsx

@@ -13,6 +13,8 @@ import { getDocumentPathFromSlug } from "~/actions/get-document-path-from-slug";
 import { renderDocumentToPDF, RenderDocumentToPDFProps } from "~/actions/render-document-to-pdf";
 import { PageConfig } from "~/lib/types";
 import logger from "~/lib/logger";
+import { JSONSchema7Definition } from "json-schema";
+import { getDocumentSchema } from "~/actions/get-document-schema";
 
 const DocumentsContext = createContext<
   | {
@@ -27,6 +29,7 @@ const DocumentsContext = createContext<
       renderDocumentToPDF: ({ url, ...props }: RenderDocumentToPDFProps) => Promise<Buffer | Error>;
       pageConfigs: Record<string, PageConfig>;
       setPageConfig: (documentPath: string, config: PageConfig) => void;
+      documentSchemas: Record<string, JSONSchema7Definition>;
     }
   | undefined
 >(undefined);
@@ -54,6 +57,7 @@ export const DocumentsProvider = (props: {
     useState<Record<string, DocumentRenderingResult>>({});
 
   const [pageConfigs, setPageConfigs] = useState<Record<string, PageConfig>>({});
+  const [documentSchemas, setDocumentSchemas] = useState<Record<string, JSONSchema7Definition>>({});
 
   const setPageConfig = (documentPath: string, config: PageConfig) => {
     setPageConfigs(prev => ({
@@ -62,6 +66,20 @@ export const DocumentsProvider = (props: {
     }));
   };
 
+  const loadSchema = async (documentPath: string) => {
+    try {
+      const schema = await getDocumentSchema(documentPath);
+      if (schema) {
+        setDocumentSchemas(prev => ({
+          ...prev,
+          [documentPath]: schema
+        }));
+      }
+    } catch (error) {
+      logger.warn('Failed to load schema:', error);
+    }
+  };
+
   if (process.env.NEXT_PUBLIC_IS_BUILDING !== "true") {
     // this will not change on runtime so it doesn't violate
     // the rules of hooks
@@ -112,6 +130,9 @@ export const DocumentsProvider = (props: {
             ...map,
             [pathForChangedDocument]: renderingResult,
           }));
+
+          // Load or reload schema for the changed document
+          await loadSchema(pathForChangedDocument);
         }
       }
     });
@@ -149,6 +170,7 @@ export const DocumentsProvider = (props: {
         renderDocumentToPDF,
         pageConfigs,
         setPageConfig,
+        documentSchemas,
       }}
     >
       {props.children}

packages/htmldocs/src/app/preview/[...slug]/page.tsx

@@ -1,14 +1,13 @@
 import { Suspense } from 'react';
 import path from 'node:path';
-import fs from 'node:fs';
 import { redirect } from 'next/navigation';
 import { getDocumentPathFromSlug } from '~/actions/get-document-path-from-slug';
 import { getDocumentsDirectoryMetadata } from '~/actions/get-documents-directory-metadata';
 import { renderDocumentByPath } from '~/actions/render-document-by-path';
 import { documentsDirectoryAbsolutePath } from '../../../utils/documents-directory-absolute-path';
 import Home from '../../page';
 import Preview from './preview';
-import { DOCUMENT_SCHEMAS_DIR } from '../../../utils/paths';
+import { getDocumentSchema } from '~/actions/get-document-schema';
 
 export const dynamicParams = true;
 
@@ -46,24 +45,7 @@ This is most likely not an issue with the preview server. Maybe there was a typo
     throw exception;
   }
 
-  // Load schema if it exists
-  const baseName = path.basename(documentPath, path.extname(documentPath));
-  const schemaPath = path.join(
-    DOCUMENT_SCHEMAS_DIR,
-    baseName,
-    `${baseName}.schema.json`
-  );
-  
-  let schema = null;
-  try {
-    if (fs.existsSync(schemaPath)) {
-      const rawSchema = JSON.parse(await fs.promises.readFile(schemaPath, 'utf-8'));
-      schema = rawSchema?.definitions?.ComponentProps || null;
-    }
-  } catch (error) {
-    console.warn('Failed to load schema:', error);
-  }
-
+  const schema = await getDocumentSchema(documentPath);
   const documentRenderingResult = await renderDocumentByPath(documentPath);
 
   if (

packages/htmldocs/src/app/preview/[...slug]/preview.tsx

@@ -28,20 +28,22 @@ const Preview = ({
   documentPath,
   pathSeparator,
   renderingResult: initialRenderingResult,
-  schema,
+  schema: initialSchema,
 }: PreviewProps) => {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
   const activeView = searchParams.get('view') ?? 'desktop';
-  const { useDocumentRenderingResult, setPageConfig } = useDocuments();
+  const { useDocumentRenderingResult, setPageConfig, documentSchemas } = useDocuments();
 
   const renderingResult = useDocumentRenderingResult(
     documentPath,
     initialRenderingResult,
   );
 
+  const schema = documentSchemas[documentPath] || initialSchema;
+
   const renderedDocumentMetadata = useRenderingMetadata(
     documentPath,
     renderingResult,