Server side bundle size improvements

.changeset/cuddly-stingrays-obey.md

@@ -0,0 +1,5 @@
+---
+'@keystatic/core': patch
+---
+
+Server side bundle size improvements

packages/keystatic/package.json

@@ -281,6 +281,7 @@
       "worker": "./src/component-blocks/blank-for-react-server.tsx",
       "react-server": "./src/component-blocks/blank-for-react-server.tsx",
       "default": "./src/component-blocks/cloud-image-preview.tsx"
-    }
+    },
+    "#markdoc": "./src/markdoc.js"
   }
 }

packages/keystatic/src/form/fields/document/index.tsx

@@ -1,6 +1,6 @@
-import Markdoc from '@markdoc/markdoc';
+import { format, parse as markdocParse } from '#markdoc';
 
-import { Descendant, Editor } from 'slate';
+import type { Descendant } from 'slate';
 
 import { fromMarkdoc } from './markdoc/from-markdoc';
 import { toMarkdocDocument } from './markdoc/to-markdoc';
@@ -14,11 +14,12 @@ import {
   DocumentElement,
   ContentFormField,
   SlugFormField,
-  FormFieldStoredValue,
 } from '../../api';
 import { text } from '../text';
-import { DocumentFieldInput } from '#field-ui/document';
-import { createDocumentEditorForNormalization } from './DocumentEditor/create-editor';
+import {
+  DocumentFieldInput,
+  normalizeDocumentFieldChildren,
+} from '#field-ui/document';
 import { object } from '../object';
 import { FieldDataError } from '../error';
 import { basicFormFieldWithSimpleReaderParse } from '../utils';
@@ -264,35 +265,7 @@ export function document({
   DocumentElement[]
 > {
   const documentFeatures = normaliseDocumentFeatures(documentFeaturesConfig);
-  const parse =
-    (mode: 'read' | 'edit') =>
-    (
-      _value: FormFieldStoredValue,
-      data: {
-        content: Uint8Array | undefined;
-        other: ReadonlyMap<string, Uint8Array>;
-        external: ReadonlyMap<string, ReadonlyMap<string, Uint8Array>>;
-        slug: string | undefined;
-      }
-    ): DocumentElement[] => {
-      const markdoc = textDecoder.decode(data.content);
-      const document = fromMarkdoc(Markdoc.parse(markdoc), componentBlocks);
-      const editor = createDocumentEditorForNormalization(
-        documentFeatures,
-        componentBlocks
-      );
-      editor.children = document;
-      Editor.normalize(editor, { force: true });
-      return deserializeFiles(
-        editor.children,
-        componentBlocks,
-        data.other,
-        data.external || new Map(),
-        mode,
-        documentFeatures,
-        data.slug
-      ) as any;
-    };
+
   return {
     kind: 'form',
     formKind: 'content',
@@ -311,7 +284,23 @@ export function document({
       );
     },
 
-    parse: parse('edit'),
+    parse(_, data) {
+      const markdoc = textDecoder.decode(data.content);
+      const document = fromMarkdoc(markdocParse(markdoc), componentBlocks);
+      return deserializeFiles(
+        normalizeDocumentFieldChildren(
+          documentFeatures,
+          componentBlocks,
+          document
+        ),
+        componentBlocks,
+        data.other,
+        data.external,
+        'edit',
+        documentFeatures,
+        data.slug
+      ) as any;
+    },
     contentExtension: '.mdoc',
     validate(value) {
       return value;
@@ -356,16 +345,26 @@ export function document({
       }
 
       return {
-        content: textEncoder.encode(
-          Markdoc.format(Markdoc.parse(Markdoc.format(node)))
-        ),
+        content: textEncoder.encode(format(markdocParse(format(node)))),
         other,
         external,
         value: undefined,
       };
     },
     reader: {
-      parse: parse('read'),
+      parse(value, data) {
+        const markdoc = textDecoder.decode(data.content);
+        const document = fromMarkdoc(markdocParse(markdoc), componentBlocks);
+        return deserializeFiles(
+          document,
+          componentBlocks,
+          new Map(),
+          new Map(),
+          'read',
+          documentFeatures,
+          undefined
+        ) as any;
+      },
     },
   };
 }

packages/keystatic/src/form/fields/document/markdoc/from-markdoc.ts

@@ -1,5 +1,5 @@
-import { Node } from '@markdoc/markdoc';
-import { Descendant } from 'slate';
+import { Node } from '#markdoc';
+import type { Descendant } from 'slate';
 import { ReadonlyPropPath } from '../DocumentEditor/component-blocks/utils';
 import { getValueAtPropPath } from '../../../props-value';
 import {

packages/keystatic/src/form/fields/document/markdoc/markdoc.test.tsx

@@ -6,7 +6,7 @@ import { jsx, makeEditor } from '../DocumentEditor/tests/utils';
 import { component, fields } from '../../../api';
 import { fromMarkdoc as _fromMarkdoc } from './from-markdoc';
 import { toMarkdoc as _toMarkdoc } from './test-utils';
-import Markdoc from '@markdoc/markdoc';
+import { parse } from '#markdoc';
 import { Node } from 'slate';
 
 const componentBlocks = {
@@ -48,7 +48,7 @@ function toMarkdoc(node: Node) {
 
 function fromMarkdoc(markdoc: string) {
   return makeEditor(
-    <editor>{_fromMarkdoc(Markdoc.parse(markdoc), componentBlocks)}</editor>,
+    <editor>{_fromMarkdoc(parse(markdoc), componentBlocks)}</editor>,
     { normalization: 'normalize' }
   );
 }

packages/keystatic/src/form/fields/document/markdoc/test-utils.ts

@@ -1,4 +1,4 @@
-import Markdoc from '@markdoc/markdoc';
+import { format, parse } from '#markdoc';
 import { Node } from 'slate';
 import {
   defaultDocumentFeatures,
@@ -17,5 +17,5 @@ export function toMarkdoc(
     documentFeatures: defaultDocumentFeatures,
     slug: undefined,
   }).node;
-  return Markdoc.format(Markdoc.parse(Markdoc.format(root)));
+  return format(parse(format(root)));
 }

packages/keystatic/src/form/fields/document/markdoc/to-markdoc.tsx

@@ -1,4 +1,4 @@
-import Markdoc, { Node, NodeType } from '@markdoc/markdoc';
+import { Node, NodeType, Ast } from '#markdoc';
 import { ReadonlyPropPath } from '../DocumentEditor/component-blocks/utils';
 import { getValueAtPropPath } from '../../../props-value';
 import { areArraysEqual } from '../DocumentEditor/document-features-normalization';
@@ -10,13 +10,11 @@ import {
 } from './find-children';
 import { DocumentFeatures } from '../DocumentEditor/document-features';
 import { getInitialPropsValueFromInitializer } from '../../../initial-values';
-import { Descendant } from 'slate';
+import type { Descendant } from 'slate';
 import { fixPath } from '../../../../app/path-utils';
 import { getSrcPrefixForImageBlock } from '../DocumentEditor/component-blocks/document-field';
 import { serializeProps } from '../../../serialize-props';
 
-const { Ast } = Markdoc;
-
 function toInline(nodes: Descendant[]): Node {
   return new Ast.Node('inline', {}, nodes.flatMap(toMarkdocInline));
 }

packages/keystatic/src/form/fields/document/ui.tsx

@@ -7,15 +7,31 @@ import {
   FormFieldInputProps,
 } from '../../api';
 import { useEntryLayoutSplitPaneContext } from '../../../app/entry-form';
-import { DocumentEditor } from './DocumentEditor';
+import { DocumentEditor, Editor } from './DocumentEditor';
 import { DocumentFeatures } from './DocumentEditor/document-features';
+import { createDocumentEditorForNormalization } from './DocumentEditor/create-editor';
+import type { Descendant } from 'slate';
 
 let i = 0;
 
 function newKey() {
   return i++;
 }
 
+export function normalizeDocumentFieldChildren(
+  documentFeatures: DocumentFeatures,
+  componentBlocks: Record<string, ComponentBlock>,
+  document: Descendant[]
+) {
+  const editor = createDocumentEditorForNormalization(
+    documentFeatures,
+    componentBlocks
+  );
+  editor.children = document;
+  Editor.normalize(editor, { force: true });
+  return editor.children;
+}
+
 export function DocumentFieldInput(
   props: FormFieldInputProps<DocumentElement[]> & {
     label: string;

packages/keystatic/src/form/fields/empty-field-ui.tsx

@@ -33,4 +33,6 @@ export let SlugFieldInput = empty,
   parseToEditorStateMDX = empty,
   serializeFromEditorStateMDX = empty,
   createEditorStateFromYJS = empty,
-  prosemirrorToYXmlFragment = empty;
+  prosemirrorToYXmlFragment = empty,
+  normalizeDocumentFieldChildren = empty,
+  slugify = empty;

packages/keystatic/src/form/fields/markdoc/editor/markdoc/clipboard.tsx

@@ -7,7 +7,7 @@ import {
 import { Plugin } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { proseMirrorToMarkdoc } from './serialize';
-import Markdoc from '@markdoc/markdoc';
+import { format, parse } from '#markdoc';
 import { markdocToProseMirror } from './parse';
 import { getEditorSchema } from '../schema';
 
@@ -21,7 +21,7 @@ export function markdocClipboard() {
       // you shouldn't get the block quote
       clipboardTextSerializer(content, view) {
         try {
-          return Markdoc.format(
+          return format(
             proseMirrorToMarkdoc(
               view.state.doc.type.create({}, content.content),
               {
@@ -41,7 +41,7 @@ export function markdocClipboard() {
         try {
           return Slice.maxOpen(
             markdocToProseMirror(
-              Markdoc.parse(text),
+              parse(text),
               getEditorSchema(view.state.schema),
               undefined,
               undefined,

packages/keystatic/src/form/fields/markdoc/editor/markdoc/parse.ts

@@ -1,4 +1,4 @@
-import { Node as MarkdocNode, ValidateError } from '@markdoc/markdoc';
+import { Node as MarkdocNode, ValidateError } from '#markdoc';
 import {
   Mark,
   MarkType,

packages/keystatic/src/form/fields/markdoc/editor/markdoc/serialize.ts

@@ -1,12 +1,10 @@
-import Markdoc, { Node as MarkdocNode, NodeType } from '@markdoc/markdoc';
+import { Ast, Node as MarkdocNode, NodeType } from '#markdoc';
 import { Fragment, Mark, Node as ProseMirrorNode } from 'prosemirror-model';
 import { EditorSchema, getEditorSchema } from '../schema';
 import { getSrcPrefixForImageBlock } from '../images';
 import { fixPath } from '../../../../../app/path-utils';
 import { internalToSerialized } from '../props-serialization';
 
-const { Ast } = Markdoc;
-
 type DocumentSerializationState = {
   schema: EditorSchema;
   extraFiles: Map<string, Uint8Array>;

packages/keystatic/src/form/fields/markdoc/editor/tests/markdoc.test.tsx

@@ -5,7 +5,7 @@ import { expect, test } from '@jest/globals';
 import { EditorStateDescription, jsx, toEditorState } from './utils';
 import { markdocToProseMirror } from '../markdoc/parse';
 import { proseMirrorToMarkdoc } from '../markdoc/serialize';
-import Markdoc from '@markdoc/markdoc';
+import { format, parse } from '#markdoc';
 import { createEditorSchema } from '../schema';
 import { editorOptionsToConfig } from '../../config';
 import { block, inline, mark } from '../../../../../content-components';
@@ -48,9 +48,9 @@ const schema = createEditorSchema(
 );
 
 function toMarkdoc(node: EditorStateDescription) {
-  return Markdoc.format(
-    Markdoc.parse(
-      Markdoc.format(
+  return format(
+    parse(
+      format(
         proseMirrorToMarkdoc(node.get().doc, {
           extraFiles: new Map(),
           otherFiles: new Map(),
@@ -65,7 +65,7 @@ function toMarkdoc(node: EditorStateDescription) {
 function fromMarkdoc(markdoc: string) {
   return toEditorState(
     markdocToProseMirror(
-      Markdoc.parse(markdoc),
+      parse(markdoc),
       schema,
       new Map([['something something.png', new Uint8Array([])]]),
       undefined,

packages/keystatic/src/form/fields/markdoc/index.tsx

@@ -1,4 +1,4 @@
-import Markdoc, { Node as MarkdocNode } from '@markdoc/markdoc';
+import { Node as MarkdocNode, parse } from '#markdoc';
 
 import { ContentFormField } from '../../api';
 import {
@@ -97,7 +97,7 @@ export function markdoc({
     reader: {
       parse: (_, { content }) => {
         const text = textDecoder.decode(content);
-        return { node: Markdoc.parse(text) };
+        return { node: parse(text) };
       },
     },
     collaboration: {

packages/keystatic/src/form/fields/markdoc/markdoc-config.ts

@@ -1,4 +1,4 @@
-import Markdoc, { Config, NodeType, SchemaAttribute } from '@markdoc/markdoc';
+import { nodes, Config, NodeType, SchemaAttribute } from '#markdoc';
 import { MarkdocEditorOptions, editorOptionsToConfig } from './config';
 import { ComponentSchema } from '../../api';
 import { ContentComponent } from '../../../content-components';
@@ -82,8 +82,6 @@ function fieldsToMarkdocAttributes(
   );
 }
 
-const { nodes } = Markdoc;
-
 export function createMarkdocConfig<
   Components extends Record<string, ContentComponent>,
 >(opts: {

packages/keystatic/src/form/fields/markdoc/ui.tsx

@@ -5,7 +5,7 @@ import { Editor } from './editor';
 import { createEditorState } from './editor/editor-state';
 import { EditorSchema, getEditorSchema } from './editor/schema';
 import { markdocToProseMirror } from './editor/markdoc/parse';
-import Markdoc from '@markdoc/markdoc';
+import { format, parse } from '#markdoc';
 import { proseMirrorToMarkdoc } from './editor/markdoc/serialize';
 import { useEntryLayoutSplitPaneContext } from '../../../app/entry-form';
 import { fromMarkdown } from 'mdast-util-from-markdown';
@@ -38,7 +38,7 @@ export function parseToEditorState(
 ) {
   const markdoc = textDecoder.decode(content);
   const doc = markdocToProseMirror(
-    Markdoc.parse(markdoc),
+    parse(markdoc),
     schema,
     files,
     otherFiles,
@@ -59,9 +59,9 @@ export function serializeFromEditorState(
     schema: getEditorSchema(value.schema),
     slug,
   });
-  const markdoc = Markdoc.format(markdocNode);
+  const markdoc = format(markdocNode);
   return {
-    content: textEncoder.encode(Markdoc.format(Markdoc.parse(markdoc))),
+    content: textEncoder.encode(format(parse(markdoc))),
     other,
     external,
   };