dscript

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 as dscript relies on html-tags, which uses a JSON file

General Usage

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 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)
    )
  )

Usage with Deku

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)
    )
  )

Usage with Custom Components

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)
      )
    )
  ])

API

dscript(createElement)

Returns an object with properties consisting of HTML tags with values being 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 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()])

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