attio 0.0.1-experimental.20241226 → 0.0.1-experimental.20250108

package/lib/machines/create-machine.js

@@ -1,4 +1,5 @@
 import { existsSync } from "fs";
+import Spinner from "tiny-spinner";
 import path, { join } from "path";
 import { fileURLToPath } from "url";
 import { assign, setup, fromCallback } from "xstate";
@@ -9,13 +10,14 @@ import { createDirectory } from "../util/create-directory.js";
 import { loadDeveloperConfig } from "../util/load-developer-config.js";
 import { slugifyExtension } from "../util/slugify-extension.js";
 import { canWrite, isValidSlug } from "../util/validate-slug.js";
+import { ask, askWithChoices } from "./actors.js";
+import { showError, printLogo } from "./actions.js";
+import chalk from "chalk";
+import boxen from "boxen";
+import { printInstallInstructions } from "../util/print-install-instructions.js";
 export const languages = [
-    { value: "typescript", label: "TypeScript – recommended!" },
-    { value: "javascript", label: "JavaScript" },
-];
-export const outlets = [
-    { value: "tool", label: "Workflow Tool" },
-    { value: "action", label: "Action Button" },
+    { name: "TypeScript – recommended!", value: "typescript" },
+    { name: "JavaScript", value: "javascript" },
 ];
 export const createMachine = setup({
     types: {
@@ -24,6 +26,8 @@ export const createMachine = setup({
         input: {},
     },
     actors: {
+        ask,
+        askWithChoices,
         createProject: fromCallback(({ sendBack, input }) => {
             const create = async () => {
                 try {
@@ -49,6 +53,8 @@ export const createMachine = setup({
         }),
         createApp: fromCallback(({ sendBack, input: { appSlug, token, developerSlug, title } }) => {
             const create = async () => {
+                const spinner = new Spinner();
+                spinner.start(`Creating app "${title}"...`);
                 try {
                     const result = await createApp({
                         token,
@@ -56,9 +62,11 @@ export const createMachine = setup({
                         appSlug: appSlug,
                         title,
                     });
+                    spinner.success(`"${title}" created!`);
                     sendBack({ type: "App Created", appId: result.app_id });
                 }
                 catch (error) {
+                    spinner.error(error.message);
                     sendBack({ type: "Error", error: error.message });
                 }
             };
@@ -80,13 +88,17 @@ export const createMachine = setup({
             load();
         }),
         validateSlug: fromCallback(({ sendBack, input: { appSlug, token, developerSlug } }) => {
+            const spinner = new Spinner();
+            spinner.start("Checking if slug is valid...");
             if (!isValidSlug(appSlug)) {
+                spinner.error("Invalid slug");
                 sendBack({
                     type: "Invalid Slug",
                     error: "Slug contains invalid characters. Must be lowercase letters or hyphens only.",
                 });
             }
             if (existsSync(join(process.cwd(), appSlug))) {
+                spinner.error("Invalid slug");
                 sendBack({
                     type: "Invalid Slug",
                     error: `Directory "${appSlug}" already exists`,
@@ -94,6 +106,7 @@ export const createMachine = setup({
                 return;
             }
             if (!canWrite(".")) {
+                spinner.error("Fatal Error");
                 sendBack({
                     type: "Fatal Error",
                     error: "Write access denied to current directory",
@@ -101,29 +114,48 @@ export const createMachine = setup({
                 return;
             }
             isAppSlugValid({ token, developerSlug, appSlug: appSlug })
-                .then((valid) => sendBack(valid
-                ? { type: "Valid Slug" }
-                : {
-                    type: "Invalid Slug",
-                    error: "An app already exists with this slug",
-                }))
+                .then((valid) => {
+                spinner.success("Valid slug");
+                sendBack(valid
+                    ? { type: "Valid Slug" }
+                    : {
+                        type: "Invalid Slug",
+                        error: "An app already exists with this slug",
+                    });
+            })
                 .catch((error) => {
+                spinner.error("Fatal Error");
                 sendBack({ type: "Fatal Error", error: error.message });
             });
         }),
     },
     actions: {
+        printLogo,
         clearError: assign({
             error: () => undefined,
         }),
-        setError: assign({
-            error: (_, params) => params.error,
-        }),
+        showError,
+        showConfigInstructions: ({ context: { configError } }) => {
+            printInstallInstructions(configError);
+        },
+        showInstructions: ({ context: { appSlug, title } }) => {
+            const commands = `cd ${appSlug}\nnpm install\nnpm run dev`;
+            process.stdout.write("\n" +
+                chalk.green(`SUCCESS!! 🎉 Your extension "${title}" has been created.`) +
+                "\n");
+            process.stdout.write("\nTo get started, run:\n");
+            process.stdout.write(boxen(commands, {
+                padding: 1,
+                margin: 1,
+                borderStyle: "round",
+            }) + "\n");
+            process.stdout.write(`(${chalk.yellow("yarn")}, ${chalk.yellow("pnpm")}, and ${chalk.yellow("bun")} also work!)\n`);
+        },
         setLanguage: assign({
-            language: (_, params) => params.language,
+            language: (_, params) => params.output,
         }),
         setTitle: assign({
-            title: (_, params) => params.title,
+            title: (_, params) => params.output,
         }),
         setConfig: assign({
             token: (_, params) => params.token,
@@ -136,10 +168,7 @@ export const createMachine = setup({
             appId: (_, params) => params.appId,
         }),
         setSlug: assign({
-            appSlug: (_, params) => slugifyExtension(params.appSlug, false),
-        }),
-        setOutlets: assign({
-            outlets: (_, params) => params.outlets,
+            appSlug: (_, params) => slugifyExtension(params.output, false),
         }),
         slugifyTitle: assign({
             appSlug: (_, params) => slugifyExtension(params.title),
@@ -149,7 +178,6 @@ export const createMachine = setup({
         "have title": (_, params) => Boolean(params.title.trim()),
         "have slug": (_, params) => Boolean(params.slug.trim()),
         "have language": (_, params) => Boolean(params.language),
-        "have outlets": (_, params) => Boolean(params.outlets?.length),
     },
 }).createMachine({
     context: ({ input }) => ({
@@ -178,33 +206,34 @@ export const createMachine = setup({
             ],
         },
         "Ask for title": {
-            on: {
-                "Update Title": {
-                    target: "Ask for title",
-                    actions: [{ type: "setTitle", params: ({ event }) => event }, { type: "clearError" }],
+            invoke: {
+                src: "ask",
+                input: {
+                    message: 'What would you like to call your new app? (in "Title Case")',
+                    required: true,
                 },
-                "Submit": {
+                onDone: {
                     target: "Validate Slug From Title",
-                    guard: { type: "have title", params: ({ context }) => context },
-                    actions: { type: "slugifyTitle", params: ({ context }) => context },
-                    reenter: true,
+                    actions: [
+                        { type: "setTitle", params: ({ event }) => event },
+                        { type: "slugifyTitle", params: ({ context }) => context },
+                    ],
                 },
             },
         },
         "Ask for language": {
-            on: {
-                "Choose Language": {
-                    target: "Do we need outlets?",
-                    actions: { type: "setLanguage", params: ({ event }) => event },
-                    reenter: true,
+            invoke: {
+                src: "askWithChoices",
+                input: {
+                    message: "What language would you like to use?",
+                    choices: languages,
                 },
-            },
-        },
-        "Ask for outlets": {
-            on: {
-                "Choose Outlets": {
+                onDone: {
                     target: "Create App",
-                    actions: { type: "setOutlets", params: ({ event }) => event },
+                    actions: {
+                        type: "setLanguage",
+                        params: ({ event }) => event,
+                    },
                     reenter: true,
                 },
             },
@@ -213,7 +242,7 @@ export const createMachine = setup({
             on: {
                 Error: {
                     target: "Error",
-                    actions: { type: "setError", params: ({ event }) => event },
+                    actions: { type: "showError", params: ({ event }) => event },
                 },
                 Success: {
                     target: "Success",
@@ -237,11 +266,12 @@ export const createMachine = setup({
         "Success": {
             type: "final",
             description: `🎉🎉🎉🎉🎉🎉`,
+            entry: "showInstructions",
         },
         "Do we need language?": {
             always: [
                 {
-                    target: "Do we need outlets?",
+                    target: "Create App",
                     guard: { type: "have language", params: ({ context }) => context },
                     reenter: true,
                     description: `language may have been provided by CLI option`,
@@ -249,30 +279,18 @@ export const createMachine = setup({
                 "Ask for language",
             ],
         },
-        "Do we need outlets?": {
-            always: [
-                {
-                    target: "Create App",
-                    guard: { type: "have outlets", params: ({ context }) => context },
-                    description: `outlets may have been provided by CLI option`,
-                    reenter: true,
-                },
+        "Validate Slug": {
+            invoke: [
                 {
-                    target: "Ask for outlets",
-                    reenter: true,
+                    src: "validateSlug",
+                    input: ({ context }) => context,
                 },
             ],
-        },
-        "Validate Slug": {
-            invoke: {
-                src: "validateSlug",
-                input: ({ context }) => context,
-            },
             on: {
                 "Invalid Slug": {
                     target: "Ask for slug",
                     actions: {
-                        type: "setError",
+                        type: "showError",
                         params: ({ event }) => event,
                     },
                     reenter: true,
@@ -301,6 +319,7 @@ export const createMachine = setup({
         },
         "Show config instructions": {
             type: "final",
+            entry: "showConfigInstructions",
         },
         "Create App": {
             invoke: {
@@ -314,17 +333,22 @@ export const createMachine = setup({
                 },
                 "Error": {
                     target: "Error",
-                    actions: { type: "setError", params: ({ event }) => event },
+                    actions: { type: "showError", params: ({ event }) => event },
                 },
             },
         },
         "Ask for slug": {
-            on: {
-                "Update Slug": {
-                    target: "Ask for slug",
-                    actions: [{ type: "setSlug", params: ({ event }) => event }, "clearError"],
+            invoke: {
+                src: "ask",
+                input: ({ context }) => ({
+                    message: "Please provide a slug for your extension:",
+                    default: context.appSlug,
+                    required: true,
+                }),
+                onDone: {
+                    target: "Validate Slug",
+                    actions: { type: "setSlug", params: ({ event }) => event },
                 },
-                "Submit": "Validate Slug",
             },
         },
         "Validate Slug From Title": {
@@ -336,7 +360,7 @@ export const createMachine = setup({
                 "Invalid Slug": {
                     target: "Ask for slug",
                     actions: {
-                        type: "setError",
+                        type: "showError",
                         params: ({ event }) => event,
                     },
                 },
@@ -347,7 +371,7 @@ export const createMachine = setup({
                 "Fatal Error": {
                     target: "Error",
                     actions: {
-                        type: "setError",
+                        type: "showError",
                         params: ({ event }) => event,
                     },
                 },
@@ -362,7 +386,7 @@ export const createMachine = setup({
                 "Invalid Slug": {
                     target: "Ask for slug",
                     actions: {
-                        type: "setError",
+                        type: "showError",
                         params: ({ event }) => event,
                     },
                 },
@@ -373,7 +397,7 @@ export const createMachine = setup({
                 "Fatal Error": {
                     target: "Error",
                     actions: {
-                        type: "setError",
+                        type: "showError",
                         params: ({ event }) => event,
                     },
                 },
@@ -381,4 +405,5 @@ export const createMachine = setup({
         },
     },
     initial: "Load Config",
+    entry: "printLogo",
 });

package/lib/machines/create-version-machine.js

@@ -1,10 +1,14 @@
 import { assign, setup, fromCallback } from "xstate";
+import chalk from "chalk";
 import { completeProdBundleUpload } from "../api/complete-prod-bundle-upload.js";
 import { createVersion } from "../api/create-version.js";
 import { emptyConfig } from "../schema.js";
 import { updateAppConfig } from "../util/app-config.js";
-import { loadAppConfig, loadDeveloperConfig } from "./actors.js";
+import { askWithTypedChoices, loadAppConfig, loadDeveloperConfig, confirm, fetchVersions, } from "./actors.js";
 import { jsMachine } from "./js-machine.js";
+import { printInstallInstructions } from "../util/print-install-instructions.js";
+import { showError, printLogo } from "./actions.js";
+import Spinner from "tiny-spinner";
 export const connectionTypes = [
     { value: "secret", label: "Secret" },
     { value: "oauth2-code", label: "OAuth2" },
@@ -13,25 +17,43 @@ export const audiences = [
     { value: "workspace", label: "Workspace" },
     { value: "workspace-member", label: "Workspace Member" },
 ];
+const bundlingSpinner = new Spinner();
 export const createVersionMachine = setup({
     types: {
         context: {},
         events: {},
         children: {},
     },
+    guards: {
+        "confirmed": (_, params) => params.output,
+        "is major": (_, params) => params.output === "major",
+        "no major version": (_, params) => params.versions.length === 0,
+    },
     actors: {
+        confirm,
+        fetchVersions,
+        askForUpgradeType: askWithTypedChoices(),
         javascript: jsMachine,
-        createVersion: fromCallback(({ sendBack, input: { developer: { token, slug: devSlug }, config, }, }) => {
+        createVersion: fromCallback(({ sendBack, input: { developer: { token, slug: devSlug }, config, upgradeType, }, }) => {
             const add = async () => {
+                const spinner = new Spinner();
+                spinner.start("Creating version...");
                 try {
                     const res = await createVersion({
                         token,
                         devSlug,
                         appId: config.id,
+                        major: upgradeType === "initial"
+                            ? 1
+                            : upgradeType === "major"
+                                ? config.major + 1
+                                : config.major,
                     });
+                    spinner.success("Version created");
                     sendBack({ type: "Version Created", version: res });
                 }
                 catch (error) {
+                    spinner.error("Error creating version");
                     sendBack({ type: "Error", error: error.message });
                 }
             };
@@ -40,7 +62,9 @@ export const createVersionMachine = setup({
         loadDeveloperConfig,
         loadAppConfig,
         upload: fromCallback(({ sendBack, input: { developer: { token, slug: developerSlug }, jsContents, version: { app_id: appId, client_bundle_upload_url, server_bundle_upload_url, major, minor, app_prod_version_bundle_id: bundleId, }, }, }) => {
+            const uploadSpinner = new Spinner();
             const upload = async () => {
+                uploadSpinner.start("Uploading...");
                 const [clientBundle, serverBundle] = jsContents;
                 await Promise.all([
                     fetch(client_bundle_upload_url, {
@@ -48,7 +72,7 @@ export const createVersionMachine = setup({
                         body: clientBundle,
                         headers: {
                             "Content-Type": "text/javascript",
-                            "Content-Length": String(clientBundle.length),
+                            "Content-Length": String(Buffer.from(clientBundle).length),
                         },
                     }),
                     fetch(server_bundle_upload_url, {
@@ -56,10 +80,13 @@ export const createVersionMachine = setup({
                         body: serverBundle,
                         headers: {
                             "Content-Type": "text/javascript",
-                            "Content-Length": String(serverBundle.length),
+                            "Content-Length": String(Buffer.from(serverBundle).length),
                         },
                     }),
                 ]);
+                uploadSpinner.success("Uploading complete");
+                const signSpinner = new Spinner();
+                signSpinner.start("Signing bundles...");
                 await completeProdBundleUpload({
                     token,
                     developerSlug,
@@ -68,23 +95,46 @@ export const createVersionMachine = setup({
                     minor,
                     bundleId,
                 });
+                signSpinner.success("Bundles signed");
                 updateAppConfig((config) => ({
                     ...config,
                     major,
                     minor,
                 }));
+                process.stdout.write(`\nVersion ${chalk.green(`${major}.${minor}`)} created!\n\n`);
                 sendBack({ type: "Upload Complete" });
             };
-            upload().catch((error) => sendBack({ type: "Upload Error", error }));
+            upload().catch((error) => {
+                uploadSpinner.error("Upload failed");
+                sendBack({ type: "Error", error: error.message });
+            });
         }),
     },
     actions: {
+        printLogo,
+        showError,
+        showConfigInstructions: ({ context }) => printInstallInstructions(context.configError),
+        startBundlingSpinner: () => {
+            bundlingSpinner.start("Bundling JavaScript...");
+        },
+        successBundlingSpinner: () => {
+            bundlingSpinner.success("Bundling complete");
+        },
+        errorBundlingSpinner: () => {
+            bundlingSpinner.error("Bundling failed");
+        },
         clearError: assign({
             error: () => undefined,
         }),
+        setUpgradeType: assign({
+            upgradeType: (_, params) => params.output,
+        }),
         setError: assign({
             error: (_, params) => params.error,
         }),
+        setVersions: assign({
+            versions: (_, params) => params.versions,
+        }),
         setDeveloperConfig: assign({
             developer: (_, params) => params,
         }),
@@ -105,6 +155,8 @@ export const createVersionMachine = setup({
     context: {
         developer: { slug: "", token: "" },
         config: emptyConfig,
+        upgradeType: "minor",
+        versions: [],
     },
     id: "Create Version Machine",
     states: {
@@ -125,6 +177,7 @@ export const createVersionMachine = setup({
         },
         "Show config instructions": {
             type: "final",
+            entry: "showConfigInstructions",
         },
         "Loading App Config": {
             invoke: {
@@ -144,6 +197,7 @@ export const createVersionMachine = setup({
         },
         "Error": {
             type: "final",
+            entry: { type: "showError", params: ({ context }) => ({ error: context.error }) },
         },
         "Creating version": {
             invoke: {
@@ -175,8 +229,11 @@ export const createVersionMachine = setup({
             },
             on: {
                 "JavaScript Success": {
-                    target: "Creating version",
-                    actions: { type: "setJsContents", params: ({ event }) => event },
+                    target: "Fetching Versions",
+                    actions: [
+                        { type: "setJsContents", params: ({ event }) => event },
+                        "successBundlingSpinner",
+                    ],
                     reenter: true,
                 },
                 "JavaScript Error": ".Build Error",
@@ -184,10 +241,12 @@ export const createVersionMachine = setup({
             states: {
                 "Build Error": {
                     type: "final",
+                    entry: "errorBundlingSpinner",
                 },
                 "Building": {},
             },
             initial: "Building",
+            entry: "startBundlingSpinner",
         },
         "Uploading": {
             invoke: {
@@ -203,8 +262,94 @@ export const createVersionMachine = setup({
                     target: "Success",
                     reenter: true,
                 },
+                "Error": {
+                    target: "Error",
+                    reenter: true,
+                    actions: { type: "setError", params: ({ event }) => event },
+                },
+            },
+        },
+        "Choose Version Type": {
+            invoke: {
+                src: "askForUpgradeType",
+                input: ({ context }) => ({
+                    choices: [
+                        {
+                            value: "minor",
+                            name: `Minor (v${context.config.major}.${context.config.minor + 1}) – with bug fixes and/or new features`,
+                        },
+                        {
+                            value: "major",
+                            name: `Major (v${context.config.major + 1}.0) – 🚨 WITH BREAKING CHANGES 🚨`,
+                        },
+                    ],
+                    message: "Is this a major version or a minor version?",
+                    required: true,
+                }),
+                onDone: [
+                    {
+                        target: "Confirm Major Version",
+                        actions: { type: "setUpgradeType", params: ({ event }) => event },
+                        reenter: true,
+                        guard: { type: "is major", params: ({ event }) => event },
+                    },
+                    {
+                        target: "Creating version",
+                        reenter: true,
+                    },
+                ],
+            },
+        },
+        "Confirm Major Version": {
+            invoke: {
+                src: "confirm",
+                input: {
+                    message: `Are you sure you want to create a major version with breaking changes?`,
+                },
+                onDone: [
+                    {
+                        target: "Creating version",
+                        guard: { type: "confirmed", params: ({ event }) => event },
+                    },
+                    {
+                        target: "Choose Version Type",
+                        reenter: true,
+                    },
+                ],
+            },
+        },
+        "Determine if first version": {
+            always: [
+                {
+                    target: "Creating version",
+                    guard: { type: "no major version", params: ({ context }) => context },
+                    reenter: true,
+                    actions: {
+                        type: "setUpgradeType",
+                        params: { output: "initial" },
+                    },
+                    description: `We're publishing v1.0`,
+                },
+                "Choose Version Type",
+            ],
+        },
+        "Fetching Versions": {
+            invoke: {
+                src: "fetchVersions",
+                input: ({ context }) => context,
+            },
+            on: {
+                "Versions Fetched": {
+                    target: "Determine if first version",
+                    actions: { type: "setVersions", params: ({ event }) => event },
+                },
+                "Error": {
+                    target: "Error",
+                    actions: { type: "setError", params: ({ event }) => event },
+                },
             },
         },
     },
     initial: "Loading Developer Config",
+    entry: "printLogo",
 });