From b151c253cc4a71985a5ae2f4e13f67e13f0d1544 Mon Sep 17 00:00:00 2001 From: Duval Kilpatrick Date: Thu, 2 Jan 2025 15:19:39 -0500 Subject: [PATCH] feat(upgrade): swap sites-react-components to pages-components --- packages/pages/src/upgrade/migrateConfig.ts | 33 +++++++--------- packages/pages/src/upgrade/pagesUpdater.ts | 43 +++++++++++++++++++++ 2 files changed, 58 insertions(+), 18 deletions(-) diff --git a/packages/pages/src/upgrade/migrateConfig.ts b/packages/pages/src/upgrade/migrateConfig.ts index e013be394..3f24d34bb 100644 --- a/packages/pages/src/upgrade/migrateConfig.ts +++ b/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,7 +76,7 @@ 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}`); @@ -84,10 +84,7 @@ const migrateLocales = async (configYamlPath: string, featuresPath: string) => { } }; -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) ); diff --git a/packages/pages/src/upgrade/pagesUpdater.ts b/packages/pages/src/upgrade/pagesUpdater.ts index 452c3e525..c18fe1470 100644 --- a/packages/pages/src/upgrade/pagesUpdater.ts +++ b/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";`.