Comments (9)
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',
};
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.
Related Issues (20)
- bug: __mocks__ copied to output target HOT 3
- bug: Cannot access uninitialized variable, only in Safari, works with dev build HOT 3
- bug: Last version 4.18.2 breaks unit test in the proyect. HOT 9
- bug: Test files copied to output target HOT 9
- bug: When i try to integrate with react application, the slot element contains hidden attribute instead of displaying the content. Note: This stencil component is using scoped element. HOT 8
- feat: Style modes load styles only when needed HOT 1
- bug: unable to compile using angular's standalone mode (2) HOT 1
- bug: exception in an async componentWillLoad method will break the rendering cycle HOT 3
- feat: Next.js Support HOT 1
- bug: Watching Native HTML Attributes requires at least one @Prop() declaration HOT 3
- bug: Generation of src/components.d.ts typing broken in latest build HOT 1
- bug: Missing export of mock-doc in package.json HOT 2
- bug: `./cli` and `./sys/node` excluded from exports field in the package.json HOT 3
- bug: cannot find module @stencil/core/internal/client HOT 7
- bug: hydrate crashes if component uses @Listen HOT 3
- bug: hydrate crashes if head element with link tag exists HOT 3
- bug: Broken exports for testing HOT 1
- bug: multiple stencil components side by side dont update props if 'Disable cache' is OFF HOT 1
- bug: nested to ::slotted in scoped component
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stencil.