Add missing render version warning

cli/src/index.ts

@@ -15,6 +15,7 @@ import { initializeGit } from "@/helpers/git.js";
 import { installDependencies } from "@/helpers/installDependencies.js";
 import { logNextSteps } from "@/helpers/logNextSteps.js";
 import { setImportAlias } from "@/helpers/setImportAlias.js";
+import { getNpmVersion, renderVersionWarning } from "@/utils/renderVersionWarning.js";
 
 type StarterKitPackageJSON = PackageJson & {
   starterKitMetadata?: {
@@ -23,9 +24,10 @@ type StarterKitPackageJSON = PackageJson & {
 };
 
 const main = async () => {
+  const npmVersion = await getNpmVersion();
   const pkgManager = getUserPkgManager();
-
   await renderTitle();
+  npmVersion && renderVersionWarning(npmVersion);
 
   const {
     appName,

cli/src/utils/renderTitle.ts

@@ -10,9 +10,9 @@ export const renderTitle = async () => {
       CLI_NAME.replace(new RegExp("-", "g"), " ").toUpperCase(),
       {
         font: "Standard",
-        horizontalLayout: "full",
+        horizontalLayout: "fitted",
       },
-      (err: any, data: unknown) => {
+      (err: unknown, data: unknown) => {
         const sKgradient = gradient(colors);
 
         console.log(sKgradient.multiline((err ? CLI_NAME : data) as string));

cli/src/utils/renderVersionWarning.ts

@@ -0,0 +1,64 @@
+import { execSync } from "child_process";
+import https from "https";
+
+import { getVersion } from "./getCliVersion.js";
+import { logger } from "./logger.js";
+
+export const renderVersionWarning = (npmVersion: string) => {
+  const currentVersion = getVersion();
+
+  if (currentVersion.includes("beta")) {
+    logger.warn("  You are using a beta version of create-perma-app.");
+    logger.warn("  Please report any bugs you encounter.");
+  } else if (currentVersion.includes("next")) {
+    logger.warn("  You are running create-perma-app with the @next tag which is no longer maintained.");
+    logger.warn("  Please run the CLI with @latest instead.");
+  } else if (currentVersion !== npmVersion) {
+    logger.warn("  You are using an outdated version of create-perma-app.");
+    logger.warn("  Your version:", currentVersion + ".", "Latest version in the npm registry:", npmVersion);
+    logger.warn("  Please run the CLI with @latest to get the latest updates.");
+  }
+  console.log("");
+};
+
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the LICENSE file in the root
+ * directory of this source tree.
+ * https://github.com/facebook/create-react-app/blob/main/packages/create-react-app/LICENSE
+ */
+interface DistTagsBody {
+  latest: string;
+}
+
+function checkForLatestVersion(): Promise<string> {
+  return new Promise((resolve, reject) => {
+    https
+      .get("https://registry.npmjs.org/-/package/create-perma-app/dist-tags", (res) => {
+        if (res.statusCode === 200) {
+          let body = "";
+          res.on("data", (data) => (body += data));
+          res.on("end", () => {
+            resolve((JSON.parse(body) as DistTagsBody).latest);
+          });
+        } else {
+          reject();
+        }
+      })
+      .on("error", () => {
+        // logger.error("Unable to check for latest version.");
+        reject();
+      });
+  });
+}
+
+export const getNpmVersion = () =>
+  // `fetch` to the registry is faster than `npm view` so we try that first
+  checkForLatestVersion().catch(() => {
+    try {
+      return execSync("npm view create-perma-app version").toString().trim();
+    } catch {
+      return null;
+    }
+  });