chore: refactor remote provider config gen for easier setup

Author: adhorodyski

packages/create-app/src/lib/bin.ts

@@ -9,14 +9,16 @@ import {
   RockError,
   spawn,
   spinner,
+  type SupportedRemoteCacheProviders,
 } from '@rock-js/tools';
 import { gitInitStep, hasGitClient, isGitRepo } from './steps/git-init.js';
-import type { RemoteCacheTemplateInfo, TemplateInfo } from './templates.js';
+import type { TemplateInfo } from './templates.js';
 import {
   BUNDLERS,
   PLATFORMS,
   PLUGINS,
-  REMOTE_CACHE_PROVIDERS,
+  remoteCacheProviderToConfigTemplate,
+  remoteCacheProviderToImportTemplate,
   resolveTemplate,
   TEMPLATES,
 } from './templates.js';
@@ -47,7 +49,7 @@ import {
   promptPlugins,
   promptProjectName,
   promptRemoteCacheProvider,
-  promptRemoteCacheProvidersConfig,
+  promptRemoteCacheProviderArgs,
   promptTemplate,
 } from './utils/prompts.js';
 import {
@@ -146,10 +148,10 @@ export async function run() {
     options.remoteCacheProvider !== undefined ||
     options.remoteCacheProvider === false
       ? null
-      : await promptRemoteCacheProvider(REMOTE_CACHE_PROVIDERS);
+      : await promptRemoteCacheProvider();
 
-  const remoteCacheProviderConfig = remoteCacheProvider
-    ? await promptRemoteCacheProvidersConfig(remoteCacheProvider.name)
+  const remoteCacheProviderArgs = remoteCacheProvider
+    ? await promptRemoteCacheProviderArgs(remoteCacheProvider)
     : null;
 
   const shouldInstallDependencies =
@@ -178,10 +180,10 @@ export async function run() {
     platforms,
     plugins,
     bundler,
-    remoteCacheProvider && remoteCacheProviderConfig
+    remoteCacheProvider && remoteCacheProviderArgs
       ? {
-          provider: remoteCacheProvider,
-          args: remoteCacheProviderConfig,
+          name: remoteCacheProvider,
+          args: remoteCacheProviderArgs,
         }
       : null,
   );
@@ -304,7 +306,7 @@ function createConfig(
   plugins: TemplateInfo[] | null,
   bundler: TemplateInfo,
   remoteCacheProvider: {
-    provider: RemoteCacheTemplateInfo;
+    name: SupportedRemoteCacheProviders;
     args: Record<string, unknown>;
   } | null,
 ) {
@@ -320,7 +322,7 @@ export function formatConfig(
   plugins: TemplateInfo[] | null,
   bundler: TemplateInfo,
   remoteCacheProvider: {
-    provider: RemoteCacheTemplateInfo;
+    name: SupportedRemoteCacheProviders;
     args: Record<string, unknown>;
   } | null,
 ) {
@@ -330,17 +332,13 @@ export function formatConfig(
   const pluginsWithImports = plugins
     ? plugins.filter((template) => template.importName)
     : null;
-  return `${[
-    ...platformsWithImports,
-    ...(pluginsWithImports ?? []),
-    bundler,
-    ...(remoteCacheProvider ? [remoteCacheProvider.provider] : []),
-  ]
+  return `${[...platformsWithImports, ...(pluginsWithImports ?? []), bundler]
     .map(
       (template) =>
         `import { ${template.importName} } from '${template.packageName}';`,
     )
     .join('\n')}
+${[remoteCacheProvider ? remoteCacheProviderToImportTemplate(remoteCacheProvider.name) : '']}
 
 export default {${
     pluginsWithImports && pluginsWithImports.length > 0
@@ -358,18 +356,14 @@ export default {${
       .map((template) => `${template.name}: ${template.importName}(),`)
       .join('\n    ')}
   },
-  remoteCacheProvider: ${
-    remoteCacheProvider === null
-      ? null
-      : `${remoteCacheProvider.provider.importName}({\n${Object.entries(
+  ${
+    remoteCacheProvider
+      ? remoteCacheProviderToConfigTemplate(
+          remoteCacheProvider.name,
           remoteCacheProvider.args,
         )
-          .map(
-            ([key, value]) =>
-              `    ${JSON.stringify(key)}: ${JSON.stringify(value)},`,
-          )
-          .join('\n')}\n  })`
-  },
+      : ''
+  }
 };
 `;
 }

packages/create-app/src/lib/templates.ts

@@ -1,5 +1,8 @@
 import * as path from 'node:path';
-import { resolveAbsolutePath, type SupportedRemoteCacheProviders } from '@rock-js/tools';
+import {
+  resolveAbsolutePath,
+  type SupportedRemoteCacheProviders,
+} from '@rock-js/tools';
 
 export type TemplateInfo = NpmTemplateInfo | LocalTemplateInfo;
 
@@ -22,13 +25,6 @@ export type LocalTemplateInfo = {
   importName?: string;
 };
 
-export type RemoteCacheTemplateInfo = {
-  name: SupportedRemoteCacheProviders;
-  displayName: string;
-  packageName: string;
-  importName: string;
-}
-
 export const TEMPLATES: TemplateInfo[] = [
   {
     type: 'npm',
@@ -96,20 +92,35 @@ export const PLATFORMS: TemplateInfo[] = [
   },
 ];
 
-export const REMOTE_CACHE_PROVIDERS: RemoteCacheTemplateInfo[] = [
-  {
-    name: 'github-actions',
-    displayName: 'GitHub Actions',
-    packageName: '@rock-js/provider-github-actions',
-    importName: 'providerGithubActions',
-  },
-  {
-    name: 's3',
-    displayName: 'S3',
-    packageName: '@rock-js/provider-s3',
-    importName: 'providerS3',
-  },
-];
+export function remoteCacheProviderToImportTemplate(
+  provider: SupportedRemoteCacheProviders,
+) {
+  switch (provider) {
+    case 'github-actions':
+      return `import { providerGithubActions } from '@rock-js/provider-github-actions';`;
+    case 's3':
+      return `import { providerS3 } from '@rock-js/provider-s3';`;
+  }
+}
+
+export function remoteCacheProviderToConfigTemplate(
+  provider: SupportedRemoteCacheProviders,
+  args: any,
+) {
+  switch (provider) {
+    case 'github-actions':
+      return `remoteCacheProvider: providerGithubActions({
+    owner: "${args.owner}",
+    repo: "${args.repo}",
+    token: ${process.env['GITHUB_TOKEN']},
+  }),`;
+    case 's3':
+      return `remoteCacheProvider: providerS3({
+    bucket: "${args.bucket}",
+    region: "${args.region}",
+  }),`;
+  }
+}
 
 export function resolveTemplate(
   templates: TemplateInfo[],

packages/create-app/src/lib/utils/prompts.ts

@@ -7,15 +7,14 @@ import {
   promptConfirm,
   promptGroup,
   promptMultiselect,
-  promptPassword,
   promptSelect,
   promptText,
   relativeToCwd,
   RockError,
   type SupportedRemoteCacheProviders,
 } from '@rock-js/tools';
 import { vice } from 'gradient-string';
-import type { RemoteCacheTemplateInfo, TemplateInfo } from '../templates.js';
+import type { TemplateInfo } from '../templates.js';
 import { validateProjectName } from './project-name.js';
 import { getRockVersion } from './version.js';
 
@@ -160,37 +159,51 @@ export function promptBundlers(
   });
 }
 
-export function promptRemoteCacheProvider(
-  providers: RemoteCacheTemplateInfo[],
-): Promise<RemoteCacheTemplateInfo | null> {
-  return promptSelect({
-    message: 'Which remote cache provider do you want to use?',
-    initialValue: providers[0],
-    options: providers.map((provider) => ({
-      value: provider,
-      label: provider.displayName,
-    })),
+export function promptRemoteCacheProvider() {
+  return promptSelect<SupportedRemoteCacheProviders | null>({
+    message: 'Where do you store or intend to store remote build cache?',
+    initialValue: 'github-actions',
+    options: [
+      {
+        value: 'github-actions',
+        label: 'GitHub Actions',
+      },
+      {
+        value: 's3',
+        label: 'Amazon S3',
+      },
+      {
+        value: null,
+        label: 'None',
+        hint: 'Local cache only',
+      },
+    ],
   });
 }
 
-export function promptRemoteCacheProvidersConfig(
+export function promptRemoteCacheProviderArgs(
   provider: SupportedRemoteCacheProviders,
 ) {
   switch (provider) {
     case 'github-actions':
       return promptGroup({
-        owner: () => promptText({ message: 'GitHub owner' }),
-        repo: () => promptText({ message: 'GitHub repo' }),
+        owner: () => promptText({ message: 'GitHub repository owner' }),
+        repo: () => promptText({ message: 'GitHub repository name' }),
         token: () =>
-          promptPassword({ message: 'GitHub Personal Access Token (PAT)' }),
+          promptText({
+            message: 'GitHub Personal Access Token (PAT)',
+            placeholder: 'GITHUB_TOKEN',
+          }),
       });
     case 's3':
       return promptGroup({
-        bucket: () => promptText({ message: 'S3 bucket' }),
-        region: () => promptText({ message: 'S3 region' }),
-        accessKeyId: () => promptText({ message: 'S3 access key ID' }),
-        secretAccessKey: () =>
-          promptPassword({ message: 'S3 secret access key' }),
+        bucket: () =>
+          promptText({ message: 'Bucket name', placeholder: 'bucket-name' }),
+        region: () =>
+          promptText({
+            message: 'Region',
+            placeholder: 'us-west-1',
+          }),
       });
   }
 }

packages/tools/src/lib/build-cache/common.ts

@@ -10,7 +10,9 @@ import { spinner } from '../prompts.js';
 
 export const BUILD_CACHE_DIR = 'remote-build';
 
-export type SupportedRemoteCacheProviders = 'github-actions' | 's3';
+export const supportedRemoteCacheProviders = ['github-actions', 's3'] as const;
+export type SupportedRemoteCacheProviders = typeof supportedRemoteCacheProviders[number];
+
 
 export type RemoteArtifact = {
   name: string;