feat(remix-dev): support a TypeScript file for the remix.init index…

… script (#2803)

contributors.yml

@@ -95,6 +95,7 @@
 - donavon
 - Dueen
 - dunglas
+- dvargas92495
 - dwightwatson
 - dwt47
 - dylanplayer

packages/remix-dev/__tests__/create-test.ts

@@ -446,6 +446,22 @@ describe("the create command", () => {
     expect(fse.existsSync(path.join(projectDir, "remix.init"))).toBeFalsy();
   });
 
+  it("runs remix.init script when using index.ts", async () => {
+    let projectDir = await getProjectDir("remix-init-ts");
+    await run([
+      "create",
+      projectDir,
+      "--template",
+      path.join(__dirname, "fixtures", "stack-init-ts.tar.gz"),
+      "--install",
+      "--typescript",
+    ]);
+    expect(output).toContain(`Running init script on ${projectDir.replace(TEMP_DIR, "<TEMP_DIR>")}`);
+    expect(fse.existsSync(path.join(projectDir, "package.json"))).toBeTruthy();
+    expect(fse.existsSync(path.join(projectDir, "app/root.tsx"))).toBeTruthy();
+    expect(fse.existsSync(path.join(projectDir, "remix.init"))).toBeFalsy();
+  });
+
   it("runs remix.init script when using `remix init`", async () => {
     let projectDir = await getProjectDir("remix-init-manual");
     await run([

packages/remix-dev/cli/commands.ts

@@ -10,6 +10,7 @@ import type { Server } from "http";
 import type * as Express from "express";
 import type { createApp as createAppType } from "@remix-run/serve";
 import getPort, { makeRange } from "get-port";
+import * as esbuild from "esbuild";
 
 import { BuildMode, isBuildMode } from "../build";
 import * as colors from "../colors";
@@ -64,8 +65,17 @@ export async function init(
   { deleteScript = true }: InitFlags = {}
 ) {
   let initScriptDir = path.join(projectDir, "remix.init");
+  let initScriptTs = path.resolve(initScriptDir, "index.ts");
   let initScript = path.resolve(initScriptDir, "index.js");
 
+  if (await fse.pathExists(initScriptTs)) {
+    await esbuild.build({
+      entryPoints: [initScriptTs],
+      format: "cjs",
+      platform: "node",
+      outfile: initScript,
+    })
+  }
   if (!(await fse.pathExists(initScript))) {
     return;
   }
@@ -74,6 +84,7 @@ export async function init(
   let isTypeScript = fse.existsSync(path.join(projectDir, "tsconfig.json"));
   let packageManager = getPreferredPackageManager();
 
+
   if (await fse.pathExists(initPackageJson)) {
     execSync(`${packageManager} install`, {
       cwd: initScriptDir,
@@ -82,6 +93,9 @@ export async function init(
   }
 
   let initFn = require(initScript);
+  if (typeof initFn !== 'function' && initFn.default) {
+    initFn = initFn.default;
+  }
   try {
     await initFn({ isTypeScript, packageManager, rootDirectory: projectDir });
 

packages/remix-dev/cli/create.ts

@@ -243,7 +243,8 @@ async function extractLocalTarball(
     throw Error(
       "🚨 There was a problem extracting the file from the provided template.\n\n" +
         `  Template filepath: \`${filePath}\`\n` +
-        `  Destination directory: \`${projectDir}\``
+        `  Destination directory: \`${projectDir}\`\n` +
+        `  ${err}`
     );
   }
 }