Merge pull request #115 from d-exclaimation/feat/#113/map+decoder

`Map.decode(_)` and Documentation fixed

CONTRIBUTING.md

@@ -184,12 +184,15 @@ Thank you for your contributions!
 
 Updating documentation should go through similar process with any [pull request](#pull-requests). However, passing test is not a requirement (If tests somehow failed, open an [issue](#how-do-i-submit-a-good-bug-report)).
 
-The documentation is built with [Retype](https://retype.com). All you need to see the documentation are:
+The documentation is a [Next.js](https://nextjs.org) site built with [Nextra](https://nextra.site).
 
-- Install `retype` CLI
-- Go to the documentation directory
-- Run `retype watch`
-- Run `retype build` to check for compilation errors
+Here are the requirements for the documentation:
+
+- [Node.js](https://nodejs.org/), Next.js uses Node.js.
+- [`pnpm`](https://pnpm.io/), the documentation is using `pnpm` instead of regular `npm`.
+
+To develop the documentation locally:
+- Run `pnpm dev` (If the mdx styling is off, try deleting the node_modules or removing `_app.tsx` and bringing it back)
 
 ## Styleguides
 

Documentation/components/features.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import styles from "./features.module.css";
 
 const Feature = ({ text }: { text: string }) => (
@@ -30,14 +31,18 @@ export default () => {
       <div className="hidden md:block mx-auto max-w-full w-[880px] text-center px-4 mb-10">
         <div className={styles.features}>
           {FEATURES.map((feature) => (
-            <Feature text={feature} />
+            <Fragment key={feature}>
+              <Feature text={feature} />
+            </Fragment>
           ))}
         </div>
       </div>
       <div className="md:hidden mx-auto max-w-full w-[880px] text-center px-4 mb-10">
         <div className={styles.features}>
           {FEATURES_SM.map((feature) => (
-            <Feature text={feature} />
+            <Fragment key={feature}>
+              <Feature text={feature} />
+            </Fragment>
           ))}
         </div>
       </div>

Documentation/components/header.tsx

@@ -0,0 +1,13 @@
+export default () => {
+  return (
+    <div className="flex flex-row items-center justify-center w-full">
+      <img className="w-32 hidden md:block md:w-40" src="/pioneer.png" />
+      <div className="flex flex-col items-center md:items-start justify-center">
+        <h1 className="font-extrabold text-4xl md:text-5xl mt-8">Pioneer</h1>
+        <span className="text-lg my-5 text-gray-600 md:!text-2xl">
+          GraphQL server for Swift
+        </span>
+      </div>
+    </div>
+  );
+};

Documentation/pages/_app.tsx

@@ -6,10 +6,8 @@
 //
 
 import type { AppProps } from "next/app";
-import type { ReactElement } from "react";
-
 import "../styles.css";
 
-export default function App({ Component, pageProps }: AppProps): ReactElement {
+export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;
 }

Documentation/pages/docs/fundamentals/relationship.mdx

@@ -159,7 +159,7 @@ struct Context {
 }
 
 extension Car {
-    func loader(ev: EventLoop, db: Database) -> DataLoader<Car.ID, Car?> {
+    static func loader(ev: EventLoop, db: Database) -> DataLoader<Car.ID, Car?> {
         .init(on: ev) { keys in
             let cars = try? await db.find(Car.self).filter { keys.contains($0.id) }
             return keys.map { key in
@@ -173,7 +173,7 @@ extension Car {
 }
 
 extension Part {
-   func loader(ev: EventLoop, db: Database) -> DataLoader<Car.ID, [Part]> {
+   static func loader(ev: EventLoop, db: Database) -> DataLoader<Car.ID, [Part]> {
         .init(on: ev) { keys in
             let all = try? await db.find(Part.self).filter { keys.contains($0.carId) }
             return keys.map { key in
@@ -218,4 +218,4 @@ SELECT * FROM parts
 SELECT * FROM cars WHERE id IN (?, ?, ?, ?, ?, ...)
 ```
 
-which is significantly better.
+which is significantly better.

Documentation/pages/docs/fundamentals/subscriptions.mdx

@@ -2,7 +2,7 @@ import { Callout } from 'nextra-theme-docs'
 
 # Subscriptions
 
-Subscriptions are long-lasting GraphQL read operations that can update their result whenever a particular server-side event occurs. Subscriptions are most commonly used tp pushed updated results from the server to subscribing clients. 
+Subscriptions are long-lasting GraphQL read operations that can update their result whenever a particular server-side event occurs. Subscriptions are most commonly used to pushed updated results from the server to subscribing clients. 
 
 ## Resolving a subscription
 

Documentation/pages/docs/web-frameworks/vapor.mdx

@@ -157,14 +157,18 @@ The custom request will similar to the request used to upgrade to websocket but
 
 The connection params is given during websocket initialization from [`payload` as part of `ConnectionInit` message](https://github.com/enisdenjo/graphql-ws/blob/master/PROTOCOL.md#connectioninit) inside an established WebSocket connection.
 
-<Callout type="warning">
-Given that the `payload` parameter is custom each client, it does not have any strong typing, so you would have to work with `Map` enum.
+<Callout type="info">
+    The given `payload` is not statically typed. However, you can decode it to a custom payload type using the `.decode(_)` method
 </Callout>
 
-```swift {2-3} showLineNumbers copy filename="Getting some values"
+```swift {1-3,6-7} showLineNumbers copy filename="Getting some values"
+struct AuthPayload: Decodable {
+    var authorization: String
+}
+
 func someHeader(ctx: Context, _: NoArguments) async -> String? {
-    guard .string(let token) = ctx.params?["Authorization"] else { ... }
-    return token
+    guard let payload = ctx.payload.decode(AuthPayload.self) else { ... }
+    return payload.authorization
 }
 ```
 

Documentation/pages/index.mdx

@@ -1,22 +1,15 @@
-import {Callout} from 'nextra-theme-docs'
-import Features from 'components/features'
+import { Callout } from 'nextra-theme-docs'
+import Features from '../components/features'
+import Headers from '../components/header'
 
-{
-// wrapped with {} to mark it as javascript so mdx will not put it under a p tag
-}
 
 {
-  <div className="flex flex-row items-center justify-center w-full">
-    <img className="w-32 hidden md:block md:w-40" src="/pioneer.png"/>
-    <div className="flex flex-col items-center md:items-start justify-center">
-      <h1 className="font-extrabold text-4xl md:text-5xl mt-8">Pioneer</h1>
-      <span className="text-lg my-5 text-gray-600 md:!text-2xl">GraphQL server for Swift</span>
-    </div>
-  </div>
+  <>
+    <Headers/>
+    <Features/>
+  </>
 }
 
-<Features/>
-
 ## Setup
 
 ```swift copy

Documentation/tailwind.config.js

@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {

Documentation/theme.config.tsx

@@ -9,7 +9,7 @@ const config: DocsThemeConfig = {
     <>
       <meta name="msapplication-TileColor" content="#ffffff" />
       <meta name="theme-color" content="#ffffff" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta name="viewport" content="width=devppice-width, initial-scale=1.0" />
       <meta httpEquiv="Content-Language" content="en" />
       <meta name="description" content="GraphQL server for Swift" />
       <meta name="og:description" content="GraphQL server for Swift" />

Sources/Pioneer/Extensions/Map/Map+Decoder.swift

@@ -0,0 +1,30 @@
+//
+//  Map+Decoder.swift
+//  pioneer
+//
+//  Created by d-exclaimation on 22:20.
+//
+
+import class Foundation.JSONEncoder
+import class Foundation.JSONDecoder
+import enum GraphQL.Map
+
+public extension Map {
+    /// Decode this map into a parseable value
+    /// - Parameter dataType: The type to decode into
+    /// - Returns: The decoded value
+    func decode<T: Decodable>(_ dataType: T.Type) throws -> T {
+        let data = try JSONEncoder().encode(self)
+        return try JSONDecoder().decode(dataType, from: data)
+    }
+}
+
+public extension Payload {
+    /// Decode this payload into a parseable value
+    /// - Parameter dataType: The type to decode into
+    /// - Returns: The decoded value
+    func decode<T: Decodable>(_ dataType: T.Type) throws -> T {
+        let data = try JSONEncoder().encode(self)
+        return try JSONDecoder().decode(dataType, from: data)
+    }
+}