add unit test

Author: mfix-stripe

tests/__snapshots__/index.test.js.snap

@@ -285,3 +285,94 @@ export default function MarkdocComponent(props) {
 }
 "
 `;
+
+exports[`import as frontend component 1`] = `
+"import React from 'react';
+import yaml from 'js-yaml';
+// renderers is imported separately so Markdoc isn't sent to the client
+import Markdoc, {renderers} from '@markdoc/markdoc'
+
+import {getSchema, defaultObject} from './src/runtime.js';
+/**
+ * Schema is imported like this so end-user's code is compiled using build-in babel/webpack configs.
+ * This enables typescript/ESnext support
+ */
+const schema = {};
+
+const tokenizer = new Markdoc.Tokenizer({\\"allowComments\\":true});
+
+/**
+ * Source will never change at runtime, so parse happens at the file root
+ */
+const source = \\"---\\\\ntitle: Custom title\\\\n---\\\\n\\\\n# {% $markdoc.frontmatter.title %}\\\\n\\\\n{% tag /%}\\\\n\\";
+const filepath = undefined;
+const tokens = tokenizer.tokenize(source);
+const parseOptions = {\\"slots\\":false};
+const ast = Markdoc.parse(tokens, parseOptions);
+
+/**
+ * Like the AST, frontmatter won't change at runtime, so it is loaded at file root.
+ * This unblocks future features, such a per-page dataFetchingFunction.
+ */
+const frontmatter = ast.attributes.frontmatter
+  ? yaml.load(ast.attributes.frontmatter)
+  : {};
+
+const {components, ...rest} = getSchema(schema)
+
+function getMarkdocData(context = {}) {
+  const partials = {};
+
+  // Ensure Node.transformChildren is available
+  Object.keys(partials).forEach((key) => {
+    const tokens = tokenizer.tokenize(partials[key]);
+    partials[key] = Markdoc.parse(tokens, parseOptions);
+  });
+
+  const cfg = {
+    ...rest,
+    variables: {
+      ...(rest ? rest.variables : {}),
+      // user can't override this namespace
+      markdoc: {frontmatter},
+      // Allows users to eject from Markdoc rendering and pass in dynamic variables via getServerSideProps
+      ...(context.variables || {})
+    },
+    partials,
+    source,
+  };
+
+  /**
+   * transform must be called in dataFetchingFunction to support server-side rendering while
+   * accessing variables on the server
+   */
+  const content = Markdoc.transform(ast, cfg);
+
+  // Removes undefined
+  return JSON.parse(
+    JSON.stringify({
+      content,
+      frontmatter,
+      file: {
+        path: filepath,
+      },
+    })
+  );
+}
+
+
+
+export const markdoc = {frontmatter};
+export default function MarkdocComponent(props) {
+  const markdoc = getMarkdocData();
+  // Only execute HMR code in development
+  return renderers.react(markdoc.content, React, {
+    components: {
+      ...components,
+      // Allows users to override default components at runtime, via their _app
+      ...props.components,
+    },
+  });
+}
+"
+`;

tests/index.test.js

@@ -255,3 +255,12 @@ test('mode="server"', async () => {
     },
   });
 });
+
+test('import as frontend component', async () => {
+  const o = options();
+  // Use a non-page pathway
+  o.resourcePath = o.resourcePath.replace('pages/test/index.md', 'components/table.md');
+  const output = await callLoader(o, source);
+
+  expect(normalizeOperatingSystemPaths(output)).toMatchSnapshot();
+});