attio 0.0.1-experimental.20250108 → 0.0.1-experimental.20250110

package/lib/build.js

@@ -1,5 +1,5 @@
 import { z } from "zod";
-const buildErrorSchema = z.object({
+const jsErrorSchema = z.object({
     text: z.string(),
     location: z.object({
         column: z.number(),
@@ -12,7 +12,7 @@ const buildErrorSchema = z.object({
         suggestion: z.string(),
     }),
 });
-export const errorSchema = z.object({
-    errors: z.array(buildErrorSchema).optional(),
-    warnings: z.array(buildErrorSchema).optional(),
+export const errorsAndWarningsSchema = z.object({
+    errors: z.array(jsErrorSchema).optional(),
+    warnings: z.array(jsErrorSchema).optional(),
 });

package/lib/machines/build-machine.js

@@ -3,7 +3,7 @@ import Spinner from "tiny-spinner";
 import { codeGenMachine } from "./code-gen-machine.js";
 import { jsMachine } from "./js-machine.js";
 import { tsMachine } from "./ts-machine.js";
-import { printError } from "../util/typescript.js";
+import { printJsError, printTsError } from "../util/typescript.js";
 import { printLogo } from "./actions.js";
 const processes = ["javascript", "typescript"];
 const spinner = new Spinner();
@@ -26,22 +26,30 @@ export const buildMachine = setup({
         buildingStart: () => {
             spinner.start("🔨 Building...");
         },
-        buildFail: ({ self }) => {
+        buildFail: ({ context }) => {
             spinner.error("Build failed");
-            const snapshot = self.getSnapshot();
-            const { tsErrors = [] } = snapshot.context;
+            const { tsErrors = [], jsErrors } = context;
             process.stderr.write("\n");
-            tsErrors.forEach(printError);
+            tsErrors.forEach(printTsError);
+            jsErrors?.errors?.forEach((error) => {
+                printJsError(error, "error");
+            });
+            jsErrors?.warnings?.forEach((warning) => {
+                printJsError(warning, "warning");
+            });
         },
         buildSuccess: () => {
             spinner.success("Build succeeded");
         },
         printLogo,
-        setError: assign({
+        setFailed: assign({
             failed: ({ context }, params) => [...context.failed, params.process],
         }),
         setTypeScriptErrors: assign({
-            tsErrors: ({ context }, params) => params.errors,
+            tsErrors: (_, params) => params.errors,
+        }),
+        setJavaScriptErrors: assign({
+            jsErrors: (_, params) => params.errors,
         }),
         setSuccess: assign({
             successful: ({ context }, params) => [
@@ -78,10 +86,16 @@ export const buildMachine = setup({
                                 },
                                 "JavaScript Error": {
                                     target: "Waiting",
-                                    actions: {
-                                        type: "setError",
-                                        params: { process: "javascript" },
-                                    },
+                                    actions: [
+                                        {
+                                            type: "setFailed",
+                                            params: { process: "javascript" },
+                                        },
+                                        {
+                                            type: "setJavaScriptErrors",
+                                            params: ({ event }) => event,
+                                        },
+                                    ],
                                 },
                             },
                         },
@@ -114,7 +128,7 @@ export const buildMachine = setup({
                                     target: "Waiting",
                                     actions: [
                                         {
-                                            type: "setError",
+                                            type: "setFailed",
                                             params: { process: "typescript" },
                                         },
                                         {
@@ -142,7 +156,7 @@ export const buildMachine = setup({
                                 "Error": {
                                     target: "Waiting",
                                     actions: {
-                                        type: "setError",
+                                        type: "setFailed",
                                         params: { process: "typescript" },
                                     },
                                     reenter: true,

package/lib/machines/dev-machine.js

@@ -17,7 +17,7 @@ import { tsMachine } from "./ts-machine.js";
 import { fetchInstallation } from "../api/fetch-installation.js";
 import Spinner from "tiny-spinner";
 import { printMessage } from "../util/print-message.js";
-import { printError } from "../util/typescript.js";
+import { printJsError, printTsError } from "../util/typescript.js";
 import { clearTerminal } from "../util/clear-terminal.js";
 import { setTerminalTitle } from "../util/set-terminal-title.js";
 import { printInstallInstructions } from "../util/print-install-instructions.js";
@@ -97,9 +97,7 @@ export const devMachine = setup({
             };
         }),
         "prepareUpload": fromCallback(({ sendBack }) => {
-            const spinner = new Spinner();
             const prepareUpload = async () => {
-                spinner.start("Preparing upload...");
                 const config = await loadDeveloperConfig();
                 if (typeof config === "string")
                     throw config;
@@ -116,14 +114,12 @@ export const devMachine = setup({
                     targetWorkspaceId: config.target_workspace_id,
                     environmentVariables,
                 });
-                spinner.success("Upload prepared");
                 sendBack({
                     type: "Upload Prepared",
                     devVersion: { ...devVersion, app_slug: app.slug },
                 });
             };
             prepareUpload().catch((error) => {
-                spinner.error(`Upload failed: ${error.message}`);
                 sendBack({
                     type: "Upload Error",
                     error: typeof error === "string" ? new Error(error) : error,
@@ -242,13 +238,24 @@ export const devMachine = setup({
         printTypeScriptErrors: (_, params) => {
             if (params.errors.length) {
                 clearTerminal();
-                params.errors.forEach(printError);
+                params.errors.forEach(printTsError);
                 notifier.notify({
                     title: "TypeScript Errors",
                     message: `There were ${params.errors.length === 1 ? "one error" : `${params.errors.length} errors`} in your TypeScript code`,
                 });
             }
         },
+        printJavaScriptErrors: (_, params) => {
+            if (params.errors.errors?.length || params.errors.warnings?.length) {
+                clearTerminal();
+                params.errors.errors?.forEach((error) => {
+                    printJsError(error, "error");
+                });
+                params.errors.warnings?.forEach((warning) => {
+                    printJsError(warning, "warning");
+                });
+            }
+        },
         promptToInstall: (_) => {
             process.stdout.write(`\n\n🚨 IMPORTANT: You will need to install your app in your workspace. Press "i" to open the app settings page, and then click "Install".\n\n`);
         },
@@ -264,9 +271,15 @@ export const devMachine = setup({
         saveTypeScriptErrors: assign({
             typeScriptErrors: (_, params) => params.errors,
         }),
+        saveJavaScriptErrors: assign({
+            javaScriptErrors: (_, params) => params.errors,
+        }),
         clearTypeScriptErrors: assign({
             typeScriptErrors: () => [],
         }),
+        clearJavaScriptErrors: assign({
+            javaScriptErrors: () => undefined,
+        }),
         sendChange: enqueueActions(({ enqueue, event }) => {
             enqueue.sendTo("javascript", event);
             enqueue.sendTo("typescript", event);
@@ -340,14 +353,27 @@ export const devMachine = setup({
                             on: {
                                 "JavaScript Success": {
                                     target: "Upload When Ready",
-                                    actions: {
-                                        type: "setSuccess",
-                                        params: ({ event }) => event,
-                                    },
+                                    actions: [
+                                        {
+                                            type: "setSuccess",
+                                            params: ({ event }) => event,
+                                        },
+                                        "clearJavaScriptErrors",
+                                    ],
                                     reenter: true,
                                 },
                                 "JavaScript Error": {
                                     target: "Watching",
+                                    actions: [
+                                        {
+                                            type: "saveJavaScriptErrors",
+                                            params: ({ event }) => event,
+                                        },
+                                        {
+                                            type: "printJavaScriptErrors",
+                                            params: ({ event }) => event,
+                                        },
+                                    ],
                                 },
                             },
                         },

package/lib/machines/js-machine.js

@@ -3,7 +3,7 @@ import fs from "fs/promises";
 import path from "path";
 import tmp from "tmp-promise";
 import { assign, setup, fromCallback, sendTo } from "xstate";
-import { errorSchema } from "../build.js";
+import { errorsAndWarningsSchema } from "../build.js";
 import { createClientBuildConfig } from "../build/client/create-client-build-config.js";
 import { generateClientEntry } from "../build/client/generate-client-entry.js";
 import { createServerBuildConfig } from "../build/server/create-server-build-config.js";
@@ -15,7 +15,7 @@ export const jsMachine = setup({
         input: {},
     },
     guards: {
-        "has errors": (_, params) => Boolean(params.error),
+        "has errors": (_, params) => Boolean(params.errors),
     },
     actors: {
         prepareBuildContext: fromCallback(({ sendBack, input: { write } }) => {
@@ -122,7 +122,7 @@ export const jsMachine = setup({
                 catch (e) {
                     sendBack({
                         type: "Result",
-                        error: errorSchema.parse(e),
+                        errors: errorsAndWarningsSchema.parse(e),
                         time: new Date(),
                     });
                 }
@@ -131,10 +131,13 @@ export const jsMachine = setup({
         }),
     },
     actions: {
-        clearError: assign({
-            error: () => undefined,
+        clearErrors: assign({
+            errors: () => undefined,
         }),
-        raiseErrored: sendTo(({ context }) => context.parentRef, { type: "JavaScript Error" }),
+        raiseErrored: sendTo(({ context }) => context.parentRef, (_, params) => ({
+            type: "JavaScript Error",
+            errors: params.errors,
+        })),
         raiseSuccess: sendTo(({ context }, _params) => context.parentRef, (_, params) => ({
             type: "JavaScript Success",
             contents: params.contents,
@@ -144,7 +147,7 @@ export const jsMachine = setup({
             buildContexts: (_, params) => params.buildContexts,
         }),
         setError: assign({
-            error: (_, params) => params.error,
+            errors: (_, params) => params.errors,
         }),
         setTime: assign({
             time: (_, params) => params.time,
@@ -184,9 +187,12 @@ export const jsMachine = setup({
                                 actions: [
                                     {
                                         type: "setError",
-                                        params: ({ event }) => ({ error: event.error }),
+                                        params: ({ event }) => ({ errors: event.errors }),
+                                    },
+                                    {
+                                        type: "raiseErrored",
+                                        params: ({ event }) => ({ errors: event.errors }),
                                     },
-                                    "raiseErrored",
                                 ],
                             },
                             {
@@ -200,7 +206,7 @@ export const jsMachine = setup({
                                             time: event.time,
                                         }),
                                     },
-                                    "clearError",
+                                    "clearErrors",
                                 ],
                             },
                         ],

package/lib/templates/javascript/src/hello-world-dialog.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import {TextBlock} from "attio/client"
+import {TextBlock, Suspense} from "attio/client"
 import {Advice} from "./advice"
 
 const Loading = () => <TextBlock>Loading advice...</TextBlock>
@@ -17,9 +17,9 @@ export function HelloWorldDialog ({recordId}) {
                 I am a dialog. I have been open for: {seconds} second{seconds === 1 ? "" : "s"}
             </TextBlock>
             {/* The hook in Advice will suspend until the advice is loaded. */}
-            <React.Suspense fallback={<Loading />}>
+            <Suspense fallback={<Loading />}>
                 <Advice recordId={recordId} />
-            </React.Suspense>
+            </Suspense>
         </>
     )
 }

package/lib/templates/typescript/src/hello-world-dialog.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import {TextBlock} from "attio/client"
+import {TextBlock, Suspense} from "attio/client"
 import {Advice} from "./advice"
 
 const Loading = () => <TextBlock>Loading advice...</TextBlock>
@@ -17,9 +17,9 @@ export function HelloWorldDialog({recordId}: {recordId: string}) {
                 I am a dialog. I have been open for: {seconds} second{seconds === 1 ? "" : "s"}
             </TextBlock>
             {/* The hook in Advice will suspend until the advice is loaded. */}
-            <React.Suspense fallback={<Loading />}>
+            <Suspense fallback={<Loading />}>
                 <Advice recordId={recordId} />
-            </React.Suspense>
+            </Suspense>
         </>
     )
 }

package/lib/util/typescript.js

@@ -80,7 +80,7 @@ export const getDiagnostics = async (program) => {
     }));
     return errors;
 };
-export function printError(error) {
+export function printTsError(error) {
     if (!error.location) {
         process.stderr.write(`${chalk.red("×")} – ${error.text}\n`);
         return;
@@ -90,7 +90,7 @@ export function printError(error) {
     const emptyLine = " ".repeat(lineStringLength);
     const lineText = error.location.lineText;
     const leadingSpaces = lineText.match(/^\s*/)?.[0].length || 0;
-    const trimmedLineText = lineText.trimLeft();
+    const trimmedLineText = lineText.trimStart();
     const beforeError = trimmedLineText.slice(0, error.location.character - leadingSpaces);
     const errorText = trimmedLineText.slice(error.location.character - leadingSpaces, error.location.endCharacter - leadingSpaces);
     const afterError = trimmedLineText.slice(error.location.endCharacter - leadingSpaces);
@@ -100,3 +100,23 @@ export function printError(error) {
     process.stderr.write(`${emptyLine} │ ${" ".repeat(Math.max(0, error.location.character - leadingSpaces))}${chalk.red("~".repeat(error.location.endCharacter - error.location.character))}\n`);
     process.stderr.write(`${emptyLine} ╰───\n\n`);
 }
+export function printJsError(error, type) {
+    if (!error.location) {
+        process.stderr.write(`${chalk.red("×")} – ${error.text}\n`);
+        return;
+    }
+    const lineString = error.location.line.toLocaleString().padStart(3, " ");
+    const lineStringLength = lineString.length;
+    const emptyLine = " ".repeat(lineStringLength);
+    const lineText = error.location.lineText;
+    const leadingSpaces = lineText.match(/^\s*/)?.[0].length || 0;
+    const trimmedLineText = lineText.trimStart();
+    const beforeError = trimmedLineText.slice(0, error.location.column - leadingSpaces);
+    const errorText = trimmedLineText.slice(error.location.column - leadingSpaces, error.location.column + error.location.length - leadingSpaces);
+    const afterError = trimmedLineText.slice(error.location.column + error.location.length - leadingSpaces);
+    process.stderr.write(`${" ".repeat(lineStringLength - 2)} ${type === "error" ? chalk.red("×") : "🚧"} ${error.text}\n\n`);
+    process.stderr.write(`${emptyLine} ╭─── ${chalk.bold(error.location.file)}\n`);
+    process.stderr.write(`${lineString} │ ${beforeError}${chalk.red(errorText)}${afterError}\n`);
+    process.stderr.write(`${emptyLine} │ ${" ".repeat(Math.max(0, error.location.column - leadingSpaces))}${chalk.red("~".repeat(error.location.length))}\n`);
+    process.stderr.write(`${emptyLine} ╰───\n\n`);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "attio",
-  "version": "0.0.1-experimental.20250108",
+  "version": "0.0.1-experimental.20250110",
   "bin": "lib/attio.js",
   "type": "module",
   "files": [