@shopify/cli-kit 3.45.0-pre.2 → 3.45.0-pre.4

package/README.md

@@ -36,7 +36,7 @@ To work with themes, the CLI needs to be installed globally with:
 
 - `npm install -g @shopify/cli @shopify/theme`
 
-You can also use do it through Homebrew on macOS: `brew install shopify-cli`
+You can also use do it through Homebrew on macOS: `brew tap shopify/shopify && brew install shopify-cli`
 
 Learn more in the docs: [Shopify CLI for themes](https://shopify.dev/docs/themes/tools/cli)
 

package/assets/cli-ruby/lib/shopify_cli/constants.rb

@@ -32,6 +32,7 @@ module ShopifyCLI
       STACKTRACE = "SHOPIFY_CLI_STACKTRACE"
       TTY = "SHOPIFY_CLI_TTY"
       RUN_AS_SUBPROCESS = "SHOPIFY_CLI_RUN_AS_SUBPROCESS"
+      RUBY_BIN = "SHOPIFY_CLI_RUBY_BIN"
 
       # When true the CLI points to a local instance of
       # the partners dashboard and identity.
@@ -67,7 +68,7 @@ module ShopifyCLI
     module SupportedVersions
       module Ruby
         FROM = "2.7.5"
-        TO = "3.2.0"
+        TO = "3.2.10"
       end
 
       module Node

package/assets/cli-ruby/lib/shopify_cli/environment.rb

@@ -13,8 +13,9 @@ module ShopifyCLI
     # https://github.com/Shopify/themekit-access/blob/4c3c917d78443160dcf24376a8b5ac6b9bef0bcd/app/models/password_token.rb#L8
     THEME_ACCESS_PASSWORD_PREFIX = "shptka_"
 
-    def self.ruby_version(context: Context.new)
-      output, status = context.capture2e("ruby", "--version")
+    def self.ruby_version(context: Context.new, env_variables: ENV)
+      ruby_bin = env_variables[Constants::EnvironmentVariables::RUBY_BIN] || "ruby"
+      output, status = context.capture2e(ruby_bin, "--version")
       raise ShopifyCLI::Abort, context.message("core.errors.missing_ruby") unless status.success?
       version = output.match(/ruby (\d+\.\d+\.\d+)/)[1]
       ::Semantic::Version.new(version)

package/dist/private/node/api.js

@@ -6,15 +6,23 @@ export const allAPIs = ['admin', 'storefront-renderer', 'partners'];
 const interestingResponseHeaders = new Set(['cache-control', 'content-type', 'etag', 'x-request-id']);
 export async function debugLogResponseInfo({ request, url }, errorHandler) {
     const t0 = performance.now();
-    let headers = new Headers();
+    const responseHeaders = {};
     let response = {};
     try {
         response = await request;
-        headers = response.headers;
+        response.headers.forEach((value, key) => {
+            if (interestingResponseHeaders.has(key))
+                responseHeaders[key] = value;
+        });
     }
     catch (err) {
         if (err instanceof ClientError) {
-            headers = err.response?.headers;
+            if (err.response?.headers) {
+                for (const [key, value] of err.response?.headers) {
+                    if (interestingResponseHeaders.has(key))
+                        responseHeaders[key] = value;
+                }
+            }
         }
         if (errorHandler) {
             throw errorHandler(err);
@@ -25,11 +33,6 @@ export async function debugLogResponseInfo({ request, url }, errorHandler) {
     }
     finally {
         const t1 = performance.now();
-        const responseHeaders = {};
-        headers.forEach((value, key) => {
-            if (interestingResponseHeaders.has(key))
-                responseHeaders[key] = value;
-        });
         outputDebug(`Request to ${url} completed in ${Math.round(t1 - t0)} ms
 With response headers:
 ${sanitizedHeadersOutput(responseHeaders)}

package/dist/private/node/api.js.map

@@ -1 +1 @@
-{"version":3,"file":"api.js","sourceRoot":"","sources":["../../../src/private/node/api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,sBAAsB,EAAC,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAAC,WAAW,EAAC,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAC,WAAW,EAAC,MAAM,YAAY,CAAA;AAItC,MAAM,CAAC,MAAM,OAAO,GAAU,CAAC,OAAO,EAAE,qBAAqB,EAAE,UAAU,CAAC,CAAA;AAO1E,MAAM,0BAA0B,GAAG,IAAI,GAAG,CAAC,CAAC,eAAe,EAAE,cAAc,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC,CAAA;AAErG,MAAM,CAAC,KAAK,UAAU,oBAAoB,CACxC,EAAC,OAAO,EAAE,GAAG,EAAoB,EACjC,YAAkD;IAElD,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;IAC5B,IAAI,OAAO,GAAY,IAAI,OAAO,EAAE,CAAA;IACpC,IAAI,QAAQ,GAAM,EAAO,CAAA;IACzB,IAAI;QACF,QAAQ,GAAG,MAAM,OAAO,CAAA;QACxB,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAA;KAC3B;IAAC,OAAO,GAAG,EAAE;QACZ,IAAI,GAAG,YAAY,WAAW,EAAE;YAC9B,OAAO,GAAG,GAAG,CAAC,QAAQ,EAAE,OAAkB,CAAA;SAC3C;QACD,IAAI,YAAY,EAAE;YAChB,MAAM,YAAY,CAAC,GAAG,CAAC,CAAA;SACxB;aAAM;YACL,MAAM,GAAG,CAAA;SACV;KACF;YAAS;QACR,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;QAC5B,MAAM,eAAe,GAA4B,EAAE,CAAA;QACnD,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;YAC7B,IAAI,0BAA0B,CAAC,GAAG,CAAC,GAAG,CAAC;gBAAE,eAAe,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACvE,CAAC,CAAC,CAAA;QACF,WAAW,CAAC,cAAc,GAAG,iBAAiB,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;;EAEnE,sBAAsB,CAAC,eAAe,CAAC;KACpC,CAAC,CAAA;KACH;IACD,OAAO,QAAQ,CAAA;AACjB,CAAC","sourcesContent":["import {sanitizedHeadersOutput} from './api/headers.js'\nimport {outputDebug} from '@shopify/cli-kit/node/output'\nimport {ClientError} from 'graphql-request'\nimport {performance} from 'perf_hooks'\n\nexport type API = 'admin' | 'storefront-renderer' | 'partners'\n\nexport const allAPIs: API[] = ['admin', 'storefront-renderer', 'partners']\n\ninterface RequestOptions<T> {\n  request: Promise<T>\n  url: string\n}\n\nconst interestingResponseHeaders = new Set(['cache-control', 'content-type', 'etag', 'x-request-id'])\n\nexport async function debugLogResponseInfo<T extends {headers: Headers; status: number}>(\n  {request, url}: RequestOptions<T>,\n  errorHandler?: (error: unknown) => Error | unknown,\n): Promise<T> {\n  const t0 = performance.now()\n  let headers: Headers = new Headers()\n  let response: T = {} as T\n  try {\n    response = await request\n    headers = response.headers\n  } catch (err) {\n    if (err instanceof ClientError) {\n      headers = err.response?.headers as Headers\n    }\n    if (errorHandler) {\n      throw errorHandler(err)\n    } else {\n      throw err\n    }\n  } finally {\n    const t1 = performance.now()\n    const responseHeaders: {[key: string]: string} = {}\n    headers.forEach((value, key) => {\n      if (interestingResponseHeaders.has(key)) responseHeaders[key] = value\n    })\n    outputDebug(`Request to ${url} completed in ${Math.round(t1 - t0)} ms\nWith response headers:\n${sanitizedHeadersOutput(responseHeaders)}\n    `)\n  }\n  return response\n}\n"]}
+{"version":3,"file":"api.js","sourceRoot":"","sources":["../../../src/private/node/api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,sBAAsB,EAAC,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAAC,WAAW,EAAC,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAC,WAAW,EAAC,MAAM,YAAY,CAAA;AAItC,MAAM,CAAC,MAAM,OAAO,GAAU,CAAC,OAAO,EAAE,qBAAqB,EAAE,UAAU,CAAC,CAAA;AAO1E,MAAM,0BAA0B,GAAG,IAAI,GAAG,CAAC,CAAC,eAAe,EAAE,cAAc,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC,CAAA;AAErG,MAAM,CAAC,KAAK,UAAU,oBAAoB,CACxC,EAAC,OAAO,EAAE,GAAG,EAAoB,EACjC,YAAkD;IAElD,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;IAC5B,MAAM,eAAe,GAA4B,EAAE,CAAA;IACnD,IAAI,QAAQ,GAAM,EAAO,CAAA;IACzB,IAAI;QACF,QAAQ,GAAG,MAAM,OAAO,CAAA;QACxB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;YACtC,IAAI,0BAA0B,CAAC,GAAG,CAAC,GAAG,CAAC;gBAAE,eAAe,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACvE,CAAC,CAAC,CAAA;KACH;IAAC,OAAO,GAAG,EAAE;QACZ,IAAI,GAAG,YAAY,WAAW,EAAE;YAC9B,IAAI,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE;gBACzB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,GAAG,CAAC,QAAQ,EAAE,OAAqC,EAAE;oBAC9E,IAAI,0BAA0B,CAAC,GAAG,CAAC,GAAG,CAAC;wBAAE,eAAe,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;iBACtE;aACF;SACF;QACD,IAAI,YAAY,EAAE;YAChB,MAAM,YAAY,CAAC,GAAG,CAAC,CAAA;SACxB;aAAM;YACL,MAAM,GAAG,CAAA;SACV;KACF;YAAS;QACR,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;QAC5B,WAAW,CAAC,cAAc,GAAG,iBAAiB,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;;EAEnE,sBAAsB,CAAC,eAAe,CAAC;KACpC,CAAC,CAAA;KACH;IACD,OAAO,QAAQ,CAAA;AACjB,CAAC","sourcesContent":["import {sanitizedHeadersOutput} from './api/headers.js'\nimport {outputDebug} from '@shopify/cli-kit/node/output'\nimport {ClientError} from 'graphql-request'\nimport {performance} from 'perf_hooks'\n\nexport type API = 'admin' | 'storefront-renderer' | 'partners'\n\nexport const allAPIs: API[] = ['admin', 'storefront-renderer', 'partners']\n\ninterface RequestOptions<T> {\n  request: Promise<T>\n  url: string\n}\n\nconst interestingResponseHeaders = new Set(['cache-control', 'content-type', 'etag', 'x-request-id'])\n\nexport async function debugLogResponseInfo<T extends {headers: Headers; status: number}>(\n  {request, url}: RequestOptions<T>,\n  errorHandler?: (error: unknown) => Error | unknown,\n): Promise<T> {\n  const t0 = performance.now()\n  const responseHeaders: {[key: string]: string} = {}\n  let response: T = {} as T\n  try {\n    response = await request\n    response.headers.forEach((value, key) => {\n      if (interestingResponseHeaders.has(key)) responseHeaders[key] = value\n    })\n  } catch (err) {\n    if (err instanceof ClientError) {\n      if (err.response?.headers) {\n        for (const [key, value] of err.response?.headers as Iterable<[string, string]>) {\n          if (interestingResponseHeaders.has(key)) responseHeaders[key] = value\n        }\n      }\n    }\n    if (errorHandler) {\n      throw errorHandler(err)\n    } else {\n      throw err\n    }\n  } finally {\n    const t1 = performance.now()\n    outputDebug(`Request to ${url} completed in ${Math.round(t1 - t0)} ms\nWith response headers:\n${sanitizedHeadersOutput(responseHeaders)}\n    `)\n  }\n  return response\n}\n"]}

package/dist/private/node/themes/generate-theme-name.d.ts

@@ -1 +1,2 @@
+export declare const API_NAME_LIMIT = 50;
 export declare function generateThemeName(context: string): string;

package/dist/private/node/themes/generate-theme-name.js

@@ -1,12 +1,12 @@
 import { replaceInvalidCharacters } from './replace-invalid-characters.js';
 import { randomBytes } from 'crypto';
 import { hostname } from 'os';
-const API_NAME_LIMIT = 50;
+export const API_NAME_LIMIT = 50;
 export function generateThemeName(context) {
     const hostNameWithoutDomain = hostname().split('.')[0];
     const hash = randomBytes(3).toString('hex');
     const name = `${context} ()`;
-    const hostNameCharacterLimit = API_NAME_LIMIT - name.length - hash.length;
+    const hostNameCharacterLimit = API_NAME_LIMIT - name.length - hash.length - 1;
     const identifier = replaceInvalidCharacters(`${hash}-${hostNameWithoutDomain.substring(0, hostNameCharacterLimit)}`);
     return `${context} (${identifier})`;
 }

package/dist/private/node/themes/generate-theme-name.js.map

@@ -1 +1 @@
-{"version":3,"file":"generate-theme-name.js","sourceRoot":"","sources":["../../../../src/private/node/themes/generate-theme-name.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,wBAAwB,EAAC,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAAC,WAAW,EAAC,MAAM,QAAQ,CAAA;AAClC,OAAO,EAAC,QAAQ,EAAC,MAAM,IAAI,CAAA;AAE3B,MAAM,cAAc,GAAG,EAAE,CAAA;AAEzB,MAAM,UAAU,iBAAiB,CAAC,OAAe;IAC/C,MAAM,qBAAqB,GAAG,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAE,CAAA;IACvD,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE3C,MAAM,IAAI,GAAG,GAAG,OAAO,KAAK,CAAA;IAC5B,MAAM,sBAAsB,GAAG,cAAc,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;IACzE,MAAM,UAAU,GAAG,wBAAwB,CAAC,GAAG,IAAI,IAAI,qBAAqB,CAAC,SAAS,CAAC,CAAC,EAAE,sBAAsB,CAAC,EAAE,CAAC,CAAA;IACpH,OAAO,GAAG,OAAO,KAAK,UAAU,GAAG,CAAA;AACrC,CAAC","sourcesContent":["import {replaceInvalidCharacters} from './replace-invalid-characters.js'\nimport {randomBytes} from 'crypto'\nimport {hostname} from 'os'\n\nconst API_NAME_LIMIT = 50\n\nexport function generateThemeName(context: string): string {\n  const hostNameWithoutDomain = hostname().split('.')[0]!\n  const hash = randomBytes(3).toString('hex')\n\n  const name = `${context} ()`\n  const hostNameCharacterLimit = API_NAME_LIMIT - name.length - hash.length\n  const identifier = replaceInvalidCharacters(`${hash}-${hostNameWithoutDomain.substring(0, hostNameCharacterLimit)}`)\n  return `${context} (${identifier})`\n}\n"]}
+{"version":3,"file":"generate-theme-name.js","sourceRoot":"","sources":["../../../../src/private/node/themes/generate-theme-name.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,wBAAwB,EAAC,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAAC,WAAW,EAAC,MAAM,QAAQ,CAAA;AAClC,OAAO,EAAC,QAAQ,EAAC,MAAM,IAAI,CAAA;AAE3B,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAA;AAEhC,MAAM,UAAU,iBAAiB,CAAC,OAAe;IAC/C,MAAM,qBAAqB,GAAG,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAE,CAAA;IACvD,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE3C,MAAM,IAAI,GAAG,GAAG,OAAO,KAAK,CAAA;IAC5B,MAAM,sBAAsB,GAAG,cAAc,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA;IAC7E,MAAM,UAAU,GAAG,wBAAwB,CAAC,GAAG,IAAI,IAAI,qBAAqB,CAAC,SAAS,CAAC,CAAC,EAAE,sBAAsB,CAAC,EAAE,CAAC,CAAA;IACpH,OAAO,GAAG,OAAO,KAAK,UAAU,GAAG,CAAA;AACrC,CAAC","sourcesContent":["import {replaceInvalidCharacters} from './replace-invalid-characters.js'\nimport {randomBytes} from 'crypto'\nimport {hostname} from 'os'\n\nexport const API_NAME_LIMIT = 50\n\nexport function generateThemeName(context: string): string {\n  const hostNameWithoutDomain = hostname().split('.')[0]!\n  const hash = randomBytes(3).toString('hex')\n\n  const name = `${context} ()`\n  const hostNameCharacterLimit = API_NAME_LIMIT - name.length - hash.length - 1\n  const identifier = replaceInvalidCharacters(`${hash}-${hostNameWithoutDomain.substring(0, hostNameCharacterLimit)}`)\n  return `${context} (${identifier})`\n}\n"]}

package/dist/private/node/ui/components/Alert.test.js

@@ -48,7 +48,7 @@ describe('Alert', async () => {
             ],
             link: {
                 label: 'Link',
-                url: 'https://shopify.com',
+                url: 'https://www.google.com/search?q=jh56t9l34kpo35tw8s28hn7s9s2xvzla01d8cn6j7yq&rlz=1C1GCEU_enUS832US832&oq=jh56t9l34kpo35tw8s28hn7s9s2xvzla01d8cn6j7yq&aqs=chrome.0.35i39l2j0l4j46j69i60.2711j0j7&sourceid=chrome&ie=UTF-8',
             },
             customSections: [
                 {
@@ -84,10 +84,9 @@ describe('Alert', async () => {
       │                                                                              │
       │  Reference                                                                   │
       │    • Run \`npm shopify help\`                                                  │
-      │    • Press 'return' to open the really amazing and clean dev docs (          │
-      │      https://shopify.dev )                                                   │
+      │    • Press 'return' to open the really amazing and clean dev docs [1]        │
       │                                                                              │
-      │  Link ( https://shopify.com )                                                │
+      │  Link [2]                                                                    │
       │                                                                              │
       │  Custom section                                                              │
       │    • Item 1                                                                  │
@@ -100,6 +99,10 @@ describe('Alert', async () => {
       │    • Item 3                                                                  │
       │                                                                              │
       ╰──────────────────────────────────────────────────────────────────────────────╯
+      [1] https://shopify.dev
+      [2] https://www.google.com/search?q=jh56t9l34kpo35tw8s28hn7s9s2xvzla01d8cn6j7yq&rlz=1C1GCEU_enUS832U
+      S832&oq=jh56t9l34kpo35tw8s28hn7s9s2xvzla01d8cn6j7yq&aqs=chrome.0.35i39l2j0l4j46j69i60.2711j0j7&sourc
+      eid=chrome&ie=UTF-8
       "
     `);
     });

package/dist/private/node/ui/components/Alert.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Alert.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAA;AAChC,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAC1D,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAE1C,QAAQ,CAAC,OAAO,EAAE,KAAK,IAAI,EAAE;IAC3B,IAAI,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACxD,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAC,EAAE,iCAAiC,CAAC;YACpE,IAAI,EAAE,CAAC,qCAAqC,EAAE,EAAC,QAAQ,EAAE,MAAM,EAAC,EAAE,SAAS,CAAC;YAC5E,SAAS,EAAE;gBACT;oBACE,KAAK;oBACL;wBACE,OAAO,EAAE,oBAAoB;qBAC9B;iBACF;gBACD;oBACE,8BAA8B;oBAC9B;wBACE,OAAO,EAAE,aAAa;qBACvB;iBACF;gBACD;oBACE,wBAAwB;oBACxB;wBACE,OAAO,EAAE,wBAAwB;qBAClC;iBACF;aACF;YACD,SAAS,EAAE;gBACT;oBACE,KAAK;oBACL;wBACE,OAAO,EAAE,kBAAkB;qBAC5B;iBACF;gBACD;oBACE,iCAAiC;oBACjC,qDAAqD;oBACrD;wBACE,IAAI,EAAE;4BACJ,KAAK,EAAE,UAAU;4BACjB,GAAG,EAAE,qBAAqB;yBAC3B;qBACF;iBACF;aACF;YACD,IAAI,EAAE;gBACJ,KAAK,EAAE,MAAM;gBACb,GAAG,EAAE,qBAAqB;aAC3B;YACD,cAAc,EAAE;gBACd;oBACE,KAAK,EAAE,gBAAgB;oBACvB,IAAI,EAAE;wBACJ,IAAI,EAAE;4BACJ,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;yBACtC;qBACF;iBACF;gBACD;oBACE,KAAK,EAAE,kBAAkB;oBACzB,IAAI,EAAE;wBACJ,IAAI,EAAE;4BACJ,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;yBACtC;qBACF;iBACF;aACF;SACF,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,KAAK,IAAC,IAAI,EAAC,MAAM,KAAK,OAAO,GAAI,CAAC,CAAA;QAE9D,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,OAAO,GAAG;YACd,IAAI,EAAE,OAAO;SACd,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,KAAK,IAAC,IAAI,EAAC,MAAM,KAAK,OAAO,GAAI,CAAC,CAAA;QAE9D,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;KAOpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,OAAO;SAClB,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,KAAK,IAAC,IAAI,EAAC,MAAM,KAAK,OAAO,GAAI,CAAC,CAAA;QAE9D,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC;;;;;;;KAOzC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {Alert} from './Alert.js'\nimport {unstyled} from '../../../../public/node/output.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\nimport {render} from 'ink-testing-library'\n\ndescribe('Alert', async () => {\n  test('renders correctly with all the options', async () => {\n    const options = {\n      headline: [{userInput: 'my-app'}, 'initialized and ready to build.'],\n      body: ['You can find the build files in the', {filePath: 'dist'}, 'folder.'],\n      nextSteps: [\n        [\n          'Run',\n          {\n            command: 'cd santorini-goods',\n          },\n        ],\n        [\n          'To preview your project, run',\n          {\n            command: 'npm app dev',\n          },\n        ],\n        [\n          'To add extensions, run',\n          {\n            command: 'npm generate extension',\n          },\n        ],\n      ],\n      reference: [\n        [\n          'Run',\n          {\n            command: 'npm shopify help',\n          },\n        ],\n        [\n          // testing link wrapping behavior\n          \"Press 'return' to open the really amazing and clean\",\n          {\n            link: {\n              label: 'dev docs',\n              url: 'https://shopify.dev',\n            },\n          },\n        ],\n      ],\n      link: {\n        label: 'Link',\n        url: 'https://shopify.com',\n      },\n      customSections: [\n        {\n          title: 'Custom section',\n          body: {\n            list: {\n              items: ['Item 1', 'Item 2', 'Item 3'],\n            },\n          },\n        },\n        {\n          title: 'Custom section 2',\n          body: {\n            list: {\n              items: ['Item 1', 'Item 2', 'Item 3'],\n            },\n          },\n        },\n      ],\n    }\n\n    const {lastFrame} = render(<Alert type=\"info\" {...options} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"╭─ info ───────────────────────────────────────────────────────────────────────╮\n      │                                                                              │\n      │  my-app initialized and ready to build.                                      │\n      │                                                                              │\n      │  You can find the build files in the dist folder.                            │\n      │                                                                              │\n      │  Next steps                                                                  │\n      │    • Run \\`cd santorini-goods\\`                                                │\n      │    • To preview your project, run \\`npm app dev\\`                              │\n      │    • To add extensions, run \\`npm generate extension\\`                         │\n      │                                                                              │\n      │  Reference                                                                   │\n      │    • Run \\`npm shopify help\\`                                                  │\n      │    • Press 'return' to open the really amazing and clean dev docs (          │\n      │      https://shopify.dev )                                                   │\n      │                                                                              │\n      │  Link ( https://shopify.com )                                                │\n      │                                                                              │\n      │  Custom section                                                              │\n      │    • Item 1                                                                  │\n      │    • Item 2                                                                  │\n      │    • Item 3                                                                  │\n      │                                                                              │\n      │  Custom section 2                                                            │\n      │    • Item 1                                                                  │\n      │    • Item 2                                                                  │\n      │    • Item 3                                                                  │\n      │                                                                              │\n      ╰──────────────────────────────────────────────────────────────────────────────╯\n      \"\n    `)\n  })\n\n  test('allows passing just a body', async () => {\n    const options = {\n      body: 'Title',\n    }\n\n    const {lastFrame} = render(<Alert type=\"info\" {...options} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"╭─ info ───────────────────────────────────────────────────────────────────────╮\n      │                                                                              │\n      │  Title                                                                       │\n      │                                                                              │\n      ╰──────────────────────────────────────────────────────────────────────────────╯\n      \"\n    `)\n  })\n\n  test('has the headline in bold', async () => {\n    const options = {\n      headline: 'Title',\n    }\n\n    const {lastFrame} = render(<Alert type=\"info\" {...options} />)\n\n    expect(lastFrame()).toMatchInlineSnapshot(`\n      \"\u001b[2m╭─\u001b[22m info \u001b[2m───────────────────────────────────────────────────────────────────────╮\u001b[22m\n      \u001b[2m│\u001b[22m                                                                              \u001b[2m│\u001b[22m\n      \u001b[2m│\u001b[22m  \u001b[1mTitle\u001b[22m                                                                       \u001b[2m│\u001b[22m\n      \u001b[2m│\u001b[22m                                                                              \u001b[2m│\u001b[22m\n      \u001b[2m╰──────────────────────────────────────────────────────────────────────────────╯\u001b[22m\n      \"\n    `)\n  })\n})\n"]}
+{"version":3,"file":"Alert.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Alert.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAA;AAChC,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAC1D,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAE1C,QAAQ,CAAC,OAAO,EAAE,KAAK,IAAI,EAAE;IAC3B,IAAI,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACxD,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAC,EAAE,iCAAiC,CAAC;YACpE,IAAI,EAAE,CAAC,qCAAqC,EAAE,EAAC,QAAQ,EAAE,MAAM,EAAC,EAAE,SAAS,CAAC;YAC5E,SAAS,EAAE;gBACT;oBACE,KAAK;oBACL;wBACE,OAAO,EAAE,oBAAoB;qBAC9B;iBACF;gBACD;oBACE,8BAA8B;oBAC9B;wBACE,OAAO,EAAE,aAAa;qBACvB;iBACF;gBACD;oBACE,wBAAwB;oBACxB;wBACE,OAAO,EAAE,wBAAwB;qBAClC;iBACF;aACF;YACD,SAAS,EAAE;gBACT;oBACE,KAAK;oBACL;wBACE,OAAO,EAAE,kBAAkB;qBAC5B;iBACF;gBACD;oBACE,iCAAiC;oBACjC,qDAAqD;oBACrD;wBACE,IAAI,EAAE;4BACJ,KAAK,EAAE,UAAU;4BACjB,GAAG,EAAE,qBAAqB;yBAC3B;qBACF;iBACF;aACF;YACD,IAAI,EAAE;gBACJ,KAAK,EAAE,MAAM;gBACb,GAAG,EAAE,yNAAyN;aAC/N;YACD,cAAc,EAAE;gBACd;oBACE,KAAK,EAAE,gBAAgB;oBACvB,IAAI,EAAE;wBACJ,IAAI,EAAE;4BACJ,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;yBACtC;qBACF;iBACF;gBACD;oBACE,KAAK,EAAE,kBAAkB;oBACzB,IAAI,EAAE;wBACJ,IAAI,EAAE;4BACJ,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;yBACtC;qBACF;iBACF;aACF;SACF,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,KAAK,IAAC,IAAI,EAAC,MAAM,KAAK,OAAO,GAAI,CAAC,CAAA;QAE9D,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,OAAO,GAAG;YACd,IAAI,EAAE,OAAO;SACd,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,KAAK,IAAC,IAAI,EAAC,MAAM,KAAK,OAAO,GAAI,CAAC,CAAA;QAE9D,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;KAOpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,OAAO;SAClB,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,KAAK,IAAC,IAAI,EAAC,MAAM,KAAK,OAAO,GAAI,CAAC,CAAA;QAE9D,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC;;;;;;;KAOzC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {Alert} from './Alert.js'\nimport {unstyled} from '../../../../public/node/output.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\nimport {render} from 'ink-testing-library'\n\ndescribe('Alert', async () => {\n  test('renders correctly with all the options', async () => {\n    const options = {\n      headline: [{userInput: 'my-app'}, 'initialized and ready to build.'],\n      body: ['You can find the build files in the', {filePath: 'dist'}, 'folder.'],\n      nextSteps: [\n        [\n          'Run',\n          {\n            command: 'cd santorini-goods',\n          },\n        ],\n        [\n          'To preview your project, run',\n          {\n            command: 'npm app dev',\n          },\n        ],\n        [\n          'To add extensions, run',\n          {\n            command: 'npm generate extension',\n          },\n        ],\n      ],\n      reference: [\n        [\n          'Run',\n          {\n            command: 'npm shopify help',\n          },\n        ],\n        [\n          // testing link wrapping behavior\n          \"Press 'return' to open the really amazing and clean\",\n          {\n            link: {\n              label: 'dev docs',\n              url: 'https://shopify.dev',\n            },\n          },\n        ],\n      ],\n      link: {\n        label: 'Link',\n        url: 'https://www.google.com/search?q=jh56t9l34kpo35tw8s28hn7s9s2xvzla01d8cn6j7yq&rlz=1C1GCEU_enUS832US832&oq=jh56t9l34kpo35tw8s28hn7s9s2xvzla01d8cn6j7yq&aqs=chrome.0.35i39l2j0l4j46j69i60.2711j0j7&sourceid=chrome&ie=UTF-8',\n      },\n      customSections: [\n        {\n          title: 'Custom section',\n          body: {\n            list: {\n              items: ['Item 1', 'Item 2', 'Item 3'],\n            },\n          },\n        },\n        {\n          title: 'Custom section 2',\n          body: {\n            list: {\n              items: ['Item 1', 'Item 2', 'Item 3'],\n            },\n          },\n        },\n      ],\n    }\n\n    const {lastFrame} = render(<Alert type=\"info\" {...options} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"╭─ info ───────────────────────────────────────────────────────────────────────╮\n      │                                                                              │\n      │  my-app initialized and ready to build.                                      │\n      │                                                                              │\n      │  You can find the build files in the dist folder.                            │\n      │                                                                              │\n      │  Next steps                                                                  │\n      │    • Run \\`cd santorini-goods\\`                                                │\n      │    • To preview your project, run \\`npm app dev\\`                              │\n      │    • To add extensions, run \\`npm generate extension\\`                         │\n      │                                                                              │\n      │  Reference                                                                   │\n      │    • Run \\`npm shopify help\\`                                                  │\n      │    • Press 'return' to open the really amazing and clean dev docs [1]        │\n      │                                                                              │\n      │  Link [2]                                                                    │\n      │                                                                              │\n      │  Custom section                                                              │\n      │    • Item 1                                                                  │\n      │    • Item 2                                                                  │\n      │    • Item 3                                                                  │\n      │                                                                              │\n      │  Custom section 2                                                            │\n      │    • Item 1                                                                  │\n      │    • Item 2                                                                  │\n      │    • Item 3                                                                  │\n      │                                                                              │\n      ╰──────────────────────────────────────────────────────────────────────────────╯\n      [1] https://shopify.dev\n      [2] https://www.google.com/search?q=jh56t9l34kpo35tw8s28hn7s9s2xvzla01d8cn6j7yq&rlz=1C1GCEU_enUS832U\n      S832&oq=jh56t9l34kpo35tw8s28hn7s9s2xvzla01d8cn6j7yq&aqs=chrome.0.35i39l2j0l4j46j69i60.2711j0j7&sourc\n      eid=chrome&ie=UTF-8\n      \"\n    `)\n  })\n\n  test('allows passing just a body', async () => {\n    const options = {\n      body: 'Title',\n    }\n\n    const {lastFrame} = render(<Alert type=\"info\" {...options} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"╭─ info ───────────────────────────────────────────────────────────────────────╮\n      │                                                                              │\n      │  Title                                                                       │\n      │                                                                              │\n      ╰──────────────────────────────────────────────────────────────────────────────╯\n      \"\n    `)\n  })\n\n  test('has the headline in bold', async () => {\n    const options = {\n      headline: 'Title',\n    }\n\n    const {lastFrame} = render(<Alert type=\"info\" {...options} />)\n\n    expect(lastFrame()).toMatchInlineSnapshot(`\n      \"\u001b[2m╭─\u001b[22m info \u001b[2m───────────────────────────────────────────────────────────────────────╮\u001b[22m\n      \u001b[2m│\u001b[22m                                                                              \u001b[2m│\u001b[22m\n      \u001b[2m│\u001b[22m  \u001b[1mTitle\u001b[22m                                                                       \u001b[2m│\u001b[22m\n      \u001b[2m│\u001b[22m                                                                              \u001b[2m│\u001b[22m\n      \u001b[2m╰──────────────────────────────────────────────────────────────────────────────╯\u001b[22m\n      \"\n    `)\n  })\n})\n"]}

package/dist/private/node/ui/components/Banner.js

@@ -1,6 +1,7 @@
 import useLayout from '../hooks/use-layout.js';
+import { LinksContext } from '../contexts/LinksContext.js';
 import { Box, Text } from 'ink';
-import React from 'react';
+import React, { useContext, useRef } from 'react';
 function typeToColor(type) {
     return {
         success: 'green',
@@ -10,12 +11,38 @@ function typeToColor(type) {
         external_error: 'red',
     }[type];
 }
+const Footnotes = () => {
+    const linksContext = useContext(LinksContext);
+    if (linksContext === null || linksContext.links.current === null) {
+        return null;
+    }
+    const links = linksContext.links.current;
+    const linkIds = Object.keys(links);
+    return linkIds.length > 0 ? (React.createElement(Box, { marginBottom: 1, marginTop: -1, flexDirection: "column" }, linkIds.map((id) => (React.createElement(Text, { key: id }, `[${id}] ${links[id]?.url}`))))) : null;
+};
 const BoxWithBorder = ({ type, children }) => {
     const { twoThirds } = useLayout();
-    return (React.createElement(Box, { width: twoThirds, paddingY: 1, paddingX: 2, marginBottom: 1, borderStyle: "round", flexDirection: "column", borderColor: typeToColor(type) },
-        React.createElement(Box, { marginTop: -2, marginBottom: 1, marginLeft: -1 },
-            React.createElement(Text, null, ` ${type.replace(/_/g, ' ')} `)),
-        children));
+    const links = useRef({});
+    return (React.createElement(LinksContext.Provider, { value: {
+            links,
+            addLink: (label, url) => {
+                const id = Object.keys(links.current).find((id) => links.current[id].url === url);
+                if (id) {
+                    return id;
+                }
+                const newId = (Object.keys(links.current).length + 1).toString();
+                links.current = {
+                    ...links.current,
+                    [newId]: { label, url },
+                };
+                return newId;
+            },
+        } },
+        React.createElement(Box, { width: twoThirds, paddingY: 1, paddingX: 2, marginBottom: 1, borderStyle: "round", flexDirection: "column", borderColor: typeToColor(type) },
+            React.createElement(Box, { marginTop: -2, marginBottom: 1, marginLeft: -1 },
+                React.createElement(Text, null, ` ${type.replace(/_/g, ' ')} `)),
+            children),
+        React.createElement(Footnotes, null)));
 };
 const BoxWithTopBottomLines = ({ type, children }) => {
     const { twoThirds } = useLayout();

package/dist/private/node/ui/components/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,wBAAwB,CAAA;AAC9C,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,KAA0B,MAAM,OAAO,CAAA;AAQ9C,SAAS,WAAW,CAAC,IAAyB;IAC5C,OAAO;QACL,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,QAAQ;QACjB,IAAI,EAAE,KAAK;QACX,cAAc,EAAE,KAAK;KACtB,CAAC,IAAI,CAAC,CAAA;AACT,CAAC;AAED,MAAM,aAAa,GAAmC,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAC,EAAE,EAAE;IACzE,MAAM,EAAC,SAAS,EAAC,GAAG,SAAS,EAAE,CAAA;IAE/B,OAAO,CACL,oBAAC,GAAG,IACF,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,CAAC,EACX,YAAY,EAAE,CAAC,EACf,WAAW,EAAC,OAAO,EACnB,aAAa,EAAC,QAAQ,EACtB,WAAW,EAAE,WAAW,CAAC,IAAI,CAAC;QAE9B,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;YACjD,oBAAC,IAAI,QAAE,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAQ,CACzC;QACL,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,qBAAqB,GAAmC,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAC,EAAE,EAAE;IACjF,MAAM,EAAC,SAAS,EAAC,GAAG,SAAS,EAAE,CAAA;IAC/B,mDAAmD;IACnD,IAAI,sBAAsB,GAAG,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA;IAC5D,IAAI,sBAAsB,GAAG,CAAC;QAAE,sBAAsB,GAAG,CAAC,CAAA;IAE1D,OAAO,CACL,oBAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,YAAY,EAAE,CAAC;QACzC,oBAAC,GAAG,IAAC,YAAY,EAAE,CAAC;YAClB,oBAAC,IAAI;gBACH,oBAAC,IAAI,IAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAQ;gBACtD,oBAAC,IAAI,QAAE,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAQ;gBAC7C,oBAAC,IAAI,IAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAG,GAAG,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAQ,CACtE,CACH;QAEL,QAAQ;QAET,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC;YACf,oBAAC,IAAI,IAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAG,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,CAAQ,CAC1D,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAmC,CAAC,EAAC,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,EAAE;IACtE,IAAI,KAAK,CAAC,IAAI,KAAK,gBAAgB,EAAE;QACnC,OAAO,KAAK,CAAC,aAAa,CAAC,qBAAqB,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAA;KACnE;SAAM;QACL,OAAO,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAA;KAC3D;AACH,CAAC,CAAA;AAED,OAAO,EAAC,MAAM,EAAC,CAAA","sourcesContent":["import useLayout from '../hooks/use-layout.js'\nimport {Box, Text} from 'ink'\nimport React, {FunctionComponent} from 'react'\n\nexport type BannerType = 'success' | 'error' | 'warning' | 'info' | 'external_error'\n\ninterface BannerProps {\n  type: BannerType\n}\n\nfunction typeToColor(type: BannerProps['type']) {\n  return {\n    success: 'green',\n    error: 'red',\n    warning: 'yellow',\n    info: 'dim',\n    external_error: 'red',\n  }[type]\n}\n\nconst BoxWithBorder: FunctionComponent<BannerProps> = ({type, children}) => {\n  const {twoThirds} = useLayout()\n\n  return (\n    <Box\n      width={twoThirds}\n      paddingY={1}\n      paddingX={2}\n      marginBottom={1}\n      borderStyle=\"round\"\n      flexDirection=\"column\"\n      borderColor={typeToColor(type)}\n    >\n      <Box marginTop={-2} marginBottom={1} marginLeft={-1}>\n        <Text>{` ${type.replace(/_/g, ' ')} `}</Text>\n      </Box>\n      {children}\n    </Box>\n  )\n}\n\nconst BoxWithTopBottomLines: FunctionComponent<BannerProps> = ({type, children}) => {\n  const {twoThirds} = useLayout()\n  // 2 initial dashes + 2 spaces surrounding the type\n  let topLineAfterTypeLength = twoThirds - 2 - type.length - 2\n  if (topLineAfterTypeLength < 0) topLineAfterTypeLength = 0\n\n  return (\n    <Box flexDirection=\"column\" marginBottom={1}>\n      <Box marginBottom={1}>\n        <Text>\n          <Text color={typeToColor(type)}>{'─'.repeat(2)}</Text>\n          <Text>{` ${type.replace(/_/g, ' ')} `}</Text>\n          <Text color={typeToColor(type)}>{'─'.repeat(topLineAfterTypeLength)}</Text>\n        </Text>\n      </Box>\n\n      {children}\n\n      <Box marginTop={1}>\n        <Text color={typeToColor(type)}>{'─'.repeat(twoThirds)}</Text>\n      </Box>\n    </Box>\n  )\n}\n\nconst Banner: FunctionComponent<BannerProps> = ({children, ...props}) => {\n  if (props.type === 'external_error') {\n    return React.createElement(BoxWithTopBottomLines, props, children)\n  } else {\n    return React.createElement(BoxWithBorder, props, children)\n  }\n}\n\nexport {Banner}\n"]}
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,wBAAwB,CAAA;AAC9C,OAAO,EAAO,YAAY,EAAC,MAAM,6BAA6B,CAAA;AAC9D,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,KAAK,EAAE,EAAoB,UAAU,EAAE,MAAM,EAAC,MAAM,OAAO,CAAA;AAQlE,SAAS,WAAW,CAAC,IAAyB;IAC5C,OAAO;QACL,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,QAAQ;QACjB,IAAI,EAAE,KAAK;QACX,cAAc,EAAE,KAAK;KACtB,CAAC,IAAI,CAAC,CAAA;AACT,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IAE7C,IAAI,YAAY,KAAK,IAAI,IAAI,YAAY,CAAC,KAAK,CAAC,OAAO,KAAK,IAAI,EAAE;QAChE,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAA;IACxC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAElC,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC1B,oBAAC,GAAG,IAAC,YAAY,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,EAAC,QAAQ,IACxD,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CACnB,oBAAC,IAAI,IAAC,GAAG,EAAE,EAAE,IAAG,IAAI,EAAE,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAQ,CACpD,CAAC,CACE,CACP,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAED,MAAM,aAAa,GAAmC,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAC,EAAE,EAAE;IACzE,MAAM,EAAC,SAAS,EAAC,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,KAAK,GAAG,MAAM,CAAwB,EAAE,CAAC,CAAA;IAE/C,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,EAAE;YACL,KAAK;YACL,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;gBACtB,MAAM,EAAE,GAAuB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAE,CAAC,GAAG,KAAK,GAAG,CAAC,CAAA;gBACtG,IAAI,EAAE,EAAE;oBACN,OAAO,EAAE,CAAA;iBACV;gBACD,MAAM,KAAK,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAA;gBAChE,KAAK,CAAC,OAAO,GAAG;oBACd,GAAG,KAAK,CAAC,OAAO;oBAChB,CAAC,KAAK,CAAC,EAAE,EAAC,KAAK,EAAE,GAAG,EAAC;iBACtB,CAAA;gBACD,OAAO,KAAK,CAAA;YACd,CAAC;SACF;QAED,oBAAC,GAAG,IACF,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,CAAC,EACX,YAAY,EAAE,CAAC,EACf,WAAW,EAAC,OAAO,EACnB,aAAa,EAAC,QAAQ,EACtB,WAAW,EAAE,WAAW,CAAC,IAAI,CAAC;YAE9B,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;gBACjD,oBAAC,IAAI,QAAE,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAQ,CACzC;YACL,QAAQ,CACL;QACN,oBAAC,SAAS,OAAG,CACS,CACzB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,qBAAqB,GAAmC,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAC,EAAE,EAAE;IACjF,MAAM,EAAC,SAAS,EAAC,GAAG,SAAS,EAAE,CAAA;IAC/B,mDAAmD;IACnD,IAAI,sBAAsB,GAAG,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA;IAC5D,IAAI,sBAAsB,GAAG,CAAC;QAAE,sBAAsB,GAAG,CAAC,CAAA;IAE1D,OAAO,CACL,oBAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,YAAY,EAAE,CAAC;QACzC,oBAAC,GAAG,IAAC,YAAY,EAAE,CAAC;YAClB,oBAAC,IAAI;gBACH,oBAAC,IAAI,IAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAQ;gBACtD,oBAAC,IAAI,QAAE,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAQ;gBAC7C,oBAAC,IAAI,IAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAG,GAAG,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAQ,CACtE,CACH;QAEL,QAAQ;QAET,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC;YACf,oBAAC,IAAI,IAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAG,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,CAAQ,CAC1D,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAmC,CAAC,EAAC,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,EAAE;IACtE,IAAI,KAAK,CAAC,IAAI,KAAK,gBAAgB,EAAE;QACnC,OAAO,KAAK,CAAC,aAAa,CAAC,qBAAqB,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAA;KACnE;SAAM;QACL,OAAO,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAA;KAC3D;AACH,CAAC,CAAA;AAED,OAAO,EAAC,MAAM,EAAC,CAAA","sourcesContent":["import useLayout from '../hooks/use-layout.js'\nimport {Link, LinksContext} from '../contexts/LinksContext.js'\nimport {Box, Text} from 'ink'\nimport React, {FunctionComponent, useContext, useRef} from 'react'\n\nexport type BannerType = 'success' | 'error' | 'warning' | 'info' | 'external_error'\n\ninterface BannerProps {\n  type: BannerType\n}\n\nfunction typeToColor(type: BannerProps['type']) {\n  return {\n    success: 'green',\n    error: 'red',\n    warning: 'yellow',\n    info: 'dim',\n    external_error: 'red',\n  }[type]\n}\n\nconst Footnotes = () => {\n  const linksContext = useContext(LinksContext)\n\n  if (linksContext === null || linksContext.links.current === null) {\n    return null\n  }\n\n  const links = linksContext.links.current\n  const linkIds = Object.keys(links)\n\n  return linkIds.length > 0 ? (\n    <Box marginBottom={1} marginTop={-1} flexDirection=\"column\">\n      {linkIds.map((id) => (\n        <Text key={id}>{`[${id}] ${links[id]?.url}`}</Text>\n      ))}\n    </Box>\n  ) : null\n}\n\nconst BoxWithBorder: FunctionComponent<BannerProps> = ({type, children}) => {\n  const {twoThirds} = useLayout()\n  const links = useRef<{[key: string]: Link}>({})\n\n  return (\n    <LinksContext.Provider\n      value={{\n        links,\n        addLink: (label, url) => {\n          const id: string | undefined = Object.keys(links.current).find((id) => links.current[id]!.url === url)\n          if (id) {\n            return id\n          }\n          const newId = (Object.keys(links.current).length + 1).toString()\n          links.current = {\n            ...links.current,\n            [newId]: {label, url},\n          }\n          return newId\n        },\n      }}\n    >\n      <Box\n        width={twoThirds}\n        paddingY={1}\n        paddingX={2}\n        marginBottom={1}\n        borderStyle=\"round\"\n        flexDirection=\"column\"\n        borderColor={typeToColor(type)}\n      >\n        <Box marginTop={-2} marginBottom={1} marginLeft={-1}>\n          <Text>{` ${type.replace(/_/g, ' ')} `}</Text>\n        </Box>\n        {children}\n      </Box>\n      <Footnotes />\n    </LinksContext.Provider>\n  )\n}\n\nconst BoxWithTopBottomLines: FunctionComponent<BannerProps> = ({type, children}) => {\n  const {twoThirds} = useLayout()\n  // 2 initial dashes + 2 spaces surrounding the type\n  let topLineAfterTypeLength = twoThirds - 2 - type.length - 2\n  if (topLineAfterTypeLength < 0) topLineAfterTypeLength = 0\n\n  return (\n    <Box flexDirection=\"column\" marginBottom={1}>\n      <Box marginBottom={1}>\n        <Text>\n          <Text color={typeToColor(type)}>{'─'.repeat(2)}</Text>\n          <Text>{` ${type.replace(/_/g, ' ')} `}</Text>\n          <Text color={typeToColor(type)}>{'─'.repeat(topLineAfterTypeLength)}</Text>\n        </Text>\n      </Box>\n\n      {children}\n\n      <Box marginTop={1}>\n        <Text color={typeToColor(type)}>{'─'.repeat(twoThirds)}</Text>\n      </Box>\n    </Box>\n  )\n}\n\nconst Banner: FunctionComponent<BannerProps> = ({children, ...props}) => {\n  if (props.type === 'external_error') {\n    return React.createElement(BoxWithTopBottomLines, props, children)\n  } else {\n    return React.createElement(BoxWithBorder, props, children)\n  }\n}\n\nexport {Banner}\n"]}

package/dist/private/node/ui/components/ConcurrentOutput.js

@@ -81,10 +81,10 @@ const ConcurrentOutput = ({ processes, abortController, showTimestamps = true, o
                 showTimestamps ? (React.createElement(Box, null,
                     React.createElement(Box, { marginRight: 1 },
                         React.createElement(Text, { color: chunk.color }, new Date().toISOString().replace(/T/, ' ').replace(/\..+/, ''))),
-                    React.createElement(Text, { bold: true, color: chunk.color }, "|"))) : null,
+                    React.createElement(Text, { bold: true, color: chunk.color }, figures.lineVertical))) : null,
                 React.createElement(Box, { width: prefixColumnSize, marginX: 1 },
                     React.createElement(Text, { color: chunk.color }, chunk.prefix)),
-                React.createElement(Text, { bold: true, color: chunk.color }, "|"),
+                React.createElement(Text, { bold: true, color: chunk.color }, figures.lineVertical),
                 React.createElement(Box, { flexGrow: 1, paddingLeft: 1 },
                     React.createElement(Text, { color: chunk.color }, line)))))));
         }),
@@ -93,7 +93,9 @@ const ConcurrentOutput = ({ processes, abortController, showTimestamps = true, o
                 figures.pointerSmall,
                 " Press ",
                 React.createElement(Text, { bold: true }, shortcut.key),
-                " | ",
+                " ",
+                figures.lineVertical,
+                " ",
                 shortcut.action)))),
             footer.subTitle ? (React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, null, footer.subTitle))) : null)) : null));

package/dist/private/node/ui/components/ConcurrentOutput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConcurrentOutput.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/ConcurrentOutput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {OutputProcess} from '../../../../public/node/output.js'\nimport useAsyncAndUnmount from '../hooks/use-async-and-unmount.js'\nimport {AbortController} from '../../../../public/node/abort.js'\nimport {handleCtrlC} from '../../ui.js'\nimport React, {FunctionComponent, useState} from 'react'\nimport {Box, Key, Static, Text, useInput} from 'ink'\nimport stripAnsi from 'strip-ansi'\nimport treeKill from 'tree-kill'\nimport figures from 'figures'\nimport {Writable} from 'stream'\n\nexport type WritableStream = (process: OutputProcess, index: number) => Writable\n\ninterface Shortcut {\n  key: string\n  action: string\n}\nexport interface ConcurrentOutputProps {\n  processes: OutputProcess[]\n  abortController: AbortController\n  showTimestamps?: boolean\n  onInput?: (input: string, key: Key, exit: () => void) => void\n  footer?: {\n    shortcuts: Shortcut[]\n    subTitle?: string\n  }\n}\ninterface Chunk {\n  color: string\n  prefix: string\n  lines: string[]\n}\n\n/**\n * Renders output from concurrent processes to the terminal.\n * Output will be divided in a three column layout\n * with the left column containing the timestamp,\n * the right column containing the output,\n * and the middle column containing the process prefix.\n * Every process will be rendered with a different color, up to 4 colors.\n *\n * For example running `shopify app dev`:\n *\n * ```shell\n * 2022-10-10 13:11:03 | backend    | npm\n * 2022-10-10 13:11:03 | backend    |  WARN ignoring workspace config at ...\n * 2022-10-10 13:11:03 | backend    |\n * 2022-10-10 13:11:03 | backend    |\n * 2022-10-10 13:11:03 | backend    | > shopify-app-template-node@0.1.0 dev\n * 2022-10-10 13:11:03 | backend    | > cross-env NODE_ENV=development nodemon backend/index.js --watch ./backend\n * 2022-10-10 13:11:03 | backend    |\n * 2022-10-10 13:11:03 | backend    |\n * 2022-10-10 13:11:03 | frontend   |\n * 2022-10-10 13:11:03 | frontend   | > starter-react-frontend-app@0.1.0 dev\n * 2022-10-10 13:11:03 | frontend   | > cross-env NODE_ENV=development node vite-server.js\n * 2022-10-10 13:11:03 | frontend   |\n * 2022-10-10 13:11:03 | frontend   |\n * 2022-10-10 13:11:03 | backend    |\n * 2022-10-10 13:11:03 | backend    | [nodemon] to restart at any time, enter `rs`\n * 2022-10-10 13:11:03 | backend    | [nodemon] watching path(s): backend/\n * 2022-10-10 13:11:03 | backend    | [nodemon] watching extensions: js,mjs,json\n * 2022-10-10 13:11:03 | backend    | [nodemon] starting `node backend/index.js`\n * 2022-10-10 13:11:03 | backend    |\n *\n * ```\n */\nconst ConcurrentOutput: FunctionComponent<ConcurrentOutputProps> = ({\n  processes,\n  abortController,\n  showTimestamps = true,\n  onInput,\n  footer,\n}) => {\n  const [processOutput, setProcessOutput] = useState<Chunk[]>([])\n  const concurrentColors = ['yellow', 'cyan', 'magenta', 'green', 'blue']\n  const prefixColumnSize = Math.max(...processes.map((process) => process.prefix.length))\n\n  function lineColor(index: number) {\n    const colorIndex = index < concurrentColors.length ? index : index % concurrentColors.length\n    return concurrentColors[colorIndex]!\n  }\n\n  const writableStream = (process: OutputProcess, index: number) => {\n    return new Writable({\n      write(chunk, _encoding, next) {\n        const lines = stripAnsi(chunk.toString('utf8').replace(/(\\n)$/, '')).split(/\\n/)\n\n        setProcessOutput((previousProcessOutput) => [\n          ...previousProcessOutput,\n          {\n            color: lineColor(index),\n            prefix: process.prefix,\n            lines,\n          },\n        ])\n\n        next()\n      },\n    })\n  }\n\n  const runProcesses = () => {\n    return Promise.all(\n      processes.map(async (process, index) => {\n        const stdout = writableStream(process, index)\n        const stderr = writableStream(process, index)\n\n        await process.action(stdout, stderr, abortController.signal)\n      }),\n    )\n  }\n\n  useInput(\n    (input, key) => {\n      handleCtrlC(input, key)\n\n      onInput!(input, key, () => treeKill(process.pid, 'SIGINT'))\n    },\n    {isActive: typeof onInput !== 'undefined'},\n  )\n\n  useAsyncAndUnmount(runProcesses, {onRejected: () => abortController.abort()})\n\n  return (\n    <>\n      <Static items={processOutput}>\n        {(chunk, index) => {\n          return (\n            <Box flexDirection=\"column\" key={index}>\n              {chunk.lines.map((line, index) => (\n                <Box key={index} flexDirection=\"row\">\n                  {showTimestamps ? (\n                    <Box>\n                      <Box marginRight={1}>\n                        <Text color={chunk.color}>\n                          {new Date().toISOString().replace(/T/, ' ').replace(/\\..+/, '')}\n                        </Text>\n                      </Box>\n\n                      <Text bold color={chunk.color}>\n                        |\n                      </Text>\n                    </Box>\n                  ) : null}\n\n                  <Box width={prefixColumnSize} marginX={1}>\n                    <Text color={chunk.color}>{chunk.prefix}</Text>\n                  </Box>\n\n                  <Text bold color={chunk.color}>\n                    |\n                  </Text>\n\n                  <Box flexGrow={1} paddingLeft={1}>\n                    <Text color={chunk.color}>{line}</Text>\n                  </Box>\n                </Box>\n              ))}\n            </Box>\n          )\n        }}\n      </Static>\n      {footer ? (\n        <Box marginY={1} flexDirection=\"column\" flexGrow={1}>\n          <Box flexDirection=\"column\">\n            {footer.shortcuts.map((shortcut, index) => (\n              <Text key={index}>\n                {figures.pointerSmall} Press <Text bold>{shortcut.key}</Text> | {shortcut.action}\n              </Text>\n            ))}\n          </Box>\n          {footer.subTitle ? (\n            <Box marginTop={1}>\n              <Text>{footer.subTitle}</Text>\n            </Box>\n          ) : null}\n        </Box>\n      ) : null}\n    </>\n  )\n}\n\nexport {ConcurrentOutput}\n"]}
+{"version":3,"file":"ConcurrentOutput.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/ConcurrentOutput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {OutputProcess} from '../../../../public/node/output.js'\nimport useAsyncAndUnmount from '../hooks/use-async-and-unmount.js'\nimport {AbortController} from '../../../../public/node/abort.js'\nimport {handleCtrlC} from '../../ui.js'\nimport React, {FunctionComponent, useState} from 'react'\nimport {Box, Key, Static, Text, useInput} from 'ink'\nimport stripAnsi from 'strip-ansi'\nimport treeKill from 'tree-kill'\nimport figures from 'figures'\nimport {Writable} from 'stream'\n\nexport type WritableStream = (process: OutputProcess, index: number) => Writable\n\ninterface Shortcut {\n  key: string\n  action: string\n}\nexport interface ConcurrentOutputProps {\n  processes: OutputProcess[]\n  abortController: AbortController\n  showTimestamps?: boolean\n  onInput?: (input: string, key: Key, exit: () => void) => void\n  footer?: {\n    shortcuts: Shortcut[]\n    subTitle?: string\n  }\n}\ninterface Chunk {\n  color: string\n  prefix: string\n  lines: string[]\n}\n\n/**\n * Renders output from concurrent processes to the terminal.\n * Output will be divided in a three column layout\n * with the left column containing the timestamp,\n * the right column containing the output,\n * and the middle column containing the process prefix.\n * Every process will be rendered with a different color, up to 4 colors.\n *\n * For example running `shopify app dev`:\n *\n * ```shell\n * 2022-10-10 13:11:03 | backend    | npm\n * 2022-10-10 13:11:03 | backend    |  WARN ignoring workspace config at ...\n * 2022-10-10 13:11:03 | backend    |\n * 2022-10-10 13:11:03 | backend    |\n * 2022-10-10 13:11:03 | backend    | > shopify-app-template-node@0.1.0 dev\n * 2022-10-10 13:11:03 | backend    | > cross-env NODE_ENV=development nodemon backend/index.js --watch ./backend\n * 2022-10-10 13:11:03 | backend    |\n * 2022-10-10 13:11:03 | backend    |\n * 2022-10-10 13:11:03 | frontend   |\n * 2022-10-10 13:11:03 | frontend   | > starter-react-frontend-app@0.1.0 dev\n * 2022-10-10 13:11:03 | frontend   | > cross-env NODE_ENV=development node vite-server.js\n * 2022-10-10 13:11:03 | frontend   |\n * 2022-10-10 13:11:03 | frontend   |\n * 2022-10-10 13:11:03 | backend    |\n * 2022-10-10 13:11:03 | backend    | [nodemon] to restart at any time, enter `rs`\n * 2022-10-10 13:11:03 | backend    | [nodemon] watching path(s): backend/\n * 2022-10-10 13:11:03 | backend    | [nodemon] watching extensions: js,mjs,json\n * 2022-10-10 13:11:03 | backend    | [nodemon] starting `node backend/index.js`\n * 2022-10-10 13:11:03 | backend    |\n *\n * ```\n */\nconst ConcurrentOutput: FunctionComponent<ConcurrentOutputProps> = ({\n  processes,\n  abortController,\n  showTimestamps = true,\n  onInput,\n  footer,\n}) => {\n  const [processOutput, setProcessOutput] = useState<Chunk[]>([])\n  const concurrentColors = ['yellow', 'cyan', 'magenta', 'green', 'blue']\n  const prefixColumnSize = Math.max(...processes.map((process) => process.prefix.length))\n\n  function lineColor(index: number) {\n    const colorIndex = index < concurrentColors.length ? index : index % concurrentColors.length\n    return concurrentColors[colorIndex]!\n  }\n\n  const writableStream = (process: OutputProcess, index: number) => {\n    return new Writable({\n      write(chunk, _encoding, next) {\n        const lines = stripAnsi(chunk.toString('utf8').replace(/(\\n)$/, '')).split(/\\n/)\n\n        setProcessOutput((previousProcessOutput) => [\n          ...previousProcessOutput,\n          {\n            color: lineColor(index),\n            prefix: process.prefix,\n            lines,\n          },\n        ])\n\n        next()\n      },\n    })\n  }\n\n  const runProcesses = () => {\n    return Promise.all(\n      processes.map(async (process, index) => {\n        const stdout = writableStream(process, index)\n        const stderr = writableStream(process, index)\n\n        await process.action(stdout, stderr, abortController.signal)\n      }),\n    )\n  }\n\n  useInput(\n    (input, key) => {\n      handleCtrlC(input, key)\n\n      onInput!(input, key, () => treeKill(process.pid, 'SIGINT'))\n    },\n    {isActive: typeof onInput !== 'undefined'},\n  )\n\n  useAsyncAndUnmount(runProcesses, {onRejected: () => abortController.abort()})\n\n  return (\n    <>\n      <Static items={processOutput}>\n        {(chunk, index) => {\n          return (\n            <Box flexDirection=\"column\" key={index}>\n              {chunk.lines.map((line, index) => (\n                <Box key={index} flexDirection=\"row\">\n                  {showTimestamps ? (\n                    <Box>\n                      <Box marginRight={1}>\n                        <Text color={chunk.color}>\n                          {new Date().toISOString().replace(/T/, ' ').replace(/\\..+/, '')}\n                        </Text>\n                      </Box>\n\n                      <Text bold color={chunk.color}>\n                        {figures.lineVertical}\n                      </Text>\n                    </Box>\n                  ) : null}\n\n                  <Box width={prefixColumnSize} marginX={1}>\n                    <Text color={chunk.color}>{chunk.prefix}</Text>\n                  </Box>\n\n                  <Text bold color={chunk.color}>\n                    {figures.lineVertical}\n                  </Text>\n\n                  <Box flexGrow={1} paddingLeft={1}>\n                    <Text color={chunk.color}>{line}</Text>\n                  </Box>\n                </Box>\n              ))}\n            </Box>\n          )\n        }}\n      </Static>\n      {footer ? (\n        <Box marginY={1} flexDirection=\"column\" flexGrow={1}>\n          <Box flexDirection=\"column\">\n            {footer.shortcuts.map((shortcut, index) => (\n              <Text key={index}>\n                {figures.pointerSmall} Press <Text bold>{shortcut.key}</Text> {figures.lineVertical} {shortcut.action}\n              </Text>\n            ))}\n          </Box>\n          {footer.subTitle ? (\n            <Box marginTop={1}>\n              <Text>{footer.subTitle}</Text>\n            </Box>\n          ) : null}\n        </Box>\n      ) : null}\n    </>\n  )\n}\n\nexport {ConcurrentOutput}\n"]}

package/dist/private/node/ui/components/ConcurrentOutput.test.js

@@ -53,15 +53,15 @@ describe('ConcurrentOutput', () => {
         await frontendPromise;
         // Then
         expect(unstyled(getLastFrameAfterUnmount(renderInstance).replace(/\d/g, '0'))).toMatchInlineSnapshot(`
-      "0000-00-00 00:00:00 | backend  | first backend message
-      0000-00-00 00:00:00 | backend  | second backend message
-      0000-00-00 00:00:00 | backend  | third backend message
-      0000-00-00 00:00:00 | frontend | first frontend message
-      0000-00-00 00:00:00 | frontend | second frontend message
-      0000-00-00 00:00:00 | frontend | third frontend message
+      "0000-00-00 00:00:00 │ backend  │ first backend message
+      0000-00-00 00:00:00 │ backend  │ second backend message
+      0000-00-00 00:00:00 │ backend  │ third backend message
+      0000-00-00 00:00:00 │ frontend │ first frontend message
+      0000-00-00 00:00:00 │ frontend │ second frontend message
+      0000-00-00 00:00:00 │ frontend │ third frontend message
 
-      › Press p | open your browser
-      › Press q | quit
+      › Press p │ open your browser
+      › Press q │ quit
 
       Preview URL: https://shopify.com
       "

package/dist/private/node/ui/components/ConcurrentOutput.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConcurrentOutput.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/ConcurrentOutput.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAC,wBAAwB,EAAE,sBAAsB,EAAC,MAAM,qBAAqB,CAAA;AACpF,OAAO,EAAC,eAAe,EAAc,MAAM,kCAAkC,CAAA;AAC7E,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAC,MAAM,QAAQ,CAAA;AACjD,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAG1C,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,IAAI,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;QAC3E,QAAQ;QACR,IAAI,qBAAiC,CAAA;QACrC,IAAI,sBAAkC,CAAA;QAEtC,MAAM,cAAc,GAAG,IAAI,OAAO,CAAO,UAAU,OAAO,EAAE,OAAO;YACjE,qBAAqB,GAAG,OAAO,CAAA;QACjC,CAAC,CAAC,CAAA;QAEF,MAAM,eAAe,GAAG,IAAI,OAAO,CAAO,UAAU,OAAO,EAAE,OAAO;YAClE,sBAAsB,GAAG,OAAO,CAAA;QAClC,CAAC,CAAC,CAAA;QAEF,MAAM,cAAc,GAAG;YACrB,MAAM,EAAE,SAAS;YACjB,MAAM,EAAE,KAAK,EAAE,MAAgB,EAAE,OAAiB,EAAE,OAAoB,EAAE,EAAE;gBAC1E,MAAM,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAA;gBACrC,MAAM,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAA;gBACtC,MAAM,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAA;gBAErC,qBAAqB,EAAE,CAAA;YACzB,CAAC;SACF,CAAA;QAED,MAAM,eAAe,GAAG;YACtB,MAAM,EAAE,UAAU;YAClB,MAAM,EAAE,KAAK,EAAE,MAAgB,EAAE,OAAiB,EAAE,OAAoB,EAAE,EAAE;gBAC1E,MAAM,cAAc,CAAA;gBAEpB,MAAM,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAA;gBACtC,MAAM,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAA;gBACvC,MAAM,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAA;gBAEtC,sBAAsB,EAAE,CAAA;YAC1B,CAAC;SACF,CAAA;QACD,OAAO;QAEP,MAAM,cAAc,GAAG,MAAM,CAC3B,oBAAC,gBAAgB,IACf,SAAS,EAAE,CAAC,cAAc,EAAE,eAAe,CAAC,EAC5C,eAAe,EAAE,IAAI,eAAe,EAAE,EACtC,MAAM,EAAE;gBACN,SAAS,EAAE;oBACT;wBACE,GAAG,EAAE,GAAG;wBACR,MAAM,EAAE,mBAAmB;qBAC5B;oBACD;wBACE,GAAG,EAAE,GAAG;wBACR,MAAM,EAAE,MAAM;qBACf;iBACF;gBACD,QAAQ,EAAE,kCAAkC;aAC7C,GACD,CACH,CAAA;QAED,qCAAqC;QACrC,MAAM,eAAe,CAAA;QAErB,OAAO;QACP,MAAM,CAAC,QAAQ,CAAC,wBAAwB,CAAC,cAAc,CAAE,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;KAarG,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,6DAA6D,EAAE,KAAK,IAAI,EAAE;QAC7E,MAAM,kBAAkB,GAAG,IAAI,OAAO,CAAO,UAAU,QAAQ,EAAE,OAAO,IAAG,CAAC,CAAC,CAAA;QAE7E,MAAM,kBAAkB,GAAG;YACzB,MAAM,EAAE,sBAAsB;YAC9B,MAAM,EAAE,KAAK,IAAI,EAAE;gBACjB,MAAM,kBAAkB,CAAA;YAC1B,CAAC;SACF,CAAA;QAED,MAAM,OAAO,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QAEvB,MAAM,cAAc,GAAG,MAAM,CAC3B,oBAAC,gBAAgB,IACf,SAAS,EAAE,CAAC,kBAAkB,CAAC,EAC/B,eAAe,EAAE,IAAI,eAAe,EAAE,EACtC,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,GAC5C,CACH,CAAA;QAED,MAAM,sBAAsB,EAAE,CAAA;QAC9B,MAAM,CAAC,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAA;QAExC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAC/B,MAAM,CAAC,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAA;QACxC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC7C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {ConcurrentOutput} from './ConcurrentOutput.js'\nimport {getLastFrameAfterUnmount, waitForInputsToBeReady} from '../../testing/ui.js'\nimport {AbortController, AbortSignal} from '../../../../public/node/abort.js'\nimport {unstyled} from '../../../../public/node/output.js'\nimport React from 'react'\nimport {describe, expect, test, vi} from 'vitest'\nimport {render} from 'ink-testing-library'\nimport {Writable} from 'stream'\n\ndescribe('ConcurrentOutput', () => {\n  test('renders a stream of concurrent outputs from sub-processes', async () => {\n    // Given\n    let backendPromiseResolve: () => void\n    let frontendPromiseResolve: () => void\n\n    const backendPromise = new Promise<void>(function (resolve, _reject) {\n      backendPromiseResolve = resolve\n    })\n\n    const frontendPromise = new Promise<void>(function (resolve, _reject) {\n      frontendPromiseResolve = resolve\n    })\n\n    const backendProcess = {\n      prefix: 'backend',\n      action: async (stdout: Writable, _stderr: Writable, _signal: AbortSignal) => {\n        stdout.write('first backend message')\n        stdout.write('second backend message')\n        stdout.write('third backend message')\n\n        backendPromiseResolve()\n      },\n    }\n\n    const frontendProcess = {\n      prefix: 'frontend',\n      action: async (stdout: Writable, _stderr: Writable, _signal: AbortSignal) => {\n        await backendPromise\n\n        stdout.write('first frontend message')\n        stdout.write('second frontend message')\n        stdout.write('third frontend message')\n\n        frontendPromiseResolve()\n      },\n    }\n    // When\n\n    const renderInstance = render(\n      <ConcurrentOutput\n        processes={[backendProcess, frontendProcess]}\n        abortController={new AbortController()}\n        footer={{\n          shortcuts: [\n            {\n              key: 'p',\n              action: 'open your browser',\n            },\n            {\n              key: 'q',\n              action: 'quit',\n            },\n          ],\n          subTitle: `Preview URL: https://shopify.com`,\n        }}\n      />,\n    )\n\n    // wait for all output to be rendered\n    await frontendPromise\n\n    // Then\n    expect(unstyled(getLastFrameAfterUnmount(renderInstance)!.replace(/\\d/g, '0'))).toMatchInlineSnapshot(`\n      \"0000-00-00 00:00:00 | backend  | first backend message\n      0000-00-00 00:00:00 | backend  | second backend message\n      0000-00-00 00:00:00 | backend  | third backend message\n      0000-00-00 00:00:00 | frontend | first frontend message\n      0000-00-00 00:00:00 | frontend | second frontend message\n      0000-00-00 00:00:00 | frontend | third frontend message\n\n      › Press p | open your browser\n      › Press q | quit\n\n      Preview URL: https://shopify.com\n      \"\n    `)\n  })\n\n  test('accepts a onInput function that fires when a key is pressed', async () => {\n    const neverEndingPromise = new Promise<void>(function (_resolve, _reject) {})\n\n    const neverEndingProcess = {\n      prefix: 'never-ending-process',\n      action: async () => {\n        await neverEndingPromise\n      },\n    }\n\n    const onInput = vi.fn()\n\n    const renderInstance = render(\n      <ConcurrentOutput\n        processes={[neverEndingProcess]}\n        abortController={new AbortController()}\n        onInput={(input, key) => onInput(input, key)}\n      />,\n    )\n\n    await waitForInputsToBeReady()\n    expect(onInput).toHaveBeenCalledTimes(0)\n\n    renderInstance.stdin.write('a')\n    expect(onInput).toHaveBeenCalledTimes(1)\n    expect(onInput.mock.calls[0]![0]).toBe('a')\n  })\n})\n"]}
+{"version":3,"file":"ConcurrentOutput.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/ConcurrentOutput.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import {ConcurrentOutput} from './ConcurrentOutput.js'\nimport {getLastFrameAfterUnmount, waitForInputsToBeReady} from '../../testing/ui.js'\nimport {AbortController, AbortSignal} from '../../../../public/node/abort.js'\nimport {unstyled} from '../../../../public/node/output.js'\nimport React from 'react'\nimport {describe, expect, test, vi} from 'vitest'\nimport {render} from 'ink-testing-library'\nimport {Writable} from 'stream'\n\ndescribe('ConcurrentOutput', () => {\n  test('renders a stream of concurrent outputs from sub-processes', async () => {\n    // Given\n    let backendPromiseResolve: () => void\n    let frontendPromiseResolve: () => void\n\n    const backendPromise = new Promise<void>(function (resolve, _reject) {\n      backendPromiseResolve = resolve\n    })\n\n    const frontendPromise = new Promise<void>(function (resolve, _reject) {\n      frontendPromiseResolve = resolve\n    })\n\n    const backendProcess = {\n      prefix: 'backend',\n      action: async (stdout: Writable, _stderr: Writable, _signal: AbortSignal) => {\n        stdout.write('first backend message')\n        stdout.write('second backend message')\n        stdout.write('third backend message')\n\n        backendPromiseResolve()\n      },\n    }\n\n    const frontendProcess = {\n      prefix: 'frontend',\n      action: async (stdout: Writable, _stderr: Writable, _signal: AbortSignal) => {\n        await backendPromise\n\n        stdout.write('first frontend message')\n        stdout.write('second frontend message')\n        stdout.write('third frontend message')\n\n        frontendPromiseResolve()\n      },\n    }\n    // When\n\n    const renderInstance = render(\n      <ConcurrentOutput\n        processes={[backendProcess, frontendProcess]}\n        abortController={new AbortController()}\n        footer={{\n          shortcuts: [\n            {\n              key: 'p',\n              action: 'open your browser',\n            },\n            {\n              key: 'q',\n              action: 'quit',\n            },\n          ],\n          subTitle: `Preview URL: https://shopify.com`,\n        }}\n      />,\n    )\n\n    // wait for all output to be rendered\n    await frontendPromise\n\n    // Then\n    expect(unstyled(getLastFrameAfterUnmount(renderInstance)!.replace(/\\d/g, '0'))).toMatchInlineSnapshot(`\n      \"0000-00-00 00:00:00 │ backend  │ first backend message\n      0000-00-00 00:00:00 │ backend  │ second backend message\n      0000-00-00 00:00:00 │ backend  │ third backend message\n      0000-00-00 00:00:00 │ frontend │ first frontend message\n      0000-00-00 00:00:00 │ frontend │ second frontend message\n      0000-00-00 00:00:00 │ frontend │ third frontend message\n\n      › Press p │ open your browser\n      › Press q │ quit\n\n      Preview URL: https://shopify.com\n      \"\n    `)\n  })\n\n  test('accepts a onInput function that fires when a key is pressed', async () => {\n    const neverEndingPromise = new Promise<void>(function (_resolve, _reject) {})\n\n    const neverEndingProcess = {\n      prefix: 'never-ending-process',\n      action: async () => {\n        await neverEndingPromise\n      },\n    }\n\n    const onInput = vi.fn()\n\n    const renderInstance = render(\n      <ConcurrentOutput\n        processes={[neverEndingProcess]}\n        abortController={new AbortController()}\n        onInput={(input, key) => onInput(input, key)}\n      />,\n    )\n\n    await waitForInputsToBeReady()\n    expect(onInput).toHaveBeenCalledTimes(0)\n\n    renderInstance.stdin.write('a')\n    expect(onInput).toHaveBeenCalledTimes(1)\n    expect(onInput.mock.calls[0]![0]).toBe('a')\n  })\n})\n"]}

package/dist/private/node/ui/components/FatalError.test.js

@@ -81,8 +81,7 @@ describe('FatalError', async () => {
       │  Unexpected error                                                            │
       │                                                                              │
       │  Next steps                                                                  │
-      │    • Have you created a Shopify Partners organization (                      │
-      │      https://partners.shopify.com/signup )?                                  │
+      │    • Have you created a Shopify Partners organization [1]?                   │
       │    • Have you confirmed your accounts from the emails you received?          │
       │    • Need to connect to a different App or organization? Run the command     │
       │      again with \`--reset\`                                                    │
@@ -94,6 +93,7 @@ describe('FatalError', async () => {
       │    at _load (internal/modules/cjs/loader.js:878)                             │
       │                                                                              │
       ╰──────────────────────────────────────────────────────────────────────────────╯
+      [1] https://partners.shopify.com/signup
       "
     `);
     });

package/dist/private/node/ui/components/FatalError.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"FatalError.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/FatalError.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAC1D,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAC,MAAM,kCAAkC,CAAA;AACpF,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAE1C,QAAQ,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE;IAChC,IAAI,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACxE,MAAM,KAAK,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;QAChD,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAA;QAExD,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;KASpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,kBAAkB,CAAC,CAAA;QAC9C,KAAK,CAAC,KAAK,GAAG;;;;;;KAMb,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAA;QAExD,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;KAapD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;QAC3E,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,kBAAkB,CAAC,CAAA;QAC9C,KAAK,CAAC,KAAK,GAAG;;;;;;KAMb,CAAA;QAED,KAAK,CAAC,SAAS,GAAG;YAChB;gBACE,UAAU;gBACV;oBACE,IAAI,EAAE;wBACJ,KAAK,EAAE,yCAAyC;wBAChD,GAAG,EAAE,qCAAqC;qBAC3C;iBACF;gBACD;oBACE,IAAI,EAAE,GAAG;iBACV;aACF;YACD,gEAAgE;YAChE;gBACE,gFAAgF;gBAChF;oBACE,OAAO,EAAE,SAAS;iBACnB;aACF;SACF,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAA;QAExD,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;KAoBpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,kBAAkB,EAAE,MAAM,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;QAExE,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAA;QAExD,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;KASpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {FatalError} from './FatalError.js'\nimport {unstyled} from '../../../../public/node/output.js'\nimport {AbortError, BugError, ExternalError} from '../../../../public/node/error.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\nimport {render} from 'ink-testing-library'\n\ndescribe('FatalError', async () => {\n  test('renders correctly with a just a message and tryMessage', async () => {\n    const error = new AbortError('test', 'try this')\n    const {lastFrame} = render(<FatalError error={error} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"╭─ error ──────────────────────────────────────────────────────────────────────╮\n      │                                                                              │\n      │  test                                                                        │\n      │                                                                              │\n      │  try this                                                                    │\n      │                                                                              │\n      ╰──────────────────────────────────────────────────────────────────────────────╯\n      \"\n    `)\n  })\n\n  test('renders correctly with a message and a stack', async () => {\n    const error = new BugError('Unexpected error')\n    error.stack = `\n      Error: Unexpected error\n          at Module._compile (internal/modules/cjs/loader.js:1137:30)\n          at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)\n          at Module.load (internal/modules/cjs/loader.js:985:32)\n          at Function.Module._load (internal/modules/cjs/loader.js:878:14)\n    `\n\n    const {lastFrame} = render(<FatalError error={error} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"╭─ error ──────────────────────────────────────────────────────────────────────╮\n      │                                                                              │\n      │  Unexpected error                                                            │\n      │                                                                              │\n      │  To investigate the issue, examine this stack trace:                         │\n      │    at _compile (internal/modules/cjs/loader.js:1137)                         │\n      │    at js (internal/modules/cjs/loader.js:1157)                               │\n      │    at load (internal/modules/cjs/loader.js:985)                              │\n      │    at _load (internal/modules/cjs/loader.js:878)                             │\n      │                                                                              │\n      ╰──────────────────────────────────────────────────────────────────────────────╯\n      \"\n    `)\n  })\n\n  test('renders correctly with a message, a stack, and next steps', async () => {\n    const error = new BugError('Unexpected error')\n    error.stack = `\n      Error: Unexpected error\n          at Module._compile (internal/modules/cjs/loader.js:1137:30)\n          at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)\n          at Module.load (internal/modules/cjs/loader.js:985:32)\n          at Function.Module._load (internal/modules/cjs/loader.js:878:14)\n    `\n\n    error.nextSteps = [\n      [\n        'Have you',\n        {\n          link: {\n            label: 'created a Shopify Partners organization',\n            url: 'https://partners.shopify.com/signup',\n          },\n        },\n        {\n          char: '?',\n        },\n      ],\n      'Have you confirmed your accounts from the emails you received?',\n      [\n        'Need to connect to a different App or organization? Run the command again with',\n        {\n          command: '--reset',\n        },\n      ],\n    ]\n\n    const {lastFrame} = render(<FatalError error={error} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"╭─ error ──────────────────────────────────────────────────────────────────────╮\n      │                                                                              │\n      │  Unexpected error                                                            │\n      │                                                                              │\n      │  Next steps                                                                  │\n      │    • Have you created a Shopify Partners organization (                      │\n      │      https://partners.shopify.com/signup )?                                  │\n      │    • Have you confirmed your accounts from the emails you received?          │\n      │    • Need to connect to a different App or organization? Run the command     │\n      │      again with \\`--reset\\`                                                    │\n      │                                                                              │\n      │  To investigate the issue, examine this stack trace:                         │\n      │    at _compile (internal/modules/cjs/loader.js:1137)                         │\n      │    at js (internal/modules/cjs/loader.js:1157)                               │\n      │    at load (internal/modules/cjs/loader.js:985)                              │\n      │    at _load (internal/modules/cjs/loader.js:878)                             │\n      │                                                                              │\n      ╰──────────────────────────────────────────────────────────────────────────────╯\n      \"\n    `)\n  })\n\n  test('renders correctly an external error', async () => {\n    const error = new ExternalError('Unexpected error', 'yarn', ['install'])\n\n    const {lastFrame} = render(<FatalError error={error} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"── external error ──────────────────────────────────────────────────────────────\n\n      Error coming from \\`yarn install\\`\n\n      Unexpected error\n\n      ────────────────────────────────────────────────────────────────────────────────\n      \"\n    `)\n  })\n})\n"]}
+{"version":3,"file":"FatalError.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/FatalError.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAC1D,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAC,MAAM,kCAAkC,CAAA;AACpF,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAE1C,QAAQ,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE;IAChC,IAAI,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACxE,MAAM,KAAK,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;QAChD,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAA;QAExD,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;KASpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,kBAAkB,CAAC,CAAA;QAC9C,KAAK,CAAC,KAAK,GAAG;;;;;;KAMb,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAA;QAExD,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;KAapD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;QAC3E,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,kBAAkB,CAAC,CAAA;QAC9C,KAAK,CAAC,KAAK,GAAG;;;;;;KAMb,CAAA;QAED,KAAK,CAAC,SAAS,GAAG;YAChB;gBACE,UAAU;gBACV;oBACE,IAAI,EAAE;wBACJ,KAAK,EAAE,yCAAyC;wBAChD,GAAG,EAAE,qCAAqC;qBAC3C;iBACF;gBACD;oBACE,IAAI,EAAE,GAAG;iBACV;aACF;YACD,gEAAgE;YAChE;gBACE,gFAAgF;gBAChF;oBACE,OAAO,EAAE,SAAS;iBACnB;aACF;SACF,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAA;QAExD,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;KAoBpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,kBAAkB,EAAE,MAAM,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;QAExE,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAA;QAExD,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;KASpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {FatalError} from './FatalError.js'\nimport {unstyled} from '../../../../public/node/output.js'\nimport {AbortError, BugError, ExternalError} from '../../../../public/node/error.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\nimport {render} from 'ink-testing-library'\n\ndescribe('FatalError', async () => {\n  test('renders correctly with a just a message and tryMessage', async () => {\n    const error = new AbortError('test', 'try this')\n    const {lastFrame} = render(<FatalError error={error} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"╭─ error ──────────────────────────────────────────────────────────────────────╮\n      │                                                                              │\n      │  test                                                                        │\n      │                                                                              │\n      │  try this                                                                    │\n      │                                                                              │\n      ╰──────────────────────────────────────────────────────────────────────────────╯\n      \"\n    `)\n  })\n\n  test('renders correctly with a message and a stack', async () => {\n    const error = new BugError('Unexpected error')\n    error.stack = `\n      Error: Unexpected error\n          at Module._compile (internal/modules/cjs/loader.js:1137:30)\n          at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)\n          at Module.load (internal/modules/cjs/loader.js:985:32)\n          at Function.Module._load (internal/modules/cjs/loader.js:878:14)\n    `\n\n    const {lastFrame} = render(<FatalError error={error} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"╭─ error ──────────────────────────────────────────────────────────────────────╮\n      │                                                                              │\n      │  Unexpected error                                                            │\n      │                                                                              │\n      │  To investigate the issue, examine this stack trace:                         │\n      │    at _compile (internal/modules/cjs/loader.js:1137)                         │\n      │    at js (internal/modules/cjs/loader.js:1157)                               │\n      │    at load (internal/modules/cjs/loader.js:985)                              │\n      │    at _load (internal/modules/cjs/loader.js:878)                             │\n      │                                                                              │\n      ╰──────────────────────────────────────────────────────────────────────────────╯\n      \"\n    `)\n  })\n\n  test('renders correctly with a message, a stack, and next steps', async () => {\n    const error = new BugError('Unexpected error')\n    error.stack = `\n      Error: Unexpected error\n          at Module._compile (internal/modules/cjs/loader.js:1137:30)\n          at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)\n          at Module.load (internal/modules/cjs/loader.js:985:32)\n          at Function.Module._load (internal/modules/cjs/loader.js:878:14)\n    `\n\n    error.nextSteps = [\n      [\n        'Have you',\n        {\n          link: {\n            label: 'created a Shopify Partners organization',\n            url: 'https://partners.shopify.com/signup',\n          },\n        },\n        {\n          char: '?',\n        },\n      ],\n      'Have you confirmed your accounts from the emails you received?',\n      [\n        'Need to connect to a different App or organization? Run the command again with',\n        {\n          command: '--reset',\n        },\n      ],\n    ]\n\n    const {lastFrame} = render(<FatalError error={error} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"╭─ error ──────────────────────────────────────────────────────────────────────╮\n      │                                                                              │\n      │  Unexpected error                                                            │\n      │                                                                              │\n      │  Next steps                                                                  │\n      │    • Have you created a Shopify Partners organization [1]?                   │\n      │    • Have you confirmed your accounts from the emails you received?          │\n      │    • Need to connect to a different App or organization? Run the command     │\n      │      again with \\`--reset\\`                                                    │\n      │                                                                              │\n      │  To investigate the issue, examine this stack trace:                         │\n      │    at _compile (internal/modules/cjs/loader.js:1137)                         │\n      │    at js (internal/modules/cjs/loader.js:1157)                               │\n      │    at load (internal/modules/cjs/loader.js:985)                              │\n      │    at _load (internal/modules/cjs/loader.js:878)                             │\n      │                                                                              │\n      ╰──────────────────────────────────────────────────────────────────────────────╯\n      [1] https://partners.shopify.com/signup\n      \"\n    `)\n  })\n\n  test('renders correctly an external error', async () => {\n    const error = new ExternalError('Unexpected error', 'yarn', ['install'])\n\n    const {lastFrame} = render(<FatalError error={error} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"── external error ──────────────────────────────────────────────────────────────\n\n      Error coming from \\`yarn install\\`\n\n      Unexpected error\n\n      ────────────────────────────────────────────────────────────────────────────────\n      \"\n    `)\n  })\n})\n"]}

package/dist/private/node/ui/components/Link.js

@@ -1,15 +1,27 @@
-import chalk from 'chalk';
+import { LinksContext } from '../contexts/LinksContext.js';
 import { Text } from 'ink';
-import React from 'react';
-import terminalLink from 'terminal-link';
-function fallback(text, url) {
-    return `${text} ${chalk.dim(`( ${url} )`)}`;
+import React, { useContext } from 'react';
+import ansiEscapes from 'ansi-escapes';
+import supportsHyperlinks from 'supports-hyperlinks';
+import chalk from 'chalk';
+function link(label, url, linksContext) {
+    if (!supportsHyperlinks.stdout) {
+        if (linksContext === null) {
+            return label ? `${label} ${chalk.dim(`( ${url} )`)}` : url;
+        }
+        else {
+            const linkId = linksContext.addLink(label, url);
+            return label ? `${label} [${linkId}]` : `[${linkId}]]`;
+        }
+    }
+    return ansiEscapes.link(label ?? url, url);
 }
 /**
  * `Link` displays a clickable link when supported by the terminal.
  */
-const Link = ({ url, label }) => {
-    return React.createElement(Text, null, terminalLink(label ?? url, url, { fallback: label ? fallback : false }));
+const Link = ({ label, url }) => {
+    const linksContext = useContext(LinksContext);
+    return React.createElement(Text, null, link(label, url, linksContext));
 };
 export { Link };
 //# sourceMappingURL=Link.js.map

package/dist/private/node/ui/components/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,KAA0B,MAAM,OAAO,CAAA;AAC9C,OAAO,YAAY,MAAM,eAAe,CAAA;AAOxC,SAAS,QAAQ,CAAC,IAAY,EAAE,GAAW;IACzC,OAAO,GAAG,IAAI,IAAI,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAA;AAC7C,CAAC;AAED;;GAEG;AACH,MAAM,IAAI,GAAiC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAC,EAAe,EAAE;IACvE,OAAO,oBAAC,IAAI,QAAE,YAAY,CAAC,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,EAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAC,CAAC,CAAQ,CAAA;AAC7F,CAAC,CAAA;AAED,OAAO,EAAC,IAAI,EAAC,CAAA","sourcesContent":["import chalk from 'chalk'\nimport {Text} from 'ink'\nimport React, {FunctionComponent} from 'react'\nimport terminalLink from 'terminal-link'\n\ninterface LinkProps {\n  url: string\n  label?: string\n}\n\nfunction fallback(text: string, url: string) {\n  return `${text} ${chalk.dim(`( ${url} )`)}`\n}\n\n/**\n * `Link` displays a clickable link when supported by the terminal.\n */\nconst Link: FunctionComponent<LinkProps> = ({url, label}): JSX.Element => {\n  return <Text>{terminalLink(label ?? url, url, {fallback: label ? fallback : false})}</Text>\n}\n\nexport {Link}\n"]}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAoC,MAAM,6BAA6B,CAAA;AAC3F,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,KAAK,EAAE,EAAoB,UAAU,EAAC,MAAM,OAAO,CAAA;AAC1D,OAAO,WAAW,MAAM,cAAc,CAAA;AACtC,OAAO,kBAAkB,MAAM,qBAAqB,CAAA;AACpD,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,SAAS,IAAI,CAAC,KAAyB,EAAE,GAAW,EAAE,YAAsC;IAC1F,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE;QAC9B,IAAI,YAAY,KAAK,IAAI,EAAE;YACzB,OAAO,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAA;SAC3D;aAAM;YACL,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;YAC/C,OAAO,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,MAAM,IAAI,CAAA;SACvD;KACF;IAED,OAAO,WAAW,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,EAAE,GAAG,CAAC,CAAA;AAC5C,CAAC;AAED;;GAEG;AACH,MAAM,IAAI,GAAiC,CAAC,EAAC,KAAK,EAAE,GAAG,EAAC,EAAe,EAAE;IACvE,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IAE7C,OAAO,oBAAC,IAAI,QAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,YAAY,CAAC,CAAQ,CAAA;AACtD,CAAC,CAAA;AAED,OAAO,EAAC,IAAI,EAAC,CAAA","sourcesContent":["import {LinksContext, ContextValue as LinksContextValue} from '../contexts/LinksContext.js'\nimport {Text} from 'ink'\nimport React, {FunctionComponent, useContext} from 'react'\nimport ansiEscapes from 'ansi-escapes'\nimport supportsHyperlinks from 'supports-hyperlinks'\nimport chalk from 'chalk'\n\ninterface LinkProps {\n  url: string\n  label?: string\n}\n\nfunction link(label: string | undefined, url: string, linksContext: LinksContextValue | null) {\n  if (!supportsHyperlinks.stdout) {\n    if (linksContext === null) {\n      return label ? `${label} ${chalk.dim(`( ${url} )`)}` : url\n    } else {\n      const linkId = linksContext.addLink(label, url)\n      return label ? `${label} [${linkId}]` : `[${linkId}]]`\n    }\n  }\n\n  return ansiEscapes.link(label ?? url, url)\n}\n\n/**\n * `Link` displays a clickable link when supported by the terminal.\n */\nconst Link: FunctionComponent<LinkProps> = ({label, url}): JSX.Element => {\n  const linksContext = useContext(LinksContext)\n\n  return <Text>{link(label, url, linksContext)}</Text>\n}\n\nexport {Link}\n"]}

package/dist/private/node/ui/components/SelectPrompt.js

@@ -49,7 +49,7 @@ function SelectPrompt({ message, choices, infoTable, onSubmit, defaultValue, sub
         return () => {
             stdout.off('resize', onResize);
         };
-    }, [wrapperHeight, selectInputHeight, choices.length, stdout.rows, numberOfGroups]);
+    }, [wrapperHeight, selectInputHeight, choices.length, numberOfGroups, stdout, limit]);
     const submitAnswer = useCallback((answer) => {
         if (stdout && wrapperHeight >= stdout.rows) {
             stdout.write(ansiEscapes.clearTerminal);