feat: remove all TypeScript references when isTypeScript is passed as false to remix.init (#127)

Author: MichaelDeBoey

.github/workflows/deploy.yml

@@ -5,6 +5,7 @@ on:
       - main
       - dev
   pull_request: {}
+
 permissions:
   actions: write
   contents: read

cypress/support/create-user.ts

@@ -4,10 +4,11 @@
 // and it will log out the cookie value you can use to interact with the server
 // as that new user.
 
-import { parse } from "cookie";
 import { installGlobals } from "@remix-run/node";
-import { createUserSession } from "~/session.server";
+import { parse } from "cookie";
+
 import { createUser } from "~/models/user.server";
+import { createUserSession } from "~/session.server";
 
 installGlobals();
 

cypress/support/delete-user.ts

@@ -5,6 +5,7 @@
 
 import { PrismaClientKnownRequestError } from "@prisma/client/runtime";
 import { installGlobals } from "@remix-run/node";
+
 import { prisma } from "~/db.server";
 
 installGlobals();

package.json

@@ -83,6 +83,6 @@
     "node": ">=14"
   },
   "prisma": {
-    "seed": "node --require tsconfig-paths/register prisma/seed.js"
+    "seed": "ts-node --require tsconfig-paths/register prisma/seed.ts"
   }
 }

prisma/seed.js renamed to prisma/seed.ts

@@ -1,5 +1,5 @@
-const { PrismaClient } = require("@prisma/client");
-const bcrypt = require("bcryptjs");
+import { PrismaClient } from "@prisma/client";
+import bcrypt from "bcryptjs";
 
 const prisma = new PrismaClient();
 

remix.init/index.js

@@ -4,29 +4,111 @@ const fs = require("fs/promises");
 const path = require("path");
 
 const toml = require("@iarna/toml");
+const PackageJson = require("@npmcli/package-json");
 const YAML = require("yaml");
-const sort = require("sort-package-json");
 
-function escapeRegExp(string) {
+const cleanupCypressFiles = (filesEntries) =>
+  filesEntries.flatMap(([filePath, content]) => {
+    const newContent = content
+      .replace("npx ts-node", "node")
+      .replace("create-user.ts", "create-user.js")
+      .replace("delete-user.ts", "delete-user.js");
+
+    return [fs.writeFile(filePath, newContent)];
+  });
+
+const cleanupDeployWorkflow = (deployWorkflow, deployWorkflowPath) => {
+  delete deployWorkflow.jobs.typecheck;
+  deployWorkflow.jobs.deploy.needs = deployWorkflow.jobs.deploy.needs.filter(
+    (need) => need !== "typecheck"
+  );
+
+  return [fs.writeFile(deployWorkflowPath, YAML.stringify(deployWorkflow))];
+};
+
+const cleanupVitestConfig = (vitestConfig, vitestConfigPath) => {
+  const newVitestConfig = vitestConfig.replace(
+    "setup-test-env.ts",
+    "setup-test-env.js"
+  );
+
+  return [fs.writeFile(vitestConfigPath, newVitestConfig)];
+};
+
+const escapeRegExp = (string) =>
   // $& means the whole matched string
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
+  string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 
-function getRandomString(length) {
-  return crypto.randomBytes(length).toString("hex");
-}
+const getRandomString = (length) => crypto.randomBytes(length).toString("hex");
 
-async function main({ rootDirectory, packageManager, isTypeScript }) {
+const readFileIfNotTypeScript = (
+  isTypeScript,
+  filePath,
+  parseFunction = (result) => result
+) =>
+  (isTypeScript ? Promise.resolve() : fs.readFile(filePath, "utf-8")).then(
+    parseFunction
+  );
+
+const removeUnusedDependencies = (dependencies, unusedDependencies) =>
+  Object.fromEntries(
+    Object.entries(dependencies).filter(
+      ([key]) => !unusedDependencies.includes(key)
+    )
+  );
+
+const updatePackageJson = ({ APP_NAME, isTypeScript, packageJson }) => {
+  const {
+    devDependencies,
+    prisma: { seed: prismaSeed, ...prisma },
+    scripts: { typecheck, validate, ...scripts },
+  } = packageJson.content;
+
+  packageJson.update({
+    name: APP_NAME,
+    devDependencies: isTypeScript
+      ? devDependencies
+      : removeUnusedDependencies(devDependencies, [
+          "ts-node",
+          "vite-tsconfig-paths",
+        ]),
+    prisma: isTypeScript
+      ? prisma
+      : {
+          ...prisma,
+          seed: prismaSeed
+            .replace("ts-node", "node")
+            .replace("seed.ts", "seed.js"),
+        },
+    scripts: isTypeScript
+      ? { ...scripts, typecheck, validate }
+      : { ...scripts, validate: validate.replace(" typecheck", "") },
+  });
+};
+
+const main = async ({ isTypeScript, packageManager, rootDirectory }) => {
   const README_PATH = path.join(rootDirectory, "README.md");
   const FLY_TOML_PATH = path.join(rootDirectory, "fly.toml");
   const EXAMPLE_ENV_PATH = path.join(rootDirectory, ".env.example");
   const ENV_PATH = path.join(rootDirectory, ".env");
-  const PACKAGE_JSON_PATH = path.join(rootDirectory, "package.json");
-  const DEPLOY_YAML_PATH = path.join(
+  const DEPLOY_WORKFLOW_PATH = path.join(
     rootDirectory,
-    ".github/workflows/deploy.yml"
+    ".github",
+    "workflows",
+    "deploy.yml"
   );
   const DOCKERFILE_PATH = path.join(rootDirectory, "Dockerfile");
+  const CYPRESS_SUPPORT_PATH = path.join(rootDirectory, "cypress", "support");
+  const CYPRESS_COMMANDS_PATH = path.join(CYPRESS_SUPPORT_PATH, "commands.js"); // We renamed this during `create-remix`
+  const CREATE_USER_COMMAND_PATH = path.join(
+    CYPRESS_SUPPORT_PATH,
+    "create-user.js"
+  ); // We renamed this during `create-remix`
+  const DELETE_USER_COMMAND_PATH = path.join(
+    CYPRESS_SUPPORT_PATH,
+    "delete-user.js"
+  ); // We renamed this during `create-remix`
+  const VITEST_CONFIG_PATH = path.join(rootDirectory, "vitest.config.js"); // We renamed this during `create-remix`
 
   const REPLACER = "indie-stack-template";
 
@@ -37,15 +119,31 @@ async function main({ rootDirectory, packageManager, isTypeScript }) {
     // get rid of anything that's not allowed in an app name
     .replace(/[^a-zA-Z0-9-_]/g, "-");
 
-  const [prodContent, readme, env, packageJson, deployConfig, dockerfile] =
-    await Promise.all([
-      fs.readFile(FLY_TOML_PATH, "utf-8"),
-      fs.readFile(README_PATH, "utf-8"),
-      fs.readFile(EXAMPLE_ENV_PATH, "utf-8"),
-      fs.readFile(PACKAGE_JSON_PATH, "utf-8").then((s) => JSON.parse(s)),
-      fs.readFile(DEPLOY_YAML_PATH, "utf-8").then((s) => YAML.parse(s)),
-      fs.readFile(DOCKERFILE_PATH, "utf-8"),
-    ]);
+  const [
+    prodContent,
+    readme,
+    env,
+    dockerfile,
+    cypressCommands,
+    createUserCommand,
+    deleteUserCommand,
+    deployWorkflow,
+    vitestConfig,
+    packageJson,
+  ] = await Promise.all([
+    fs.readFile(FLY_TOML_PATH, "utf-8"),
+    fs.readFile(README_PATH, "utf-8"),
+    fs.readFile(EXAMPLE_ENV_PATH, "utf-8"),
+    fs.readFile(DOCKERFILE_PATH, "utf-8"),
+    readFileIfNotTypeScript(isTypeScript, CYPRESS_COMMANDS_PATH),
+    readFileIfNotTypeScript(isTypeScript, CREATE_USER_COMMAND_PATH),
+    readFileIfNotTypeScript(isTypeScript, DELETE_USER_COMMAND_PATH),
+    readFileIfNotTypeScript(isTypeScript, DEPLOY_WORKFLOW_PATH, (s) =>
+      YAML.parse(s)
+    ),
+    readFileIfNotTypeScript(isTypeScript, VITEST_CONFIG_PATH),
+    PackageJson.load(rootDirectory),
+  ]);
 
   const newEnv = env.replace(
     /^SESSION_SECRET=.*$/m,
@@ -60,25 +158,6 @@ async function main({ rootDirectory, packageManager, isTypeScript }) {
     APP_NAME
   );
 
-  let saveDeploy = null;
-  if (!isTypeScript) {
-    delete packageJson.scripts.typecheck;
-    packageJson.scripts.validate = packageJson.scripts.validate.replace(
-      " typecheck",
-      ""
-    );
-
-    delete deployConfig.jobs.typecheck;
-    deployConfig.jobs.deploy.needs = deployConfig.jobs.deploy.needs.filter(
-      (n) => n !== "typecheck"
-    );
-    // only write the deploy config if it's changed
-    saveDeploy = fs.writeFile(DEPLOY_YAML_PATH, YAML.stringify(deployConfig));
-  }
-
-  const newPackageJson =
-    JSON.stringify(sort({ ...packageJson, name: APP_NAME }), null, 2) + "\n";
-
   const lockfile = {
     npm: "package-lock.json",
     yarn: "yarn.lock",
@@ -92,28 +171,49 @@ async function main({ rootDirectory, packageManager, isTypeScript }) {
       )
     : dockerfile;
 
-  await Promise.all([
+  updatePackageJson({ APP_NAME, isTypeScript, packageJson });
+
+  const fileOperationPromises = [
     fs.writeFile(FLY_TOML_PATH, toml.stringify(prodToml)),
     fs.writeFile(README_PATH, newReadme),
     fs.writeFile(ENV_PATH, newEnv),
-    fs.writeFile(PACKAGE_JSON_PATH, newPackageJson),
     fs.writeFile(DOCKERFILE_PATH, newDockerfile),
-    saveDeploy,
+    packageJson.save(),
     fs.copyFile(
       path.join(rootDirectory, "remix.init", "gitignore"),
       path.join(rootDirectory, ".gitignore")
     ),
-    fs.rm(path.join(rootDirectory, ".github/ISSUE_TEMPLATE"), {
+    fs.rm(path.join(rootDirectory, ".github", "ISSUE_TEMPLATE"), {
       recursive: true,
     }),
-    fs.rm(path.join(rootDirectory, ".github/PULL_REQUEST_TEMPLATE.md")),
-  ]);
+    fs.rm(path.join(rootDirectory, ".github", "PULL_REQUEST_TEMPLATE.md")),
+  ];
+
+  if (!isTypeScript) {
+    fileOperationPromises.push(
+      ...cleanupCypressFiles([
+        [CYPRESS_COMMANDS_PATH, cypressCommands],
+        [CREATE_USER_COMMAND_PATH, createUserCommand],
+        [DELETE_USER_COMMAND_PATH, deleteUserCommand],
+      ])
+    );
+
+    fileOperationPromises.push(
+      ...cleanupDeployWorkflow(deployWorkflow, DEPLOY_WORKFLOW_PATH)
+    );
 
-  execSync(`npm run setup`, { stdio: "inherit", cwd: rootDirectory });
+    fileOperationPromises.push(
+      ...cleanupVitestConfig(vitestConfig, VITEST_CONFIG_PATH)
+    );
+  }
+
+  await Promise.all(fileOperationPromises);
+
+  execSync("npm run setup", { cwd: rootDirectory, stdio: "inherit" });
 
   execSync("npm run format -- --loglevel warn", {
-    stdio: "inherit",
     cwd: rootDirectory,
+    stdio: "inherit",
   });
 
   console.log(
@@ -122,6 +222,6 @@ async function main({ rootDirectory, packageManager, isTypeScript }) {
 Start development with \`npm run dev\`
     `.trim()
   );
-}
+};
 
 module.exports = main;

remix.init/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "dependencies": {
     "@iarna/toml": "^2.2.5",
-    "sort-package-json": "^1.57.0",
+    "@npmcli/package-json": "^2.0.0",
     "yaml": "^2.1.1"
   }
 }

vitest.config.ts

@@ -1,8 +1,8 @@
 /// <reference types="vitest" />
 /// <reference types="vite/client" />
 
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({