JSFiddle - React, Tailwind, and code Playground

by channg

HTML

<html>
<head>
    <title>zcoil</title>
</head>
<body>
<div>result is in Console</div>
<script src="https://s.h2.pdim.gs/static/8cf07cf1f1c93ab2.js"></script>
</body>
</html>

CSS

body,html{
  width:100%;
  height:100%;
}
div{
  width:100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

var z = new zcoil()
z.init({
  data() {
    return {
      message: "hello world "
    }
  },
  asyncGetSaySomething(param) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(param)
      }, 1000)
    })
  },
  say(param) {
    this.asyncGetSaySomething(param).then((say) => {
      this.message += "," + say
    })
  },
  endToSay(){
    this.message += ",come on "
  }
})

z.$watch((from,to)=>{
  console.log(from.message)
  console.log(to.message)
})


var hl = z.$coil().say("Thank your star this project")

hl = hl.endToSay()

hl  = hl.say("It works really well")

hl.exec((data)=>{
  console.log(data.message)
})