✨ NEW: yoga v3

* 🚸 UPDATE: handler graphql

* ✨ NEW: yoga v3

* 👌 FIX: lint

* ✨ UPDATE: changeset

.changeset/plenty-phones-argue.md

@@ -0,0 +1,5 @@
+---
+'vite-plugin-watch-and-run': patch
+---
+
+bump vite version

.changeset/small-pianos-act.md

@@ -0,0 +1,5 @@
+---
+'@kitql/all-in': patch
+---
+
+using yoga v3

.eslintrc.cjs

@@ -11,6 +11,7 @@ module.exports = {
     '@typescript-eslint/ban-types': 'off',
     '@typescript-eslint/no-unused-vars': 'off',
     '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
   },
   ignorePatterns: ['examples', 'website', 'dist'],
   plugins: ['svelte3'],

packages/all-in/package.json

@@ -21,8 +21,8 @@
     "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "1.0.0-next.75",
-    "@sveltejs/kit": "1.0.0-next.483",
+    "@sveltejs/adapter-auto": "1.0.0-next.80",
+    "@sveltejs/kit": "1.0.0-next.511",
     "@sveltejs/package": "1.0.0-next.3",
     "@types/node": "^18.7.18",
     "@typescript-eslint/eslint-plugin": "5.37.0",
@@ -51,7 +51,7 @@
     "@graphql-codegen/typescript-resolvers": "2.7.3",
     "@graphql-eslint/eslint-plugin": "3.10.7",
     "@graphql-typed-document-node/core": "3.1.1",
-    "@graphql-yoga/common": "2.12.12",
+    "graphql-yoga": "3.0.0-next.4",
     "@kitql/helper": "0.6.0-next.1",
     "@kitql/module-codegen": "0.4.0-next.1",
     "@prisma/client": "^4.3.1",

packages/all-in/src/hooks.server.ts

@@ -1,15 +1,40 @@
 import { dev } from '$app/environment'
-import { kitqlServer } from '$lib/graphql/kitQLServer'
+import { kitqlServer, type IKitQLContext } from '$lib/graphql/kitQLServer'
 import { handleGraphiql } from '$lib/hooks/graphiql'
 import { handleGraphql } from '$lib/hooks/graphql'
 import { sequence } from '@sveltejs/kit/hooks'
 
+/**
+ * 1/ With all default options
+ */
 export const handle = sequence(
   // create the graphql endpoint
-  handleGraphql(kitqlServer),
+  handleGraphql<IKitQLContext>(kitqlServer),
 
   // enable graphiql in dev mode
   handleGraphiql({
     enabled: dev,
   })
 )
+
+/**
+ * 2/ With custom options
+ */
+// const endpoint = '/graphql'
+// const graphiQLPath = '/graphiql'
+
+// export const handle = sequence(
+//   // create the graphql endpoint
+//   handleGraphql<IKitQLContext>({
+//     endpoint,
+//     graphiQLPath,
+//     ...kitqlServer,
+//   }),
+
+//   // enable graphiql in dev mode
+//   handleGraphiql({
+//     enabled: dev,
+//     endpoint,
+//     graphiQLPath,
+//   })
+// )

packages/all-in/src/lib/graphql/kitQLServer.ts

@@ -1,23 +1,12 @@
 import type { RequestEvent } from '@sveltejs/kit'
-import { createServer } from './createServer'
 import { kitQLModules } from './kitQLModules'
-// This should be fully generated 🥳
 import { modules } from './_kitql/_appModules'
 
-// export type IKitQLContext ables to use it in code gen, and have resolvers fully typed!
-// config:
-//   contextType: $graphql/kitQLServer#IKitQLContext
-// export type IKitQLContext = ReturnType<typeof getContext>
-export type IKitQLContext = {
-  request: Request
-  user?: {
-    id: number
-    name: string
-  }
-}
+const plugins = []
+plugins.push(kitQLModules(modules))
 
 function getContext({ request }: RequestEvent) {
-  // get the cookie or the token
+  // get the cookie or the token...
   const coolInfo = request.headers.get('Authorization')
 
   // get the user from the coolInfo (redis or db)
@@ -29,10 +18,22 @@ function getContext({ request }: RequestEvent) {
   }
 }
 
-const plugins = []
-plugins.push(kitQLModules(modules))
+// Option 1 => explicitly set the context type
+// export type IKitQLContext = {
+//   request: Request
+//   user?: {
+//     id: number
+//     name: string
+//   }
+// }
+// Option 2 => build IKitQLContext from getContext return
+export type IKitQLContext = ReturnType<typeof getContext>
+
+// then, make use of "IKitQLContext" in code gen, generate resolvers fully typed!
+// config:
+//   contextType: $graphql/kitQLServer#IKitQLContext
 
-export const kitqlServer = createServer<IKitQLContext>({
-  context: getContext,
+export const kitqlServer = {
   plugins,
-})
+  getContext,
+}

packages/all-in/src/lib/hooks/graphiql.ts

@@ -1,30 +1,33 @@
-import type { GraphiQLOptions as Options } from '@graphql-yoga/common'
 import type { Handle } from '@sveltejs/kit'
+import type { GraphiQLRendererOptions as GraphiQLYogaOptions } from 'graphql-yoga/typings/plugins/useGraphiQL'
 
-export type GraphiQLOptions = Omit<Options, 'headers'> & {
+export type GraphiQLKitQL = Omit<GraphiQLYogaOptions, 'headers' | 'endpoint'> & {
   headers?: Record<string, string>
 
   enabled?: boolean
 
+  endpoint?: string
+
   /**
    * This is the graphiQLPath in the SvelteKit app
    * @default is '/graphiql'
    */
   graphiQLPath?: string
 }
 
-async function getGraphiQLBody(graphiqlOptions: Options) {
+async function getGraphiQLBody(graphiqlOptions: GraphiQLYogaOptions) {
   try {
+    // @ts-ignore
     const { renderGraphiQL: renderGraphiQLOffline } = await import('@graphql-yoga/render-graphiql')
     return renderGraphiQLOffline(graphiqlOptions)
   } catch (e: any) {
     // user did not add it as a dependency
-    const { renderGraphiQL: renderGraphiQLOnline } = await import('@graphql-yoga/common')
+    const { renderGraphiQL: renderGraphiQLOnline } = await import('graphql-yoga')
     return renderGraphiQLOnline(graphiqlOptions)
   }
 }
 
-export function handleGraphiql(options?: GraphiQLOptions): Handle {
+export function handleGraphiql(options?: GraphiQLKitQL): Handle {
   const { graphiQLPath, headers, enabled, ...opts } = {
     title: 'KitQL',
     endpoint: '/graphql',
@@ -45,7 +48,7 @@ export function handleGraphiql(options?: GraphiQLOptions): Handle {
     : ''
 
   return async ({ event, resolve }) => {
-    if (enabled && event.url.pathname === graphiQLPath) {
+    if (enabled && event.url && event.url.pathname === graphiQLPath) {
       return new Response(await bodyPromise, {
         status: 200,
         headers: {

packages/all-in/src/lib/hooks/graphql.ts

@@ -1,23 +1,38 @@
-import type { YogaServerInstance } from '@graphql-yoga/common'
 import type { Handle } from '@sveltejs/kit'
+import { createSchema, createYoga, type Plugin, type YogaInitialContext } from 'graphql-yoga'
 
-export type GraphQLOptions = {
-  endpoint?: string
-
+// export type KitQLServerOptions<TServerContext, TUserContext> = Omit<
+//   YogaServerOptions<TServerContext, TUserContext>,
+//   'graphiql'
+// >
+export type GraphQLKitQL<TUserContext> = {
   /**
    * If you set the `graphiQLPath`, on a GET request you will be redirected there
    * If not, you will get a 404 (security by default ;))))))))))))))))))
    */
   graphiQLPath?: string
+  /**
+   * defaults to /graphql
+   */
+  endpoint?: string
+
+  context?:
+    | ((initialContext: YogaInitialContext) => Promise<TUserContext> | TUserContext)
+    | Promise<TUserContext>
+    | TUserContext
+
+  plugins?: Plugin[]
 }
 
-export function handleGraphql<TServerContext, TUserContext, TRootValue>(
-  kitqlServer: YogaServerInstance<TServerContext, TUserContext, TRootValue>,
-  options?: GraphQLOptions
-): Handle {
-  const { endpoint, graphiQLPath } = {
-    endpoint: '/graphql',
+export function handleGraphql<TUserContext>(options?: GraphQLKitQL<TUserContext>): Handle {
+  // set defaults
+  const { graphiQLPath, endpoint, plugins, context } = {
     graphiQLPath: undefined,
+    endpoint: '/graphql',
+    plugins: [],
+    context: () => {
+      return {} as TUserContext
+    },
     ...options,
   }
 
@@ -29,8 +44,29 @@ export function handleGraphql<TServerContext, TUserContext, TRootValue>(
     throw new Error("graphiQLPath path must start with '/'")
   }
 
-  return ({ event, resolve }) => {
-    if (event.url.pathname === endpoint) {
+  const kitqlServer = createYoga<YogaInitialContext, TUserContext>({
+    logging: true,
+    schema: createSchema({
+      typeDefs: `
+        type Query {
+          is_it_working: String
+        }
+      `,
+      resolvers: {
+        Query: {
+          is_it_working: () =>
+            'Yes yoga is up and running! Now, to make it work with your own schema, you need to send kitQLModules(modules) via plugins',
+        },
+      },
+    }),
+    context,
+    plugins,
+    graphqlEndpoint: endpoint,
+    fetchAPI: globalThis,
+  })
+
+  return async ({ event, resolve }) => {
+    if (event.url && event.url.pathname === endpoint) {
       if (event.request.method === 'GET') {
         // If we know graphiQLPath, let's go there
         if (graphiQLPath) {
@@ -41,12 +77,9 @@ export function handleGraphql<TServerContext, TUserContext, TRootValue>(
       }
 
       if (event.request.method === 'POST') {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        return kitqlServer.handleRequest(event.request)
+        return kitqlServer.handleRequest(event.request, null)
       }
     }
-
     // Fallback to normal request
     return resolve(event)
   }

packages/all-in/src/lib/index.ts

@@ -2,18 +2,18 @@
 export { default as KitQLInfo } from './KitQLInfo.svelte'
 
 // Yoga server
-export { createServer } from './graphql/createServer'
-export type { KitQLServerOptions } from './graphql/createServer'
+// export { createServer } from './graphql/createServer'
+// export type { KitQLServerOptions } from './graphql/createServer'
 
 // graphql-modules
 export { createModule } from 'graphql-modules'
 export { kitQLModules } from './graphql/kitQLModules'
 
 // SvelteKit hooks
-export { type GraphQLOptions } from './hooks/graphql'
+export { type GraphQLKitQL } from './hooks/graphql'
 export { handleGraphql } from './hooks/graphql'
-export { type GraphiQLOptions } from './hooks/graphiql'
-export { handleGraphiql as graphiql } from './hooks/graphiql'
+export { type GraphiQLKitQL } from './hooks/graphiql'
+export { handleGraphiql } from './hooks/graphiql'
 
 // Prisma
-export { getKitQLPrisma } from './prisma/kitQLPrisma'
+// export { getKitQLPrisma } from './prisma/kitQLPrisma'

packages/all-in/src/lib/prisma/kitQLPrisma.ts

@@ -1,4 +1,5 @@
 import { performance } from 'perf_hooks'
+// @ts-ignore
 import { PrismaClient } from '@prisma/client'
 import { Log, logCyan, logMagneta, logYellow } from '@kitql/helper'
 

packages/helper/test/Log.spec.ts

@@ -196,7 +196,6 @@ describe('kitql - helper - Log', () => {
   it('are we in the browser?', async () => {
     const log = new Log('tool name')
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     this.window = { document: 'coucou' }
 

packages/vite-plugin-watch-and-run/package.json

@@ -17,7 +17,7 @@
   "devDependencies": {
     "@types/micromatch": "^4.0.2",
     "tslib": "2.4.0",
-    "vite": "3.1.1"
+    "vite": "3.1.7"
   },
   "dependencies": {
     "@kitql/helper": "0.6.0-next.1",

packages/vite-plugin-watch-and-run/src/index.ts

@@ -88,7 +88,6 @@ async function checkConf(params: Options[]) {
       formatErrors: paramRow.formatErrors,
     }
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore (because the config is in a js file, and people maybe didn't update their config.)
     if (['ADD', 'CHANGE', 'DELETE'].includes(param.kind || '')) {
       throw new Error('BREAKING: ADD, CHANGE, DELETE were renamed add, change, unlink. Please update your config.')