https://github.com/ficusjs/ficusjs-counter-examples

Examples of building web components with FicusJS
https://github.com/ficusjs/ficusjs-counter-examples

ficusjs web-components

Last synced: about 1 month ago
JSON representation

Examples of building web components with FicusJS

• Host: GitHub
• URL: https://github.com/ficusjs/ficusjs-counter-examples
• Owner: ficusjs
• License: mit
• Created: 2020-10-13T13:53:30.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-09-15T05:24:24.000Z (over 3 years ago)
• Last Synced: 2024-05-01T09:46:11.710Z (8 months ago)
• Topics: ficusjs, web-components
• Language: HTML
• Homepage:
• Size: 235 KB
• Stars: 0
• Watchers: 5
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# FicusJS counter examples

Inspired by [Webcomponents.dev](https://webcomponents.dev/) [_All the Ways to Make a Web Component_](https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/),

this is a comparison of coding style, bundle size and performance of 4 different ways to make a Web Component with [FicusJS](https://github.com/ficusjs/ficusjs)!

## Summary

The same `` web component has been written 4 times in [FicusJS](https://github.com/ficusjs/ficusjs) using different renderers.

The renderers used are:

- Built-in element renderer

- [htm](https://www.npmjs.com/package/htm)

- [htm](https://www.npmjs.com/package/htm) with [Preact](https://www.npmjs.com/package/preact)

- [lit-html](https://www.npmjs.com/package/lit-html)

- [uhtml](https://www.npmjs.com/package/uhtml)

## Demo

[https://ficusjs.github.io/ficusjs-counter-examples/](https://ficusjs.github.io/ficusjs-counter-examples/)

## Getting started

```sh

npm start

```