{"id":5387,"date":"2023-06-13T15:51:23","date_gmt":"2023-06-13T19:51:23","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=5387"},"modified":"2023-06-13T15:56:25","modified_gmt":"2023-06-13T19:56:25","slug":"announcing-stencil-v3-4-0","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0","title":{"rendered":"Announcing Stencil v3.4.0"},"content":{"rendered":"\n

Stencil v3.4.0 is now available! This was a smaller release as the team has been focusing efforts on the upcoming Stencil v4 release, but does introduce one new feature for validating core fields used when publishing your Stencil component libraries. Let\u2019s take a look!<\/p>\n\n\n\n\n\n\n\n

Primary Package Output Target Validation<\/h2>\n\n\n\n

In Stencil v3.4.0 we\u2019re changing how the Stencil compiler validates fields in your project\u2019s package.json<\/code> that have recommended values based on certain Stencil output target types. Historically, the output target to validate against has been controlled by Stencil itself. Moving forward, developers will be able to designate a specific output target to use for this validation.<\/p>\n\n\n\n

Taking advantage of this new behavior is straightforward and only requires you to set two flags in your Stencil configuration. Firstly, you\u2019ll need to opt in to the validation logic by enabling the validatePrimaryPackageOutputTarget<\/code> flag in the root of your config:<\/p>\n\n\n\n

import { Config } from '@stencil\/core';\n\nexport const config: Config = {\n  validatePrimaryPackageOutputTarget: true,\n  \/\/ ...\n};<\/code><\/pre>\n\n\n\n
Then, simply set the isPrimaryPackageOututTarget<\/code> flag on the output target you would like to validate (the list of valid output target types can be found in the Stencil docs<\/a>):<\/p>\n\n\n\n
import { Config } from '@stencil\/core';\n\nexport const config: Config = {\n  validatePrimaryPackageOutputTarget: true,\n  outputTargets: [\n    {\n      type: \u2018dist\u2019,\n      isPrimaryPackageOutputTarget: true,\n      \/\/ ...\n    }\n  ]\n  \/\/ ...\n};<\/code><\/pre>\n\n\n\n
That\u2019s it! Stencil will handle the rest based on your output target configuration and you\u2019ll see warnings logged to the console at build time if it detects a problem with your configuration or the values in your package.json<\/code> don\u2019t match the recommended values.<\/p>\n\n\n\n
For more information on this feature, check out the related Stencil docs<\/a>.<\/p>\n\n\n\n
But wait, there\u2019s more!<\/h2>\n\n\n\n
This release of Stencil includes additional internal updates and dependency version bumps. For a full list of changes, please take a look at the changelog for this release.<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"
Stencil v3.4.0 is here! This release introduces a new feature for validating core fields used when publishing Stencil component libraries.<\/p>\n","protected":false},"author":106,"featured_media":5390,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,120,223],"tags":[76],"class_list":["post-5387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-announcements","category-stencil","tag-stencil"],"acf":[],"yoast_head":"\nAnnouncing Stencil v3.4.0 - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Stencil v3.4.0 is here! This release introduces a new feature for validating core fields used when publishing Stencil component libraries.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing Stencil v3.4.0\" \/>\n<meta property=\"og:description\" content=\"Stencil v3.4.0 is here! This release introduces a new feature for validating core fields used when publishing Stencil component libraries.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-13T19:51:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-13T19:56:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/stencil34-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1120\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Stencil Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stencil Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0\"},\"author\":{\"name\":\"Stencil Team\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/82fcd9aa19604364f3c30a946de8e646\"},\"headline\":\"Announcing Stencil v3.4.0\",\"datePublished\":\"2023-06-13T19:51:23+00:00\",\"dateModified\":\"2023-06-13T19:56:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0\"},\"wordCount\":270,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/stencil34-feature-image.png\",\"keywords\":[\"stencil\"],\"articleSection\":[\"All\",\"Announcements\",\"Stencil\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0\",\"name\":\"Announcing Stencil v3.4.0 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/stencil34-feature-image.png\",\"datePublished\":\"2023-06-13T19:51:23+00:00\",\"dateModified\":\"2023-06-13T19:56:25+00:00\",\"description\":\"Stencil v3.4.0 is here! This release introduces a new feature for validating core fields used when publishing Stencil component libraries.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/stencil34-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/stencil34-feature-image.png\",\"width\":2240,\"height\":1120},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Stencil v3.4.0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/82fcd9aa19604364f3c30a946de8e646\",\"name\":\"Stencil Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil-white-on-color-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil-white-on-color-150x150.png\",\"caption\":\"Stencil Team\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/stencil\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing Stencil v3.4.0 - Ionic Blog","description":"Stencil v3.4.0 is here! This release introduces a new feature for validating core fields used when publishing Stencil component libraries.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0","og_locale":"en_US","og_type":"article","og_title":"Announcing Stencil v3.4.0","og_description":"Stencil v3.4.0 is here! This release introduces a new feature for validating core fields used when publishing Stencil component libraries.","og_url":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0","og_site_name":"Ionic Blog","article_published_time":"2023-06-13T19:51:23+00:00","article_modified_time":"2023-06-13T19:56:25+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/stencil34-feature-image.png","type":"image\/png"}],"author":"Stencil Team","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Stencil Team","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0"},"author":{"name":"Stencil Team","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/82fcd9aa19604364f3c30a946de8e646"},"headline":"Announcing Stencil v3.4.0","datePublished":"2023-06-13T19:51:23+00:00","dateModified":"2023-06-13T19:56:25+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0"},"wordCount":270,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/stencil34-feature-image.png","keywords":["stencil"],"articleSection":["All","Announcements","Stencil"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0","url":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0","name":"Announcing Stencil v3.4.0 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/stencil34-feature-image.png","datePublished":"2023-06-13T19:51:23+00:00","dateModified":"2023-06-13T19:56:25+00:00","description":"Stencil v3.4.0 is here! This release introduces a new feature for validating core fields used when publishing Stencil component libraries.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/stencil34-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/stencil34-feature-image.png","width":2240,"height":1120},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-4-0#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Stencil v3.4.0"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/82fcd9aa19604364f3c30a946de8e646","name":"Stencil Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil-white-on-color-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil-white-on-color-150x150.png","caption":"Stencil Team"},"url":"https:\/\/ionic.io\/blog\/author\/stencil"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/stencil34-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/106"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=5387"}],"version-history":[{"count":4,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5387\/revisions"}],"predecessor-version":[{"id":5396,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5387\/revisions\/5396"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/5390"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=5387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=5387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=5387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}