chore(_official-tutorial): cleanup example (#182)

Author: MichaelDeBoey

_official-tutorial/app/root.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type { LoaderArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 import {
   Form,
@@ -15,13 +15,14 @@ import {
   useNavigation,
   useFetchers,
 } from "@remix-run/react";
-import type { DataFunctionArgs } from "@remix-run/node";
+import * as React from "react";
 
-import { createEmptyContact, getContacts, type ContactRecord } from "./data";
-import ErrorPage from "./error-page";
-import appStylesHref from "./app.css";
+import appStylesHref from "~/app.css";
+import type { ContactRecord } from "~/data";
+import { createEmptyContact, getContacts } from "~/data";
+import ErrorPage from "~/error-page";
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderArgs) {
   const url = new URL(request.url);
   const q = url.searchParams.get("q") || undefined;
   const contacts = await getContacts(q);

_official-tutorial/app/routes/contacts.$contactId.destroy.tsx

@@ -1,12 +1,12 @@
+import type { ActionArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
-import type { DataFunctionArgs } from "@remix-run/node";
 import invariant from "tiny-invariant";
 
-import { deleteContact } from "../data";
+import { deleteContact } from "~/data";
 
 // This route is interesting because it doesn't export a component but redirects
 // once the action is complete. Routes don't have to have components!
-export async function action({ params }: DataFunctionArgs) {
+export async function action({ params }: ActionArgs) {
   invariant(params.contactId, "Missing contactId param");
   await deleteContact(params.contactId);
   return redirect("/");

_official-tutorial/app/routes/contacts.$contactId.edit.tsx

@@ -1,16 +1,16 @@
-import invariant from "tiny-invariant";
-import type { DataFunctionArgs } from "@remix-run/node";
+import type { ActionArgs, LoaderArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 import {
   Form,
   useLoaderData,
   useNavigate,
   useNavigation,
 } from "@remix-run/react";
+import invariant from "tiny-invariant";
 
 import { getContact, updateContact } from "~/data";
 
-export async function loader({ params }: DataFunctionArgs) {
+export async function loader({ params }: LoaderArgs) {
   invariant(params.contactId, "missing contactId param");
   const contact = await getContact(params.contactId);
   if (!contact) {
@@ -21,7 +21,7 @@ export async function loader({ params }: DataFunctionArgs) {
   return contact;
 }
 
-export async function action({ params, request }: DataFunctionArgs) {
+export async function action({ params, request }: ActionArgs) {
   invariant(params.contactId, "missing contactId param");
   const formData = await request.formData();
   await updateContact(params.contactId, {

_official-tutorial/app/routes/contacts.$contactId.tsx

@@ -1,10 +1,10 @@
-import type { DataFunctionArgs } from "@remix-run/node";
+import type { ActionArgs, LoaderArgs } from "@remix-run/node";
 import { Form, useFetcher, useLoaderData } from "@remix-run/react";
 import invariant from "tiny-invariant";
 
 import { updateContact, getContact, type ContactRecord } from "~/data";
 
-export async function loader({ params }: DataFunctionArgs) {
+export async function loader({ params }: LoaderArgs) {
   // `invariant` is a little library that throws an error if the first argument
   // is falsy. It's useful in a TypeScript environment especially with Remix
   // because of `ErrorBoundary`. When errors are thrown from loaders (by
@@ -24,7 +24,7 @@ export async function loader({ params }: DataFunctionArgs) {
   return contact;
 }
 
-export async function action({ params, request }: DataFunctionArgs) {
+export async function action({ params, request }: ActionArgs) {
   invariant(params.contactId, "missing contactId param");
   const formData = await request.formData();
   const favorite = formData.get("favorite") === "true";

_official-tutorial/package.json

@@ -3,16 +3,14 @@
   "sideEffects": false,
   "scripts": {
     "build": "remix build",
-    "dev": "concurrently \"NODE_ENV=development remix dev\" \"NODE_ENV=development nodemon --watch server.js\"",
-    "start": "npm run build && node server.js",
+    "dev": "remix dev",
+    "start": "remix-serve build",
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/express": "^1.13.0",
     "@remix-run/node": "~1.14.2",
     "@remix-run/react": "~1.14.2",
     "@remix-run/serve": "~1.14.2",
-    "express": "^4.18.2",
     "isbot": "^3.6.5",
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",
@@ -25,14 +23,10 @@
     "@remix-run/eslint-config": "~1.14.2",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
-    "concurrently": "^7.6.0",
     "eslint": "^8.27.0",
-    "nodemon": "^2.0.20",
-    "prettier": "^2.8.4",
     "typescript": "^4.8.4"
   },
   "engines": {
     "node": ">=14"
-  },
-  "prettier": {}
+  }
 }

_official-tutorial/remix.config.js

@@ -1,9 +1,9 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
-  ignoredRouteFiles: ["**/.*"],
   future: {
     unstable_dev: true,
   },
+  ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
   // serverBuildPath: "build/index.js",

_official-tutorial/server.js

@@ -1,11 +1,5 @@
 {
-  "include": [
-    "remix.env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "app/contacts.js",
-    "app/routes/.contacts.$contactId.destroy.tsx"
-  ],
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2019"],
     "isolatedModules": true,