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://cdn.skypack.dev/@ficusjs/renderers@5/htm'
import { createCustomElement } from 'https://cdn.skypack.dev/ficusjs@6/custom-element'
createCustomElement('hello-world', {
renderer,
handleClick () {
window.alert('Hello to you!')
},
render () {
return html`
<div>
<p>FicusJS hello world</p>
<button type="button" onclick="${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 createCustomElement function and registers it to the hello-world tag. It uses the htm JSX-like renderer (other renderers are available) 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