Finally Good News - Stencil v1 has been released

Announcement Blog Post - https://ionicframework.com/blog/introducing-stencil-one-1-0-0/

Awesome StencilJS

Awesome Stencil Components

Boilerplates

Tools

Awesome IDE Plugins

Awesome Stencil Articles

Miscellaneous

What is StencilJS ?

StencilJS is the new compiler to build standards compliant Web Components using the current age principles like Typescript, JSX, Virtual DOM, asynchronous rendering pipleline and lazy-loading.

What are Web Components ?

Web Components is a combination of multiple HTML & JS Specs like Custom Elements & Shadow DOM which enable us to create highly standardised reusable components which can work similarly accross any framework like React, Angular, Ember, Vue or Vanilla JS.

An Awesome Talk to Know more about #StencilJS

List of Awesome Components Made using StencilJS

We are dividing the list into 3 categories for better readibility. Also the most recent ones are on the top and older ones in the bottom.

Design Systems

Duet Design System - A complete Stencil Based Design System component library which can be used with any SPA Framework like Angular/React etc.

Component Libraries

Fitness Dashboard Components - Fitness Dashboard Components built using StencilJS
D3-Stencil - Library of web components over popular D3 graph library
Material Web Components: UI Components built using Material Design principles and StencilJS (https://github.com/san2beerelli/material-webcomponents)
Stencil Components: Web UI components built on top of StencilJS
Stencil Components: Minor Reusable components like Buttons etc.
BlazeUI Atoms: Fully featured CSS / web component framework (https://github.com/BlazeSoftware/blaze/tree/master/packages/atoms)
Stencil Styled Components Small library to bring the concept of styled-components to StencilJS
Assister Chat Web Components resembling WhatsApp and Telegram for creating chatbot and live chat applications
stencil-react: Generate React bindings for Stencil 1.x component libraries
Bulmil: UI library based on Web Components, made with Bulma & stencil.

Individual Components

[Star Rating] (https://github.com/logisticinfotech/rating-component) - An amazing and flexible star rating component with lots of options.
Image Comparison Slider - Slider component to compare images before and after
Trombone Component - An amazing Trombone Component that makes music when you resize the window. It's A showcase on how StencilJs and the Web Audio API can collaborate to create awesome things.
Rating Component An amazing svg based rating component. There is a blog post how to create such a component too. https://www.logisticinfotech.com/blog/custom-rating-component/
Fast Morph An awesome morhping UI web component to help you animate your elements from one UI state to another using Light DOM.
Web Photo Filter An amazing high performance Photo filter web component made using StencilJS.
Lazy Iframe: A iframe based web component which lazy load iframes as the user scrolls over them.
Loading Spinner: A variety of loading spinners rendered using the same web component without the need of using different styles or images.
ST-Flippy: A web component to add Flip events to any HTML element. It has a smooth animation implemented.
ST-Signature: A Stencil component that allows the user to sign on screen and to get the bitmap of the signature.
Web Audio: Web Audio API as a set of web components! Provides <web-audio>, <web-audio-source>, <web-audio-effect>, <web-audio-visualizer>, <web-audio-sequencer>, and <web-audio-debugger>.
Smile To Unlock(Unique): Web Component which captures an image from the users camera and uses the Azure Cognitive Services Emotive API to figure out how happy the person is.
Bruit.io: Fully customizable web component, collecting user feedback with screenshot and technical data to a compatible API. Try it out here.
Stencil-Apollo - A set of Web Components based on Apollo Client
Stencil Mobx: Manage states with Mobx on stencil components (unstable release)
Stencil Reflector: Synchronizes decorated object members to their stencil component (alternative to stencil-mobx)
Stencil Payment: A Web Component which allows any web app to use the Payment Request API
Web Share: WC that makes it super easy to use the web share api.
ST Image: WC to Lazy Load Images as user scrolls them into the view port.
ST Muse: WC to that connects into Muse device using muse.js.
FWT Slider: Slider Stencil Component demonstrated to work with Angular or any other framework
ST Fetch: WC To make a Fetch API call to the backend.
Video Player: WC for rendering an ioperable video player with controls and full screen mode too.
Cryptocurrency Data: Web Component to display list of prices of popular Crypto Currencies
SplitMe: Universal web component to create resizable split layouts
Simple Buttons: Beautiful interactive buttons inspired by Material Design
Stencil Fragment: Allows the use of to render multiple elements without the need of a wrapping div or returning an array.
o-demo-bar: Development toolbox for web components made with stencil demo
ST-Voice2Text: Web Component which allows you to use the Web Speech API in browsers where it is supported.
STX-ABTest: A Web Component to help you implement A/B Test for your web app
UI Avatar: A web component to render User Avatar in your web app for all your users. It has an amazing feature to show Initials of name if no image is set.
Animatable: Animate any HTML Element using Web Animations API in a declarative way! 💅
IonPhaser: A web component to integrate Phaser Framework with Angular, React, Vue, etc 🎮
nice-anim: A Web Component to add "animate/reveal on scroll" by wrapping elements with it.
always-avatar: Generate nice replacement for avatar by username or email or whatever
Katex Expression: A web component to render KaTeX expressions.
web-complete: A lightweight, dependency-free, styleable autocomplete web component

Awesome Web/Mobile Apps built Using StencilJS

DeckDeck Go - An awesome online Presentation maker with a mobile remote control and everything implemented using StencilJS and awesome node based APIs. Source - https://github.com/deckgo/deckdeckgo/tree/master/webcomponents

Boilerplates and templates

Ionic official

Stencil Component Starter: Minimal boilerplate to create Stencil components.
Stencil App Starter: Basic boilerplate for Stencil components or apps.
Ionic PWA Toolkit Beta: Great starter template for building true PWAs with the power of Ionic and StencilJS.

Community

Stencil Web Component Starter - A nice web components started which also tells how documentation is auto generated too.

Tools (CLIs, scripts, etc.)

Ionic official

Create Stencil: A simple but effective npm script to start off a StencilJS project. Useful for complete apps, not just components. Uses the above starter packs Boilerplates

Awesome IDE Specific Stencil Plugins/Snippets

Visual Studio Code

Stencil Snippets - Stencil Snippets like st-component(generate component), st-prop(add new prop), st-event (add new @Event) etc.
Stencil Tools - Makes working with Stencil projects a breeze. Features new project, component, and test generators, snippets with automatic imports, and other helpful utilities.

Miscellaneous

Stencil cheatsheet: Overview of Stencil best practices.

Awesome Articles Related

Build a Fast Offline first PWA with StencilJS This is an awesome article by Christian with a good brief explanation of What are Web Components, why StencilJS and how to build an offline PWA using it. Must read if anyone is planning to build a #ProgressiveWebApp.
[Building a Modal Component using StencilJS via TDD] (https://medium.com/stencil-tricks/how-to-build-modals-with-stenciljs-f3e18caf86cf) An awesome read for anyone who is looking to create Enterprise ready Web Components using Test Driven Development approach and for all the people who always create a Modal component for React/Angular/Vue separately.
Building a web-component library using StencilJS This is the most popular use case for all the enterprises, to use Web Components as a reusable shared library.
How Stencil Fit Into Micro Frontend Ideas - An interesting read to know about usability of stenciljs
Stencil with AngularJS(v1) - Using Stencil Component with AngularJS v1. Please feel free to add any component to this list by raising a PR.
Faster Web Apps Using Stencil - An article with a small video explaining how you can develop faster web apps using StencilJS.
How I built Smile to Unlock- How Asim built SmileToUnlock using StencilJS components.
Stencil Todo with Redux - Awesome article explaining how to use stencil todo with redux.
Getting Started with StencilJS - Great resource to get started with StencilJS development.
Stencil components in React, Vue, and Angular - Step by step guide to use stencil components in the most popular JavaScript frameworks.

List of Awesome Websites Built using StencilJS

CodeCraft Smile To Unlock Video: Asim has developed this awesome Web Component used in the videos of his course which allows users to view video only if they Smile :).
Venue Genie: Venue Genie is the Airbnb for venues. The entire app is built with StencilJS and ReduxJS for state management.

edsilv / awesome-stenciljs Goto Github PK