support minimal mdx cases and add test fixture

lib/plugins/mdx/deno.jsonc

@@ -0,0 +1,15 @@
+{
+  "lock": false,
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "tasks": {
+    "check:types": "deno check **/*.ts && deno check **/*.tsx",
+    "coverage": "rm -rf coverage && deno test -A --parallel --no-check --coverage && deno coverage --html",
+    "fixture": "deno run -A --watch=static/,routes/ tests/fixture/dev.ts",
+    "ok": "deno fmt --check && deno lint && deno task check:types && deno task test",
+    "test": "deno test -A --parallel --no-check"
+  },
+  "importMap": "./.vscode/import_map.json"
+}

lib/plugins/mdx/plugin.ts → lib/plugins/mdx/mod.ts

@@ -2,8 +2,9 @@ import type { Plugin, PluginRoute } from "../../deps/$fresh/server.ts";
 import type { NetzoState } from "../../mod.ts";
 import { mdxPathsToRoutes, scanForMDXFiles } from "./utils.ts";
 
-// deno-lint-ignore ban-types
-export type MdxConfig = {};
+export type MdxConfig = {
+  configLocation: string;
+};
 
 // deno-lint-ignore ban-types
 export type MdxState = {};
@@ -14,14 +15,13 @@ export type MdxState = {};
  * @param {MdxConfig} - configuration options for the plugin
  * @returns {Plugin} - a Plugin for Deno Fresh
  */
-export const mdx = async (_config: MdxConfig): Promise<
-  Plugin<NetzoState>
-> => {
-  const mdxFiles = await scanForMDXFiles("routes");
-  const routes: PluginRoute[] = await mdxPathsToRoutes(mdxFiles);
+export async function mdx(config: MdxConfig): Promise<Plugin<NetzoState>> {
+  const routesDir = new URL("./routes", config.configLocation).pathname;
+  const mdxFiles = await scanForMDXFiles(routesDir);
+  const routes: PluginRoute[] = await mdxPathsToRoutes(mdxFiles, routesDir);
 
   return {
     name: "mdx",
     routes,
   };
-};
+}

lib/plugins/mdx/tests/fixture/components/Bar.tsx

@@ -0,0 +1,3 @@
+export default function Bar() {
+  return <div>Bar</div>;
+}

lib/plugins/mdx/tests/fixture/deno.json

@@ -0,0 +1,39 @@
+{
+  "lock": false,
+  "tasks": {
+    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
+    "cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
+    "manifest": "deno task cli manifest $(pwd)",
+    "start": "deno run -A --watch=static/,routes/ dev.ts",
+    "build": "deno run -A dev.ts build",
+    "preview": "deno run -A main.ts",
+    "update": "deno run -A -r https://fresh.deno.dev/update ."
+  },
+  "lint": {
+    "rules": {
+      "tags": [
+        "fresh",
+        "recommended"
+      ]
+    }
+  },
+  "exclude": [
+    "**/_fresh/*"
+  ],
+  "imports": {
+    "$fresh/": "https://deno.land/x/[email protected]/",
+    "preact": "https://esm.sh/[email protected]",
+    "preact/": "https://esm.sh/[email protected]/",
+    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
+    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+    "tailwindcss": "npm:[email protected]",
+    "tailwindcss/": "npm:/[email protected]/",
+    "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
+    "$std/": "https://deno.land/[email protected]/"
+  },
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "nodeModulesDir": true
+}

lib/plugins/mdx/tests/fixture/dev.ts

@@ -0,0 +1,8 @@
+#!/usr/bin/env -S deno run -A --watch=static/,routes/
+
+import dev from "$fresh/dev.ts";
+import config from "./fresh.config.ts";
+
+import "$std/dotenv/load.ts";
+
+await dev(import.meta.url, "./main.ts", config);

lib/plugins/mdx/tests/fixture/fresh.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "$fresh/server.ts";
+import tailwind from "$fresh/plugins/tailwind.ts";
+import { mdx } from "../../mod.ts";
+
+export default defineConfig({
+  plugins: [await mdx({ configLocation: import.meta.url }), tailwind()],
+});

lib/plugins/mdx/tests/fixture/fresh.gen.ts

@@ -0,0 +1,19 @@
+// DO NOT EDIT. This file is generated by Fresh.
+// This file SHOULD be checked into source version control.
+// This file is automatically updated during development when running `dev.ts`.
+
+import * as $_app from "./routes/_app.tsx";
+import * as $Counter from "./islands/Counter.tsx";
+import { type Manifest } from "$fresh/server.ts";
+
+const manifest = {
+  routes: {
+    "./routes/_app.tsx": $_app,
+  },
+  islands: {
+    "./islands/Counter.tsx": $Counter,
+  },
+  baseUrl: import.meta.url,
+} satisfies Manifest;
+
+export default manifest;

lib/plugins/mdx/tests/fixture/islands/Counter.tsx

@@ -0,0 +1,20 @@
+import { Signal } from "@preact/signals";
+import { IS_BROWSER } from "$fresh/runtime.ts";
+
+interface CounterProps {
+  count: Signal<number>;
+}
+
+export default function Counter({ count }: CounterProps) {
+  return (
+    <div>
+      <p>{count}</p>
+      <button onClick={() => count.value -= 1} disabled={!IS_BROWSER}>
+        -1
+      </button>
+      <button onClick={() => count.value += 1} disabled={!IS_BROWSER}>
+        +1
+      </button>
+    </div>
+  );
+}

lib/plugins/mdx/tests/fixture/main.ts

@@ -0,0 +1,13 @@
+/// <reference no-default-lib="true" />
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/// <reference lib="dom.asynciterable" />
+/// <reference lib="deno.ns" />
+
+import "$std/dotenv/load.ts";
+
+import { start } from "$fresh/server.ts";
+import manifest from "./fresh.gen.ts";
+import config from "./fresh.config.ts";
+
+await start(manifest, config);

lib/plugins/mdx/tests/fixture/routes/_app.tsx

@@ -0,0 +1,16 @@
+import { type PageProps } from "$fresh/server.ts";
+export default function App({ Component }: PageProps) {
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>fixture</title>
+        {/* <link rel="stylesheet" href="/styles.css" /> */}
+      </head>
+      <body>
+        <Component />
+      </body>
+    </html>
+  );
+}

lib/plugins/mdx/tests/fixture/routes/foo.mdx

@@ -0,0 +1,18 @@
+---
+title: foobar
+---
+
+import Foo from "../components/Bar.tsx"
+import { useSignal } from "https://esm.sh/*@preact/[email protected]";
+import Counter from "../islands/Counter.tsx";
+
+# Hello
+
+This is rendered from mdx!
+
+* one
+* two
+* three
+
+<Foo />
+<Counter count={useSignal(3)} />

lib/plugins/mdx/tests/fixture/static/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

lib/plugins/mdx/tests/fixture/tailwind.config.ts

@@ -0,0 +1,7 @@
+import { type Config } from "tailwindcss";
+
+export default {
+  content: [
+    "{routes,islands,components}/**/*.{ts,tsx}",
+  ],
+} satisfies Config;

lib/plugins/mdx/utils.ts

@@ -1,36 +1,105 @@
 import { compile } from "npm:@mdx-js/mdx";
+import { type MdxjsEsm } from "npm:[email protected]";
 import { default as remarkFrontmatter } from "npm:[email protected]";
 import { default as remarkGfm } from "npm:[email protected]";
 import { type PluginRoute } from "../../deps/$fresh/server.ts";
 import { walk } from "../../deps/std/fs/walk.ts";
+import { visit } from "npm:[email protected]";
+import { Root } from "npm:@types/[email protected]";
+import { Project } from "npm:[email protected]";
+import { join, toFileUrl } from "../../deps/std/path/mod.ts";
+import { ImportDeclaration } from "npm:@types/[email protected]";
 
-export async function scanForMDXFiles(_directory: string): Promise<string[]> {
+export async function scanForMDXFiles(directory: string): Promise<string[]> {
   const files: string[] = [];
   for await (
-    const entry of walk(
-      "/home/mrk/repos/netzo/templates/minimal/routes",
-      { includeDirs: false, exts: [".mdx"] },
-    )
+    const entry of walk(directory, { includeDirs: false, exts: [".mdx"] })
   ) {
     files.push(entry.path);
   }
   return files;
 }
 
-export function mdxPathsToRoutes(mdxPaths: string[]): Promise<PluginRoute[]> {
+export function mdxPathsToRoutes(
+  mdxPaths: string[],
+  routesDir: string,
+): Promise<PluginRoute[]> {
   return Promise.all(mdxPaths.map(async (path: string) => {
     const routePath = path.split("/routes/").pop()!.replace(".mdx", "");
 
     const file = Deno.readTextFileSync(path);
     const compiled = await compile(file, {
-      remarkPlugins: [remarkGfm, remarkFrontmatter],
+      rehypePlugins: [rehypeLogger],
+      remarkPlugins: [remarkGfm, remarkFrontmatter, [
+        remarkAbsoluteImportPaths,
+        { basePath: routesDir },
+      ], remarkLogger],
       jsxImportSource: "preact",
     });
 
     const result = compiled.toString();
+    // console.log({ file, result });
     const code = await import("data:text/javascript," + result);
     const comp = code.default;
 
     return { path: routePath, component: comp } satisfies PluginRoute;
   }));
 }
+
+type RemarkAbsoluteImportPathsOptions = {
+  basePath?: string;
+};
+
+function remarkAbsoluteImportPaths(
+  options: Readonly<RemarkAbsoluteImportPathsOptions>,
+): (tree: Root) => void {
+  const basePath = options.basePath || "";
+
+  return function (tree: Root) {
+    visit(tree, "mdxjsEsm", (node: MdxjsEsm) => {
+      const project = new Project({
+        useInMemoryFileSystem: true,
+      });
+
+      const sourceFile = project.createSourceFile("tempFile.ts", node.value);
+      const imports = sourceFile.getImportDeclarations();
+
+      imports.forEach((importDeclaration) => {
+        const originalSpecifier = importDeclaration.getModuleSpecifierValue();
+        if (originalSpecifier.startsWith("http")) return;
+        const updatedPath = join(basePath, originalSpecifier);
+
+        const newSpecifier = toFileUrl(updatedPath).href;
+
+        if (node.data?.estree) {
+          const estreeBody = node.data.estree.body as ImportDeclaration[];
+          const importNode = estreeBody.find((n) =>
+            n.type === "ImportDeclaration" &&
+            n.source.type === "Literal" &&
+            n.source.value === originalSpecifier
+          );
+          if (importNode) {
+            importNode.source.value = newSpecifier;
+            importNode.source.raw = `"${newSpecifier}"`;
+          }
+        }
+      });
+    });
+  };
+}
+
+function remarkLogger(): (tree: Root) => undefined {
+  return function (tree: Root) {
+    visit(tree, "root", (node: Root) => {
+      // console.log(node);
+    });
+  };
+}
+
+function rehypeLogger(): (tree: Root) => undefined {
+  return function (tree: Root) {
+    visit(tree, "root", (node: Element) => {
+      // console.log(node);
+    });
+  };
+}