Getting started

The easiest way to try out FicusJS is using a hello world example.

Create an index.html file and copy the following between the <body> tags.

<hello-world></hello-world>

<script type="module">
import { html, renderer } from 'https://unpkg.com/ficusjs-renderers@latest/dist/lit-html.js'
import { createComponent } from 'https://unpkg.com/ficusjs@latest/dist/component.js'

createComponent('hello-world', {
  renderer,
  handleClick (e) {
    window.alert('Hello to you!')
  },
  render () {
    return html`<div>
<p>Test component</p>
<button type="button" @click="${this.handleClick}">Click me!</button>
</div>`
  }
})
</script>

Alternatively, fork this Codepen to see it in action - https://codepen.io/ducksoupdev/pen/GRZPqJO

The hello world example creates a new custom element using the createComponent function and registers it to the hello-world tag. It uses the lit-html renderer for creating HTML from tagged template literals.

Once registered, the tag can be used multiple times in HTML and instances can be programmatically obtained using document.querySelector or element.querySelector