feat(upgrade): swap sites-react-components to pages-components (#560)

This also attempts to fix the upgrade script sometimes hanging by
removing unnecessary async functions.

packages/pages/src/upgrade/migrateConfig.ts

@@ -36,7 +36,7 @@ const writeYamlSync = (configYamlPath: string, target: string, data: any) => {
   fs.writeFileSync(configYamlPath, yaml.stringify(yamlDoc));
 };
 
-const migrateCiJson = async (configYamlPath: string, ciPath: string) => {
+const migrateCiJson = (configYamlPath: string, ciPath: string) => {
   const ciJson = readJsonSync(ciPath);
   if (ciJson !== null) {
     const buildArtifacts = ciJson.buildArtifacts;
@@ -76,18 +76,15 @@ const migrateCiJson = async (configYamlPath: string, ciPath: string) => {
   }
 };
 
-const migrateLocales = async (configYamlPath: string, featuresPath: string) => {
+const migrateLocales = (configYamlPath: string, featuresPath: string) => {
   const featuresJson = readJsonSync(featuresPath);
   if (!!featuresJson && !!featuresJson.locales) {
     console.info(`migrating locales from ${featuresPath} to ${configYamlPath}`);
     writeYamlSync(configYamlPath, "locales", featuresJson.locales);
   }
 };
 
-const migrateSiteStream = async (
-  configYamlPath: string,
-  siteStreamPath: string
-) => {
+const migrateSiteStream = (configYamlPath: string, siteStreamPath: string) => {
   const sitesJson = readJsonSync(siteStreamPath);
   if (sitesJson !== null) {
     console.info(
@@ -116,14 +113,14 @@ export const formatSiteStream = (sitesJson: any, siteStreamPath: string) => {
   };
 };
 
-const migrateRedirects = async (source: string, dest: string) => {
+const migrateRedirects = (source: string, dest: string) => {
   if (fs.existsSync(source)) {
     console.info(`migrating redirects from ${source} to ${dest}`);
     fs.copyFileSync(source, dest);
   }
 };
 
-const migrateServing = async (configYamlPath: string, servingPath: string) => {
+const migrateServing = (configYamlPath: string, servingPath: string) => {
   const servingJson = readJsonSync(servingPath);
   if (servingJson !== null) {
     const newServingJson = formatServing(servingJson);
@@ -142,7 +139,7 @@ export const formatServing = (servingJson: any) => {
   }
 };
 
-const migrateSiteMap = async (configYamlPath: string, sitemapPath: string) => {
+const migrateSiteMap = (configYamlPath: string, sitemapPath: string) => {
   const sitemapJson = readJsonSync(sitemapPath);
   if (sitemapJson !== null) {
     sitemapJson.excludeList = sitemapJson["exclude_list"];
@@ -152,7 +149,7 @@ const migrateSiteMap = async (configYamlPath: string, sitemapPath: string) => {
   }
 };
 
-const migrateAuth = async (configYamlPath: string, authPath: string) => {
+const migrateAuth = (configYamlPath: string, authPath: string) => {
   const authJson = readJsonSync(authPath);
   if (authJson !== null) {
     console.info(`migrating auth info from ${authPath} to ${configYamlPath}`);
@@ -178,7 +175,7 @@ export const migrateConfigs = async (projectStructure: ProjectStructure) => {
   for (const file of files) {
     const filePath = path.resolve(sitesConfigPath, file.toString());
     if (fs.existsSync(filePath) && fs.statSync(filePath).isDirectory()) {
-      await migrateConfigs(
+      migrateConfigs(
         await ProjectStructure.init({
           scope: path.join(scope, file.toString()),
         })
@@ -198,31 +195,31 @@ export const migrateConfigs = async (projectStructure: ProjectStructure) => {
     console.info(`${configYamlPath} does not exist, creating it`);
     fs.writeFileSync(configYamlPath, "");
   }
-  await migrateCiJson(
+  migrateCiJson(
     configYamlPath,
     path.resolve(sitesConfigPath, sitesConfigFiles.ci)
   );
-  await migrateLocales(
+  migrateLocales(
     configYamlPath,
     path.resolve(sitesConfigPath, sitesConfigFiles.features)
   );
-  await migrateSiteStream(
+  migrateSiteStream(
     configYamlPath,
     path.resolve(sitesConfigPath, sitesConfigFiles.siteStream)
   );
-  await migrateServing(
+  migrateServing(
     configYamlPath,
     path.resolve(sitesConfigPath, sitesConfigFiles.serving)
   );
-  await migrateRedirects(
+  migrateRedirects(
     path.resolve(sitesConfigPath, sitesConfigFiles.redirects),
     path.resolve(scopeFolder, sitesConfigFiles.redirects)
   );
-  await migrateSiteMap(
+  migrateSiteMap(
     configYamlPath,
     path.resolve(sitesConfigPath, sitesConfigFiles.sitemap)
   );
-  await migrateAuth(
+  migrateAuth(
     configYamlPath,
     path.resolve(sitesConfigPath, sitesConfigFiles.auth)
   );

packages/pages/src/upgrade/pagesUpdater.ts

@@ -5,10 +5,12 @@ import latestVersion from "latest-version";
 import { execSync } from "child_process";
 import { fileURLToPath } from "url";
 import typescript from "typescript";
+import colors from "picocolors";
 
 const pagesSlashComponentsRegex = /@yext\/pages\/components/g;
 const sitesComponentsRegex = /@yext\/sites-components/g;
 const reactComponentsRegex = /@yext\/react-components/g;
+const sitesReactComponentsRegex = /@yext\/sites-react-components/g;
 const markdownRegex = /Markdown.{1,10}from ["']@yext\/react-components/g;
 
 const pagesComponentsReplacement = "@yext/pages-components";
@@ -143,6 +145,7 @@ function processDirectoryRecursively(
 export const updateToUsePagesComponents = async (source: string) => {
   await removePackageDependency("@yext/sites-components");
   await removePackageDependency("@yext/react-components");
+  await removePackageDependency("@yext/sites-react-components");
   await removePackageDependency("@yext/components-tsx-maps");
   await removePackageDependency("@yext/components-tsx-geo");
   // update imports from pages/components to sites-components
@@ -152,6 +155,9 @@ export const updateToUsePagesComponents = async (source: string) => {
   const hasSitesComponentsImports = replaceSitesComponentsImports(source);
   // update imports from react-components to pages-components
   const hasReactComponentsImports = replaceReactComponentsImports(source);
+  // update imports from sites-react-components to pages-components
+  const hasSitesReactComponentsImports =
+    replaceSitesReactComponentsImports(source);
   const movedTsxMapsImports = moveTsxMapsImportsToPagesComponents(source);
 
   await updatePackageDependency(
@@ -160,8 +166,22 @@ export const updateToUsePagesComponents = async (source: string) => {
     hasPagesSlashComponentsImports ||
       hasSitesComponentsImports ||
       hasReactComponentsImports ||
+      hasSitesReactComponentsImports ||
       movedTsxMapsImports
   );
+
+  if (
+    hasSitesComponentsImports ||
+    hasReactComponentsImports ||
+    hasSitesReactComponentsImports
+  ) {
+    console.log(
+      colors.yellow(
+        "Some deprecated libraries were automatically removed and updated to use @yext/pages-components. " +
+          "You may need to update your imports or make some code adjustments."
+      )
+    );
+  }
 };
 
 /**
@@ -279,6 +299,29 @@ export const replaceReactComponentsImports = (source: string): boolean => {
   return hasReplaced;
 };
 
+/**
+ * Replaces imports for sites-react-components with pages-components
+ * @param source the src folder
+ * @return hasReplaced
+ */
+export const replaceSitesReactComponentsImports = (source: string): boolean => {
+  let hasReplaced = false;
+  const operation = async (filePath: string) => {
+    const fileContent = fs.readFileSync(filePath, "utf8");
+    if (fileContent.match(sitesReactComponentsRegex)) {
+      const modifiedContent = fileContent.replace(
+        sitesReactComponentsRegex,
+        pagesComponentsReplacement
+      );
+      fs.writeFileSync(filePath, modifiedContent, "utf8");
+      hasReplaced = true;
+      console.log(`sites-react-components imports replaced in: ${filePath}`);
+    }
+  };
+  processDirectoryRecursively(source, operation);
+  return hasReplaced;
+};
+
 /**
  * Moves imports likes `import { GoogleMaps } from "@yext/components-tsx-maps";` to
  * `import { Map, GoogleMaps } from "@yext/pages-components";`.