Merge pull request #124 from JayaKrishnaNamburu/update/remix-template

(fix): Update and fix remix template dependencies

README.md

@@ -8,11 +8,14 @@ To use the template, run
 npx create-remix@latest --template netlify/remix-template
 ```
 
+
 This project includes:
 
 - Netlify Functions template for Remix sites
 - Netlify Edge Functions template for Remix sites
 
+From the `create-remix` command, you may pass `--netlify-edge` or `--no-netlify-edge` to generate a template that uses Netlify Edge or Serverless functions explicitly. Without passing this option, the create workflow will ask you which you would prefer.
+
 ## Development
 
 There is no need to run `npm install` as this is a template. The Remix CLI will install the dependencies for you. Make changes to files as you see fit. If there are transformations for files for either the Netlify Functions or Netlify Edge Functions template, make the appropriate changes to the `remix.init/index.js` file.

app/root.tsx

@@ -8,11 +8,11 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
-export const meta: MetaFunction = () => ({
+export const meta: MetaFunction = () => [{
   charset: "utf-8",
   title: "New Remix App",
   viewport: "width=device-width,initial-scale=1",
-});
+}];
 
 export default function App() {
   return (

package.json

@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@netlify/functions": "^1.3.0",
-    "@remix-run/netlify": "*",
     "@remix-run/node": "*",
     "@remix-run/react": "*",
     "cross-env": "^7.0.3",
@@ -25,9 +24,9 @@
     "@types/react-dom": "^18.0.8",
     "eslint": "^8.27.0",
     "rimraf": "^4.1.4",
-    "typescript": "^4.8.4"
+    "typescript": "^5.1.0"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
   }
 }

remix.init/index.js

@@ -3,6 +3,7 @@ const fs = require("fs/promises");
 const { join } = require("path");
 const PackageJson = require("@npmcli/package-json");
 const execa = require("execa");
+const { Command } = require('commander');
 
 const foldersToExclude = [".github", ".git"];
 
@@ -24,25 +25,12 @@ const filesToCopy = [
   ["_app_redirects"],
 ];
 
-const tsExtensionMatcher = /\.ts(x?)$/;
 
-function convertToJsExtension(file) {
-  return file.replace(tsExtensionMatcher, ".js$1");
-}
-
-async function copyTemplateFiles({ files, rootDirectory, isTypeScript }) {
+async function copyTemplateFiles({ files, rootDirectory }) {
   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", sourceFile),
       join(rootDirectory, targetFile)
@@ -54,7 +42,6 @@ async function updatePackageJsonForEdge(directory) {
   const packageJson = await PackageJson.load(directory);
   const {
     dependencies: {
-      "@remix-run/netlify": _netlify,
       "@remix-run/node": _node,
       ...dependencies
     },
@@ -79,6 +66,28 @@ async function updatePackageJsonForEdge(directory) {
   await packageJson.save();
 }
 
+async function updatePackageJsonForFunctions(directory) {
+  const packageJson = await PackageJson.load(directory);
+  const {
+    dependencies: {
+      "@remix-run/node": _node,
+      ...dependencies
+    },
+    scripts,
+    ...restOfPackageJson
+  } = packageJson.content;
+
+  packageJson.update({
+    ...restOfPackageJson,
+    dependencies: {
+      ...dependencies,
+      "@netlify/remix-adapter": "^1.0.0",
+    },
+  });
+
+  await packageJson.save();
+}
+
 async function removeNonTemplateFiles({ rootDirectory, folders }) {
   try {
     await Promise.allSettled(
@@ -95,7 +104,7 @@ async function removeNonTemplateFiles({ rootDirectory, folders }) {
   }
 }
 
-async function main({ rootDirectory, isTypeScript }) {
+async function main({ rootDirectory }) {
   await removeNonTemplateFiles({
     rootDirectory,
     folders: foldersToExclude,
@@ -105,37 +114,18 @@ async function main({ rootDirectory, isTypeScript }) {
     await copyTemplateFiles({
       files: filesToCopy,
       rootDirectory,
-      isTypeScript,
     });
-
+    await updatePackageJsonForFunctions(rootDirectory);
     return;
   }
 
   await Promise.all([
     fs.mkdir(join(rootDirectory, ".vscode")),
-    copyTemplateFiles({ files: edgeFilesToCopy, rootDirectory, isTypeScript }),
+    copyTemplateFiles({ files: edgeFilesToCopy, rootDirectory }),
   ]);
 
   await updatePackageJsonForEdge(rootDirectory);
 
-  // This is temporary as a workaround for a bug I encountered with the Remix CLI
-  // import isbot from "isbot" converts to const isbot = require("isbot").default
-  // instead of to const isbot = require("isbot")
-  //
-  // Remove this if the issue in the Remix CLI gets sorted.
-  (async () => {
-    if (!isTypeScript) {
-      const path = join(rootDirectory, "/app/entry.server.jsx");
-      const contents = await fs.readFile(path, "utf8");
-      const newContent = contents.replace(
-        `require("isbot").default`,
-        `require("isbot")`
-      );
-
-      await fs.writeFile(path, newContent);
-    }
-  })();
-
   // The Netlify Edge Functions template has different and additional dependencies to install.
   try {
     console.log("installing additional npm packages...");
@@ -149,25 +139,38 @@ async function main({ rootDirectory, isTypeScript }) {
 }
 
 async function shouldUseEdge() {
-  const { edge } = await inquirer.prompt([
-    {
-      name: "edge",
-      type: "list",
-      message: "Run your Remix site with:",
-      choices: [
-        {
-          name: "Netlify Functions",
-          value: false,
-        },
-        {
-          name: "Netlify Edge Functions",
-          value: true,
-        },
-      ],
-    },
-  ]);
 
-  return edge;
+  // parse the top level command args to see if edge was passed in
+  const program = new Command();
+  program
+    .option('--netlify-edge', 'explicitly use Netlify Edge Functions to serve this Remix site.', undefined)
+    .option('--no-netlify-edge', 'explicitly do NOT use Netlify Edge Functions to serve this Remix site - use Serverless Functions instead.', undefined)
+  program.allowUnknownOption().parse();
+
+  const passedEdgeOption = program.opts().netlifyEdge;
+
+  if(passedEdgeOption !== true && passedEdgeOption !== false){
+    const { edge } = await inquirer.prompt([
+      {
+        name: "edge",
+        type: "list",
+        message: "Run your Remix site with:",
+        choices: [
+          {
+            name: "Netlify Functions",
+            value: false,
+          },
+          {
+            name: "Netlify Edge Functions",
+            value: true,
+          },
+        ],
+      },
+    ]);
+    return edge;
+  }
+
+  return passedEdgeOption;
 }
 
 module.exports = main;

remix.init/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "commander": "^11.0.0",
     "inquirer": "^8.2.2"
   }
 }

remix.init/root.tsx

@@ -8,11 +8,13 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
-export const meta: MetaFunction = () => ({
-  charset: "utf-8",
-  title: "New Remix App",
-  viewport: "width=device-width,initial-scale=1",
-});
+export const meta: MetaFunction = () => [
+  {
+    charset: "utf-8",
+    title: "New Remix App",
+    viewport: "width=device-width,initial-scale=1",
+  }
+];
 
 export default function App() {
   return (

server.js

@@ -1,4 +1,4 @@
-import { createRequestHandler } from "@remix-run/netlify";
+import { createRequestHandler } from "@netlify/remix-adapter";
 import * as build from "@remix-run/dev/server-build";
 
 export const handler = createRequestHandler({