chore: fixed file copy issues when project language is JS

netlify · Feb 22, 2023 · bdd6833 · bdd6833
1 parent ba24c63
commit bdd6833
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 27 deletions.
diff --git a/remix.init/index.js b/remix.init/index.js
@@ -5,41 +5,42 @@ const PackageJson = require("@npmcli/package-json");
 
 const foldersToExclude = [".github"];
 
+// Netlify Edge Functions template file changes
 const edgeFilesToCopy = [
   ["README-edge.md", "README.md"],
   ["netlify-edge-toml", "netlify.toml"],
   ["server.js"],
   ["remix.config.js"],
   ["entry.server.tsx", "app/entry.server.tsx"],
+  ["root.tsx", "app/root.tsx"],
   ["vscode.json", ".vscode/settings.json"],
 ];
 
+// Netlify Functions template file changes
 const filesToCopy = [["README.md"], ["netlify-toml", "netlify.toml"]];
 
-const filesToModify = ["app/entry.server.tsx", "app/root.tsx"];
-
-async function modifyFilesForEdge(files, rootDirectory) {
-  const filePaths = files.map((file) => join(rootDirectory, file));
-  const contents = await Promise.all(
-    filePaths.map((path) => fs.readFile(path, "utf8"))
-  );
-
-  await Promise.all(
-    contents.map((content, index) => {
-      const newContent = content.replace(
-        /@remix-run\/node/g,
-        "@netlify/remix-runtime"
-      );
-      return fs.writeFile(filePaths[index], newContent);
-    })
-  );
+const tsExtensionMatcher = /\.ts(x?)$/;
+
+function convertToJsExtension(file) {
+  return file.replace(tsExtensionMatcher, ".js$1");
 }
 
-async function copyTemplateFiles(files, rootDirectory) {
+async function copyTemplateFiles({ files, rootDirectory, isTypeScript }) {
   for (const [file, target] of files) {
+    let sourceFile = file;
+    let targetFile = target || file;
+
+    // change the target file extension .tsx to .jsx only if the project has been converted to JavaScript
+    if (!isTypeScript && file.match(tsExtensionMatcher)) {
+      // If they chose JavaScript, the source file is converted to .js or .jsx and
+      // we need the target file to be .js or .jsx for the same reason.
+      sourceFile = convertToJsExtension(file);
+      targetFile = convertToJsExtension(targetFile);
+    }
+
     await fs.copyFile(
-      join(rootDirectory, "remix.init", file),
-      join(rootDirectory, target || file)
+      join(rootDirectory, "remix.init", sourceFile),
+      join(rootDirectory, targetFile)
     );
   }
 }
@@ -90,27 +91,24 @@ async function removeNonTemplateFiles({ rootDirectory, folders }) {
   }
 }
 
-async function main({ rootDirectory }) {
+async function main({ rootDirectory, isTypeScript }) {
   await removeNonTemplateFiles({
     rootDirectory,
     folders: foldersToExclude,
   });
 
   if (!(await shouldUseEdge())) {
-    copyTemplateFiles(filesToCopy, rootDirectory);
+    copyTemplateFiles({ files: filesToCopy, rootDirectory, isTypeScript });
 
     return;
   }
 
   await Promise.all([
     fs.mkdir(join(rootDirectory, ".vscode")),
-    copyTemplateFiles(edgeFilesToCopy, rootDirectory),
+    copyTemplateFiles({ files: edgeFilesToCopy, rootDirectory, isTypeScript }),
   ]);
 
-  await Promise.all([
-    modifyFilesForEdge(filesToModify, rootDirectory),
-    updatePackageJsonForEdge(rootDirectory),
-  ]);
+  await updatePackageJsonForEdge(rootDirectory);
 }
 
 async function shouldUseEdge() {

diff --git a/remix.init/root.tsx b/remix.init/root.tsx
@@ -0,0 +1,32 @@
+import type { MetaFunction } from "@netlify/remix-runtime";
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+export const meta: MetaFunction = () => ({
+  charset: "utf-8",
+  title: "New Remix App",
+  viewport: "width=device-width,initial-scale=1",
+});
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}