swagger init

components/SwaggerCard.tsx

@@ -0,0 +1,10 @@
+import { Card } from "react-bootstrap";
+
+export const SwaggerCard = () => {
+  return (
+    <Card bg="primary">
+      <Card.Header>API Endpoints</Card.Header>
+      <Card.Body></Card.Body>
+    </Card>
+  );
+};

initializers/react.ts

@@ -3,6 +3,7 @@ import { Initializer } from "../classes/Initializer";
 import path from "path";
 import { Glob, type BuildConfig } from "bun";
 import { watch } from "fs";
+import { unlink } from "node:fs/promises";
 
 const namespace = "react";
 
@@ -42,14 +43,7 @@ export class React extends Initializer {
       pages.push(path.join(pagesDir, f));
     }
 
-    const transpileAllPages = async () => {
-      await Bun.build({
-        ...{ entrypoints: pages },
-        ...transpilerOptions,
-      });
-    };
-
-    await transpileAllPages();
+    await transpileAllPages(pages);
 
     logger.info(
       `Transpiled ${pages.length} react pages to ${transpiledPagesDir}`,
@@ -74,7 +68,7 @@ export class React extends Initializer {
 
         const fullFilename = path.join(pagesDir, filename);
         logger.trace(`Detected ${event} in ${fullFilename}`);
-        await transpileAllPages(); // TODO: this can certainly be optimized by walking the react trees...
+        await transpileAllPages(pages); // TODO: this can certainly be optimized by walking the react trees...
       },
     );
 
@@ -91,3 +85,16 @@ export class React extends Initializer {
     if (api.react.componentsDirWatcher) api.react.componentsDirWatcher.close();
   }
 }
+
+const transpileAllPages = async (pages: string[]) => {
+  // we need to clear the directory to remove dangling pages that were deleted
+  const glob = new Glob("**/*.{js}");
+  for await (const f of glob.scan(transpiledPagesDir)) {
+    await unlink(path.join(transpiledPagesDir, f));
+  }
+
+  await Bun.build({
+    ...{ entrypoints: pages },
+    ...transpilerOptions,
+  });
+};

pages/index.tsx

@@ -4,6 +4,7 @@ import { mount } from "../util/browser";
 import { StatusCard } from "../components/StatusCard";
 import { MainLayout } from "../layouts/main";
 import { HelloCard } from "../components/HelloCard";
+import { SwaggerCard } from "../components/SwaggerCard";
 
 export default function Page() {
   return (
@@ -20,6 +21,12 @@ export default function Page() {
             <HelloCard />
           </Col>
         </Row>
+        <br />
+        <Row>
+          <Col md={12}>
+            <SwaggerCard />
+          </Col>
+        </Row>
       </Container>
     </MainLayout>
   );

servers/web.ts

@@ -100,7 +100,6 @@ export class WebServer extends Server<ReturnType<typeof Bun.serve>> {
       } catch {}
     }
 
-    // TODO: fork for files vs actions vs pages
     const { response, error } = await connection.act(
       actionName,
       params,