alexrqs / jsx-render

Lightweight util to render JSX without react

JSX-render

Small file to render jsx as a stateless component from react but without the heavy kb use of it.

Contents

• Quick Start
• How To Install
• Features
• How To test
• Recipes

Quick Start

(no build system, just plain html)

<!-- index.html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/javascript" src="https://alecsgone.github.io/jsx-render/jsx.js"></script>
<script>
  Babel.registerPreset('jsx-render', {
    presets: [[Babel.availablePresets['es2015']]],
    plugins: [
      Babel.availablePlugins['syntax-jsx'],
      [
        Babel.availablePlugins['transform-react-jsx'],
        {
          pragma: 'jsx.dom',
          pragmaFrag: 'jsx.Fragment',
        },
      ],
    ],
  })
</script>

<script type="text/babel" data-presets="jsx-render">
  const foo = () => <p>Hello world</p>

  document.body.appendChild(foo())
</script>

How To Install

The required packages are @babel/plugin-syntax-jsx, @babel/plugin-transform-react-jsx and of course jsx-render, additionally you will need @babel/core, webpack or any other way to transpile the code that you prefer.

$ npm install jsx-render @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx

Getting started

Make sure you have the pragma fn defined and its name is "dom"

// .babelrc
{
  "presets": ["babel-preset-primavera", ["@babel/preset-react", { "pragma": "dom" }]]
}

Now you can create components e.g.

import dom from 'jsx-render'

const DummyComponent = props => <div>{props.children}</div>
export default DummyComponent

or Fragments

import dom, { Fragment } from 'jsx-render'
import DummyComponent from './DummyComponent'

const Modal = props => (
  <div>
    <header>Include {props.title}</header>
    <Fragment>
      <div>Body</div>
      <DummyComponent>Copyright</DummyComponent>
    </Fragment>
  </div>
)

Features

• new Class suport with default target: the render() method
• Render Basic Single Components <div />
• Conditional Component {condition ? <foo/> : <bar/>}
• Component with Data Attributes <div data-some="attr">
• Component with Attributes <img src="foo.jpg">
• Nested Component ul>li>a
• Siblings Components ul>li*3
• Components with classname p.chan
• Map components & numbers array.map(item => <div>{item}</div>)
• Fragments
• Portals
• SVG
• Component Props <Custom foo="foo">
• Component Children <Custom>children</Custom>
• Component render xlinkHref for SVG sprites
• dangerouslySetInnerHTML
• Components withState Redux not included

Fragments

import dom, { Fragments } from 'jsx-render'

// Return siblings without direct parent component
const Foo = () => (
  <Fragments>
    <li />
    <li />
  </Fragments>
)
const ul = document.createElement('ul')
ul.appendChild(<Foo />)

Portals

import dom, { portalCreator } from 'jsx-render'

// can render the component on a diferent node than the parentNode
// useful for modals, and if the argument is not a node
// it will render as body direct son by default
function Component(node) {
  const Portal = portalCreator(node)

  return (
    <div>
      <Portal>
        <span>uno</span>
      </Portal>
    </div>
  )
}

dangerouslySetInnerHTML

function render() {
  return <div dangerouslySetInnerHTML={{ __html: '<span>StrangerDanger</span>' }} />
}

Recipes

• Redux
• ClassComponents
• Events

Testing

Testing

jsx-render's Issues

Setting backgroundImage as in the React docs doesn't work

First, thanks for this library. I think it is really cool :)

When I try to set the background image to the style object as in the React documentation it doesn't work. Example code:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

Checking the code I think the problem is here:
https://github.com/alecsgone/jsx-render/blob/6e8053e67b460a2cdcb8585dc606d6b8da5fd3ce/src/dom.js#L24

The objectToStyleString function doesn't take into account the camelCase.

You can hack this just by setting the background image this way:

const divStyle = {
  color: 'blue',
  'background-image': 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

But I don't think this is a good solution because it is not compatible with how react currently works.

I think a better solution would be to loop over the style object and set each prop directly to the element.style object.

I can create a PR for this if you like.

Fragment code example is incorrect

In the code examples, "Fragments" is imported and "Fragments" is used as a component tag.
This is incorrect. It should be "Fragment" (not plural).

Arrow function does not have prototype

Hello,

First of all I'd like to thanks for this lib but I think I found a bug in it.

Example code:
const B = (props) => (<A foo="predefined" { ...props } />)

In dom composeToFunction function there is a row:
var bridge = JSXTag.prototype.render ? new JSXTag(props).render : JSXTag;

You are trying to check JSXTag.prototype.render function but when you pass arrow function there is no prototype.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Use_of_prototype_property

It would be fantastic if you could fix this. :)
Use this:
var bridge = JSXTag.prototype && JSXTag.prototype.render ? new JSXTag(props).render : JSXTag;

Cheers, keep up the good work!

Server Side Rendering

so far just making experiments on this branch https://github.com/alecsgone/jsx-render/tree/v2, but feel free to contribute

dangerouslySetInnerHTML

hello.
I can't find example with dangerouslySetInnerHTML.
Is possible to render hmlt code from string inside html element ??

Typescript?

This project currently has no typescript definitions, would you consider a PR to convert the entire thing to typescript?

SVG predefine shapes doesn't work

Hi,
first of all thanks for this library, it's been working like a charm and helped me quite a lot on my current project.
I've noticed though, that using SVG predefined shapes don't work (rect, circle are the one I tried)
Do you plan on supporting those one day ? Working with Path element works, but I've scratch my head quite a bit wondering why SVG wouldn't render when I first tried to use it with rect an circle. Maybe a word on the documentation would be nice.

Thanks again anyway!

Suggestion: Add createElement export for dom

webpack has the option for aliasing one module name with another, so you could alias react as jsx-render and use the default React.createElement function from the jsx loader

This would allow using the same components on the server and client side provided they're compatible enough