chore: get this mostly working...

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

Author: mcansh

.gitignore

@@ -8,4 +8,5 @@ yarn.lock
 pnpm-lock.yaml
 pnpm-lock.yml
 
-!./yarn.lock
+!/yarn.lock
+!yarn-pnp/yarn.lock

__scripts/test.mjs

@@ -5,13 +5,13 @@ import os from "node:os";
 
 import { execa } from "execa";
 import { detect, getCommand } from "@antfu/ni";
-import PackageJson from "@npmcli/package-json";
 import fse from "fs-extra";
 import PQueue from "p-queue";
+import PackageJson from "@npmcli/package-json";
 
 console.log({ concurrency: os.cpus().length });
 
-const queue = new PQueue({ concurrency: os.cpus().length });
+const queue = new PQueue({ concurrency: os.cpus().length, autoStart: false });
 
 const TO_IGNORE = [".git", ".github", "__scripts", "yarn.lock", "package.json"];
 
@@ -40,9 +40,7 @@ if (process.env.CI) {
     .filter((entry) => entry.isDirectory())
     .filter((entry) => !TO_IGNORE.includes(entry.name))
     .map((entry) => entry.name)
-    .filter((entry) => {
-      return fse.existsSync(path.join(entry, "package.json"));
-    });
+    .filter((entry) => fse.existsSync(path.join(entry, "package.json")));
 }
 
 const list = new Intl.ListFormat("en", { style: "long", type: "conjunction" });
@@ -53,43 +51,47 @@ for (const example of examples) {
   queue.add(async () => {
     const pkgJson = await PackageJson.load(example);
 
-    const remixDeps = Object.keys(pkgJson.content.dependencies).filter((d) => {
-      return d.startsWith("@remix-run/");
-    });
-
-    const remixDevDeps = Object.keys(pkgJson.content.devDependencies).filter(
-      (d) => {
-        return d.startsWith("@remix-run/");
-      }
-    );
-
+    // TODO: figure out why this is blowing up
     pkgJson.update({
       dependencies: {
         ...pkgJson.content.dependencies,
-        ...Object.fromEntries(remixDeps.map((d) => [d, `latest`])),
-      },
-      devDependencies: {
-        ...pkgJson.content.devDependencies,
-        ...Object.fromEntries(remixDevDeps.map((d) => [d, `latest`])),
+        "@vanilla-extract/css": "1.9.2",
       },
     });
 
     await pkgJson.save();
 
     /** @type {import('execa').Options} */
-    const options = { cwd: example };
+    const options = { cwd: example, reject: false };
 
+    // detect package manager
     const detected = await detect({ cwd: example });
 
-    const install = await getCommand(detected, "install", ["--silent"]);
+    const hasSetup = !!pkgJson.content.scripts?.__setup;
+
+    if (hasSetup) {
+      const setup = await getCommand(detected, "run", ["__setup"]);
+      const setupArgs = setup.split(" ").slice(1);
+      console.log("🔧 Running setup script for", example);
+      const setupResult = await execa(detected, setupArgs, options);
+      if (setupResult.exitCode) {
+        console.error(setupResult.stderr);
+        throw new Error(`Error running setup script for ${example}`);
+      }
+    }
+
+    const install = await getCommand(detected, "install", [
+      "--silent",
+      "--legacy-peer-deps",
+    ]);
+    // this is silly, but is needed in order for execa to work
     const installArgs = install.split(" ").slice(1, -1);
-    console.log(`📥 Installing ${example} with ${install}`);
+    console.log(`📥 Installing ${example} with "${install}"`);
     const installResult = await execa(detected, installArgs, options);
 
     if (installResult.exitCode) {
-      console.error(`Error installing ${example}`);
       console.error(installResult.stderr);
-      return;
+      throw new Error(`Error installing ${example}`);
     }
 
     const hasPrisma = fse.existsSync(
@@ -105,56 +107,34 @@ for (const example of examples) {
       );
 
       if (prismaGenerate.exitCode) {
-        console.error(`Error generating prisma types for ${example}`);
         console.error(prismaGenerate.stderr);
-        return;
+        throw new Error(`Error generating prisma types for ${example}`);
       }
     }
 
     const build = await getCommand(detected, "run", ["build"]);
     const buildArgs = build.split(" ").slice(1);
-    console.log(`📦 Building ${example} with ${build}`);
+    console.log(`📦 Building ${example} with "${build}"`);
     const buildResult = await execa(detected, buildArgs, options);
 
     if (buildResult.exitCode) {
-      console.error(`Error building ${example}`);
       console.error(buildResult.stderr);
-      return;
+      throw new Error(`Error building ${example}`);
     }
 
     const typecheck = await getCommand(detected, "run", ["typecheck"]);
     const typecheckArgs = typecheck.split(" ").slice(1);
-    console.log(`🕵️ Typechecking ${example} with ${typecheck}`);
+    console.log(`🕵️ Typechecking ${example} with "${typecheck}"`);
     const typecheckResult = await execa(detected, typecheckArgs, options);
 
     if (typecheckResult.exitCode) {
-      console.error(`Error typechecking ${example}`);
       console.error(typecheckResult.stderr);
-      return;
+      throw new Error(`Error typechecking ${example}`);
     }
-
-    pkgJson.update({
-      dependencies: {
-        ...pkgJson.content.dependencies,
-        ...Object.fromEntries(remixDeps.map((d) => [d, `*`])),
-      },
-      devDependencies: {
-        ...pkgJson.content.devDependencies,
-        ...Object.fromEntries(remixDevDeps.map((d) => [d, `*`])),
-      },
-    });
-
-    await pkgJson.save();
   });
 }
 
-try {
-  queue.start();
-} catch (error) {
-  console.error(error);
-  process.exit(1);
-}
-
-// const rejected = promises.filter((s) => s.status === "rejected");
-// rejected.forEach((s) => console.error(s.reason));
-// process.exit(rejected.length > 0 ? 1 : 0);
+queue.start();
+queue.on("error", (error) => {
+  console.error("🚨", error);
+});

_official-blog-tutorial/tsconfig.json

@@ -2,6 +2,8 @@
   "exclude": ["./cypress", "./cypress.config.ts"],
   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
     "lib": ["DOM", "DOM.Iterable", "ES2019"],
     "types": ["vitest/globals"],
     "isolatedModules": true,

_official-jokes/app/routes/login.tsx

@@ -27,7 +27,8 @@ function validatePassword(password: unknown) {
   }
 }
 
-function validateUrl(url: string) {
+function validateUrl(url: FormDataEntryValue) {
+  if (typeof url !== "string") return;
   const urls = ["/jokes", "/", "https://remix.run"];
   if (urls.includes(url)) {
     return url;

basic/app/routes/demos/params/$id.tsx

@@ -29,6 +29,7 @@ export const loader = async ({ params }: LoaderArgs) => {
   // Sometimes your code just blows up and you never anticipated it. Remix will
   // automatically catch it and send the UI to the error boundary.
   if (params.id === "kaboom") {
+    // @ts-expect-error
     lol();
   }
 

client-only-components/app/components/complex-component.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 
 export function ComplexComponent() {
-  const [count, setCount] = useState(() => {
+  const [count, setCount] = useState<number>(() => {
     const stored = localStorage.getItem("count");
     if (!stored) return 0;
     return JSON.parse(stored);

combobox-resource-route/package.json

@@ -12,8 +12,8 @@
     "@remix-run/node": "~1.14.2",
     "@remix-run/react": "~1.14.2",
     "@remix-run/serve": "~1.14.2",
-    "match-sorter": "^6.3.1",
     "isbot": "^3.6.5",
+    "match-sorter": "^6.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

emotion/app/entry.server.tsx

@@ -11,7 +11,7 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: any
 ) {
   const cache = createEmotionCache();
   const { extractCriticalToChunks } = createEmotionServer(cache);

firebase/package.json

@@ -30,6 +30,6 @@
     "typescript": "^4.8.4"
   },
   "engines": {
-    "node": "16"
+    "node": ">=16"
   }
 }

graphql-api/app/routes/character/$id.tsx

@@ -21,8 +21,7 @@ export const loader = async ({ params }: LoaderArgs) => {
  * the Remix loader & route params.
  */
 export default function Character() {
-  const loader = useLoaderData<typeof loader>();
-  const { data } = loader;
+  const { data } = useLoaderData<typeof loader>();
 
   const character = data.character;