feat: support for solid/solidjs templates and migrations for 8.7 (#5796)

Co-authored-by: Igor Randjelovic <[email protected]>

Author: NathanWalker

lib/commands/create-project.ts

@@ -49,12 +49,13 @@ export class CreateProjectCommand implements ICommand {
 				this.$options.ng ||
 				this.$options.vue ||
 				this.$options.react ||
+				this.$options.solid ||
 				this.$options.svelte ||
 				this.$options.js) &&
 			this.$options.template
 		) {
 			this.$errors.failWithHelp(
-				"You cannot use a flavor option like --ng, --vue, --react, --svelte, --tsc and --js together with --template."
+				"You cannot use a flavor option like --ng, --vue, --react, --solid, --svelte, --tsc and --js together with --template."
 			);
 		}
 
@@ -70,8 +71,10 @@ export class CreateProjectCommand implements ICommand {
 			(this.$options.vision && this.$options.react)
 		) {
 			selectedTemplate = constants.RESERVED_TEMPLATE_NAMES["vision-react"];
-		} else if (this.$options["vision-solid"]) {
-			// note: we don't have solid templates or --solid
+		} else if (
+			this.$options["vision-solid"] ||
+			(this.$options.vision && this.$options.solid)
+		) {
 			selectedTemplate = constants.RESERVED_TEMPLATE_NAMES["vision-solid"];
 		} else if (
 			this.$options["vision-svelte"] ||
@@ -98,6 +101,8 @@ export class CreateProjectCommand implements ICommand {
 			selectedTemplate = constants.ANGULAR_NAME;
 		} else if (this.$options.vue || this.$options.vuejs) {
 			selectedTemplate = constants.VUE_NAME;
+		} else if (this.$options.solid) {
+			selectedTemplate = constants.SOLID_NAME;
 		} else if (this.$options.react) {
 			selectedTemplate = constants.REACT_NAME;
 		} else if (this.$options.svelte) {
@@ -170,6 +175,10 @@ export class CreateProjectCommand implements ICommand {
 					key: constants.VueFlavorName,
 					description: "Learn more at https://nativescript.org/vue",
 				},
+				{
+					key: constants.SolidFlavorName,
+					description: "Learn more at https://www.solidjs.com",
+				},
 				{
 					key: constants.SvelteFlavorName,
 					description: "Learn more at https://svelte-native.technology",
@@ -222,6 +231,10 @@ can skip this prompt next time using the --template option, or the --ng, --react
 				selectedFlavorTemplates.push(...this.getVueTemplates());
 				break;
 			}
+			case constants.SolidFlavorName: {
+				selectedFlavorTemplates.push(...this.getSolidTemplates());
+				break;
+			}
 			case constants.SvelteFlavorName: {
 				selectedFlavorTemplates.push(...this.getSvelteTemplates());
 				break;
@@ -346,6 +359,23 @@ can skip this prompt next time using the --template option, or the --ng, --react
 		return templates;
 	}
 
+	private getSolidTemplates() {
+		const templates = [
+			{
+				key: CreateProjectCommand.HelloWorldTemplateKey,
+				value: constants.RESERVED_TEMPLATE_NAMES.solid,
+				description: CreateProjectCommand.HelloWorldTemplateDescription,
+			},
+			{
+				key: CreateProjectCommand.BlankVisionTemplateKey,
+				value: "@nativescript/template-blank-solid-vision",
+				description: CreateProjectCommand.BlankVisionTemplateDescription,
+			},
+		];
+
+		return templates;
+	}
+
 	private getSvelteTemplates() {
 		const templates = [
 			{

lib/constants.ts

@@ -144,6 +144,8 @@ export const RESERVED_TEMPLATE_NAMES: IStringDictionary = {
 	angular: "@nativescript/template-hello-world-ng",
 	react: "@nativescript/template-blank-react",
 	reactjs: "@nativescript/template-blank-react",
+	solid: "@nativescript/template-blank-solid",
+	solidjs: "@nativescript/template-blank-solid",
 	svelte: "@nativescript/template-blank-svelte",
 	// vision templates
 	vision: "@nativescript/template-hello-world-ts-vision",
@@ -184,10 +186,12 @@ export const ANGULAR_NAME = "angular";
 export const JAVASCRIPT_NAME = "javascript";
 export const TYPESCRIPT_NAME = "typescript";
 export const REACT_NAME = "react";
+export const SOLID_NAME = "solid";
 export const SVELTE_NAME = "svelte";
 export const NgFlavorName = "Angular";
 export const VueFlavorName = "Vue.js";
 export const ReactFlavorName = "React";
+export const SolidFlavorName = "Solid";
 export const SvelteFlavorName = "Svelte";
 export const TsFlavorName = "Plain TypeScript";
 export const JsFlavorName = "Plain JavaScript";
@@ -197,6 +201,7 @@ export class ProjectTypes {
 	public static TsFlavorName = "Pure TypeScript";
 	public static JsFlavorName = "Pure JavaScript";
 	public static ReactFlavorName = "React";
+	public static SolidFlavorName = "Solid";
 	public static SvelteFlavorName = "Svelte";
 }
 export const BUILD_OUTPUT_EVENT_NAME = "buildOutput";

lib/controllers/migrate-controller.ts

@@ -121,7 +121,7 @@ export class MigrateController
 		{
 			packageName: "@nativescript/core",
 			minVersion: "6.5.0",
-			desiredVersion: "~8.5.0",
+			desiredVersion: "~8.7.0",
 			shouldAddIfMissing: true,
 		},
 		{
@@ -131,7 +131,7 @@ export class MigrateController
 		{
 			packageName: "@nativescript/types",
 			minVersion: "7.0.0",
-			desiredVersion: "~8.5.0",
+			desiredVersion: "~8.7.0",
 			isDev: true,
 		},
 		{
@@ -190,7 +190,7 @@ export class MigrateController
 		{
 			packageName: "@nativescript/angular",
 			minVersion: "10.0.0",
-			desiredVersion: "^16.0.0",
+			desiredVersion: "^17.0.0",
 			async shouldMigrateAction(
 				dependency: IMigrationDependency,
 				projectData: IProjectData,
@@ -262,7 +262,7 @@ export class MigrateController
 			packageName: "typescript",
 			isDev: true,
 			minVersion: "3.7.0",
-			desiredVersion: "~4.8.4",
+			desiredVersion: "~5.4.0",
 		},
 		{
 			packageName: "node-sass",
@@ -274,7 +274,7 @@ export class MigrateController
 		{
 			packageName: "sass",
 			minVersion: "0.0.0", // ignore
-			desiredVersion: "~1.49.9",
+			desiredVersion: "^1.49.9",
 			isDev: true,
 			// shouldRemove: true,
 		},
@@ -295,13 +295,13 @@ export class MigrateController
 		{
 			packageName: "@nativescript/ios",
 			minVersion: "6.5.3",
-			desiredVersion: "~8.5.0",
+			desiredVersion: "~8.7.0",
 			isDev: true,
 		},
 		{
 			packageName: "@nativescript/android",
 			minVersion: "7.0.0",
-			desiredVersion: "~8.5.0",
+			desiredVersion: "~8.7.0",
 			isDev: true,
 		},
 	];
@@ -1235,14 +1235,14 @@ export class MigrateController
 
 			// update
 			configContents.compilerOptions = configContents.compilerOptions || {};
-			configContents.compilerOptions.target = "es2017";
+			configContents.compilerOptions.target = "es2020";
 			configContents.compilerOptions.module = "esnext";
 			configContents.compilerOptions.moduleResolution = "node";
 			configContents.compilerOptions.experimentalDecorators = true;
 			configContents.compilerOptions.removeComments = false;
 
 			configContents.compilerOptions.lib = [
-				...new Set([...(configContents.compilerOptions.lib || []), "es2017"]),
+				...new Set([...(configContents.compilerOptions.lib || []), "ESNext"]),
 			];
 
 			if (isAngular) {
@@ -1310,7 +1310,7 @@ export class MigrateController
 
 	private async migrateNativeScriptAngular(): Promise<IMigrationDependency[]> {
 		const minVersion = "10.0.0";
-		const desiredVersion = "~16.2.0";
+		const desiredVersion = "~17.3.0";
 
 		const dependencies: IMigrationDependency[] = [
 			{

lib/declarations.d.ts

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

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: "Solid",
+		description: "Learn more at https://www.solidjs.com",
+	},
 	{
 		key: "Svelte",
 		description: "Learn more at https://svelte-native.technology",
@@ -111,6 +115,10 @@ const expectedTemplateChoices: Record<string, any[]> = {
 		templateChoices.helloWorld,
 		templateChoices.vision,
 	],
+	// [constants.SolidFlavorName]: [
+	// 	templateChoices.helloWorld,
+	// 	templateChoices.vision,
+	// ],
 };
 
 class ProjectServiceMock implements IProjectService {