ci: wip add script to install, build, and typecheck examples

Signed-off-by: Logan McAnsh <[email protected]>

.github/workflows/changed.yml

@@ -0,0 +1,31 @@
+name: Typecheck changed examples
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  typecheck:
+    if: github.repository == 'remix-run/examples'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: ".nvmrc"
+          cache: "yarn"
+
+      - name: 📥 Install deps
+        run: yarn --frozen-lockfile
+
+      - name: install, build, typecheck
+        run: node ./scripts/test.mjs

dataloader/app/data.server.ts

@@ -1,4 +1,4 @@
-interface User {
+export interface User {
   id: string;
   email: string;
   name: string;

dataloader/app/loaders/userLoader.ts

@@ -1,10 +1,11 @@
+import { DataFunctionArgs } from "@remix-run/node";
 import DataLoader from "dataloader";
 
 import { db } from "~/data.server";
 
 export const createUsersByIdLoader = () =>
   new DataLoader(async (ids: Readonly<string[]>) => {
-    const users = await db.user.findMany({
+    const users = db.user.findMany({
       where: {
         id: {
           in: ids,
@@ -14,3 +15,11 @@ export const createUsersByIdLoader = () =>
     const userMap = new Map(users.map((user) => [user.id, user]));
     return ids.map((id) => userMap.get(id) ?? null);
   });
+
+export interface DataLoaderArgs extends DataFunctionArgs {
+  context: {
+    loaders: {
+      usersById: ReturnType<typeof createUsersByIdLoader>;
+    };
+  };
+}

dataloader/app/routes/users.tsx

@@ -1,13 +1,14 @@
-import type { LoaderArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
+import { User } from "~/data.server";
+import { DataLoaderArgs } from "~/loaders/userLoader";
 
-export const loader = async ({ context }: LoaderArgs) => {
+export const loader = async ({ context }: DataLoaderArgs) => {
   const users = await context.loaders.usersById.loadMany([
     "ef3fcb93-0623-4d10-adbf-4dd865d6688c",
     "2cbad877-2da6-422d-baa6-c6a96a9e085f",
   ]);
-  return json({ users });
+  return json({ users: users.filter((u): u is User => !!u) });
 };
 
 export default function UserNames() {

dataloader/app/routes/users/index.tsx

@@ -1,8 +1,8 @@
-import type { LoaderArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
+import { DataLoaderArgs } from "~/loaders/userLoader";
 
-export const loader = async ({ context }: LoaderArgs) => {
+export const loader = async ({ context }: DataLoaderArgs) => {
   /*
    * For demo purposes:
    * Batching & caching also works with multiple calls to `DataLoader#load`

dataloader/package.json

@@ -16,14 +16,17 @@
     "cross-env": "^7.0.3",
     "dataloader": "^2.0.0",
     "express": "^4.17.3",
-    "morgan": "^1.10.0",
     "isbot": "^3.6.5",
+    "morgan": "^1.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@remix-run/dev": "*",
     "@remix-run/eslint-config": "*",
+    "@types/compression": "1.7.2",
+    "@types/express": "4.17.15",
+    "@types/morgan": "1.9.3",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
     "esbuild-register": "^3.3.2",

dataloader/server/index.ts

@@ -1,11 +1,11 @@
-const path = require("path");
+import path from "path";
 
-const express = require("express");
-const compression = require("compression");
-const morgan = require("morgan");
-const { createRequestHandler } = require("@remix-run/express");
+import express from "express";
+import compression from "compression";
+import morgan from "morgan";
+import { createRequestHandler } from "@remix-run/express";
 
-const { createUsersByIdLoader } = require("../app/loaders/userLoader");
+import { createUsersByIdLoader } from "../app/loaders/userLoader";
 
 const MODE = process.env.NODE_ENV;
 const BUILD_DIR = path.join(process.cwd(), "server/build");

dataloader/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "server/index.ts"],
   "compilerOptions": {
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
     "lib": ["DOM", "DOM.Iterable", "ES2019"],
     "isolatedModules": true,
     "esModuleInterop": true,

file-and-cloudinary-upload/app/routes/cloudinary-upload.tsx

@@ -33,7 +33,7 @@ export const action = async ({ request }: ActionArgs) => {
 };
 
 export default function Index() {
-  const data = useActionData<typeof action>();
+  const actionData = useActionData<typeof action>();
 
   return (
     <>
@@ -44,12 +44,15 @@ export default function Index() {
         <input id="img-desc" type="text" name="desc" />
         <button type="submit">upload to cloudinary</button>
       </Form>
-      {data?.error ? <h2>{data.error}</h2> : null}
+      {actionData && "error" in actionData ? <h2>{actionData.error}</h2> : null}
 
-      {data?.imgSrc ? (
+      {actionData && "imgSrc" in actionData ? (
         <>
           <h2>uploaded image</h2>
-          <img src={data.imgSrc} alt={data.imgDesc || "Upload result"} />
+          <img
+            src={actionData.imgSrc}
+            alt={actionData.imgDesc || "Upload result"}
+          />
         </>
       ) : null}
     </>

file-and-cloudinary-upload/app/routes/local-upload.tsx

@@ -26,20 +26,20 @@ export const action = async ({ request }: ActionArgs) => {
 };
 
 export default function Index() {
-  const data = useActionData<typeof action>();
+  const actionData = useActionData<typeof action>();
 
   return (
     <>
       <Form method="post" encType="multipart/form-data">
         <input type="file" name="img" accept="image/*" />
         <button type="submit">upload image</button>
       </Form>
-      {data?.error ? <h2>{data.error}</h2> : null}
+      {actionData && "error" in actionData ? <h2>{actionData.error}</h2> : null}
 
-      {data?.imgSrc ? (
+      {actionData && "imgSrc" in actionData ? (
         <>
           <h2>uploaded image</h2>
-          <img alt="uploaded" src={data.imgSrc} />
+          <img alt="uploaded" src={actionData.imgSrc} />
         </>
       ) : null}
     </>

file-and-cloudinary-upload/app/utils/utils.server.ts

@@ -1,4 +1,4 @@
-import cloudinary from "cloudinary";
+import cloudinary, { UploadApiResponse } from "cloudinary";
 import { writeAsyncIterableToWritable } from "@remix-run/node";
 
 cloudinary.v2.config({
@@ -8,21 +8,23 @@ cloudinary.v2.config({
 });
 
 async function uploadImage(data: AsyncIterable<Uint8Array>) {
-  const uploadPromise = new Promise(async (resolve, reject) => {
-    const uploadStream = cloudinary.v2.uploader.upload_stream(
-      {
-        folder: "remix",
-      },
-      (error, result) => {
-        if (error) {
-          reject(error);
-          return;
+  const uploadPromise = new Promise<UploadApiResponse>(
+    async (resolve, reject) => {
+      const uploadStream = cloudinary.v2.uploader.upload_stream(
+        {
+          folder: "remix",
+        },
+        (error, result) => {
+          if (error || !result) {
+            reject(error);
+            return;
+          }
+          resolve(result);
         }
-        resolve(result);
-      }
-    );
-    await writeAsyncIterableToWritable(data, uploadStream);
-  });
+      );
+      await writeAsyncIterableToWritable(data, uploadStream);
+    }
+  );
 
   return uploadPromise;
 }

package.json

@@ -20,5 +20,11 @@
   },
   "engines": {
     "node": ">=14"
+  },
+  "dependencies": {
+    "@antfu/ni": "^0.18.8",
+    "@npmcli/package-json": "^3.0.0",
+    "execa": "^6.1.0",
+    "fs-extra": "11.1.0"
   }
 }

pm-app/app/routes/register.tsx

@@ -125,8 +125,15 @@ export const action = async ({ request }: ActionArgs) => {
 };
 
 export default function Register() {
-  const actionData = useActionData<typeof action>() || {};
-  const { fieldErrors, fields, formError } = actionData;
+  const actionData = useActionData<typeof action>();
+  let fieldErrors =
+    actionData && "fieldErrors" in actionData
+      ? actionData.fieldErrors
+      : undefined;
+  let formError =
+    actionData && "formError" in actionData ? actionData.formError : undefined;
+  let fields =
+    actionData && "fields" in actionData ? actionData.fields : undefined;
   const [searchParams] = useSearchParams();
 
   React.useEffect(() => {
@@ -169,7 +176,7 @@ export default function Register() {
               id="form-error-text"
               role="alert"
             >
-              {actionData.formError}
+              {formError}
             </span>
           </div>
         ) : null}
@@ -194,7 +201,7 @@ export default function Register() {
               error={fieldErrors?.nameFirst}
             >
               <Label>First Name</Label>
-              <Field defaultValue={fields?.nameFirst} />
+              <Field defaultValue={fields?.nameFirst || undefined} />
               <FieldError />
             </FieldProvider>
             <FieldProvider
@@ -203,7 +210,7 @@ export default function Register() {
               error={fieldErrors?.nameLast}
             >
               <Label>Last Name</Label>
-              <Field defaultValue={fields?.nameLast} />
+              <Field defaultValue={fields?.nameLast || undefined} />
               <FieldError />
             </FieldProvider>
             <FieldProvider
@@ -216,7 +223,7 @@ export default function Register() {
               <Field
                 type="email"
                 placeholder="[email protected]"
-                defaultValue={fields?.email}
+                defaultValue={fields?.email || undefined}
               />
               <FieldError />
             </FieldProvider>
@@ -227,7 +234,10 @@ export default function Register() {
               error={fieldErrors?.password}
             >
               <Label>Password</Label>
-              <Field type="password" defaultValue={fields?.password} />
+              <Field
+                type="password"
+                defaultValue={fields?.password || undefined}
+              />
               <FieldError />
             </FieldProvider>
             <Button className="register__email-submit-button">Sign Up</Button>

pm-app/app/ui/form.tsx

@@ -9,7 +9,7 @@ export function useFieldContext() {
   return React.useContext(FieldContext);
 }
 
-const FieldProvider = React.forwardRef<
+export const FieldProvider = React.forwardRef<
   HTMLDivElement,
   React.PropsWithChildren<FieldContextValue & { className?: string }>
 >(({ children, className, ...ctx }, ref) => {

pm-app/package.json

@@ -2,19 +2,19 @@
   "private": true,
   "sideEffects": false,
   "scripts": {
-    "build": "run-s \"build:*\"",
     "build:css": "npm run generate:css -- --env production",
     "build:remix": "remix build",
+    "build": "run-s \"build:*\"",
     "db:check": "docker ps",
     "db:reset": "prisma migrate reset --force",
     "db:start": "docker compose up -d",
     "db:stop": "docker compose down",
     "db:update": "prisma migrate dev",
     "deploy": "flyctl deploy",
-    "dev": "npm run db:start && pm2-dev pm2.config.js",
     "dev:css": "npm run generate:css -- --watch",
     "dev:remix": "remix dev",
     "dev:server": "node server/index.js",
+    "dev": "npm run db:start && pm2-dev pm2.config.js",
     "generate:css": "postcss app/styles --base app/styles --dir app/dist/styles",
     "start": "node server/index.js",
     "typecheck": "tsc -b"