@j-heavy/chrysalisjs v0.9.0

Why use?

• :lollipop: Just 1kb runtime
• :zap: Fast due to Virtual DOM inside
• :hammer: Declarative and intuitive API
• :hibiscus: Component-based (without class-syntax)
• :candy: Learns in 15 minutes

Installation

Get Chrysalis Starter Kit, if you do not want to setup the environment (Webpack inside)

Install the Chrysalis and then import what you need

For dev environment

via NPM

npm install chrysalis.js

import { h, render } from 'chrysalis.js'  

Optionally you can install the babel plugin for transform JSX, that provide more readable syntax for VDOM elements.

// setup the .babelrc
{
  "plugins": [
    [
      "transform-react-jsx",
      {
        "pragma": "h"
      }
    ]
  ]
}

For browser

via CDN

<script src="https://unpkg.com/chrysalis.js">

const { h, render } = Chrysalis

Timer example

Chrysalis (20 SLOC)

import { h, render } from 'chrysalis.js'
  
const Timer = {
  state: { seconds: 0 },
  
  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }))
  },  
  
  oncreate() {
    this.interval = setInterval(() => this.tick(), 1000)
  },
  
  onremove() {
    clearInterval(this.interval)
  },

  render({ seconds }) {
    return (
      <div>
        Seconds: {seconds}
      </div>      
    )
  }
}

render(<Timer />, document.getElementById('app'))

class Timer extends React.Component { constructor(props) { super(props) this.state = { seconds: 0 } }

tick() { this.setState(state => ({ seconds: state.seconds + 1 })) }

componentDidMount() { this.interval = setInterval(() => this.tick(), 1000) }

componentWillUnmount() { clearInterval(this.interval) }

render() { return (

  <div>
    Seconds: {this.state.seconds}
  </div>
);

} }

ReactDOM.render(, document.getElementById('app'))

</details>

<details><summary><strong>Vue (22 SLOC)</strong></summary><br>
  
```js
<template>
  <div>
    Seconds: {{ seconds }}
  </div>
</template>

<script>
  export default {
    data() {
      return { seconds: 0 }
    },

    methods: {
      tick: function() {
        this.seconds++
      }
    },

    mounted() {
      this.interval = setInterval(() => this.tick(), 1000)
    },

    beforeDestroy() {
      clearInterval(this.interval)
    }
  }
</script>

Get Involved

PRs are welcome!

• just fork it
• and submit PR

License

Chrysalis created with :heart: by heavy · Released under the MIT License.

j-heavy.github.io · GitHub @j-heavy · Twitter @_heavykj