Merge branch 'release/v1.3.2' into dev

hicksy · Mar 18, 2022 · c73fc11 · c73fc11
2 parents 459f352 + 5fa8534
commit c73fc11
Show file tree

Hide file tree

Showing 180 changed files with 950 additions and 736 deletions.
diff --git a/contributors.yml b/contributors.yml
@@ -10,6 +10,7 @@
 - alex-ketch
 - alexuxui
 - andrelandgraf
+- AndrewIngram
 - anishpras
 - anmolm96
 - anmonteiro
@@ -73,6 +74,7 @@
 - evanwinter
 - exegeteio
 - fergusmeiklejohn
+- fgiuliani
 - fishel-feng
 - francisudeji
 - fx109138
@@ -142,6 +144,7 @@
 - kevinrambaud
 - kgregory
 - kimdontdoit
+- klauspaiva
 - knowler
 - kubaprzetakiewicz
 - kumard3
@@ -222,6 +225,7 @@
 - raulrpearson
 - real34
 - reggie3
+- rlfarman
 - robindrost
 - roddds
 - RomanSavarin

diff --git a/docs/api/remix.md b/docs/api/remix.md
@@ -1481,7 +1481,7 @@ It's to be used in place of `request.formData()`.
 
 For example:
 
-```tsx lines=[2-5,7,23]
+```tsx lines=[4-7,9,25]
 export const action: ActionFunction = async ({
   request,
 }) => {

diff --git a/docs/guides/disabling-javascript.md b/docs/guides/disabling-javascript.md
@@ -17,7 +17,7 @@ export const handle = { hydrate: true };
 
 Now open `root.tsx`, bring in `useMatches` and add this:
 
-```tsx [6,10,13-15,28]
+```tsx [6,10,13-15,27]
 import {
   Meta,
   Links,
@@ -38,7 +38,6 @@ export default function App() {
   return (
     <html lang="en">
       <head>
-        <meta charSet="utf-8" />
         <Meta />
         <Links />
       </head>

diff --git a/docs/guides/performance.md b/docs/guides/performance.md
@@ -6,7 +6,7 @@ title: Performance
 
 <docs-warning>This document is in draft, we will be adding more practical information soon, but we wanted to communicate our approach early.</docs-warning>
 
-Instead of prescribing a precise architecture with all of it's constraints like SSG, Remix is designed to encourage you to leverage the performance characteristics of distributed computing.
+Instead of prescribing a precise architecture with all of its constraints like SSG, Remix is designed to encourage you to leverage the performance characteristics of distributed computing.
 
 The fastest thing to send to a user is, of course, a static document on a CDN that's close to the user. Until recently, servers pretty much only ran in one region of the world, which made for slow responses everywhere else. This is perhaps one reason SSG gained so much popularity, it allowed developers to essentially "cache" their data into HTML documents and then distribute them across the world. It comes with a lot of tradeoffs too: build times, build complexity, duplicate websites for translations, can't use it for authenticated user experiences, can't use it for very large and dynamic data sources (like our project [unpkg.com](https://unpkg.com)!) to name a few.
 

diff --git a/docs/guides/styling.md b/docs/guides/styling.md
@@ -430,7 +430,7 @@ Update the package scripts to generate the Tailwind file during dev and for the
 {
   // ...
   "scripts": {
-    "build": "run-p build:*",
+    "build": "run-s build:*",
     "build:css": "npm run generate:css -- --minify",
     "build:remix": "cross-env NODE_ENV=production remix build",
     "dev": "run-p dev:*",
@@ -475,7 +475,7 @@ Then alter how Tailwind is generating your css:
 {
   // ...
   "scripts": {
-    "build": "run-p build:*",
+    "build": "run-s build:*",
     "build:css": "npm run generate:css -- --minify",
     "build:remix": "cross-env NODE_ENV=production remix build",
     "dev": "run-p dev:*",
@@ -685,7 +685,8 @@ Here's some sample code to show how you might use Styled Components with Remix (
 
 1. First you'll need to put a placeholder in your root component to control where the styles are inserted.
 
-   ```tsx filename=app/root.tsx lines=[21-23]
+   ```tsx filename=app/root.tsx lines=[22-24]
+   import type { MetaFunction } from "remix";
    import {
      Links,
      LiveReload,
@@ -695,15 +696,15 @@ Here's some sample code to show how you might use Styled Components with Remix (
      ScrollRestoration,
    } from "remix";
 
+   export const meta: MetaFunction = () => ({
+     charset: "utf-8",
+     viewport: "width=device-width,initial-scale=1",
+   });
+
    export default function App() {
      return (
        <html lang="en">
          <head>
-           <meta charSet="utf-8" />
-           <meta
-             name="viewport"
-             content="width=device-width,initial-scale=1"
-           />
            <Meta />
            <Links />
            {typeof document === "undefined"

diff --git a/docs/other-api/dev.md b/docs/other-api/dev.md
@@ -34,21 +34,21 @@ import {} from "remix";
 Builds your app for production. No need to add `NODE_ENV=production` to the command.
 
 ```sh
-$ remix build
+remix build
 ```
 
 ### `remix watch`
 
 Watches your application files and builds your app for development when files change.
 
 ```sh
-$ remix watch
+remix watch
 ```
 
 ### `remix dev`
 
 Same as `watch` but also boots the [Remix app server](serve.md) in development mode if it's installed.
 
 ```sh
-$ remix dev
+remix dev
 ```
diff --git a/docs/pages/stacks.md b/docs/pages/stacks.md
@@ -8,6 +8,8 @@ order: 3
 
 Remix Stacks is a feature of the Remix CLI that allows you to generate a Remix project quickly and easily. There are several built-in and official stacks that are full blown applications. You can also make your own (read more below).
 
+[Read the feature announcement blog post](/blog/remix-stacks) and [watch Remix Stacks videos on YouTube](https://www.youtube.com/playlist?list=PLXoynULbYuEC8-gJCqyXo94RufAvSA6R3).
+
 The built-in official stacks come ready with common things you need for a production application including:
 
 - Database
@@ -19,7 +21,7 @@ The built-in official stacks come ready with common things you need for a produc
 What you're left with is everything completely set up for you to just get to work building whatever amazing web experience you want to build with Remix. Here are the built-in official stacks:
 
 - [The Blues Stack](https://github.com/remix-run/blues-stack): Deployed to the edge (distributed) with a long-running Node.js server and PostgreSQL database. Intended for large and fast production-grade applications serving millions of users.
-- [The Indie Stack](https://github.com/remix-run/indie-stack): Deployed to a long-running Node.js server with a persistent SQLite database. Intended to get you going quickly with little complexity for prototypes and proof of concepts that can be later updated to the Blues stack without much trouble.
+- [The Indie Stack](https://github.com/remix-run/indie-stack): Deployed to a long-running Node.js server with a persistent SQLite database. This stack is great for websites with dynamic data that you control (blogs, marketing, content sites). It's also a perfect, low-complexity bootstrap for MVPs, prototypes, and proof-of-concepts that can later be updated to the Blues stack easily.
 - [The Grunge Stack](https://github.com/remix-run/grunge-stack): Deployed to a serverless function running Node.js with DynamoDB for persistance. Intended for folks who want to deploy a production-grade application on AWS infrastructure serving millions of users.
 
 Yes, these are named after music genres. 🤘 Rock on.
@@ -36,7 +38,7 @@ npx create-remix@latest --template my-username/my-repo
 
 Custom stacks give an enormous amount of power and flexibility and we hope you create your own that suites the preferences of you and your organization (feel free to fork ours!).
 
-<docs-success>Yes, we do recommend that you name your own stack after a music genre. In the future, we will have a page where you can list your open source stacks for others to learn and discover. For now, please add the <a href="https://github.com/topics/remix-stack"><code>remix-stack</code></a> tag to your repo!</docs-success>
+<docs-success>Yes, we do recommend that you name your own stack after a music sub-genre (not "rock" but "indie"!). In the future, we will have a page where you can list your open source stacks for others to learn and discover. For now, please add the <a href="https://github.com/topics/remix-stack"><code>remix-stack</code></a> tag to your repo!</docs-success>
 
 ### `--template`
 
@@ -61,7 +63,7 @@ The [token just needs `repo` access][repo access token].
 
 #### Dependency versions
 
-If you set the any dependencies in package.json to `*`, the Remix CLI will change it to a semver carrot of the latest released version:
+If you set the any dependencies in package.json to `*`, the Remix CLI will change it to a semver caret of the latest released version:
 
 ```diff
 -   "remix": "*",

diff --git a/docs/tutorials/blog.md b/docs/tutorials/blog.md
@@ -139,7 +139,7 @@ Loaders are the backend "API" for their component and it's already wired up for
 💿 Render links to our posts
 
 ```tsx filename=app/routes/posts/index.tsx lines=[1,9-15]
-import { Link, useLoaderData } from "remix";
+import { json, Link, useLoaderData } from "remix";
 
 // ...
 export default function Posts() {

diff --git a/docs/tutorials/jokes.md b/docs/tutorials/jokes.md
@@ -1414,7 +1414,7 @@ Datasource "db": SQLite database "dev.db" at "file:./dev.db"
 @prisma/client in 26ms
 ```
 
-This command did a few things. For one, it created our database file in `prisma/dev.db`. Then it pushed all the necessary changes to our database to match the schema we provided. Finally it generated Prisma's TypeScript types so we'll get stellar autocomplete and type checking as we use it's API for interacting with our database.
+This command did a few things. For one, it created our database file in `prisma/dev.db`. Then it pushed all the necessary changes to our database to match the schema we provided. Finally it generated Prisma's TypeScript types so we'll get stellar autocomplete and type checking as we use its API for interacting with our database.
 
 💿 Let's add that `prisma/dev.db` to our `.gitignore` so we don't accidentally commit it to our repository. We'll also want to add the `.env` file to the `.gitignore` as mentioned in the prisma output so we don't commit our secrets!
 
@@ -4864,14 +4864,14 @@ But before you get started, remember that we're in charge of rendering everythin
 
 <summary>app/root.tsx</summary>
 
-```tsx filename=app/root.tsx lines=[1,7,33-45,58]
+```tsx filename=app/root.tsx lines=[1,5,30-43,55]
 import type { LinksFunction, MetaFunction } from "remix";
 import {
   Links,
   LiveReload,
+  Meta,
   Outlet,
   useCatch,
-  Meta,
 } from "remix";
 
 import globalStylesUrl from "./styles/global.css";
@@ -4880,10 +4880,7 @@ import globalLargeStylesUrl from "./styles/global-large.css";
 
 export const links: LinksFunction = () => {
   return [
-    {
-      rel: "stylesheet",
-      href: globalStylesUrl,
-    },
+    { rel: "stylesheet", href: globalStylesUrl },
     {
       rel: "stylesheet",
       href: globalMediumStylesUrl,
@@ -4900,6 +4897,7 @@ export const links: LinksFunction = () => {
 export const meta: MetaFunction = () => {
   const description = `Learn Remix and laugh at the same time!`;
   return {
+    charset: "utf-8",
     description,
     keywords: "Remix,jokes",
     "twitter:image": "https://remix-jokes.lol/social.png",
@@ -4921,7 +4919,6 @@ function Document({
   return (
     <html lang="en">
       <head>
-        <meta charSet="utf-8" />
         <Meta />
         <title>{title}</title>
         <Links />
@@ -5573,15 +5570,15 @@ Ok, so let's load JavaScript on this page now 😆
 
 <summary>app/root.tsx</summary>
 
-```tsx filename=app/root.tsx lines=[8,65,97]
+```tsx filename=app/root.tsx lines=[7,62,94]
 import type { LinksFunction, MetaFunction } from "remix";
 import {
   Links,
   LiveReload,
-  Outlet,
-  useCatch,
   Meta,
+  Outlet,
   Scripts,
+  useCatch,
 } from "remix";
 
 import globalStylesUrl from "./styles/global.css";
@@ -5590,10 +5587,7 @@ import globalLargeStylesUrl from "./styles/global-large.css";
 
 export const links: LinksFunction = () => {
   return [
-    {
-      rel: "stylesheet",
-      href: globalStylesUrl,
-    },
+    { rel: "stylesheet", href: globalStylesUrl },
     {
       rel: "stylesheet",
       href: globalMediumStylesUrl,
@@ -5610,6 +5604,7 @@ export const links: LinksFunction = () => {
 export const meta: MetaFunction = () => {
   const description = `Learn Remix and laugh at the same time!`;
   return {
+    charset: "utf-8",
     description,
     keywords: "Remix,jokes",
     "twitter:image": "https://remix-jokes.lol/social.png",
@@ -5631,7 +5626,6 @@ function Document({
   return (
     <html lang="en">
       <head>
-        <meta charSet="utf-8" />
         <Meta />
         <title>{title}</title>
         <Links />

diff --git a/examples/basic/app/root.tsx b/examples/basic/app/root.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { LinksFunction, MetaFunction } from "remix";
 import {
   Link,
   Links,
@@ -10,7 +11,6 @@ import {
   useCatch,
   useLocation,
 } from "remix";
-import type { LinksFunction } from "remix";
 
 import deleteMeRemixStyles from "~/styles/demos/remix.css";
 import globalStylesUrl from "~/styles/global.css";
@@ -36,6 +36,11 @@ export const links: LinksFunction = () => {
   ];
 };
 
+export const meta: MetaFunction = () => ({
+  charset: "utf-8",
+  viewport: "width=device-width,initial-scale=1",
+});
+
 /**
  * The root module's default export is a component that renders the current
  * route via the `<Outlet />` component. Think of this as the global layout
@@ -61,8 +66,6 @@ function Document({
   return (
     <html lang="en">
       <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
         {title ? <title>{title}</title> : null}
         <Meta />
         <Links />

diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -11,15 +11,15 @@
     "start": "remix-serve build"
   },
   "dependencies": {
-    "@remix-run/react": "1.3.1",
-    "@remix-run/serve": "1.3.1",
+    "@remix-run/react": "1.3.2",
+    "@remix-run/serve": "1.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "remix": "1.3.1"
+    "remix": "1.3.2"
   },
   "devDependencies": {
-    "@remix-run/dev": "1.3.1",
-    "@remix-run/eslint-config": "1.3.1",
+    "@remix-run/dev": "1.3.2",
+    "@remix-run/eslint-config": "1.3.2",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.13",
     "eslint": "^8.10.0",

diff --git a/examples/blog-tutorial/app/root.tsx b/examples/blog-tutorial/app/root.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { LinksFunction, MetaFunction } from "remix";
 import {
   Links,
   LiveReload,
@@ -9,7 +10,6 @@ import {
   useCatch,
   Link,
 } from "remix";
-import type { LinksFunction } from "remix";
 
 import deleteMeRemixStyles from "~/styles/demos/remix.css";
 import globalStylesUrl from "~/styles/global.css";
@@ -35,6 +35,11 @@ export const links: LinksFunction = () => {
   ];
 };
 
+export const meta: MetaFunction = () => ({
+  charset: "utf-8",
+  viewport: "width=device-width,initial-scale=1",
+});
+
 /**
  * The root module's default export is a component that renders the current
  * route via the `<Outlet />` component. Think of this as the global layout
@@ -60,7 +65,6 @@ function Document({
   return (
     <html lang="en">
       <head>
-        <meta charSet="utf-8" />
         {title ? <title>{title}</title> : null}
         <Meta />
         <Links />