Stencil becomes a dependency to project when installing with --legacy-peer-deps about stencil HOT 9 CLOSED

Thank you @christian-bromann, for your response! I will change this in our output target config, try it in my example and get back to you.

from stencil.

@andberg I will go ahead and close this. Let me know if you have any further questions or if you think we could do better in the Stencil docs. Thanks for supporting Stencil!

from stencil.

@andberg I am not aware of any drawbacks, it very much depends on your use case.

from stencil.

@andberg thanks for raising the issue!

It seems to me that the package containing the Stencil components (@digi/arbetsformedlingen) has bundled the components using the externalRuntime flag set to true which is the default value. Can you give me more information on how the Stencil configuration of @digi/arbetsformedlingen looks like? I recommend to set this flag to false to have he Stencil compiler create a package bundle so that no dependencies are needed.

from stencil.

Hi!
Of course, the main config is here:

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';

export const StencilBaseConfig: Config = {
	namespace: 'digi-arbetsformedlingen',
	taskQueue: 'async',
  autoprefixCss: false,
  sourceMap: false,
	srcDir: '../src',
	tsconfig: '../tsconfig.json',
	plugins: [
		sass()
	],
  enableCache: false,
  cacheDir: '../../../.digi/af-stencil',
	outputTargets: [],
	globalStyle: '../src/global/styles/index.scss',
	globalScript: '../src/global/scripts/index.ts',
};

https://gitlab.com/arbetsformedlingen/designsystem/digi/-/blob/develop/libs/arbetsformedlingen/package/stencil.config.ts?ref_type=heads

And then it's imported and enhanced for different environments in these config files https://gitlab.com/arbetsformedlingen/designsystem/digi/-/tree/develop/libs/arbetsformedlingen/package/.config?ref_type=heads
The production file looks like

import { Config } from '@stencil/core';
import { StencilBaseConfig } from '../stencil.config';
import { config as AngularConfig } from './stencil.config.angular';
import { config as ReactConfig } from './stencil.config.react';

export const config: Config = {
  ...StencilBaseConfig,
	srcDir: '../src',
	tsconfig: '../tsconfig.json',
	outputTargets: [
		...(StencilBaseConfig.outputTargets as any),
    ...(AngularConfig.outputTargets as any),
    ...(ReactConfig.outputTargets as any),
		{
			type: 'dist',
			dir: '../dist',
			esmLoaderPath: '../loader',
			copy: [
				{ src: 'design-tokens', dest: 'design-tokens' },
				{ src: '../../fonts', dest: 'fonts' },
				{ src: '../../../shared/styles', dest: 'styles' },
				{
					src: 'components/**/styles/*.variables.scss',
					dest: 'design-tokens/components',
					warn: true
				},
				{
					src: '__core/**/styles/*.variables.scss',
					dest: 'design-tokens/components',
					warn: true
				}
			]
		},
		{
			type: 'dist-custom-elements',
			dir: '../components',
			customElementsExportBehavior: 'single-export-module',
                        generateTypeDeclarations: true,
			copy: [
				{ src: 'design-tokens', dest: 'design-tokens' },
				{ src: '../../fonts', dest: 'fonts' },
				{
					src: 'components/**/styles/*.variables.scss',
					dest: 'design-tokens/components',
					warn: true
				},
				{
					src: '__core/**/styles/*.variables.scss',
					dest: 'design-tokens/components',
					warn: true
				}
			]
		},
		{
			type: 'docs-vscode',
			file: './custom-elements.json'
		},
		{
			type: 'dist-hydrate-script',
			dir: '../hydrate'
		},
		{
			type: 'www',
			serviceWorker: null,
			dir: '../www'
		}
	],
       extras: {
           enableImportInjection: true
       }
};

I was not part of this project when this was set-up, so am bit of a noob when it comes to Stencil and it's configuration. I've searched the project for externalRuntime and not found it, so I guess it defaults to something. Do you know where in the documentation i can find that setting? I've looked here https://stenciljs.com/docs/v4.7/config but haven't found it.

The complete repo is open source and can be found here https://gitlab.com/arbetsformedlingen/designsystem/digi

from stencil.

I've searched the project for externalRuntime and not found it, so I guess it defaults to something.

Yes, it defaults to true which means that it requires a @stencil/core dependency to be installed.

Do you know where in the documentation i can find that setting?

Yes, it is part of the output target docs: https://stenciljs.com/docs/v4.7/custom-elements#externalruntime. I recommend setting externalRuntime: true in the dist-custom-elements output target setting.

from stencil.

We are trying a fix for this today. It can be that we've imported from the wrong package in Stencil. I will document the result from our findings here when we have them. :)

from stencil.

@christian-bromann Hi Again!
The import changes didn't do anything to this Issue, but by changeing the stencil config to: externalRuntime: false solved our Issue.
Before we commit those changes I wonder if this can have some drawbacks that I should be aware of? The documentation is not so clear regarding this.
Thank you again for all your help!

from stencil.

I understand. Then we will discuss it within our team and see what we decide.

from stencil.