Support for turbopack and (#158)

.changeset/swift-books-work.md

@@ -0,0 +1,5 @@
+---
+'markdownlayer': minor
+---
+
+Support for turbopack

examples/starter/next.config.js

@@ -5,4 +5,4 @@ const nextConfig = {
   reactStrictMode: true,
 };
 
-export default withMarkdownlayer(nextConfig); // requires markdownlayer.config.ts
+export default withMarkdownlayer(nextConfig);

examples/starter/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

packages/markdownlayer/README.md

@@ -17,6 +17,7 @@ Read the [blog](https://maxwellweru.com/blog/2024/03/replacing-contentlayer-with
 - Remark GFM, Admonitions, Reading Time, Emoji, and Slug included by default.
 - Markdoc support
 - Last update time and author based on Git but can be overridden via frontmatter.
+- Turbopack support
 
 ## Wishlist/Upcoming
 
@@ -35,7 +36,3 @@ Read the [blog](https://maxwellweru.com/blog/2024/03/replacing-contentlayer-with
 - Only NextJs support.
 - No JSON/YAML content as they can be loaded directly into the JS/TS code.
 - Requires ESM because the whole unified/remark/rehype ecosystem moved to ESM-only.
-
-## Not supported
-
-- Compiling with turbo including `next dev --turbo`. Haven't figured out how to adapt the webpack plugin.

packages/markdownlayer/package.json

@@ -89,8 +89,7 @@
     "esbuild": "0",
     "next": "13 || 14",
     "react": "18",
-    "react-dom": "18",
-    "webpack": "^5.90.3"
+    "react-dom": "18"
   },
   "author": "mburumaxwell",
   "homepage": "https://github.com/mburumaxwell/markdownlayer",

packages/markdownlayer/src/index.ts

@@ -1,10 +1,15 @@
+import { generate } from '@/core/generation';
 import type { NextConfig } from 'next';
-import type { WebpackConfigContext } from 'next/dist/server/config-shared';
-import type webpack from 'webpack';
+import type { GenerationMode } from './core';
 
-import { runBeforeWebpackCompile } from './plugin';
+export type MarkdownlayerPluginOptions = {
+  /** Currently unused! */
+  configPath: string;
+};
 
-const devServerStartedRef = { current: false };
+const defaultOptions: MarkdownlayerPluginOptions = {
+  configPath: 'markdownlayer.config.ts',
+};
 
 /**
  * Next.js plugin for markdownlayer.
@@ -20,39 +25,17 @@ const devServerStartedRef = { current: false };
  * })
  * ```
  */
-export function withMarkdownlayer(nextConfig?: Partial<NextConfig>): Partial<NextConfig> {
-  return {
-    ...nextConfig,
-    onDemandEntries: {
-      maxInactiveAge: 60 * 60 * 1000, // extend `maxInactiveAge` to 1 hour (from 15 sec by default)
-      ...nextConfig?.onDemandEntries, // use existing onDemandEntries config if provided by user
-    },
-    webpack(config: webpack.Configuration, options: WebpackConfigContext) {
-      const { buildId, dev, isServer, nextRuntime } = options; // eslint-disable-line @typescript-eslint/no-unused-vars
+export const withMarkdownlayer = createMarkdownlayerPlugin(defaultOptions);
 
-      // contentlayer has (and we initially had) watch options that allowed watching the node_modules folder except for itself
-      // we do not have that here because we may want a recompilation if the package is update during a dev session
+export function createMarkdownlayerPlugin(pluginOptions: MarkdownlayerPluginOptions) {
+  return async function (nextConfig: Partial<NextConfig> = {}): Promise<Partial<NextConfig>> {
+    const [command] = process.argv.slice(2).filter((arg) => !arg.startsWith('-'));
+    if (command === 'build' || command === 'dev') {
+      const mode: GenerationMode = command === 'dev' ? 'development' : 'production';
 
-      config.plugins!.push(new MarkdownWebpackPlugin());
+      await generate({ mode, ...pluginOptions });
+    }
 
-      if (typeof nextConfig?.webpack === 'function') {
-        return nextConfig.webpack(config, options);
-      }
-
-      return config;
-    },
-  } satisfies NextConfig;
-}
-
-class MarkdownWebpackPlugin {
-  constructor() {}
-
-  apply(compiler: webpack.Compiler) {
-    compiler.hooks.beforeCompile.tapPromise('MarkdownlayerWebpackPlugin', async () => {
-      await runBeforeWebpackCompile({
-        devServerStartedRef,
-        mode: compiler.options.mode,
-      });
-    });
-  }
+    return nextConfig;
+  };
 }

packages/markdownlayer/tsup.config.ts

@@ -18,6 +18,6 @@ export default defineConfig((options: Options) => ({
   clean: true,
   shims: true,
   sourcemap: true,
-  external: ['react', 'react-dom', 'react/jsx-runtime', 'next', 'chokidar', 'webpack'],
+  external: ['react', 'react-dom', 'react/jsx-runtime', 'next', 'chokidar'],
   ...options,
 }));