Add next.js template to @tma.js/create-mini-app

.changeset/large-emus-sniff.md

@@ -0,0 +1,5 @@
+---
+"@tma.js/create-mini-app": patch
+---
+
+Add next.js TS template

packages/create-mini-app/src/prompts/templatePrompt.ts

@@ -15,7 +15,7 @@ import chalk from 'chalk';
 import figures from 'figures';
 
 import { findTemplate } from '../templates.js';
-import type { AnyTemplate, KnownFramework, KnownLanguage, KnownSDK } from '../types.js';
+import type { AnyTemplate, Framework, Language, SDK } from '../types.js';
 
 interface CreateSection<N, V> {
   title: string;
@@ -24,9 +24,9 @@ interface CreateSection<N, V> {
 }
 
 interface SelectedChoices {
-  framework: KnownFramework;
-  sdk: KnownSDK;
-  language: KnownLanguage;
+  framework: Framework;
+  sdk: SDK;
+  language: Language;
 }
 
 interface Choice<V> {
@@ -36,15 +36,11 @@ interface Choice<V> {
 }
 
 type Section =
-  | CreateSection<'framework', KnownFramework>
-  | CreateSection<'sdk', KnownSDK>
-  | CreateSection<'language', KnownLanguage>;
+  | CreateSection<'framework', Framework>
+  | CreateSection<'sdk', SDK>
+  | CreateSection<'language', Language>;
 
-const {
-  bold,
-  green,
-  blue,
-} = chalk;
+const { bold, green, blue } = chalk;
 
 function joinLines(...arr: (string | string[])[]): string {
   return arr.flat(1).join('\n');
@@ -89,7 +85,7 @@ export const templatePrompt = createPrompt<AnyTemplate, {}>(
     } = useMemo(() => {
       const result = {
         selected: {} as SelectedChoices,
-        choices: [] as Choice<KnownFramework | KnownLanguage | KnownSDK>[],
+        choices: [] as Choice<Framework | Language | SDK>[],
       };
 
       sections.forEach((section) => {
@@ -169,7 +165,8 @@ export const templatePrompt = createPrompt<AnyTemplate, {}>(
       }[template!.framework];
 
       return `${green('✔')} ${style.message(
-        `You have selected template with technologies: ${blue(framework)}, ${blue(lang)} and ${blue(sdk)}`,
+        `You have selected template with technologies: ${blue(framework)}, ${blue(lang)} and ${blue(
+          sdk)}`,
       )}`;
     }
 
@@ -204,7 +201,8 @@ export const templatePrompt = createPrompt<AnyTemplate, {}>(
 
         template
           ? green(
-            `${bold(figures.tick)} A template utilizing these technologies was discovered. Press ${style.key('space')} to proceed.`,
+            `${bold(figures.tick)} A template utilizing these technologies was discovered. Press ${style.key(
+              'space')} to proceed.`,
           )
           : style.error(`${bold(figures.warning)} Currently, no template exists that uses these technologies.`),
       )}${ansiEscapes.cursorHide}`;

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

@@ -1,10 +1,4 @@
-import type {
-  AnyTemplate,
-  KnownFramework,
-  KnownLanguage,
-  KnownSDK,
-  TemplateRepository,
-} from './types.js';
+import type { AnyTemplate, Framework, Language, SDK, TemplateRepository } from './types.js';
 
 function createRepository(name: string): TemplateRepository {
   return {
@@ -16,30 +10,43 @@ function createRepository(name: string): TemplateRepository {
   };
 }
 
+const settings = {
+  js: {
+    'tma.js': {
+      'react.js': 'reactjs-js-template',
+      'solid.js': 'solidjs-js-template',
+    },
+  },
+  ts: {
+    'tma.js': {
+      'react.js': 'reactjs-template',
+      'solid.js': 'solidjs-template',
+      'next.js': 'nextjs-template',
+    },
+  },
+} as const;
+
 /**
- * List of templates known to the CLI.
+ * A list of the templates known to the CLI.
  */
-export const templates: AnyTemplate[] = [{
-  language: 'ts',
-  sdk: 'tma.js',
-  framework: 'react.js',
-  repository: createRepository('reactjs-template'),
-}, {
-  language: 'js',
-  sdk: 'tma.js',
-  framework: 'react.js',
-  repository: createRepository('reactjs-js-template'),
-}, {
-  language: 'ts',
-  sdk: 'tma.js',
-  framework: 'solid.js',
-  repository: createRepository('solidjs-template'),
-}, {
-  language: 'js',
-  sdk: 'tma.js',
-  framework: 'solid.js',
-  repository: createRepository('solidjs-js-template'),
-}];
+const templates: AnyTemplate[] = [];
+
+for (const language in settings) {
+  const languageSettings = settings[language as keyof typeof settings];
+
+  for (const sdk in languageSettings) {
+    const frameworkSettings = languageSettings[sdk as keyof typeof languageSettings];
+
+    for (const framework in frameworkSettings) {
+      templates.push({
+        framework: framework as Framework,
+        sdk: sdk as SDK,
+        language: language as Language,
+        repository: createRepository(frameworkSettings[framework as keyof typeof frameworkSettings]),
+      });
+    }
+  }
+}
 
 /**
  * Leaves only templates with specified technologies.
@@ -48,11 +55,13 @@ export const templates: AnyTemplate[] = [{
  * @param framework
  */
 export function findTemplate(
-  language: KnownLanguage,
-  sdk: KnownSDK,
-  framework: KnownFramework,
+  language: Language,
+  sdk: SDK,
+  framework: Framework,
 ): AnyTemplate | undefined {
-  return templates.find((t) => {
-    return t.sdk === sdk && t.language === language && t.framework === framework;
-  });
+  return templates.find((t) => (
+    t.sdk === sdk
+    && t.language === language
+    && t.framework === framework
+  ));
 }

packages/create-mini-app/src/types.ts

@@ -1,10 +1,3 @@
-interface CreateTemplate<Language extends string, Framework extends string> {
-  sdk: 'telegram' | 'tma.js';
-  language: Language;
-  framework: Framework;
-  repository: TemplateRepository;
-}
-
 export interface TemplateRepository {
   clone: {
     https: string;
@@ -13,10 +6,13 @@ export interface TemplateRepository {
   link: string;
 }
 
-type JsTemplate = CreateTemplate<'js', 'solid.js' | 'react.js' | 'next.js'>;
-type TsTemplate = CreateTemplate<'ts', 'solid.js' | 'react.js' | 'next.js'>;
-export type AnyTemplate = JsTemplate | TsTemplate;
+export interface AnyTemplate {
+  sdk: SDK;
+  language: Language;
+  framework: Framework;
+  repository: TemplateRepository;
+}
 
-export type KnownLanguage = AnyTemplate['language'];
-export type KnownSDK = AnyTemplate['sdk'];
-export type KnownFramework = AnyTemplate['framework'];
+export type Language = 'js' | 'ts';
+export type SDK = 'telegram' | 'tma.js';
+export type Framework = 'solid.js' | 'react.js' | 'next.js';