Merge branch 'main' into ds-esm/create-redwood-app

.github/workflows/ci.yml

@@ -90,7 +90,7 @@ jobs:
       matrix:
         os: [ubuntu-latest, windows-latest]
 
-    name: 🏗 Build, lint, test / ${{ matrix.os }} / node 18 latest
+    name: 🏗 Build, lint, test / ${{ matrix.os }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     steps:
@@ -144,7 +144,7 @@ jobs:
       matrix:
         os: [ubuntu-latest, windows-latest]
 
-    name: 🏗 Build, lint, test / ${{ matrix.os }} / node 18 latest
+    name: 🏗 Build, lint, test / ${{ matrix.os }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     steps:
@@ -157,7 +157,7 @@ jobs:
       matrix:
         bundler: [vite, webpack]
 
-    name: 🌲 Tutorial E2E / ${{ matrix.bundler }} / node 18 latest
+    name: 🌲 Tutorial E2E / ${{ matrix.bundler }} / node 20 latest
     runs-on: ubuntu-latest
 
     steps:
@@ -235,7 +235,7 @@ jobs:
       matrix:
         bundler: [vite, webpack]
 
-    name: 🌲 Tutorial E2E / ${{ matrix.bundler }} / node 18 latest
+    name: 🌲 Tutorial E2E / ${{ matrix.bundler }} / node 20 latest
     runs-on: ubuntu-latest
 
     steps:
@@ -249,7 +249,7 @@ jobs:
         os: [ubuntu-latest, windows-latest]
         bundler: [vite, webpack]
 
-    name: 🔄 Smoke tests / ${{ matrix.os }} / ${{ matrix.bundler }} / node 18 latest
+    name: 🔄 Smoke tests / ${{ matrix.os }} / ${{ matrix.bundler }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     env:
@@ -427,7 +427,7 @@ jobs:
       #
       # ```
       # env:
-      #   RECORD_REPLAY_METADATA_TEST_RUN_TITLE: 🔄  Smoke tests / ${{ matrix.os }} / node 18 latest
+      #   RECORD_REPLAY_METADATA_TEST_RUN_TITLE: 🔄  Smoke tests / ${{ matrix.os }} / node 20 latest
       #   RECORD_REPLAY_TEST_METRICS: 1
       # ```
       #
@@ -446,7 +446,7 @@ jobs:
         os: [ubuntu-latest, windows-latest]
         bundler: [vite, webpack]
 
-    name: 🔄 Smoke tests / ${{ matrix.os }} / ${{ matrix.bundler }} / node 18 latest
+    name: 🔄 Smoke tests / ${{ matrix.os }} / ${{ matrix.bundler }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     steps:
@@ -459,7 +459,7 @@ jobs:
       matrix:
         os: [ubuntu-latest, windows-latest]
 
-    name: 🔭 Telemetry check / ${{ matrix.os }} / node 18 latest
+    name: 🔭 Telemetry check / ${{ matrix.os }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     env:
@@ -506,7 +506,7 @@ jobs:
       matrix:
         os: [ubuntu-latest, windows-latest]
 
-    name: 🔭 Telemetry check / ${{ matrix.os }} / node 18 latest
+    name: 🔭 Telemetry check / ${{ matrix.os }} / node 20 latest
     runs-on: ${{ matrix.os }}
 
     steps:
@@ -758,13 +758,9 @@ jobs:
       - name: Prompt tests
         run: |
           ./tests/e2e_prompts.sh
-          sleep 1
           ./tests/e2e_prompts_git.sh
-          sleep 1
           ./tests/e2e_prompts_m.sh
-          sleep 1
           ./tests/e2e_prompts_ts.sh
-          sleep 1
           ./tests/e2e_prompts_overwrite.sh
         working-directory: ./packages/create-redwood-app
         env:

__fixtures__/test-project/web/package.json

@@ -24,9 +24,9 @@
     "@types/react": "18.2.37",
     "@types/react-dom": "18.2.15",
     "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.32",
+    "postcss": "^8.4.33",
     "postcss-loader": "^7.3.4",
     "prettier-plugin-tailwindcss": "0.4.1",
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^3.4.1"
   }
 }

__fixtures__/test-project/web/src/App.tsx

@@ -1,7 +1,6 @@
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
-import possibleTypes from 'src/graphql/possibleTypes'
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
 
@@ -14,14 +13,7 @@ const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
       <AuthProvider>
-        <RedwoodApolloProvider
-          useAuth={useAuth}
-          graphQLClientConfig={{
-            cacheConfig: {
-              ...possibleTypes,
-            },
-          }}
-        >
+        <RedwoodApolloProvider useAuth={useAuth}>
           <Routes />
         </RedwoodApolloProvider>
       </AuthProvider>

docs/docs/graphql/fragments.md

@@ -151,7 +151,6 @@ import { fragment } from '@redwoodjs/web/apollo'
 
 Access typename of fragment you registered.
 
-
 ```ts
 import { typename } from '@redwoodjs/web/apollo'
 ```
@@ -166,6 +165,7 @@ fragment BookInfo on Book {
   author
   publicationYear
 }
+```
 
 the `typename` is `Book`.
 
@@ -294,9 +294,9 @@ import possibleTypes from 'src/graphql/possibleTypes'
 >
 ```
 
-To generate the `src/graphql/possibleTypes`, configure the `redwood.toml`:
+To generate the `src/graphql/possibleTypes` file, enable fragments in `redwood.toml`:
 
-```toml title=redwood.roml
+```toml title=redwood.toml
 [graphql]
-  fragments=true
+  fragments = true
 ```

docs/docs/router.md

@@ -278,6 +278,42 @@ const CustomLink = ({ to, ...rest }) => {
 }
 ```
 
+Passing in `routeParams` you can make it match only on specific route parameter
+values.
+
+```jsx
+const match = useMatch('/product/{category}/{id}', {
+  routeParams: { category: 'shirts' }
+})
+```
+
+The above example will match /product/shirts/213, but not /product/pants/213
+(whereas not specifying `routeParams` at all would match both).
+
+To get the path you need to pass to `useMatch` you can use
+[`useRoutePaths`](#useroutepaths) or [`useRoutePath`](#useroutepath)
+
+Here's an example:
+
+```jsx
+<Route path="/{animal}/{name}" page={AnimalPage} name="animal" />
+
+const animalRoutePath = useRoutePath('animal')
+// => '/{animal}/{name}'
+
+const matchOnlyDog = useMatch(animalRoutePath, { routeParams: { animal: 'dog' }})
+const matchFullyDynamic = useMatch(animalRoutePath)
+```
+
+In the above example, if the current page url was
+`https://example.org/dog/fido` then both `matchOnlyDog` and `matchFullyDynamic`
+would have `match: true`.
+
+If the current page instead was `https://example.org/cat/garfield` then only
+`matchFullyDynamic` would match
+
+See below for more info on route parameters.
+
 ## Route parameters
 
 To match variable data in a path, you can use route parameters, which are specified by a parameter name surrounded by curly braces:
@@ -478,14 +514,24 @@ Example output:
 
 ## useRoutePath
 
-This is a convenience hook for when you only want the path for a single route.
+Use this hook when you only want the path for a single route. By default it
+will give you the path for the current route
 ```jsx
-const aboutPath = useRoutePath('about') // returns "/about"
+// returns "/about" if you're currently on https://example.org/about
+const aboutPath = useRoutePath() 
 ```
-is the same as
+
+You can also pass in the name of a route and get the path for that route
+```jsx
+// returns "/about"
+const aboutPath = useRoutePath('about')
+```
+
+Note that the above is the same as
 ```jsx
 const routePaths = useRoutePaths()
-const aboutPath = routePaths.about // Also returns "/about"
+// returns "/about"
+const aboutPath = routePaths.about
 ```
 
 ## useRouteName

package.json

@@ -27,7 +27,7 @@
     "project:deps": "node ./tasks/framework-tools/frameworkDepsToProject.mjs",
     "project:sync": "node ./tasks/framework-tools/frameworkSyncToProject.mjs",
     "project:tarsync": "node ./tasks/framework-tools/tarsync.mjs",
-    "rebuild-test-project-fixture": "node ./tasks/test-project/rebuild-test-project-fixture.js",
+    "rebuild-test-project-fixture": "tsx ./tasks/test-project/rebuild-test-project-fixture.ts",
     "release": "node ./tasks/release/release.mjs",
     "release:compare": "node ./tasks/release/compare/compare.mjs",
     "release:notes": "node ./tasks/release/generateReleaseNotes.mjs",
@@ -104,7 +104,7 @@
     "ora": "7.0.1",
     "prompts": "2.4.2",
     "rimraf": "5.0.5",
-    "tstyche": "1.0.0-beta.3",
+    "tstyche": "1.0.0-beta.9",
     "tsx": "4.6.2",
     "typescript": "5.3.3",
     "yargs": "17.7.2",

packages/api-server/src/plugins/withFunctions.ts

@@ -13,7 +13,9 @@ const withFunctions = async (
 ) => {
   const { apiRootPath } = options
   // Add extra fastify plugins
-  fastify.register(fastifyUrlData)
+  if (!fastify.hasPlugin('@fastify/url-data')) {
+    await fastify.register(fastifyUrlData)
+  }
 
   // Fastify v4 must await the fastifyRawBody plugin
   // registration to ensure the plugin is ready

packages/api-server/src/plugins/withWebServer.ts

@@ -28,7 +28,9 @@ const withWebServer = async (
   fastify: FastifyInstance,
   options: WebServerArgs
 ) => {
-  fastify.register(fastifyUrlData)
+  if (!fastify.hasPlugin('@fastify/url-data')) {
+    await fastify.register(fastifyUrlData)
+  }
 
   const prerenderedFiles = findPrerenderedHtml()
   const indexPath = getFallbackIndexPath()

packages/auth-providers/dbAuth/api/src/DbAuthHandler.ts

@@ -970,8 +970,9 @@ export class DbAuthHandler<
 
       const existingDevice = await this.dbCredentialAccessor.findFirst({
         where: {
-          id: plainCredentialId,
-          userId: user[this.options.authFields.id],
+          [this.options.webAuthn.credentialFields.id]: plainCredentialId,
+          [this.options.webAuthn.credentialFields.userId]:
+            user[this.options.authFields.id],
         },
       })
 

packages/cli-packages/dataMigrate/src/__tests__/install.test.ts

@@ -1,3 +1,5 @@
+import type yargs from 'yargs'
+
 import * as installCommand from '../commands/install'
 import { handler as dataMigrateInstallHandler } from '../commands/installHandler.js'
 
@@ -24,12 +26,24 @@ describe('install', () => {
   })
 
   it('`builder` has an epilogue', () => {
-    const yargs = { epilogue: jest.fn() }
-    // @ts-expect-error this is a test file; epilogue is the only thing `builder` calls right now
+    // The typecasting here is to make TS happy when calling `builder(yargs)`
+    // further down. We know that only `epilogue` will be called.
+    const yargs = { epilogue: jest.fn() } as unknown as yargs.Argv
+
     installCommand.builder(yargs)
-    expect(yargs.epilogue).toBeCalledWith(
-      // eslint-disable-next-line no-irregular-whitespace
-      'Also see the Redwood CLI Reference (​https://redwoodjs.com/docs/cli-commands#datamigrate-install​)'
+
+    // The epilogue is a string that contains a link to the docs. The string
+    // contains special control characters when rendered in a terminal that
+    // supports clickable links. We use regular expressions and wildcards here
+    // to avoid having to match control characters that might not even always
+    // be there
+    expect(yargs.epilogue).toHaveBeenCalledWith(
+      expect.stringMatching(/Also see the .*Redwood CLI Reference.*/)
+    )
+    expect(yargs.epilogue).toHaveBeenCalledWith(
+      expect.stringMatching(
+        /https:\/\/redwoodjs\.com\/docs\/cli-commands#datamigrate-install/
+      )
     )
   })