This package has been deprecated

Author message:

Use preact instead

vanilla-jsx

3.0.2 • Public • Published

Vanilla-JSX

Vanilla-JSX is a library that converts JSX into vanilla HTML Elements.

Features

  • Converts JSX to vanilla HTMLElements
  • Translates className attribute into class
  • Supports event listeners as attributes like <div on-click={someFunction}></div>
  • Supports ref attribute with process helper

API

class Component {
  get element(): HTMLElement
  get refs(): Object<string, HTMLElement>
  render(...args): HTMLElement
  renderToString(...args): string
  dispose(): void
}
export function jsx(name, attributes, ...children)
export function createClass(object): Component

Example

'use babel'
 
import {createClass as createJSXClass, jsx} from 'vanilla-jsx'
/** @jsx jsx */
// ^ the above comment is required for babel
 
const Message = createJSXClass({
  renderView: function(message) {
    this.logMessageCreation(message)
    return <div>
      <span>{message.time}</span>
      <span>{message.from}</span>
      <span ref="text">{message.text}</span>
    </div>
  },
  changeText(text) {
    this.refs.text.textContent = text
  }
  logMessageCreation: function(message) {
    // do something with `message`
  }
})
 
const messageFromBob = new Message()
messageFromBob.render({
  time: Date.now() - (1000 * 60 * 60),
  from: 'Bob',
  text: 'Hey'
})
document.body.appendChild(messageFromBob.element)
messageFromBob.changeText("I'm the new text!")
 
const messageFromJohn = new Message()
messageFromJohn.render({
  time: Date.now() - (1000 * 60 * 60 * 2),
  from: 'John',
  text: 'Hey'
})
document.body.appendChild(messageFromJohn.element)

LICENSE

This project is licensed under the terms of MIT License, See the LICENSE file for more info

Readme

Keywords

Package Sidebar

Install

npm i vanilla-jsx

Weekly Downloads

0

Version

3.0.2

License

MIT

Last publish

Collaborators

  • steelbrain