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