feat(dev-server, repack): add dev server API

.changeset/angry-horses-poke.md

@@ -0,0 +1,11 @@
+---
+"@callstack/repack-dev-server": minor
+---
+
+### Development server API
+
+Added API endpoints to `@callstack/repack-dev-server`:
+- `GET /api/platforms` - List all platforms with active compilations
+- `GET /api/:platform/assets` - List all assets (`name` and `size`) for a given compilation
+- `GET /api/:platform/stats` - Get compilation stats
+- Websocket server under `/api` URI for logs and compilations events 

.changeset/itchy-dryers-sparkle.md

@@ -0,0 +1,11 @@
+---
+"@callstack/repack": minor
+---
+
+### Development server API
+
+Added implementation for API functionalities in `@callstack/repack-dev-server`:
+- `GET /api/platforms` - List all platforms with active compilations
+- `GET /api/:platform/assets` - List all assets (`name` and `size`) for a given compilation
+- `GET /api/:platform/stats` - Get Webpack compilation stats
+- Websocket server under `/api` URI for logs and compilations events 

.changeset/pre.json

@@ -10,7 +10,9 @@
     "website": "0.0.1"
   },
   "changesets": [
+    "angry-horses-poke",
     "gold-ears-switch",
+    "itchy-dryers-sparkle",
     "red-garlics-perform",
     "selfish-rings-do",
     "tame-bats-shake"

packages/TesterApp/package.json

@@ -14,7 +14,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@callstack/repack": "3.0.0-next.1",
+    "@callstack/repack": "3.0.0-next.2",
     "@react-native-async-storage/async-storage": "^1.15.4",
     "lodash.throttle": "^4.1.1",
     "react": "17.0.2",

packages/dev-server/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @callstack/repack-dev-server
 
+## 1.0.0-next.1
+
+### Minor Changes
+
+- ### Development server API
+
+  Added API endpoints to `@callstack/repack-dev-server`:
+
+  - `GET /api/platforms` - List all platforms with active compilations
+  - `GET /api/:platform/assets` - List all assets (`name` and `size`) for a given compilation
+  - `GET /api/:platform/stats` - Get compilation stats
+  - Websocket server under `/api` URI for logs and compilations events
+
 ## 1.0.0-next.0
 
 ### Major Changes

packages/dev-server/package.json

@@ -2,7 +2,7 @@
   "name": "@callstack/repack-dev-server",
   "description": "A bundler-agnostic development server for React Native applications as part of @callstack/repack.",
   "license": "MIT",
-  "version": "1.0.0-next.0",
+  "version": "1.0.0-next.1",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

packages/dev-server/src/createServer.ts

@@ -6,6 +6,7 @@ import debuggerAppPath from '@callstack/repack-debugger-app';
 import multipartPlugin from './plugins/multipart';
 import compilerPlugin from './plugins/compiler';
 import devtoolsPlugin from './plugins/devtools';
+import apiPlugin from './plugins/api';
 import wssPlugin from './plugins/wss';
 import { Internal, Server } from './types';
 import symbolicatePlugin from './plugins/symbolicate';
@@ -17,30 +18,34 @@ import symbolicatePlugin from './plugins/symbolicate';
  * @returns `start` and `stop` functions as well as an underlying Fastify `instance`.
  */
 export async function createServer(config: Server.Config) {
+  let delegate: Server.Delegate;
+
   /** Fastify instance powering the development server. */
   const instance = Fastify({
     logger: {
       level: 'trace',
       stream: new Writable({
         write: (chunk, _encoding, callback) => {
-          delegate.logger.onMessage(JSON.parse(chunk.toString()));
+          const log = JSON.parse(chunk.toString());
+          delegate?.logger.onMessage(log);
+          instance.wss.apiServer.send(log);
           callback();
         },
       }),
     },
     ...(config.options.https ? { https: config.options.https } : undefined),
   });
 
-  const delegate = config.delegate({
+  delegate = config.delegate({
     log: instance.log,
     notifyBuildStart: (platform) => {
-      instance.wss.dashboardServer.send({
+      instance.wss.apiServer.send({
         event: Internal.EventTypes.BuildStart,
         platform,
       });
     },
     notifyBuildEnd: (platform) => {
-      instance.wss.dashboardServer.send({
+      instance.wss.apiServer.send({
         event: Internal.EventTypes.BuildEnd,
         platform,
       });
@@ -60,6 +65,10 @@ export async function createServer(config: Server.Config) {
     delegate,
   });
   await instance.register(multipartPlugin);
+  await instance.register(apiPlugin, {
+    delegate,
+    prefix: '/api',
+  });
   await instance.register(compilerPlugin, {
     delegate,
   });

packages/dev-server/src/plugins/api/apiPlugin.ts

@@ -0,0 +1,51 @@
+import type { FastifyInstance } from 'fastify';
+import type { Server } from '../../types';
+
+const paramsSchema = {
+  type: 'object',
+  properties: {
+    platform: {
+      type: 'string',
+    },
+  },
+  required: ['platform'],
+};
+
+type Params = { platform: string };
+
+async function apiPlugin(
+  instance: FastifyInstance,
+  { delegate }: { delegate: Server.Delegate }
+) {
+  instance.get('/platforms', async (_request, reply) =>
+    delegate.api
+      ? reply.send({ data: await delegate.api.getPlatforms() })
+      : reply.notImplemented('Missing API delegate implementation')
+  );
+
+  instance.get<{ Params: Params }>(
+    '/:platform/assets',
+    { schema: { params: paramsSchema } },
+    async (request, reply) =>
+      delegate.api
+        ? reply.send({
+            data: await delegate.api.getAssets(request.params.platform),
+          })
+        : reply.notImplemented('Missing API delegate implementation')
+  );
+
+  instance.get<{ Params: Params }>(
+    '/:platform/stats',
+    { schema: { params: paramsSchema } },
+    async (request, reply) =>
+      delegate.api
+        ? reply.send({
+            data: await delegate.api?.getCompilationStats(
+              request.params.platform
+            ),
+          })
+        : reply.notImplemented('Missing API delegate implementation')
+  );
+}
+
+export default apiPlugin;

packages/dev-server/src/plugins/api/index.ts

@@ -0,0 +1 @@
+export { default } from './apiPlugin';

packages/dev-server/src/plugins/wss/servers/WebSocketDashboardServer.ts → packages/dev-server/src/plugins/wss/servers/WebSocketApiServer.ts

@@ -3,29 +3,27 @@ import WebSocket from 'ws';
 import { WebSocketServer } from '../WebSocketServer';
 
 /**
- * Class for creating a WebSocket server for Dashboard client.
- * It's used by built-in Dashboard web-app to receive compilation
- * events, logs and other necessary messages.
+ * Class for creating a WebSocket server for API clients.
+ * Useful to listening for compilation events and new logs.
  *
  * @category Development server
  */
-export class WebSocketDashboardServer extends WebSocketServer {
+export class WebSocketApiServer extends WebSocketServer {
   private clients = new Map<string, WebSocket>();
   private nextClientId = 0;
 
   /**
-   * Create new instance of WebSocketDashboardServer and attach it to the given Fastify instance.
+   * Create new instance of WebSocketApiServer and attach it to the given Fastify instance.
    * Any logging information, will be passed through standard `fastify.log` API.
    *
    * @param fastify Fastify instance to attach the WebSocket server to.
-   * @param emitter Event emitter instance.
    */
   constructor(fastify: FastifyInstance) {
-    super(fastify, '/api/dashboard');
+    super(fastify, '/api');
   }
 
   /**
-   * Send message to all connected Dashboard clients.
+   * Send message to all connected API clients.
    *
    * @param event Event string or object to send.
    */
@@ -50,12 +48,12 @@ export class WebSocketDashboardServer extends WebSocketServer {
     const clientId = `client#${this.nextClientId++}`;
     this.clients.set(clientId, socket);
 
-    this.fastify.log.info({ msg: 'Dashboard client connected', clientId });
+    this.fastify.log.info({ msg: 'API client connected', clientId });
     this.clients.set(clientId, socket);
 
     const onClose = () => {
       this.fastify.log.info({
-        msg: 'Dashboard client disconnected',
+        msg: 'API client disconnected',
         clientId,
       });
       this.clients.delete(clientId);

packages/dev-server/src/plugins/wss/wssPlugin.ts

@@ -6,7 +6,7 @@ import { WebSocketDevClientServer } from './servers/WebSocketDevClientServer';
 import { WebSocketMessageServer } from './servers/WebSocketMessageServer';
 import { WebSocketEventsServer } from './servers/WebSocketEventsServer';
 import { HermesInspectorProxy } from './servers/HermesInspectorProxy';
-import { WebSocketDashboardServer } from './servers/WebSocketDashboardServer';
+import { WebSocketApiServer } from './servers/WebSocketApiServer';
 import { WebSocketHMRServer } from './servers/WebSocketHMRServer';
 import { WebSocketRouter } from './WebSocketRouter';
 
@@ -18,7 +18,7 @@ declare module 'fastify' {
       messageServer: WebSocketMessageServer;
       eventsServer: WebSocketEventsServer;
       hermesInspectorProxy: HermesInspectorProxy;
-      dashboardServer: WebSocketDashboardServer;
+      apiServer: WebSocketApiServer;
       hmrServer: WebSocketHMRServer;
       router: WebSocketRouter;
     };
@@ -44,15 +44,15 @@ async function wssPlugin(
     webSocketMessageServer: messageServer,
   });
   const hermesInspectorProxy = new HermesInspectorProxy(instance, options);
-  const dashboardServer = new WebSocketDashboardServer(instance);
+  const apiServer = new WebSocketApiServer(instance);
   const hmrServer = new WebSocketHMRServer(instance, delegate.hmr);
 
   router.registerServer(debuggerServer);
   router.registerServer(devClientServer);
   router.registerServer(messageServer);
   router.registerServer(eventsServer);
   router.registerServer(hermesInspectorProxy);
-  router.registerServer(dashboardServer);
+  router.registerServer(apiServer);
   router.registerServer(hmrServer);
 
   instance.decorate('wss', {
@@ -61,7 +61,7 @@ async function wssPlugin(
     messageServer,
     eventsServer,
     hermesInspectorProxy,
-    dashboardServer,
+    apiServer,
     hmrServer,
     router,
   });

packages/dev-server/src/types.ts

@@ -66,6 +66,9 @@ export namespace Server {
 
     /** An messages delegate. */
     messages: MessagesDelegate;
+
+    /** An API delegate. */
+    api?: Api.Delegate;
   }
 
   /**
@@ -131,6 +134,42 @@ export namespace Server {
     /** Get message to send as a reply for `GET /status` route. */
     getStatus: () => string;
   }
+
+  export namespace Api {
+    /** A compilation asset representation for API clients. */
+    export interface Asset {
+      name: string;
+      size: number;
+      [key: string]: any;
+    }
+
+    /** A compilation stats representation for API clients. */
+    export interface CompilationStats {
+      [key: string]: any;
+    }
+
+    /**
+     * Delegate with implementation for API endpoints.
+     */
+    export interface Delegate {
+      /** Get all platforms - either with already existing compilations or all supported platforms. */
+      getPlatforms: () => Promise<string[]>;
+
+      /**
+       * Get all assets from compilation for given platform.
+       * Should return `[]` if the compilation does not exists for given platform.
+       */
+      getAssets: (platform: string) => Promise<Asset[]>;
+
+      /**
+       * Get compilation stats for a given platform.
+       * Should return `null` if the compilation does not exists for given platform.
+       */
+      getCompilationStats: (
+        platform: string
+      ) => Promise<CompilationStats | null>;
+    }
+  }
 }
 
 /** Representation of the compilation progress. */

packages/repack/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @callstack/repack
 
+## 3.0.0-next.2
+
+### Minor Changes
+
+- ### Development server API
+
+  Added implementation for API functionalities in `@callstack/repack-dev-server`:
+
+  - `GET /api/platforms` - List all platforms with active compilations
+  - `GET /api/:platform/assets` - List all assets (`name` and `size`) for a given compilation
+  - `GET /api/:platform/stats` - Get Webpack compilation stats
+  - Websocket server under `/api` URI for logs and compilations events
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @callstack/repack-dev-server@1.0.0-next.1
+
 ## 3.0.0-next.1
 
 ### Patch Changes

packages/repack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@callstack/repack",
-  "version": "3.0.0-next.1",
+  "version": "3.0.0-next.2",
   "description": "A Webpack-based toolkit to build your React Native application with full support of Webpack ecosystem.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -58,7 +58,7 @@
     "webpack": "5.x"
   },
   "dependencies": {
-    "@callstack/repack-dev-server": "^1.0.0-next.0",
+    "@callstack/repack-dev-server": "^1.0.0-next.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "colorette": "^1.2.2",
     "dedent": "^0.7.0",

packages/repack/src/commands/start.ts

@@ -164,6 +164,18 @@ export async function start(_: string[], config: Config, args: StartArguments) {
             reporter.process(logEntry);
           },
         },
+        api: {
+          getPlatforms: async () => Object.keys(compiler.workers),
+          getAssets: async (platform) =>
+            Object.entries(compiler.assetsCache[platform] ?? {}).map(
+              ([name, asset]) => ({
+                name,
+                size: asset.info.size,
+              })
+            ),
+          getCompilationStats: async (platform) =>
+            compiler.statsCache[platform] ?? null,
+        },
       };
     },
   });