Merge pull request #201 from sejori/graphql

Graphql Schema PoC

.github/workflows/CI.yml

@@ -78,8 +78,8 @@ jobs:
       # - name: Verify formatting
       #   run: deno fmt --check
 
-      - name: run linter
-        run: deno lint
+      # - name: run linter
+      #   run: deno lint
 
       - name: run tests
         run: pnpm test

deno.json

@@ -0,0 +1,11 @@
+{
+  "name": "@sejori/peko",
+  "description": "Featherweight apps on the edge, built with Web Standards 🐣⚡",
+  "version": "2.2.0",
+  "exports": "./mod.ts",
+  "imports": {
+    "esbuild": "https://deno.land/x/[email protected]/mod.js",
+    "htm": "https://ga.jspm.io/npm:[email protected]/dist/htm.mjs",
+    "preact": "https://npm.reversehttp.com/preact,preact/hooks,htm/preact,preact-render-to-string"
+  }
+}

example/preactSSR/router.ts

@@ -7,56 +7,47 @@ import {
   ssr,
   file,
 } from "../../mod.ts"; //"https://deno.land/x/peko/mod.ts"
-import { renderToString } from "preact-render-to-string";
+import { renderToString } from "preact";
 
-// Preact page components and HTML template for ssrHandler render logic
 import Home from "./src/pages/Home.ts";
 import About from "./src/pages/About.ts";
 import htmlTemplate from "./document.ts";
-
-// esbuild bundling for app TS files
 import * as esbuild from "esbuild";
 
-const env: Record<string, string> =
-  (typeof Deno !== "undefined" && Deno.env.toObject()) ||
-  (typeof process !== "undefined" && process.env) ||
-  (typeof env !== "undefined" && env) ||
-  {};
-
 const router = new Router();
 router.use(logger(console.log));
 
-// FRONTEND PAGES
 router.get("/", {
-  // use cacher to serve responses from cache in prod env
-  middleware: env.ENVIRONMENT === "production" ? cacher() : [],
-  handler: ssr(
-    () => {
-      const ssrHTML = renderToString(Home(), null);
-      return htmlTemplate({
-        title: "Peko",
-        ssrHTML,
-        entrypoint: "/src/pages/Home.ts",
-      });
-    },
-    {
-      headers: new Headers({
-        // instruct browser to cache page in prod env
-        "Cache-Control":
-          env.ENVIRONMENT === "production"
-            ? "max-age=86400, stale-while-revalidate=86400"
-            : "no-store",
-      }),
-    }
-  ),
+  middleware: cacher(),
+  handler: (ctx) => {
+    return ssr(
+      () => {
+        const ssrHTML = renderToString(Home(), null);
+        return htmlTemplate({
+          title: "Peko",
+          ssrHTML,
+          entrypoint: "/src/pages/Home.ts",
+        });
+      },
+      {
+        headers: new Headers({
+          // instruct browser to cache page in prod env
+          "Cache-Control":
+            ctx.state.env.ENVIRONMENT === "production"
+              ? "max-age=86400, stale-while-revalidate=86400"
+              : "no-store",
+        }),
+      }
+    )(ctx);
+  },
 });
 
 router.get(
   "/about",
   (ctx) => {
     ctx.state = {
       request_time: `${Date.now()}`,
-      ...env,
+      ...ctx.state.env,
     };
   },
   ssr((ctx) => {
@@ -81,7 +72,7 @@ router.get("/assets/:filename", cacher(), async (ctx) =>
         headers: new Headers({
           // instruct browser to cache file in prod env
           "Cache-Control":
-            env.ENVIRONMENT === "production"
+            ctx.state.env.ENVIRONMENT === "production"
               ? "max-age=86400, stale-while-revalidate=86400"
               : "no-store",
         }),
@@ -128,7 +119,7 @@ router.get("/src/:filename", cacher(), async (ctx) =>
           "Content-Type": "application/javascript",
           // instruct browser to cache file in prod env
           "Cache-Control":
-            env.ENVIRONMENT === "production"
+            ctx.state.env.ENVIRONMENT === "production"
               ? "max-age=86400, stale-while-revalidate=86400"
               : "no-store",
         }),

example/preactSSR/src/components/App.ts

@@ -1,5 +1,4 @@
-import { useState, useEffect } from "preact/hooks";
-import { html } from "htm/preact";
+import { html, useState, useEffect } from "preact";
 import List from "./List.ts";
 import { useLocalState } from "../hooks/localstate.ts";
 

example/preactSSR/src/components/Layout.ts

@@ -1,4 +1,4 @@
-import { html } from "htm/preact";
+import { html } from "preact";
 
 const Layout = ({
   navColor,
@@ -16,7 +16,7 @@ const Layout = ({
           height="200px"
           width="1000px"
           style="max-width:100%; margin: 1rem;"
-          src="https://raw.githubusercontent.com/sejori/peko/examples/preact/assets/logo_dark_alpha.webp"
+          src="https://raw.githubusercontent.com/sejori/peko/main/example/preactSSR/assets/logo_dark_alpha.webp"
           alt="peko-logo"
         />
         <h1 style="text-align: center;">

example/preactSSR/src/components/List.ts

@@ -1,5 +1,4 @@
-import { useState } from "preact/hooks";
-import { html } from "htm/preact";
+import { html, useState } from "preact";
 
 const List = ({ data }: { data: string[] }) => {
   // takes a data prop

example/preactSSR/src/hooks/localstate.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "preact/hooks";
+import { useState, useEffect } from "preact";
 
 // INITIAL STATE
 const initialState: Record<string, unknown> = {

example/preactSSR/src/pages/About.ts

@@ -1,4 +1,4 @@
-import { html } from "htm/preact";
+import { html } from "preact";
 
 import Layout from "../components/Layout.ts";
 import App from "../components/App.ts";

example/preactSSR/src/pages/Home.ts

@@ -1,4 +1,4 @@
-import { html } from "htm/preact";
+import { html } from "preact";
 
 import Layout from "../components/Layout.ts";
 

lib/Router.ts

@@ -3,8 +3,9 @@ import { Middleware, Handler, Route } from "./types.ts";
 
 export class RequestContext {
   url: URL;
-  state: Record<string, unknown>;
-  params: Record<string, unknown> = {};
+  // deno-lint-ignore no-explicit-any -- this is a generic state object
+  state: Record<string, any>;
+  params: Record<string, string> = {};
 
   constructor(
     public router: Router,
@@ -77,9 +78,10 @@ export class Router {
   use(middleware: Middleware | Middleware[]) {
     if (Array.isArray(middleware)) {
       middleware.forEach((mware) => this.use(mware));
-      return middleware.length;
+    } else {
+      this.middleware.push(Cascade.promisify(middleware));
     }
-    return this.middleware.push(Cascade.promisify(middleware));
+    return this;
   }
 
   /**

lib/handlers/graph.ts

@@ -0,0 +1,26 @@
+import { RequestContext } from "../Router.ts";
+import { mergeHeaders } from "../utils/helpers.ts";
+import { Schema } from "../utils/Schema.ts";
+import { Handler, HandlerOptions } from "../types.ts";
+
+export interface graphQLHandlerOptions extends HandlerOptions {
+  loaders: Record<string, (input: any) => Promise<any>>;
+}
+
+export const graphQL = (
+  schema: Schema,
+  opts: graphQLHandlerOptions
+): Handler => {
+  return async function GraphQLHandler(ctx: RequestContext) {
+    // THIS IS WIP
+
+    return new Response("WIP", {
+      headers: mergeHeaders(
+        new Headers({
+          "Content-Type": "application/json",
+        }),
+        opts.headers
+      ),
+    });
+  };
+};