ghoullier/stencil-ds-output-targets

These are output targets that can be added to Stencil for React and Angular.

Project	Package	Version	Documentation
React Output Target	@stencil/react-output-target		README
Angular Output Target	@stencil/angular-output-target		README
Vue Output Target	@stencil/vue-output-target		README

Introduction

Integrating web components into existing framework applications can be difficult at times. More about this can be read at https://custom-elements-everywhere.com/. To accommodate the various issues, the Stencil team has created new output target plugins to make the process simpler.

The plugins add additional output targets for each framework binding that is included.

Here is an example project using the plugins for reference: https://github.com/ionic-team/stencil-ds-output-targets/blob/main/packages/example-project/component-library

Detailed information for each output target can be found in each package's README.

Maintenance Status

This project is currently maintained for the purposes of supporting the Ionic Framework. At this time, only new issues & pull requests that support the Ionic Framework will be prioritized.

Local development

This project uses pnpm for package management. You can install it by following the installation instructions.

Getting started

To set up this project and prepare the example project to be used in your own projects run the following commands.

pnpm install
pnpm build

This will generate all necessary builds in the example projects. You can then either publish the packages to npm or a private package manager, or use npm pack to start using the builds in a local project for testing purposes where you manually place the package in the project node_modules folder.

For example, if you have an Angular project, run npm pack in packages/example-project/component-library and packages/example-project/component-library-angular. Since the framework component libraries depend on the Stencil project, you will need to provide the component-library package in your project node_modules folder.

Formatting

This project uses Prettier for code formatting. You can run the following command to format the code:

pnpm prettier

Node.js Versions

This project requires Node.js v20.10.0 or higher.

Deploying

There is a manual workflow task called "Production Release" within the GitHub Actions workflows directory. We currently do not release all packages that have been changed at once. You will need to deploy each package (vue, react, angular) individually.

You'll need to fill out a few bits of information when you submit the deploy workflow:

1. Which package should be published (Currently vue, react, or angular).
2. What version should be published.
3. What npm tag it should be published under (next or latest)
4. Any preid, like alpha or rc