Using external Javascript libraries with Juris.

#juris

One of the main (if not the main) advantage in developping with Juris, it is that is just Javascript.

So, you have all the Javascrit libraries at your disposal without any adaptation (I look at you REACt)

When I was developping with Mithril, I used a very neat library called bss.

See how it integrates nicely with Juris.

You can try the demo here: Traffic Lights

import b from 'bss'

b.css({
  body: {
    bc: "#252526"
  }
})

b.css({
  button: {
    w: '3.5rem',
    ta: 'center',
    border:'none',
    p: '0.5rem',
    br: '3px'
  }
})

const Light = (props, context) => ({
  div: {
     className: () => {
      const isVisible = context.getState(props.name) === 'visible';
      const dimLight =  'opacity 0.5';
      const highLight = `opacity 1;box-shadow: 0px 0px 40px 10px ${props.color}`;
      return b`
        w 40px
        h 40px
        br 50%
        bc ${props.color}
        m 6px
        transition all 0.3s ease
        ${isVisible ? highLight : dimLight}`
    }
  }
});

const Switch = (props, ctx) => {
  const [cs, cg] =  [ ctx.setState, ctx.getState ];
  const switchlight = (color) => cs(color, cg(color) == "visible" ? "hidden" : "visible")
  return { 
    div: {
      className: b`display flex;jc center;gap:0.5rem;padding-bottom: 2rem; mt 1rem`,
      children: [
        { button: {
            className: b`bc red;c white`,
            text: "red",
            onclick: () => switchlight("red")
        }},
        { button: {
            className: b`bc orange;c black`,
            text: "orange",
            onclick: () => switchlight("orange")
        }},
        { button: {
            className: b`bc green; c white`,
            text: "green",
            onclick: () => switchlight("green")
        }}        
      ]
    }
  }
}

const Lights = () => ({
  div: {
    className: b`display flex;jc center`,
    children: [
      {
        div: {
          className: b`
            display:flex
            flex-direction:column
            gap:1.25rem
            mt 1rem`,
          children: [
            { Light: { color: 'red', name: 'red' } },
            { Light: { color: 'orange', name: 'orange' } },
            { Light: { color: 'green', name: 'green' } },
          ]
        }
      },
    ]
  } 
})



const TrafficLights = () => ({
  div: {
    className:b`
      br:px;
      border: 1px solid white;
      p: 1rem;
      bc black;
      w 200px;
      h:270px;
      m:0 auto;
      mt:3rem;`, 
    children: [
      { Lights: {} },
      { Switch: {} }
    ]
  }
}) 

const juris = new Juris ({ 
  states: {
    "red": "hidden",
    "orange": "hidden",
    "green": "hidden"
  },
  components : {
    Light, Lights, Switch, TrafficLights
  },
  layout: { TrafficLights: {} }
});

juris.render();