Merge branch 'release-next'

Author: brophdawg11

.github/workflows/deduplicate-yarn.yml

@@ -0,0 +1,43 @@
+name: ⚙️ Deduplicate yarn.lock
+
+on:
+  push:
+    branches:
+      - dev
+    paths:
+      - ./yarn.lock
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  format:
+    if: github.repository == 'remix-run/react-router'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: ".nvmrc"
+          cache: "yarn"
+
+      - name: ⚙️ Dedupe yarn.lock
+        run: npx yarn-deduplicate && rm -rf ./node_modules && yarn
+
+      - name: 💪 Commit
+        run: |
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git add .
+          if [ -z "$(git status --porcelain)" ]; then
+            echo "💿 no deduplication needed"
+            exit 0
+          fi
+          git commit -m "chore: deduplicate `yarn.lock`"
+          git push
+          echo "💿 https://github.com/$GITHUB_REPOSITORY/commit/$(git rev-parse HEAD)"

.github/workflows/test.yml

@@ -21,7 +21,14 @@ concurrency:
 
 jobs:
   test:
-    name: 🧪 Test
+    name: "🧪 Test: (Node: ${{ matrix.node }})"
+    strategy:
+      fail-fast: false
+      matrix:
+        node:
+          - 16
+          - 18
+
     runs-on: ubuntu-latest
 
     steps:
@@ -33,7 +40,7 @@ jobs:
         with:
           cache: yarn
           check-latest: true
-          node-version-file: ".nvmrc"
+          node-version: ${{ matrix.node }}
 
       - name: Disable GitHub Actions Annotations
         run: |

contributors.yml

@@ -220,3 +220,4 @@
 - yionr
 - yuleicul
 - zheng-chuang
+- holynewbie

docs/hooks/use-fetcher.md

@@ -38,6 +38,8 @@ function SomeComponent() {
   // build your UI with these properties
   fetcher.state;
   fetcher.formData;
+  fetcher.json;
+  fetcher.text;
   fetcher.formMethod;
   fetcher.formAction;
   fetcher.data;
@@ -132,6 +134,8 @@ export function useIdleLogout() {
 }
 ```
 
+`fetcher.submit` is a wrapper around a [`useSubmit`][use-submit] call for the fetcher instance, so it also accepts the same options as `useSubmit`.
+
 If you want to submit to an index route, use the [`?index` param][indexsearchparam].
 
 If you find yourself calling this function inside of click handlers, you can probably simplify your code by using `<fetcher.Form>` instead.
@@ -200,6 +204,14 @@ function TaskCheckbox({ task }) {
 }
 ```
 
+## `fetcher.json`
+
+When using `fetcher.submit(data, { formEncType: "application/json" })`, the submitted JSON is available via `fetcher.json`.
+
+## `fetcher.text`
+
+When using `fetcher.submit(data, { formEncType: "text/plain" })`, the submitted text is available via `fetcher.text`.
+
 ## `fetcher.formAction`
 
 Tells you the action url the form is being submitted to.
@@ -231,3 +243,4 @@ fetcher.formMethod; // "post"
 [link]: ../components/link
 [form]: ../components/form
 [api-development-strategy]: ../guides/api-development-strategy
+[use-submit]: ./use-submit.md

docs/hooks/use-navigation.md

@@ -23,6 +23,8 @@ function SomeComponent() {
   navigation.state;
   navigation.location;
   navigation.formData;
+  navigation.json;
+  navigation.text;
   navigation.formAction;
   navigation.formMethod;
 }
@@ -92,6 +94,14 @@ Any POST, PUT, PATCH, or DELETE navigation that started from a `<Form>` or `useS
 
 In the case of a GET form submission, `formData` will be empty and the data will be reflected in `navigation.location.search`.
 
+## `navigation.json`
+
+Any POST, PUT, PATCH, or DELETE navigation that started from a `useSubmit(payload, { encType: "application/json" })` will have your JSON value available in `navigation.json`.
+
+## `navigation.text`
+
+Any POST, PUT, PATCH, or DELETE navigation that started from a `useSubmit(payload, { encType: "text/plain" })` will have your text value available in `navigation.text`.
+
 ## `navigation.location`
 
 This tells you what the next [location][location] is going to be.

docs/hooks/use-submit.md

@@ -78,14 +78,66 @@ formData.append("cheese", "gouda");
 submit(formData);
 ```
 
+Or you can submit `URLSearchParams`:
+
+```tsx
+let searchParams = new URLSearchParams();
+searchParams.append("cheese", "gouda");
+submit(searchParams);
+```
+
+Or anything that the `URLSearchParams` constructor accepts:
+
+```tsx
+submit("cheese=gouda&toasted=yes");
+submit([
+  ["cheese", "gouda"],
+  ["toasted", "yes"],
+]);
+```
+
+The default behavior if you submit a JSON object for a POST submission is to encode the data into `FormData`:
+
+```tsx
+submit({ key: "value" }, { method: "post" });
+// will serialize into request.formData() in your action
+// and will show up on useNavigation().formData during the navigation
+```
+
+Or you can opt-into JSON encoding:
+
+```tsx
+submit(
+  { key: "value" },
+  { method: "post", encType: "application/json" }
+);
+// will serialize into request.json() in your action
+// and will show up on useNavigation().json during the navigation
+
+submit('{"key":"value"}', {
+  method: "post",
+  encType: "application/json",
+});
+// will encode into request.json() in your action
+// and will show up on useNavigation().json during the navigation
+```
+
+Or plain text:
+
+```tsx
+submit("value", { method: "post", encType: "text/plain" });
+// will serialize into request.text() in your action
+// and will show up on useNavigation().text during the navigation
+```
+
 ## Submit options
 
-The second argument is a set of options that map directly to form submission attributes:
+The second argument is a set of options that map (mostly) directly to form submission attributes:
 
 ```tsx
 submit(null, {
-  action: "/logout",
   method: "post",
+  action: "/logout",
 });
 
 // same as

docs/route/action.md

@@ -101,6 +101,10 @@ formData.get("lyrics");
 
 For more information on `formData` see [Working with FormData][workingwithformdata].
 
+### Opt-in serialization types
+
+Note that when using [`useSubmit`][usesubmit] you may also pass `encType: "application/json"` or `encType: "text/plain"` to instead serialize your payload into `request.json()` or `request.text()`.
+
 ## Returning Responses
 
 While you can return anything you want from an action and get access to it from [`useActionData`][useactiondata], you can also return a web [Response][response].
@@ -200,6 +204,7 @@ If a button name/value isn't right for your use case, you could also use a hidde
 [form]: ../components/form
 [workingwithformdata]: ../guides/form-data
 [useactiondata]: ../hooks/use-action-data
+[usesubmit]: ../hooks/use-submit
 [returningresponses]: ./loader#returning-responses
 [createbrowserrouter]: ../routers/create-browser-router
 [button]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

docs/route/should-revalidate.md

@@ -66,6 +66,8 @@ interface ShouldRevalidateFunction {
     formAction?: Submission["formAction"];
     formEncType?: Submission["formEncType"];
     formData?: Submission["formData"];
+    json?: Submission["json"];
+    text?: Submission["text"];
     actionResult?: DataResult;
     defaultShouldRevalidate: boolean;
   }): boolean;

examples/auth/vite.config.ts

@@ -5,6 +5,9 @@ import rollupReplace from "@rollup/plugin-replace";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    port: 3000,
+  },
   plugins: [
     rollupReplace({
       preventAssignment: true,

examples/basic-data-router/vite.config.ts

@@ -5,6 +5,9 @@ import rollupReplace from "@rollup/plugin-replace";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    port: 3000,
+  },
   plugins: [
     rollupReplace({
       preventAssignment: true,