https://github.com/ranjeetsinghbnl/product-mgmt-stenciljs

A showcase of product list and cart in Stenciljs
https://github.com/ranjeetsinghbnl/product-mgmt-stenciljs

microfrontends scss state-management stenciljs stenciljs-components tslint typescript webcomponents

Last synced: 10 days ago
JSON representation

A showcase of product list and cart in Stenciljs

• Host: GitHub
• URL: https://github.com/ranjeetsinghbnl/product-mgmt-stenciljs
• Owner: ranjeetsinghbnl
• License: mit
• Created: 2019-08-25T13:06:50.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-08-23T14:39:28.000Z (about 5 years ago)
• Last Synced: 2025-02-01T12:44:13.100Z (9 months ago)
• Topics: microfrontends, scss, state-management, stenciljs, stenciljs-components, tslint, typescript, webcomponents
• Language: TypeScript
• Homepage:
• Size: 39.1 KB
• Stars: 5
• Watchers: 1
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# Product & Cart showcase example

[![CircleCI](https://circleci.com/gh/ranjeetsinghbnl/product-mgmt-stenciljs/tree/master.svg?style=svg)](https://circleci.com/gh/ranjeetsinghbnl/product-mgmt-stenciljs/tree/master)

A showcase of product list and cart components in StencilJs. For more guides on stenciljs components, please [check](https://stenciljs.com/docs/component) their documentation.

This project will give you an ideas of stencil components. I have created a two components 

* [ProductView](https://github.com/ranjeetsinghbnl/product-mgmt-stenciljs/tree/master/src/components/mf-product-view) 

* [ProductCart](https://github.com/ranjeetsinghbnl/product-mgmt-stenciljs/tree/master/src/components/mf-product-cart)

# Guides to framework integration

I have created framework integration guide to use stencil components

* [Stencil components in VueJs](https://github.com/ranjeetsinghbnl/stenciljs-vue)

* [Stencil components in React](https://github.com/ranjeetsinghbnl/stenciljs-react)

* [Stencil components in Angular](https://github.com/ranjeetsinghbnl/stenciljs-angular)

* [Stencil components in javascript](https://github.com/ranjeetsinghbnl/stenciljs-javascript)

You can use stenciljs to create a technology agnostic application or in a micro front application. You can find more about stenciljs [here](https://stenciljs.com/docs/overview).

This example is inspired [from](https://itnext.io/building-micro-frontend-applications-with-angular-elements-34483da08bcb). A blog demonstrating how we can use angular-elements to create a micro-front application.

But i want to give this a try in [Stencil](https://stenciljs.com) as it is Web Components ready and comes with great [features](https://stenciljs.com/docs/goals-and-objectives). Also the build size is too small for production usage. You can check the build size of Angular-elements and StencilJs components.

For linting i'm using [tslint-stencil](https://www.npmjs.com/package/tslint-stencil) package. It will follow the [guidelines](https://stenciljs.com/docs/style-guide) define by the stencil team.