Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/matthewmueller/sun

Simple little virtual DOM node builder for Preact.
https://github.com/matthewmueller/sun

Last synced: about 1 month ago
JSON representation

Simple little virtual DOM node builder for Preact.

Awesome Lists containing this project

README

        

# sun

Simple little virtual DOM node builder for Preact.

## Example

```js
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' }))
//


hellomatt

```

## Features

- 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](https://github.com/developit/preact)

## Installation

```bash
npm install sun
```

## High-Order Components

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

```js
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), '

hi
')
```

## Where you can Help

- Performance tuning
- React support

## Test

```bash
npm install
make test
```

## License

MIT