Reorganized hooks to declare their dependenices in file

www/components/package-exports.tsx

@@ -1,7 +1,8 @@
+import { join } from "jsr:@std/[email protected]";
 import type { JSXElement } from "revolution/jsx-runtime";
-import type { Package } from "../hooks/use-package.tsx";
+
 import type { DocNode } from "../hooks/use-deno-doc.tsx";
-import { join } from "@std/path";
+import type { Package } from "../hooks/use-package.tsx";
 
 export function PackageExports({ pkg }: { pkg: Package }): JSXElement {
   if (isDocArray(pkg.docs)) {
@@ -28,6 +29,7 @@ export function PackageExports({ pkg }: { pkg: Package }): JSXElement {
       </>
     );
   }
+  return <></>
 }
 
 interface PackageExportOptions {

www/components/rehype.tsx

@@ -1,14 +1,12 @@
-export {
-  Rehype as OriginalRehype,
-  type RehypeOptions,
-} from "effection-www/components/rehype.tsx";
-import rehypeSlug from "rehype-slug";
-import rehypeAutolinkHeadings from "rehype-autolink-headings";
-import rehypeAddClasses from "rehype-add-classes";
-import rehypeInferDescriptionMeta from "rehype-infer-description-meta";
+import { Rehype as OriginalRehype } from "effection-www/components/rehype.tsx";
+import rehypeSlug from "npm:[email protected]";
+import rehypeAutolinkHeadings from "npm:[email protected]";
+import rehypeAddClasses from "npm:[email protected]";
+import rehypeInferDescriptionMeta from "npm:[email protected]";
+import type { JSXElement } from "revolution/jsx-runtime";
 
 interface RehypeProps {
-  children: () => JSX.Element;
+  children: JSXElement;
 }
 
 export function Rehype({ children }: RehypeProps) {

www/deno.json

@@ -9,23 +9,6 @@
     "effection-www/": "https://raw.githubusercontent.com/thefrontside/effection/4982887c1677b847d256402e8709f2b1d49437e6/www/",
     "@std/assert": "jsr:@std/assert@1",
     "revolution": "https://deno.land/x/[email protected]/mod.ts",
-    "revolution/jsx-runtime": "https://deno.land/x/[email protected]/jsx-runtime.ts",
-    "zod": "https://deno.land/x/[email protected]/mod.ts",
-    "@std/path": "jsr:@std/[email protected]",
-    "@std/fs": "jsr:@std/[email protected]",
-    "remark-gfm": "npm:[email protected]",
-    "remark-rehype": "npm:[email protected]",
-    "unified": "npm:[email protected]",
-    "rehype-prism-plus": "npm:[email protected]",
-    "rehype-slug": "npm:[email protected]",
-    "rehype-autolink-headings": "npm:[email protected]",
-    "rehype-add-classes": "npm:[email protected]",
-    "rehype-infer-description-meta": "npm:[email protected]",
-    "rehype-parse": "npm:[email protected]",
-    "rehype-stringify": "npm:[email protected]",
-    "remark-parse": "npm:[email protected]",
-    "hast-util-to-string": "npm:[email protected]",
-    "@mdx-js/mdx": "npm:@mdx-js/[email protected]",
-    "vfile": "npm:[email protected]"
+    "revolution/jsx-runtime": "https://deno.land/x/[email protected]/jsx-runtime.ts"
   }
 }

www/hooks/use-mdx.tsx

@@ -0,0 +1,22 @@
+import { call, type Operation } from "effection";
+import { evaluate } from "npm:@mdx-js/[email protected]";
+import type { MDXModule } from "npm:@types/[email protected]";
+import rehypePrismPlus from "npm:[email protected]";
+import remarkGfm from "npm:[email protected]";
+import { Fragment, jsx, jsxs } from "revolution/jsx-runtime";
+
+export function* useMDX(markdown: string): Operation<MDXModule> {
+  return yield* call(() =>
+    evaluate(markdown, {
+      // @ts-expect-error Type 'unknown' is not assignable to type 'JSXComponent'.
+      jsx,
+      // @ts-expect-error Type '{ (component: JSXComponent, props: JSXComponentProps): JSXElement; (element: string, props: JSXElementProps): JSXElement; }' is not assignable to type 'Jsx'.
+      jsxs,
+      // @ts-expect-error Type 'unknown' is not assignable to type 'JSXComponent'.
+      jsxDEV: jsx,
+      Fragment,
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [[rehypePrismPlus, { showLineNumbers: true }]],
+    })
+  );
+}

www/hooks/use-package.tsx

@@ -1,26 +1,20 @@
-import { evaluate } from "@mdx-js/mdx";
-import { join, resolve } from "@std/path";
 import { call, type Operation } from "effection";
-import rehypeInferDescriptionMeta from "rehype-infer-description-meta";
-import rehypePrismPlus from "rehype-prism-plus";
-import rehypeStringify from "rehype-stringify";
-import remarkGfm from "remark-gfm";
-import remarkParse from "remark-parse";
-import remarkRehype from "remark-rehype";
-import { Fragment, jsx, jsxs } from "revolution/jsx-runtime";
-import { unified } from "unified";
-import type { VFile } from "vfile";
-import { z } from "zod";
+import { join, resolve } from "jsr:@std/[email protected]";
+import type { VFile } from "npm:[email protected]";
+import { z } from "npm:[email protected]";
+
 import { PrivatePackageError } from "../errors.ts";
 import { type DocNode, useDenoDoc } from "./use-deno-doc.tsx";
+import { useMDX } from "./use-mdx.tsx";
+import { useRemarkParse } from "./use-remark-parse.tsx";
 
 export interface Package {
   path: string;
   workspace: string;
   packageName: string;
   readme: string;
   exports: string | Record<string, string>;
-  docs: Array<DocNode> | Record<string, Array<DocNode>>
+  docs: Array<DocNode> | Record<string, Array<DocNode>>;
   MDXContent: () => JSX.Element;
   MDXDescription: () => JSX.Element;
 }
@@ -52,43 +46,23 @@ export function* usePackage(workspace: string): Operation<Package> {
     Deno.readTextFile(join(workspacePath, "README.md"))
   );
 
-  let mod = yield* call(() =>
-    evaluate(readme, {
-      // @ts-expect-error Type 'unknown' is not assignable to type 'JSXComponent'.
-      jsx,
-      // @ts-expect-error Type '{ (component: JSXComponent, props: JSXComponentProps): JSXElement; (element: string, props: JSXElementProps): JSXElement; }' is not assignable to type 'Jsx'.
-      jsxs,
-      // @ts-expect-error Type 'unknown' is not assignable to type 'JSXComponent'.
-      jsxDEV: jsx,
-      Fragment,
-      remarkPlugins: [remarkGfm],
-      rehypePlugins: [[rehypePrismPlus, { showLineNumbers: true }]],
-    })
-  );
+  let mod = yield* useMDX(readme);
 
   const content = mod.default({});
 
-  let file: VFile = yield* call(() =>
-    unified()
-      .use(remarkParse)
-      .use(remarkRehype)
-      .use(rehypeStringify)
-      .use(rehypeInferDescriptionMeta, {
-        inferDescriptionHast: true,
-        truncateSize: 400,
-      })
-      .process(
-        readme,
-      )
-  );
+  let file: VFile = yield* useRemarkParse(readme);
 
-  let docs: Package['docs'];
+  let docs: Package["docs"];
   if (typeof denoJson.exports === "string") {
-    docs = yield* useDenoDoc(`${new URL(join(workspacePath, denoJson.exports), 'file://')}`)
+    docs = yield* useDenoDoc(
+      `${new URL(join(workspacePath, denoJson.exports), "file://")}`,
+    );
   } else {
     docs = {};
     for (const key of Object.keys(denoJson.exports)) {
-      docs[key] = yield* useDenoDoc(`${new URL(join(workspacePath, denoJson.exports[key]), 'file://')}`)
+      docs[key] = yield* useDenoDoc(
+        `${new URL(join(workspacePath, denoJson.exports[key]), "file://")}`,
+      );
     }
   }
 
@@ -100,6 +74,6 @@ export function* usePackage(workspace: string): Operation<Package> {
     readme,
     docs,
     MDXContent: () => content,
-    MDXDescription: () => (<>{file.data?.meta?.description}</>),
+    MDXDescription: () => <>{file.data?.meta?.description}</>,
   };
-}
+}

www/hooks/use-remark-parse.tsx

@@ -0,0 +1,26 @@
+import {
+  call,
+  type Operation,
+} from "https://deno.land/x/[email protected]/mod.ts";
+import { unified } from "npm:[email protected]";
+import type { VFile } from "npm:[email protected]";
+import rehypeInferDescriptionMeta from "npm:[email protected]";
+import rehypeStringify from "npm:[email protected]";
+import remarkParse from "npm:[email protected]";
+import remarkRehype from "npm:[email protected]";
+
+export function* useRemarkParse(markdown: string): Operation<VFile> {
+  return yield* call(() =>
+    unified()
+      .use(remarkParse)
+      .use(remarkRehype)
+      .use(rehypeStringify)
+      .use(rehypeInferDescriptionMeta, {
+        inferDescriptionHast: true,
+        truncateSize: 400,
+      })
+      .process(
+        markdown,
+      )
+  );
+}

www/routes/app.html.tsx

@@ -1,6 +1,5 @@
 import type { Operation } from "effection";
 import type { JSXChild } from "revolution";
-
 import { useAbsoluteUrl } from "effection-www/plugins/rebase.ts";
 
 export interface Options {