Consuming a Stencil JS component in several frameworks

Seanmclem — Sat, 15 Aug 2020 23:51:57 +0000

Introduction

The Stencil JS idea of writing a component once, and using it everywhere, is something I've been meaning to put into practice for a long time. This post will go over the easy and straightforward process of creating and publishing a simple Stencil component. Then, I'll go over consuming that component in React, Vue, and Angular. Anything more elaborate than the basics will be saved for the conclusion. Here we go!

Creating Stencil JS project

npm init stencil

The CLI will give you a few options. In this example I am going to choose component, and when prompted, name the project test-demo-seanmclem. I've included my username in the project name to ensure it's unique. If the name is taken then you will not be able to publish to NPM.

You will also need to change to your projects directory, and install the stencil dependency.

cd test-demo-seanmclem
npm install

The Stencil CLI will create our project, but it will not just be a lone, single component as the name suggests. It will generate a full Stencil project with a components folder. This folder will contain any components we wish export. The exported components will be included in the production build, published to NPM, and can then each be imported individually into consuming projects. The rest of the Stencil project helps facilitate publishing and consuming the project's components.

Our Stencil Component

The Stencil CLI will add one example component to this components folder. It is called my-component, and it takes 3 props, first, middle, and last. Each being part of your name. The rendered component takes these inputs and outputs a string like Hello, World!? I'm Your Full Name.

Run the following to prep the project for publishing

npm run build

Publish to NPM

We're moving quickly because this project and my-component already have everything we need. Let's publish it to NPM.

You will need to have an account on NPM to proceed. It's simple and free to sign-up if you haven't already. Then login to the CLI

npm login

Follow the prompts to login to the CLI, and then run -

npm publish

If everything went well the CLI should return your new libraries name@version, like mine test-demo-seanmclem@0.0.1. You can also find this in your npm settings>packages page.

React

Create project

npx create-react-app stencil-in-react

Add component

We will need to go the index.js file and add an import. We will not import a particular component though. Instead we will import a function that will define all our components exported by the Stencil project, and make them available to the react project. This is how native web components, known as Custom Elements, are added to projects. They are typically registered globally as early as possible -rather than imported where ever they are needed.

So we'll add an import to index.js like this:

import { defineCustomElements } from 'test-demo-seanmclem/loader';

And somewhere near the bottom we'll call this function. I'll go over polyfills later.

defineCustomElements();

Next, in app.js you utilize your new custom element

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />

        <my-component first='Your' middle='Full' last='Name'></my-component>

      </header>
    </div>
  );
}

I replaced everything below the img tag in my app.js.
That's pretty much it. You can consume simple Stencil components with simple props in React without doing anything special. More complex components might require extra work for certain props and event listeners. I'd like to do another post on this soon, but that's it for React for now.

Vue

Create project

npm install -g @vue/cli
vue create stencil-in-vue
cd stencil-in-vue

Add component

npm install test-demo-seanmclem

Now we'll add defineCustomElements to one of our main files. Specifically main.js for Vue.

import { defineCustomElements } from 'test-demo-seanmclem/loader';

And again, somewhere near the bottom we'll call this function.

defineCustomElements();

Next, in App.Vue you consume the custom element. You could place it above the HelloWorld component, but I removed it entirely

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <my-component first="Your" middle="Full" last="Name"></my-component>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

Angular

Create project

npm install -g @angular/cli 
ng new stencil-in-angular
cd stencil-in-angular

Add component

npm install test-demo-seanmclem

Now we'll add an import to main.js

import { defineCustomElements } from 'test-demo-seanmclem/loader';

And somewhere near the bottom we'll call this function.

defineCustomElements();

Next, in app.component.html you utilize your new custom element. I replaced pretty much everything in that file.

<div class="content" role="main">
  <my-component first="Your" middle="Full" last="Name"></my-component>
</div>

That's it for the basic implementations of Stencil generated web-components in the big 3 frameworks. I'll be writing more on the topic going forward. So feel free to follow me for more.

Conclusion/More Info

Polyfills

These days you might be done supporting IE and legacy browsers. However, Stencil includes some optional polyfills for those that are easy to implement. You would just add an additional applyPolyfills import to your defineCustomElements import statement, and wrap your defineCustomElements call in an async applyPolyfills().then().
Read more about that here.

React

As I mentioned react has some complications with more advanced event and prop bindings. Most can be mitigated with a manual wrapping-component, or a react-output-target. Read more about that here also.

Angular ViewChild

Angular docs call out a specialized way of accessing functions on your component. Which can be useful but not always necessary. Read more about that Here

Thanks for reading!

10 Concepts I'd like to learn in 2020 as a fullstack Javascript developer

Seanmclem — Tue, 31 Dec 2019 20:29:30 +0000

I'm a fullstack javascript developer, and here is my first post on Dev. I have set a goal for 2020 to write often.

2019 has been a year full of new knowledge and experiences. However, 2020 will be a new year of opportunities to learn new things. Here is a list of concepts, in no very particular order, that I'd like to learn in 2020. I probably can't learn them all, but here is my wish-list.

Rust

As a JS developer primarily I've never really dabbled much with lower-level languages. Rust seems like a great candidate and I like what I've been reading about it in 2019. I plan to do something, anything with it in 2020.
Web Sockets

A colleague of mine recently said something like "it's 2019, every project like this should utilize web sockets." I've been meaning to learn more and try them out on a side project for a while. Still, I have never really used them. In 2020 I will prioritize learning them. Maybe Socket.io, or ws.
Tooling - webpack, parcel, rollup, babel, etc

I'd like learn more about advanced tooling for projects. My experience with webpack, parcel, rollup, or babel has been a bit minimal up till now. Outside of a pre-configured CLI.
Static Sites

I'm still not 100% sure how they differ from dynamic sites, and what benefits I might be missing out on. 2020 will be my year to put Gatsby and Next.js into practice and find out. I'm also looking forward to trying Netlify, Zeit now, etc.
GraphQL

This one I've put off long enough and the buzz can no longer be ignored. From what I've read this could greatly improve how I query a db for data.
Flutter

I love the idea of write-once/run-everywhere. Capacitor has been great for me in 2019, and 2020 will hopefully be a good year for Flutter. The developments in Flutter for web might make things much more interesting.
React Native

I dabbled with it a bit in early 2019 but didn't really love the experience. With some recent updates, React Native for Web, and the even slight possibility of a React Web Singularity -now I'm a bit more excited to try again.
Docker and Kubernetes

These I have somehow avoided as I've focused on frontend a bit more the past couple years. I'm looking to step up my deployment game with some powerful and popular tools in 2020.
Deno

The new JS runtime from Ryan Dahl, the creator of NodeJS. It is a whole new, separate version of the sort of thing NodeJS is, but entirely from scratch. Most concerns he had with Node are addressed from the ground-up. It's still pretty new but I'm ready to begin poking around with it. Here's a good and recent Dev article about it.
Random JS concepts

Proxies,

They seem pretty powerful. Can they help me solve problems or develop more streamlined solutions? Let's find out.
JS Generators

I've been meaning to learn these but I'v been having trouble isolating a use case I'm interested in. 2020, be the year.
ES Modules

Seem similar to imports/exports that I'm already using in my JS projects. How are they different? Learning opportunity.
Other advanced concepts

Looking at you, Prototypical inheritance.

That's all I could come up with. If anyone has any feedback or ideas -please share.

Happy New Year!

DEV Community: Seanmclem

Consuming a Stencil JS component in several frameworks

Introduction

Creating Stencil JS project

Our Stencil Component

Publish to NPM

React

Create project

Add component

Vue

Create project

Add component

Angular

Create project

Add component

Conclusion/More Info

Polyfills

React

Angular ViewChild

10 Concepts I'd like to learn in 2020 as a fullstack Javascript developer