mfranzke / 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.

Local development

Getting started

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

npm install
npm run bootstrap
npm run 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.