feat: select template language (#64)

Author: peterpeterparker

src/constants/templates.ts

@@ -7,98 +7,160 @@ const APP_DESCRIPTION_EXAMPLE =
 export const TEMPLATES: Template[] = [
   {
     framework: `Astro`,
-    key: `astro-starter`,
+    keys: [
+      {
+        key: 'astro-starter',
+        language: 'TypeScript'
+      }
+    ],
     type: 'Starter',
     description: 'Barebones scaffolding for your new website',
     kind: 'website'
   },
   {
     framework: `Next.js`,
-    key: `nextjs-starter`,
+    keys: [
+      {
+        key: 'nextjs-starter',
+        language: 'TypeScript'
+      }
+    ],
     type: 'Starter',
     description: APP_DESCRIPTION_STARTER,
     kind: 'app'
   },
   {
     framework: `Next.js`,
-    key: `nextjs-example`,
+    keys: [
+      {
+        key: 'nextjs-example',
+        language: 'TypeScript'
+      }
+    ],
     type: 'Example',
     description: APP_DESCRIPTION_EXAMPLE,
     kind: 'app'
   },
   {
     framework: `React`,
-    key: `react-starter`,
+    keys: [
+      {
+        key: 'react-starter',
+        language: 'JavaScript'
+      },
+      {
+        key: 'react-ts-starter',
+        language: 'TypeScript'
+      }
+    ],
     type: 'Starter',
     description: APP_DESCRIPTION_STARTER,
     kind: 'app'
   },
   {
     framework: `React`,
-    key: `react-example`,
+    keys: [
+      {
+        key: 'react-example',
+        language: 'JavaScript'
+      }
+    ],
     type: 'Example',
     description: APP_DESCRIPTION_EXAMPLE,
     kind: 'app'
   },
   {
     framework: `React`,
-    key: `react-ts-starter`,
-    type: 'Starter',
-    description: APP_DESCRIPTION_STARTER,
-    kind: 'app'
-  },
-  {
-    framework: `React`,
-    key: `react-workshop`,
+    keys: [
+      {
+        key: 'react-workshop',
+        language: 'JavaScript'
+      }
+    ],
     type: 'Workshop',
     description: 'Explore Juno in an interactive workshop',
     kind: 'app'
   },
   {
     framework: `SvelteKit`,
-    key: `sveltekit-starter`,
+    keys: [
+      {
+        key: 'sveltekit-starter',
+        language: 'TypeScript'
+      }
+    ],
     type: 'Starter',
     description: APP_DESCRIPTION_STARTER,
     kind: 'app'
   },
   {
     framework: `SvelteKit`,
-    key: `sveltekit-example`,
+    keys: [
+      {
+        key: 'sveltekit-example',
+        language: 'TypeScript'
+      }
+    ],
     type: 'Example',
     description: APP_DESCRIPTION_EXAMPLE,
     kind: 'app'
   },
   {
     framework: `Vue`,
-    key: `vue-starter`,
+    keys: [
+      {
+        key: 'vue-starter',
+        language: 'TypeScript'
+      }
+    ],
     type: 'Starter',
     description: APP_DESCRIPTION_STARTER,
     kind: 'app'
   },
   {
     framework: `Vue`,
-    key: `vue-example`,
+    keys: [
+      {
+        key: 'vue-example',
+        language: 'TypeScript'
+      }
+    ],
     type: 'Example',
     description: APP_DESCRIPTION_EXAMPLE,
     kind: 'app'
   },
   {
     framework: `Angular`,
-    key: `angular-starter`,
+    keys: [
+      {
+        key: 'angular-starter',
+        language: 'TypeScript'
+      }
+    ],
     type: 'Starter',
     description: APP_DESCRIPTION_STARTER,
     kind: 'app'
   },
   {
     framework: `Angular`,
-    key: `angular-example`,
+    keys: [
+      {
+        key: 'angular-example',
+        language: 'TypeScript'
+      }
+    ],
     type: 'Example',
     description: APP_DESCRIPTION_EXAMPLE,
     kind: 'app'
   },
   {
     framework: `Vanilla JavaScript`,
-    key: `vanilla-js-example`,
+    keys: [
+      {
+        key: 'vanilla-js-example',
+        language: 'JavaScript'
+      }
+    ],
     type: 'Example',
     description: APP_DESCRIPTION_EXAMPLE,
     kind: 'app'

src/services/generate.services.ts

@@ -152,16 +152,21 @@ const removeLocalConfig = async ({where, template}: PopulateInputFn) => {
     return;
   }
 
+  // TODO: this is verbose and difficult to maintain. We should probably introduce those options in some ways in the templates' definition.
   const config = join(
     process.cwd(),
     where ?? '',
     template.framework === 'Astro'
       ? 'astro.config.mjs'
       : template.framework === 'Next.js'
         ? 'next.config.mjs'
-        : ['React', 'Vanilla JavaScript'].includes(template.framework)
-          ? 'vite.config.js'
-          : 'vite.config.ts'
+        : template.framework === 'React'
+          ? template.language === 'TypeScript'
+            ? 'vite.config.ts'
+            : 'vite.config.js'
+          : template.framework === 'Vanilla JavaScript'
+            ? 'vite.config.js'
+            : 'vite.config.ts'
   );
 
   const data = await readFile(config, 'utf8');

src/services/prompt.services.ts

@@ -2,11 +2,11 @@ import {isNullish} from '@junobuild/utils';
 import {red} from 'kleur';
 import prompts from 'prompts';
 import {TEMPLATES} from '../constants/templates';
-import type {GeneratorInput, ProjectKind} from '../types/generator';
-import type {Template, TemplateFramework} from '../types/template';
+import type {GeneratorInput, PopulateTemplate, ProjectKind} from '../types/generator';
+import type {Template, TemplateFramework, TemplateKeyOption} from '../types/template';
 import {assertAnswerCtrlC, confirm} from '../utils/prompts.utils';
 
-export const promptTemplate = async (projectKind: ProjectKind): Promise<Template> => {
+export const promptTemplate = async (projectKind: ProjectKind): Promise<PopulateTemplate> => {
   const allTemplates = TEMPLATES.filter(({kind}) => kind === projectKind).reduce<
     Partial<Record<TemplateFramework, Template[]>>
   >((acc, {framework, ...rest}) => {
@@ -42,7 +42,7 @@ export const promptTemplate = async (projectKind: ProjectKind): Promise<Template
   }
 
   if (templates.length === 1) {
-    return templates[0];
+    return await promptLanguage(templates[0]);
   }
 
   const {template}: {template: Template | undefined} = await prompts({
@@ -60,7 +60,39 @@ export const promptTemplate = async (projectKind: ProjectKind): Promise<Template
     process.exit(0);
   }
 
-  return template;
+  return await promptLanguage(template);
+};
+
+export const promptLanguage = async ({
+  keys,
+  ...templateRest
+}: Template): Promise<PopulateTemplate> => {
+  // If the template is provided with a sole language, we can auto select it.
+  if (keys.length === 1) {
+    return {
+      ...templateRest,
+      ...keys[0]
+    };
+  }
+
+  const {key}: {key: TemplateKeyOption | undefined} = await prompts({
+    type: 'select',
+    name: 'key',
+    message: 'Which language do you prefer?',
+    choices: keys.map((key) => ({
+      title: key.language,
+      value: key
+    }))
+  });
+
+  if (isNullish(key)) {
+    process.exit(0);
+  }
+
+  return {
+    ...templateRest,
+    ...key
+  };
 };
 
 export const promptDestination = async (): Promise<Pick<GeneratorInput, 'destination'>> => {

src/services/template.services.ts

@@ -1,20 +1,38 @@
 import {nextArg} from '@junobuild/cli-tools';
 import {isNullish} from '@junobuild/utils';
 import {TEMPLATES} from '../constants/templates';
-import type {Template} from '../types/template';
+import type {PopulateTemplate} from '../types/generator';
 import {promptProjectKind, promptTemplate} from './prompt.services';
 
-export const argsTemplate = (args: string[]): Template | undefined => {
+export const argsTemplate = (args: string[]): PopulateTemplate | undefined => {
   const template = nextArg({args, option: '--template'});
 
   if (isNullish(template)) {
     return undefined;
   }
 
-  return TEMPLATES.find(({key}) => key === template);
+  const matchingTemplate = TEMPLATES.find(
+    ({keys}) => keys.find(({key}) => key === template) !== undefined
+  );
+
+  if (isNullish(matchingTemplate)) {
+    return undefined;
+  }
+
+  const {keys, ...restTemplate} = matchingTemplate;
+  const matchingKey = keys.find(({key}) => key === template);
+
+  if (isNullish(matchingKey)) {
+    return undefined;
+  }
+
+  return {
+    ...restTemplate,
+    ...matchingKey
+  };
 };
 
-export const initTemplate = async (): Promise<Template> => {
+export const initTemplate = async (): Promise<PopulateTemplate> => {
   const projectKind = await promptProjectKind();
 
   return await promptTemplate(projectKind);

src/types/generator.ts

@@ -1,8 +1,8 @@
-import type {Template} from './template';
+import type {Template, TemplateKeyOption} from './template';
 
 export interface GeneratorInput {
   destination: string | '';
-  template: Template;
+  template: PopulateTemplate;
   gitHubAction: boolean;
   localDevelopment: boolean;
   verbose?: boolean;
@@ -13,3 +13,5 @@ export type ProjectKind = 'website' | 'app';
 export type PopulateInput = {
   where: string | null;
 } & Omit<GeneratorInput, 'destination'>;
+
+export type PopulateTemplate = Omit<Template, 'keys'> & TemplateKeyOption;

src/types/template.ts

@@ -1,7 +1,16 @@
 import type {ProjectKind} from './generator';
 
+export type TemplateKey = string;
+
+export interface TemplateKeyOption {
+  key: TemplateKey;
+  language: TemplateLanguage;
+}
+
+export type TemplateKeys = TemplateKeyOption[];
+
 export interface Template {
-  key: string;
+  keys: TemplateKeys;
   framework: TemplateFramework;
   type: TemplateType;
   description: string;
@@ -18,3 +27,5 @@ export type TemplateFramework =
   | 'Vanilla JavaScript';
 
 export type TemplateType = 'Starter' | 'Example' | 'Workshop';
+
+export type TemplateLanguage = 'JavaScript' | 'TypeScript';

src/utils/fs.utils.ts

@@ -1,16 +1,16 @@
 import {existsSync, mkdirSync} from 'node:fs';
 import {dirname, join} from 'node:path';
 import {fileURLToPath} from 'node:url';
-import type {Template} from '../types/template';
+import type {TemplateKey} from '../types/template';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 const TEMPLATE_PATH = 'templates';
 
-export const getRelativeTemplatePath = ({key}: Pick<Template, 'key'>) => join(TEMPLATE_PATH, key);
+export const getRelativeTemplatePath = ({key}: {key: TemplateKey}) => join(TEMPLATE_PATH, key);
 
-export const getLocalTemplatePath = ({key}: Pick<Template, 'key'>) =>
+export const getLocalTemplatePath = ({key}: {key: TemplateKey}) =>
   join(__dirname, '..', TEMPLATE_PATH, key);
 
 export const createParentFolders = (target: string) => {