StencilJS is a compiler used to generate highly-optimized web components that are standard-compliant. In this short guide, we’re going to see how to use it to create a list or catalogue that can be used, for example, for e-commerce.
Before you build a catalogue with StencilJS, you will have to get the right tools. You first have to make sure you have a modern web browser such as Google Chrome (this is extremely important). You can build the entire catalogue using Github. It is also necessary to install Atom, Visual Studio Code, or any other suitable text editor. This program requires a recent LTS version of Node JS, as well as npm. To avoid inconveniences later on, you should make sure you update Node first. Note that you will have to use npm 6 or higher versions.
To create your first Stencil component, you should follow these steps:
• Start by running npm init stencil.
• After that, you will get a prompt to select the type of project you want to create. Here, you have to pick ‘Component’.
• You can then fill in the name of the project and press the enter button. For example, you can name it ‘stencil-catalogue’.
As the CLI will suggest at this point, you should proceed to type the following:
-$ cd stencil-catalogue
-$ npm install
-$npm start
Code language: PHP (php)This will change the current directory name to stencil-catalogue, which is the name you chose for the project. Running these commands will also install your dependencies and initiate the development server. At this point, you should go to the given URL, where you will see the first Stencil component.
In the ‘stencil-catalogue’ folder, you will see the structure of the project. You will find the source code in the src folder. You can open src/components to see the subfolders with the components.
Each component in the folder has two primary files, and these are the Typescript and CSS files. The TypeScript file uses a .tsx extension as Stencil components are created using JSX and TypeScript. Under this file, you will see the @component decorator, and this offers metadata about the component to the Stencil compiler. You will also see the standard Typescript class. You can use this to add all the essential code that will describe your Stencil component. After adding the code, you should declare a render function that returns JSX.
You should also add information on your products to the index.html file. The main index.ts file will generate the stencil-catalogue.esm.js file. When the Stencil is compiled, you will be able to use it as HTML tags.
You also need to add a description of the products or services in the index.html file. You can open the web page to verify that everything has been updated correctly.
Using StencilJS elements
In this next step, you will have to add items to the StencilJS catalogue. To do this, you first need to create a catalogue-list-item.tsx file under the src/components folder. In it, you will see the @components decorator that will provide metadata about the component to the Stencil compiler. You should then add the catalogue-list-item component to the index.html and implement the local DOM and data binding. Also, make sure you add some props with the @Prop( ) decorator as this will show custom attributes of the specific item.
Creating and iterating a list
You should start by making a file for the component, and this will appear as src/components/catalogue-list. In this folder, you should add a TypeScript file and a CSS file. These will appear as catalogue-list.tsx and catalogue-list.css respectively.
To define the model, you will have to go to the src/utils folder, where you will add the TypeScript or .ts file. You can then import the .ts file into the catalogue-list component. To manage the internal data for the component, you should use the @state( ) property.
In order to initialize the state, you will have to use the componentWillLoad() lifecycle method. You can then iterate the list by using the render( ) method.
Filtering
The goal in this stage is to allow shoppers to find items easily using the search bar. In other words, the results will change based on the words typed into the search box. For this purpose, you will need to use the Bootstrap column model to divide the page into two responsive sections. The left side of the page will have the search box.
You should first modify the render() method to add the standard HTML input tag. Next, you will need to modify the internal state of catalogue-list to match the input in the search bar. You should use the onInput attribute to determine the values added in the search, and to modify the internal state, you’ll have to use @state( ). At this point, you should use the doFilter( ) method to modify the filtering pattern according to the values introduced in the search.
Sorting
In this step, you will have to use the sort( ) function to the rendering of the items. You should first indicate the sorting options in stc/utils/catalogue.ts. You can then import the definitions to catalogue-list. After that, you can add the orderProp element. Next, you can add the @State criterion and initialize it into the sortingCriteria in componentWillLoad().
You can then modify the sort function so that the list is displayed as per the selected property. With the onChange attribute, you will be able to call a function when the sorting option is altered.
Calling the server
In this step, you have to copy the src/data file to the distribution file. You will have to open stencil.config.ts, after which you can copy the folder. Using JavaScript Fetch API, you can make an HTTP GET request to your server, and this will allow you to retrieve the .json files. You can use componentWillLoad() to ensure that the data is available as soon as the catalogue-list element loads. You can display more data on each catalogue-list element by adding different properties and modifying the render( ) method.
Routing URLs on StencilJS
With Stencil router, users can click a product in your catalogue and view more details about the item. You can install this router by using: npm install stencil-router-v2 –save-dev.
The first step here is to create the main element. You should do this by creating a src/components/catalogue-main folder, as well as the ts and css files. In index.html, you can proceed to replace catalogue-list with catalogue-main.
You can now add a router to catalogue-main and hyperlink individual items. This way, users can get more details when they click the products.
Adding the details
Here, you have to first create a catalogue-details component that will allow you to add details on specific products. You should create a src/components/catalogue-details folder and add a TypeScript file in it to define the catalogue-details.tsx component. You should also add the catalogue-details.css file.
The component will get a product ID. You should declare a @Prop( ) for the ID and @State( ) for the details. With the (connectedCallback() lifecycle method), you can ensure that the product details load when the component is made. It will also ensure that the details are reloaded when the ID is changed.
Finally, you can write the render and add some CSS. If you want to add some dynamism, you can add a new state using currentImage.
Why choose web components?
With Web Components, you can create reusable components with HTML, CSS, and JavaScript. This makes it an excellent encapsulating tool. When building a catalogue with StencilJS, you will need to create reusable elements for multiple projects, and this makes Web Components quite useful. You should also note that Web Components is supported by all modern browsers as it is an HTML standard.
The future is the web
E-commerce has been a promising sector ever since the web became public, and it has only grown in importance over the past few years. With better ways of verifying product details and quality, people have fewer reasons to visit physical stores, and StencilJS can be a great solution for creating your own. Also, customer reviews and ratings have proven to be excellent guides to different products in online stores. At this point, it is quite clear that the future is the web.
