Add Turbopack support for Markdoc files (#64)

* Add Turbopack support for Markdoc files

* Improve Turbopack implementation and clean up code

* add turbo pack config only when needed

Co-authored-by: Mike Fix <62121649+mfix-stripe@users.noreply.github.com>

* Further improve Turbopack implementation and cleanup

* Update index.js

* Apply suggestion from @mfix-stripe

* adding dir as type, fixing turbopack  and updating readme

* Update README.md

* Update README.md

* clean up

---------

Co-authored-by: Mike Fix <62121649+mfix-stripe@users.noreply.github.com>
Co-authored-by: Mike Fix <mfix@stripe.com>

Author: markolech

README.md

@@ -14,6 +14,8 @@ The first thing you'll need to do is install `@markdoc/next.js` and add it to yo
    ```
 2. Open `next.config.js` and add the following code:
 
+   When using Webpack:
+
    ```js
    // next.config.js
 
@@ -24,6 +26,17 @@ The first thing you'll need to do is install `@markdoc/next.js` and add it to yo
    });
    ```
 
+   For [Turbopack support](https://nextjs.org/docs/app/api-reference/turbopack), add the following configuration:
+
+   ```js
+   // next.config.js
+   module.exports = withMarkdoc({
+     dir: process.cwd(), // Required for Turbopack file resolution
+   })({
+     pageExtensions: ['js', 'md'],
+   });
+   ```
+
 3. Create a new Markdoc file in `pages/docs` named `getting-started.md`.
 
    ```

src/index.d.ts

@@ -28,6 +28,7 @@ export interface MarkdocNextJsOptions {
     allowComments?: boolean;
   };
   schemaPath?: string;
+  dir?: string;
 }
 
 declare function createMarkdocPlugin(

src/index.js

@@ -1,10 +1,54 @@
+function createTurbopackConfig(nextConfig, pluginOptions) {
+  const turbopack = nextConfig.turbopack;
+
+  if (!turbopack) {
+    return;
+  }
+
+  const extension = pluginOptions.extension || /\.(md|mdoc)$/;
+
+  // Extract file extensions from regex pattern like /\.(md|mdoc)$/ to create glob patterns for Turbopack
+  const extensionPatterns =
+    extension instanceof RegExp
+      ? extension.source
+          .match(/\\\.\(([^)]+)\)\$?/)?.[1]
+          ?.split('|')
+          .map((e) => `*.${e}`) || ['*.md', '*.mdoc']
+      : [extension];
+
+  const rules = extensionPatterns.reduce((acc, pattern) => {
+    acc[pattern] = {
+      loaders: [
+        {
+          loader: require.resolve('./loader'),
+          options: {
+            ...pluginOptions,
+          },
+        },
+      ],
+      as: '*.js',
+    };
+    return acc;
+  }, {});
+
+  return {
+    ...nextConfig.turbopack,
+    rules: {
+      ...nextConfig.turbopack.rules,
+      ...rules,
+    },
+  };
+}
+
 const withMarkdoc =
   (pluginOptions = {}) =>
   (nextConfig = {}) => {
+    const extension = pluginOptions.extension || /\.(md|mdoc)$/;
+
     return Object.assign({}, nextConfig, {
       webpack(config, options) {
         config.module.rules.push({
-          test: pluginOptions.extension || /\.(md|mdoc)$/,
+          test: extension,
           use: [
             // Adding the babel loader enables fast refresh
             options.defaultLoaders.babel,
@@ -15,7 +59,6 @@ const withMarkdoc =
                 pagesDir: options.defaultLoaders.babel.options.pagesDir,
                 ...pluginOptions,
                 dir: options.dir,
-                nextRuntime: options.nextRuntime,
               },
             },
           ],
@@ -27,6 +70,8 @@ const withMarkdoc =
 
         return config;
       },
+
+      turbopack: createTurbopackConfig(nextConfig, pluginOptions),
     });
   };
 

src/loader.js

@@ -62,18 +62,19 @@ async function load(source) {
 
   const tokenizer = new Markdoc.Tokenizer(options);
   const parseOptions = {slots};
-
   const schemaDir = path.resolve(dir, schemaPath || DEFAULT_SCHEMA_PATH);
   const tokens = tokenizer.tokenize(source);
   const ast = Markdoc.parse(tokens, parseOptions);
 
-  const isPage = this.resourcePath.startsWith(appDir || pagesDir);
+  // Determine if this is a page file by checking if it starts with the provided directories
+  const isPage = (appDir && this.resourcePath.startsWith(appDir)) || 
+                 (pagesDir && this.resourcePath.startsWith(pagesDir));
 
   // Grabs the path of the file relative to the `/{app,pages}` directory
   // to pass into the app props later.
   // This array access @ index 1 is safe since Next.js guarantees that
   // all pages will be located under either {app,pages}/ or src/{app,pages}/
-  // https://nextjs.org/docs/advanced-features/src-directory
+  // https://nextjs.org/docs/app/building-your-application/configuring/src-directory
   const filepath = this.resourcePath.split(appDir ? 'app' : 'pages')[1];
 
   const partials = await gatherPartials.call(
@@ -134,7 +135,7 @@ 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 '${normalize(await resolve(__dirname, './runtime'))}';
+import {getSchema, defaultObject} from '@markdoc/next.js/runtime';
 /**
  * Schema is imported like this so end-user's code is compiled using build-in babel/webpack configs.
  * This enables typescript/ESnext support

tests/__snapshots__/index.test.js.snap

@@ -6,7 +6,7 @@ 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';
+import {getSchema, defaultObject} from '@markdoc/next.js/runtime';
 /**
  * Schema is imported like this so end-user's code is compiled using build-in babel/webpack configs.
  * This enables typescript/ESnext support
@@ -103,7 +103,7 @@ 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';
+import {getSchema, defaultObject} from '@markdoc/next.js/runtime';
 /**
  * Schema is imported like this so end-user's code is compiled using build-in babel/webpack configs.
  * This enables typescript/ESnext support
@@ -195,7 +195,7 @@ 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';
+import {getSchema, defaultObject} from '@markdoc/next.js/runtime';
 /**
  * Schema is imported like this so end-user's code is compiled using build-in babel/webpack configs.
  * This enables typescript/ESnext support
@@ -292,7 +292,7 @@ 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';
+import {getSchema, defaultObject} from '@markdoc/next.js/runtime';
 /**
  * Schema is imported like this so end-user's code is compiled using build-in babel/webpack configs.
  * This enables typescript/ESnext support

tests/index.test.js

@@ -6,6 +6,9 @@ const React = require('react');
 const enhancedResolve = require('enhanced-resolve');
 const loader = require('../src/loader');
 
+// Mock the runtime module using Jest
+jest.mock('@markdoc/next.js/runtime', () => require('../src/runtime'), {virtual: true});
+
 const source = fs.readFileSync(require.resolve('./fixture.md'), 'utf-8');
 
 // https://stackoverflow.com/questions/53799385/how-can-i-convert-a-windows-path-to-posix-path-using-node-path
@@ -264,3 +267,55 @@ test('import as frontend component', async () => {
 
   expect(normalizeOperatingSystemPaths(output)).toMatchSnapshot();
 });
+
+test('Turbopack configuration', () => {
+  const withMarkdoc = require('../src/index.js');
+  
+  // Test basic Turbopack configuration
+  const config = withMarkdoc()({
+    pageExtensions: ['js', 'md', 'mdoc'],
+    turbopack: {
+      rules: {},
+    },
+  });
+  
+  expect(config.turbopack).toBeDefined();
+  expect(config.turbopack.rules).toBeDefined();
+  expect(config.turbopack.rules['*.md']).toBeDefined();
+  expect(config.turbopack.rules['*.mdoc']).toBeDefined();
+  
+  // Verify rule structure
+  const mdRule = config.turbopack.rules['*.md'];
+  expect(mdRule.loaders).toHaveLength(1);
+  expect(mdRule.loaders[0].loader).toContain('loader');
+  expect(mdRule.as).toBe('*.js');
+  
+  // Test that existing turbopack config is preserved
+  const configWithExisting = withMarkdoc()({
+    pageExtensions: ['js', 'md'],
+    turbopack: {
+      rules: {
+        '*.svg': {
+          loaders: ['@svgr/webpack'],
+          as: '*.js',
+        },
+      },
+    },
+  });
+  
+  expect(configWithExisting.turbopack.rules['*.svg']).toBeDefined();
+  expect(configWithExisting.turbopack.rules['*.md']).toBeDefined();
+  
+  // Test custom extension
+  const configWithCustomExt = withMarkdoc({
+    extension: /\.(markdown|mdx)$/,
+  })({
+    pageExtensions: ['js', 'markdown', 'mdx'],
+    turbopack: {
+      rules: {},
+    },
+  });
+  
+  expect(configWithCustomExt.turbopack.rules['*.markdown']).toBeDefined();
+  expect(configWithCustomExt.turbopack.rules['*.mdx']).toBeDefined();
+});