JSX from Scratch

Iain Nash

@isiain

JSX isn't only for React!

Syntax Sugar for a standard createElement call.

JSX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin urna odio, aliquam vulputate faucibus id, elementum lobortis felis. Mauris urna dolor, placerat ac sagittis quis.

dom()

return (0, _dom2.default)(
  'div',
  { className: 'text' },
  (0, _dom2.default)(
    _HeaderHi.HeaderHi,
    { step: atStep, className: 'headerHi' },
    (0, _dom2.default)(
      'div',
      { className: 'hidiv' },
      'Welcome to JSConf!'
    ),
    (0, _dom2.default)(
      'div',
      { className: 'step' },
      'Can you see me now? ',
      (0, _dom2.default)(
        'span',
        null,
        atStep
      )
    )
  )
);

<div>
  <img
     width={this.step*20+100}
     height={this.step*20+100}
     src="./logo.png" />
  <div>{this.children}</div>
</div>

What can we do with this?

• Avoid using JSX and babel for simple components
• Use as an interactive DSL for other languages
• Build custom shadow trees with easier syntax

Styling?

<rules for="body">
  <rules for="img">
    <margin>0 auto</margin>
    <display>block</display>
    <paddingTop>50px</paddingTop>
  </rules>
  <background color="#eee" />
  <fontSize>26pt</fontSize>
  <fontFamily>Helvetica</fontFamily>
  <padding animate="2s">{`${-1*atStep*20+200}px`}</padding>
  <rules for=".text">
    <background color="black" />
    <color>#eee</color>
    <textAlign>center</textAlign>
    <userSelect>none</userSelect>
    <fontSize>{`${atStep*10+20}pt`}</fontSize>
    <rules for=".hidiv">
      <padding>200px</padding>
      <margin animate=".5s">
        {`${rand(10, 20)}px`} 30px {`${rand(10, 20)}px`} 20px
      </margin>
    </rules>
  </rules>
</rules>

Renders

body{
  background: #eee;
  font-size: 26pt;
  font-family: Helvetica;
  transition: padding 2s;
  padding: 200px;
}
body img{
  margin: 0 auto;
  display: block;
  padding-top: 50px;
}
body .text{
  background: black;
  color: #eee;
  text-align: center;
  user-select: none;
  font-size: 20pt;
}
body .text .hidiv {
  padding: 200px;
  transition: margin .5s;
  margin: -11px  30px  -13px  20px;
}

Demo