Refactored CMS packages to remove a circular dependency (#62)

packages/cms/keystatic/package.json

@@ -11,6 +11,7 @@
   "prettier": "@kit/prettier-config",
   "exports": {
     ".": "./src/index.ts",
+    "./renderer": "./src/content-renderer.tsx",
     "./admin": "./src/keystatic-admin.tsx",
     "./route-handler": "./src/keystatic-route-handler.ts"
   },
@@ -20,7 +21,7 @@
     "@markdoc/markdoc": "^0.4.0"
   },
   "devDependencies": {
-    "@kit/cms": "workspace:^",
+    "@kit/cms-types": "workspace:^",
     "@kit/eslint-config": "workspace:*",
     "@kit/prettier-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",

packages/cms/keystatic/src/create-keystatic-cms.ts

@@ -0,0 +1,37 @@
+import { CmsClient } from '@kit/cms-types';
+
+/**
+ * Creates a new Keystatic client instance.
+ */
+export async function createKeystaticClient() {
+  if (
+    process.env.NEXT_RUNTIME === 'nodejs' ||
+    process.env.KEYSTATIC_STORAGE_KIND !== 'local'
+  ) {
+    const { createKeystaticClient: createClient } = await import(
+      './keystatic-client'
+    );
+
+    return createClient();
+  }
+
+  console.error(
+    `[CMS] Keystatic client using "Local" mode is only available in Node.js runtime. Please choose a different CMS client. Returning a mock client instead of throwing an error.`,
+  );
+
+  return mockCMSClient() as unknown as CmsClient;
+}
+
+function mockCMSClient() {
+  return {
+    getContentItems() {
+      return Promise.resolve({
+        items: [],
+        total: 0,
+      });
+    },
+    getContentItemBySlug() {
+      return Promise.resolve(undefined);
+    },
+  };
+}

packages/cms/keystatic/src/create-reader.ts

@@ -1,18 +1,22 @@
 import { z } from 'zod';
 
+import { keyStaticConfig } from './keystatic.config';
+
+/**
+ * The kind of storage to use for the Keystatic reader.
+ */
 const STORAGE_KIND = process.env.KEYSTATIC_STORAGE_KIND ?? 'local';
 
 /**
- * Create a KeyStatic reader based on the storage kind.
+ * Creates a new Keystatic reader instance.
  */
 export async function createKeystaticReader() {
   switch (STORAGE_KIND) {
     case 'local': {
       if (process.env.NEXT_RUNTIME === 'nodejs') {
-        const { default: config } = await import('./keystatic.config');
         const { createReader } = await import('@keystatic/core/reader');
 
-        return createReader(process.cwd(), config);
+        return createReader(process.cwd(), keyStaticConfig);
       } else {
         // we should never get here but the compiler requires the check
         // to ensure we don't parse the package at build time
@@ -22,11 +26,11 @@ export async function createKeystaticReader() {
 
     case 'github':
     case 'cloud': {
-      const { default: config } = await import('./keystatic.config');
-
       const githubConfig = z
         .object({
-          token: z.string(),
+          token: z.string({
+            description: 'The GitHub token to use for authentication.',
+          }),
           repo: z.custom<`${string}/${string}`>(),
           pathPrefix: z.string().optional(),
         })
@@ -40,7 +44,7 @@ export async function createKeystaticReader() {
         '@keystatic/core/reader/github'
       );
 
-      return createGitHubReader(config, githubConfig);
+      return createGitHubReader(keyStaticConfig, githubConfig);
     }
 
     default:

packages/cms/keystatic/src/index.ts

@@ -1,3 +1 @@
-export * from './keystatic-client';
-export * from './content-renderer';
-export * from './keystatic.config';
+export * from './create-keystatic-cms';

packages/cms/keystatic/src/keystatic-admin.tsx

@@ -2,6 +2,6 @@
 
 import { makePage } from '@keystatic/next/ui/app';
 
-import config from './keystatic.config';
+import { keyStaticConfig } from './keystatic.config';
 
-export default makePage(config);
+export default makePage(keyStaticConfig);

packages/cms/keystatic/src/keystatic-client.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Cms, CmsClient } from '@kit/cms';
+import { Cms, CmsClient } from '@kit/cms-types';
 
 import { createKeystaticReader } from './create-reader';
 import {

packages/cms/keystatic/src/keystatic-route-handler.ts

@@ -1,9 +1,9 @@
 import { makeRouteHandler } from '@keystatic/next/route-handler';
 
-import config from './keystatic.config';
+import { keyStaticConfig } from './keystatic.config';
 
 const handlers = makeRouteHandler({
-  config,
+  config: keyStaticConfig,
 });
 
 /**

packages/cms/keystatic/src/keystatic.config.ts

@@ -43,12 +43,10 @@ const storage = z.union([local, cloud, github]).parse({
   pathPrefix: process.env.KEYSTATIC_PATH_PREFIX,
 });
 
-const keyStaticConfig = createKeyStaticConfig(
+export const keyStaticConfig = createKeyStaticConfig(
   process.env.NEXT_PUBLIC_KEYSTATIC_CONTENT_PATH ?? '',
 );
 
-export default keyStaticConfig;
-
 function getContentField() {
   return fields.markdoc({
     label: 'Content',