Usage

install the package and use:

in this format :

<github-repo-card owner="stenciljs" repo="core"></github-repo-card>

To start using this library:

in another Angular app/React app

npm i stencil-github-app

then in main.ts (Angular)/ in React component file (React):

import { defineCustomElements } from 'stencil-github-app/loader';
// Initialize the custom elements
defineCustomElements(window);

Make sure you have in app.module.ts in Angular or the standalone component.ts itself(not needed in React)

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
  schemas: [CUSTOM_ELEMENTS_SCHEMA],

then in app.component.html (Angular)/ App.tsx(React) , they can be added as simple tag with any attribute as property in dash-case such as:

<github-repo-card owner="stenciljs" repo="core"></github-repo-card>

in another stencilJS application:

two ways :

first one works (use live url)

<script type="module" src="https://sanjeetkumaritoutlook-user.github.io/stencil-github-app/build/stencil-github-app.esm.js"></script>
  <script nomodule src="https://sanjeetkumaritoutlook-user.github.io/stencil-github-app/build/stencil-github-app.js"></script>

and then use the html tag

second way (may not work)

in src/global/app.ts:

import { defineCustomElements } from 'stencil-github-app/loader';

defineCustomElements();

where owner and repo are Props taking value from github

two ways to set up stencil app in local:

1. npm init stencil (if this doesnt work, then)

2.npx create-stencil@latest

then cd folder-name , npm install, npm start

to create new component in stenciljs: npm run generate

publish to npm

npm run build

npm publish --access public