Merge pull request #17 from front-of-house/dev

update deps

lib/__tests__/index.tsx

@@ -1,58 +1,32 @@
 import { test } from 'uvu'
 import * as assert from 'uvu/assert'
-import { h } from 'hyposcript'
+import { h, PropsWithChildren } from 'hyposcript'
 import { hypostyle } from 'hypostyle'
 import * as presets from 'hypostyle/presets'
 
-import { Box, configure, compose } from '../'
-
-test('no hypostyle', () => {
-  assert.throws(() => {
-    ;<Box />
-  })
-
-  assert.throws(() => {
-    compose('h1', {})({})
-  })
-})
+import { Box, configure, compose, flush } from '../'
 
 test('no styles', () => {
-  const hypo = hypostyle({})
-
-  configure(hypo)
-
   const html = <Box />
 
-  assert.ok(/class=""/.test(html))
+  assert.ok(/class/.test(html))
 })
 
 test('base, pick', () => {
-  const hypo = hypostyle(presets)
-
-  configure(hypo)
-
   const html = <Box order={1} style={{ background: 'blue' }} />
-  const sheet = hypo.flush()
+  const sheet = flush()
 
   assert.ok(/order:1/.test(sheet))
   assert.ok(/style.+background/.test(html))
 })
 
 test('with as', () => {
-  const hypo = hypostyle(presets)
-
-  configure(hypo)
-
   const html = <Box as="img" src="" />
 
   assert.ok(/img.+src/.test(html))
 })
 
 test('className', () => {
-  const hypo = hypostyle(presets)
-
-  configure(hypo)
-
   const html = <Box className="foo" w={10} />
 
   assert.ok(/foo\s/.test(html))
@@ -70,7 +44,7 @@ test('configure', () => {
 
   configure(hypo)
   ;<Box className="foo" c="b" />
-  const sheet = hypo.flush()
+  const sheet = flush()
 
   assert.ok(/color:blue/.test(sheet))
 })
@@ -92,18 +66,39 @@ test('compose', () => {
       <H2 />
     </div>
   )
-  const sheet = hypo.flush()
+  const sheet = flush()
 
   assert.ok(/h1/.test(html))
   assert.ok(/font-size:20px/.test(sheet))
   assert.ok(/font-size:30px/.test(sheet))
 })
 
+test('compose Component', () => {
+  const hypo = hypostyle(presets)
+  configure(hypo)
+
+  function Button({ children, ...props }: PropsWithChildren<{}>) {
+    return (
+      <Box as="button" {...props}>
+        {children}
+      </Box>
+    )
+  }
+
+  const Button1 = compose(Button, {
+    color: 'tomato',
+  })
+
+  const html = <Button1>Hello</Button1>
+
+  assert.ok(/button class="/.test(html))
+})
+
 test('cx', () => {
   const hypo = hypostyle(presets)
   configure(hypo)
   ;<Box cx={(theme) => ({ c: 'blue' })} />
-  const sheet = hypo.flush()
+  const sheet = flush()
 
   assert.ok(/color:blue/.test(sheet))
 })

lib/index.tsx

@@ -1,5 +1,6 @@
 import { h, Props } from 'hyposcript'
-import { Hypostyle, HypostyleObject, HypostyleObjectOrFunction } from 'hypostyle'
+import { hypostyle, Hypostyle, HypostyleObject, HypostyleObjectOrFunction } from 'hypostyle'
+import * as presets from 'hypostyle/presets'
 
 export type As = keyof HTMLElementTagNameMap
 export type BoxProps = {
@@ -8,17 +9,17 @@ export type BoxProps = {
 } & HypostyleObject &
   Props
 
-let hypo: Hypostyle
+let hypo = hypostyle(presets)
 
 export function configure(hypostyle: Hypostyle) {
   hypo = hypostyle
 }
 
-export function Box({ as = 'div', className = '', cx, ...props }: BoxProps) {
-  if (!hypo) {
-    throw new Error('Hypobox is not configured')
-  }
+export function flush() {
+  return hypo.flush()
+}
 
+export function Box({ as = 'div', className = '', cx, ...props }: BoxProps) {
   var picked = hypo.pick<Omit<BoxProps, 'cx' | 'as'>>(props)
   var css = hypo.css({
     ...hypo.explode(picked.styles), // custom attr
@@ -36,10 +37,6 @@ export function Box({ as = 'div', className = '', cx, ...props }: BoxProps) {
 
 export function compose(Element: As | Function, styles: HypostyleObjectOrFunction) {
   return (props: BoxProps) => {
-    if (!hypo) {
-      throw new Error('Hypobox is not configured')
-    }
-
     var picked = hypo.pick<BoxProps>(props)
     var cx = {
       ...hypo.explode(styles), // base

package.json

@@ -27,19 +27,19 @@
     "@commitlint/config-conventional": "^15.0.0",
     "@semantic-release/git": "^10.0.1",
     "baretest": "^2.0.0",
-    "c8": "^7.10.0",
+    "c8": "^7.12.0",
     "commitlint": "^15.0.0",
-    "esbuild": "^0.14.7",
-    "esbuild-register": "^3.2.1",
+    "esbuild": "^0.14.54",
+    "esbuild-register": "^3.4.2",
     "husky": "^7.0.4",
     "is-ci": "^3.0.1",
-    "prettier": "^2.5.1",
+    "prettier": "^2.8.4",
     "semantic-release": "^18.0.1",
-    "typescript": "^4.5.4",
-    "uvu": "^0.5.2"
+    "typescript": "^4.9.5",
+    "uvu": "^0.5.6"
   },
   "dependencies": {
-    "hyposcript": "^1.1.3",
-    "hypostyle": "^3.2.6"
+    "hyposcript": "^1.2.0",
+    "hypostyle": "^3.3.2"
   }
 }