/** @jsx element */
// JSX PRAGMA MUST BE THE SAME NAME AS THE IMPORT FROM 'doc-jsx'
import element from 'doc-jsx'
 
const handleClick = () => alert('Hello!')
 
const component = (
  <div class='hi'>
    <button onClick={handleClick}>Click Me!</button>
    <a href='google.com'>Google</a>
  </div>
)
 
// need to manually insert into DOM
document.querySelector('body').appendChild(component)

import dscript from 'dscript'
import element from 'docs-jsx'
 
const {a, button, div} = dscript(element)
 
const handleClick = () => alert('Hello!')
 
const component = (
  div('.hi', [
    button({onClick: handleClick}, ['Click Me!']),
    a({href: 'google.com'}, ['Google'])
  ])
)
 
// need to manually insert into DOM
document.querySelector('body').appendChild(component)

import {a, button, div} from 'dscript-doc'
 
const handleClick = () => alert('Hello!')
 
const component = (
  div('.hi', [
    button({onClick: handleClick}, ['Click Me!']),
    a({href: 'google.com'}, ['Google'])
  ])
)
 
// need to manually insert into DOM
document.querySelector('body').appendChild(component)