node package manager

sun

Tiny little VDOM node helper for Preact

sun

Simple little virtual DOM node builder for Preact.

let render = require('preact-render-to-string')
let { div, span, strong } = require('sun')
 
const App = ({ name }) => (
  div.class('App')(
    span('hello'),
    strong(name)
  )
)
 
render(App({ name: 'matt' }))
// <div class="App"><span>hello</span><strong>matt</strong></div> 
  • Functions for all valid HTML elements
  • Functions for all valid HTML attributes on each element
  • Supports custom attributes (e.g. span({ custom: 'attribute' })('hi there!'))
  • Proudly built for Preact
npm install sun

High-Order Components are a powerful technique for modifying children on the fly. Here's how you can do it with sun.

let render = require('preact-render-to-string')
let { component } = require('sun')
 
let styling = component(function ({ class: cls, children }) {
  assert.equal(cls, 'whatever')
  return children[0]
})
 
let app = styling.class('whatever')(
  div.class('wahtever')(
    strong('hi')
  )
)
 
assert.equal(render(app), '<div class="wahtever"><strong>hi</strong></div>')
  • Performance tuning
  • React support
npm install
make test

MIT