babel-plugin-gruu/index.js

Babel plugin for transpiling JSX to Gruu

import Gruu from 'gruujs'
const store = <$ state={{ date: new Date() }} />

const lamps = Gruu.createComponent({
  state: {
    selected: {
      params: [
        {label: 'PZ: ', value: '2342342'},
        {label: 'PZ: ', value: '2342342'},
        {label: 'PZ: ', value: '2342342'}
      ],
      actions: [
        {label: 'DELETE', func: () => console.log('sdfds')}
      ]
    },
    selectConnection ({id, pz, circuit}) {
      // console.log(lamps.state.selected)
      lamps.state.selected = {
        params: [
          {label: 'ID: ', value: id},
          {label: 'PZ: ', value: pz},
          {label: 'Circuit: ', value: circuit}
        ],
        actions: [
          {label: 'DELETE', func: () => console.log('delete')}
        ]
      }
    }
  }
})

const footer = (
  <div
    style={{
      position: 'fixed',
      bottom: '0px',
      width: '100vw',
      height: '80px',
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: '20px',
      boxSizing: 'border-box'
    }}
  >
    {() => {
      const { params, actions } = lamps.state.selected
      return [
        ...params.map(({ label, value }) => (
          <div style={{ marginRight: '20px' }}>
            <span>{label}</span>
            <span>{value}</span>
          </div>
        )),
        <div style={{ flex: 1 }}></div>,
        ...actions.map(({ label, func }) => <button onclick={func}>{label}</button>),
      ]
    }}
  </div>
)

setInterval(() => {
  // console.log(Math.random())
  const id = Math.random()
  console.log(id)
  lamps.state.selectConnection({ id, circuit: Math.random(), pz: Math.random() })
}, 1000)

const container = document.querySelector('#root')
Gruu.renderApp(container, [footer])