{"id":4590,"date":"2022-12-19T15:12:18","date_gmt":"2022-12-19T20:12:18","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=4590"},"modified":"2022-12-20T08:42:59","modified_gmt":"2022-12-20T13:42:59","slug":"announcing-stencil-v3-0-beta","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta","title":{"rendered":"Announcing Stencil v3.0 Beta"},"content":{"rendered":"<p>Hey folks, hope you are all doing well around this time of the year. We\u2019ve been hard at work over the past few months working on the next major version of Stencil, the web component compiler. Today, I\u2019m thrilled to share that Stencil 3.0 Beta is available for testing in your component libraries. Let\u2019s dive in a little bit and understand what has gone into this release.<\/p>\n<p>To update to the latest version, you can simply install the latest version from npm:<\/p>\n<pre><code class=\"language-shell\">npm install @stencil\/core@v3-next<\/code><\/pre>\n<p>Then follow the <a href=\"https:\/\/stenciljs.com\/docs\/upgrading-to-stencil-3\">migration guide<\/a> to update your project. Let\u2019s take a look at a few changes in this release to get a better understanding of why they were made.<\/p>\n<p><!--more--><\/p>\n<h2>Ch-ch-ch-Changes<\/h2>\n<p>One of the main goals of this major version is to create a new base for what we want Stencil to be in future releases. This means making a few breaking changes to keep up with the ecosystem. For example, we\u2019ve dropped support for Node 12 and require at least Node 14.<\/p>\n<p>In addition to this, we\u2019ve also deprecated support for Safari 10 and IE 11. Any flags used to add support for older Safari and IE have been prepended with <code>__deprecated__<\/code>\u00a0and will be eventually removed in future major versions. These flags include:<\/p>\n<ul>\n<li aria-level=\"1\"><code>__deprecated__dynamicImportShim<\/code><\/li>\n<li aria-level=\"1\"><code>__deprecated__cssVarsShim<\/code><\/li>\n<li aria-level=\"1\"><code>__deprecated__shadowDomShim<\/code><\/li>\n<li aria-level=\"1\"><code>__deprecated__safari10<\/code><\/li>\n<\/ul>\n<p>Following an RFC, the <code>dist-custom-elements-bundle<\/code> output target has been removed in 3.0. Users should migrate to the <code>dist-custom-elements<\/code> output target.<\/p>\n<p>By default, <code>dist-custom-elements<\/code> does not automatically define all a project&#8217;s components with the <code>CustomElementsRegistry<\/code>. This allows for better treeshaking and smaller bundle sizes.<\/p>\n<p>For teams that need to migrate quickly to <code>dist-custom-elements<\/code>, the following configuration should be close to a drop-in replacement for <code>dist-custom-elements-bundle<\/code>:<\/p>\n<pre><code class=\"language-diff\">\/\/ stencil.config.ts\n\nimport { Config } from &#039;@stencil\/core&#039;;\n\nexport const config: Config = {\n\u00a0\u00a0outputTargets: [\n-\u00a0 \u00a0 {\n-\u00a0 \u00a0 \u00a0 type: &#039;dist-custom-elements-bundle&#039;,\n-\u00a0 \u00a0 \u00a0 \/\/ additional configuration\n-\u00a0 \u00a0 },\n+\u00a0 \u00a0 {\n+\u00a0 \u00a0 \u00a0 type: &#039;dist-custom-elements&#039;,\n+\u00a0 \u00a0 \u00a0 customElementsExportBehavior: &#039;bundle&#039;\n+\u00a0 \u00a0 },\n\u00a0\u00a0\u00a0\u00a0\/\/ ...\n\u00a0\u00a0],\n\u00a0\u00a0\/\/ ...\n};<\/code><\/pre>\n<p>There are a lot more changes in Stencil 3.0 that folks should be aware of, and we\u2019ve created a full migration guide for folks to reference while they update their component setups. The <a href=\"https:\/\/stenciljs.com\/docs\/upgrading-to-stencil-3\">migration guide can be found here<\/a>.<\/p>\n<h2>Team Updates<\/h2>\n<p>Part of the planning process for this major release has also been rebuilding the Stencil team and understanding the intricacies of the Stencil compiler. With this newer version of the team, we\u2019ve spent a lot of time understanding how the compiler works, and sharing the knowledge of the internals amongst the team. This way, the team can move forward making changes with confidence and the knowledge of how Stencil works is not limited to a single person. This has let us have a deeper understanding of the entire compiler and be prepared for new people to join the team.<\/p>\n<h2>What\u2019s Next<\/h2>\n<p>With this beta, we\u2019re signaling to the community that we\u2019re ready for you all to begin testing this release and to file bug reports. We do understand that given the time frame and holiday season, not everyone will be able to test against their production setup, so we expect beta to last a bit longer than usual. If you happen to run into any issues, or have any questions regarding the update, please let us know and <a href=\"https:\/\/github.com\/ionic-team\/stencil\/issues\">open an issue on GitHub<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hey folks, hope you are all doing well around this time of the year. We\u2019ve been hard at work over the past few months working on the next major version of Stencil, the web component compiler. Today, I\u2019m thrilled to share that Stencil 3.0 Beta is available for testing in your component libraries. Let\u2019s dive [&hellip;]<\/p>\n","protected":false},"author":93,"featured_media":4594,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"21","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":[223],"tags":[140,98,76],"class_list":["post-4590","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stencil","tag-design-systems","tag-release","tag-stencil"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Announcing Stencil v3.0 Beta - Ionic Blog<\/title>\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-0-beta\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing Stencil v3.0 Beta\" \/>\n<meta property=\"og:description\" content=\"Hey folks, hope you are all doing well around this time of the year. We\u2019ve been hard at work over the past few months working on the next major version of Stencil, the web component compiler. Today, I\u2019m thrilled to share that Stencil 3.0 Beta is available for testing in your component libraries. Let\u2019s dive [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-19T20:12:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-20T13:42:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/12\/stencil3-0-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=\"Ryan Waskiewicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ryanwaskiewicz\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ryan Waskiewicz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 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-0-beta#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta\"},\"author\":{\"name\":\"Ryan Waskiewicz\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/00967ea3dbf3828003488b3d7b1ec374\"},\"headline\":\"Announcing Stencil v3.0 Beta\",\"datePublished\":\"2022-12-19T20:12:18+00:00\",\"dateModified\":\"2022-12-20T13:42:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta\"},\"wordCount\":497,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/12\/stencil3-0-feature-image.png\",\"keywords\":[\"Design Systems\",\"release\",\"stencil\"],\"articleSection\":[\"Stencil\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta\",\"name\":\"Announcing Stencil v3.0 Beta - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/12\/stencil3-0-feature-image.png\",\"datePublished\":\"2022-12-19T20:12:18+00:00\",\"dateModified\":\"2022-12-20T13:42:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/12\/stencil3-0-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/12\/stencil3-0-feature-image.png\",\"width\":2240,\"height\":1120},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Stencil v3.0 Beta\"}]},{\"@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\/00967ea3dbf3828003488b3d7b1ec374\",\"name\":\"Ryan Waskiewicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1c82f5db7bcb8641dfd73310e8452b45afd792fb812eac47dde5293fa3769dae?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1c82f5db7bcb8641dfd73310e8452b45afd792fb812eac47dde5293fa3769dae?s=96&d=mm&r=g\",\"caption\":\"Ryan Waskiewicz\"},\"sameAs\":[\"http:\/\/ducktyped.dev\",\"https:\/\/x.com\/ryanwaskiewicz\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/rwaskiewicz\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing Stencil v3.0 Beta - Ionic Blog","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-0-beta","og_locale":"en_US","og_type":"article","og_title":"Announcing Stencil v3.0 Beta","og_description":"Hey folks, hope you are all doing well around this time of the year. We\u2019ve been hard at work over the past few months working on the next major version of Stencil, the web component compiler. Today, I\u2019m thrilled to share that Stencil 3.0 Beta is available for testing in your component libraries. Let\u2019s dive [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta","og_site_name":"Ionic Blog","article_published_time":"2022-12-19T20:12:18+00:00","article_modified_time":"2022-12-20T13:42:59+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/12\/stencil3-0-feature-image.png","type":"image\/png"}],"author":"Ryan Waskiewicz","twitter_card":"summary_large_image","twitter_creator":"@ryanwaskiewicz","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Ryan Waskiewicz","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta"},"author":{"name":"Ryan Waskiewicz","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/00967ea3dbf3828003488b3d7b1ec374"},"headline":"Announcing Stencil v3.0 Beta","datePublished":"2022-12-19T20:12:18+00:00","dateModified":"2022-12-20T13:42:59+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta"},"wordCount":497,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/12\/stencil3-0-feature-image.png","keywords":["Design Systems","release","stencil"],"articleSection":["Stencil"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta","url":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta","name":"Announcing Stencil v3.0 Beta - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/12\/stencil3-0-feature-image.png","datePublished":"2022-12-19T20:12:18+00:00","dateModified":"2022-12-20T13:42:59+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/12\/stencil3-0-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/12\/stencil3-0-feature-image.png","width":2240,"height":1120},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-0-beta#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Stencil v3.0 Beta"}]},{"@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\/00967ea3dbf3828003488b3d7b1ec374","name":"Ryan Waskiewicz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1c82f5db7bcb8641dfd73310e8452b45afd792fb812eac47dde5293fa3769dae?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1c82f5db7bcb8641dfd73310e8452b45afd792fb812eac47dde5293fa3769dae?s=96&d=mm&r=g","caption":"Ryan Waskiewicz"},"sameAs":["http:\/\/ducktyped.dev","https:\/\/x.com\/ryanwaskiewicz"],"url":"https:\/\/ionic.io\/blog\/author\/rwaskiewicz"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/12\/stencil3-0-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4590","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\/93"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=4590"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4590\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/4594"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=4590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=4590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=4590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}