Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dustinspecker/dscript
Framework agnostic hyperscript
https://github.com/dustinspecker/dscript
Last synced: 2 days ago
JSON representation
Framework agnostic hyperscript
- Host: GitHub
- URL: https://github.com/dustinspecker/dscript
- Owner: dustinspecker
- License: mit
- Created: 2016-02-11T02:45:08.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-05-28T20:11:41.000Z (over 7 years ago)
- Last Synced: 2024-08-11T00:48:11.166Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 37.1 KB
- Stars: 35
- Watchers: 5
- Forks: 2
- Open Issues: 21
-
Metadata Files:
- Readme: readme.md
- License: license.md
Awesome Lists containing this project
README
# dscript
[](https://badge.fury.io/js/dscript)
[](https://travis-ci.org/dustinspecker/dscript)
[](https://coveralls.io/r/dustinspecker/dscript?branch=master)
[](https://codeclimate.com/github/dustinspecker/dscript)
[](https://david-dm.org/dustinspecker/dscript/#info=dependencies&view=table)
[](https://david-dm.org/dustinspecker/dscript/#info=devDependencies&view=table)
[](http://makeapullrequest.com)
[](http://commitizen.github.io/cz-cli/)
[](https://github.com/semantic-release/semantic-release)
> Framework agnostic hyperscript
> Should work with any JSX pragma that works out of the box with Babel's JSX implementation or a function that accepts an HTML tag or component, attributes object, and children list.
## Install
```
npm install --save dscript
```
**Note: Webpack users will need to setup a [json-loader](https://github.com/webpack/json-loader) as dscript relies on [html-tags](https://github.com/sindresorhus/html-tags), which uses a [JSON file](https://github.com/sindresorhus/html-tags/blob/master/html-tags.json)**
## General Usage
```javascript
import dscript from 'dscript'
import {element} from 'deku'
const {div, li, ul} = dscript(element)
const handleClick = () => alert('hi!')
export default ({props}) =>
div('.list-container', {onClick: handleClick}, [
ul(
props.items.map(item =>
li(item.name)
)
)
])
```
## Usage with React
**It is recommended to use [dscript-react](https://github.com/dustinspecker/dscript-react) to remove dscript boilerplate.**
Take the following:
```javascript
import React from 'react'
export default props =>
- {item.name}
{props.items.map(item =>
)}
```
or:
```javascript
import {createElement} from 'react'
export default props =>
createElement('ul', {},
props.items.map(item =>
createElement('li', {}, [
item.name
])
)
)
```
and instead write:
```javascript
import {createElement} from 'react'
import dscript from 'dscript'
const {li, ul} = dscript(createElement)
export default props =>
ul(
props.items.map(item =>
li(item.name)
)
)
```
## Usage with Deku
**It is recommended to use [dscript-deku](https://github.com/dustinspecker/dscript-deku) to remove dscript boilerplate.**
Take the following:
```javascript
import {element} from 'deku'
export default ({props}) =>
- {item.name}
{props.items.map(item =>
}
```
or:
```javascript
import {element} from 'deku'
export default ({props}) =>
element('ul', {},
props.items.map(item =>
element('li', {}, [
item.name
])
)
)
```
and instead write:
```javascript
import dscript from 'dscript'
import {element} from 'deku'
const {li, ul} = dscript(element)
export default ({props}) =>
ul(
props.items.map(item =>
li(item.name)
)
)
```
## Usage with Custom Components
Custom components example is shown using React, but works with any framework that works with dscript's basic functionality.
```javascript
import dscript from 'dscript'
import {createElement} from 'react'
import customComponent from './custom-component'
const creator = dscript(createElement)
const {div, li, ul} = creator
const customComponentCreator = creator(customComponent)
const handleClick = () => alert('hi!')
export default props =>
div('.list-container', {onClick: handleClick}, [
customComponentCreator({total: props.total}),
ul(
props.items.map(item =>
li(item.name)
)
)
])
```
## API
### dscript(createElement)
Returns an object with properties consisting of HTML tags with values being [creator functions](#creator-functions).
#### createElement
type: `function`
A function to use to create the Virtual DOM. For example, React's `createElement` or Deku's `element`.
### dscript(createElement)(customComponent)
Returns a [creator function](#creator-functions) to be used in dscript.
For example:
```javascript
import {createElement} from 'react'
import customComponent from './lib/custom-react-component/'
import dscript from 'dscript'
const creator = dscript(createElement)
const {div} = creator
const custom = creator(customComponent)
export default div([custom()])
```
#### createElement
Same as above
#### customComponent
type: `any`
Should be a valid component for the `createElement` function.
### Creator Functions
`creatorFunction([cssClassesAndOrIdSelector,] [attributes,] [children])`
A function that returns a virtual DOM node created with `createElement`.
#### cssClassesAndOrIdSelector
type: `string`
default: `null`
A convenience to add class names and an id to a virtual DOM node. **Note: The provided selector will override `attribute`'s class and id.**
### attributes
type: `object`
default: `{}`
An object that will be passed as the attributes to the virutal DOM node.
### children
type: `...Elements`
default: `[]`
The list of children passed to the created virtual DOM node.
## LICENSE
MIT © [Dustin Specker](https://github.com/dustinspecker)