@slicemachine/init 0.1.1-dev-plugins.3 → 0.1.1-dev-plugins.5

package/src/SliceMachineInitProcess.ts

@@ -19,6 +19,8 @@ import {
 	installDependencies,
 	detectPackageManager,
 	PackageManagerAgent,
+	getRunScriptCommand,
+	getExecuteCommand,
 } from "./lib/packageManager";
 import {
 	getRandomRepositoryDomain,
@@ -30,6 +32,7 @@ import {
 import { listr, listrRun } from "./lib/listr";
 import { prompt } from "./lib/prompt";
 import { assertExists } from "./lib/assertExists";
+import { START_SCRIPT_KEY, START_SCRIPT_VALUE } from "./constants";
 
 export type SliceMachineInitProcessOptions = {
 	repository?: string;
@@ -63,6 +66,9 @@ type SliceMachineInitProcessContext = {
 		domain: string;
 		exists: boolean;
 	};
+	projectInitialization?: {
+		patchedScript?: boolean;
+	};
 };
 
 export class SliceMachineInitProcess {
@@ -122,6 +128,7 @@ export class SliceMachineInitProcess {
 			await this.finishCoreDependenciesInstallation();
 			await this.upsertSliceMachineConfigurationAndStartPluginRunner();
 			await this.pushDataToPrismic();
+			await this.initializeProject();
 			await this.initializePlugins();
 		} catch (error) {
 			await this.trackError(error);
@@ -143,6 +150,40 @@ export class SliceMachineInitProcess {
 				"→",
 			)} Init command successful!`,
 		);
+
+		try {
+			// We prefer to manually allow console logs despite the app being a CLI to catch wild/unwanted console logs better
+			// eslint-disable-next-line no-console
+			console.log(`
+  YOUR REPOSITORY
+    Dashboard            ${chalk.cyan(
+			`https://${this.context.repository.domain}.prismic.io`,
+		)}
+    API                  ${chalk.cyan(
+			`https://${this.context.repository.domain}.cdn.prismic.io/api/v2`,
+		)}
+
+  RESOURCES
+    Documentation        ${chalk.cyan(
+			this.context.framework.prismicDocumentation,
+		)}
+    Getting help         ${chalk.cyan("https://community.prismic.io")}
+
+  GETTING STARTED
+    Start Slice Machine  ${chalk.cyan(
+			this.context.projectInitialization?.patchedScript
+				? await getRunScriptCommand({
+						agent: this.context.packageManager || "npm",
+						script: "slicemachine",
+				  })
+				: await getExecuteCommand({
+						agent: this.context.packageManager || "npm",
+						script: "start-slicemachine",
+				  }),
+		)}`);
+		} catch {
+			// Noop, it's only the final convenience messsage
+		}
 	}
 
 	protected trackError = (error: unknown): Promise<void> => {
@@ -181,7 +222,22 @@ export class SliceMachineInitProcess {
 						{
 							title: "Detecting package manager...",
 							task: async (_, task) => {
-								this.context.packageManager = await detectPackageManager();
+								try {
+									this.context.packageManager = await detectPackageManager(
+										this.options.cwd,
+									);
+								} catch (error) {
+									// Default to NPM
+									if (
+										error instanceof Error &&
+										(error.message.match(/failed to detect/i) ||
+											error.message.match(/command failed/i))
+									) {
+										this.context.packageManager = "npm";
+									} else {
+										throw error;
+									}
+								}
 
 								task.title = `Detected package manager ${chalk.cyan(
 									this.context.packageManager,
@@ -267,10 +323,10 @@ export class SliceMachineInitProcess {
 					if (!isLoggedIn) {
 						parentTask.output = "Press any key to open the browser to login...";
 						await new Promise((resolve) => {
-							const initialRawMode = process.stdin.isRaw;
-							process.stdin.setRawMode(true);
+							const initialRawMode = !!process.stdin.isRaw;
+							process.stdin.setRawMode?.(true);
 							process.stdin.once("data", (data: Buffer) => {
-								process.stdin.setRawMode(initialRawMode);
+								process.stdin.setRawMode?.(initialRawMode);
 								process.stdin.pause();
 								resolve(data.toString("utf-8"));
 							});
@@ -281,9 +337,7 @@ export class SliceMachineInitProcess {
 						await this.manager.user.nodeLoginSession({
 							port,
 							onListenCallback() {
-								open(url).catch((error) => {
-									throw error;
-								});
+								open(url);
 							},
 						});
 					}
@@ -345,8 +399,10 @@ export class SliceMachineInitProcess {
 						"Flag `repository` must be set to run `useRepositoryFlag`",
 					);
 
+					const domain = formatRepositoryDomain(this.options.repository);
+
 					const maybeRepository = this.context.userRepositories.find(
-						(repository) => repository.domain === this.options.repository,
+						(repository) => repository.domain === domain,
 					);
 
 					if (maybeRepository) {
@@ -360,7 +416,6 @@ export class SliceMachineInitProcess {
 							);
 						}
 					} else {
-						const domain = formatRepositoryDomain(this.options.repository);
 						const validation = await validateRepositoryDomainAndAvailability({
 							domain,
 							existsFn: (domain) =>
@@ -377,11 +432,11 @@ export class SliceMachineInitProcess {
 					}
 
 					task.title = `Selected repository ${chalk.cyan(
-						this.options.repository,
+						domain,
 					)} (flag ${chalk.cyan("repository")} used)`;
 
 					this.context.repository = {
-						domain: this.options.repository,
+						domain,
 						exists: !!maybeRepository,
 					};
 				},
@@ -503,15 +558,13 @@ export class SliceMachineInitProcess {
 
 		// 3. Use random name
 		if (!suggestedName) {
-			suggestedName = getRandomRepositoryDomain();
-
-			while (
+			do {
+				suggestedName = getRandomRepositoryDomain();
+			} while (
 				await this.manager.prismicRepository.checkExists({
 					domain: suggestedName,
 				})
-			) {
-				suggestedName = getRandomRepositoryDomain();
-			}
+			);
 		}
 
 		const { domain } = await prompt<string, "domain">({
@@ -525,38 +578,36 @@ export class SliceMachineInitProcess {
 				const domain = formatRepositoryDomain(rawDomain);
 				const validation = validateRepositoryDomain({ domain });
 
+				const minRule = validation.LessThan4
+					? chalk.red(
+							`1. Name must be ${chalk.bold("4 characters long or more")}`,
+					  )
+					: `1. Name must be ${chalk.cyan("4 characters long or more")}`;
+
+				const maxRule = validation.MoreThan30
+					? chalk.red(
+							`1. Name must be ${chalk.bold("30 characters long or less")}`,
+					  )
+					: `1. Name must be ${chalk.cyan("30 characters long or less")}`;
+
 				this.msg = chalk.reset(
 					`
 Choose a name for your Prismic repository
 
   NAMING RULES
-${chalk[validation.LessThan4 ? "red" : "gray"](
-	`    1. Name must be ${chalk[validation.LessThan4 ? "bold" : "cyan"](
-		"4 characters long or more",
-	)}`,
-)}
-${chalk[validation.MoreThan30 ? "red" : "gray"](
-	`    2. Name must be ${chalk[validation.MoreThan30 ? "bold" : "cyan"](
-		"30 characters long or less",
-	)}`,
-)}
-${chalk.gray(`    3. Name will be ${chalk.cyan("kebab-cased")} automatically`)}
+    ${minRule}
+    ${maxRule}
+    3. Name will be ${chalk.cyan("kebab-cased")} automatically
 
   CONSIDERATIONS
-${chalk.gray(
-	`    1. Once picked, your repository name ${chalk.cyan("cannot be changed")}`,
-)}
-${chalk.gray(
-	`    2. A ${chalk.cyan(
-		"display name",
-	)} for the repository can be configured later on`,
-)}
+    1. Once picked, your repository name ${chalk.cyan("cannot be changed")}
+    2. A ${chalk.cyan(
+			"display name",
+		)} for the repository can be configured later on
 
   PREVIEW
-${chalk.gray(`    Dashboard  ${chalk.cyan(`https://${domain}.prismic.io`)}`)}
-${chalk.gray(
-	`    API        ${chalk.cyan(`https://${domain}.cdn.prismic.io/api/v2`)}`,
-)}
+    Dashboard  ${chalk.cyan(`https://${domain}.prismic.io`)}
+    API        ${chalk.cyan(`https://${domain}.cdn.prismic.io/api/v2`)}
 
 ${chalk.cyan("?")} Your Prismic repository name`.replace("\n", ""),
 				);
@@ -581,8 +632,8 @@ ${chalk.cyan("?")} Your Prismic repository name`.replace("\n", ""),
 		});
 
 		// Clear extra lines
-		process.stdout.moveCursor(0, -16);
-		process.stdout.clearScreenDown();
+		process.stdout.moveCursor?.(0, -16);
+		process.stdout.clearScreenDown?.();
 
 		this.context.repository = {
 			domain,
@@ -642,8 +693,11 @@ ${chalk.cyan("?")} Your Prismic repository name`.replace("\n", ""),
 							task.output = data.toString();
 						}
 					};
-					// TODO: Assert types
-					this.context.installProcess.stdout?.on("data", updateOutput);
+
+					// Don't clutter console with logs when process is non TTY (CI, etc.)
+					if (process.stdout.isTTY || process.env.NODE_ENV === "test") {
+						this.context.installProcess.stdout?.on("data", updateOutput);
+					}
 					this.context.installProcess.stderr?.on("data", updateOutput);
 
 					try {
@@ -654,17 +708,14 @@ ${chalk.cyan("?")} Your Prismic repository name`.replace("\n", ""),
 						 * that all install errors, earlier and presents, can be catched.
 						 *
 						 * Here, we force the task to wait so that it is neither marked as
-						 * done or has the opportunity to handle the error itself
+						 * done or has the opportunity to handle the error itself.
 						 */
-						await new Promise(() => {
-							// If for whatever reason the process is not exited by now, we still throw the error
-							setTimeout(() => {
-								throw error;
-							}, 5000);
-						});
+						// If for whatever reason the process is not exited by now, we still throw the error
+						await new Promise((resolve) => setTimeout(resolve, 5000));
+						throw error;
 					}
 
-					task.title = `Core dependencies installed with ${chalk.cyan(
+					task.title = `Installed core dependencies with ${chalk.cyan(
 						this.context.packageManager,
 					)}`;
 				},
@@ -702,6 +753,7 @@ ${chalk.cyan("?")} Your Prismic repository name`.replace("\n", ""),
 							config: {
 								...config,
 								repositoryName: this.context.repository.domain,
+								adapter: this.context.framework.adapterName,
 							},
 						});
 						parentTask.title = "Updated Slice Machine configuration";
@@ -877,7 +929,7 @@ ${chalk.cyan("?")} Your Prismic repository name`.replace("\n", ""),
 								});
 								if (documentsGlob.length === 0) {
 									parentTask.title = "Pushed data to Prismic";
-									task.skip("No documents to push");
+									task.skip("No document to push");
 
 									return;
 								}
@@ -927,7 +979,70 @@ ${chalk.cyan("?")} Your Prismic repository name`.replace("\n", ""),
 		]);
 	}
 
-	// TODO: Add Slice Machine script to package.json
+	protected initializeProject(): Promise<void> {
+		return listrRun([
+			{
+				title: "Initializing project...",
+				task: async (_, parentTask) =>
+					// We return another Listr instance in the event we have additional task to perform to initialize the project
+					listr([
+						{
+							title: `Patching ${chalk.cyan("package.json")} scripts...`,
+							task: async (_, task) => {
+								const pkgPath = path.join(this.manager.cwd, "package.json");
+
+								try {
+									const pkgRaw = await fs.readFile(pkgPath, "utf-8");
+									const pkg = JSON.parse(pkgRaw);
+
+									pkg.scripts ||= {};
+
+									if (!pkg.scripts[START_SCRIPT_KEY]) {
+										pkg.scripts[START_SCRIPT_KEY] = START_SCRIPT_VALUE;
+
+										// Cheap indent detection based on https://github.com/sindresorhus/detect-indent (simplified because we're only dealing with JSON here)
+										const firstIndent = pkgRaw
+											.split("\n")
+											.find((line) => line.match(/^(?:( )+|\t+)/));
+										const indent = firstIndent?.match(/^(?:( )+|\t+)/)?.[0];
+
+										await fs.writeFile(
+											pkgPath,
+											JSON.stringify(
+												pkg,
+												null,
+												indent && indent !== " " ? indent : "  ",
+											),
+										);
+									} else if (
+										!pkg.scripts["slicemachine"].startsWith(START_SCRIPT_VALUE)
+									) {
+										throw new Error("Script already exists");
+									}
+								} catch (error) {
+									task.title = `Could not patch ${chalk.cyan(
+										"package.json",
+									)} scripts (warning)`;
+									parentTask.title = `Initialized project (could not patch ${chalk.cyan(
+										"package.json",
+									)} scripts)`;
+
+									return;
+								}
+
+								this.context.projectInitialization ||= {};
+								this.context.projectInitialization.patchedScript = true;
+
+								task.title = `Patched ${chalk.cyan("package.json")} scripts`;
+								parentTask.title = `Initialized project (patched ${chalk.cyan(
+									"package.json",
+								)} scripts)`;
+							},
+						},
+					]),
+			},
+		]);
+	}
 
 	protected initializePlugins(): Promise<void> {
 		return listrRun([
@@ -959,7 +1074,10 @@ ${chalk.cyan("?")} Your Prismic repository name`.replace("\n", ""),
 										agent: this.context.packageManager,
 									});
 
-									execaProcess.stdout?.on("data", updateOutput);
+									// Don't clutter console with logs when process is non TTY (CI, etc.)
+									if (process.stdout.isTTY || process.env.NODE_ENV === "test") {
+										execaProcess.stdout?.on("data", updateOutput);
+									}
 									execaProcess.stderr?.on("data", updateOutput);
 
 									await execaProcess;
@@ -969,16 +1087,13 @@ ${chalk.cyan("?")} Your Prismic repository name`.replace("\n", ""),
 										"shortMessage" in error &&
 										"stderr" in error
 									) {
-										await this.trackError(error.shortMessage);
-										console.error(
+										throw new Error(
 											`\n\n${error.shortMessage}\n${error.stderr}\n\n${logSymbols.error} Plugins dependency installation failed`,
+											{ cause: error },
 										);
-									} else {
-										await this.trackError(error);
-										console.error(error);
 									}
 
-									process.exit(1);
+									throw error;
 								}
 							},
 						},

package/src/constants.ts

@@ -0,0 +1,3 @@
+// Those contants should be unique to the init script, if they are needed elsewhere then they should be extracted to the manager
+export const START_SCRIPT_KEY = "slicemachine";
+export const START_SCRIPT_VALUE = "start-slicemachine";

package/src/lib/framework.ts

@@ -14,6 +14,11 @@ export type Framework = {
 	 */
 	prismicName: string;
 
+	/**
+	 * A link to the Prismic documentation for the framework
+	 */
+	prismicDocumentation: string;
+
 	/**
 	 * Package name of the adapter responsible for this framework
 	 */
@@ -43,10 +48,15 @@ const DEFAULT_DEV_DEPENDENCIES: Record<string, string> = {
 	"slice-machine-ui": "<1.0.0",
 };
 
+/**
+ * Frameworks we support, orders shouldn't matter much but is respected (the
+ * higher it is the more priority it has in case multiple matches)
+ */
 export const FRAMEWORKS: Record<string, Framework> = {
 	"nuxt-2": {
 		name: "Nuxt 2",
 		prismicName: "nuxt-2",
+		prismicDocumentation: "https://prismic.dev/init/nuxt-2",
 		adapterName: "@slicemachine/adapter-nuxt",
 		compatibility: {
 			nuxt: "^2.0.0",
@@ -59,6 +69,7 @@ export const FRAMEWORKS: Record<string, Framework> = {
 	"next-11-13": {
 		name: "Next.js 11-13",
 		prismicName: "next-11-13",
+		prismicDocumentation: "https://prismic.dev/init/next-11-13",
 		adapterName: "@slicemachine/adapter-next",
 		compatibility: {
 			next: "^11.0.0 || ^12.0.0 || ^13.0.0",
@@ -76,6 +87,7 @@ export const FRAMEWORKS: Record<string, Framework> = {
 export const UNIVERSAL: Framework = {
 	name: "universal (no framework)",
 	prismicName: "universal",
+	prismicDocumentation: "https://prismic.dev/init/universal",
 	adapterName: "@slicemachine/adapter-universal",
 	compatibility: {},
 	devDependencies: {
@@ -106,15 +118,16 @@ export const detectFramework = async (cwd: string): Promise<Framework> => {
 		Object.values(FRAMEWORKS).find((framework) => {
 			return Object.entries(framework.compatibility).every(([pkg, range]) => {
 				if (pkg in allDependencies) {
-					// Determine lowest version possibly in use
-					const minimumVersion = semver.minVersion(allDependencies[pkg]);
-
-					// Unconventional tags, `latest`, `beta`, `dev`
-					if (!minimumVersion) {
+					try {
+						// Determine lowest version possibly in use
+						const minimumVersion = semver.minVersion(allDependencies[pkg]);
+
+						// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+						return semver.satisfies(minimumVersion!, range);
+					} catch (error) {
+						// We assume unconventional tags, `latest`, `beta`, `dev` matches the framework
 						return true;
 					}
-
-					return semver.satisfies(minimumVersion, range);
 				}
 
 				return false;

package/src/lib/packageManager.ts

@@ -1,4 +1,4 @@
-import { parseNi, detect as niDetect } from "@antfu/ni";
+import { parseNi, parseNr, detect as niDetect, parseNx } from "@antfu/ni";
 import {
 	ExecaChildProcess,
 	execaCommand,
@@ -55,12 +55,28 @@ export const installDependencies = async (
 	return { execaProcess };
 };
 
-export const detectPackageManager = async (): Promise<PackageManagerAgent> => {
+export const getRunScriptCommand = async (args: {
+	agent: PackageManagerAgent;
+	script: string;
+}): Promise<string> => {
+	return (await parseNr(args.agent, [args.script])) || `npm run ${args.script}`;
+};
+
+export const getExecuteCommand = async (args: {
+	agent: PackageManagerAgent;
+	script: string;
+}): Promise<string> => {
+	return (await parseNx(args.agent, [args.script])) || `npx ${args.script}`;
+};
+
+export const detectPackageManager = async (
+	cwd?: string,
+): Promise<PackageManagerAgent> => {
 	// We auto install agent for now otherwise ni could cause some issues with prompt
-	const agent = await niDetect({ autoInstall: true });
+	const agent = await niDetect({ autoInstall: true, cwd });
 
 	if (!agent) {
-		throw new Error("Failed to detect project's framework");
+		throw new Error("Failed to detect project's package manager");
 	}
 
 	return agent;

package/src/lib/prompt.ts

@@ -20,8 +20,8 @@ export const prompt = async <TReturn, TProperty extends string = string>(
 	}
 
 	// Clear prompt line, clean recap are done manually
-	process.stdout.moveCursor(0, -1);
-	process.stdout.clearLine(1);
+	process.stdout.moveCursor?.(0, -1);
+	process.stdout.clearLine?.(1);
 
 	return answers;
 };