Merge pull request #137 from netlify/vite

feat: add support for Vite
netlify · Feb 22, 2024 · 65f7e25 · 65f7e25
2 parents a5ca447 + 3f86b56
commit 65f7e25
Show file tree

Hide file tree

Showing 33 changed files with 11,232 additions and 476 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,83 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.js"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.github/workflows/add-zenhub-label.yml b/.github/workflows/add-zenhub-label.yml
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,4 @@ node_modules
 
 # Local Netlify folder
 .netlify
+.DS_Store
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
diff --git a/README.md b/README.md
@@ -1,14 +1,13 @@
 # Netlify Remix Template
 
-Welcome to the Netlify Remix Template project.
+Welcome to the Netlify Remix Template project. If you were expecting this to be your site, run `remix init` in the root of this project to get started.
 
 To use the template, run
 
 ```bash
 npx create-remix@latest --template netlify/remix-template
 ```
 
-
 This project includes:
 
 - Netlify Functions template for Remix sites
@@ -27,7 +26,7 @@ If you're new to Remix stacks and the remix.init concept, see the official [Remi
 Run
 
 ```bash
-npx create-remix@latest --template ./
+npx create-remix@latest --template ./remix-template
 ```
 
 to test your changes to the template. Follow the steps the Remix CLI prompts you with to create a new project. Ensure to test for both the Netlify Functions template and the Netlify Edge Functions template.
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,31 +1,24 @@
-import type { MetaFunction } from "@remix-run/node";
 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 charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <Meta />
         <Links />
       </head>
       <body>
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -1,30 +1,22 @@
-export function headers({
-  loaderHeaders,
-  parentHeaders,
-}: {
-  loaderHeaders: Headers;
-  parentHeaders: Headers;
-}) {
-  console.log(
-    "This is an example of how to set caching headers for a route, feel free to change the value of 60 seconds or remove the header"
-  );
-  return {
-    // This is an example of how to set caching headers for a route
-    // For more info on headers in Remix, see: https://remix.run/docs/en/v1/route/headers
-    "Cache-Control": "public, max-age=60, s-maxage=60",
-  };
-}
+import type { MetaFunction } from "@remix-run/deno";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "New Remix App" },
+    { name: "description", content: "Welcome to Remix!" },
+  ];
+};
 
 export default function Index() {
   return (
-    <main style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
       <h1>Welcome to Remix</h1>
       <ul>
         <li>
           <a
             target="_blank"
             href="https://remix.run/tutorials/blog"
-            rel="noreferrer noopener"
+            rel="noreferrer"
           >
             15m Quickstart Blog Tutorial
           </a>
@@ -33,21 +25,17 @@ export default function Index() {
           <a
             target="_blank"
             href="https://remix.run/tutorials/jokes"
-            rel="noreferrer noopener"
+            rel="noreferrer"
           >
             Deep Dive Jokes App Tutorial
           </a>
         </li>
         <li>
-          <a
-            target="_blank"
-            href="https://remix.run/docs"
-            rel="noreferrer noopener"
-          >
+          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
             Remix Docs
           </a>
         </li>
       </ul>
-    </main>
+    </div>
   );
 }
diff --git a/env.d.ts b/env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/node" />
+/// <reference types="vite/client" />
diff --git a/globals.d.ts b/globals.d.ts
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,3 +7,4 @@ node_modules

		# Local Netlify folder
		.netlify
		.DS_Store
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="@remix-run/node" />
		/// <reference types="vite/client" />