Implement scripts 9, 10 and 11 to finish migration.

src/index.mjs

@@ -6,23 +6,49 @@ import step05RemoveTildeCharSCSS from "./steps/05-remove-tilde-char-scss.mjs";
 import step06FixFontAwesomeWebfontsVar from "./steps/06-fix-fontawesome-webfonts-var.mjs";
 import step07CopyFiles from "./steps/07-copy-files.mjs";
 import step08CreateViteConfig from "./steps/08-create-vite-config.mjs";
+import step09RenameExtensionJsToJsx from "./steps/09-rename-extension-js-to-jsx.mjs";
+import step10UpdatePackageScripts from "./steps/10-update-package-scripts.mjs";
+import step11UpdateDeps from "./steps/11-update-deps.mjs";
+
+function stepHeader(step) {
+    console.log(`\n========== Step ${step} ==========`);
+}
 
 try {
+    stepHeader("01");
     await step01MoveIndexHtml();
 
+    stepHeader("02");
     await step02RenameEntryExtension();
 
+    stepHeader("03");
     await step03ProcessIndexHtml();
 
+    stepHeader("04");
     await step04RenameVariables();
 
+    stepHeader("05");
     await step05RemoveTildeCharSCSS();
 
+    stepHeader("06");
     await step06FixFontAwesomeWebfontsVar();
 
+    stepHeader("07");
     await step07CopyFiles();
 
+    stepHeader("08");
     await step08CreateViteConfig();
+
+    stepHeader("09");
+    await step09RenameExtensionJsToJsx();
+
+    stepHeader("10");
+    await step10UpdatePackageScripts();
+
+    stepHeader("11");
+    await step11UpdateDeps();
+
+    console.log("All steps completed successfully");
 } catch(error) {
     console.error(error);
     process.exit(1);

src/steps/09-rename-extension-js-to-jsx.mjs

+import fs from "fs";
+
+async function processFilesInDirectory(directory) {
+    const forbiddenDirectories = [
+        "node_modules",
+        ".git"
+    ];
+
+    const files = fs.readdirSync(directory, { withFileTypes: true });
+    for(const file of files) {
+        if (file.isDirectory() && forbiddenDirectories.includes(file.name)) {
+            continue;
+        }
+
+        if (file.isDirectory()) {
+            const subDir = `${directory}${file.name}/`;
+            await processFilesInDirectory(subDir);
+            continue;
+        }
+
+        if (!file.isFile()) {
+            continue;
+        }
+        if(!file.name.endsWith(".js")) {
+            continue;
+        }
+
+        const oldPath = `${directory}/${file.name}`;
+        // Check if file contains jsx syntax.
+        const fileContent = fs.readFileSync(oldPath, "utf8");
+        const fileContentNoNewLines = fileContent.split("\n").map(line => line.trim()).join("").replaceAll(" ", "");
+        if(!fileContentNoNewLines.includes("return(<")) {
+            continue;
+        }
+
+        const newPath = oldPath.replace(".js", ".jsx");
+
+        fs.renameSync(oldPath, newPath);
+        console.log(`${file.name} renamed to ${file.name.replace(".js", ".jsx")}`);
+    }
+}
+
+async function step09RenameExtensionJsToJsx() {
+    const srcDir = "./src/";
+    await processFilesInDirectory(srcDir);
+}
+
+export default step09RenameExtensionJsToJsx;

src/steps/10-update-package-scripts.mjs

+import fs from "fs";
+
+function step10UpdatePackageScripts() {
+    const packageJsonPath = "./package.json";
+    const packageJsonContent = fs.readFileSync(packageJsonPath, "utf8");
+    const packageJson = JSON.parse(packageJsonContent);
+
+    if(!packageJson.scripts) {
+        packageJson.scripts = {};
+    }
+
+    packageJson.scripts.start = "vite";
+    packageJson.scripts.build = "tsc && vite build";
+    packageJson.scripts.preview = "vite preview";
+    packageJson.scripts.test = undefined;
+    packageJson.scripts.eject = undefined;
+
+    fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + "\n");
+}
+
+export default step10UpdatePackageScripts;

src/steps/11-update-deps.mjs

+import * as yarn from "yarn-programmatic";
+import fs from "fs";
+
+async function step11UpdateDeps() {
+    const packageJsonPath = "./package.json";
+    const packageJsonContent = fs.readFileSync(packageJsonPath, "utf8");
+    const packageJson = JSON.parse(packageJsonContent);
+
+    const packagesToAdd = {
+        "@vitejs/plugin-react": "4.3.0",
+        "typescript": "5.4.5",
+        "vite": "5.2.11",
+        "vite-tsconfig-paths": "4.3.2",
+    };
+
+    for(const [packageName, packageVersion] of Object.entries(packagesToAdd)) {
+        if(packageJson.dependencies?.[packageName] === packageVersion) {
+            continue;
+        }
+        console.log(`Adding ${packageName}@${packageVersion}...`);
+        await yarn.add([`${packageName}@${packageVersion}`], { dev: true });
+    }
+
+    console.log("Dependencies added");
+
+    const packagesToRemove = [
+        "react-scripts",
+        "http-proxy-middleware",
+    ];
+    for(const packageToRemove of packagesToRemove) {
+        if(!packageJson.dependencies?.[packageToRemove]) {
+            continue;
+        }
+        console.log(`Removing ${packageToRemove}...`);
+        await yarn.remove([packageToRemove]);
+    }
+
+    console.log("Old dependencies removed");
+}
+
+export default step11UpdateDeps;