Feat: Add Prettier Support to TypeScript Notebook (#231)

* use prettier command to format code * improve ui interaction * remove console * refact * use package.json prettier config * ensure prettier installed when formatting * fix lint & add changelog * pipe format error to stderr * change shortcut & install prettier in dev * remove tmp file
srcbookdev · Sep 12, 2024 · 545699e · 545699e
1 parent f2e636c
commit 545699e
Show file tree

Hide file tree

Showing 13 changed files with 263 additions and 32 deletions.
diff --git a/.changeset/thin-dots-rest.md b/.changeset/thin-dots-rest.md
@@ -0,0 +1,7 @@
+---
+'@srcbook/shared': minor
+'@srcbook/api': minor
+'@srcbook/web': minor
+---
+
+Add Prettier Support to Code Notebook
diff --git a/packages/api/exec.mts b/packages/api/exec.mts
@@ -15,6 +15,7 @@ export type NodeRequestType = BaseExecRequestType & {
 
 export type NPMInstallRequestType = BaseExecRequestType & {
   packages?: Array<string>;
+  args?: Array<string>;
 };
 
 type SpawnCallRequestType = {
@@ -132,10 +133,17 @@ export function tsx(options: NodeRequestType) {
  */
 export function npmInstall(options: NPMInstallRequestType) {
   const { cwd, stdout, stderr, onExit } = options;
-
   const args = options.packages
-    ? ['install', '--include=dev', ...options.packages]
-    : ['install', '--include=dev'];
+    ? ['install', '--include=dev', ...(options.args || []), ...options.packages]
+    : ['install', '--include=dev', ...(options.args || [])];
 
-  return spawnCall({ command: 'npm', cwd, args, stdout, stderr, onExit, env: process.env });
+  return spawnCall({
+    command: 'npm',
+    cwd,
+    args,
+    stdout,
+    stderr,
+    onExit,
+    env: process.env,
+  });
 }
diff --git a/packages/api/server/ws.mts b/packages/api/server/ws.mts
@@ -11,6 +11,7 @@ import {
   removeCell,
   updateCodeCellFilename,
   addCell,
+  formatAndUpdateCodeCell,
 } from '../session.mjs';
 import { getSecrets } from '../config.mjs';
 import type { SessionType } from '../types.mjs';
@@ -25,6 +26,7 @@ import type {
   DepsValidatePayloadType,
   CellStopPayloadType,
   CellUpdatePayloadType,
+  CellFormatPayloadType,
   TsServerStartPayloadType,
   TsServerStopPayloadType,
   CellDeletePayloadType,
@@ -42,6 +44,7 @@ import {
   CellUpdatedPayloadSchema,
   CellRenamePayloadSchema,
   CellDeletePayloadSchema,
+  CellFormatPayloadSchema,
   CellExecPayloadSchema,
   CellStopPayloadSchema,
   AiGenerateCellPayloadSchema,
@@ -60,6 +63,7 @@ import {
   TsServerCellSuggestionsPayloadSchema,
   TsServerQuickInfoRequestPayloadSchema,
   TsServerQuickInfoResponsePayloadSchema,
+  CellFormattedPayloadSchema,
 } from '@srcbook/shared';
 import tsservers from '../tsservers.mjs';
 import { TsServer } from '../tsserver/tsserver.mjs';
@@ -417,6 +421,43 @@ async function cellFixDiagnostics(payload: AiFixDiagnosticsPayloadType) {
   });
 }
 
+async function cellFormat(payload: CellFormatPayloadType) {
+  const session = await findSession(payload.sessionId);
+  if (!session) {
+    throw new Error(`No session exists for session '${payload.sessionId}'`);
+  }
+  const cellBeforeUpdate = findCell(session, payload.cellId);
+
+  if (!cellBeforeUpdate || cellBeforeUpdate.type !== 'code') {
+    throw new Error(
+      `No cell exists or not a code cell for session '${payload.sessionId}' and cell '${payload.cellId}'`,
+    );
+  }
+  const result = await formatAndUpdateCodeCell(session, cellBeforeUpdate);
+  if (!result.success) {
+    wss.broadcast(`session:${session.id}`, 'cell:output', {
+      cellId: payload.cellId,
+      output: { type: 'stderr', data: result.errors },
+    });
+    sendCellUpdateError(session, payload.cellId, [
+      {
+        message:
+          'An error occurred while formatting the code. Please check the "stderr" for more details.',
+        attribute: 'formatting',
+      },
+    ]);
+  } else {
+    const cell = result.cell as CodeCellType;
+
+    wss.broadcast(`session:${session.id}`, 'cell:formatted', {
+      cellId: payload.cellId,
+      cell,
+    });
+
+    refreshCodeCellDiagnostics(session, cell);
+  }
+}
+
 async function cellUpdate(payload: CellUpdatePayloadType) {
   const session = await findSession(payload.sessionId);
 
@@ -431,7 +472,6 @@ async function cellUpdate(payload: CellUpdatePayloadType) {
       `No cell exists for session '${payload.sessionId}' and cell '${payload.cellId}'`,
     );
   }
-
   const result = await updateCell(session, cellBeforeUpdate, payload.updates);
 
   if (!result.success) {
@@ -440,19 +480,7 @@ async function cellUpdate(payload: CellUpdatePayloadType) {
 
   const cell = result.cell as CodeCellType;
 
-  if (session.language === 'typescript' && cell.type === 'code' && tsservers.has(session.id)) {
-    const tsserver = tsservers.get(session.id);
-
-    // This isn't intended for renaming, so the filenames
-    // and their resulting paths are expected to be the same
-    reopenFileInTsServer(tsserver, session, {
-      openFilename: cell.filename,
-      closeFilename: cell.filename,
-      source: cell.source,
-    });
-
-    requestAllDiagnostics(tsserver, session);
-  }
+  refreshCodeCellDiagnostics(session, cell);
 }
 
 async function cellRename(payload: CellRenamePayloadType) {
@@ -725,6 +753,21 @@ async function tsserverQuickInfo(payload: TsServerQuickInfoRequestPayloadType) {
   });
 }
 
+function refreshCodeCellDiagnostics(session: SessionType, cell: CodeCellType) {
+  if (session.language === 'typescript' && cell.type === 'code' && tsservers.has(session.id)) {
+    const tsserver = tsservers.get(session.id);
+
+    // This isn't intended for renaming, so the filenames
+    // and their resulting paths are expected to be the same
+    reopenFileInTsServer(tsserver, session, {
+      openFilename: cell.filename,
+      closeFilename: cell.filename,
+      source: cell.source,
+    });
+
+    requestAllDiagnostics(tsserver, session);
+  }
+}
 wss
   .channel('session:*')
   .incoming('cell:exec', CellExecPayloadSchema, cellExec)
@@ -733,6 +776,7 @@ wss
   .incoming('cell:update', CellUpdatePayloadSchema, cellUpdate)
   .incoming('cell:rename', CellRenamePayloadSchema, cellRename)
   .incoming('cell:delete', CellDeletePayloadSchema, cellDelete)
+  .incoming('cell:format', CellFormatPayloadSchema, cellFormat)
   .incoming('ai:generate', AiGenerateCellPayloadSchema, cellGenerate)
   .incoming('ai:fix_diagnostics', AiFixDiagnosticsPayloadSchema, cellFixDiagnostics)
   .incoming('deps:install', DepsInstallPayloadSchema, depsInstall)
@@ -747,6 +791,7 @@ wss
   )
   .outgoing('tsserver:cell:quickinfo:response', TsServerQuickInfoResponsePayloadSchema)
   .outgoing('cell:updated', CellUpdatedPayloadSchema)
+  .outgoing('cell:formatted', CellFormattedPayloadSchema)
   .outgoing('cell:error', CellErrorPayloadSchema)
   .outgoing('cell:output', CellOutputPayloadSchema)
   .outgoing('ai:generated', AiGeneratedCellPayloadSchema)

diff --git a/packages/api/session.mts b/packages/api/session.mts
@@ -29,6 +29,8 @@ import {
 import { fileExists } from './fs-utils.mjs';
 import { validFilename } from '@srcbook/shared';
 import { pathToCodeFile } from './srcbook/path.mjs';
+import { exec } from 'node:child_process';
+import { npmInstall } from './exec.mjs';
 
 const sessions: Record<string, SessionType> = {};
 
@@ -296,7 +298,70 @@ export function updateCell(session: SessionType, cell: CellType, updates: CellUp
       return updateCodeCell(session, cell, updates);
   }
 }
-
+async function ensurePrettierInstalled(dir: string): Promise<boolean> {
+  const prettierPath = Path.join(dir, 'node_modules', 'prettier');
+  try {
+    // check if prettier is installed
+    await fs.access(prettierPath);
+    return true;
+  } catch (error) {
+    return new Promise<boolean>((resolve) => {
+      try {
+        npmInstall({
+          cwd: dir,
+          packages: ['prettier'],
+          args: ['--save-dev'],
+          stdout: () => {},
+          stderr: (err) => console.error(err),
+          onExit: (exitCode) => {
+            if (exitCode === 0) {
+              resolve(true);
+            } else {
+              console.error('Failed to install Prettier:', exitCode);
+              resolve(false);
+            }
+          },
+        });
+      } catch (installError) {
+        console.error('Failed to initiate Prettier installation:', installError);
+        resolve(false);
+      }
+    });
+  }
+}
+export async function formatCode(dir: string, fileName: string) {
+  try {
+    await ensurePrettierInstalled(dir);
+
+    const codeFilePath = pathToCodeFile(dir, fileName);
+    const command = `npx prettier ${codeFilePath}`;
+
+    return new Promise((resolve, reject) => {
+      exec(command, async (_, stdout, stderr) => {
+        if (stderr) {
+          console.error(`exec error: ${stderr}`);
+          reject(stderr);
+          return;
+        }
+        resolve(stdout);
+      });
+    });
+  } catch (error) {
+    console.error('Formatting error:', error);
+    throw error;
+  }
+}
+export async function formatAndUpdateCodeCell(session: SessionType, cell: CodeCellType) {
+  try {
+    const formattedCode = await formatCode(session.dir, cell.filename);
+    return updateCodeCell(session, cell, { source: formattedCode } as { source: string });
+  } catch (error) {
+    return Promise.resolve({
+      success: false,
+      errors: error,
+    } as UpdateResultType);
+  }
+}
 export function sessionToResponse(session: SessionType) {
   const result: Pick<SessionType, 'id' | 'cells' | 'language' | 'tsconfig.json' | 'openedAt'> = {
     id: session.id,

diff --git a/packages/api/srcbook/config.mts b/packages/api/srcbook/config.mts
@@ -1,7 +1,13 @@
 export function buildJSPackageJson() {
   return {
     type: 'module',
-    dependencies: {},
+    devDependencies: {
+      prettier: 'latest',
+    },
+    prettier: {
+      semi: true,
+      singleQuote: true,
+    },
   };
 }
 
@@ -13,6 +19,13 @@ export function buildTSPackageJson() {
       typescript: 'latest',
       '@types/node': 'latest',
     },
+    devDependencies: {
+      prettier: 'latest',
+    },
+    prettier: {
+      semi: true,
+      singleQuote: true,
+    },
   };
 }
 

diff --git a/packages/shared/src/schemas/websockets.mts b/packages/shared/src/schemas/websockets.mts
@@ -35,6 +35,11 @@ export const CellUpdatePayloadSchema = z.object({
   updates: CellUpdateAttrsSchema,
 });
 
+export const CellFormatPayloadSchema = z.object({
+  sessionId: z.string(),
+  cellId: z.string(),
+});
+
 export const AiGenerateCellPayloadSchema = z.object({
   sessionId: z.string(),
   cellId: z.string(),
@@ -73,6 +78,10 @@ export const CellUpdatedPayloadSchema = z.object({
   cell: CellSchema,
 });
 
+export const CellFormattedPayloadSchema = z.object({
+  cellId: z.string(),
+  cell: CellSchema,
+});
 export const AiGeneratedCellPayloadSchema = z.object({
   cellId: z.string(),
   output: z.string(),

diff --git a/packages/shared/src/types/websockets.mts b/packages/shared/src/types/websockets.mts
@@ -6,6 +6,7 @@ import {
   CellCreatePayloadSchema,
   CellUpdatePayloadSchema,
   CellUpdatedPayloadSchema,
+  CellFormatPayloadSchema,
   CellRenamePayloadSchema,
   CellDeletePayloadSchema,
   AiGenerateCellPayloadSchema,
@@ -24,12 +25,14 @@ import {
   TsServerCellSuggestionsPayloadSchema,
   TsServerQuickInfoRequestPayloadSchema,
   TsServerQuickInfoResponsePayloadSchema,
+  CellFormattedPayloadSchema,
 } from '../schemas/websockets.mjs';
 
 export type CellExecPayloadType = z.infer<typeof CellExecPayloadSchema>;
 export type CellStopPayloadType = z.infer<typeof CellStopPayloadSchema>;
 export type CellCreatePayloadType = z.infer<typeof CellCreatePayloadSchema>;
 export type CellUpdatePayloadType = z.infer<typeof CellUpdatePayloadSchema>;
+export type CellFormatPayloadType = z.infer<typeof CellFormatPayloadSchema>;
 export type CellUpdatedPayloadType = z.infer<typeof CellUpdatedPayloadSchema>;
 export type CellRenamePayloadType = z.infer<typeof CellRenamePayloadSchema>;
 export type CellDeletePayloadType = z.infer<typeof CellDeletePayloadSchema>;
@@ -43,6 +46,7 @@ export type DepsValidateResponsePayloadType = z.infer<typeof DepsValidateRespons
 export type DepsValidatePayloadType = z.infer<typeof DepsValidatePayloadSchema>;
 
 export type CellErrorPayloadType = z.infer<typeof CellErrorPayloadSchema>;
+export type CellFormattedPayloadType = z.infer<typeof CellFormattedPayloadSchema>;
 
 export type TsServerStartPayloadType = z.infer<typeof TsServerStartPayloadSchema>;
 export type TsServerStopPayloadType = z.infer<typeof TsServerStopPayloadSchema>;

diff --git a/packages/web/src/clients/websocket/index.ts b/packages/web/src/clients/websocket/index.ts
@@ -4,6 +4,8 @@ import {
   AiGenerateCellPayloadSchema,
   AiGeneratedCellPayloadSchema,
   CellUpdatedPayloadSchema,
+  CellFormattedPayloadSchema,
+  CellFormatPayloadSchema,
   DepsValidateResponsePayloadSchema,
   CellExecPayloadSchema,
   CellStopPayloadSchema,
@@ -35,6 +37,7 @@ const IncomingSessionEvents = {
   'cell:output': CellOutputPayloadSchema,
   'cell:error': CellErrorPayloadSchema,
   'cell:updated': CellUpdatedPayloadSchema,
+  'cell:formatted': CellFormattedPayloadSchema,
   'deps:validate:response': DepsValidateResponsePayloadSchema,
   'tsserver:cell:diagnostics': TsServerCellDiagnosticsPayloadSchema,
   'tsserver:cell:suggestions': TsServerCellSuggestionsPayloadSchema,
@@ -50,6 +53,7 @@ const OutgoingSessionEvents = {
   'cell:update': CellUpdatePayloadSchema,
   'cell:rename': CellRenamePayloadSchema,
   'cell:delete': CellDeletePayloadSchema,
+  'cell:format': CellFormatPayloadSchema,
   'ai:generate': AiGenerateCellPayloadSchema,
   'ai:fix_diagnostics': AiFixDiagnosticsPayloadSchema,
   'deps:install': DepsInstallPayloadSchema,