feat: in npm init stencil, configure package.json based on user choices

[rramsey]

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

Hi,

When running npm stencil init and seleting component the user would get two additional questions:

Select the build types to include in stencil.config.ts:
dist                           works everywhere, but better for non-framework based apps
dist-custom-elements           works everywhere, but better for framework based apps

If the user chooses only 1, then the appropriate config settings are set in stencil.config.ts and package.json. But if the user selects both, then they get an additional question:

Select the default build type:
dist
dist-custom-elements

Maybe link to https://stenciljs.com/docs/output-targets on those questions so people can make a better choice.

Then the script would:

1. Set isPrimaryPackageOutputTarget appropriately in stencil.config.ts
2. Update main and types in package.json to match the appropriate path
3. Update the "." entry under "exports" to match the appropriate path

The way it is now, in a framework like Vue or Angular, I need to do import { defineCustomElement } from @namespace/component-name/component-name with component-name duplicated. It all works just fine, but it is unexpected and looks odd.

Thanks for listening,

bob

Describe the Use Case

The use case is that when a user runs npm stencil init the generated files should more closely match the user's intent to reduce the need to make configuration changes and reduce troubleshooting when using components.

This was my experience. When running npm init stencil and choosing component as a starter project, three things threw me:

1. Both dist and dist-custom-elements are defined in stencil.config.ts
2. package.json was configured so the default export, "." pointed to the files created by the dist type.
3. Setting validatePrimaryPackageOutputTarget: true and under the dist-custom-element output config setting isPrimaryPackageOutputTarget: true resulted in build warnings, even though I picked component to create a custom element.

If I choose component as the starter project, I would expect dist-custom-element to be set as the default with the isPrimaryPackageOutputTarget: true option. I actually like having all 4 in the file because it helped me learn the config a little better, so I would opt for including it but setting dist-custom-element as the default.

And in package.json, the default module and types entries are set to the files created by dist.

So even though I thought I was setting up a custom element, there were a lot of configuration changes I needed to make.

Describe Preferred Solution

As described in the feature request

Describe Alternatives

Alternately, in the first question ? Select a starter project. have replace component with

component - dist                           works everywhere, but better for non-framework based apps
component - dist-custom-elements           works everywhere, but better for framework based apps

Allow the user to pick both options, and if they do ask which should be the default as above.

Related Code

No response

Additional Information

No response

[christian-bromann]

@rramsey thanks for raising the issue, would you be interested raising a PR for this? I am happy to help and support along the process.