initial commit

Author: kitsonk

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018-2022 the oak authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,50 @@
+# nat
+
+A server side rendering framework for Deno CLI and Deploy.
+
+Incorporating [acorn](https://deno.land/x/acorn/),
+[nano-jsx](https://nanojsx.io/), and [twind](https://twind.dev/), it provides
+the tooling to provide a server centric framework for providing dynamic websites
+served from the edge.
+
+## Getting started
+
+nat as a setup script which makes it easy to scaffold out a project and is the
+easiest way to get started. You will need the Deno CLI [installed]() locally and
+will want to run the following command within the current directory you want to
+setup:
+
+```
+> deno run https://deno.land/x/nat/setup.ts
+```
+
+The script will prompt you for read and write permissions to the current
+directory as well as ask for your confirmation to write out the initial setup
+files for the project.
+
+Once the project is setup, edit the `main.tsx` and use `deno task start` to run
+your server locally.
+
+You can also deploy the project to [Deno Deploy](https://dash.deno.com/new).
+
+## Concepts
+
+The framework includes the acorn
+[Router](https://doc.deno.land/https://deno.land/x/acorn/mod.ts/~/Router). An
+instance of the router is returned from the
+[init()](https://doc.deno.land/https://deno.land/x/nat/mod.ts/~/init) function.
+The acorn router is based of web standard [URLPattern]() API which allows
+matching URLs and parsing out values to variables. Those variables are available
+in the handler's
+[context `.params` property](https://doc.deno.land/https://deno.land/x/acorn/mod.ts/~/Context#params).
+
+The framework comes with [nano-jsx](https://nanojsx.io/) built in, which makes
+it easy to server-side render JSX/TSX as a response.
+
+The framework also comes with [twind](https://twind.dev/) integrated which is
+well suited to server side rendering of tailwind's functional CSS styles in a
+super efficient way.
+
+---
+
+Copyright 2022 the oak authors. All rights reserved. MIT License.

_examples/server.tsx

@@ -0,0 +1,15 @@
+/** @jsx h */
+/** @jsxFrag Fragment */
+import { Fragment, h, init, render, tw } from "../mod.ts";
+
+const router = init();
+
+const App = ({ name }: { name: string }) => (
+  <>
+    <div class={tw`text-xl`}>Hello {name}!</div>
+  </>
+);
+
+router.get("/", render(<App name="world" />));
+
+router.listen();

deno.jsonc

@@ -0,0 +1,6 @@
+{
+  "importMap": "./import-map.json",
+  "tasks": {
+    "example": "deno run --check --allow-net --allow-hrtime _examples/server.tsx"
+  }
+}

handlers.ts

@@ -0,0 +1,58 @@
+// Copyright 2022 the oak authors. All rights reserved. MIT License.
+
+/**
+ * Handlers,
+ * @module
+ */
+
+import { Helmet } from "nano-jsx/helmet";
+import { renderSSR } from "nano-jsx/ssr";
+import { contentType } from "std/media_types";
+import { getStyleTag, virtualSheet } from "twind/sheets";
+
+export const sheet = virtualSheet();
+
+/** A handler function which renders JSX and send it to the client.
+ *
+ * ### Example
+ *
+ * ```ts
+ * import { h, init, render } from "https://deno.land/x/nat/mod.ts";
+ * import { App } from "./App.tsx";
+ *
+ * const router = init();
+ * router.get("/", render(<App />));
+ * router.listen();
+ * ```
+ */
+export function render(jsx: unknown) {
+  return function handler() {
+    sheet.reset();
+    const page = renderSSR(jsx);
+    const styles = getStyleTag(sheet);
+    const {
+      body,
+      head,
+      footer,
+      attributes: { body: bodyAttributes, html: htmlAttributes },
+    } = Helmet.SSR(page);
+    return new Response(
+      `<!DOCTYPE html>
+      <html ${htmlAttributes.toString()}>
+      <head>
+        ${styles}
+        ${head.join("\n")}
+      </head>
+      <body ${bodyAttributes.toString()}>
+        ${body}
+        ${footer.join("\n")}
+      </body>
+      </html>`,
+      {
+        headers: {
+          "content-type": contentType("text/html")!,
+        },
+      },
+    );
+  };
+}

import-map.json

@@ -0,0 +1,14 @@
+{
+  "imports": {
+    "acorn": "https://deno.land/x/[email protected]/mod.ts",
+    "nano-jsx/core": "https://deno.land/x/[email protected]/core.ts",
+    "nano-jsx/fragment": "https://deno.land/x/[email protected]/fragment.ts",
+    "nano-jsx/helmet": "https://deno.land/x/[email protected]/components/helmet.ts",
+    "nano-jsx/ssr": "https://deno.land/x/[email protected]/ssr.ts",
+    "oak_commons/types": "https://deno.land/x/[email protected]/types.d.ts",
+    "std/media_types": "https://deno.land/[email protected]/media_types/mod.ts",
+    "twind": "https://esm.sh/[email protected]?pin=v82",
+    "twind/css": "https://esm.sh/[email protected]/css?pin=v82",
+    "twind/sheets": "https://esm.sh/[email protected]/sheets?pin=v82"
+  }
+}

init.ts

@@ -0,0 +1,88 @@
+// Copyright 2022 the oak authors. All rights reserved. MIT License.
+
+/** Contains initialization and setup functionality.
+ *
+ * @module
+ */
+
+import { Router } from "acorn";
+import { type Configuration as TwindConfig, setup } from "twind";
+import { type KeyRing } from "oak_commons/types";
+
+import { sheet } from "./handlers.ts";
+
+export interface StartOptions extends TwindConfig {
+  /** A key ring which will be used for signing and validating cookies. */
+  keys?: KeyRing;
+  /** When providing internal responses, like on unhandled errors, prefer JSON
+   * responses to HTML responses. When set to `false` HTML will be preferred
+   * when responding, but content type negotiation will still be respected.
+   *  Defaults to `true`. */
+  preferJson?: boolean;
+  /** When `true` skip setting up default logging on the router. */
+  quiet?: boolean;
+}
+
+/** Initialize the environment optionally using the provided options, returning
+ * an instance of {@linkcode Router}.
+ *
+ * ### Example
+ *
+ * ```ts
+ * import { init, render } from "https://deno.land/x/nat/mod.ts";
+ * import { App } from "./App.tsx";
+ *
+ * const router = init();
+ * router.get("/", render(<App />));
+ *
+ * router.listen();
+ * ```
+ */
+export function init(options: StartOptions = {}): Router {
+  options.sheet = sheet;
+  setup(options);
+  const router = new Router(options);
+  if (!options.quiet) {
+    router.addEventListener(
+      "listen",
+      ({ secure, hostname, port }) =>
+        console.log(
+          `%cListening: %c${
+            secure ? "https://" : "http://"
+          }${hostname}:${port}`,
+          "color:green;font-weight:bold;",
+          "color:yellow",
+        ),
+    );
+    router.addEventListener(
+      "handled",
+      (
+        {
+          response: { status },
+          route,
+          request: { url, method },
+          measure: { duration },
+        },
+      ) => {
+        const responseColor = status < 400
+          ? "color:green"
+          : status < 500
+          ? "color:yellow"
+          : "color:red";
+        let path = route?.route;
+        if (!path) {
+          try {
+            path = new URL(url).pathname;
+          } catch {
+            // just swallow errors here
+          }
+        }
+        console.log(
+          `%c${method} ${path} - [${status}] ${duration.toFixed(2)}ms`,
+          responseColor,
+        );
+      },
+    );
+  }
+  return router;
+}