@alepha/devtools 0.11.6 → 0.11.7

package/src/DevToolsProvider.ts

@@ -0,0 +1,134 @@
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { $batch } from "@alepha/batch";
+import { $hook, $inject, Alepha, pageQuerySchema, t } from "@alepha/core";
+import {
+  $logger,
+  JsonFormatterProvider,
+  type LogEntry,
+  logEntrySchema,
+} from "@alepha/logger";
+import { parseQueryString } from "@alepha/postgres";
+import { $route, ServerProvider } from "@alepha/server";
+import { $serve } from "@alepha/server-static";
+import { type DevLogEntry, logs } from "./entities/logs.ts";
+import { DevToolsMetadataProvider } from "./providers/DevToolsMetadataProvider.ts";
+import { LogRepository } from "./repositories/LogRepository.ts";
+import { devMetadataSchema } from "./schemas/DevMetadata.ts";
+
+export class DevToolsProvider {
+  protected readonly log = $logger();
+  protected readonly alepha = $inject(Alepha);
+  protected readonly serverProvider = $inject(ServerProvider);
+  protected readonly jsonFormatter = $inject(JsonFormatterProvider);
+  protected readonly logs = $inject(LogRepository);
+  protected readonly devCollectorProvider = $inject(DevToolsMetadataProvider);
+
+  protected readonly onStart = $hook({
+    on: "start",
+    handler: () => {
+      this.log.info(
+        `Devtools available at ${this.serverProvider.hostname}/devtools/`,
+      );
+    },
+  });
+
+  protected batchLogs = $batch({
+    maxSize: 50,
+    maxDuration: [10, "seconds"],
+    schema: logs.insertSchema,
+    handler: async (entries) => {
+      await this.logs.createMany(entries);
+    },
+  });
+
+  protected readonly onLog = $hook({
+    on: "log",
+    handler: async (ev: { message?: string; entry: LogEntry }) => {
+      // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      // CAUTION: It's very easy to create an infinite loop here.
+      // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
+      try {
+        if (!this.alepha.isStarted()) {
+          return;
+        }
+
+        if (ev.entry.module === "alepha.devtools") {
+          // skip devtools logs to avoid infinite loop
+          return;
+        }
+
+        if (ev.entry.level === "TRACE" && ev.entry.module === "alepha.batch") {
+          // skip batch trace logs to avoid infinite loop
+          return;
+        }
+
+        if (this.alepha.isProduction() && ev.entry.level === "TRACE") {
+          // skip trace logs in production
+          return;
+        }
+
+        const entry = {
+          ...ev.entry,
+          data:
+            ev.entry.data instanceof Error
+              ? this.jsonFormatter.formatJsonError(ev.entry.data)
+              : typeof ev.entry.data === "object" &&
+                  !Array.isArray(ev.entry.data)
+                ? ev.entry.data
+                : { data: ev.entry.data },
+        };
+
+        await this.batchLogs.push(entry as DevLogEntry);
+      } catch (error) {
+        // DO TO NOT WITH THE LOGGER HERE TO AVOID INFINITE LOOP
+        console.error(error, ev);
+      }
+    },
+  });
+
+  protected readonly uiRoute = $serve({
+    path: "/devtools",
+    root: join(fileURLToPath(import.meta.url), "../../assets/devtools"),
+    historyApiFallback: true,
+  });
+
+  protected readonly metadataRoute = $route({
+    method: "GET",
+    path: "/devtools/api/metadata",
+    silent: true,
+    schema: {
+      response: devMetadataSchema,
+    },
+    handler: () => {
+      return this.devCollectorProvider.getMetadata();
+    },
+  });
+
+  protected readonly logsRoute = $route({
+    method: "GET",
+    path: "/devtools/api/logs",
+    silent: true,
+    schema: {
+      query: t.extend(pageQuerySchema, {
+        search: t.optional(t.string()),
+      }),
+      response: t.page(logEntrySchema),
+    },
+    handler: ({ query }) => {
+      query.sort ??= "-timestamp";
+      return this.logs.paginate(
+        query,
+        query.search
+          ? {
+              where: parseQueryString(query.search),
+            }
+          : {},
+        {
+          count: true,
+        },
+      );
+    },
+  });
+}

package/src/entities/logs.ts

@@ -0,0 +1,21 @@
+import { type Static, t } from "@alepha/core";
+import { $entity, pg } from "@alepha/postgres";
+
+export const logs = $entity({
+  name: "logs",
+  schema: t.object({
+    id: pg.primaryKey(),
+    level: t.enum(["TRACE", "DEBUG", "INFO", "WARN", "ERROR"]),
+    message: t.text({
+      size: "rich",
+    }),
+    service: t.text(),
+    module: t.text(),
+    context: t.optional(t.text()),
+    app: t.optional(t.text()),
+    data: t.optional(t.json()),
+    timestamp: t.datetime(),
+  }),
+});
+
+export type DevLogEntry = Static<typeof logs.schema>;

package/src/index.ts

@@ -1,9 +1,12 @@
 import { $module } from "@alepha/core";
-import { DevCollectorProvider } from "./DevCollectorProvider.ts";
+import { DevToolsProvider } from "./DevToolsProvider.ts";
+import { DevToolsDatabaseProvider } from "./providers/DevToolsDatabaseProvider.ts";
+import { DevToolsMetadataProvider } from "./providers/DevToolsMetadataProvider.ts";
+import { LogRepository } from "./repositories/LogRepository.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export * from "./DevCollectorProvider.ts";
+export * from "./providers/DevToolsMetadataProvider.ts";
 export * from "./schemas/DevActionMetadata.ts";
 export * from "./schemas/DevBucketMetadata.ts";
 export * from "./schemas/DevCacheMetadata.ts";
@@ -24,15 +27,22 @@ export * from "./schemas/DevTopicMetadata.ts";
  * This module provides comprehensive data collection capabilities for tracking application behavior,
  * performance metrics, and debugging information in real-time.
  *
- * @see {@link DevCollectorProvider}
+ * @see {@link DevToolsMetadataProvider}
  * @module alepha.devtools
  */
 export const AlephaDevtools = $module({
   name: "alepha.devtools",
   descriptors: [],
-  services: [DevCollectorProvider],
+  services: [
+    DevToolsMetadataProvider,
+    DevToolsProvider,
+    DevToolsDatabaseProvider,
+    LogRepository,
+  ],
   register: (alepha) => {
-    alepha.with(DevCollectorProvider);
+    alepha.with(DevToolsProvider);
+    alepha.with(DevToolsDatabaseProvider);
+    alepha.with(DevToolsMetadataProvider);
     alepha.state.push("alepha.build.assets", "@alepha/devtools");
   },
 });

package/src/providers/DevToolsDatabaseProvider.ts

@@ -0,0 +1,11 @@
+import { NodeSqliteProvider } from "@alepha/postgres";
+
+export class DevToolsDatabaseProvider extends NodeSqliteProvider {
+  public get name() {
+    return "devtools";
+  }
+
+  protected readonly options = {
+    path: ":memory:",
+  };
+}

package/src/{DevCollectorProvider.ts → providers/DevToolsMetadataProvider.ts}

@@ -1,158 +1,28 @@
-import { join } from "node:path";
-import { fileURLToPath } from "node:url";
-import { $batch } from "@alepha/batch";
 import { $bucket } from "@alepha/bucket";
 import { $cache } from "@alepha/cache";
-import { $hook, $inject, Alepha, pageQuerySchema, t } from "@alepha/core";
-import { $logger, type LogEntry, logEntrySchema } from "@alepha/logger";
-import {
-  $entity,
-  NodeSqliteProvider,
-  parseQueryString,
-  pg,
-} from "@alepha/postgres";
-import { Repository } from "@alepha/postgres/src/services/Repository.ts";
+import { $inject, Alepha } from "@alepha/core";
+import { $logger } from "@alepha/logger";
 import { $queue } from "@alepha/queue";
 import { $scheduler } from "@alepha/scheduler";
 import { $realm } from "@alepha/security";
-import { $action, $route, ServerProvider } from "@alepha/server";
-import { $serve } from "@alepha/server-static";
+import { $action } from "@alepha/server";
 import { $topic } from "@alepha/topic";
-import type { DevActionMetadata } from "./schemas/DevActionMetadata.ts";
-import type { DevBucketMetadata } from "./schemas/DevBucketMetadata.ts";
-import type { DevCacheMetadata } from "./schemas/DevCacheMetadata.ts";
-import { type DevMetadata, devMetadataSchema } from "./schemas/DevMetadata.ts";
-import type { DevModuleMetadata } from "./schemas/DevModuleMetadata.ts";
-import type { DevPageMetadata } from "./schemas/DevPageMetadata.ts";
-import type { DevProviderMetadata } from "./schemas/DevProviderMetadata.ts";
-import type { DevQueueMetadata } from "./schemas/DevQueueMetadata.ts";
-import type { DevRealmMetadata } from "./schemas/DevRealmMetadata.ts";
-import type { DevSchedulerMetadata } from "./schemas/DevSchedulerMetadata.ts";
-import type { DevTopicMetadata } from "./schemas/DevTopicMetadata.ts";
-
-class DevToolsDatabaseProvider extends NodeSqliteProvider {
-  get name() {
-    return "devtools";
-  }
-  options = {
-    path: ":memory:",
-  };
-}
-
-const logs = $entity({
-  name: "logs",
-  schema: t.object({
-    id: pg.primaryKey(),
-    level: t.enum(["SILENT", "TRACE", "DEBUG", "INFO", "WARN", "ERROR"]),
-    message: t.text({
-      size: "rich",
-    }),
-    service: t.text(),
-    module: t.text(),
-    context: t.optional(t.text()),
-    app: t.optional(t.text()),
-    data: t.optional(t.json()),
-    timestamp: t.datetime(),
-  }),
-});
-
-class LogRepository extends Repository<typeof logs.schema> {
-  constructor() {
-    super(logs, DevToolsDatabaseProvider);
-  }
-}
-
-export class DevCollectorProvider {
+import type { DevActionMetadata } from "../schemas/DevActionMetadata.ts";
+import type { DevBucketMetadata } from "../schemas/DevBucketMetadata.ts";
+import type { DevCacheMetadata } from "../schemas/DevCacheMetadata.ts";
+import type { DevMetadata } from "../schemas/DevMetadata.ts";
+import type { DevModuleMetadata } from "../schemas/DevModuleMetadata.ts";
+import type { DevPageMetadata } from "../schemas/DevPageMetadata.ts";
+import type { DevProviderMetadata } from "../schemas/DevProviderMetadata.ts";
+import type { DevQueueMetadata } from "../schemas/DevQueueMetadata.ts";
+import type { DevRealmMetadata } from "../schemas/DevRealmMetadata.ts";
+import type { DevSchedulerMetadata } from "../schemas/DevSchedulerMetadata.ts";
+import type { DevTopicMetadata } from "../schemas/DevTopicMetadata.ts";
+
+export class DevToolsMetadataProvider {
   protected readonly alepha = $inject(Alepha);
-  protected readonly serverProvider = $inject(ServerProvider);
-  protected readonly sqliteProvider = $inject(DevToolsDatabaseProvider);
   protected readonly log = $logger();
 
-  logs = $inject(LogRepository);
-
-  protected readonly onStart = $hook({
-    on: "start",
-    handler: () => {
-      this.log.info(
-        `Devtools available at ${this.serverProvider.hostname}/devtools/`,
-      );
-    },
-  });
-
-  protected batchLogs = $batch({
-    maxSize: 50,
-    maxDuration: [10, "seconds"],
-    schema: logEntrySchema,
-    handler: async (entries: LogEntry[]) => {
-      await this.logs.createMany(entries);
-    },
-  });
-
-  protected readonly onLog = $hook({
-    on: "log",
-    handler: async (ev: { message?: string; entry: LogEntry }) => {
-      if (!this.alepha.isReady()) {
-        return;
-      }
-
-      if (ev.entry.level === "TRACE" && ev.entry.module === "alepha.batch") {
-        // skip batch trace logs to avoid infinite loop
-        return;
-      }
-
-      await this.batchLogs.push(ev.entry);
-    },
-  });
-
-  protected readonly uiRoute = $serve({
-    path: "/devtools",
-    root: join(fileURLToPath(import.meta.url), "../../assets/devtools"),
-    historyApiFallback: true,
-  });
-
-  protected readonly metadataRoute = $route({
-    method: "GET",
-    path: "/devtools/api/metadata",
-    silent: true,
-    schema: {
-      response: devMetadataSchema,
-    },
-    handler: () => {
-      return this.getMetadata();
-    },
-  });
-
-  protected readonly logsRoute = $route({
-    method: "GET",
-    path: "/devtools/api/logs",
-    silent: true,
-    schema: {
-      query: t.interface([pageQuerySchema], {
-        search: t.optional(t.string()),
-      }),
-      response: t.page(logEntrySchema),
-    },
-    handler: ({ query }) => {
-      query.sort ??= "-timestamp";
-      if (query.search) {
-        console.log(parseQueryString(query.search));
-      }
-      return this.logs.paginate(
-        query,
-        query.search
-          ? {
-              where: parseQueryString(query.search),
-            }
-          : {},
-        {
-          count: true,
-        },
-      );
-    },
-  });
-
-  // -------------------------------------------------------------------------------------------------------------------
-
   public getActions(): DevActionMetadata[] {
     const actionDescriptors = this.alepha.descriptors($action);
 

package/src/repositories/LogRepository.ts

@@ -0,0 +1,9 @@
+import { Repository } from "@alepha/postgres";
+import { logs } from "../entities/logs.ts";
+import { DevToolsDatabaseProvider } from "../providers/DevToolsDatabaseProvider.ts";
+
+export class LogRepository extends Repository<typeof logs.schema> {
+  constructor() {
+    super(logs, DevToolsDatabaseProvider);
+  }
+}

package/src/ui/AppRouter.tsx

@@ -1,74 +1,11 @@
 import { $page } from "@alepha/react";
-import {
-  AdminShell,
-  DarkModeButton,
-  OmnibarButton,
-  RootRouter,
-  Text,
-  ui,
-} from "@alepha/ui";
-import ToggleSidebarButton from "@alepha/ui/src/components/buttons/ToggleSidebarButton.tsx";
+import { RootRouter } from "@alepha/ui";
 import { IconDashboard, IconLogs } from "@tabler/icons-react";
-import DevLogs from "./DevLogs.tsx";
 
 export class AppRouter extends RootRouter {
   layout = $page({
     parent: this.root,
-    component: () => (
-      <AdminShell
-        appShellProps={{
-          bg: ui.colors.surface,
-        }}
-        appShellNavbarProps={{
-          bg: ui.colors.transparent,
-        }}
-        appShellHeaderProps={{
-          bg: ui.colors.transparent,
-          style: {
-            backdropFilter: "blur(10px)",
-          },
-        }}
-        sidebarProps={{
-          gap: "xs",
-          menu: [
-            {
-              element: <ToggleSidebarButton />,
-            },
-            {
-              label: "Dashboard",
-              icon: <IconDashboard />,
-              href: "/",
-            },
-            {
-              label: "Logs",
-              icon: <IconLogs />,
-              href: "/logs",
-            },
-          ],
-        }}
-        appBarProps={{
-          items: [
-            { position: "left", type: "burger" },
-            {
-              position: "left",
-              element: (
-                <Text fw="bold" size="lg">
-                  Alepha DevTools
-                </Text>
-              ),
-            },
-            {
-              position: "center",
-              element: <OmnibarButton />,
-            },
-            {
-              position: "right",
-              element: <DarkModeButton />,
-            },
-          ],
-        }}
-      />
-    ),
+    lazy: () => import("./components/DevLayout.tsx"),
   });
 
   dashboard = $page({
@@ -86,6 +23,6 @@ export class AppRouter extends RootRouter {
     icon: <IconLogs />,
     static: true,
     parent: this.layout,
-    component: DevLogs,
+    lazy: () => import("./components/DevLogViewer.tsx"),
   });
 }

package/src/ui/components/DevLayout.tsx

@@ -0,0 +1,80 @@
+import { NestedView } from "@alepha/react";
+import {
+  ActionButton,
+  AdminShell,
+  DarkModeButton,
+  Flex,
+  OmnibarButton,
+  ui,
+} from "@alepha/ui";
+import { IconDashboard, IconLogs, IconTools } from "@tabler/icons-react";
+
+export const DevLayout = () => {
+  return (
+    <AdminShell
+      appShellProps={{
+        withBorder: false,
+        bg: ui.colors.surface,
+      }}
+      appShellNavbarProps={{
+        bg: ui.colors.transparent,
+      }}
+      appShellHeaderProps={{
+        bg: ui.colors.transparent,
+        style: {
+          backdropFilter: "blur(10px)",
+        },
+      }}
+      sidebarProps={{
+        gap: "xs",
+        collapsed: true,
+        menu: [
+          {
+            label: "Dashboard",
+            icon: <IconDashboard />,
+            href: "/",
+          },
+          {
+            label: "Logs",
+            icon: <IconLogs />,
+            href: "/logs",
+          },
+        ],
+      }}
+      appBarProps={{
+        items: [
+          { position: "left", type: "burger" },
+          {
+            position: "left",
+            element: (
+              <ActionButton icon={<IconTools />} href={"/"} active={false}>
+                Devtools
+              </ActionButton>
+            ),
+          },
+          {
+            position: "center",
+            element: <OmnibarButton />,
+          },
+          {
+            position: "right",
+            element: <DarkModeButton />,
+          },
+        ],
+      }}
+    >
+      <Flex
+        bd={`1px solid ${ui.colors.border}`}
+        bg={ui.colors.elevated}
+        bdrs={"lg"}
+        p={"xl"}
+        ml={-8}
+        mt={-8}
+      >
+        <NestedView />
+      </Flex>
+    </AdminShell>
+  );
+};
+
+export default DevLayout;