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.
npm install --save dscript
Note: Webpack users will need to setup a json-loader as dscript relies on html-tags, which uses a JSON file
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)
)
)
])It is recommended to use dscript-react to remove dscript boilerplate.
Take the following:
import React from 'react'
export default props =>
<ul>
{props.items.map(item =>
<li>{item.name}</li>
)}
</ul>or:
import {createElement} from 'react'
export default props =>
createElement('ul', {},
props.items.map(item =>
createElement('li', {}, [
item.name
])
)
)and instead write:
import {createElement} from 'react'
import dscript from 'dscript'
const {li, ul} = dscript(createElement)
export default props =>
ul(
props.items.map(item =>
li(item.name)
)
)It is recommended to use dscript-deku to remove dscript boilerplate.
Take the following:
import {element} from 'deku'
export default ({props}) =>
<ul>
{props.items.map(item =>
<li>{item.name}</li>
}
</ul>or:
import {element} from 'deku'
export default ({props}) =>
element('ul', {},
props.items.map(item =>
element('li', {}, [
item.name
])
)
)and instead write:
import dscript from 'dscript'
import {element} from 'deku'
const {li, ul} = dscript(element)
export default ({props}) =>
ul(
props.items.map(item =>
li(item.name)
)
)Custom components example is shown using React, but works with any framework that works with dscript's basic functionality.
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)
)
)
])Returns an object with properties consisting of HTML tags with values being creator functions.
type: function
A function to use to create the Virtual DOM. For example, React's createElement or Deku's element.
Returns a creator function to be used in dscript.
For example:
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()])Same as above
type: any
Should be a valid component for the createElement function.
creatorFunction([cssClassesAndOrIdSelector,] [attributes,] [children])
A function that returns a virtual DOM node created with createElement.
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.
type: object
default: {}
An object that will be passed as the attributes to the virutal DOM node.
type: ...Elements
default: []
The list of children passed to the created virtual DOM node.
MIT © Dustin Specker
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent