My First Stencil Web Component and integration with React JS

gist1.PNG

gist2.PNG

gist3.PNG

gist4.PNG

StencilJS_integration_with_ReactJS.md

First experience with StencilJS

• Setup the StencilJS development environment by cloning https://github.com/ionic-team/stencil-component-starter.git
• The starter comes with a sample web component called my-component. I have used this as a sample and tried to see if I can integrate this with my existing ReactJS app https://github.com/ERS-HCL/react-snack-app .
• The main goal was to see
  • Evaluate the requirements to integrate with an existing React JS app.
  • See if it works on all browsers after this integration
• Step 1 - Build Web Component
• Build the stencil component starter project (after the initial setup steps)

npm run build

• This creates a dist folder with the component (in this case my-component)

• Step 2 - Package Web Component
• Since I am running it locally executed npm pack . to create a local npm tgz package

E:\workspace\my-component>npm pack .
my-component-0.0.1.tgz

• Step 3 - Install the build Web Component in the target ReactJS App
• In the react-snack-app project folder , installed the npm package

E:\workspace\react-burger-app>npm install ..\my-component\my-component-0.0.1.tgz --save
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 1 package in 127.834s

• Step 4 - Add web component invocation code
• Added the web component html tag in the code . Added it to the BurgerBuilder.js container class (As this is rendered as part of the initial page load)

 <my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>

• Step 5 - Add the Web Component Library initialization and integration

• I tried to follow the documentation provided here https://stenciljs.com/docs/framework-integration , but ran into issues related to the import instructions in index.js (somehow the structure mentioned in the docs and what is produced in the build seems to be different). I will probably relook at this again , but for now here is what worked.

• Create a postinstall script in the package.json file which copies the stencil web component distribution from the node_modules and copies it to the public folder of the ReactJS App

"postinstall": "cp -R node_modules/my-component/dist/* public/assets/stencil"

• Included the stencil webcomponent library in the index.html (as the last entry in the body tag)

 <script src="assets/stencil/mycomponent.js"></script>

• Thats it and then on starting the app it worked on all the browsers IE,FireFox and Chrome as before !!

• From the size and performance perspective , looks promising as well

Initial Impressions

• A very promising solution in terms of size , development of components and automic handling of required polyfils. Also has all the goodness of JSX, Virtual DOM, Reactive data-binding etc.
• Integration and packaging is not very straight forward and would be interesting to see a scenario when there are multiple web component libraries, different styling , extensive data binding etc. I will explore this further ..