diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md index 04a8fd69888f..9d1b4a9e8636 100644 --- a/BREAKING_CHANGES.md +++ b/BREAKING_CHANGES.md @@ -1,24 +1,288 @@ -# Stencil Two +# Breaking Changes + +This is a comprehensive list of the breaking changes introduced in the major version releases of Stencil. + +## Versions + +- [Stencil 3.x](#stencil-v300) +- [Stencil 2.x](#stencil-two) +- [Stencil 1.x](#stencil-one) + +## Stencil v3.0.0 + +* [General](#general) + * [New Configuration Defaults](#new-configuration-defaults) + * [SourceMaps](#sourcemaps) + * [`dist-custom-elements` Type Declarations](#dist-custom-elements-type-declarations) + * [Deprecated `assetsDir` Removed from `@Component()` decorator](#deprecated-assetsdir-removed-from-component-decorator) + * [Drop Node 12 Support](#drop-node-12-support) + * [Strongly Typed Inputs](#strongly-typed-inputs) + * [Narrowed Typing for `autocapitalize` Attribute](#narrowed-typing-for-autocapitalize-attribute) + * [Custom Types for Props and Events are now Exported from `components.d.ts`](#custom-types-for-props-and-events-are-now-exported-from-componentsdts) +* [Output Targets](#output-targets) + * [`dist-custom-elements` Output Target](#dist-custom-elements-output-target) + * [Add `customElementsExportBehavior` to Control Export Behavior](#add-customelementsexportbehavior-to-control-export-behavior) + * [Move `autoDefineCustomElements` Configuration](#move-autodefinecustomelements-configuration) + * [`dist-custom-elements-bundle` Output Target](#dist-custom-elements-bundle-output-target) +* [Legacy Angular Output Target](#legacy-angular-output-target) +* [Stencil APIs](#stencil-apis) + * [Flag Parsing, `parseFlags()`](#flag-parsing-parseflags) + * [Destroy Callback, `addDestroy()`, `removeDestroy()`](#destroy-callback-adddestroy-removedestroy) +* [End-to-End Testing](#end-to-end-testing) + * [Puppeteer v10 Required](#puppeteer-v10-required) + +### General +#### New Configuration Defaults +Starting with Stencil v3.0.0, the default configuration values have changed for a few properties. + +##### SourceMaps +Sourcemaps are generated by default for all builds. +Previously, sourcemaps had to be explicitly enabled by setting the `sourceMap` flag to `true`. +To restore the old behavior, set the `sourceMap` flag to `false` in your project's `stencil.config.ts`: +```ts +// stencil.config.ts +import { Config } from '@stencil/core'; + +export const config: Config = { + sourceMap: false, + // ... +}; +``` +##### `dist-custom-elements` Type Declarations +Type declaration files (`.d.ts` files) are now generated by default for the `dist-custom-elements` output target. +If your project is using `dist-custom-elements` and you do not wish to generate type declarations, the old behavior can be achieved by setting `generateTypeDeclarations` to `false` in the `dist-custom-elements` output target in your project's `stencil.config.ts`: +```ts +// stencil.config.ts +import { Config } from '@stencil/core'; + +export const config: Config = { + outputTargets: [ + { + type: 'dist-custom-elements', + generateTypeDeclarations: false, + // ... + }, + // ... + ], + // ... +}; +``` + +#### Deprecated `assetsDir` Removed from `@Component()` decorator +The `assetsDir` field was [deprecated in Stencil v2.0.0](#componentassetsdir), but some backwards compatibility was retained with a warning message. +It has been fully removed in Stencil v3.0.0 in favor of `assetsDirs`. +To migrate from existing usages of `assetsDir`, update the property name and wrap its value in an array: +```diff +@Component({ + tag: 'my-component', +- assetsDir: 'assets', ++ assetsDirs: ['assets'], +}) +``` +For more information on the `assetsDirs` field, please see the [Stencil Documentation on `assetsDirs`](https://stenciljs.com/docs/assets#assetsdirs) + +#### Drop Node 12 Support +Stencil no longer supports Node 12. +Please upgrade local development machines, continuous integration pipelines, etc. to use Node v14 or higher. + +#### Strongly Typed Inputs +`onInput` and `onInputCapture` events have had their interface's updated to accept an argument of `InputEvent` over `Event`: +```diff +- onInput?: (event: Event) => void; ++ onInput?: (event: InputEvent) => void; +- onInputCapture?: (event: Event) => void; ++ onInputCapture?: (event: InputEvent) => void; +``` +`event` arguments to either callback should be updated to take this narrower typing into account + +#### Narrowed Typing for `autocapitalize` Attribute +The [`autocaptialize` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize) has been narrowed from type `any` to type `string`. +This change brings Stencil into closer alignment with TypeScript's typings for the attribute. +No explicit changes are needed, unless a project was passing non-strings to the attribute. + +### Custom Types for Props and Events are now Exported from `components.d.ts` + +Custom types for props and custom events are now re-exported from a project's `components.d.ts` file. + +For the following Stencil component +```tsx +import { Component, Event, EventEmitter, Prop, h } from '@stencil/core'; + +export type NameType = string; +export type Todo = Event; + +@Component({ + tag: 'my-component', + styleUrl: 'my-component.css', + shadow: true, +}) +export class MyComponent { + @Prop() first: NameType; + + @Event() todoCompleted: EventEmitter + + render() { + return
Hello, World! I'm {this.first}
; + } +} +``` + + +The following data will now be included automatically in `components.d.ts`: +```diff + import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; + import { NameType, Todo } from "./components/my-component/my-component"; ++ export { NameType, Todo } from "./components/my-component/my-component"; + export namespace Components { + interface MyComponent { + "first": NameType; + } + } + export interface MyComponentCustomEvent extends CustomEvent { + detail: T; + target: HTMLMyComponentElement; + } + declare global { + interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement { + } +``` +This allows those types to be easily accessed from the root of the type distribution: +```ts +import { NameType, Todo } from '@my-lib/types'; +``` + +When using `dist-custom-elements`, these types can now be accessed from the custom element output: +```ts +import { NameType, Todo } from '@my-custom-elements-output'; +``` + +This _may_ clash with any manually created types in existing Stencil projects. +Projects that manually create type definitions from `components.d.ts` will either need to: +- remove the manually created type (if the types generated in `components.d.ts` suffice) +- update their type creation logic to account for potential naming collisions with the newly generated types + +### Output Targets + +#### `dist-custom-elements` Output Target +##### Add `customElementsExportBehavior` to Control Export Behavior +`customElementsExportBehavior` is a new configuration option for the output target. +It allows users to configure the export behavior of components that are compiled using the output target. +By default, this output target will behave exactly as it did in Stencil v2.0.0. +For more information on how to configure it, please see the [documentation for the field](https://stenciljs.com/docs/custom-elements#customElementsExportBehavior). + +##### Move `autoDefineCustomElements` Configuration +`autoDefineCustomElements` was a configuration option to define a component and its children automatically with the CustomElementRegistry when the component's module is imported. +This behavior has been merged into the [`customElementsExportBehavior` configuration field](#add-customelementsexportbehavior-to-control-export-behavior). +To continue to use this behavior, replace `autoDefineCustomElements` in your project's `stencil.config.ts` with the following: +```diff +// stencil.config.ts +import { Config } from '@stencil/core'; + +export const config: Config = { + outputTargets: [ + { + type: 'dist-custom-elements', +- autoDefineCustomElements: true, ++ customElementsExportBehavior: 'auto-define-custom-elements', + // ... + }, + // ... + ], + // ... +}; +``` + +#### `dist-custom-elements-bundle` Output Target +The `dist-custom-elements-bundle` has been removed starting with Stencil v3.0.0, following the [RFC process](https://github.com/ionic-team/stencil/issues/3136). +Users of this output target should migrate to the `dist-custom-elements` output target. + +By default, `dist-custom-elements` does not automatically define all a project's component's with the `CustomElementsRegistry`. +This allows for better treeshaking and smaller bundle sizes. + +For teams that need to migrate quickly to `dist-custom-elements`, the following configuration should be close to a drop-in replacement for `dist-custom-elements-bundle`: +```diff +// stencil.config.ts +import { Config } from '@stencil/core'; + +export const config: Config = { + outputTargets: [ +- { +- type: 'dist-custom-elements-bundle', +- // additional configuration +- }, ++ { ++ type: 'dist-custom-elements', ++ customElementsExportBehavior: 'bundle' ++ }, + // ... + ], + // ... +}; +``` +However, it does not necessarily improve treeshaking/bundle size. +For more information on configuring this output target, please see the [`dist-custom-elements` documentation](https://stenciljs.com/docs/custom-elements) + +### Legacy Angular Output Target +Prior to the creation of the [`@stencil/angular-output-target`](https://github.com/ionic-team/stencil-ds-output-targets/blob/main/packages/angular-output-target/README.md), the `'angular'` output target was the original means of connecting a Stencil component to an Angular application. +This output target has been removed in favor of `@stencil/angular-output-target`. +Please migrate to `@stencil/angular-output-target` and remove the `'angular'` output target from your `stencil.config.ts` file. +Instructions for doing so can be found [on the Stencil site](https://stenciljs.com/docs/angular#setup) + +### Stencil APIs +Stencil exposes Node APIs for programmatically invoking the compiler. +Most users do not use these APIs directly. +Unless your project calls these APIs, no action is required for this section. + +#### Flag Parsing, `parseFlags()` +Stencil exposes an API for parsing flags that it receives from the command line. +Previously, it accepted an optional `CompilerSystem` argument that was never properly used. +The flag has been removed as of Stencil v3.0.0. +To migrate, remove the argument from any calls to `parseFlags` imported from the Stencil CLI package. +```diff +import { parseFlags } from '@stencil/core/cli'; +- parseFlags(flags, compilerSystem); ++ parseFlags(flags); +``` + +#### Destroy Callback, `addDestroy()`, `removeDestroy()` +The Stencil `CompilerSystem` interface has a pair of methods, `addDestroy` and `removeDestroy` that were previously misspelled. +If your codebase explicitly calls these methods, they need to be updated. +Replace all instances of `addDestory` with `addDestroy` and all instances of `removeDestory` with `removeDestroy` +The functionality of these methods remains the same. + +### End-to-End Testing +#### Puppeteer v10 Required +Versions of Puppeteer prior to Puppeteer version 10 are no longer supported. +In newer versions of Puppeteer, the library provides its own types, making `@types/puppeteer` no longer necessary. +Ensure that Puppeteer v10 is installed, and that its typings are not: +```bash +$ npm install puppeteer@10 +$ npm uninstall @types/puppeteer +``` + +***** + +## Stencil Two In keeping with [Semver](https://semver.org/), Stencil `2.0.0` was released due to changes in the API (mainly from some updates to the config API). But even though this is a new major version, there are few breaking changes. -## BREAKING CHANGES +### BREAKING CHANGES While migrating from Stencil One, any changes will be flagged and described by the compiler during development. For the most part, most of the changes are removal of deprecated APIs that have been printing out warning logs for quite some time now -### Opt-in for IE11, Edge 16-18 and Safari 10 Builds +#### Opt-in for IE11, Edge 16-18 and Safari 10 Builds - **config:** update config extra defaults to not build IE11, Edge 16-18 and Safari 10 by default ([363bf59](https://github.com/ionic-team/stencil/commit/363bf59fc9212a771a766c21909263d6c4ccdf18)) A change in Stencil 2 is that the IE11, Edge 16-18 and Safari 10 builds will not be enabled by default. However, the ability to opt-in is still available, and can be enabled by setting each `extras` config flag to `true`. An advantage of this is less runtime within your builds. See the [config.extras docs](https://stenciljs.com/docs/config-extras) for more info. -### Opt-in for ES5 and SystemJS Builds +#### Opt-in for ES5 and SystemJS Builds - **config:** do not build es5 by default ([fa67d97](https://github.com/ionic-team/stencil/commit/fa67d97d043d12e0a3af0d868fa1746eb9e3badf)) Just like having to opt-in for IE11, the same goes for opting-in for ES5 and SystemJS builds. For a production build in Stencil 1, it would build both ES2017/ESM files, and ES5/SystemJS files. As of Stencil 2, both dev and prod builds do not create ES5/SystemJS builds. An advantage of this is having faster production builds by not having to also downlevel to es5. See the [buildEs5](https://stenciljs.com/docs/config#buildes5) for more info. -### Use `disconnectedCallback()` instead of `componentDidUnload()` +#### Use `disconnectedCallback()` instead of `componentDidUnload()` - **componentDidUnload:** use disconnectedCallback instead of componentDidUnload ([4e45862](https://github.com/ionic-team/stencil/commit/4e45862f73609599a7195fcf5c93d9fb39492154)) @@ -26,13 +290,13 @@ When Stencil is used within other frameworks, DOM elements may be reused, making _Note that the runtime still works for any collections that have been built with componentDidUnload(). However, updates to Stencil 2 will require it's changed to disconnectedCallback()._ -### Default to `async` task queue +#### Default to `async` task queue - **taskQueue:** set "async" taskQueue as default ([f3bb121](https://github.com/ionic-team/stencil/commit/f3bb121b8130e0c4e0c344eca7078ce572ad34a5)) Update taskQueue default to "async". Stencil 1 default was "congestionAsync". See [config.taskQueue](https://stenciljs.com/docs/config#taskqueue) for more info. -### Restore Stencil 1 defaults +#### Restore Stencil 1 defaults ```ts export const config: Config = { @@ -46,7 +310,7 @@ export const config: Config = { }; ``` -### dist package.json +#### dist package.json To ensure the extensions are built for the future and work with today's bundlers, we've found it best to use `.cjs.js` extension for CommonJS files, and `.js` for ESM files, with the idea that cjs files will no longer be needed some day, and the ESM files are the standard. _(We were using `.mjs` files, but not all of today's tooling and bundlers work well with that extension)._ @@ -75,7 +339,7 @@ Additionally the `dist/loader` output directory has renamed its extensions too, See the [Output Folder Structure Defaults](https://github.com/ionic-team/stencil/blob/main/src/compiler/output-targets/readme.md) for more info. -### NodeJS Update +#### NodeJS Update - **node:** minimum of Node 12.10.0, recommend 14.5.0 or greater ([55331be](https://github.com/ionic-team/stencil/commit/55331be42f311a6e2a4e4f8ac13c01d28dc31613)) @@ -86,18 +350,18 @@ With the major release, now's a good time to update the minimum and recommended ***** -# Stencil One +## Stencil One Most of the updates for the `1.0.0` release involve removing custom APIs, and continuing to leverage web-standards in order to generate future-proof components that scale. Additionally, these updates allow Stencil to further improve its tooling, with a focus on great developer experience for teams maintaining codebases across large organizations. -## BREAKING CHANGES +### BREAKING CHANGES A common issue with JSX is each separate project's use of global JSX types. Many of the required changes are in order to avoid global types, which often cause issues for apps which import from numerous packages. The other change is having each component import its renderer, such as JSX's `h()` function. -### Import `{ h }` is required +#### Import `{ h }` is required In order to render JSX in Stencil apps, the `h()` function must be imported from `@stencil/core`: @@ -124,7 +388,7 @@ const jsx = h('ion-button', null, null); ``` -### index.html's ` ``` -### Collection's package.json +#### Collection's package.json Stencil One has changed the internal folder structure of the `dist` folder, and some entry-points are located in different location: @@ -160,7 +424,7 @@ Make sure you update the `package.json` in the root of your project, like this: } ``` -### Dependencies +#### Dependencies Some packages, specially the ones from the Stencil and Ionic core teams used some private APIs of Stencil, that's why if your collection depends of `@ionic/core`, `@stencil/router` or `@stencil/state-tunnel`, you might need to update your `package.json` to point these dependencies to the `"one"` tag. @@ -175,19 +439,19 @@ Some packages, specially the ones from the Stencil and Ionic core teams used som "@stencil/postcss": "^1.0.0", ``` -### `window.NAMESPACE` is no longer a thing +#### `window.NAMESPACE` is no longer a thing Stencil will not read/write to the browser's global `window` anymore. So things like `window.App` or `window.Ionic` are gone, and should be provided by the user's code if need be. -### `@Prop() mode` is no longer reserved prop +#### `@Prop() mode` is no longer reserved prop `@Prop() mode` used to be the way to define and read the current mode of a component. This API was removed since it was very local to the use case of Ionic. Instead, the `mode` can be read by using the `getMode()` method from `@stencil/core`. -### Removed: Global `JSX` +#### Removed: Global `JSX` For all the same reasons for now importing `h`, in order to prevent type collision in the future, we have moved to local scoped JSX namespaces. Unfortunately, this means `JSX` is no longer global and it needs to be imported from `@stencil/core`. Also, note that while the below example has the render function with a return type of `JSX.Element`, we recommend to not have a return type at all: @@ -202,7 +466,7 @@ render(): JSX.Element { - `HTMLAttributes` might not be available as a global - `JSX` -### Removed: Global `HTMLAttributes` +#### Removed: Global `HTMLAttributes` `HTMLAttributes` used to be exposed as a global interface, just like the `JSX` namespace, but that caused type conflicts when mixing different versions of stencil in the same project. @@ -215,12 +479,12 @@ JSXBase.HTMLAttributes ``` -### Removed: Global `HTMLStencilElement` +#### Removed: Global `HTMLStencilElement` The global type for `HTMLStencilElement` has been removed. Instead, it's better is to use the exact type of your component, such as `HTMLIonButtonElement`. The HTML types are automatically generated within the `components.d.ts` file. -### Removed: Global `StencilIntrinsicElement` +#### Removed: Global `StencilIntrinsicElement` The global type `StencilIntrinsicElement` has been removed. It can be replaced by importing the `JSX` namespace from `@stencil/core`: @@ -230,7 +494,7 @@ import { JSX } from '@stencil/core'; export type StencilIntrinsicElement = JSX.IntrinsicElement; ``` -### Removed: @Listen('event.KEY’) +#### Removed: @Listen('event.KEY’) It's no longer possible to use the `event.KEY` syntax in the `@Listen` decorator in order to only listen for specific key strokes. Instead, the browser already implements easy-to-use APIs: @@ -255,19 +519,19 @@ onEnter(ev: KeyboardEvent) { } ``` -### Removed: @Listen('event’, { enabled }) +#### Removed: @Listen('event’, { enabled }) It's not possible to programmatically enable/disable an event listener defined using the `@Listen()` decorator. Please use the DOM API directly (`addEventListener` / `removeEventListener`). -### Removed: @Listen('event’, { eventName }) +#### Removed: @Listen('event’, { eventName }) The event name should be provided excl -### Removed: @Component({ host }) +#### Removed: @Component({ host }) This feature was deprecated a long time ago, and it is being removed definitely from Stencil. -### `mockDocument()` and `mockWindow()` has been moved +#### `mockDocument()` and `mockWindow()` has been moved The `mockDocument()` and `mockWindow()` functions previously in `@stencil/core/mock-dom` has been moved to: `@stencil/core/testing`: @@ -277,9 +541,9 @@ The `mockDocument()` and `mockWindow()` functions previously in `@stencil/core/m + import { mockDocument, mockWindow } from '@stencil/core/testing'; ``` -## DEPRECATIONS +### DEPRECATIONS -### outputTarget "docs" +#### outputTarget "docs" The output target "docs" has been renamed to "docs-readme": @@ -296,7 +560,7 @@ export const config = { ``` -### `hostData()` +#### `hostData()` hostData() usage has been replaced by the new `Host` exposed in `@stencil/core`. The `` JSX element represents the "host" element of the component, and simplifies being able to add attributes and CSS classes to the host element: @@ -325,7 +589,7 @@ hostData() usage has been replaced by the new `Host` exposed in `@stencil/core`. } ``` -### All void methods return promise (right now method(): void is valid) +#### All void methods return promise (right now method(): void is valid) Until Stencil 1.0, public component methods decorated with `@Method()` could only return `Promise<...>` or `void`. Now, only the `async` methods are supported, meaning that retuning `void` is not valid. @@ -341,7 +605,7 @@ Now, only the `async` methods are supported, meaning that retuning `void` is not This change was motivated by the fact that Stencil's 1.0 runtime will be able to proxy all component method calls! That means, developers will be able to call component methods safely without using componentOnReady()! even if the actual component has not been downloaded yet. -#### Given an example component like: +##### Given an example component like: ```ts @Component(...) @@ -371,7 +635,7 @@ await element.doSomething(); ``` -### `@Listen('TARGET:event’)` +#### `@Listen('TARGET:event’)` The first argument of the `@Listen()` decorator is now only the event name, such as `click` or `resize`. Previously you could set the target of the listener by prefixing the event name with something like `window:resize`. Instead, the target is now set using the options. @@ -392,12 +656,12 @@ The first argument of the `@Listen()` decorator is now only the event name, such This change was motivated by the fact that `body:event` is a valid DOM event name. In addition, the new syntax allows for strong typing, since the `{target}` only accepts the following string values (`'window'`, `'document'`, `'body'`, `'parent'`). -### `@Prop({context})` +#### `@Prop({context})` Using the `@Prop` decorator with the `context` has been deprecated and their usage is highly unrecommended. Here's how update each case: -#### `'window'` +##### `'window'` Accessing `window` using `Prop({context: 'window'})` was previously required because of Server-side-rendering requirements, fortunately this is no longer needed, and developers can use global `window` directly. @@ -413,7 +677,7 @@ Accessing `window` using `Prop({context: 'window'})` was previously required bec } ``` -#### `'document'` +##### `'document'` Accessing `document` using `Prop({context: 'document'})` was previously required because of Server-side-rendering requirements, fortunately this is no longer needed, and developers can use global `document` directly. @@ -429,7 +693,7 @@ Accessing `document` using `Prop({context: 'document'})` was previously required } ``` -#### `'isServer'` +##### `'isServer'` In order to determine if the your component is being rendered in the browser or the server as part of some prerendering/ssr process, stencil exposes a compiler-time constant through the `Build` object, exposed in `@stencil/core`: @@ -450,12 +714,12 @@ In order to determine if the your component is being rendered in the browser or } ``` -### `@Prop(connect)` +#### `@Prop(connect)` It will not be recommended to use `@Prop(connect)` in order to lazily load components. Instead it's recommended to use ES Modules and/or dynamic imports to load code lazily. -### `@Component.assetsDir` +#### `@Component.assetsDir` ```diff @Component({ @@ -464,7 +728,7 @@ It will not be recommended to use `@Prop(connect)` in order to lazily load compo }) ``` -### OutputTarget local copy tasks +#### OutputTarget local copy tasks The root `copy` property in `stencil.config.ts` has been deprecated in favor of local copy tasks per output-target, ie. now the copy tasks are specific under the context of each output-target. @@ -532,19 +796,19 @@ export const config = { }; ``` -## New APIs +### New APIs -### setMode() and getMode() +#### setMode() and getMode() -### getAssetsPath(this, relativePath) +#### getAssetsPath(this, relativePath) -### `dist-module` output target +#### `dist-module` output target -## Testing +### Testing -### `newSpecPage()` Spec Testing Utility +#### `newSpecPage()` Spec Testing Utility A new testing utility has been created to make it easier to unit test components. Its API is similar to `newE2EPage()` for consistency, but internally `newSpecPage()` does not use Puppeteer, but rather runs on top of a pure Node environment. Additionally, user code should not have to be written with legacy CommonJS, and code can safely use global browser variables such as `window` and `document`. In the example below, a mock `CmpA` component was created in the test, but it could have also imported numerous existing components and registered them into the test using the `components` config. The returned `page` variable also has a `root` property, which is convenience property to get the top-level component found in the test. @@ -581,7 +845,7 @@ it('override default values from attribute', async () => { ``` -### Serialized `` +#### Serialized `` Traditionally, when a component is serialized to a string its shadow-root is ignored and not include within the HTML output. However, when building web components and using Shadow DOM, the nodes generated within the components are just as important as any other nodes to be tested. For this reason, both spec and e2e tests will serialize the shadow-root content into a mocked `` element. Note that this serialized shadow-root is simply for testing and comparing values, and is not used at browser runtime. @@ -625,7 +889,7 @@ it('test shadow root innerHTML', async () => { ``` -### Jest Presets +#### Jest Presets When running Jest directly, previously most of Jest had to be manually configured within each app's `package.json`, and required the `transform` config to be manually wired up to Stencil's `jest.preprocessor.js`. With the latest changes, most of the Jest config can be replaced with just `"preset": "@stencil/core/testing"`. You can still override the preset defaults, but it's best to start with the defaults first. Also note, the Jest config can be avoided entirely by using the `stencil test --spec` command rather than calling Jest directly. @@ -645,28 +909,3 @@ When running Jest directly, previously most of Jest had to be manually configure - ] } ``` - -# Stencil v3.0.0 [Unreleased] - -Stencil v3.0.0 is in development at this time and has not been released. The list below is not final and is subject to -change. Further details on each of these items will be included prior to the release. - -- [fix(testing): puppeteer v10 support #2934](https://github.com/ionic-team/stencil/pull/2934) -- [feat(cli): update flag defaults for V3 #3502](https://github.com/ionic-team/stencil/pull/3502) - -## DEPRECATIONS - -### backwards compatibility for `@Component.assetsDir` EOL - -The `assetsDir` component prop was [previously deprecated](#componentassetsdir) -but some backwards compatibility was retained with a warning message. In -Stencil V3 this backwards compatibility is being removed and Stencil users will -have to remove all usage of `assetsDir` in favor of `assetsDirs`. - - -```diff -@Component({ -- assetsDir: 'resource', -+ assetsDirs: ['resource'] -}) -```