chaged app-root to app-root-portfolio component to avoid any external npm package conflict

Author: sanjeetkumaritoutlook-user

src/components.d.ts

@@ -25,7 +25,7 @@ export namespace Components {
          */
         "width": string;
     }
-    interface AppRoot {
+    interface AppRootPortfolio {
     }
     interface FeedbackForm {
         "disableQuickbars": boolean;
@@ -68,11 +68,11 @@ declare global {
         prototype: HTMLAppProfilePageElement;
         new (): HTMLAppProfilePageElement;
     };
-    interface HTMLAppRootElement extends Components.AppRoot, HTMLStencilElement {
+    interface HTMLAppRootPortfolioElement extends Components.AppRootPortfolio, HTMLStencilElement {
     }
-    var HTMLAppRootElement: {
-        prototype: HTMLAppRootElement;
-        new (): HTMLAppRootElement;
+    var HTMLAppRootPortfolioElement: {
+        prototype: HTMLAppRootPortfolioElement;
+        new (): HTMLAppRootPortfolioElement;
     };
     interface HTMLFeedbackFormElementEventMap {
         "valueChange": string;
@@ -116,7 +116,7 @@ declare global {
         "about-us": HTMLAboutUsElement;
         "app-home-page": HTMLAppHomePageElement;
         "app-profile-page": HTMLAppProfilePageElement;
-        "app-root": HTMLAppRootElement;
+        "app-root-portfolio": HTMLAppRootPortfolioElement;
         "feedback-form": HTMLFeedbackFormElement;
         "header-navigation": HTMLHeaderNavigationElement;
         "posts-dashboard": HTMLPostsDashboardElement;
@@ -143,7 +143,7 @@ declare namespace LocalJSX {
          */
         "width"?: string;
     }
-    interface AppRoot {
+    interface AppRootPortfolio {
     }
     interface FeedbackForm {
         "disableQuickbars"?: boolean;
@@ -170,7 +170,7 @@ declare namespace LocalJSX {
         "about-us": AboutUs;
         "app-home-page": AppHomePage;
         "app-profile-page": AppProfilePage;
-        "app-root": AppRoot;
+        "app-root-portfolio": AppRootPortfolio;
         "feedback-form": FeedbackForm;
         "header-navigation": HeaderNavigation;
         "posts-dashboard": PostsDashboard;
@@ -184,7 +184,7 @@ declare module "@stencil/core" {
             "about-us": LocalJSX.AboutUs & JSXBase.HTMLAttributes<HTMLAboutUsElement>;
             "app-home-page": LocalJSX.AppHomePage & JSXBase.HTMLAttributes<HTMLAppHomePageElement>;
             "app-profile-page": LocalJSX.AppProfilePage & JSXBase.HTMLAttributes<HTMLAppProfilePageElement>;
-            "app-root": LocalJSX.AppRoot & JSXBase.HTMLAttributes<HTMLAppRootElement>;
+            "app-root-portfolio": LocalJSX.AppRootPortfolio & JSXBase.HTMLAttributes<HTMLAppRootPortfolioElement>;
             "feedback-form": LocalJSX.FeedbackForm & JSXBase.HTMLAttributes<HTMLFeedbackFormElement>;
             "header-navigation": LocalJSX.HeaderNavigation & JSXBase.HTMLAttributes<HTMLHeaderNavigationElement>;
             "posts-dashboard": LocalJSX.PostsDashboard & JSXBase.HTMLAttributes<HTMLPostsDashboardElement>;

src/components/about-us/about-us.tsx

@@ -14,7 +14,7 @@ export class AboutUs {
     return (
       <div>
          <div>
-          <p>by Default,Stencil Web app creates three components:app-root, app-home, app-profile with Routung from "stencil-router-v2" pre-installed </p>
+          <p>by Default,Stencil Web app creates three components:app-root-portfolio, app-home, app-profile with Routung from "stencil-router-v2" pre-installed </p>
          <p>To avoid conflict with npm package (stenciljs-components) which has similar naming components, renamed the component in this web app to app-home-page and app-profile-page respectively</p>
           <h1>Steps to create Stencil Web App</h1>
           <h1>Start by npm init stencil and then choose 2nd option</h1>

src/components/app-profile-page/app-profile-page.e2e.ts

@@ -12,7 +12,7 @@ describe('app-profile-page', () => {
   it.skip('displays the specified name', async () => {
     const page = await newE2EPage({ url: '/profile/joseph' });
 
-    const profileElement = await page.find('app-root >>> app-profile-page');
+    const profileElement = await page.find('app-root-portfolio >>> app-profile-page');
     const element = profileElement.shadowRoot.querySelector('div');
     expect(element.textContent).toContain('Hello! My name is Joseph.');
   });

src/components/app-root/app-root.css renamed to src/components/app-root-portfolio/app-root-portfolio.css

@@ -1,17 +1,17 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-describe('app-root', () => {
+describe('app-root-portfolio', () => {
   it.skip('renders', async () => {
     const page = await newE2EPage({ url: '/' });
 
-    const element = await page.find('app-root');
+    const element = await page.find('app-root-portfolio');
     expect(element).toHaveClass('hydrated');
   });
 
   it.skip('renders the title', async () => {
     const page = await newE2EPage({ url: '/' });
 
-    const element = await page.find('app-root >>> h1');
+    const element = await page.find('app-root-portfolio >>> h1');
     expect(element.textContent).toEqual('Stencil App Starter');
   });
 });

src/components/app-root/app-root.e2e.ts renamed to src/components/app-root-portfolio/app-root-portfolio.e2e.ts

@@ -5,8 +5,8 @@ import { Router } from "../../";  //in index.ts its already there so no need to
 import { Route, match } from "stencil-router-v2";
 //https://www.npmjs.com/package/stencil-router-v2
 @Component({
-  tag: 'app-root',
-  styleUrl: 'app-root.css',
+  tag: 'app-root-portfolio',
+  styleUrl: 'app-root-portfolio.css',
   shadow: true,
 })
 export class AppRoot {

src/components/app-root/app-root.tsx renamed to src/components/app-root-portfolio/app-root-portfolio.tsx

@@ -29,7 +29,7 @@ export class WebComponents {
       <div>
         <p>Below components in this page are rendering from <a href="https://www.npmjs.com/package/stenciljs-components" target="_blank"><strong>stenciljs-components npm package</strong></a></p>
         <p>Sandbox page of this component library:<a href="https://sanjeetkumaritoutlook.github.io/stenciljs-components/" target="_blank">Visit</a></p>
-        <p>By Default,Stencil Web app creates three components:app-root, app-home, app-profile with Routung from "stencil-router-v2" pre-installed </p>
+        <p>By Default,Stencil Web app creates three components:app-root-portfolio, app-home, app-profile with Routung from "stencil-router-v2" pre-installed </p>
          <p>To avoid conflict with npm package (stenciljs-components) which has similar naming components, renamed the component in this web app to app-home-page and app-profile-page respectively</p>
         <json-schema-form schema= {formSchema}></json-schema-form>     
       </div>

src/components/web-components/web-components.tsx

@@ -19,6 +19,6 @@
   <link rel="manifest" href="/manifest.json">
 </head>
 <body>
-  <app-root></app-root>
+  <app-root-portfolio></app-root-portfolio>
 </body>
 </html>