git-stack-cli 1.0.2 → 1.0.3

package/src/app/App.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+
+import { AutoUpdate } from "~/app/AutoUpdate";
+import { Debug } from "~/app/Debug";
+import { DependencyCheck } from "~/app/DependencyCheck";
+import { GatherMetadata } from "~/app/GatherMetadata";
+import { GithubApiError } from "~/app/GithubApiError";
+import { LocalCommitStatus } from "~/app/LocalCommitStatus";
+import { Main } from "~/app/Main";
+import { Output } from "~/app/Output";
+import { Providers } from "~/app/Providers";
+import { RebaseCheck } from "~/app/RebaseCheck";
+import { Store } from "~/app/Store";
+
+export function App() {
+  const actions = Store.useActions();
+
+  const ink = Store.useState((state) => state.ink);
+  const argv = Store.useState((state) => state.argv);
+
+  if (!ink || !argv) {
+    return null;
+  }
+
+  // // debug component
+  // return (
+  //   <React.Fragment>
+  //     <Debug />
+  //     <Output />
+
+  //     <GithubApiError />
+  //   </React.Fragment>
+  // );
+
+  return (
+    <Providers>
+      <Debug />
+      <Output />
+
+      <AutoUpdate
+        name="git-stack-cli"
+        verbose={argv.verbose || argv.update}
+        timeoutMs={argv.update ? 30 * 1000 : 2 * 1000}
+        onOutput={actions.output}
+        onDone={() => {
+          if (argv.update) {
+            actions.exit(0);
+          }
+        }}
+      >
+        <RebaseCheck>
+          <DependencyCheck>
+            {!argv.verbose ? null : <GithubApiError />}
+
+            <GatherMetadata>
+              <LocalCommitStatus>
+                <Main />
+              </LocalCommitStatus>
+            </GatherMetadata>
+          </DependencyCheck>
+        </RebaseCheck>
+      </AutoUpdate>
+    </Providers>
+  );
+}

package/src/app/AutoUpdate.tsx

@@ -0,0 +1,229 @@
+import * as React from "react";
+
+import fs from "node:fs";
+import path from "node:path";
+
+import * as Ink from "ink-cjs";
+
+import { Brackets } from "~/app/Brackets";
+import { FormatText } from "~/app/FormatText";
+import { YesNoPrompt } from "~/app/YesNoPrompt";
+import { cli } from "~/core/cli";
+import { colors } from "~/core/colors";
+import { fetch_json } from "~/core/fetch_json";
+import { is_finite_value } from "~/core/is_finite_value";
+import { read_json } from "~/core/read_json";
+import { semver_compare } from "~/core/semver_compare";
+import { sleep } from "~/core/sleep";
+
+type Props = {
+  name: string;
+  children: React.ReactNode;
+  verbose?: boolean;
+  timeoutMs?: number;
+  onError?: (error: Error) => void;
+  onOutput?: (output: React.ReactNode) => void;
+  onDone?: () => void;
+};
+
+type State = {
+  error: null | Error;
+  local_version: null | string;
+  latest_version: null | string;
+  status: "init" | "prompt" | "install" | "done" | "exit";
+};
+
+function reducer(state: State, patch: Partial<State>) {
+  return { ...state, ...patch };
+}
+
+export function AutoUpdate(props: Props) {
+  const props_ref = React.useRef(props);
+  props_ref.current = props;
+
+  const [output, set_output] = React.useState<Array<React.ReactNode>>([]);
+
+  const [state, patch] = React.useReducer(reducer, {
+    error: null,
+    local_version: null,
+    latest_version: null,
+    status: "init",
+  });
+
+  function handle_output(node: React.ReactNode) {
+    if (typeof props.onOutput === "function") {
+      props.onOutput(node);
+    } else {
+      set_output((current) => {
+        return [...current, node];
+      });
+    }
+  }
+
+  React.useEffect(() => {
+    let status: State["status"] = "done";
+    let local_version: string | null = null;
+    let latest_version: string | null = null;
+
+    async function auto_update() {
+      if (props_ref.current.verbose) {
+        handle_output(
+          <Ink.Text key="init">Checking for latest version...</Ink.Text>
+        );
+      }
+
+      const timeout_ms = is_finite_value(props.timeoutMs)
+        ? props.timeoutMs
+        : 2 * 1000;
+
+      const npm_json = await Promise.race([
+        fetch_json(`https://registry.npmjs.org/${props.name}`),
+
+        sleep(timeout_ms).then(() => {
+          throw new Error("Timeout");
+        }),
+      ]);
+
+      latest_version = npm_json?.["dist-tags"]?.latest;
+
+      if (!latest_version) {
+        throw new Error("Unable to retrieve latest version from npm");
+      }
+
+      const script_dir = path.dirname(fs.realpathSync(process.argv[1]));
+
+      // dist/ts/index.js
+      const package_json_path = path.join(
+        script_dir,
+        "..",
+        "..",
+        "package.json"
+      );
+
+      const package_json = read_json<{ version: string }>(package_json_path);
+
+      if (!package_json) {
+        // unable to find read package.json, skip auto update
+        throw new Error(`Unable to read package.json [${package_json_path}]`);
+      }
+
+      local_version = package_json.version;
+
+      if (props_ref.current.verbose) {
+        handle_output(
+          <FormatText
+            key="versions"
+            wrapper={<Ink.Text />}
+            message="Auto update found latest version {latest_version} and current local version {local_version}"
+            values={{
+              latest_version: <Brackets>{latest_version}</Brackets>,
+              local_version: <Brackets>{local_version}</Brackets>,
+            }}
+          />
+        );
+      }
+
+      const semver_result = semver_compare(latest_version, local_version);
+
+      if (semver_result === 0) {
+        return;
+      }
+
+      if (semver_result === -1) {
+        // latest version is less than or equal to local version, skip auto update
+        throw new Error(
+          `latest version < local_version, skipping auto update [${latest_version} < ${local_version}]`
+        );
+      }
+
+      // trigger yes no prompt
+      status = "prompt";
+    }
+
+    const onError = props_ref.current.onError || (() => {});
+
+    auto_update()
+      .then(() => {
+        patch({ status, local_version, latest_version });
+      })
+      .catch((error) => {
+        patch({ status, error, local_version, latest_version });
+        onError(error);
+
+        if (props_ref.current.verbose) {
+          handle_output(
+            <Ink.Text key="error" color={colors.red}>
+              {error?.message}
+            </Ink.Text>
+          );
+        }
+      })
+      .finally(() => {
+        props.onDone?.();
+      });
+  }, []);
+
+  const status = (function render_status() {
+    switch (state.status) {
+      case "init":
+        return null;
+
+      case "prompt":
+        return (
+          <YesNoPrompt
+            message={
+              <Ink.Text color={colors.yellow}>
+                New version available, would you like to update?
+              </Ink.Text>
+            }
+            onYes={async () => {
+              handle_output(
+                <FormatText
+                  key="install"
+                  wrapper={<Ink.Text />}
+                  message="Installing {name}@{version}..."
+                  values={{
+                    name: (
+                      <Ink.Text color={colors.yellow}>{props.name}</Ink.Text>
+                    ),
+                    version: (
+                      <Ink.Text color={colors.blue}>
+                        {state.latest_version}
+                      </Ink.Text>
+                    ),
+                  }}
+                />
+              );
+
+              patch({ status: "install" });
+
+              await cli(`npm install -g ${props.name}@latest`);
+
+              patch({ status: "exit" });
+
+              handle_output(<Ink.Text key="done">Auto update done.</Ink.Text>);
+            }}
+            onNo={() => {
+              patch({ status: "done" });
+            }}
+          />
+        );
+
+      case "install":
+        return null;
+
+      case "exit":
+        return null;
+
+      case "done":
+        return props.children;
+    }
+  })();
+
+  return (
+    <React.Fragment>
+      {output}
+      {status}
+    </React.Fragment>
+  );
+}

package/src/app/Await.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+
+import { cache } from "~/core/cache";
+import { invariant } from "~/core/invariant";
+
+type Cache = ReturnType<typeof cache>;
+
+type BaseProps = {
+  function: Parameters<typeof cache>[0];
+};
+
+type WithChildrenProps = BaseProps & {
+  fallback: React.SuspenseProps["fallback"];
+  children: React.ReactNode;
+  delayFallbackMs?: number;
+};
+
+type WithoutChildrenProps = BaseProps;
+
+type Props = WithChildrenProps | WithoutChildrenProps;
+
+export function Await(props: Props) {
+  const [display_fallback, set_display_fallback] = React.useState(false);
+
+  // const id = React.useId();
+  const cacheRef = React.useRef<null | Cache>(null);
+
+  if (!cacheRef.current) {
+    // console.debug("setting cacheRef.current", { id });
+    cacheRef.current = cache(props.function);
+  }
+
+  let delayFallbackMs: number;
+  if ("delayFallbackMs" in props && typeof props.delayFallbackMs === "number") {
+    delayFallbackMs = props.delayFallbackMs;
+  } else {
+    delayFallbackMs = 1000;
+  }
+
+  React.useEffect(() => {
+    const cache = cacheRef.current;
+
+    if (!cache) {
+      return;
+    }
+
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    timeoutId = setTimeout(() => {
+      // only display fallback if we are still pending
+      if (cache.check() === "pending") {
+        set_display_fallback(true);
+      }
+    }, delayFallbackMs);
+
+    return function cleanup() {
+      clearTimeout(timeoutId);
+    };
+  }, [delayFallbackMs]);
+
+  invariant(cacheRef.current, "cache must exist");
+
+  if ("fallback" in props) {
+    return (
+      <React.Suspense fallback={!display_fallback ? null : props.fallback}>
+        <ReadCache cache={cacheRef.current}>{props.children}</ReadCache>
+      </React.Suspense>
+    );
+  }
+
+  return <ReadCache cache={cacheRef.current} />;
+}
+
+type ReadCacheProps = {
+  cache: Cache;
+  children?: React.ReactNode;
+};
+
+function ReadCache(props: ReadCacheProps) {
+  props.cache.read();
+  return props.children;
+}

package/src/app/Brackets.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import * as Ink from "ink-cjs";
+
+import { colors } from "~/core/colors";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export function Brackets(props: Props) {
+  const color = colors.orange;
+  const text_color = colors.blue;
+
+  return (
+    <Ink.Text color={text_color}>
+      <Ink.Text color={color}>[</Ink.Text>
+      {props.children}
+      <Ink.Text color={color}>]</Ink.Text>
+    </Ink.Text>
+  );
+}

package/src/app/Command.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+import * as Ink from "ink-cjs";
+
+import { colors } from "~/core/colors";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export function Command(props: Props) {
+  const text_color = colors.orange;
+
+  return (
+    <Ink.Text bold color={text_color}>
+      {props.children}
+    </Ink.Text>
+  );
+}

package/src/app/Debug.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+
+import fs from "node:fs";
+import path from "node:path";
+
+import * as Ink from "ink-cjs";
+
+import { Store } from "~/app/Store";
+import { colors } from "~/core/colors";
+import { invariant } from "~/core/invariant";
+import * as json from "~/core/json";
+
+export function Debug() {
+  const actions = Store.useActions();
+  const state = Store.useState((state) => state);
+  const argv = Store.useState((state) => state.argv);
+  const debug = Store.useState((state) => state.select.debug(state));
+
+  React.useEffect(
+    function debugMessageOnce() {
+      if (debug) {
+        actions.output(
+          <Ink.Text color={colors.yellow}>Debug mode enabled</Ink.Text>
+        );
+      }
+    },
+    [argv]
+  );
+
+  React.useEffect(
+    function syncStateJson() {
+      invariant(state.cwd, "state.cwd must exist");
+
+      if (!argv?.["write-state-json"]) {
+        return;
+      }
+
+      const output_file = path.join(state.cwd, "git-stack-state.json");
+
+      if (fs.existsSync(output_file)) {
+        fs.rmSync(output_file);
+      }
+
+      const serialized = json.serialize(state);
+      const content = JSON.stringify(serialized, null, 2);
+      fs.writeFileSync(output_file, content);
+    },
+    [argv, state]
+  );
+
+  return null;
+}

package/src/app/DependencyCheck.tsx

@@ -0,0 +1,155 @@
+import * as React from "react";
+
+import * as Ink from "ink-cjs";
+
+import { Await } from "~/app/Await";
+import { Command } from "~/app/Command";
+import { Parens } from "~/app/Parens";
+import { Store } from "~/app/Store";
+import { Url } from "~/app/Url";
+import { cli } from "~/core/cli";
+import { colors } from "~/core/colors";
+import { is_command_available } from "~/core/is_command_available";
+import { match_group } from "~/core/match_group";
+import { semver_compare } from "~/core/semver_compare";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export function DependencyCheck(props: Props) {
+  const actions = Store.useActions();
+
+  return (
+    <Await
+      fallback={
+        <Ink.Text color={colors.yellow}>
+          Checking <Command>git</Command> install...
+        </Ink.Text>
+      }
+      function={async () => {
+        // await Promise.all([
+        //   cli(`for i in $(seq 1 5); do echo $i; sleep 1; done`),
+        //   cli(`for i in $(seq 5 1); do printf "$i "; sleep 1; done; echo`),
+        // ]);
+
+        if (is_command_available("git")) {
+          return;
+        }
+
+        actions.output(
+          <Ink.Text color={colors.yellow}>
+            <Command>git</Command> must be installed.
+          </Ink.Text>
+        );
+
+        actions.exit(2);
+      }}
+    >
+      <Await
+        fallback={
+          <Ink.Text color={colors.yellow}>
+            Checking <Command>node</Command> install...
+          </Ink.Text>
+        }
+        function={async () => {
+          const process_version = process.version.substring(1);
+          const semver_result = semver_compare(process_version, "14.0.0");
+
+          if (semver_result >= 0) {
+            return;
+          }
+
+          actions.output(
+            <Ink.Text color={colors.yellow}>
+              <Command>node</Command> must be installed.
+            </Ink.Text>
+          );
+
+          actions.exit(2);
+        }}
+      >
+        <Await
+          fallback={
+            <Ink.Text color={colors.yellow}>
+              <Ink.Text>
+                Checking <Command>gh</Command> install...
+              </Ink.Text>
+            </Ink.Text>
+          }
+          function={async () => {
+            if (is_command_available("gh")) {
+              return;
+            }
+
+            actions.output(
+              <Ink.Text color={colors.yellow}>
+                <Command>gh</Command> must be installed.
+              </Ink.Text>
+            );
+
+            actions.output(
+              <Ink.Text color={colors.yellow}>
+                <Ink.Text>{"Visit "}</Ink.Text>
+                <Url>https://cli.github.com</Url>
+                <Ink.Text>{" to install the github cli "}</Ink.Text>
+
+                <Parens>
+                  <Command>gh</Command>
+                </Parens>
+              </Ink.Text>
+            );
+
+            actions.exit(3);
+          }}
+        >
+          <Await
+            fallback={
+              <Ink.Text color={colors.yellow}>
+                <Ink.Text>
+                  Checking <Command>gh auth status</Command>...
+                </Ink.Text>
+              </Ink.Text>
+            }
+            function={async () => {
+              const auth_status = await cli(`gh auth status`, {
+                ignoreExitCode: true,
+              });
+
+              if (auth_status.code === 0) {
+                const username = match_group(
+                  auth_status.stdout,
+                  RE.auth_username,
+                  "username"
+                );
+
+                actions.set((state) => {
+                  state.username = username;
+                });
+
+                return;
+              }
+
+              actions.output(
+                <Ink.Text color={colors.yellow}>
+                  <Command>gh</Command>
+                  <Ink.Text>{" requires login, please run "}</Ink.Text>
+                  <Command>gh auth login</Command>
+                </Ink.Text>
+              );
+
+              actions.exit(4);
+            }}
+          >
+            {props.children}
+          </Await>
+        </Await>
+      </Await>
+    </Await>
+  );
+}
+
+const RE = {
+  // Logged in to github.com as magus
+  auth_username: /Logged in to github.com as (?<username>[^\s]+)/,
+};

package/src/app/Exit.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { Store } from "~/app/Store";
+
+type Props = {
+  clear: boolean;
+  code: number;
+};
+
+export function Exit(props: Props) {
+  const actions = Store.useActions();
+
+  React.useEffect(() => {
+    if (props.clear) {
+      actions.clear();
+    }
+
+    actions.unmount();
+
+    process.exitCode = props.code;
+    process.exit();
+  }, [props.clear, props.code]);
+
+  return null;
+}

package/src/app/FormatText.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import * as Ink from "ink-cjs";
+import { FormattedMessage } from "react-intl";
+
+type Props = {
+  message: string;
+  values: React.ComponentProps<typeof FormattedMessage>["values"];
+  wrapper?: React.ReactNode;
+};
+
+export function FormatText(props: Props) {
+  const wrapper = (props.wrapper as React.ReactElement) || <Ink.Text />;
+
+  return (
+    <FormattedMessage
+      id="FormatText"
+      defaultMessage={props.message}
+      values={props.values}
+    >
+      {(chunks) => {
+        return React.cloneElement(wrapper, {}, chunks);
+      }}
+    </FormattedMessage>
+  );
+}