sprawlify 0.0.90 → 0.0.92

package/dist/index.mjs

@@ -1,13 +1,14 @@
 #!/usr/bin/env node
 import { Command } from "commander";
-import fsExtra from "fs-extra";
 import path, { join } from "path";
-import prompts from "prompts";
-import { z } from "zod";
+import fsExtra from "fs-extra";
 import { cyan, green, red, yellow } from "kleur/colors";
+import { z } from "zod";
 import { existsSync } from "fs";
+import prompts from "prompts";
+import dedent from "dedent";
 //#region package.json
-var version = "0.0.90";
+var version = "0.0.92";
 //#endregion
 //#region src/utils/file-helper.ts
 const FILE_BACKUP_SUFFIX = ".bak";
@@ -148,27 +149,6 @@ function clearRegistryContext() {
 	context.headers = {};
 }
 //#endregion
-//#region src/preset/presets.ts
-const PRESETS = {
-	clay: {
-		name: "Clay",
-		frameworks: ["react"]
-	},
-	monochrome: {
-		name: "Monochrome",
-		frameworks: [
-			"react",
-			"solid",
-			"svelte",
-			"vue"
-		]
-	}
-};
-//#endregion
-//#region src/frameworks/index.ts
-const FRAMEWORKS = {};
-const METAFRAMEWORKS = {};
-//#endregion
 //#region src/utils/env-loader.ts
 async function loadEnvFiles(cwd = process.cwd()) {
 	try {
@@ -191,7 +171,46 @@ async function loadEnvFiles(cwd = process.cwd()) {
 	}
 }
 //#endregion
-//#region src/commands/init.ts
+//#region src/frameworks/index.ts
+const FRAMEWORKS = {
+	react: { title: "React" },
+	solid: { title: "Solid" },
+	svelte: { title: "Svelte" },
+	vue: { title: "Vue" }
+};
+const METAFRAMEWORKS = {
+	next: {
+		title: "Next.js",
+		frameworks: ["react"]
+	},
+	nuxt: {
+		title: "Nuxt",
+		frameworks: ["vue"]
+	},
+	sveltekit: {
+		title: "SvelteKit",
+		frameworks: ["svelte"]
+	}
+};
+//#endregion
+//#region src/preset/presets.ts
+const PRESETS = {
+	clay: {
+		name: "Clay",
+		frameworks: ["react"]
+	},
+	monochrome: {
+		name: "Monochrome",
+		frameworks: [
+			"react",
+			"solid",
+			"svelte",
+			"vue"
+		]
+	}
+};
+//#endregion
+//#region src/commands/init/options.ts
 const initOptionsSchema = z.object({
 	cwd: z.string(),
 	name: z.string().optional(),
@@ -199,102 +218,200 @@ const initOptionsSchema = z.object({
 	components: z.array(z.string()).optional(),
 	yes: z.boolean(),
 	defaults: z.boolean(),
-	force: z.boolean(),
+	override: z.boolean(),
 	reinstall: z.boolean().optional(),
 	framework: z.string().optional(),
 	metaframework: z.string().optional()
 });
-async function runInit(options) {
-	const cwd = options.cwd;
-	const componentsJsonPath = path.resolve(cwd, "components.json");
-	logger.info("Starting project initialization...");
-	if (!options.defaults && !options.skipPreflight) {
-		if (!options.framework) {
-			const { framework } = await prompts({
-				type: "select",
-				name: "framework",
-				message: "Which framework would you like to use?",
-				choices: [
-					{
-						title: "React",
-						value: "react"
-					},
-					{
-						title: "Solid",
-						value: "solid"
-					},
-					{
-						title: "Svelte",
-						value: "svelte"
-					},
-					{
-						title: "Vue",
-						value: "vue"
-					}
-				],
-				initial: 0
-			});
-			if (!framework) {
-				logger.error("Framework selection is required.");
-				process.exit(1);
-			}
-			options.framework = framework;
+function parseInitOptions(opts) {
+	const parsed = opts;
+	return initOptionsSchema.parse({
+		...parsed,
+		reinstall: parsed.reinstall,
+		cwd: path.resolve(String(parsed.cwd ?? process.cwd()))
+	});
+}
+function applyDefaultInitOptions(options) {
+	if (!options.defaults) return;
+	options.preset = options.preset || "monochrome";
+	options.framework = options.framework || "react";
+	options.reinstall = options.reinstall ?? false;
+}
+function validateExplicitOptions(options) {
+	if (options.preset && !(options.preset in PRESETS)) exitForInvalidOption("preset", options.preset, Object.keys(PRESETS));
+	if (options.framework && !(options.framework in FRAMEWORKS)) exitForInvalidOption("framework", options.framework, Object.keys(FRAMEWORKS));
+	if (options.metaframework && !(options.metaframework in METAFRAMEWORKS)) exitForInvalidOption("metaframework", options.metaframework, Object.keys(METAFRAMEWORKS));
+}
+function exitForInvalidOption(optionName, receivedValue, allowedValues) {
+	logger.error(`Invalid ${optionName}: ${highlighter.info(receivedValue)}. Available ${optionName}s: ${allowedValues.map((value) => highlighter.info(value)).join(", ")}.`);
+	logger.break();
+	process.exit(1);
+}
+//#endregion
+//#region src/commands/init/prompts.ts
+async function promptForMissingSelections(options) {
+	if (!options.name) {
+		const { name } = await prompts({
+			type: "text",
+			name: "name",
+			message: "What is your project name?",
+			initial: "my-project",
+			validate: (value) => value.trim().length > 0 || "Project name is required."
+		});
+		if (!name) {
+			logger.error("Project name is required.");
+			process.exit(1);
 		}
-		if (!options.preset) {
-			const { preset } = await prompts({
-				type: "select",
-				name: "preset",
-				message: "Which preset would you like to use?",
-				choices: Object.entries(PRESETS).map(([key, preset]) => ({
-					title: preset.name,
-					value: key,
-					disabled: !preset.frameworks.includes(options.framework)
-				})),
-				initial: 0
-			});
-			if (!preset) {
-				logger.error("Preset selection is required.");
-				process.exit(1);
-			}
-			options.preset = preset;
+		options.name = name;
+	}
+	if (!options.framework) {
+		const { framework } = await prompts({
+			type: "select",
+			name: "framework",
+			message: "Which framework would you like to use?",
+			choices: Object.keys(FRAMEWORKS).map((frameworkKey) => ({
+				title: FRAMEWORKS[frameworkKey].title,
+				value: frameworkKey
+			})),
+			initial: 0
+		});
+		if (!framework) {
+			logger.error("Framework selection is required.");
+			process.exit(1);
 		}
-		if (!options.metaframework) {
-			const { metaframework } = await prompts({
-				type: "select",
-				name: "metaframework",
-				message: "Which metaframework would you like to use (optional)?",
-				choices: [
-					{
-						title: "None",
-						value: "none"
-					},
-					{
-						title: "Next.js",
-						value: "next"
-					},
-					{
-						title: "Vite",
-						value: "vite"
-					},
-					{
-						title: "Nuxt",
-						value: "nuxt"
-					},
-					{
-						title: "SvelteKit",
-						value: "sveltekit"
-					}
-				],
-				initial: 0
-			});
-			options.metaframework = metaframework === "none" ? void 0 : metaframework;
+		options.framework = framework;
+	}
+	if (!options.preset) {
+		const { preset } = await prompts({
+			type: "select",
+			name: "preset",
+			message: "Which preset would you like to use?",
+			choices: Object.entries(PRESETS).map(([key, preset]) => ({
+				title: preset.name,
+				value: key,
+				disabled: !preset.frameworks.includes(options.framework)
+			})),
+			initial: 0
+		});
+		if (!preset) {
+			logger.error("Preset selection is required.");
+			process.exit(1);
+		}
+		options.preset = preset;
+	}
+	if (!options.metaframework) {
+		const { metaframework } = await prompts({
+			type: "select",
+			name: "metaframework",
+			message: "Which metaframework would you like to use (optional)?",
+			choices: [{
+				title: "None",
+				value: "none"
+			}, ...Object.entries(METAFRAMEWORKS).filter(([_, meta]) => meta.frameworks.includes(options.framework)).map(([key, meta]) => ({
+				title: meta.title,
+				value: key
+			}))],
+			initial: 0
+		});
+		options.metaframework = metaframework === "none" ? void 0 : metaframework;
+	}
+}
+async function ensureOverwriteAllowed(options) {
+	if (!fsExtra.existsSync(path.resolve(options.cwd, "components.json")) || options.override) return;
+	const { overwrite } = await prompts({
+		type: "confirm",
+		name: "overwrite",
+		message: `A ${highlighter.info("components.json")} file already exists. Would you like to overwrite it?`,
+		initial: false
+	});
+	if (!overwrite) {
+		logger.info(`  To start over, remove the ${highlighter.info("components.json")} file and run ${highlighter.info("init")} again.`);
+		logger.break();
+		process.exit(1);
+	}
+	options.override = true;
+}
+//#endregion
+//#region src/templates/create-template.ts
+function createTemplate(config) {
+	return {
+		...config,
+		frameworks: config.frameworks || []
+	};
+}
+//#endregion
+//#region src/templates/index.ts
+const templates = {
+	react: createTemplate({ files: [{
+		path: "tsconfig.app.json",
+		content: dedent`{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
+`
+	}, {
+		path: "tsconfig.json",
+		content: dedent`{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}`
+	}] }),
+	solid: createTemplate({}),
+	svelte: createTemplate({}),
+	vue: createTemplate({})
+};
+//#endregion
+//#region src/commands/init/run-init.ts
+async function runInit(options) {
+	let cwd = options.cwd;
+	if (options.name && options.name !== ".") {
+		cwd = path.resolve(options.cwd, options.name);
+		await fsExtra.ensureDir(cwd);
+		options.cwd = cwd;
+		logger.info(`Using project directory: ${highlighter.info(options.name)}`);
+	}
+	const selectedTemplate = options.framework && options.framework in templates ? templates[options.framework] : void 0;
+	if (selectedTemplate?.files.length) for (const file of selectedTemplate.files) {
+		const targetPath = path.resolve(cwd, file.path);
+		if (fsExtra.existsSync(targetPath) && !options.override) {
+			logger.warn(`Skipping ${highlighter.info(file.path)} because it already exists. Use ${highlighter.info("--override")} to replace it.`);
+			continue;
 		}
+		await fsExtra.ensureDir(path.dirname(targetPath));
+		await fsExtra.writeFile(targetPath, file.content, "utf8");
+		logger.success(`Created ${highlighter.info(file.path)} template file.`);
 	}
-	if (options.framework) options.framework;
+	const componentsJsonPath = path.resolve(cwd, "components.json");
+	logger.info("Starting project initialization...");
 	const config = {
 		$schema: "https://ui.primitives.com/schema.json",
-		framework: options.framework || "react",
-		preset: options.preset || "monochrome",
+		framework: options.framework,
+		preset: options.preset,
 		metaframework: options.metaframework,
 		aliases: {
 			components: "@/components",
@@ -322,63 +439,23 @@ async function runInit(options) {
 		throw error;
 	}
 }
-const init = new Command().name("init").alias("create").description("initialize your project and install dependencies").argument("[components...]", "names, url or local path to component").option("-p, --preset <preset>", "the preset to use. (monochrome, clay)").option("-f, --framework <framework>", "the framework to use. (react, solid, svelte, vue)").option("--metaframework <metaframework>", "the metaframework to use. (next, react-router, nuxt, sveltekit)").option("-y, --yes", "skip confirmation prompt.", true).option("-d, --defaults", "use default configuration: --preset=monochrome --framework=react --metaframework=vanilla", false).option("-f, --force", "force overwrite of existing configuration.", false).option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.", process.cwd()).option("-n, --name <name>", "the name for the new project.").option("-s, --silent", "mute output.", false).option("--reinstall", "re-install existing UI components.").option("--no-reinstall", "do not re-install existing UI components.").action(async (components, opts) => {
-	let reinstallComponents = [];
-	const restoreBackupOnExit = () => {};
-	process.on("exit", restoreBackupOnExit);
+//#endregion
+//#region src/commands/init.ts
+const init = new Command().name("init").alias("create").description("initialize your project and install dependencies").argument("[components...]", "names, url or local path to component").option("-p, --preset <preset>", "the preset to use. (monochrome, clay)").option("-f, --framework <framework>", "the framework to use. (react, solid, svelte, vue)").option("--metaframework <metaframework>", "the metaframework to use. (next, react-router, nuxt, sveltekit)").option("-y, --yes", "skip confirmation prompt.", true).option("-d, --defaults", "use default configuration: --preset=monochrome --framework=react --metaframework=vanilla", false).option("-o, --override", "override existing configuration.", false).option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.", process.cwd()).option("-n, --name <name>", "the name for the new project.").option("-s, --silent", "mute output.", false).option("--reinstall", "re-install existing UI components.").option("--no-reinstall", "do not re-install existing UI components.").action(async (components, opts) => {
 	try {
-		const options = initOptionsSchema.parse({
-			...opts,
-			reinstall: opts.reinstall,
-			cwd: path.resolve(opts.cwd)
-		});
-		if (options.defaults) {
-			options.preset = options.preset || "monochrome";
-			options.framework = options.framework || "react";
-			options.reinstall = options.reinstall ?? false;
-		}
-		if (options.preset && !(options.preset in PRESETS)) {
-			logger.error(`Invalid preset: ${highlighter.info(options.preset)}. Available presets: ${Object.keys(PRESETS).map((f) => highlighter.info(f)).join(", ")}.`);
-			logger.break();
-			process.exit(1);
-		}
-		if (options.framework && !(options.framework in FRAMEWORKS)) {
-			logger.error(`Invalid framework: ${highlighter.info(options.framework)}. Available frameworks: ${Object.keys(FRAMEWORKS).map((f) => highlighter.info(f)).join(", ")}.`);
-			logger.break();
-			process.exit(1);
-		}
-		if (options.metaframework && !(options.metaframework in METAFRAMEWORKS)) {
-			logger.error(`Invalid metaframework: ${highlighter.info(options.metaframework)}. Available metaframeworks: ${Object.keys(METAFRAMEWORKS).map((f) => highlighter.info(f)).join(", ")}.`);
-			logger.break();
-			process.exit(1);
-		}
-		const cwd = options.cwd;
-		if (fsExtra.existsSync(path.resolve(cwd, "components.json")) && !options.force) {
-			const { overwrite } = await prompts({
-				type: "confirm",
-				name: "overwrite",
-				message: `A ${highlighter.info("components.json")} file already exists. Would you like to overwrite it?`,
-				initial: false
-			});
-			if (!overwrite) {
-				logger.info(`  To start over, remove the ${highlighter.info("components.json")} file and run ${highlighter.info("init")} again.`);
-				logger.break();
-				process.exit(1);
-			}
-			options.force = true;
-		}
-		if (reinstallComponents.length) components = [...components, ...reinstallComponents];
+		const options = parseInitOptions(opts);
+		applyDefaultInitOptions(options);
+		validateExplicitOptions(options);
+		await promptForMissingSelections(options);
+		await ensureOverwriteAllowed(options);
 		options.components = components;
 		await loadEnvFiles(options.cwd);
 		await runInit(options);
 		logger.break();
-		logger.log(`Project initialization completed.\nYou may now add components.`);
-		process.removeListener("exit", restoreBackupOnExit);
-		deleteFileBackup(path.resolve(cwd, "components.json"));
+		logger.log(`Project initialization completed in ${highlighter.info(options.cwd)}.\nYou may now add components.`);
+		deleteFileBackup(path.resolve(options.cwd, "components.json"));
 		logger.break();
 	} catch (error) {
-		process.removeListener("exit", restoreBackupOnExit);
-		restoreBackupOnExit();
 		logger.break();
 		handleError(error);
 	} finally {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprawlify",
-  "version": "0.0.90",
+  "version": "0.0.92",
   "type": "module",
   "description": "A command-line interface for Sprawlify.",
   "author": "sprawlify <npm@sprawlify.com>",
@@ -19,6 +19,7 @@
   "dependencies": {
     "@dotenvx/dotenvx": "^1.55.1",
     "commander": "^14.0.3",
+    "dedent": "^1.7.2",
     "fs-extra": "^11.3.4",
     "kleur": "^4.1.5",
     "prompts": "^2.4.2",