{"id":5280,"date":"2023-05-23T15:55:38","date_gmt":"2023-05-23T19:55:38","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=5280"},"modified":"2023-05-23T15:55:40","modified_gmt":"2023-05-23T19:55:40","slug":"announcing-stencil-v3-3-0","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0","title":{"rendered":"Announcing Stencil v3.3.0"},"content":{"rendered":"\n<p><br>Hey folks! We\u2019re excited to announce that Stencil v3.3.0 is available! This release contains support for TypeScript 5, a new way to run Puppeteer tests, and Node 20 support. Let\u2019s take a look!<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">TypeScript 5 Support<\/h2>\n\n\n\n<p>Stencil v3.3.0 bumps up the version of TypeScript we support and bundle into the Stencil compiler from 4.9.5 to 5.0.4. TypeScript 5 was <a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-5-0\/\">a big milestone for the TypeScript team<\/a>, bringing some incremental updates as well as a major refactor of how TypeScript is built and bundled. Although upgrading Stencil to support TypeScript 5 was a bit involved, the changes we made to support it should make it easy for us to stay on track going forward and meet our pledge to stay within one minor version of the latest version of TypeScript.<\/p>\n\n\n\n<p>For more on TypeScript and Stencil see <a href=\"https:\/\/stenciljs.com\/docs\/support-policy#typescript-support\">our support policy<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Puppeteer v20 Support<\/h2>\n\n\n\n<p>Stencil v3.3.0 adds support for Puppeteer v20, the latest release from the Puppeteer team. The latest versions of Puppeteer have introduced support for <a href=\"https:\/\/developer.chrome.com\/articles\/new-headless\/\">Chrome\u2019s new \u201cheadless mode\u201d<\/a>. At this time, using Chrome\u2019s new headless mode is an \u201copt-in\u201d feature for Stencil users. Upgrading to Stencil v3.3.0 won\u2019t force projects to use the new headless mode until they\u2019re ready to do so.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">import { Config } from &#039;@stencil\/core&#039;;\n\nexport const config: Config = {\n  testing: {\n    \/**\n     * The following values are accepted:\n     * - &quot;new&quot; - enables the &quot;new&quot; headless mode, starting with Chrome 112\n     * - `true` - enables the &quot;old&quot; headless mode, prior to Chrome 112\n     * - `false` - enables the &quot;headful&quot; mode\n     * \n     * Stencil will default to `true` (the old headless mode) if no value is provided.\n     *\/\n    browserHeadless: &#039;new&#039;,\n    \/\/ ...\n  },\n  \/\/ ...\n};<\/code><\/pre>\n\n\n\n<p>For projects using the <code>--headless<\/code> flag, the value of \u201cnew\u201d can now be provided to opt-in as well:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-shell\">npx stencil test --e2e --headless=new<\/code><\/pre>\n\n\n\n<p>For more information on browserHeadless\u2019 configuration, please see the <a href=\"https:\/\/stenciljs.com\/docs\/testing-config\">documentation for testing configuration<\/a>. For more information on the \u2013headless flag, please see the <a href=\"https:\/\/stenciljs.com\/docs\/cli#stencil-test\">Stencil CLI documentation<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Node 20 Support<\/h2>\n\n\n\n<p>Stencil v3.3.0 expands the range of support Node versions to include version 20. We don\u2019t anticipate that upgrading to node 20 will cause any issues for users, so you should be able to start using node 20 without issues.<\/p>\n\n\n\n<p>For more information about Stencil\u2019s node support <a href=\"https:\/\/stenciljs.com\/docs\/support-policy#javascript-runtime\">check out our support policy<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">And More!<\/h2>\n\n\n\n<p>This release of Stencil includes additional bug fixes and internal upgrades. For a full list of changes, please take a look at <a href=\"https:\/\/github.com\/ionic-team\/stencil\/releases\/tag\/v3.3.0\">the changelog for this release.<\/a>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hey folks! We\u2019re excited to announce that Stencil v3.3.0 is available! This release contains support for TypeScript 5, a new way to run Puppeteer tests, and Node 20 support. Let\u2019s take a look!<\/p>\n","protected":false},"author":106,"featured_media":5281,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"21","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"563842","discourse_permalink":"http:\/\/forum.ionicframework.com\/t\/announcing-stencil-v3-3-0\/233689","wpdc_publishing_response":"success","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,121],"tags":[76],"class_list":["post-5280","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-engineering","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.3.0 - 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-3-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.3.0\" \/>\n<meta property=\"og:description\" content=\"Hey folks! We\u2019re excited to announce that Stencil v3.3.0 is available! This release contains support for TypeScript 5, a new way to run Puppeteer tests, and Node 20 support. Let\u2019s take a look!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-23T19:55:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-23T19:55:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil33-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-3-0#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0\"},\"author\":{\"name\":\"Stencil Team\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/82fcd9aa19604364f3c30a946de8e646\"},\"headline\":\"Announcing Stencil v3.3.0\",\"datePublished\":\"2023-05-23T19:55:38+00:00\",\"dateModified\":\"2023-05-23T19:55:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0\"},\"wordCount\":330,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil33-feature-image.png\",\"keywords\":[\"stencil\"],\"articleSection\":[\"All\",\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0\",\"name\":\"Announcing Stencil v3.3.0 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil33-feature-image.png\",\"datePublished\":\"2023-05-23T19:55:38+00:00\",\"dateModified\":\"2023-05-23T19:55:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil33-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil33-feature-image.png\",\"width\":2240,\"height\":1120,\"caption\":\"Announcing Stencil 3.3 release\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Stencil v3.3.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.3.0 - 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-3-0","og_locale":"en_US","og_type":"article","og_title":"Announcing Stencil v3.3.0","og_description":"Hey folks! We\u2019re excited to announce that Stencil v3.3.0 is available! This release contains support for TypeScript 5, a new way to run Puppeteer tests, and Node 20 support. Let\u2019s take a look!","og_url":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0","og_site_name":"Ionic Blog","article_published_time":"2023-05-23T19:55:38+00:00","article_modified_time":"2023-05-23T19:55:40+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil33-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-3-0#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0"},"author":{"name":"Stencil Team","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/82fcd9aa19604364f3c30a946de8e646"},"headline":"Announcing Stencil v3.3.0","datePublished":"2023-05-23T19:55:38+00:00","dateModified":"2023-05-23T19:55:40+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0"},"wordCount":330,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil33-feature-image.png","keywords":["stencil"],"articleSection":["All","Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0","url":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0","name":"Announcing Stencil v3.3.0 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil33-feature-image.png","datePublished":"2023-05-23T19:55:38+00:00","dateModified":"2023-05-23T19:55:40+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil33-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil33-feature-image.png","width":2240,"height":1120,"caption":"Announcing Stencil 3.3 release"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v3-3-0#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Stencil v3.3.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\/05\/stencil33-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5280","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=5280"}],"version-history":[{"count":2,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5280\/revisions"}],"predecessor-version":[{"id":5285,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5280\/revisions\/5285"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/5281"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=5280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=5280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=5280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}