Merge pull request #822 from thefrontside/reduce-www-startup-time

Parallelize documentation loading

www/deno.json

@@ -19,7 +19,7 @@
   "imports": {
     "effection": "../mod.ts",
     "freejack/": "./lib/",
-    "hastx/": "https://deno.land/x/[email protected].5/",
+    "hastx/": "https://deno.land/x/[email protected].8/",
     "hastx/jsx-runtime": "https://deno.land/x/[email protected]/jsx-runtime.ts"
   }
 }

www/docs/actions.mdx

@@ -1,5 +1,4 @@
 ---
-id: actions
 title: Actions and Suspensions
 ---
 

www/docs/collections.mdx

@@ -1,5 +1,4 @@
 ---
-id: collections
 title: Streams and Subscriptions
 ---
 

www/docs/docs.ts

@@ -1,6 +1,8 @@
-import { createContext, expect, type Operation } from "effection";
+import { createContext, all, call, spawn, type Operation, type Task } from "effection";
 import structure from "./structure.json" assert { type: "json" };
 
+import { basename } from "https://deno.land/[email protected]/path/posix/basename.ts";
+
 import remarkFrontmatter from "npm:[email protected]";
 import remarkMdxFrontmatter from "npm:[email protected]";
 import remarkGfm from "npm:[email protected]";
@@ -22,8 +24,8 @@ export interface DocModule {
 }
 
 export interface Docs {
-  getTopics(): Topic[];
-  getDoc(id: string): Doc | undefined;
+  getTopics(): Operation<Topic[]>;
+  getDoc(id?: string): Operation<Doc | undefined>;
 }
 
 export interface Topic {
@@ -36,24 +38,31 @@ export interface Doc {
   title: string;
   MDXContent: () => JSX.Element;
   filename: string;
-  previous?: Doc;
-  next?: Doc;
+  nextId?: string;
+  previousId?: string;
 }
 
 export function* loadDocs(): Operation<Docs> {
-  let topics: Topic[] = [];
-  let docs: Record<string, Doc> = {};
-  let current: Doc | undefined;
+  let topics = new Map<string, Topic>();
+
+  let loaders = new Map<string, Task<Doc>>();
+
+  let entries = Object.entries(structure);
 
-  for (let [topicName, files] of Object.entries(structure)) {
-    let topic = { name: topicName, items: [] } as Topic;
+  let files = entries.flatMap(([topicName, files]) => {
+    return files.map(filename => ({ topicName, filename, id: basename(filename, ".mdx") }));
+  })
 
-    topics.push(topic);
+  for (let i = 0; i < files.length; i++ ) {
+    let file = files[i];
+    let nextId = files[i + 1]?.id;
+    let previousId = files[i - 1]?.id;
+    let { topicName, filename, id } = file;
+    let location = new URL(filename, import.meta.url);
 
-    for (let filename of files) {
-      let location = new URL(filename, import.meta.url);
-      let source = yield* expect(Deno.readTextFile(location));
-      let mod = yield* expect(evaluate(source, {
+    loaders.set(id, yield* spawn(function*() {
+      let source = yield* call(Deno.readTextFile(location));
+      let mod = yield* call(evaluate(source, {
         jsx,
         jsxs,
         jsxDEV: jsx,
@@ -68,27 +77,43 @@ export function* loadDocs(): Operation<Docs> {
         ],
       }));
 
-      let { id, title } = mod.frontmatter as { id: string; title: string };
+      let { title } = mod.frontmatter as { id: string; title: string };
 
-      let previous = current;
 
-      let doc = current = {
+      let doc: Doc = {
         id,
+        nextId,
+        previousId,
         title,
         filename,
         MDXContent: () => mod.default({}),
-        previous,
       } as Doc;
 
-      topic.items.push(doc);
-      docs[id] = doc;
-      if (previous) {
-        previous.next = doc;
+      let topic = topics.get(topicName);
+      if (!topic) {
+        topic = { name: topicName, items: [] };
+        topics.set(topicName, topic);
       }
-    }
+
+      topic.items.push(doc);
+
+      return doc;
+    }));
+
   }
-  return {
-    getTopics: () => topics,
-    getDoc: (id) => docs[id],
-  };
+
+  return yield* Docs.set({
+    *getTopics() {
+      yield* all([...loaders.values()]);
+      return [...topics.values()];
+    },
+    *getDoc(id) {
+      if (id) {
+        let task = loaders.get(id);
+        if (task) {
+          return yield* task;
+        }
+      }
+    },
+  });
 }

www/docs/errors.mdx

@@ -1,5 +1,4 @@
 ---
-id: errors
 title: Errors
 ---
 

www/docs/events.mdx

@@ -1,5 +1,4 @@
 ---
-id: events
 title: Events
 ---
 

www/docs/inspector.mdx

@@ -1,5 +1,4 @@
 ---
-id: inspector
 title: Inspector
 ---
 

www/docs/introduction.mdx

@@ -1,5 +1,4 @@
 ---
-id: introduction
 title: Introduction
 ---
 

www/docs/operations.mdx

@@ -1,5 +1,4 @@
 ---
-id: operations
 title: Operations
 ---
 

www/docs/processes.mdx

@@ -1,5 +1,4 @@
 ---
-id: processes
 title: Spawning processes
 ---
 

www/docs/resources.mdx

@@ -1,5 +1,4 @@
 ---
-id: resources
 title: Resources
 ---
 

www/docs/scope.mdx

@@ -1,5 +1,4 @@
 ---
-id: scope
 title: Scope
 ---
 

www/docs/spawn.mdx

@@ -1,5 +1,4 @@
 ---
-id: spawn
 title: Spawn
 ---
 

www/docs/testing.mdx

@@ -1,5 +1,4 @@
 ---
-id: testing
 title: Testing
 ---
 

www/docs/typescript.mdx

@@ -1,5 +1,4 @@
 ---
-id: typescript
 title: TypeScript
 ---
 

www/html/document.html.tsx

@@ -11,7 +11,9 @@ import rehypeToc from "npm:@jsdevtools/[email protected]";
 
 export default function* (doc: Doc): Operation<JSX.Element> {
   let docs = yield* useDocs();
-  let topics = docs.getTopics();
+  let topics = yield* docs.getTopics();
+  let next = yield* docs.getDoc(doc.nextId);
+  let prev = yield* docs.getDoc(doc.previousId);
 
   return (
     <section class="mx-auto md:pt-8 w-full justify-items-normal md:grid md:grid-cols-[225px_auto] lg:grid-cols-[225px_auto_200px] md:gap-4">
@@ -114,38 +116,38 @@ export default function* (doc: Doc): Operation<JSX.Element> {
           >
             <doc.MDXContent />
           </Rehype>
-          <NextPrevLinks doc={doc} />
+          <NextPrevLinks prev={prev} next={next} />
         </article>
       </Transform>
     </section>
   );
 }
 
-function NextPrevLinks({ doc }: { doc: Doc }): JSX.Element {
+function NextPrevLinks({ next, prev }: { next?: Doc, prev?: Doc }): JSX.Element {
   return (
     <menu class="grid grid-cols-2 my-10 gap-x-2 xl:gap-x-20 2xl:gap-x-40 text-lg">
-      {doc.previous
+      {prev
         ? (
           <li class="col-start-1 text-left font-light border-1 rounded-lg p-4">
             Previous
             <a
               class="py-2 block text-xl font-bold text-blue-primary no-underline tracking-wide leading-5 before:content-['«&nbsp;'] before:font-normal"
-              href={`/docs/${doc.previous.id}`}
+              href={`/docs/${prev.id}`}
             >
-              {doc.previous.title}
+              {prev.title}
             </a>
           </li>
         )
         : <li />}
-      {doc.next
+      {next
         ? (
           <li class="col-start-2 text-right font-light border-1 rounded-lg p-4">
             Next
             <a
               class="py-2 block text-xl font-bold text-blue-primary no-underline tracking-wide leading-5 after:content-['&nbsp;»'] after:font-normal"
-              href={`/docs/${doc.next.id}`}
+              href={`/docs/${next.id}`}
             >
-              {doc.next.title}
+              {next.title}
             </a>
           </li>
         )

www/server.ts

@@ -1,15 +1,15 @@
 import { serve } from "freejack/server.ts";
 import { html } from "freejack/html.ts";
 import { render } from "freejack/view.ts";
-import { Docs, loadDocs, useDocs } from "./docs/docs.ts";
+import { Docs, loadDocs } from "./docs/docs.ts";
 import { useV2Docs } from "./hooks/use-v2-docs.ts";
 
 import { AppHtml, DocumentHtml, IndexHtml } from "./html/templates.ts";
 
 export default function* start() {
   let v2docs = yield* useV2Docs({
     fetchEagerly: !!Deno.env.get("V2_DOCS_FETCH_EAGERLY"),
-    revision: Number(Deno.env.get("V2_DOCS_REVISION")) ?? 4,
+    revision: Number(Deno.env.get("V2_DOCS_REVISION") ?? 4),
   });
 
   let docs = yield* loadDocs();
@@ -24,9 +24,8 @@ export default function* start() {
     }),
 
     "/docs/:id": html.get(function* ({ id }) {
-      let docs = yield* useDocs();
 
-      let doc = docs.getDoc(id);
+      let doc = yield* docs.getDoc(id);
 
       if (!doc) {
         return { name: "h1", attrs: {}, children: ["Not Found"] };