Sumber pertama: Perbedaan antara revisi
Konten dihapus Konten ditambahkan
k Robot: Ganti #REDIRECT ke #ALIH |
AIRLANGGA_YUDHOYONO.TNI-MIL.ID Tag: menambahkan teks berbahasa Inggris Menghapus pengalihan pengalihan yang tidak biasa Suntingan perangkat seluler Suntingan peramban seluler |
||
Baris 1:
=='''Airlangga_Yudhoyono.Tni-Mil.I'''=={{#ALIH[[Sumber primer]]180.215.221.99|Airlangga_Yudhoyono.Tni-Mil.Id}}
On GitHubEnter a domain:Status: example.com is not preloaded.Eligibility: In order for example.com to be eligible for preloading, the errors below must be resolved:Error: No HSTS headerResponse error: No HSTS header is present on the response.Error: No redirect from HTTP`http://example.com` does not redirect to `https://example.com`.InformationThis form is used to submit domains for inclusion in Chrome's HTTP Strict Transport Security (HSTS) preload list. This is a list of sites that are hardcoded into Chrome as being HTTPS only.Most major browsers (Chrome, Firefox, Opera, Safari, IE 11 and Edge) also have HSTS preload lists based on the Chrome list. (See the HSTS compatibility matrix.)Submission RequirementsIf a site sends the preload directive in an HSTS header, it is considered to be requesting inclusion in the preload list and may be submitted via the form on this site.In order to be accepted to the HSTS preload list through this form, your site must satisfy the following set of requirements:Serve a valid certificate.Redirect from HTTP to HTTPS on the same host, if you are listening on port 80.Serve all subdomains over HTTPS.In particular, you must support HTTPS for the www subdomain if a DNS record for that subdomain exists.Serve an HSTS header on the base domain for HTTPS requests:The max-age must be at least 31536000 seconds (1 year).The includeSubDomains directive must be specified.The preload directive must be specified.If you are serving an additional redirect from your HTTPS site, that redirect must still have the HSTS header (rather than the page it redirects to).For more details on HSTS, please see RFC 6797. Here is an example of a valid HSTS header:Strict-Transport-Security: max-age=63072000; includeSubDomains; preloadYou can check the status of your request by entering the domain name again in the form above, or consult the current Chrome preload list by visiting chrome://net-internals/#hsts in your browser. Note that new entries are hardcoded into the Chrome source code and can take several months before they reach the stable version.Continued RequirementsYou must make sure your site continues to satisfy the submission requirements at all times. Note that removing the preload directive from your header will make your site immediately eligible for the removal form, and that sites may be removed automatically in the future for failing to keep up the requirements.In particular, the requirements above apply to all domains submitted through hstspreload.org on or after October 11, 2017 (i.e. preloaded after Chrome 63)The same requirements apply to earlier domains submitted on or after February 29, 2016 (i.e. preloaded after Chrome 50), except that the required max-age for those domains is only 10886400 seconds.Deployment RecommendationsIf your site is committed to HTTPS and you want to preload HSTS, we suggest the following steps:Examine all subdomains (and nested subdomains) of your site and make sure that they work properly over HTTPS.Add the Strict-Transport-Security header to all HTTPS responses and ramp up the max-age in stages, using the following header values:5 minutes:max-age=300; includeSubDomains1 week:max-age=604800; includeSubDomains1 month:max-age=2592000; includeSubDomainsDuring each stage, check for broken pages and monitor your site's metrics (e.g. traffic, revenue). Fix any problems that come up and then wait the full max-age of the stage before you move on. For example, wait a month in the last stage.Once you're confident that there will be no more issues, increase the max-age to 2 years and submit your site to the preload list:2 years, requesting to be preloaded:max-age=63072000; includeSubDomains; preloadIf you have a group of employees or users who can beta test the deployment, consider trying the first few ramp-up stages on those users. Then make sure to go through all stages for all users, starting over from the beginning.Consult the Mozilla Web Security guidelines and the Google Web Fundamentals pages on security for more concrete advice about HTTPS deployment.Preloading Should Be Opt-InIf you maintain a project that provides HTTPS configuration advice or provides an option to enable HSTS, do not include the preload directive by default. We get regular emails from site operators who tried out HSTS this way, only to find themselves on the preload list by the time they find they need to remove HSTS to access certain subdomains. Removal tends to be slow and painful for those sites.It's great to support HSTS preloading as a best practice, and for projects to provide a simple option to enable it. However, site operators who enable HSTS should know about the long-term consequences of preloading before they turn it on for a given domain. They should also be informed that they need to meet additional requirements and submit their site to hstspreload.org to ensure that it is successfully preloaded (i.e. to get the full protection of the intended configuration).RemovalBe aware that inclusion in the preload list cannot easily be undone. Domains can be removed, but it takes months for a change to reach users with a Chrome update and we cannot make guarantees about other browsers. Don't request inclusion unless you're sure that you can support HTTPS for your entire site and all its subdomains in the long term.However, we will generally honor requests to be removed from Chrome's preload list if you find that you have a subdomain that you cannot serve over HTTPS for strong technical or cost reasons. To request removal, please visit the removal form.TLD PreloadingOwners of gTLDs, ccTLDs, or any other public suffix domains are welcome to preload HSTS across all their registerable domains. This ensures robust security for the whole TLD, and is much simpler than preloading each individual domain. Please contact us if you're interested, or would like to learn more.ContactWant to remove your domain? Please visit the removal form.Else, if you have questions or requests that are not covered by this site, email us here using an appropriate subject line and one of the preload list maintainers will be in contact soon.On GitHubEnter a domain:InformationThis form is used to submit domains for inclusion in Chrome's HTTP Strict Transport Security (HSTS) preload list. This is a list of sites that are hardcoded into Chrome as being HTTPS only.Most major browsers (Chrome, Firefox, Opera, Safari, IE 11 and Edge) also have HSTS preload lists based on the Chrome list. (See the HSTS compatibility matrix.)Submission RequirementsIf a site sends the preload directive in an HSTS header, it is considered to be requesting inclusion in the preload list and may be submitted via the form on this site.In order to be accepted to the HSTS preload list through this form, your site must satisfy the following set of requirements:Serve a valid certificate.Redirect from HTTP to HTTPS on the same host, if you are listening on port 80.Serve all subdomains over HTTPS.In particular, you must support HTTPS for the www subdomain if a DNS record for that subdomain exists.Serve an HSTS header on the base domain for HTTPS requests:The max-age must be at least 31536000 seconds (1 year).The includeSubDomains directive must be specified.The preload directive must be specified.If you are serving an additional redirect from your HTTPS site, that redirect must still have the HSTS header (rather than the page it redirects to).For more details on HSTS, please see RFC 6797. Here is an example of a valid HSTS header:Strict-Transport-Security: max-age=63072000; includeSubDomains; preloadYou can check the status of your request by entering the domain name again in the form above, or consult the current Chrome preload list by visiting chrome://net-internals/#hsts in your browser. Note that new entries are hardcoded into the Chrome source code and can take several months before they reach the stable version.Continued RequirementsYou must make sure your site continues to satisfy the submission requirements at all times. Note that removing the preload directive from your header will make your site immediately eligible for the removal form, and that sites may be removed automatically in the future for failing to keep up the requirements.In particular, the requirements above apply to all domains submitted through hstspreload.org on or after October 11, 2017 (i.e. preloaded after Chrome 63)The same requirements apply to earlier domains submitted on or after February 29, 2016 (i.e. preloaded after Chrome 50), except that the required max-age for those domains is only 10886400 seconds.Deployment RecommendationsIf your site is committed to HTTPS and you want to preload HSTS, we suggest the following steps:Examine all subdomains (and nested subdomains) of your site and make sure that they work properly over HTTPS.Add the Strict-Transport-Security header to all HTTPS responses and ramp up the max-age in stages, using the following header values:5 minutes:max-age=300; includeSubDomains1 week:max-age=604800; includeSubDomains1 month:max-age=2592000; includeSubDomainsDuring each stage, check for broken pages and monitor your site's metrics (e.g. traffic, revenue). Fix any problems that come up and then wait the full max-age of the stage before you move on. For example, wait a month in the last stage.Once you're confident that there will be no more issues, increase the max-age to 2 years and submit your site to the preload list:2 years, requesting to be preloaded:max-age=63072000; includeSubDomains; preloadIf you have a group of employees or users who can beta test the deployment, consider trying the first few ramp-up stages on those users. Then make sure to go through all stages for all users, starting over from the beginning.Consult the Mozilla Web Security guidelines and the Google Web Fundamentals pages on security for more concrete advice about HTTPS deployment.Preloading Should Be Opt-InIf you maintain a project that provides HTTPS configuration advice or provides an option to enable HSTS, do not include the preload directive by default. We get regular emails from site operators who tried out HSTS this way, only to find themselves on the preload list by the time they find they need to remove HSTS to access certain subdomains. Removal tends to be slow and painful for those sites.It's great to support HSTS preloading as a best practice, and for projects to provide a simple option to enable it. However, site operators who enable HSTS should know about the long-term consequences of preloading before they turn it on for a given domain. They should also be informed that they need to meet additional requirements and submit their site to hstspreload.org to ensure that it is successfully preloaded (i.e. to get the full protection of the intended configuration).RemovalBe aware that inclusion in the preload list cannot easily be undone. Domains can be removed, but it takes months for a change to reach users with a Chrome update and we cannot make guarantees about other browsers. Don't request inclusion unless you're sure that you can support HTTPS for your entire site and all its subdomains in the long term.However, we will generally honor requests to be removed from Chrome's preload list if you find that you have a subdomain that you cannot serve over HTTPS for strong technical or cost reasons. To request removal, please visit the removal form.TLD PreloadingOwners of gTLDs, ccTLDs, or any other public suffix domains are welcome to preload HSTS across all their registerable domains. This ensures robust security for the whole TLD, and is much simpler than preloading each individual domain. Please contact us if you're interested, or would like to learn more.ContactWant to remove your domain? Please visit the removal form.Else, if you have questions or requests that are not covered by this site, email us here using an appropriate subject line and one of the preload list maintainers will be in contact soon.Skip to main contentSkip to searchSkip to select languageOPEN MAIN MENUReferencesUsing CSS custom properties (variables)In this articleBasic usageFirst steps with custom propertiesUsing the :root pseudo-classInheritance of custom propertiesCustom property fallback valuesHandling invalid custom propertiesValues in JavaScriptSee alsoCSSTutorialsCSS basicsCSS first stepsCSS building blocksStyling textCSS layoutReferenceModulesPropertiesSelectorsCombinatorsPseudo-classesPseudo-elementsAt-rulesFunctionsTypesGuidesAnimationsBackgrounds and BordersBox alignmentBox modelColumnsConditional rulesCSSOM viewFlexboxFlow layoutFontsGridImagesLists and countersLogical propertiesMedia queriesPositioningScroll snapShapesTextTransformsTransitionsLayout cookbookMedia objectsColumnsCenter an elementSticky footersSplit navigationBreadcrumb navigationList group with badgesPaginationCardGrid wrapperToolsColor pickerBox shadow generatorBorder image generatorUsing CSS custom properties (variables)Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);).Complex websites have very large amounts of CSS, often with a lot of repeated values. For example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. Custom properties allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers. For example, --main-text-color is easier to understand than #00ff00, especially if this same color is also used in other contexts.Custom properties are subject to the cascade and inherit their value from their parent.Note: Variables do not work inside media queries and container queries. The var() function can be used in place of any part of a value in any property on an element. The var() function cannot be used as property names, selectors, or anything else besides property values. So, we can't use it in a media query or container query.Basic usageDeclaring a custom property is done using a custom property name that begins with a double hyphen (--), and a property value that can be any valid CSS value. Like any other property, this is written inside a ruleset, like so:element { --main-bg-color: brown;}Note that the selector given to the ruleset defines the scope that the custom property can be used in. A common best practice is to define custom properties on the :root pseudo-class, so that it can be applied globally across your HTML document::root { --main-bg-color: brown;}However, this doesn't always have to be the case: you maybe have a good reason for limiting the scope of your custom properties.Note: Custom property names are case sensitive — --my-color will be treated as a separate custom property to --My-color.As mentioned earlier, you use the custom property value by specifying your custom property name inside the var() function, in place of a regular property value:element { background-color: var(--main-bg-color);}First steps with custom propertiesLet's start with this CSS that applies the same color to elements of different classes:.one { color: white; background-color: brown; margin: 10px; width: 50px; height: 50px; display: inline-block;}.two { color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block;}.three { color: white; background-color: brown; margin: 10px; width: 75px;}.four { color: white; background-color: brown; margin: 10px; width: 100px;}.five { background-color: brown;}We'll apply it to this HTML:<div> <div class="one">1:</div> <div class="two">2: Text <span class="five">5 - more text</span></div> <input class="three" /> <textarea class="four">4: Lorem Ipsum</textarea></div>This produces the following result:Using the :root pseudo-classNotice the repetitive CSS in the example above. The background color is set to brown in several places. For some CSS declarations, it is possible to declare this higher in the cascade and let CSS inheritance solve this problem naturally. For non-trivial projects, this is not always possible. By declaring a custom property on the :root pseudo-class and using it where needed throughout the document, a CSS author can reduce the need for repetition::root { --main-bg-color: brown;}.one { color: white; background-color: var(--main-bg-color); margin: 10px; width: 50px; height: 50px; display: inline-block;}.two { color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block;}.three { color: white; background-color: var(--main-bg-color); margin: 10px; width: 75px;}.four { color: white; background-color: var(--main-bg-color); margin: 10px; width: 100px;}.five { background-color: var(--main-bg-color);}This leads to the same result as the previous example, yet allows for one canonical declaration of the desired property value; very useful if you want to change the value across the entire page later.Inheritance of custom propertiesCustom properties do inherit. This means that if no value is set for a custom property on a given element, the value of its parent is used. Take this HTML:<div class="one"> <div class="two"> <div class="three"></div> <div class="four"></div> </div></div>… with the following CSS:.two { --test: 10px;}.three { --test: 2em;}In this case, the results of var(--test) are:For the class="two" element: 10pxFor the class="three" element: 2emFor the class="four" element: 10px (inherited from its parent)For the class="one" element: invalid value, which is the default value of any custom propertyKeep in mind that these are custom properties, not actual variables like you might find in other programming languages. The value is computed where it is needed, not stored for use in other rules. For instance, you cannot set a property for an element and expect to retrieve it in a sibling's descendant's rule. The property is only set for the matching selector and its descendants, like any normal CSS.Custom property fallback valuesUsing the var() function, you can define multiple fallback values when the given variable is not yet defined; this can be useful when working with Custom Elements and Shadow DOM.Note: Fallback values aren't used to fix the browser compatibility. If the browser doesn't support CSS custom properties, the fallback value won't help. It's just a backup for the browser which supports CSS custom properties to choose a different value if the given variable isn't defined or has an invalid value.The first argument to the function is the name of the custom property to be substituted. The second argument to the function, if provided, is a fallback value, which is used as the substitution value when the referenced custom property is invalid. The function only accepts two parameters, assigning everything following the first comma as the second parameter. If that second parameter is invalid, the fallback will fail. For example:.two { /* Red if --my-var is not defined */ color: var(--my-var, red);}.three { /* pink if --my-var and --my-background are not defined */ background-color: var(--my-var, var(--my-background, pink));}.three { /* Invalid: "--my-background, pink" */ background-color: var(--my-var, --my-background, pink);}Including a custom property as a fallback, as seen in the second example above, is the correct way to provide more than one fallback. The technique has been seen to cause performance issues as it takes more time to parse through the variables.Note: The syntax of the fallback, like that of custom properties, allows commas. For example, var(--foo, red, blue) defines a fallback of red, blue — anything between the first comma and the end of the function is considered a fallback value.Handling invalid custom propertiesEach CSS property can be assigned a defined set of values. If you try to assign a value to a property that is outside its set of valid values, it's considered invalid.When the browser encounters an invalid value for a normal property, it discards the value, and elements are assigned the values that they would have had if the declaration simply did not exist.However, when the values of custom properties are parsed, the browser doesn't yet know where they will be used, so it must consider nearly all values as valid.Unfortunately, these valid values can be used, via the var() functional notation, in a context where they might not make sense. Properties and custom variables can lead to invalid CSS statements, leading to the new concept of valid at computed time.When the browser encounters an invalid var() substitution, then the initial or inherited value of the property is used.The next two examples illustrate this.Invalid normal propertiesIn this example we attempt to apply a value of 16px to the color property. Because this is invalid, the CSS is discarded and the result is as if the rule did not exist, so the previous color: blue rule is applied instead, and the paragraph is blue.HTML<p>This paragraph is initially black.</p>CSSp { color: blue;}p { color: 16px;}ResultInvalid custom propertiesThis example is just like the last one, except we use a custom property.As expected, the browser substitutes the value of --text-color in place of var(--text-color), but 16px is not a valid property value for color. After substitution, the property doesn't make sense. The browser handles this situation in two steps:Check if the property color is inheritable. It is, but this <p> doesn't have any parent with the color property set. So we move on to the next step.Set the value to its default initial value, which is black.HTML<p>This paragraph is initially black.</p>CSS:root { --text-color: 16px;}p { color: blue;}p { color: var(--text-color);}ResultValues in JavaScriptTo use the values of custom properties in JavaScript, it is just like standard properties.// get variable from inline styleelement.style.getPropertyValue("--my-var");// get variable from wherevergetComputedStyle(element).getPropertyValue("--my-var");// set variable on inline styleelement.style.setProperty("--my-var", jsVar + 4);See alsoCustom property syntaxvar()Found a content problem with this page?Edit the page on GitHub.Report the content issue.View the source on GitHub.Want to get more involved? Learn how to contribute.This page was last modified on Apr 4, 2023 by MDN contributors.Your blueprint for a better internet.MDN on TwitterMDN on GitHubMDNAboutHacks BlogCareersAdvertise with usSupportProduct helpReport an issueOur communitiesMDN CommunityMDN ForumMDN ChatDevelopersWeb TechnologiesLearn Web DevelopmentMDN PlusWebsite Privacy NoticeCookiesLegalCommunity Participation GuidelinesVisit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.Portions of this content are ©1998–2023 by individual mozilla.org contributors. Content available under a Creative Commons license.Skip to main contentStencil LogoVersion: v3.2On this pageStencil ConfigIn most cases, the stencil.config.ts file does not require any customization since Stencil comes with great default values out-of-the-box. In general, it's preferred to keep the config as minimal as possible. In fact, you could even delete the stencil.config.ts file entirely and an app would compile just fine. But at the same time, the compiler can be configured at the lowest levels using this config. Below are the many optional config properties.Example stencil.config.ts:import { Config } from '@stencil/core';export const config: Config = { namespace: 'MyApp', srcDir: 'src'};buildEs5Sets if the ES5 build should be generated or not. It defaults to false. Setting buildEs5 to true will also create es5 builds for both dev and prod modes. Setting buildEs5 to prod will only build ES5 in prod mode. If the app does not need to run on legacy browsers (IE11 and Edge 18 and below), buildEs5 set to false, which will also speed up production build times. In addition to creating es5 builds, apps may also be interested in enable runtime options to support legacy browsers. See config extras for more information.INFOAs of Stencil v3, legacy browser support is deprecated, and will be removed in a future major version of Stencil.buildEs5: boolean | 'prod'bundlesBy default, Stencil will statically analyze the application and generate a component graph of how all the components are interconnected. From the component graph it is able to best decide how components should be grouped depending on their usage with one another within the app. By doing so it's able to bundle components together in order to reduce network requests. However, bundles can be manually generated using the bundles config.The bundles config is an array of objects that represent how components are grouped together in lazy-loaded bundles. This config is rarely needed as Stencil handles this automatically behind the scenes.bundles: [ { components: ['ion-button'] }, { components: ['ion-card', 'ion-card-header'] }]devServerPlease see the Dev-Server docs.enableCachedefault: trueStencil will cache build results in order to speed up rebuilds. To disable this feature, set enableCache to false.enableCache: trueextrasPlease see the Extras docs.globalScriptThe global script config option takes a file path as a string.The global script runs once before your library/app loads, so you can do things like setting up a connection to an external service or configuring a library you are using.The code to be executed should be placed within a default function that is exported by the global script. Ensure all of the code in the global script is wrapped in the function that is exported:export default function() { // or export default async function() initServerConnection();}NOTEThe exported function can also be async.globalStyleStencil is traditionally used to compile many components into an app, and each component comes with its own compartmentalized styles. However, it's still common to have styles which should be "global" across all components and the website. A global CSS file is often useful to set CSS Variables.Additionally, the globalStyle config can be used to precompile styles with Sass, PostCss, etc.Below is an example folder structure containing a webapp's global css file, named app.css.src/ components/ global/ app.cssThe global style config takes a file path as a string. The output from this build will go to the buildDir. In this example it would be saved to www/build/app.css.globalStyle: 'src/global/app.css'Check out the styling docs of how to use global styles in your app.hashedFileNameLengthdefault: 8When the hashFileNames config is set to true, and it is a production build, the hashedFileNameLength config is used to determine how many characters the file name's hash should be.hashedFileNameLength: 8hashFileNamesdefault: trueDuring production builds, the content of each generated file is hashed to represent the content, and the hashed value is used as the filename. If the content isn't updated between builds, then it receives the same filename. When the content is updated, then the filename is different. By doing this, deployed apps can "forever-cache" the build directory and take full advantage of content delivery networks (CDNs) and heavily caching files for faster apps.hashFileNames: trueinvisiblePrehydrationdefault: trueWhen true, invisiblePrehydration will visually hide components before they are hydrated by adding an automatically injected style tag to the document's head. Setting invisiblePrehydration to false will not inject the style tag into the head, allowing you to style your web components pre-hydration.NOTESetting invisiblePrehydration to false will cause everything to be visible when your page is loaded, causing a more prominent Flash of Unstyled Content (FOUC). However, you can style your web component's fallback content to your preference.invisiblePrehydration: trueminifyCssdefault: true in productionWhen true, the browser CSS file will be minified.minifyJsdefault: true in productionWhen true, the browser JS files will be minified. Stencil uses Terser under-the-hood for file minification.namespacedefault: AppThe namespace config is a string representing a namespace for the app. For apps that are not meant to be a library of reusable components, the default of App is just fine. However, if the app is meant to be consumed as a third-party library, such as Ionic, a unique namespace is required.namespace: "Ionic"outputTargetsPlease see the Output Target docs.pluginsPlease see the Plugin docs.preambledefault: undefinedUsed to help to persist a banner or add relevant information about the resulting build, the preamble configuration field is a string that will be converted into a pinned comment and placed at the top of all emitted JavaScript files, with the exception of any emitted polyfills. Escaped newlines may be placed in the provided value for this field and will be honored by Stencil.Example:preamble: 'Built with Stencil\nCopyright (c) SomeCompanyInc.'Will generate the following comment:/*!* Built with Stencil* Copyright (c) SomeCompanyInc.*/sourceMapdefault: trueWhen omitted or set to true, sourcemaps will be generated for a project. When set to false, sourcemaps will not be generated.sourceMap: true | falseSourcemaps create a translation between Stencil components that are written in TypeScript/JSX and the resulting JavaScript that is output by Stencil. Enabling source maps in your project allows for an improved debugging experience for Stencil components. For example, they allow external tools (such as an Integrated Development Environment) to add breakpoints directly in the original source code, which allows you to 'step through' your code line-by-line, to inspect the values held in variables, to observe logic flow, and more.Please note: Stencil will always attempt to minify a component's source code as much as possible during compilation. When sourceMap is enabled, it is possible that a slightly different minified result will be produced by Stencil when compared to the minified result produced when sourceMap is not enabled.Developers are responsible for determining whether or not they choose to serve sourcemaps in each environment their components are served and implementing their decision accordingly.srcDirdefault: srcThe srcDir config specifies the directory which should contain the source typescript files for each component. The standard for Stencil apps is to use src, which is the default.srcDir: 'src'taskQueuedefault: asyncSets the task queue used by stencil's runtime. The task queue schedules DOM read and writes across the frames to efficiently render and reduce layout thrashing. By default, the async is used. It's recommended to also try each setting to decide which works best for your use-case. In all cases, if your app has many CPU intensive tasks causing the main thread to periodically lock-up, it's always recommended to try Web Workers for those tasks.congestionAsync: DOM reads and writes are scheduled in the next frame to prevent layout thrashing. When the app is heavily tasked and the queue becomes congested it will then split the work across multiple frames to prevent blocking the main thread. However, it can also introduce unnecessary reflows in some cases, especially during startup. congestionAsync is ideal for apps running animations while also simultaneously executing intensive tasks which may lock-up the main thread.async: DOM read and writes are scheduled in the next frame to prevent layout thrashing. During intensive CPU tasks it will not reschedule rendering to happen in the next frame. async is ideal for most apps, and if the app has many intensive tasks causing the main thread to lock-up, it's recommended to try Web Workers rather than the congestion async queue.immediate: Makes writeTask() and readTask() callbacks to be executed synchronously. Tasks are not scheduled to run in the next frame, but do note there is at least one microtask. The immediate setting is ideal for apps that do not provide long-running and smooth animations. Like the async setting, if the app has intensive tasks causing the main thread to lock-up, it's recommended to try Web Workers.taskQueue: 'async'testingPlease see the testing config docs.transformAliasedImportPathsdefault: falseThis sets whether or not Stencil should transform path aliases set in a project's tsconfig.json from the assigned module aliases to resolved relative paths. This will not transform external imports (like @stencil/core) or relative imports (like '../utils').This option applies globally and will affect all code processed by Stencil, including .d.ts files and spec tests.An example of path transformation could look something like the following.First, a set of paths aliases in tsconfig.json:tsconfig.json{ "compilerOptions": { "paths": { "@utils": [ "../path/to/utils" ] } }}Then with the following input:src/my-module.tsimport { utilFunc, UtilInterface } from '@utils'export function util(arg: UtilInterface) { utilFunc(arg)}if the transformAliasedImportPaths option is set to true Stencil will produce the following output:dist/my-module.jsimport { utilFunc } from '../path/to/utils';export function util(arg) { utilFunc(arg);}dist/my-module.d.tsimport { UtilInterface } from '../path/to/utils';export declare function util(arg: UtilInterface): void;Submit an editPreviousServer Side RenderingNextCLISubmit an edit
---title: Configsidebar_label: Overviewdescription: Configslug: /config---# Stencil ConfigIn most cases, the `stencil.config.ts` file does not require any customization since Stencil comes with great default values out-of-the-box. In general, it's preferred to keep the config as minimal as possible. In fact, you could even delete the `stencil.config.ts` file entirely and an app would compile just fine. But at the same time, the compiler can be configured at the lowest levels using this config. Below are the many *optional* config properties.Example `stencil.config.ts`:```tsximport { Config } from '@stencil/core';export const config: Config = { namespace: 'MyApp', srcDir: 'src'};```## buildEs5Sets if the ES5 build should be generated or not.It defaults to `false`.Setting `buildEs5` to `true` will also create es5 builds for both dev and prod modes.Setting `buildEs5` to `prod` will only build ES5 in prod mode.If the app does not need to run on legacy browsers (IE11 and Edge 18 and below), `buildEs5` set to `false`, which will also speed up production build times. In addition to creating es5 builds, apps may also be interested in enable runtime options to __support__ legacy browsers. See [config extras](./extras.md) for more information.:::infoAs of Stencil v3, legacy browser support is deprecated, and will be removed in a future major version of Stencil.:::```tsxbuildEs5: boolean | 'prod'```## bundlesBy default, Stencil will statically analyze the application and generate a component graph of how all the components are interconnected. From the component graph it is able to best decide how components should be grouped depending on their usage with one another within the app. By doing so it's able to bundle components together in order to reduce network requests. However, bundles can be manually generated using the `bundles` config.The `bundles` config is an array of objects that represent how components are grouped together in lazy-loaded bundles. This config is rarely needed as Stencil handles this automatically behind the scenes.```tsxbundles: [ { components: ['ion-button'] }, { components: ['ion-card', 'ion-card-header'] }]```## devServerPlease see the [Dev-Server docs](./dev-server.md).## enableCache*default: `true`*Stencil will cache build results in order to speed up rebuilds. To disable this feature, set `enableCache` to `false`.```tsxenableCache: true```## extrasPlease see the [Extras docs](./extras.md).## globalScriptThe global script config option takes a file path as a string.The global script runs once before your library/app loads, so you can do things like setting up a connection to an external service or configuring a library you are using.The code to be executed should be placed within a default function that is exported by the global script. Ensure all of the code in the global script is wrapped in the function that is exported:```javascriptexport default function() { // or export default async function() initServerConnection();}```:::noteThe exported function can also be `async`.:::## globalStyleStencil is traditionally used to compile many components into an app, and each component comes with its own compartmentalized styles. However, it's still common to have styles which should be "global" across all components and the website. A global CSS file is often useful to set [CSS Variables](../components/styling.md).Additionally, the `globalStyle` config can be used to precompile styles with Sass, PostCss, etc.Below is an example folder structure containing a webapp's global css file, named `app.css`.```bashsrc/ components/ global/ app.css```The global style config takes a file path as a string. The output from this build will go to the `buildDir`. In this example it would be saved to `www/build/app.css`.```tsxglobalStyle: 'src/global/app.css'```Check out the [styling docs](../components/styling.md#global-styles) of how to use global styles in your app.## hashedFileNameLength*default: `8`*When the `hashFileNames` config is set to `true`, and it is a production build, the `hashedFileNameLength` config is used to determine how many characters the file name's hash should be.```tsxhashedFileNameLength: 8```## hashFileNames*default: `true`*During production builds, the content of each generated file is hashed to represent the content, and the hashed value is used as the filename. If the content isn't updated between builds, then it receives the same filename. When the content is updated, then the filename is different. By doing this, deployed apps can "forever-cache" the build directory and take full advantage of content delivery networks (CDNs) and heavily caching files for faster apps.```tsxhashFileNames: true```## invisiblePrehydration*default: `true`*When `true`, `invisiblePrehydration` will visually hide components before they are hydrated by adding an automatically injected style tag to the document's head. Setting `invisiblePrehydration` to `false` will not inject the style tag into the head, allowing you to style your web components pre-hydration. :::noteSetting `invisiblePrehydration` to `false` will cause everything to be visible when your page is loaded, causing a more prominent Flash of Unstyled Content (FOUC). However, you can style your web component's fallback content to your preference.:::```tsxinvisiblePrehydration: true```## minifyCss_default: `true` in production_When `true`, the browser CSS file will be minified.## minifyJs_default: `true` in production_When `true`, the browser JS files will be minified. Stencil uses [Terser](https://terser.org/) under-the-hood for file minification.## namespace*default: `App`*The `namespace` config is a `string` representing a namespace for the app. For apps that are not meant to be a library of reusable components, the default of `App` is just fine. However, if the app is meant to be consumed as a third-party library, such as `Ionic`, a unique namespace is required.```tsxnamespace: "Ionic"```## outputTargetsPlease see the [Output Target docs](../output-targets/01-overview.md).## pluginsPlease see the [Plugin docs](./plugins.md).## preamble*default: `undefined`*Used to help to persist a banner or add relevant information about the resulting build, the `preamble` configuration field is a `string` that will be converted into a pinned comment and placed at the top of all emitted JavaScript files,with the exception of any emitted polyfills. Escaped newlines may be placed in the provided value for this field and will be honored by Stencil.Example:```tsxpreamble: 'Built with Stencil\nCopyright (c) SomeCompanyInc.'```Will generate the following comment:```tsx/*!* Built with Stencil* Copyright (c) SomeCompanyInc.*/```## sourceMap*default: `true`*When omitted or set to `true`, sourcemaps will be generated for a project.When set to `false`, sourcemaps will not be generated.```tsxsourceMap: true | false```Sourcemaps create a translation between Stencil components that are written in TypeScript/JSX and the resulting JavaScript that is output by Stencil. Enabling source maps in your project allows for an improved debugging experiencefor Stencil components. For example, they allow external tools (such as an Integrated Development Environment) to addbreakpoints directly in the original source code, which allows you to 'step through' your code line-by-line, to inspectthe values held in variables, to observe logic flow, and more.Please note: Stencil will always attempt to minify a component's source code as much as possible during compilation. When `sourceMap` is enabled, it is possible that a slightly different minified result will be produced by Stencil whencompared to the minified result produced when `sourceMap` is not enabled. Developers are responsible for determining whether or not they choose to serve sourcemaps in each environment theircomponents are served and implementing their decision accordingly.## srcDir*default: `src`*The `srcDir` config specifies the directory which should contain the source typescript files for each component. The standard for Stencil apps is to use `src`, which is the default.```tsxsrcDir: 'src'```## taskQueue*default: `async`*Sets the task queue used by stencil's runtime. The task queue schedules DOM read and writesacross the frames to efficiently render and reduce layout thrashing. By default, the`async` is used. It's recommended to also try each setting to decide which worksbest for your use-case. In all cases, if your app has many CPU intensive tasks causing themain thread to periodically lock-up, it's always recommended to try[Web Workers](../guides/workers.md) for those tasks.* `congestionAsync`: DOM reads and writes are scheduled in the next frame to prevent layout thrashing. When the app is heavily tasked and the queue becomes congested it will then split the work across multiple frames to prevent blocking the main thread. However, it can also introduce unnecessary reflows in some cases, especially during startup. `congestionAsync` is ideal for apps running animations while also simultaneously executing intensive tasks which may lock-up the main thread.* `async`: DOM read and writes are scheduled in the next frame to prevent layout thrashing. During intensive CPU tasks it will not reschedule rendering to happen in the next frame. `async` is ideal for most apps, and if the app has many intensive tasks causing the main thread to lock-up, it's recommended to try [Web Workers](../guides/workers.md) rather than the congestion async queue.* `immediate`: Makes writeTask() and readTask() callbacks to be executed synchronously. Tasks are not scheduled to run in the next frame, but do note there is at least one microtask. The `immediate` setting is ideal for apps that do not provide long-running and smooth animations. Like the async setting, if the app has intensive tasks causing the main thread to lock-up, it's recommended to try [Web Workers](../guides/workers.md).```tsxtaskQueue: 'async'```## testingPlease see the [testing config docs](../testing/config.md).## transformAliasedImportPaths*default: `false`*This sets whether or not Stencil should transform [path aliases](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping) setin a project's `tsconfig.json` from the assigned module aliases to resolvedrelative paths. This will not transform external imports (like `@stencil/core`) orrelative imports (like `'../utils'`).This option applies globally and will affect all code processed by Stencil,including `.d.ts` files and spec tests.An example of path transformation could look something like the following.First, a set of `paths` aliases in `tsconfig.json`:```json title="tsconfig.json"{ "compilerOptions": { "paths": { "@utils": [ "../path/to/utils" ] } }}```Then with the following input:```ts title="src/my-module.ts"import { utilFunc, UtilInterface } from '@utils'export function util(arg: UtilInterface) { utilFunc(arg)}```if the `transformAliasedImportPaths` option is set to `true` Stencil willproduce the following output:```js title="dist/my-module.js"import { utilFunc } from '../path/to/utils';export function util(arg) { utilFunc(arg);}``````ts title="dist/my-module.d.ts"import { UtilInterface } from '../path/to/utils';export declare function util(arg: UtilInterface): void;```---title: Distributing Web Components Built with Stencilsidebar_label: distdescription: Distributing Web Components Built with Stencilslug: /distribution---# Distribution Output TargetThe `dist` type is to generate the component(s) as a reusable library that can be self-lazy loading, such as [Ionic](https://www.npmjs.com/package/@ionic/core). When creating a distribution, the project's `package.json` will also have to be updated. However, the generated bundle is treeshakable, ensuring that only imported components will end up in the build.```tsxoutputTargets: [ { type: 'dist' }]```## How is this different from "dist-custom-elements" output target?To start, Stencil was designed to lazy-load itself only when the component was actually used on a page. There are many benefits to this approach, such as simply adding a script tag to any page and the entire library is available for use, yet only the components actually used are downloaded. For example, [`@ionic/core`](https://www.npmjs.com/package/@ionic/core) comes with over 100 components, but a one webpage may only need `ion-toggle`. Instead of requesting the entire component library, or generating a custom bundle for just `ion-toggle`, the `dist` output target is able to generate a tiny entry build ready to load any of its components on-demand.The `dist-custom-elements` on the other hand is a direct build of the custom element that extends `HTMLElement`, without any lazy-loading. The custom elements bundle does not apply polyfills, nor automatically define each custom elements. This may be preferred for projects that will handle bundling, lazy-loading and defining the custom elements themselves.Luckily, both builds can be generated at the same time, and shipped in the same distribution. It would be up to the consumer of your component library to decide which build to use.## Config### dirThe `dir` config specifies the public distribution directory. This directory is commonly the `dist` directory found within [npm packages](https://docs.npmjs.com/getting-started/packages). This directory is built and rebuilt directly from the source files. Additionally, since this is a build target, all files will be deleted and rebuilt after each build, so it's best to always copy source files into this directory. It's recommended that this directory not be committed to a repository.This option defaults to `dist` when omitted from a Stencil configuration file.### emptyBy default, before each build the `dir` directory will be emptied of all files. To prevent this directory from being emptied, change this value to `false`.This flag defaults to `true` when omitted from a Stencil configuration file.### collectionDirThe `collectionDir` config specifies the output directory within the [distribution directory](#dir) where the transpiled output of Stencil components will be written.This option defaults to `collection` when omitted from a Stencil configuration file.### transformAliasedImportPathsInCollectionThis option will allow [path aliases](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping) defined in a project's `tsconfig.json` to be transformed into relative paths in the code output under the [collectionDir](#collectiondir) subdirectory for this output target. This does not affect imports for external packages.An example of path transformation could look something like:```ts// Source codeimport * as utils from '@utils';// Output codeimport * as utils from '../path/to/utils';```This flag defaults to `false` when omitted from a Stencil configuration file.:::tipIf using the `dist-collection` output target directly, the same result can be achieved using the `transformAliasedImportPaths` flag on the target's config.:::## PublishingNext you can publish your library to [Node Package Manager (NPM)](https://www.npmjs.com/). For more information about setting up the `package.json` file, and publishing, see: [Publishing A Component Library](../guides/publishing.md).## Distribution OptionsEach output target's form of bundling and distribution has its own pros and cons. Luckily you can just worry about writing good source code for your component. Stencil will handle generating the various bundles and consumers of your library can decide how to apply your components to their external projects. Below are a few of the options.### Script tag- Use a script tag linked to a CDN copy of your published NPM module, for example: `<script type="module" src='https://cdn.jsdelivr.net/npm/[email protected]/dist/myname.js'></script>`.- The initial script itself is extremely tiny and does not represent the entire library. It's only a small registry.- You can use any or all components within your library anywhere within that webpage.- It doesn't matter if the actual component was written within the HTML or created with vanilla JavaScript, jQuery, React, etc.- Only the components used on that page will be requested and lazy-loaded.### Importing the `dist` library using a bundler- Run `npm install my-name --save`- Add an `import` within the root component: `import my-component`;- Stencil will automatically setup the lazy-loading capabilities for the Stencil library.- Then you can use the element anywhere in your template, JSX, HTML etc.### Importing the `dist` library into another Stencil app- Run `npm install my-name --save`- Add an `import` within the root component: `import my-component`;- Stencil will automatically setup the lazy-loading capabilities for the Stencil library.- Then you can use the element anywhere in your template, JSX, HTML etc.---title: Configsidebar_label: Overviewdescription: Configslug: /config---# Stencil ConfigIn most cases, the `stencil.config.ts` file does not require any customization since Stencil comes with great default values out-of-the-box. In general, it's preferred to keep the config as minimal as possible. In fact, you could even delete the `stencil.config.ts` file entirely and an app would compile just fine. But at the same time, the compiler can be configured at the lowest levels using this config. Below are the many *optional* config properties.Example `stencil.config.ts`:```tsximport { Config } from '@stencil/core';export const config: Config = { namespace: 'MyApp', srcDir: 'src'};```## buildEs5Sets if the ES5 build should be generated or not.It defaults to `false`.Setting `buildEs5` to `true` will also create es5 builds for both dev and prod modes.Setting `buildEs5` to `prod` will only build ES5 in prod mode.If the app does not need to run on legacy browsers (IE11 and Edge 18 and below), `buildEs5` set to `false`, which will also speed up production build times. In addition to creating es5 builds, apps may also be interested in enable runtime options to __support__ legacy browsers. See [config extras](./extras.md) for more information.:::infoAs of Stencil v3, legacy browser support is deprecated, and will be removed in a future major version of Stencil.:::```tsxbuildEs5: boolean | 'prod'```## bundlesBy default, Stencil will statically analyze the application and generate a component graph of how all the components are interconnected. From the component graph it is able to best decide how components should be grouped depending on their usage with one another within the app. By doing so it's able to bundle components together in order to reduce network requests. However, bundles can be manually generated using the `bundles` config.The `bundles` config is an array of objects that represent how components are grouped together in lazy-loaded bundles. This config is rarely needed as Stencil handles this automatically behind the scenes.```tsxbundles: [ { components: ['ion-button'] }, { components: ['ion-card', 'ion-card-header'] }]```## devServerPlease see the [Dev-Server docs](./dev-server.md).## enableCache*default: `true`*Stencil will cache build results in order to speed up rebuilds. To disable this feature, set `enableCache` to `false`.```tsxenableCache: true```## extrasPlease see the [Extras docs](./extras.md).## globalScriptThe global script config option takes a file path as a string.The global script runs once before your library/app loads, so you can do things like setting up a connection to an external service or configuring a library you are using.The code to be executed should be placed within a default function that is exported by the global script. Ensure all of the code in the global script is wrapped in the function that is exported:```javascriptexport default function() { // or export default async function() initServerConnection();}```:::noteThe exported function can also be `async`.:::## globalStyleStencil is traditionally used to compile many components into an app, and each component comes with its own compartmentalized styles. However, it's still common to have styles which should be "global" across all components and the website. A global CSS file is often useful to set [CSS Variables](../components/styling.md).Additionally, the `globalStyle` config can be used to precompile styles with Sass, PostCss, etc.Below is an example folder structure containing a webapp's global css file, named `app.css`.```bashsrc/ components/ global/ app.css```The global style config takes a file path as a string. The output from this build will go to the `buildDir`. In this example it would be saved to `www/build/app.css`.```tsxglobalStyle: 'src/global/app.css'```Check out the [styling docs](../components/styling.md#global-styles) of how to use global styles in your app.## hashedFileNameLength*default: `8`*When the `hashFileNames` config is set to `true`, and it is a production build, the `hashedFileNameLength` config is used to determine how many characters the file name's hash should be.```tsxhashedFileNameLength: 8```## hashFileNames*default: `true`*During production builds, the content of each generated file is hashed to represent the content, and the hashed value is used as the filename. If the content isn't updated between builds, then it receives the same filename. When the content is updated, then the filename is different. By doing this, deployed apps can "forever-cache" the build directory and take full advantage of content delivery networks (CDNs) and heavily caching files for faster apps.```tsxhashFileNames: true```## invisiblePrehydration*default: `true`*When `true`, `invisiblePrehydration` will visually hide components before they are hydrated by adding an automatically injected style tag to the document's head. Setting `invisiblePrehydration` to `false` will not inject the style tag into the head, allowing you to style your web components pre-hydration. :::noteSetting `invisiblePrehydration` to `false` will cause everything to be visible when your page is loaded, causing a more prominent Flash of Unstyled Content (FOUC). However, you can style your web component's fallback content to your preference.:::```tsxinvisiblePrehydration: true```## minifyCss_default: `true` in production_When `true`, the browser CSS file will be minified.## minifyJs_default: `true` in production_When `true`, the browser JS files will be minified. Stencil uses [Terser](https://terser.org/) under-the-hood for file minification.## namespace*default: `App`*The `namespace` config is a `string` representing a namespace for the app. For apps that are not meant to be a library of reusable components, the default of `App` is just fine. However, if the app is meant to be consumed as a third-party library, such as `Ionic`, a unique namespace is required.```tsxnamespace: "Ionic"```## outputTargetsPlease see the [Output Target docs](../output-targets/01-overview.md).## pluginsPlease see the [Plugin docs](./plugins.md).## preamble*default: `undefined`*Used to help to persist a banner or add relevant information about the resulting build, the `preamble` configuration field is a `string` that will be converted into a pinned comment and placed at the top of all emitted JavaScript files,with the exception of any emitted polyfills. Escaped newlines may be placed in the provided value for this field and will be honored by Stencil.Example:```tsxpreamble: 'Built with Stencil\nCopyright (c) SomeCompanyInc.'```Will generate the following comment:```tsx/*!* Built with Stencil* Copyright (c) SomeCompanyInc.*/```## sourceMap*default: `true`*When omitted or set to `true`, sourcemaps will be generated for a project.When set to `false`, sourcemaps will not be generated.```tsxsourceMap: true | false```Sourcemaps create a translation between Stencil components that are written in TypeScript/JSX and the resulting JavaScript that is output by Stencil. Enabling source maps in your project allows for an improved debugging experiencefor Stencil components. For example, they allow external tools (such as an Integrated Development Environment) to addbreakpoints directly in the original source code, which allows you to 'step through' your code line-by-line, to inspectthe values held in variables, to observe logic flow, and more.Please note: Stencil will always attempt to minify a component's source code as much as possible during compilation. When `sourceMap` is enabled, it is possible that a slightly different minified result will be produced by Stencil whencompared to the minified result produced when `sourceMap` is not enabled. Developers are responsible for determining whether or not they choose to serve sourcemaps in each environment theircomponents are served and implementing their decision accordingly.## srcDir*default: `src`*The `srcDir` config specifies the directory which should contain the source typescript files for each component. The standard for Stencil apps is to use `src`, which is the default.```tsxsrcDir: 'src'```## taskQueue*default: `async`*Sets the task queue used by stencil's runtime. The task queue schedules DOM read and writesacross the frames to efficiently render and reduce layout thrashing. By default, the`async` is used. It's recommended to also try each setting to decide which worksbest for your use-case. In all cases, if your app has many CPU intensive tasks causing themain thread to periodically lock-up, it's always recommended to try[Web Workers](../guides/workers.md) for those tasks.* `congestionAsync`: DOM reads and writes are scheduled in the next frame to prevent layout thrashing. When the app is heavily tasked and the queue becomes congested it will then split the work across multiple frames to prevent blocking the main thread. However, it can also introduce unnecessary reflows in some cases, especially during startup. `congestionAsync` is ideal for apps running animations while also simultaneously executing intensive tasks which may lock-up the main thread.* `async`: DOM read and writes are scheduled in the next frame to prevent layout thrashing. During intensive CPU tasks it will not reschedule rendering to happen in the next frame. `async` is ideal for most apps, and if the app has many intensive tasks causing the main thread to lock-up, it's recommended to try [Web Workers](../guides/workers.md) rather than the congestion async queue.* `immediate`: Makes writeTask() and readTask() callbacks to be executed synchronously. Tasks are not scheduled to run in the next frame, but do note there is at least one microtask. The `immediate` setting is ideal for apps that do not provide long-running and smooth animations. Like the async setting, if the app has intensive tasks causing the main thread to lock-up, it's recommended to try [Web Workers](../guides/workers.md).```tsxtaskQueue: 'async'```## testingPlease see the [testing config docs](../testing/config.md).## transformAliasedImportPaths*default: `false`*This sets whether or not Stencil should transform [path aliases](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping) setin a project's `tsconfig.json` from the assigned module aliases to resolvedrelative paths. This will not transform external imports (like `@stencil/core`) orrelative imports (like `'../utils'`).This option applies globally and will affect all code processed by Stencil,including `.d.ts` files and spec tests.An example of path transformation could look something like the following.First, a set of `paths` aliases in `tsconfig.json`:```json title="tsconfig.json"{ "compilerOptions": { "paths": { "@utils": [ "../path/to/utils" ] } }}```Then with the following input:```ts title="src/my-module.ts"import { utilFunc, UtilInterface } from '@utils'export function util(arg: UtilInterface) { utilFunc(arg)}```if the `transformAliasedImportPaths` option is set to `true` Stencil willproduce the following output:```js title="dist/my-module.js"import { utilFunc } from '../path/to/utils';export function util(arg) { utilFunc(arg);}``````ts title="dist/my-module.d.ts"import { UtilInterface } from '../path/to/utils';export declare function util(arg: UtilInterface): void;```
| |||