Awesome StencilJS

A collection of awesome things regarding the Stencil ecosystem.

• Stencil
  • Stencil General Resources
  • Stencil Community
  • Stencil News
• Stencil Tutorials
  • Stencil General Tutorials
  • Stencil and JSX
  • Stencil and Typescript
• Stencil Tools
  • Stencil Development Tools
  • Stencil Styling
  • Stencil Routing
  • Stencil Component Libraries
  • Stencil Testing
  • Stencil Integration
  • Stencil Internationalization
  • Stencil State Management
  • Stencil Code Editor Plugins
• Redux
  • Redux General Resources
  • Redux Tools
  • Redux Tutorials
• Articles
• Videos
  • Conferences

:package: Stencil

A Web Component compiler for building fast, reusable UI components and Progressive Web Apps.
Built by the Ionic Framework team.

Stencil General Resources

• Stencil Official Website
• Stencil Documentation
• Stencil GitHub
• Stencil Changelog

Stencil Community

• Stencil Slack
• Stencil Twitter

Stencil News

• Stencil / Ionic Podcast
• Stencil Blog

:mortar_board: Stencil Tutorials

Stencil General Tutorials

• Stencil Official Tutorial
• Stencil Cheatsheet

Stencil and JSX

JSX, or JavaScript XML , is an extension to the JavaScript language syntax. Similar in appearance to HTML, JSX provides a way to structure component rendering using syntax familiar to many developers.

• Introducing JSX
• JSX in Stencil

Stencil and Typescript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

• Typescript Official Website
• Typescript Documentation
• Typescript Playground
• Typed Components

:wrench: Stencil Tools

Stencil Development Tools

• Ionic PWA Toolkit - Build lightning fast Progressive Web Apps with zero config and best practices built-in.

• Stencil App Starter - Minimal starter project for building apps with Stencil.

• Stencil Component Starter - Minimal starter project for building shareable web components with Stencil.

• Stencil Static Site Generation - Utility functions and helpers for building static sites with Stencil.

• Stencil Output Targets - These are output targets that can be added to Stencil for React, Angular, Vue or Svelte.

• Storybook - UI component dev, test and documentation.

• Stencil-eslint-plugin - ESLint rules specific to Stencil JS projects.

Stencil Styling

• Styled Component - Use the best bits of ES6 and CSS to style your apps without stress
• Sass - CSS with superpowers
• PostCSS - A tool for transforming CSS with JavaScript
• Less - It's CSS, with just a little more.
• Stylus - Expressive, robust, feature-rich CSS language

Stencil Routing

• Stencil Router - A simple router, inspired by React Router v4, for Stencil apps and vanilla Web Component apps.
• ion-router - A component for handling routing inside vanilla and Stencil JavaScript projects.

Stencil Component Libraries

• Ionic - Build amazing Native and Progressive Web Apps with web technologies. One app running on everything.
• Blaze - Framework-free open source UI toolkit. It provides great structure for building websites quickly with a scalable and maintainable foundation.
• Bulmil - An agnostic UI components library based on Web Components, made with Bulma & Stencil.

Stencil Testing

• Unit Testing
• End-to-end Testing
• Screenshot Visual Diff

Testing within Stencil is broken up into two distinct types: Unit tests and End-to-end (e2e) tests. Both types use Jest as the JavaScript testing solution. The browser environment for end-to-end testing is done using Puppeteer.

• Jest - A delightful JavaScript Testing Framework with a focus on simplicity.
• Puppeteer - a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.

Stencil Integration

• React
• Angular
• Vue
• Svelte
• Ember
• Javascript (Without framework)

Stencil Internationalization

• Polyglot - Give your JavaScript the ability to speak many languages.
• i18next - learn once, translate everywhere

Stencil State Management

• Stencil State Tunnel - Tunneling state/props down through a component stack (Inspired by React Context)
• @stencil/store - Store is a lightweight shared state library by the stencil core team. It implements a simple key/value map that efficiently re-renders components when necessary.
• Redux - Predictable State Container for JavaScript Apps

Stencil Code Editor Plugins

Visual Studio Code

• Stencil Tools - VS Code Extension that makes working with Stencil projects a breeze.
• Stencil Snippets - An extension to add some snippets on vs code

:atom_symbol: Redux

Predictable State Container for JavaScript Apps

Redux General Resources

• Redux GitHub
• Redux Official Site

Redux Tools

• Stencil-redux - A simple redux connector for Stencil-built web components inspired by react-redux.
• redux-devtools - DevTools for Redux with hot reloading, action replay, and customizable UI

Redux Tutorials

• Building Applications with Stencil and Redux
• State Management with Redux in StencilJS: Loading Data

:newspaper: Articles

Ionic Team

• How Lazy-Loading Web Components Work with Stencil
• Why We Use Web Components
• 5 Reasons Web Components Are Perfect for Design Systems
• Build Your Next Design System with Web Components

Community

• Build Your Own Design System With StencilJS
• The Basics of Unit Testing in StencilJS

:movie_camera: Videos

Conferences

2019

• A built-time approach to the web - Manu Martinez-Almeida - JSConf EU 2019
• Architecting A Component Compiler - Adam Bradley - dotJS 2019

2018

• Building StencilJS with TypeScript - Josh Thomas - TSConf 2018
• Universal Components with StencilJS - Mike Hartington - Forwardjs 2018

2017

• Using Web Components in Ionic - Max Lynch & Adam Bradley - Polymer Summit 2017