feat: add styling for jsx using twind (#182)

* feat: enable styling for jsx using twind * test: add testing for tw-in-jsx * feat: versioning (#180) * feat: add versioning * fix outstanding issues * refactor: small editorial changes to versioning (#181) * chore: `deno task check` * refactor: move functionality to `render.tsx` chore: removed `tw.ts` and let user handle twind install --------- Co-authored-by: Samuel Kopp <62482066+boywithkeyboard@users.noreply.github.com>
boywithkeyboard-archive · Aug 19, 2023 · b6f347c · b6f347c
1 parent 20e5b98
commit b6f347c
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 32 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,12 @@
 {
   "deno.enable": true,
-  "deno.unstable": true
+  "deno.unstable": true,
+  "editor.defaultFormatter": "denoland.vscode-deno",
+  "[typescript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "editor.formatOnSave": true
 }
diff --git a/render.tsx b/render.tsx
@@ -0,0 +1,23 @@
+// Copyright 2023 Samuel Kopp. All rights reserved. Apache-2.0 license.
+/** @jsx h */
+import { default as renderToString } from 'https://esm.sh/preact-render-to-string@6.1.0?deps=preact@10.16.0'
+import { h, VNode } from 'https://esm.sh/preact@10.17.0'
+import { extract } from 'https://esm.sh/@twind/core@1.1.3'
+
+import { Context } from './mod.ts'
+
+export function render(c: Context, Component: (() => h.JSX.Element) | VNode) {
+  const html$ = renderToString(
+    Component instanceof Function ? <Component /> : Component,
+  )
+  try {
+    const { html, css } = extract(html$) // twind throws error when trying to extract if it is not installed
+    c.res.body = `<style>${css}</style><body>${html}</body>`
+  } catch (e) {
+    console.warn('twind is not installed, styles might not be applied')
+    c.res.body = html$
+  }
+  c.res.header('content-type', 'text/html; charset=utf-8')
+}
+
+export { h } from 'https://esm.sh/preact@10.17.0'
diff --git a/test/deps.ts b/test/deps.ts
@@ -1,3 +1,12 @@
-export { assertEquals } from 'https://deno.land/std@0.198.0/assert/assert_equals.ts'
-export { assertInstanceOf } from 'https://deno.land/std@0.198.0/assert/assert_instance_of.ts'
+export {
+  assert,
+  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'
diff --git a/test/render.test.tsx b/test/render.test.tsx
@@ -0,0 +1,49 @@
+// 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'
+
+Deno.test('render', async () => {
+  const app = new cheetah()
+  install(defineConfig({
+    presets: [presetAutoPrefix(), presetTailwind()],
+  }))
+
+  function Styled() {
+    return (
+      <h3 class='text-sm italic' id='styled'>
+        styled <code class='font-mono'>h3</code> component
+      </h3>
+    )
+  }
+
+  app.get('/a', (c) => render(c, Styled))
+
+  const a = await app.fetch(new Request('http://localhost/a'))
+
+  const document = new DOMParser().parseFromString(
+    await a.text(),
+    'text/html',
+  )
+
+  assert(document)
+  assert([...document.getElementsByTagName('style')].length)
+  assertEquals(
+    document.getElementById('styled')?.innerText,
+    'styled h3 component',
+  )
+  assertEquals(
+    a.headers.get('content-type'),
+    'text/html; charset=utf-8',
+  )
+})
diff --git a/x/jsx.tsx b/x/jsx.tsx
@@ -2,6 +2,7 @@
 /** @jsx h */
 import { default as renderToString } from 'https://esm.sh/preact-render-to-string@6.1.0?deps=preact@10.16.0'
 import { h, VNode } from 'https://esm.sh/preact@10.17.0'
+
 import { Context } from '../mod.ts'
 
 export function jsx(c: Context, Component: (() => h.JSX.Element) | VNode) {

diff --git a/x/x.test.tsx b/x/x.test.tsx
@@ -20,34 +20,36 @@ Deno.test('x', async (t) => {
     assertEquals(await verify(token, cryptoKey) !== undefined, true)
   })
 
-  await t.step('jsx', async () => {
-    const app = new cheetah()
-
-    function Custom() {
-      return <h1>hello world</h1>
-    }
-
-    app.get('/a', (c) => jsx(c, Custom))
-    app.get('/b', (c) => jsx(c, <Custom />))
-
-    const a = await app.fetch(new Request('http://localhost/a'))
-    const b = await app.fetch(new Request('http://localhost/b'))
-
-    assertEquals(
-      await a.text(),
-      '<h1>hello world</h1>',
-    )
-    assertEquals(
-      a.headers.get('content-type'),
-      'text/html; charset=utf-8',
-    )
-    assertEquals(
-      await b.text(),
-      '<h1>hello world</h1>',
-    )
-    assertEquals(
-      b.headers.get('content-type'),
-      'text/html; charset=utf-8',
-    )
+  await t.step('jsx', async (t) => {
+    await t.step('plain', async () => {
+      const app = new cheetah()
+
+      function Custom() {
+        return <h1>hello world</h1>
+      }
+
+      app.get('/a', (c) => jsx(c, Custom))
+      app.get('/b', (c) => jsx(c, <Custom />))
+
+      const a = await app.fetch(new Request('http://localhost/a'))
+      const b = await app.fetch(new Request('http://localhost/b'))
+
+      assertEquals(
+        await a.text(),
+        '<h1>hello world</h1>',
+      )
+      assertEquals(
+        a.headers.get('content-type'),
+        'text/html; charset=utf-8',
+      )
+      assertEquals(
+        await b.text(),
+        '<h1>hello world</h1>',
+      )
+      assertEquals(
+        b.headers.get('content-type'),
+        'text/html; charset=utf-8',
+      )
+    })
   })
 })