tsukhu/StencilJS_integration_with_ReactJS.md

## gist1.PNG

      
    Raw
  

              gist1.PNG
            
          
## gist2.PNG

      
    Raw
  

              gist2.PNG
            
          
## gist3.PNG

      
    Raw
  

              gist3.PNG
            
          
## gist4.PNG

      
    Raw
  

              gist4.PNG
            
          
## StencilJS_integration_with_ReactJS.md

      
    Raw
  

              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 ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ my-component@0.0.1
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 ..