Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/matthewmueller/sun
- Owner: matthewmueller
- Created: 2016-08-04T05:40:38.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-10-23T07:10:04.000Z (about 8 years ago)
- Last Synced: 2024-04-23T06:59:29.746Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 27.3 KB
- Stars: 15
- Watchers: 4
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: Readme.md
- Changelog: History.md
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