feat: Exclude components from build

[MrGrigri]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

It would be highly beneficial if components could be excluded from the normal build process. Components can already be excluded from the Angular Build, but it would also be beneficial if they could be excluded from all builds.

Describe the Use Case

Currently I contribute to a proprietary design system and we not only build out to the design system, but the repo itself houses demos. But we do not want these demo components built. E.g. button-demo shouldn't be included in the build but button should.

Describe Preferred Solution

The unofficial JSDoc tag @internal is already being used to exclude the component from being used to generate documentation. This could also still be used.

/**
 * @internal
 */
@Component({
  tag: 'button-demo',
})
export class ButtonDemo {}

Describe Alternatives

Follow the same steps as the Angular Output Target where the output target can receive an array of strings in an excludeComponents property. Where each string is the tag of the component.

export const config: Config = {
  ...,
  outputTargets: [
    {
      type: 'dist',
      excludeComponents: ['button-demo']
    }
  ]
}

Related Code

No response

Additional Information

No response

[tanner-reits]

@MrGrigri Hey! Thanks for the request. We've heard feedback like this before, so I'll get this labeled as an official feature request.

Alternatively, you can workaround this limitation by setting up separate build commands (i.e. build.dev and build.prod). Each of these commands could have their own respective Stencil config, but the prod variation would point to a tsconfig file that could specify an exclude pattern for these components you don't want included in the build. Maybe something like this:

// tsconfig.prod.json
{
  "extends": "tsconfig.json",
  "exclude": ["src/components/**/demo/*"]
}

Granted, this approach would exclude the components from all output targets rather than allowing to specify on a per output target basis.