added namespace and outputTarget, new options in package.json

Author: sanjeetkumaritoutlook-user

package.json

@@ -3,6 +3,14 @@
   "private": true,
   "version": "0.0.1",
   "description": "Stencil App Starter",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.mjs",
+  "collection": "dist/collection/collection-manifest.json",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist/",
+    "loader/"
+  ],
   "scripts": {
     "build": "stencil build",
     "start": "stencil build --dev --watch --serve",

src/assets/images/app-starter1.png

@@ -14,6 +14,6 @@ describe('app-home-page', () => {
     await page.setContent('<app-home-page></app-home-page>');
 
     const element = await page.find('app-home-page >>> button');
-    expect(element.textContent).toEqual('Profile page');
+    expect(element.textContent).toEqual('Profile Page');
   });
 });

src/assets/images/app-starter2.png

@@ -8,15 +8,41 @@ import { Router } from "../..";
 })
 export class AppHome {
   render() {
-    return (
+    // Dynamically resolve the path to the image file
+   const imagePath1 = new URL('../../assets/images/app-starter1.png', import.meta.url).href;
+   const imagePath2 = new URL('../../assets/images/app-starter2.png', import.meta.url).href; 
+   return (
       <div class="app-home-page">
         <p>
           Welcome to the Stencil App Starter. You can use this starter to build entire apps all with web components using Stencil! Check out our docs on{' '}
           <a href="https://stenciljs.com">stenciljs.com</a> to get started.
         </p>
         <div>
+          <h1>Steps to create Stencil Web App</h1>
+          <h1>Start by npm init stencil and then choose 2nd option</h1>
+          <img 
+            src={imagePath1}
+            style={{
+              width: '100%',
+              height: '250px',
+            }}
+            loading="lazy"
+        />
+         <img 
+            src={imagePath2}
+            style={{
+              width: '100%',
+              height: '250px',
+            }}
+            loading="lazy"
+        />
         <h1>Pages</h1>      
         </div>
+        <button
+          onClick={() => Router.push('/profile/sanjeet')}
+        >
+          Profile Page
+        </button>
         <button
           onClick={() => Router.push('/web-components')}
         >
@@ -27,11 +53,6 @@ export class AppHome {
         >
          Posts dashboard
         </button>
-        <button
-          onClick={() => Router.push('/profile/sanjeet')}
-        >
-          Profile Page
-        </button>
       </div>
     );
   }

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

@@ -5,7 +5,7 @@ import { Component,State, h } from '@stencil/core';
   styleUrl: 'posts-dashboard.css',
   shadow: true,
 })
-export class AppHeader {
+export class PostsDashboard {
   @State() posts: Array<{ id: number; title: string; body: string }> = [];
   // Fetch posts data when the component loads- sample API
   async componentWillLoad() {

src/components/app-home-page/app-home-page.tsx

@@ -1,10 +1,10 @@
 import { newSpecPage } from '@stencil/core/testing';
-import { AppHeader } from '../posts-dashboard';
+import { PostsDashboard } from '../posts-dashboard';
 
 describe('posts-dashboard', () => {
   it('renders', async () => {
     const page = await newSpecPage({
-      components: [AppHeader],
+      components: [PostsDashboard],
       html: `<posts-dashboard></posts-dashboard>`,
     });
     expect(page.root).toEqualHtml(`

src/components/posts-dashboard/posts-dashboard.tsx

@@ -1,5 +1,6 @@
 import { Component, h } from '@stencil/core';
 import { defineCustomElements } from 'stenciljs-components/loader';
+
 @Component({
   tag: 'web-components',
   styleUrl: 'web-components.css',
@@ -21,8 +22,18 @@ export class WebComponents {
 
   // Example: Initialize a library
   private initializeLibrary() {
-   // Initialize the custom elements
-    defineCustomElements();
+   // Wrap the function to log the registration
+   const defineWithLog = (win: any) => {
+  defineCustomElements(win);
+  
+    console.log('Registered Custom Elements:');
+  ['my-card', 'my-rich-text-editor'].forEach((tagName) => {
+    console.log(`${tagName}:`, customElements.get(tagName));
+  });
+};
+
+   // Use the modified version
+    defineWithLog(window);
   }
   render() {
     return (

src/components/posts-dashboard/test/posts-dashboard.spec.tsx

@@ -9,9 +9,9 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta http-equiv="x-ua-compatible" content="IE=Edge">
 
-  <script type="module" src="/build/app.esm.js"></script>
-  <script nomodule src="/build/app.js"></script>
-  <link href="/build/app.css" rel="stylesheet">
+  <script type="module" src="/build/myapp.esm.js"></script>
+  <script nomodule src="/build/myapp.js"></script>
+  <link href="/build/myapp.css" rel="stylesheet">
 
   <link rel="apple-touch-icon" href="/assets/icon/icon.png">
   <link rel="icon" type="image/x-icon" href="/assets/icon/favicon.ico">

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

@@ -6,18 +6,19 @@ export const config: Config = {
   globalStyle: 'src/global/app.css',
   globalScript: 'src/global/app.ts',
   taskQueue: 'async',
-  // namespace: 'myapp',
+  namespace: 'myapp',
   outputTargets: [
     {
-      type: 'www',
+      type: 'dist', // For reusable components,Required for `defineCustomElements`
+      esmLoaderPath: '../loader',
+    },
+    {
+      type: 'www',  // Optional, for a local development server
       // comment the following line to disable service workers in production
       serviceWorker: null,
-    baseUrl: 'https://myapp.local/',
+   // baseUrl: 'https://myapp.local/',
     // baseUrl:'/build/',  like in fluid it opens to localhost:3333/fluid/
     },
-    // {
-    //   type: 'dist', // For reusable components
-    //   esmLoaderPath: '../loader',
-    // },
+    
   ],
 };