Merge branch 'dev' into logan/bump-esbuild-auto-jsx-transform

.changeset/green-crabs-join.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": minor
+---
+
+Added support for importing `.zip` files

.changeset/neat-beds-unite.md

@@ -0,0 +1,21 @@
+---
+"remix": minor
+"@remix-run/cloudflare": minor
+"@remix-run/deno": minor
+"@remix-run/node": minor
+"@remix-run/react": minor
+"@remix-run/serve": minor
+"@remix-run/server-runtime": minor
+---
+
+Each runtime package (@remix-run/cloudflare,@remix-run/deno,@remix-run/node) now exports `SerializeFrom`, which is used to
+infer the JSON-serialized return type of loaders and actions.
+
+Example:
+
+```ts
+type MyLoaderData = SerializeFrom<typeof loader>;
+type MyActionData = SerializeFrom<typeof action>;
+```
+
+This is what `useLoaderData<typeof loader>` and `useActionData<typeof action>` use under-the-hood.

.changeset/nice-fake-duck.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Add support for importing avif and zip files

.changeset/red-apples-stew.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Fix import -> require conversion of the convert-to-js migration

.changeset/stupid-houses-sing.md

@@ -0,0 +1,56 @@
+---
+"remix": minor
+"@remix-run/serve": minor
+"@remix-run/server-runtime": minor
+---
+
+`MetaFunction` type can now infer `data` and `parentsData` types from loaders
+
+For example, if this meta function is for `/sales/customers/$customerId`:
+
+```ts
+// app/root.tsx
+const loader = () => {
+  return json({ hello: "world" } as const);
+};
+export type Loader = typeof loader;
+
+// app/routes/sales.tsx
+const loader = () => {
+  return json({ salesCount: 1074 });
+};
+export type Loader = typeof loader;
+
+// app/routes/sales/customers.tsx
+const loader = () => {
+  return json({ customerCount: 74 });
+};
+export type Loader = typeof loader;
+
+// app/routes/sales/customers/$customersId.tsx
+import type { Loader as RootLoader } from "../../../root";
+import type { Loader as SalesLoader } from "../../sales";
+import type { Loader as CustomersLoader } from "../../sales/customers";
+
+const loader = () => {
+  return json({ name: "Customer name" });
+};
+
+const meta: MetaFunction<
+  typeof loader,
+  {
+    root: RootLoader;
+    "routes/sales": SalesLoader;
+    "routes/sales/customers": CustomersLoader;
+  }
+> = ({ data, parentsData }) => {
+  const { name } = data;
+  //      ^? string
+  const { customerCount } = parentsData["routes/sales/customers"];
+  //      ^? number
+  const { salesCount } = parentsData["routes/sales"];
+  //      ^? number
+  const { hello } = parentsData["root"];
+  //      ^? "world"
+};
+```

.changeset/thirty-pots-lay.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/server-runtime": patch
+---
+
+Make the loadContext parameter not optional so that augmenting AppLoadContext does not require checking if the context is undefined

.changeset/wordle-is-weird.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/node": patch
+---
+
+Fix fileStorage session delete so it doesn't destroy the entire session directory when destroying an empty file session.

.github/workflows/release-test.yml

@@ -14,6 +14,6 @@ on:
 jobs:
   test:
     if: github.repository == 'remix-run/remix'
-    uses: remix-run/remix/.github/workflows/reusable-test.yml@main
+    uses: ./.github/workflows/reusable-test.yml
     with:
       node_version: "[14, 16, 18]"

.github/workflows/reusable-test.yml

@@ -12,6 +12,7 @@ on:
 
 env:
   CI: true
+  CYPRESS_INSTALL_BINARY: 0
 
 jobs:
   build:
@@ -97,7 +98,7 @@ jobs:
         run: "yarn test:primary"
 
   integration:
-    name: "👀 Integration Test: (OS: ${{ matrix.os }} Node: ${{ matrix.node }})"
+    name: "👀 Integration Test: (OS: ${{ matrix.os }} Node: ${{ matrix.node }} Browser: ${{ matrix.browser }})"
     strategy:
       fail-fast: false
       matrix:
@@ -106,13 +107,10 @@ jobs:
           - ubuntu-latest
           # - macos-latest
           - windows-latest
-        include:
-          - os: ubuntu-latest
-            playwright_binary_path: ~/.cache/ms-playwright
-          # - os: macos-latest
-          #   playwright_binary_path: ~/Library/Caches/ms-playwright
-          - os: windows-latest
-            playwright_binary_path: '~\\AppData\\Local\\ms-playwright'
+        browser:
+          - chromium
+          # - firefox
+          - webkit
 
     runs-on: ${{ matrix.os }}
     steps:
@@ -131,34 +129,8 @@ jobs:
       - name: 📥 Install deps
         run: yarn --frozen-lockfile
 
-      # playwright recommends if you cache the binaries to keep it tied to the version of playwright you are using.
-      # https://playwright.dev/docs/ci#caching-browsers
-      - name: 🕵️‍♂️ Get current Playwright version
-        id: playwright-version
-        shell: bash
-        run: |
-          playwright_version=$(node -e "console.log(require('@playwright/test/package.json').version)")
-          echo "::set-output name=version::${playwright_version}"
-
-      - name: 🤖 Cache Playwright binaries
-        uses: actions/cache@v3
-        id: playwright-cache
-        with:
-          path: ${{ matrix.playwright_binary_path }}
-          key: ${{ runner.os }}-${{ runner.arch }}-cache-playwright-${{ steps.playwright-version.outputs.version }}
-
-      - name: 🖨️ Playwright info
-        shell: bash
-        run: |
-          echo "OS: ${{ matrix.os }}"
-          echo "Playwright version: ${{ steps.playwright-version.outputs.version }}"
-          echo "Playwright install dir: ${{ matrix.playwright_binary_path }}"
-          echo "Cache key: ${{ runner.os }}-${{ runner.arch }}-cache-playwright-${{ steps.playwright-version.outputs.version }}"
-          echo "Cache hit: ${{ steps.playwright-cache.outputs.cache-hit == 'true' }}"
-
       - name: 📥 Install Playwright
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: npx playwright install --with-deps
 
-      - name: 👀 Run Integration Tests
-        run: "yarn test:integration"
+      - name: 👀 Run Integration Tests ${{ matrix.browser }}
+        run: "yarn test:integration --project=${{ matrix.browser }}"

.github/workflows/test.yml

@@ -17,6 +17,6 @@ on:
 jobs:
   test:
     if: github.repository == 'remix-run/remix'
-    uses: remix-run/remix/.github/workflows/reusable-test.yml@main
+    uses: ./.github/workflows/reusable-test.yml
     with:
       node_version: '["latest"]'

contributors.yml

@@ -19,6 +19,7 @@
 - alisd23
 - alvinthen
 - amorriscode
+- andreiduca
 - andrelandgraf
 - andrewbrey
 - AndrewIngram
@@ -203,6 +204,7 @@
 - juliaqiuxy
 - justinnoel
 - justinsalasdev
+- justinwaite
 - justsml
 - juwiragiye
 - jveldridge
@@ -293,6 +295,7 @@
 - msutkowski
 - mtt87
 - mush159
+- n8agrin
 - na2hiro
 - nareshbhatia
 - navid-kalaei

docs/api/conventions.md

@@ -1072,22 +1072,55 @@ export const meta: MetaFunction = () => ({
 - `parentsData` is a hashmap of all the data exported by `loader` functions of current route and all of its parents
 
 ```tsx
-export const meta: MetaFunction = ({ data, params }) => {
+export const meta: MetaFunction<typeof loader> = ({
+  data,
+  params,
+}) => {
   if (!data) {
     return {
       title: "Missing Shake",
       description: `There is no shake with the ID of ${params.shakeId}. 😢`,
     };
   }
 
-  const { shake } = data as LoaderData;
+  const { shake } = data;
   return {
     title: `${shake.name} milkshake`,
     description: shake.summary,
   };
 };
 ```
 
+To infer types for `parentsData`, provide a mapping from the route's file path (relative to `app/`) to that route loader type:
+
+```tsx
+// app/routes/sales.tsx
+const loader = () => {
+  return json({ salesCount: 1074 });
+};
+export type Loader = typeof loader;
+```
+
+```tsx
+import type { Loader as SalesLoader } from "../../sales";
+
+const loader = () => {
+  return json({ name: "Customer name" });
+};
+
+const meta: MetaFunction<
+  typeof loader,
+  {
+    "routes/sales": SalesLoader;
+  }
+> = ({ data, parentsData }) => {
+  const { name } = data;
+  //      ^? string
+  const { salesCount } = parentsData["routes/sales"];
+  //      ^? number
+};
+```
+
 ### `links`
 
 The links function defines which `<link>` elements to add to the page when the user visits a route.

integration/form-test.ts

@@ -185,6 +185,9 @@ test.describe("Forms", () => {
 
         "app/routes/blog/index.jsx": js`
           import { Form } from "@remix-run/react";
+          export function action() {
+            return { ok: true };
+          }
           export default function() {
             return (
               <>
@@ -616,6 +619,27 @@ test.describe("Forms", () => {
         let el = getElement(html, `#${INDEX_ROUTE_TOO_MANY_DOTS_ACTION}`);
         expect(el.attr("action")).toMatch("/");
       });
+
+      test("does not repeatedly add index params on submissions", async ({
+        page,
+      }) => {
+        let app = new PlaywrightFixture(appFixture, page);
+        await app.goto("/blog");
+        let html = await app.getHtml();
+        let el = getElement(html, `#${INDEX_ROUTE_NO_ACTION}`);
+        expect(el.attr("action")).toBe("/blog?index");
+        expect(app.page.url()).toMatch(/\/blog$/);
+
+        await app.clickElement(`#${INDEX_ROUTE_NO_ACTION} button`);
+        el = getElement(html, `#${INDEX_ROUTE_NO_ACTION}`);
+        expect(el.attr("action")).toBe("/blog?index");
+        expect(app.page.url()).toMatch(/\/blog\?index$/);
+
+        await app.clickElement(`#${INDEX_ROUTE_NO_ACTION} button`);
+        el = getElement(html, `#${INDEX_ROUTE_NO_ACTION}`);
+        expect(el.attr("action")).toBe("/blog?index");
+        expect(app.page.url()).toMatch(/\/blog\?index$/);
+      });
     });
 
     test.describe("in a layout route", () => {
@@ -761,13 +785,21 @@ test.describe("Forms", () => {
 
   test("<Form> submits the submitter's value appended to the form data", async ({
     page,
+    browserName,
   }) => {
     let app = new PlaywrightFixture(appFixture, page);
     await app.goto("/submitter");
     await app.clickElement("text=Add Task");
     await page.waitForLoadState("load");
-    expect(await app.getHtml("pre")).toBe(
-      `<pre>tasks=first&amp;tasks=second&amp;tasks=</pre>`
-    );
+    // TODO: remove after playwright ships safari 16
+    if (browserName === "webkit") {
+      expect(await app.getHtml("pre")).toBe(
+        `<pre>tasks=first&amp;tasks=second&amp;tasks=&amp;tasks=</pre>`
+      );
+    } else {
+      expect(await app.getHtml("pre")).toBe(
+        `<pre>tasks=first&amp;tasks=second&amp;tasks=</pre>`
+      );
+    }
   });
 });

integration/playwright.config.ts

@@ -23,6 +23,12 @@ const config: PlaywrightTestConfig = {
         ...devices["Desktop Chrome"],
       },
     },
+    {
+      name: "webkit",
+      use: {
+        ...devices["Desktop Safari"],
+      },
+    },
   ],
 };
 

packages/remix-architect/binaryTypes.ts

@@ -20,6 +20,7 @@ const binaryTypes = [
   "font/woff",
   "font/woff2",
   // Images
+  "image/avif",
   "image/bmp",
   "image/gif",
   "image/jpeg",

packages/remix-cloudflare/index.ts

@@ -32,7 +32,6 @@ export type {
   CookieParseOptions,
   CookieSerializeOptions,
   CookieSignatureOptions,
-  CreateRequestHandlerFunction,
   DataFunctionArgs,
   EntryContext,
   ErrorBoundaryComponent,
@@ -53,12 +52,16 @@ export type {
   RequestHandler,
   RouteComponent,
   RouteHandle,
+  SerializeFrom,
   ServerBuild,
   ServerEntryModule,
   Session,
   SessionData,
   SessionIdStorageStrategy,
   SessionStorage,
-  UploadHandler,
+  SignFunction,
+  TypedResponse,
+  UnsignFunction,
   UploadHandlerPart,
+  UploadHandler,
 } from "@remix-run/server-runtime";