🪚 OmniGraph™ Better output in CLI (#133)

.changeset/brown-toys-arrive.md

@@ -0,0 +1,5 @@
+---
+"create-lz-oapp": patch
+---
+
+Downgrade ink to version 3 for better interoperability

packages/create-lz-oapp/cli.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+import('./dist/index.js');

packages/create-lz-oapp/jest.config.js

@@ -0,0 +1,9 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'node',
+    testTimeout: 15000,
+    moduleNameMapper: {
+        '^@/(.*)$': '<rootDir>/src/$1',
+    },
+};

packages/create-lz-oapp/package.json

@@ -12,9 +12,8 @@
     "directory": "packages/create-lz-oapp"
   },
   "license": "MIT",
-  "type": "module",
   "bin": {
-    "create-lz-oapp": "./cli.cjs"
+    "create-lz-oapp": "./cli.js"
   },
   "files": [
     "cli.js",
@@ -26,31 +25,29 @@
     "clean": "rm -rf dist",
     "dev": "npx tsup --watch",
     "lint": "npx eslint '**/*.{js,ts,json}'",
-    "start": "./cli.cjs",
-    "test": "jest --config jest.config.cjs"
+    "start": "./cli.js",
+    "test": "jest"
   },
   "dependencies": {
-    "yoga-wasm-web": "~0.3.3"
+    "yoga-layout-prebuilt": "^1.9.6"
   },
   "devDependencies": {
     "@layerzerolabs/io-utils": "~0.0.1",
-    "@tanstack/react-query": "^5.8.4",
     "@types/jest": "^29.5.10",
     "@types/prompts": "^2.4.9",
-    "@types/react": "^18.2.38",
+    "@types/react": "^17.0.73",
     "@types/which": "~3.0.3",
     "commander": "^11.1.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "ink": "^4.1.0",
-    "ink-gradient": "^3.0.0",
-    "ink-select-input": "^5.0.0",
-    "ink-spinner": "^5.0.0",
-    "ink-text-input": "^5.0.1",
+    "ink": "^3.2.0",
+    "ink-gradient": "^2.0.0",
+    "ink-select-input": "^4.2.1",
+    "ink-spinner": "^4.0.3",
+    "ink-text-input": "^4.0.3",
     "jest": "^29.7.0",
     "prompts": "^2.4.2",
-    "react": "^18.2.0",
-    "react-devtools-core": "^4.28.5",
+    "react": "^17.0.2",
     "tiged": "^2.12.5",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",

packages/create-lz-oapp/src/components/config.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Text } from "ink";
-import { Config } from "@/types.js";
+import { Config } from "@/types";
 import { resolve } from "path";
 
 interface Props {

packages/create-lz-oapp/src/components/progress.tsx

@@ -1,43 +1,37 @@
 import React from "react";
 import { Box, Text } from "ink";
 import Spinner from "ink-spinner";
-import { UseMutationResult } from "@tanstack/react-query";
+import { TaskState } from "@/utilities/tasks";
 
 type ErrorComponent = React.ComponentType<{ error: unknown }>;
 
 interface Props {
   error: ErrorComponent;
   message: string;
-  mutation: Pick<UseMutationResult, "isPending" | "isSuccess" | "error">;
+  state: TaskState<unknown> | undefined;
 }
 
-export const Progress: React.FC<Props> = ({
-  mutation,
-  message,
-  error: Error,
-}) => {
-  const { isPending, isSuccess, error } = mutation;
-
+export const Progress: React.FC<Props> = ({ state, message, error: Error }) => {
   return (
     <Box flexDirection="column">
       <Box>
-        {isPending ? (
+        {state?.loading ? (
           <Spinner />
-        ) : isSuccess ? (
+        ) : state?.success ? (
           <Text color="green">✔</Text>
-        ) : error ? (
+        ) : state?.failure ? (
           <Text color="red">𐄂</Text>
         ) : (
           <Text color="yellow">○</Text>
         )}
         <Text> {message}</Text>
       </Box>
 
-      {error == null ? null : (
+      {state?.failure ? (
         <Box marginLeft={2}>
-          <Error error={error} />
+          <Error error={state.error} />
         </Box>
-      )}
+      ) : null}
     </Box>
   );
 };

packages/create-lz-oapp/src/components/setup.tsx

@@ -1,52 +1,46 @@
 import React, { useEffect } from "react";
-import type { Config } from "@/types.js";
+import type { Config } from "@/types";
 import { Box, Text } from "ink";
-import { useMutation } from "@tanstack/react-query";
 import {
   BadGitRefError,
   DestinationNotEmptyError,
   DownloadError,
   MissingGitRefError,
   cloneExample,
-} from "@/utilities/cloning.js";
-import { Progress } from "./progress.js";
-import { installDependencies } from "@/utilities/installation.js";
+} from "@/utilities/cloning";
+import { Progress } from "./progress";
+import { installDependencies } from "@/utilities/installation";
+import { useTask } from "@/utilities/tasks";
 
 interface Props {
   config: Config;
 }
 
 export const Setup: React.FC<Props> = ({ config }) => {
-  const clone = useMutation({
-    mutationKey: ["setup", "clone"],
-    mutationFn: () => cloneExample(config),
+  const clone = useTask(() => cloneExample(config));
+  const install = useTask(() => installDependencies(config));
+  const setup = useTask(async () => {
+    await clone.run();
+    await install.run();
   });
 
-  const install = useMutation({
-    mutationKey: ["setup", "install"],
-    mutationFn: () => installDependencies(config),
-  });
-
-  const { mutate: setup } = useMutation({
-    mutationKey: ["setup", "flow"],
-    mutationFn: async () => {
-      await clone.mutateAsync();
-      await install.mutateAsync();
-    },
-  });
-
-  useEffect(() => setup(), [setup]);
+  useEffect(() => {
+    setup.run().catch(() => {});
+    // It's important to remember that setup as an object changes references, it's only the run method that's referentially stable
+    //
+    // Adding setup as dependency of this hook will result in an infinite loop
+  }, [setup.run]);
 
   return (
     <Box flexDirection="column">
       <Progress
         message="Getting example source code"
-        mutation={clone}
+        state={clone.state}
         error={({ error }) => <ErrorMessage config={config} error={error} />}
       />
       <Progress
         message="Installing dependencies"
-        mutation={install}
+        state={install.state}
         error={({ error }) => <ErrorMessage config={config} error={error} />}
       />
     </Box>

packages/create-lz-oapp/src/config.ts

@@ -1,4 +1,4 @@
-import type { Example, PackageManager } from '@/types.js'
+import type { Example, PackageManager } from '@/types'
 
 /**
  * To enable example development in a custom repository

packages/create-lz-oapp/src/index.tsx

@@ -1,20 +1,19 @@
 import React from "react";
 import { render } from "ink";
 import { Command } from "commander";
-import { promptForConfig } from "@/utilities/prompts.js";
-import { Header } from "@/components/branding.js";
-import { ConfigSummary } from "@/components/config.js";
-import { Setup } from "@/components/setup.js";
-import { Providers } from "@/components/providers.js";
+import { promptForConfig } from "@/utilities/prompts";
+import { ConfigSummary } from "@/components/config";
+import { Setup } from "@/components/setup";
 import { promptToContinue } from "@layerzerolabs/io-utils";
+import { printLogo } from "@layerzerolabs/io-utils/swag";
 
 new Command("create-lz-oapp")
   .description("Create LayerZero OApp with one command")
   .action(async () => {
     // const exitAltScreen = await altScreen()
 
     try {
-      render(<Header />).unmount();
+      printLogo();
 
       // First we get the config from the user
       const config = await promptForConfig();
@@ -27,11 +26,7 @@ new Command("create-lz-oapp")
       }
 
       // Then the last step is to show the setup flow
-      const setup = render(
-        <Providers>
-          <Setup config={config} />
-        </Providers>,
-      );
+      const setup = render(<Setup config={config} />);
 
       // And wait for it to exit
       await setup.waitUntilExit();

packages/create-lz-oapp/src/utilities/cloning.ts

@@ -1,4 +1,4 @@
-import { Config, Example } from '@/types.js'
+import { Config, Example } from '@/types'
 import { rm } from 'fs/promises'
 import tiged from 'tiged'
 

packages/create-lz-oapp/src/utilities/installation.ts

@@ -1,4 +1,4 @@
-import type { Config, PackageManager } from '@/types.js'
+import type { Config, PackageManager } from '@/types'
 import { spawn } from 'child_process'
 import which from 'which'
 

packages/create-lz-oapp/src/utilities/prompts.ts

@@ -1,6 +1,6 @@
-import { EXAMPLES, PACKAGE_MANAGERS } from '@/config.js'
+import { EXAMPLES, PACKAGE_MANAGERS } from '@/config'
 import prompts from 'prompts'
-import { isPackageManagerAvailable } from './installation.js'
+import { isPackageManagerAvailable } from './installation'
 import { handlePromptState, isDirectory } from '@layerzerolabs/io-utils'
 import { resolve } from 'path'
 

packages/create-lz-oapp/src/utilities/tasks.ts

@@ -0,0 +1,68 @@
+import { useCallback, useRef, useState } from 'react'
+
+/**
+ * TaskState holds three different states of a task:
+ *
+ * - Pending state
+ * - Success state
+ * - Failure state
+ */
+export type TaskState<T> =
+    | {
+          loading: true
+          success?: never
+          failure?: never
+          data?: never
+          error?: never
+      }
+    | {
+          loading?: false
+          success: true
+          failure?: false
+          data: T
+          error?: never
+      }
+    | {
+          loading?: false
+          success?: false
+          failure: true
+          data?: never
+          error: unknown
+      }
+
+/**
+ * Poor person's version of react-query
+ *
+ * Handles state management of a promise run just like useMutation() from react-query,
+ * just with one less package and a bit less sophisticated reference checking mechanism
+ * (especially the part where it expect the component that uses this not to unmount or change the task
+ * at runtime)
+ *
+ * @param {() => Promise<T>} task
+ * @returns
+ */
+export const useTask = <T>(task: () => Promise<T>) => {
+    const [state, setState] = useState<TaskState<T>>()
+
+    // We'll keep the task in a reference so that we don't force the users to pass in memoized objects
+    const taskRef = useRef(task)
+    taskRef.current = task
+
+    const run = useCallback(() => {
+        // Set state to loading
+        setState({ loading: true })
+
+        return taskRef.current().then(
+            // Set state to success
+            (data) => {
+                return setState({ success: true, data }), Promise.resolve(data)
+            },
+            // Set state to failure
+            (error) => {
+                return setState({ failure: true, error }), Promise.reject(error)
+            }
+        )
+    }, [taskRef])
+
+    return { run, state }
+}

packages/create-lz-oapp/test/utilities/cloning.test.ts

@@ -1,4 +1,4 @@
-import { createExampleGitURL } from '@/utilities/cloning.js'
+import { createExampleGitURL } from '@/utilities/cloning'
 
 describe('utilities/cloning', () => {
     describe('createExampleGitURL', () => {

packages/create-lz-oapp/tsconfig.json

@@ -1,15 +1,11 @@
 {
   "extends": "../../tsconfig",
   "compilerOptions": {
-    "module": "node16",
-    "moduleResolution": "node16",
-    "moduleDetection": "force",
     "outDir": "dist",
     "declaration": false,
     "jsx": "react",
     "lib": ["dom", "dom.Iterable", "es2022"],
     "resolveJsonModule": false,
-    "target": "esnext",
     "types": ["jest", "node"],
     "paths": {
       "@/*": ["./src/*"]