Make @astrojs/markdown-remark browser-safe (#9738)

.changeset/thick-carrots-run.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/markdown-remark": minor
+---
+
+Fixes usage in browser environments by using subpath imports

packages/markdown/remark/package.json

@@ -16,6 +16,12 @@
     ".": "./dist/index.js",
     "./dist/internal.js": "./dist/internal.js"
   },
+  "imports": {
+    "#import-plugin": {
+      "browser": "./dist/import-plugin-browser.js",
+      "default": "./dist/import-plugin-default.js"
+    }
+  },
   "files": [
     "dist"
   ],
@@ -52,6 +58,7 @@
     "@types/unist": "^3.0.2",
     "astro-scripts": "workspace:*",
     "chai": "^4.3.7",
+    "esbuild": "^0.19.6",
     "mdast-util-mdx-expression": "^2.0.0",
     "mocha": "^10.2.0"
   },

packages/markdown/remark/src/import-plugin-browser.ts

@@ -0,0 +1,8 @@
+// This file should be imported as `#import-plugin`
+import type * as unified from 'unified';
+
+// In the browser, we can try to do a plain import
+export async function importPlugin(p: string): Promise<unified.Plugin> {
+	const importResult = await import(p);
+	return importResult.default;
+}

packages/markdown/remark/src/import-plugin-default.ts

@@ -0,0 +1,22 @@
+// This file should be imported as `#import-plugin`
+import { resolve as importMetaResolve } from 'import-meta-resolve';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+import type * as unified from 'unified';
+
+let cwdUrlStr: string | undefined;
+
+// In non-browser enviroments, we can try to resolve from the filesystem too
+export async function importPlugin(p: string): Promise<unified.Plugin> {
+	// Try import from this package first
+	try {
+		const importResult = await import(p);
+		return importResult.default;
+	} catch {}
+
+	// Try import from user project
+	cwdUrlStr ??= pathToFileURL(path.join(process.cwd(), 'package.json')).toString();
+	const resolved = importMetaResolve(p, cwdUrlStr);
+	const importResult = await import(resolved);
+	return importResult.default;
+}

packages/markdown/remark/src/load-plugins.ts

@@ -1,26 +1,12 @@
-import { resolve as importMetaResolve } from 'import-meta-resolve';
-import path from 'node:path';
-import { pathToFileURL } from 'node:url';
 import type * as unified from 'unified';
+import { importPlugin as _importPlugin } from '#import-plugin';
 
-let cwdUrlStr: string | undefined;
-
-async function importPlugin(p: string | unified.Plugin): Promise<unified.Plugin> {
+async function importPlugin(p: string | unified.Plugin<any[], any>) {
 	if (typeof p === 'string') {
-		// Try import from this package first
-		try {
-			const importResult = await import(p);
-			return importResult.default;
-		} catch {}
-
-		// Try import from user project
-		cwdUrlStr ??= pathToFileURL(path.join(process.cwd(), 'package.json')).toString();
-		const resolved = importMetaResolve(p, cwdUrlStr);
-		const importResult = await import(resolved);
-		return importResult.default;
+		return await _importPlugin(p);
+	} else {
+		return p;
 	}
-
-	return p;
 }
 
 export function loadPlugins(

packages/markdown/remark/test/browser.test.js

@@ -0,0 +1,15 @@
+import esbuild from 'esbuild';
+import { expect } from 'chai';
+
+describe('Bundle for browsers', async () => {
+	it('esbuild browser build should work', async () => {
+		const result = await esbuild.build({
+			platform: 'browser',
+			entryPoints: ['@astrojs/markdown-remark'],
+			bundle: true,
+			write: false,
+		});
+		// If some non-browser-safe stuff sneaks in, esbuild should error before reaching here
+		expect(result.outputFiles.length).to.be.greaterThan(0);
+	});
+});

packages/markdown/remark/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../../tsconfig.base.json",
   "include": ["src"],
   "compilerOptions": {
-    "outDir": "./dist"
+    "outDir": "./dist",
+    "rootDir": "./src",
   }
 }