@alepha/devtools 0.11.5 → 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.state.push("assets", "@alepha/devtools");
+    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,90 +1,27 @@
-import { join } from "node:path";
-import { fileURLToPath } from "node:url";
 import { $bucket } from "@alepha/bucket";
 import { $cache } from "@alepha/cache";
-import { $hook, $inject, Alepha, t } from "@alepha/core";
-import { $logger, type LogEntry, logEntrySchema } from "@alepha/logger";
+import { $inject, Alepha } from "@alepha/core";
+import { $logger } from "@alepha/logger";
 import { $queue } from "@alepha/queue";
-import { $page } from "@alepha/react";
 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";
-
-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 log = $logger();
-  protected readonly logs: LogEntry[] = [];
-  protected readonly maxLogs = 10000;
-
-  protected readonly onStart = $hook({
-    on: "start",
-    handler: () => {
-      this.log.info(
-        `Devtools available at ${this.serverProvider.hostname}/devtools/`,
-      );
-    },
-  });
-
-  protected readonly onLog = $hook({
-    on: "log",
-    handler: (ev: { message?: string; entry: LogEntry }) => {
-      this.logs.unshift(ev.entry);
-
-      // keep only the last 10000 logs
-      if (this.logs.length > this.maxLogs) {
-        this.logs.pop();
-      }
-    },
-  });
-
-  protected readonly uiRoute = $serve({
-    path: "/devtools",
-    root: join(fileURLToPath(import.meta.url), "../../assets/devtools"),
-  });
-
-  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: {
-      response: t.array(logEntrySchema),
-    },
-    handler: () => {
-      return this.getLogs();
-    },
-  });
-
-  public getLogs(): LogEntry[] {
-    return this.logs;
-  }
-
-  // -------------------------------------------------------------------------------------------------------------------
 
   public getActions(): DevActionMetadata[] {
     const actionDescriptors = this.alepha.descriptors($action);
@@ -191,28 +128,30 @@ export class DevCollectorProvider {
   }
 
   public getPages(): DevPageMetadata[] {
-    const pageDescriptors = this.alepha.descriptors($page);
-
-    return pageDescriptors.map((page) => ({
-      name: page.name,
-      description: page.options.description,
-      path: page.options.path,
-      params: page.options.schema?.params,
-      query: page.options.schema?.query,
-      hasComponent: !!page.options.component,
-      hasLazy: !!page.options.lazy,
-      hasResolve: !!page.options.resolve,
-      hasChildren: !!page.options.children,
-      hasParent: !!page.options.parent,
-      hasErrorHandler: !!page.options.errorHandler,
-      static:
-        typeof page.options.static === "boolean"
-          ? page.options.static
-          : !!page.options.static,
-      cache: page.options.cache,
-      client: page.options.client,
-      animation: page.options.animation,
-    }));
+    // const pageDescriptors = this.alepha.descriptors($page);
+    //
+    // return pageDescriptors.map((page) => ({
+    //   name: page.name,
+    //   description: page.options.description,
+    //   path: page.options.path,
+    //   params: page.options.schema?.params,
+    //   query: page.options.schema?.query,
+    //   hasComponent: !!page.options.component,
+    //   hasLazy: !!page.options.lazy,
+    //   hasResolve: !!page.options.resolve,
+    //   hasChildren: !!page.options.children,
+    //   hasParent: !!page.options.parent,
+    //   hasErrorHandler: !!page.options.errorHandler,
+    //   static:
+    //     typeof page.options.static === "boolean"
+    //       ? page.options.static
+    //       : !!page.options.static,
+    //   cache: page.options.cache,
+    //   client: page.options.client,
+    //   animation: page.options.animation,
+    // }));
+
+    return [];
   }
 
   public getProviders(): DevProviderMetadata[] {

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,44 +1,11 @@
 import { $page } from "@alepha/react";
-import { AdminShell, RootRouter, Text, ui } from "@alepha/ui";
+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={{
-          collapsed: true,
-          gap: "xs",
-        }}
-        appBarProps={{
-          items: [
-            { position: "left", type: "burger" },
-            {
-              position: "center",
-              element: (
-                <Text fw="bold" size="lg">
-                  Alepha DevTools
-                </Text>
-              ),
-            },
-          ],
-        }}
-      />
-    ),
+    lazy: () => import("./components/DevLayout.tsx"),
   });
 
   dashboard = $page({
@@ -56,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;