Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR contains the following updates:
^6.3.4
->^8.0.0
^6.3.4
->^8.0.0
^6.3.4
->^8.0.0
^16.0.0
->^18.0.0
^16.0.0
->^18.0.0
^16.0.0
->^18.0.0
^6.3.4
->^8.0.0
^6.3.4
->^8.0.0
Release Notes
salesforce/lwc (@lwc/compiler)
v8.0.0
Compare Source
What's Changed
The breaking changes in this release only impact TypeScript users; there is no change in runtime behavior, as compared to v7.2.6.
This release contains changes to the type signature of the
@wire
decorator, to enable better type checking of the provided values. Given@wire(adapter, config) prop
, the types ofconfig
andprop
now must match the types used byadapter
. The type checking also successfully resolves reactive props (string starting with$
) to the type used by the component.In the example below, the component passes type checking with LWC v7, but has three new type errors in LWC v8.
Limitations
const
assertions on your config object. Without aconst
assertion, the type system cannot distinguish between a reactive prop (e.g."$authorName"
) and a regular string (e.g."Codey the Bear"
). As a consequence, all values of typestring
are not type checked.{id: number}
, providing the object{id: "123"}
will pass validation, but{id: "123"} as const
will not.Full Changelog: salesforce/lwc@v7.2.6...v8.0.0
v7.2.6
Compare Source
What's Changed
Full Changelog: salesforce/lwc@v7.2.5...v7.2.6
v7.2.5
Compare Source
What's Changed
Full Changelog: salesforce/lwc@v7.2.4...v7.2.5
v7.2.4
Compare Source
What's Changed
Full Changelog: salesforce/lwc@v7.2.3...v7.2.4
v7.2.3
Compare Source
What's Changed
Full Changelog: salesforce/lwc@v7.2.2...v7.2.3
v7.2.2
Compare Source
What's Changed
release:version
script by @nolanlawson in https://github.com/salesforce/lwc/pull/4475Full Changelog: salesforce/lwc@v7.2.1...v7.2.2
v7.2.1
Compare Source
What's Changed
ssr-compiler
fixture tests withengine-server
by @nolanlawson in https://github.com/salesforce/lwc/pull/4406getStylesheetsContent
by @nolanlawson in https://github.com/salesforce/lwc/pull/4404@lwc/shared
dep by @nolanlawson in https://github.com/salesforce/lwc/pull/4415New Contributors
Full Changelog: salesforce/lwc@v7.2.0...v7.2.1
v7.2.0
Compare Source
What's Changed
Full Changelog: salesforce/lwc@v7.1.2...v7.2.0
v7.1.4
Compare Source
What's Changed
Full Changelog: salesforce/lwc@v7.1.3...v7.1.4
v7.1.3
Compare Source
What's Changed
Full Changelog: salesforce/lwc@v7.1.2...v7.1.3
v7.1.2
Compare Source
What's Changed
Full Changelog: salesforce/lwc@v7.1.1...v7.1.2
v7.1.1
Compare Source
What's Changed
Full Changelog: salesforce/lwc@v7.1.0...v7.1.1
v7.1.0
Compare Source
What's Changed
insertBefore
with 1 arg by @manoharsiriki in https://github.com/salesforce/lwc/pull/4359data-lwc-host-mutated
during SSR by @nolanlawson in https://github.com/salesforce/lwc/pull/4358New Contributors
Full Changelog: salesforce/lwc@v7.0.5...v7.1.0
v7.0.5
Compare Source
What's Changed
parseHTMLUnsafe
polyfill by @nolanlawson in https://github.com/salesforce/lwc/pull/4367Full Changelog: salesforce/lwc@v7.0.4...v7.0.5
v7.0.4
Compare Source
What's Changed
xlink:href
by @nolanlawson in https://github.com/salesforce/lwc/pull/4346yarn lint --fix
by @nolanlawson in https://github.com/salesforce/lwc/pull/4355.only
support by @nolanlawson in https://github.com/salesforce/lwc/pull/4356Document.parseHTMLUnsafe
by @nolanlawson in https://github.com/salesforce/lwc/pull/4357.eslintrc
on commit by @nolanlawson in https://github.com/salesforce/lwc/pull/4361<a>
/<area>
href
by @nolanlawson in https://github.com/salesforce/lwc/pull/4354Full Changelog: salesforce/lwc@v7.0.3...v7.0.4
v7.0.3
Compare Source
What's Changed
Full Changelog: salesforce/lwc@v7.0.2...v7.0.3
v7.0.2
Compare Source
What's Changed
id
/IDref attributes by @nolanlawson in https://github.com/salesforce/lwc/pull/4330New Contributors
Full Changelog: salesforce/lwc@v7.0.1...v7.0.2
v7.0.1
Compare Source
What's Changed
content.childNodes
by @ekashida in https://github.com/salesforce/lwc/pull/4311spellcheck
by @nolanlawson in https://github.com/salesforce/lwc/pull/4317Full Changelog: salesforce/lwc@v7.0.0...v7.0.1
v7.0.0
Compare Source
LWC v7.0.0 contains breaking changes. Please read carefully below if you are upgrading from v6.
If you are upgrading from v5, please upgrade to v6 first.
New features
class
es in templatesthis.style
for a more ergonomic way to change component styles at runtimethis.hostElement
for an alternative tothis.template.host
that works in light DOMSummary of breaking changes
this.style
propertythis.hostElement
property@lwc/template-compiler
API changesBreaking changes
Class object binding
Class object binding is a new feature that makes it more ergonomic to render
class
attributes in your LWC components. As part of this feature,class
rendering has changed for some uncommon use cases.If you are using a dynamic
class
in your template:Then the rendering of this
class
may change if you were previously definingmyClass
as something other than a string,null
, orundefined
.For example, consider if
myClass
is a boolean:Old behavior:
This renders:
New behavior:
This change applies to booleans, numbers, functions, arrays, and objects. Below is a table summarizing the change:
true
class="true"
class=""
1
class="1"
class=""
() => {}
class="() => {}"
class=""
["a", "b"]
class="a,b"
class="a b"
{ a: true }
class="[object Object]"
class="a"
In short:
This may break a component if it is using a CSS selector like these:
Or if it is using
querySelector
or other traversal techniques that rely on the class name:In rare cases, this can also cause breakages across component boundaries. For example, if you have a global stylesheet relying on light DOM or synthetic shadow DOM, and thus the ability to pierce inside of components you don't own, then the above CSS selectors would break in that case as well.
To resolve any breakages:
class="false"
orclass="1"
), convert it to a string usingString(value)
.This change may also require updating snapshots, e.g. in Jest tests.
New
this.style
propertyComponents can now access their
CSSStyleDeclaration
usingthis.style
:This is a breaking change if the component uses
this.style
as an expando:In the above case, the component author may assume that
this.style
is initiallyundefined
, and then set it to a new value ("foo"
). After this change, the above code will not work as expected, becausethis.style
is initially truthy rather thanundefined
.To resolve this, set a class property on the component, initialized to
undefined
, rather than using an expando:+ style = undefined renderedCallback() { if (!this.style) { this.style = "foo" } }
You may also rename your
this.style
expando to something else (e.g.this.customStyle
).New
this.hostElement
propertyComponents can now access
this.hostElement
as a convenient alternative tothis.template.host
:Additionally, this works in light DOM components to access the "host" element (similar to the
:host
CSS pseudo-class in light DOM scoped styles). This provides an ergonomic way to access the rootHTMLElement
object in either light DOM or shadow DOM components.Similar to the new
this.style
property, this is a breaking change if you are usingthis.hostElement
already as an expando. Refer to thethis.style
release notes for a resolution.Improved TypeScript types
The TypeScript definitions for the
lwc
package are greatly improved, to more closely match the ground truth of the actual APIs forLightningElement
,createElement
, etc. at runtime. You may need to adjust your TypeScript code or version to adapt to the new typings.Summary
"ESNext"
.ContextValue
has been renamed toWireContextValue
.ContextConsumer
has been renamed toWireContextConsumer
.Contextualizer
has been renamed toWireContextProvider
.StylesheetFactory
has been renamed toStylesheet
.StylesheetFactories
has been renamed toStylesheets
.StringKeyedRecord
has been removed. Instead, use the typeRecord<string, any>
.ShadowSupportMode
has been removed. Instead, use the string values"any"
,"reset"
, or"native"
.WireAdapter
is now a generic type with a default type parameter.WireAdapterConstructor
is now a generic type with a default type parameter.this.template
is now possibly null, reflecting the state for components using light DOM.this.template.host
in aLightningElement
is now typed asHTMLElement
, rather than the broaderElement
.createElement
has been updated to reflect the fact that the element created contains the@api
-decorated props from the component definition.LightningHTMLElement
, has been introduced to provide an easy way of accessing the return type."lwc"
now provides module definitions for HTML/CSS imports. The module definitions are also available by directly importing a new package,@lwc/types
.Common breakages and fixes
import myComponent from './my-component.html'
)@lwc/types
orlwc/types
somewhere in your project. I.e.:import '@​lwc/types'
.StringKeyedRecord
Record<string, any>
or similar.ContextValue
WireContextValue
, but it's really justRecord<string, any>
, so you could use a more precise type instead.ContextConsumer
WireContextConsumer
Contextualizer
WireContextProvider
createElement
HTMLElement & MyComponentApiDecoratedProps
. You have to define your own interface to get the@api
decorated props, because TypeScript can't detect that. (You can use your component class, but that includes all component andLightningElement
props, not just component@api
decorated props, so it's not ideal.)this.template
is possibly undefined?.
) or non-null assertion (!.
)ClassMemberDecoratorContext
(or other decorator type)@lwc/template-compiler
API changesDue to a refactoring of the
@lwc/compiler
and@lwc/template-compiler
packages, the@lwc/template-compiler
compile
function now requires the component's file name (i.e. thenamespace
andname
options) when compiling the template.To resolve the breaking change, add the new options. For example:
What's Changed
this.hostElement
behind API version 62 by @nolanlawson in https://github.com/salesforce/lwc/pull/4308New Contributors
Full Changelog: salesforce/lwc@v6.7.2...v7.0.0
v6.7.2
Compare Source
What's Changed
v6.7.2
by @rax-it in https://github.com/salesforce/lwc/pull/4297v6.7.2
by @rax-it in https://github.com/salesforce/lwc/pull/4300Full Changelog: salesforce/lwc@v6.7.1...v6.7.2
v6.7.1
Compare Source
What's Changed
Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Enabled.
♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.
👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.
This PR was generated by Mend Renovate. View the repository job log.