A collection of awesome things regarding the Stencil ecosystem.
A Web Component compiler for building fast, reusable UI components and Progressive Web Apps.
Built by the Ionic Framework team.
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.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
-
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.
- 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 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.
- 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.
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.
- Polyglot - Give your JavaScript the ability to speak many languages.
- i18next - learn once, translate everywhere
- 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
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
Predictable State Container for JavaScript Apps
- 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
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
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