feat: add svelte support (#5418)

Author: janoshrubos

lib/commands/create-project.ts

@@ -44,11 +44,12 @@ export class CreateProjectCommand implements ICommand {
 				this.$options.ng ||
 				this.$options.vue ||
 				this.$options.react ||
+				this.$options.svelte ||
 				this.$options.js) &&
 			this.$options.template
 		) {
 			this.$errors.failWithHelp(
-				"You cannot use a flavor option like --ng, --vue, --react, --tsc and --js together with --template."
+				"You cannot use a flavor option like --ng, --vue, --react, --svelte, --tsc and --js together with --template."
 			);
 		}
 
@@ -64,6 +65,8 @@ export class CreateProjectCommand implements ICommand {
 			selectedTemplate = constants.VUE_NAME;
 		} else if (this.$options.react) {
 			selectedTemplate = constants.REACT_NAME;
+		} else if (this.$options.svelte) {
+			selectedTemplate = constants.SVELTE_NAME;
 		} else {
 			selectedTemplate = this.$options.template;
 		}
@@ -132,6 +135,10 @@ export class CreateProjectCommand implements ICommand {
 					key: constants.VueFlavorName,
 					description: "Learn more at https://nativescript.org/vue",
 				},
+				{
+					key: constants.SvelteFlavorName,
+					description: "Learn more at https://svelte-native.technology",
+				},
 				{
 					key: constants.TsFlavorName,
 					description: "Learn more at https://nativescript.org/typescript",
@@ -152,7 +159,7 @@ export class CreateProjectCommand implements ICommand {
 			this.$logger.printMarkdown(`# Let’s create a NativeScript app!`);
 			this.$logger.printMarkdown(`
 Answer the following questions to help us build the right app for you. (Note: you
-can skip this prompt next time using the --template option, or the --ng, --react, --vue, --ts, or --js flags.)
+can skip this prompt next time using the --template option, or the --ng, --react, --vue, --svelte, --ts, or --js flags.)
 `);
 		}
 	}
@@ -180,6 +187,10 @@ can skip this prompt next time using the --template option, or the --ng, --react
 				selectedFlavorTemplates.push(...this.getVueTemplates());
 				break;
 			}
+			case constants.SvelteFlavorName: {
+				selectedFlavorTemplates.push(...this.getSvelteTemplates());
+				break;
+			}
 			case constants.TsFlavorName: {
 				selectedFlavorTemplates.push(...this.getTsTemplates());
 				break;
@@ -285,6 +296,18 @@ can skip this prompt next time using the --template option, or the --ng, --react
 		return templates;
 	}
 
+	private getSvelteTemplates() {
+		const templates = [
+			{
+				key: CreateProjectCommand.HelloWorldTemplateKey,
+				value: constants.RESERVED_TEMPLATE_NAMES.svelte,
+				description: CreateProjectCommand.HelloWorldTemplateDescription,
+			},
+		];
+
+		return templates;
+	}
+
 	private getVueTemplates() {
 		const templates = [
 			{

lib/constants.ts

@@ -138,6 +138,7 @@ export const RESERVED_TEMPLATE_NAMES: IStringDictionary = {
 	angular: "@nativescript/template-hello-world-ng",
 	react: "@nativescript/template-blank-react",
 	reactjs: "@nativescript/template-blank-react",
+	svelte: "@nativescript/template-blank-svelte",
 };
 
 export const ANALYTICS_LOCAL_TEMPLATE_PREFIX = "localTemplate_";
@@ -167,9 +168,11 @@ export const ANGULAR_NAME = "angular";
 export const JAVASCRIPT_NAME = "javascript";
 export const TYPESCRIPT_NAME = "typescript";
 export const REACT_NAME = "react";
+export const SVELTE_NAME = "svelte";
 export const NgFlavorName = "Angular";
 export const VueFlavorName = "Vue.js";
 export const ReactFlavorName = "React";
+export const SvelteFlavorName = "Svelte";
 export const TsFlavorName = "Plain TypeScript";
 export const JsFlavorName = "Plain JavaScript";
 export class ProjectTypes {

lib/declarations.d.ts

@@ -658,6 +658,7 @@ interface IOptions
 	ng: boolean;
 	angular: boolean;
 	react: boolean;
+	svelte: boolean;
 	vue: boolean;
 	vuejs: boolean;
 	js: boolean;

lib/options.ts

@@ -129,6 +129,7 @@ export class Options {
 			reactjs: { type: OptionType.Boolean, hasSensitiveValue: false },
 			vue: { type: OptionType.Boolean, hasSensitiveValue: false },
 			vuejs: { type: OptionType.Boolean, hasSensitiveValue: false },
+			svelte: { type: OptionType.Boolean, hasSensitiveValue: false },
 			tsc: { type: OptionType.Boolean, hasSensitiveValue: false },
 			ts: { type: OptionType.Boolean, hasSensitiveValue: false },
 			typescript: { type: OptionType.Boolean, hasSensitiveValue: false },

test/project-commands.ts

@@ -32,6 +32,10 @@ const expectedFlavorChoices = [
 			"Learn more at https://github.com/shirakaba/react-nativescript",
 	},
 	{ key: "Vue.js", description: "Learn more at https://nativescript.org/vue" },
+	{
+		key: "Svelte",
+		description: "Learn more at https://svelte-native.technology",
+	},
 	{
 		key: "Plain TypeScript",
 		description: "Learn more at https://nativescript.org/typescript",
@@ -188,6 +192,16 @@ describe("Project commands tests", () => {
 			assert.isTrue(createProjectCalledWithForce);
 		});
 
+		it("should not fail when using only --svelte.", async () => {
+			options.svelte = true;
+
+			await createProjectCommand.execute(dummyArgs);
+
+			assert.isTrue(isProjectCreated);
+			assert.equal(validateProjectCallsCount, 1);
+			assert.isTrue(createProjectCalledWithForce);
+		});
+
 		it("should not fail when using only --tsc.", async () => {
 			options.tsc = true;
 
@@ -228,6 +242,16 @@ describe("Project commands tests", () => {
 			assert.isTrue(createProjectCalledWithForce);
 		});
 
+		it("should set the template name correctly when used --svelte.", async () => {
+			options.svelte = true;
+
+			await createProjectCommand.execute(dummyArgs);
+
+			assert.deepStrictEqual(selectedTemplateName, constants.SVELTE_NAME);
+			assert.equal(validateProjectCallsCount, 1);
+			assert.isTrue(createProjectCalledWithForce);
+		});
+
 		it("should set the template name correctly when used --tsc.", async () => {
 			options.tsc = true;
 
@@ -331,5 +355,21 @@ describe("Project commands tests", () => {
 			assert.equal(validateProjectCallsCount, 1);
 			assert.isTrue(createProjectCalledWithForce);
 		});
+
+		it("should ask for a template when svelte flavor is selected.", async () => {
+			setupAnswers({
+				flavorAnswer: constants.SvelteFlavorName,
+				templateAnswer: "Hello World",
+			});
+
+			await createProjectCommand.execute(dummyArgs);
+
+			assert.deepStrictEqual(
+				selectedTemplateName,
+				"@nativescript/template-blank-svelte"
+			);
+			assert.equal(validateProjectCallsCount, 1);
+			assert.isTrue(createProjectCalledWithForce);
+		});
 	});
 });