refactor: simplify render module (#185)

* refactor(render): fmt error message * fix issues and complete update * fix lint issue
boywithkeyboard-archive · Aug 20, 2023 · dd0aadb · dd0aadb
1 parent b6f347c
commit dd0aadb
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 46 deletions.
diff --git a/mod.ts b/mod.ts
@@ -9,6 +9,7 @@ export type { Extension } from './extensions.ts'
 export { default as jwt } from './jwt.ts'
 export { LocationData } from './location_data.ts'
 export { otp } from './otp.ts'
+export { h, Renderer } from './render.ts'
 export { sendMail } from './send_mail.ts'
 export { Store } from './store.ts'
 

diff --git a/render.ts b/render.ts
@@ -0,0 +1,58 @@
+// Copyright 2023 Samuel Kopp. All rights reserved. Apache-2.0 license.
+import { brightYellow, gray } from 'https://deno.land/std@0.198.0/fmt/colors.ts'
+import {
+  defineConfig,
+  extract,
+  install,
+} from 'https://esm.sh/@twind/core@1.1.3'
+import presetAutoPrefix from 'https://esm.sh/@twind/preset-autoprefix@1.0.7'
+import presetTailwind from 'https://esm.sh/@twind/preset-tailwind@1.1.4'
+import { default as renderToString } from 'https://esm.sh/preact-render-to-string@6.1.0?deps=preact@10.17.1&target=es2022'
+import { VNode } from 'https://esm.sh/preact@10.17.1?target=es2022'
+import { Context } from './mod.ts'
+
+export function render(c: Context, Component: VNode) {
+  const htmlString = renderToString(Component)
+
+  try {
+    const { html, css } = extract(htmlString) // twind throws error when trying to extract if it is not installed
+
+    c.res.body = `<style>${css}</style><body>${html}</body>`
+  } catch (_err) {
+    if (c.dev) {
+      console.warn(
+        gray(
+          `${
+            brightYellow('warning')
+          } - twind is not installed, thus styles might not be applied`,
+        ),
+      )
+    }
+
+    c.res.body = htmlString
+  }
+
+  c.res.header('content-type', 'text/html; charset=utf-8')
+}
+
+export class Renderer {
+  render
+
+  constructor(options?: Parameters<typeof defineConfig>[0]) {
+    if (options) {
+      options.presets = options.presets
+        ? [presetAutoPrefix(), presetTailwind(), ...options.presets]
+        : [presetAutoPrefix(), presetTailwind()]
+    }
+
+    install(defineConfig(
+      options ?? {
+        presets: [presetAutoPrefix(), presetTailwind()],
+      },
+    ))
+
+    this.render = render
+  }
+}
+
+export { h } from 'https://esm.sh/preact@10.17.1?target=es2022'
diff --git a/render.tsx b/render.tsx
diff --git a/test/deps.ts b/test/deps.ts
@@ -3,10 +3,5 @@ export {
   assertEquals,
   assertInstanceOf,
 } from 'https://deno.land/std@0.198.0/assert/mod.ts'
-export { z } from 'https://deno.land/x/zod@v3.21.4/mod.ts'
-export { defineConfig } from 'https://esm.sh/@twind/core@1.1.3'
-import presetAutoPrefix from 'https://esm.sh/@twind/preset-autoprefix@1.0.7'
-import presetTailwind from 'https://esm.sh/@twind/preset-tailwind@1.1.4'
-export { presetAutoPrefix, presetTailwind }
 export { DOMParser } from 'https://deno.land/x/deno_dom@v0.1.38/deno-dom-wasm.ts'
-export { install } from 'https://esm.sh/@twind/core@1.1.3'
+export { z } from 'https://deno.land/x/zod@v3.21.4/mod.ts'
diff --git a/test/render.test.tsx b/test/render.test.tsx
@@ -1,23 +1,12 @@
 // Copyright 2023 Samuel Kopp. All rights reserved. Apache-2.0 license.
 /** @jsx h */
-
-import { h, render } from '../render.tsx'
-import cheetah from '../mod.ts'
-import {
-  assert,
-  assertEquals,
-  defineConfig,
-  DOMParser,
-  install,
-  presetAutoPrefix,
-  presetTailwind,
-} from './deps.ts'
+import cheetah, { h, Renderer } from '../mod.ts'
+import { assert, assertEquals, DOMParser } from './deps.ts'
 
 Deno.test('render', async () => {
   const app = new cheetah()
-  install(defineConfig({
-    presets: [presetAutoPrefix(), presetTailwind()],
-  }))
+
+  const { render } = new Renderer()
 
   function Styled() {
     return (
@@ -27,12 +16,14 @@ Deno.test('render', async () => {
     )
   }
 
-  app.get('/a', (c) => render(c, Styled))
+  app.get('/a', (c) => render(c, <Styled />))
 
   const a = await app.fetch(new Request('http://localhost/a'))
 
+  const tx = await a.text()
+
   const document = new DOMParser().parseFromString(
-    await a.text(),
+    tx,
     'text/html',
   )