loading stenciljs component via URL instead of installation

Author: sanjeetkumaritoutlook-user

src/components/app-root/app-root.tsx

@@ -3,7 +3,7 @@ import { Component, h } from '@stencil/core';
 import { Router } from "../../";  //in index.ts its already there so no need to again do const Router = createRouter();
 
 import { Route, match } from "stencil-router-v2";
-
+//https://www.npmjs.com/package/stencil-router-v2
 @Component({
   tag: 'app-root',
   styleUrl: 'app-root.css',

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

@@ -1,5 +1,5 @@
 import { Component, h } from '@stencil/core';
-
+//import { defineCustomElements } from 'stenciljs-components/loader';
 @Component({
   tag: 'web-components',
   styleUrl: 'web-components.css',
@@ -9,14 +9,25 @@ export class WebComponents {
  /**
    * Called once just after the component is first connected to the DOM.
      */
-  
+ componentDidLoad() {
+  // async function initializeStencilComponents() {
+  //   console.log('Initializing StencilJS components...');
+  //   await defineCustomElements(window, {
+  //     resourcesUrl: './build/', // Adjust based on your deployment structure
+  //   }); // Pass the global `window` object
+  //   console.log('StencilJS components initialized.');
+  // }
+  // initializeStencilComponents();
+  //defineCustomElements();
+
+ }
   render() {
     return (
       <div>
-        <p>URL 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>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>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>
-          
         <my-rich-text-editor initial-value="this is initial value" placeholder="angular placeholder"></my-rich-text-editor>
 
       <my-card user-name="CodingLocker"></my-card>

src/index.html

@@ -12,7 +12,8 @@
   <script type="module" src="/build/myapp.esm.js"></script>
   <script nomodule src="/build/myapp.js"></script>
   <link href="/build/myapp.css" rel="stylesheet">
-
+ <script type="module" src="https://sanjeetkumaritoutlook.github.io/stenciljs-components/build/stenciljs-components.esm.js"></script>
+  <script nomodule src="https://sanjeetkumaritoutlook.github.io/stenciljs-components/build/stenciljs-components.js"></script>
   <link rel="apple-touch-icon" href="/assets/icon/icon.png">
   <link rel="icon" type="image/x-icon" href="/assets/icon/favicon.ico">
   <link rel="manifest" href="/manifest.json">

src/index.ts

@@ -3,15 +3,7 @@ import { createRouter } from 'stencil-router-v2';
 export { Components, JSX } from './components';
 
 export const Router = createRouter();
-import { defineCustomElements } from 'stenciljs-components/loader';
-async function initializeStencilComponents() {
-  console.log('Initializing StencilJS components...');
-  await defineCustomElements(window, {
-    resourcesUrl: './build/', // Adjust based on your deployment structure
-  }); // Pass the global `window` object
-  console.log('StencilJS components initialized.');
-}
-initializeStencilComponents();
+
 
 import { fluidEnvironments } from '../fluid';
 const script = document.createElement('script');