Fix Astro and Remix examples not building (#9247)

examples/custom-admin-ui-logo/admin/components/CustomLogo.tsx

@@ -3,7 +3,7 @@
 import Link from 'next/link'
 import { jsx, H3 } from '@keystone-ui/core'
 
-export const CustomLogo = () => {
+export function CustomLogo () {
   return (
     <H3>
       <Link

examples/custom-admin-ui-logo/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@keystone-6/core": "workspace:^",
+    "@keystone-ui/core": "workspace:^",
     "@prisma/client": "catalog:",
     "next": "catalog:",
     "react": "catalog:",

examples/extend-graphql-subscriptions/websocket.ts

@@ -8,7 +8,7 @@ import { type Context } from '.keystone/types'
 
 // Setup pubsub as a Global variable in dev so it survives Hot Reloads.
 declare global {
-  let graphqlSubscriptionPubSub: PubSub
+  var graphqlSubscriptionPubSub: PubSub
 }
 
 // The 'graphql-subscriptions' pubsub library is not recommended for production use, but can be useful as an example

examples/framework-astro/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.astro/
+# Keep environment variables out of version control
+.env

examples/framework-astro/astro.config.mjs

@@ -1,12 +1,22 @@
 import { defineConfig } from 'astro/config'
+import node from '@astrojs/node'
 
 // https://astro.build/config
 export default defineConfig({
   output: 'server',
+  adapter: node({
+    mode: 'standalone',
+  }),
+
   // WARNING: this is only needed for our monorepo examples, dont do this
   vite: {
     ssr: {
-      external: ['@keystone-6/core/context', '@keystone-6/core', '@keystone-6/core/fields'],
+      external: [
+        '@keystone-6/core',
+        '@keystone-6/core/context',
+        '@keystone-6/core/fields',
+        'myprisma'
+      ],
     },
   },
 })

examples/framework-astro/keystone.ts

@@ -7,8 +7,9 @@
 
 import { config } from '@keystone-6/core'
 import { lists } from './src/keystone/schema'
+import type { TypeInfo } from '.keystone/types'
 
-export default config({
+export default config<TypeInfo>({
   db: {
     // we're using sqlite for the fastest startup experience
     //   for more information on what database might be appropriate for you
@@ -18,7 +19,7 @@ export default config({
 
     // WARNING: this is only needed for our monorepo examples, dont do this
     //   we use using myprisma, not .myprisma, because vite
-    prismaClientPath: 'node_modules/myprisma/client',
+    prismaClientPath: 'node_modules/myprisma',
   },
   server: {
     // We're using a custom port for this example so Astro and Keystone can run at the same time

examples/framework-astro/package.json

@@ -12,15 +12,16 @@
     "start": "astro dev"
   },
   "dependencies": {
+    "@astrojs/node": "^8.3.2",
     "@keystone-6/core": "workspace:^",
     "@prisma/client": "catalog:",
-    "astro": "^2.2.1"
+    "astro": "^4.12.3"
   },
   "devDependencies": {
     "@types/node": "catalog:",
-    "react": "catalog:",
     "@types/react-dom": "catalog:",
     "prisma": "catalog:",
+    "react": "catalog:",
     "typescript": "catalog:"
   }
 }

examples/framework-astro/schema.prisma

@@ -9,7 +9,7 @@ datasource sqlite {
 
 generator client {
   provider = "prisma-client-js"
-  output   = "node_modules/myprisma/client"
+  output   = "node_modules/myprisma"
 }
 
 model Post {

examples/framework-astro/src/keystone/context.ts

@@ -1,7 +1,5 @@
 import { getContext } from '@keystone-6/core/context'
-// Using myprisma/client as vite does not like .
-// This should be @prisma/client in a project outside of the Keystone monorepo
-import * as PrismaModule from 'myprisma/client'
+import * as PrismaModule from 'myprisma'
 import config from '../../keystone'
 import type { Context } from '.keystone/types'
 

examples/framework-astro/src/pages/index.astro

@@ -1,23 +1,23 @@
 ---
-import { keystoneContext } from '../keystone/context';
+import { keystoneContext } from '../keystone/context'
 
 // Using Broswer Name from the user-agent request header to illustrate how to use the keystone context
 // with a customised session from Astro.
 // This is a contrived example of how Keystone's Access Control can work within Astro.
-const userAgent = Astro.request.headers.get('user-agent');
+const userAgent = Astro.request.headers.get('user-agent')
 
 // Match the browser name using a regular expression
-const browserName = userAgent?.match(/(Chrome|Firefox)/)?.pop() ?? 'unknown';
-console.log('Browser name in Astro from userAgent header', browserName);
+const browserName = userAgent?.match(/(Chrome|Firefox)/)?.pop() ?? 'unknown'
+console.log('Browser name in Astro from userAgent header', browserName)
 
 // Create a new context with a customised session
 const context = keystoneContext.withSession({
   browser: browserName.toLowerCase(),
   user: 'astro',
-});
+})
 const posts = await context.query.Post.findMany({
   query: 'title id',
-});
+})
 ---
 
 <html lang="en">

examples/framework-remix/app/utils/keystone.server.ts

@@ -1,6 +1,6 @@
 import { getContext } from '@keystone-6/core/context'
 import config from '../../keystone'
-import * as PrismaModule from '.myprisma/client'
+import * as PrismaModule from 'myprisma'
 import type { Context } from '.keystone/types'
 
 // Making sure multiple prisma clients are not created during hot reloading

examples/framework-remix/keystone.ts

@@ -1,16 +1,19 @@
 import { list, config } from '@keystone-6/core'
 import { allowAll } from '@keystone-6/core/access'
 import { text } from '@keystone-6/core/fields'
-import { fixPrismaPath } from '../example-utils'
-
 import type { TypeInfo } from '.keystone/types'
 
 export default config<TypeInfo>({
   db: {
+    // we're using sqlite for the fastest startup experience
+    //   for more information on what database might be appropriate for you
+    //   see https://keystonejs.com/docs/guides/choosing-a-database#title
     provider: 'sqlite',
     url: `file:${process.cwd()}/keystone.db`,
 
-    ...fixPrismaPath,
+    // WARNING: this is only needed for our monorepo examples, dont do this
+    //   we use using myprisma, not .myprisma, because vite
+    prismaClientPath: 'node_modules/myprisma',
   },
   server: {
     port: 4000,

examples/framework-remix/package.json

@@ -11,18 +11,18 @@
   "dependencies": {
     "@keystone-6/core": "workspace:^",
     "@prisma/client": "catalog:",
-    "@remix-run/node": "^1.15.0",
-    "@remix-run/react": "^1.15.0",
-    "@remix-run/serve": "^1.15.0",
-    "react": "catalog:",
-    "react-dom": "catalog:"
+    "@remix-run/node": "^1.18.0",
+    "@remix-run/react": "^1.18.0",
+    "@remix-run/serve": "^1.18.0",
+    "isbot": "^5.1.13",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.15.0",
+    "@remix-run/dev": "^1.18.0",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "prisma": "catalog:",
     "typescript": "catalog:"
-  },
-  "version": null
+  }
 }

examples/framework-remix/schema.prisma

@@ -9,7 +9,7 @@ datasource sqlite {
 
 generator client {
   provider = "prisma-client-js"
-  output   = "node_modules/.myprisma/client"
+  output   = "node_modules/myprisma"
 }
 
 model Post {

package.json

@@ -33,8 +33,8 @@
     "@types/jest": "^29.0.0",
     "@types/node": "^20.0.0",
     "@types/node-fetch": "^2.5.12",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.4",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "esbuild": "catalog:",
     "esbuild-jest": "^0.5.0",
     "eslint": "^9.2.0",

packages/core/src/admin-ui/components/GraphQLErrorNotice.tsx

@@ -1,11 +1,11 @@
 import { Stack } from '@keystone-ui/core'
 import { Notice } from '@keystone-ui/notice'
-import { type GraphQLError } from 'graphql'
+import type { GraphQLFormattedError } from 'graphql'
 import React from 'react'
 
 type GraphQLErrorNoticeProps = {
   networkError: Error | null | undefined
-  errors: readonly GraphQLError[] | undefined
+  errors: readonly GraphQLFormattedError[] | undefined
 }
 
 export function GraphQLErrorNotice ({ errors, networkError }: GraphQLErrorNoticeProps) {

packages/core/src/admin-ui/utils/dataGetter.ts

@@ -1,4 +1,7 @@
-import type { GraphQLError } from 'graphql'
+import type {
+  GraphQLError,
+  GraphQLFormattedError,
+} from 'graphql'
 import type { JSONValue } from '../../types'
 
 type Path = (string | number)[]
@@ -61,7 +64,7 @@ function dataGetterWithErrors (
 
 export function makeDataGetter<Data extends JSONValue> (
   data: Data,
-  errors: readonly GraphQLError[] | undefined
+  errors: readonly GraphQLFormattedError[] | undefined
 ): DataGetter<Data> {
   if (errors?.length) {
     return dataGetterWithErrors(data, errors as readonly [GraphQLError, ...GraphQLError[]], [])

packages/core/src/fields/types/relationship/views/cards/useItemState.tsx

@@ -5,9 +5,7 @@ import { gql, useQuery } from '../../../../../admin-ui/apollo'
 import { type controller } from '../index'
 
 type ItemsState =
-  | {
-      kind: 'loading'
-    }
+  | { kind: 'loading' }
   | { kind: 'error', message: string }
   | { kind: 'loaded' }
 

packages/fields-document/package.json

@@ -47,7 +47,7 @@
   "repository": "https://github.com/keystonejs/keystone/tree/main/packages/fields-document",
   "dependencies": {
     "@babel/runtime": "^7.24.7",
-    "@braintree/sanitize-url": "^7.0.0",
+    "@braintree/sanitize-url": "7.0.4",
     "@dnd-kit/core": "^6.0.6",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",