An example on how to use Angular and React outputTargets with Stencil.js. Please note that I’ve removed other configs in order to simplify this example. This is how we’ve configured things in https://www.duetds.com

package.json

{
  "devDependencies": {
    "@stencil/angular-output-target": "latest",
    "@stencil/react-output-target": "latest"
  }
}

stencil.config.ts

import { angularOutputTarget, ValueAccessorConfig } from "@stencil/angular-output-target"
import { reactOutputTarget } from "@stencil/react-output-target"
​
const EVENTS = {
  "Select": "duetSelect",
  "Change": "duetChange"
};
const ATTRS = {
  "Checked": "checked",
  "Value": "value"
};
const angularValueAccessorBindings: ValueAccessorConfig[] = [
  {
    elementSelectors: [ "duet-checkbox", "duet-toggle" ],
    event: EVENTS.Change,
    targetAttr: ATTRS.Checked,
    type: "boolean"
  },
  {
    elementSelectors: [ "duet-input[type=number]" ],
    event: EVENTS.Change,
    targetAttr: ATTRS.Value,
    type: "number"
  },
  {
    elementSelectors: [ "duet-radio" ],
    event: EVENTS.Select,
    targetAttr: ATTRS.Checked,
    type: "radio"
  },
  {
    elementSelectors: [ "duet-range-slider", "duet-select", "duet-radio-group" ],
    event: EVENTS.Change,
    targetAttr: ATTRS.Value,
    type: "select"
  },
  {
    elementSelectors: ["duet-input:not([type=number])", "duet-textarea"],
    event: EVENTS.Change,
    targetAttr: ATTRS.Value,
    type: "text"
  }
];
​
export const config: Config = {
  // ...
  outputTargets: [
    angularOutputTarget({
      componentCorePackage: "@duetds/components",
      directivesProxyFile: "../angular/src/directives/proxies.ts",
      valueAccessorConfigs: angularValueAccessorBindings,
    }),
    reactOutputTarget({
      componentCorePackage: "@duetds/components",
      proxiesFile: "../react/src/components.ts",
      loaderDir: "lib/loader"
    }),
    // ...
  ]
}