sst 2.0.0-rc.40 → 2.0.0-rc.41

package/cli/colors.d.ts

@@ -1,7 +1,25 @@
 import chalk from "chalk";
 export declare const Colors: {
+    line: (message?: any, ...optionalParams: any[]) => void;
+    gap(): void;
+    hex: (color: string) => chalk.Chalk;
     primary: chalk.Chalk;
     link: chalk.Chalk;
     success: chalk.Chalk;
     danger: chalk.Chalk;
+    warning: chalk.Chalk;
+    dim: chalk.Chalk;
+    bold: chalk.Chalk;
+    all: chalk.Chalk & chalk.ChalkFunction & {
+        supportsColor: false | chalk.ColorSupport;
+        Level: chalk.Level;
+        Color: ("red" | "green" | "yellow" | "black" | "blue" | "magenta" | "cyan" | "white" | "gray" | "grey" | "blackBright" | "redBright" | "greenBright" | "yellowBright" | "blueBright" | "magentaBright" | "cyanBright" | "whiteBright") | ("bgBlack" | "bgRed" | "bgGreen" | "bgYellow" | "bgBlue" | "bgMagenta" | "bgCyan" | "bgWhite" | "bgGray" | "bgGrey" | "bgBlackBright" | "bgRedBright" | "bgGreenBright" | "bgYellowBright" | "bgBlueBright" | "bgMagentaBright" | "bgCyanBright" | "bgWhiteBright");
+        ForegroundColor: "red" | "green" | "yellow" | "black" | "blue" | "magenta" | "cyan" | "white" | "gray" | "grey" | "blackBright" | "redBright" | "greenBright" | "yellowBright" | "blueBright" | "magentaBright" | "cyanBright" | "whiteBright";
+        BackgroundColor: "bgBlack" | "bgRed" | "bgGreen" | "bgYellow" | "bgBlue" | "bgMagenta" | "bgCyan" | "bgWhite" | "bgGray" | "bgGrey" | "bgBlackBright" | "bgRedBright" | "bgGreenBright" | "bgYellowBright" | "bgBlueBright" | "bgMagentaBright" | "bgCyanBright" | "bgWhiteBright";
+        Modifiers: "bold" | "dim" | "reset" | "italic" | "underline" | "inverse" | "hidden" | "strikethrough" | "visible";
+        stderr: chalk.Chalk & {
+            supportsColor: false | chalk.ColorSupport;
+        };
+    };
+    prefix: string;
 };

package/cli/colors.js

@@ -1,7 +1,24 @@
 import chalk from "chalk";
+let last = "gap";
 export const Colors = {
+    line: (message, ...optionalParams) => {
+        last = "line";
+        console.log(message, ...optionalParams);
+    },
+    gap() {
+        if (last === "line") {
+            last = "gap";
+            console.log();
+        }
+    },
+    hex: chalk.hex,
     primary: chalk.hex("#E27152"),
     link: chalk.cyan,
     success: chalk.green,
     danger: chalk.red,
+    warning: chalk.yellow,
+    dim: chalk.dim,
+    bold: chalk.bold,
+    all: chalk,
+    prefix: chalk.bold("| "),
 };

package/cli/commands/console.js

@@ -1,8 +1,9 @@
+import { useLocalServerConfig } from "../local/server.js";
 export const consoleCommand = async (program) => program.command("console", "Start the SST Console", (yargs) => yargs, async () => {
     const { blue } = await import("colorette");
     const { useRuntimeServer } = await import("../../runtime/server.js");
     const { useLocalServer } = await import("../local/server.js");
-    const [_, local] = await Promise.all([
+    await Promise.all([
         useRuntimeServer(),
         useLocalServer({
             key: "",
@@ -10,5 +11,6 @@ export const consoleCommand = async (program) => program.command("console", "Sta
             live: false,
         }),
     ]);
-    console.log(`Console started: ${blue(local.url)}`);
+    const local = await useLocalServerConfig();
+    console.log(`Console started: ${local.url}`);
 });

package/cli/commands/deploy.js

@@ -1,3 +1,5 @@
+import { Colors } from "../colors.js";
+import { printHeader } from "../ui/header.js";
 export const deploy = (program) => program.command("deploy [filter]", "Deploy your app to AWS", (yargs) => yargs
     .option("from", {
     type: "string",
@@ -15,13 +17,8 @@ export const deploy = (program) => program.command("deploy [filter]", "Deploy yo
     const { loadAssembly, Stacks } = await import("../../stacks/index.js");
     const { render } = await import("ink");
     const { DeploymentUI } = await import("../ui/deploy.js");
-    const { Colors } = await import("../colors.js");
     const project = useProject();
-    console.log();
-    console.log(`  ${Colors.primary(`${bold(`SST`)} v${project.version}`)}`);
-    console.log();
-    console.log(`  ${Colors.primary(`➜`)}  ${bold(`Stage:`)}   ${dim(project.config.stage)}`);
-    console.log();
+    printHeader({});
     // Generate cloud assembly
     // - if --from is specified, we will use the existing cloud assembly
     // - if --from is not specified, we will call synth to generate
@@ -32,7 +29,6 @@ export const deploy = (program) => program.command("deploy [filter]", "Deploy yo
         }
         const spinner = createSpinner({
             text: " Building stacks",
-            indent: 2,
         });
         const result = await Stacks.synth({
             fn: project.stacks,
@@ -45,7 +41,7 @@ export const deploy = (program) => program.command("deploy [filter]", "Deploy yo
     const target = assembly.stacks.filter((s) => !args.filter ||
         s.stackName.toLowerCase().includes(args.filter.toLowerCase()));
     if (!target.length) {
-        console.log(`No stacks found matching ${blue(args.filter)}`);
+        Colors.line(`No stacks found matching ${blue(args.filter)}`);
         process.exit(1);
     }
     const component = render(React.createElement(DeploymentUI, { stacks: assembly.stacks.map((s) => s.stackName) }));

package/cli/commands/dev.js

@@ -1,5 +1,6 @@
 import chalk from "chalk";
 import { Colors } from "../colors.js";
+import { printHeader } from "../ui/header.js";
 export const dev = (program) => program.command(["dev", "start"], "Work on your app locally", (yargs) => yargs, async (args) => {
     const { useRuntimeWorkers } = await import("../../runtime/workers.js");
     const { useIOTBridge } = await import("../../runtime/iot.js");
@@ -27,70 +28,71 @@ export const dev = (program) => program.command(["dev", "start"], "Work on your
     const { useRDSWarmer } = await import("./plugins/warmer.js");
     const { useProject } = await import("../../project.js");
     const { useMetadata } = await import("../../stacks/metadata.js");
-    const { Functions } = await import("../ui/functions.js");
     if (args._[0] === "start") {
         console.log(yellow(`Warning: ${bold(`sst start`)} has been renamed to ${bold(`sst dev`)}`));
     }
     const useFunctionLogger = Context.memo(async () => {
-        const component = render(React.createElement(Functions, null));
         const bus = useBus();
-        /*
+        const colors = ["#01cdfe", "#ff71ce", "#05ffa1", "#b967ff"];
+        let index = 0;
+        const pending = new Map();
+        function start(requestID) {
+            pending.set(requestID, {
+                requestID,
+                started: Date.now(),
+                color: colors[index % colors.length],
+            });
+            index++;
+        }
+        function prefix(requestID) {
+            return Colors.hex(pending.get(requestID).color)(Colors.prefix);
+        }
+        function end(requestID) {
+            // index--;
+            // if (index < 0) index = colors.length - 1;
+            pending.delete(requestID);
+        }
         bus.subscribe("function.invoked", async (evt) => {
-          console.log(
-            bold(magenta(`  ➜ `)),
-            useFunctions().fromID(evt.properties.functionID).handler!
-          );
+            start(evt.properties.requestID);
+            Colors.line(prefix(evt.properties.requestID), Colors.dim.bold("Invoked"), Colors.dim(useFunctions().fromID(evt.properties.functionID).handler));
         });
-
+        bus.subscribe("worker.stdout", async (evt) => {
+            const { started } = pending.get(evt.properties.requestID);
+            for (let line of evt.properties.message.split("\n")) {
+                Colors.line(prefix(evt.properties.requestID), Colors.dim(("+" + (Date.now() - started) + "ms").padEnd(7)), Colors.dim(line));
+            }
+        });
+        /*
         bus.subscribe("function.build.success", async (evt) => {
           console.log(
             bold(gray(`Built   `)),
             useFunctions().fromID(evt.properties.functionID).handler!
           );
         });
+        */
         bus.subscribe("function.build.failed", async (evt) => {
-          console.log(
-            bold(red(`Build failed `)),
-            useFunctions().fromID(evt.properties.functionID).handler!
-          );
-          console.log(dim(evt.properties.errors.join("\n")));
-        });
-
-        bus.subscribe("worker.stdout", async (evt) => {
-          const { message } = evt.properties;
-          const lines = message.split("\n");
-          for (let i = 0; i < lines.length; i++) {
-            const line = lines[i];
-            lines[i] = "     " + line;
-          }
-          console.log(
-            bold(blue(`  ➜ `)),
-            useFunctions().fromID(evt.properties.functionID).handler!
-          );
-          console.log(dim(lines.join("\n")));
+            Colors.line(Colors.danger(Colors.prefix), useFunctions().fromID(evt.properties.functionID).handler);
+            for (const line of evt.properties.errors) {
+                Colors.line(Colors.danger(Colors.prefix), line);
+            }
         });
-        */
-        /*
         bus.subscribe("function.success", async (evt) => {
-          console.log(
-            bold(green(`  ✔ `)),
-            useFunctions().fromID(evt.properties.functionID).handler!
-          );
-          console.log();
+            // stdout logs sometimes come in after
+            const req = pending.get(evt.properties.requestID);
+            setTimeout(() => {
+                Colors.line(prefix(evt.properties.requestID), Colors.dim(`Done in ${Date.now() - req.started - 100}ms`));
+                end(evt.properties.requestID);
+            }, 100);
         });
-        */
-        /*
         bus.subscribe("function.error", async (evt) => {
-          console.log(
-            bold(red(`  ✖ `)),
-            useFunctions().fromID(evt.properties.functionID).handler!
-          );
-          console.log(`     ${Colors.danger(evt.properties.errorMessage)}`);
-          for (const line of evt.properties.trace || []) {
-            console.log(`     ${dim(line)}`);
-          }
+            setTimeout(() => {
+                Colors.line(prefix(evt.properties.requestID), Colors.danger.bold("Error:"), Colors.danger.bold(evt.properties.errorMessage));
+                for (const line of evt.properties.trace || []) {
+                    Colors.line(prefix(evt.properties.requestID), `${dim(line)}`);
+                }
+                end(evt.properties.requestID);
+            }, 100);
         });
-        */
     });
     const useStackBuilder = Context.memo(async () => {
         const watcher = useWatcher();
@@ -100,8 +102,8 @@ export const dev = (program) => program.command(["dev", "start"], "Work on your
         let pending;
         let isDeploying = false;
         async function build() {
+            Colors.gap();
             const spinner = createSpinner({
-                indent: 2,
                 color: "gray",
                 text: lastDeployed
                     ? ` Building stacks`
@@ -121,7 +123,7 @@ export const dev = (program) => program.command(["dev", "start"], "Work on your
                 Logger.debug("Checksum", "next", next, "old", lastDeployed);
                 if (next === lastDeployed) {
                     spinner.succeed(" No changes");
-                    console.log();
+                    Colors.gap();
                     return;
                 }
                 if (!lastDeployed) {
@@ -137,10 +139,11 @@ export const dev = (program) => program.command(["dev", "start"], "Work on your
             }
             catch (ex) {
                 spinner.fail();
-                console.log(ex.stack
+                Colors.line(ex.stack
                     .split("\n")
-                    .map((line) => "     " + line)
+                    .map((line) => "   " + line)
                     .join("\n"));
+                Colors.gap();
             }
         }
         async function deploy() {
@@ -152,12 +155,12 @@ export const dev = (program) => program.command(["dev", "start"], "Work on your
             const assembly = pending;
             const nextChecksum = await checksum(assembly.directory);
             pending = undefined;
-            console.log();
+            if (lastDeployed)
+                console.log();
             const component = render(React.createElement(DeploymentUI, { stacks: assembly.stacks.map((s) => s.stackName) }));
             const results = await Stacks.deployMany(assembly.stacks);
             component.clear();
             component.unmount();
-            render(React.createElement(Functions, null));
             lastDeployed = nextChecksum;
             printDeploymentResults(assembly, results);
             const keys = await SiteEnv.keys();
@@ -208,17 +211,13 @@ export const dev = (program) => program.command(["dev", "start"], "Work on your
     const project = useProject();
     const primary = chalk.hex("#E27152");
     const link = chalk.cyan;
-    const local = await useLocalServer({
+    await useLocalServer({
         key: "",
         cert: "",
         live: true,
     });
     console.clear();
-    console.log();
-    console.log(`  ${Colors.primary(`${bold(`SST`)} v${project.version}`)}  ${dim(`ready!`)}`);
-    console.log();
-    console.log(`  ${primary(`➜`)}  ${bold(`Stage:`)}   ${dim(project.config.stage)}`);
-    console.log(`  ${primary(`➜`)}  ${bold(`Console:`)} ${link(local.url)}`);
+    await printHeader({ console: true });
     /*
     console.log(`  ${primary(`➜`)}  ${bold(dim(`Outputs:`))}`);
     for (let i = 0; i < 3; i++) {

package/cli/commands/diff.js

@@ -2,12 +2,13 @@ export const diff = (program) => program.command("diff", "Compare your app with
     type: "boolean",
     describe: "Compare in dev mode",
 }), async (args) => {
-    const { printStackDiff } = await import("aws-cdk/lib/diff.js");
     const { useProject } = await import("../../project.js");
     const { Stacks } = await import("../../stacks/index.js");
     const { useAWSClient } = await import("../../credentials.js");
     const { CloudFormationClient, GetTemplateCommand } = await import("@aws-sdk/client-cloudformation");
     const { createSpinner } = await import("../spinner.js");
+    const { green } = await import("colorette");
+    // Build app
     const spinner = createSpinner("Building stacks");
     const project = useProject();
     const assembly = await Stacks.synth({
@@ -15,12 +16,51 @@ export const diff = (program) => program.command("diff", "Compare your app with
         mode: args.dev ? "dev" : "deploy",
     });
     spinner.succeed();
+    console.log("");
+    // Diff each stack
+    let changesAcc = 0;
+    let changedStacks = 0;
     const cfn = useAWSClient(CloudFormationClient);
     for (const stack of assembly.stacks) {
+        const spinner = createSpinner(`${stack.stackName}: Checking for changes...`);
+        // get old template
         const response = await cfn.send(new GetTemplateCommand({
             StackName: stack.stackName,
         }));
-        printStackDiff(JSON.parse(response.TemplateBody), stack, true, 3);
+        const oldTemplate = JSON.parse(response.TemplateBody);
+        // generate diff
+        const { count, diff } = await Stacks.diff(stack, oldTemplate);
+        spinner.clear();
+        // print diff result
+        if (count === 0) {
+            console.log(`➜ ${stack.stackName}: No changes`);
+            console.log("");
+        }
+        else if (count === 1) {
+            console.log(`➜ ${stack.stackName}: ${count} change`);
+            console.log("");
+            console.log(diff);
+            changesAcc += count;
+            changedStacks++;
+        }
+        else {
+            console.log(`➜ ${stack.stackName}: ${count} changes`);
+            console.log("");
+            console.log(diff);
+            changesAcc += count;
+            changedStacks++;
+        }
+    }
+    // Handle no changes
+    if (changedStacks === 0) {
+        console.log(green("✔"), " There were no changes");
+    }
+    else {
+        console.log(green("✔"), changesAcc === 1
+            ? "1 change found in"
+            : `${changesAcc} changes found in`, changedStacks === 1
+            ? "1 stack"
+            : `${changedStacks} stacks`);
     }
     process.exit(0);
 });

package/cli/commands/env.js

@@ -17,7 +17,7 @@ export const env = (program) => program.command("env <command>", "Load environme
             .then(() => true)
             .catch(() => false);
         if (!exists) {
-            spinner = createSpinner("Waiting for SST to start").start();
+            spinner = createSpinner("Cannot find SST environment variables. Waiting for SST to start...").start();
             await new Promise((resolve) => setTimeout(resolve, 1000));
             continue;
         }

package/cli/local/server.d.ts

@@ -11,9 +11,11 @@ declare module "../../bus.js" {
         "local.patches": DendriformPatch[];
     }
 }
-export declare function useLocalServer(opts: Opts): Promise<{
+export declare const useLocalServerConfig: () => Promise<{
     port: number;
     url: string;
+}>;
+export declare function useLocalServer(opts: Opts): Promise<{
     updateState: (cb: (draft: WritableDraft<State>) => void) => void;
     updateFunction: (id: string, cb: (draft: WritableDraft<FunctionState>) => void) => void;
 }>;

package/cli/local/server.js

@@ -12,11 +12,20 @@ import { sync } from "cross-spawn";
 import { useProject } from "../../project.js";
 import { useBus } from "../../bus.js";
 import getPort from "get-port";
-export async function useLocalServer(opts) {
+import { Context } from "../../context/context.js";
+export const useLocalServerConfig = Context.memo(async () => {
     const project = useProject();
     const port = await getPort({
         port: 13557,
     });
+    return {
+        port,
+        url: `https://console.sst.dev/${project.config.name}/${project.config.stage}${port !== 13557 ? `?port=${port}` : ""}`,
+    };
+});
+export async function useLocalServer(opts) {
+    const cfg = await useLocalServerConfig();
+    const project = useProject();
     let state = {
         app: project.config.name,
         stage: project.config.stage,
@@ -106,7 +115,7 @@ export async function useLocalServer(opts) {
         console.log("Rejecting unauthorized connection from " + req.headers.origin);
         socket.terminate();
     });
-    server.listen(port);
+    server.listen(cfg.port);
     const handler = applyWSSHandler({
         wss,
         router,
@@ -203,8 +212,6 @@ export async function useLocalServer(opts) {
         });
     });
     const result = {
-        port,
-        url: `https://console.sst.dev/${project.config.name}/${project.config.stage}${port !== 13557 ? `?port=${port}` : ""}`,
         updateState,
         updateFunction,
     };

package/cli/ui/deploy.js

@@ -3,7 +3,6 @@ import { Box, Text } from "ink";
 import { useBus } from "../../bus.js";
 import { Stacks } from "../../stacks/index.js";
 import inkSpinner from "ink-spinner";
-import { bold, dim, green, red } from "colorette";
 import { Colors } from "../colors.js";
 // @ts-ignore
 const { default: Spinner } = inkSpinner;
@@ -12,7 +11,9 @@ export const DeploymentUI = (props) => {
     const [resources, setResources] = useState({});
     const [resources2, setResources2] = useState({});
     useEffect(() => {
-        console.log(`  ${Colors.primary(`➜`)}  ${bold(dim(`Deploying...`))}`);
+        Colors.gap();
+        Colors.line(`${Colors.primary(`➜`)}  ${Colors.bold(`Deploying...`)}`);
+        Colors.gap();
         const bus = useBus();
         const update = bus.subscribe("stack.updated", (payload) => {
             setStacks((prev) => ({
@@ -32,9 +33,9 @@ export const DeploymentUI = (props) => {
                 return;
             setResources2((previous) => {
                 if (Stacks.isFinal(event.ResourceStatus)) {
-                    console.log(dim(`     ${event.StackName} ${event.ResourceType} ${event.LogicalResourceId}`), Stacks.isFailed(event.ResourceStatus)
+                    Colors.line(Colors.warning(Colors.prefix), Colors.dim(`${event.StackName} ${event.ResourceType} ${event.LogicalResourceId}`), Stacks.isFailed(event.ResourceStatus)
                         ? Colors.danger(event.ResourceStatus)
-                        : dim(event.ResourceStatus));
+                        : Colors.dim(event.ResourceStatus));
                     const { [event.LogicalResourceId]: _, ...next } = previous;
                     return next;
                 }
@@ -61,7 +62,6 @@ export const DeploymentUI = (props) => {
         Object.entries(resources2).map(([_, evt]) => {
             return (React.createElement(Box, { key: evt.LogicalResourceId },
                 React.createElement(Text, null,
-                    "  ",
                     React.createElement(Spinner, null),
                     "  ",
                     evt.StackName,
@@ -75,9 +75,11 @@ export const DeploymentUI = (props) => {
         React.createElement(Box, null)));
 };
 export function printDeploymentResults(assembly, results) {
-    console.log();
-    console.log(`  ${green(`✔`)}  ${bold(dim(`Deployed:`))}`);
+    Colors.gap();
+    Colors.line(Colors.success(`✔`), Colors.bold(` Deployed`));
     for (const [stack, result] of Object.entries(results)) {
+        if (Object.values(result.errors).length)
+            continue;
         const outputs = Object.entries(result.outputs).filter(([key, _]) => {
             if (key.startsWith("Export"))
                 return false;
@@ -87,22 +89,22 @@ export function printDeploymentResults(assembly, results) {
                 return false;
             return true;
         });
-        console.log(`     ${dim(stack)}`);
+        Colors.line(`   ${Colors.dim(stack)}`);
         if (outputs.length > 0) {
             for (const key of Object.keys(Object.fromEntries(outputs)).sort()) {
                 const value = result.outputs[key];
-                console.log(`     ${bold(dim(key))}: ${value}`);
+                Colors.line(`   ${Colors.bold.dim(key)}: ${value}`);
             }
         }
     }
-    console.log();
+    Colors.gap();
     if (Object.values(results).flatMap((s) => Object.keys(s.errors)).length) {
-        console.log(`  ${red(`✖`)}  ${bold(dim(`Errors:`))}`);
+        Colors.line(`${Colors.danger(`✖`)}  ${Colors.bold.dim(`Errors`)}`);
         for (const [stack, result] of Object.entries(results)) {
             const hasErrors = Object.entries(result.errors).length > 0;
             if (!hasErrors)
                 continue;
-            console.log(`     ${dim(stack)}`);
+            Colors.line(`   ${Colors.dim(stack)}`);
             for (const [id, error] of Object.entries(result.errors)) {
                 const found = Object.entries(assembly.manifest.artifacts?.[stack].metadata || {}).find(([_key, value]) => value[0]?.type === "aws:cdk:logicalId" && value[0]?.data === id)?.[0] || "";
                 const readable = found
@@ -110,9 +112,9 @@ export function printDeploymentResults(assembly, results) {
                     .filter(Boolean)
                     .slice(1, -1)
                     .join("/");
-                console.log(`     ${bold(red(readable))}: ${error}`);
+                Colors.line(`  ${Colors.danger.bold(readable)}: ${error}`);
             }
-            console.log();
         }
+        Colors.gap();
     }
 }

package/cli/ui/header.d.ts

@@ -0,0 +1,4 @@
+export declare function printHeader(input: {
+    console?: boolean;
+}): Promise<void>;
+export declare function printConsole(): void;

package/cli/ui/header.js

@@ -0,0 +1,12 @@
+import { Colors } from "../colors.js";
+import { useLocalServerConfig } from "../local/server.js";
+export async function printHeader(input) {
+    const local = await useLocalServerConfig();
+    Colors.line(`${Colors.primary.bold("SST v2.0.4")}  ${Colors.dim(`ready!`)}`);
+    Colors.gap();
+    Colors.line(`${Colors.primary(`➜`)}  ${Colors.bold("Stage:")}   dev`);
+    if (input.console)
+        Colors.line(`${Colors.primary(`➜`)}  ${Colors.bold("Console:")} ${Colors.link(local.url)}`);
+    Colors.gap();
+}
+export function printConsole() { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sst",
-  "version": "2.0.0-rc.40",
+  "version": "2.0.0-rc.41",
   "bin": {
     "sst": "cli/sst.js"
   },