Skip to content

chore(deps): update dependency @lwc/compiler to v7 j:kit-282 #3625

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wants to merge 1 commit into from
Closed

chore(deps): update dependency @lwc/compiler to v7 j:kit-282 #3625

wants to merge 1 commit into from

Conversation

@renovate
Copy link
Contributor

@renovate renovate bot commented Feb 19, 2024 •
edited
Loading

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@lwc/compiler (source) 5.3.0 -> 7.2.2 age adoption passing confidence

Release Notes

salesforce/lwc (@​lwc/compiler)

v7.2.2

Compare Source

What's Changed

Full Changelog: salesforce/lwc@v7.2.1...v7.2.2

v7.2.1

Compare Source

What's Changed

New 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.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

New Contributors

Full Changelog: salesforce/lwc@v7.0.5...v7.1.0

v7.0.5

Compare Source

What's Changed

Full Changelog: salesforce/lwc@v7.0.4...v7.0.5

v7.0.4

Compare Source

What's Changed

Full 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

New Contributors

Full Changelog: salesforce/lwc@v7.0.1...v7.0.2

v7.0.1

Compare Source

What's Changed

Full 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.

[!NOTE]
LWC v7 corresponds to Salesforce release Winter '25 (API version 62).

New features

Summary of breaking changes

Breaking changes

Class object binding

[!NOTE]
On the Salesforce Lightning platform, this change only applies to components with an API version of 62 or above.

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:

<template>
  <div class={myClass}></div>
</template>

Then the rendering of this class may change if you were previously defining myClass as something other than a string, null, or undefined.

For example, consider if myClass is a boolean:

export default class extends LightningElement {
  myClass = false
}

Old behavior:

This renders:

<div class="false"></div>

New behavior:

<div class=""></div>

This change applies to booleans, numbers, functions, arrays, and objects. Below is a table summarizing the change:

Type Example Rendered (old) Rendered (new)
Boolean true class="true" class=""
Number 1 class="1" class=""
Function () => {} class="() => {}" class=""
Array ["a", "b"] class="a,b" class="a b"
Object { a: true } class="[object Object]" class="a"

In short:

  • Booleans, numbers, and functions are no longer directly stringified, but are stripped instead.
  • Arrays and objects are no longer stringified, but instead follow class object binding semantics.

This may break a component if it is using a CSS selector like these:

.false {}
.true {}
[class="1"] {}

Or if it is using querySelector or other traversal techniques that rely on the class name:

this.template.querySelector('.false')
this.template.querySelector('.true')
this.template.querySelector('[class="1"]')

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:

This change may also require updating snapshots, e.g. in Jest tests.

New this.style property

[!NOTE]
On the Salesforce Lightning platform, this change only applies to components with an API version of 62 or above.

Components can now access their CSSStyleDeclaration using this.style:

renderedCallback() {
  this.style.color = 'red'
}

This is a breaking change if the component uses this.style as an expando:

renderedCallback() {
  if (!this.style) {
    this.style = "foo"
  }
}

In the above case, the component author may assume that this.style is initially undefined, and then set it to a new value ("foo"). After this change, the above code will not work as expected, because this.style is initially truthy rather than undefined.

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 property

[!NOTE]
On the Salesforce Lightning platform, this change only applies to components with an API version of 62 or above.

Components can now access this.hostElement as a convenient alternative to this.template.host:

renderedCallback() {
  console.log(this.template.host) // <x-component>
  console.log(this.hostElement)   // <x-component>
}

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 root HTMLElement object in either light DOM or shadow DOM components.

Similar to the new this.style property, this is a breaking change if you are using this.hostElement already as an expando. Refer to the this.style release notes for a resolution.

Improved TypeScript types

[!NOTE]
This change only applies to component authors using TypeScript, which is not yet fully supported.

The TypeScript definitions for the lwc package are greatly improved, to more closely match the ground truth of the actual APIs for LightningElement, createElement, etc. at runtime. You may need to adjust your TypeScript code or version to adapt to the new typings.

Summary
  • The minimum supported version of TypeScript is v5.4.5.
  • The only supported compiler target is "ESNext".
  • ContextValue has been renamed to WireContextValue.
  • ContextConsumer has been renamed to WireContextConsumer.
  • Contextualizer has been renamed to WireContextProvider.
  • StylesheetFactory has been renamed to Stylesheet.
  • StylesheetFactories has been renamed to Stylesheets.
  • StringKeyedRecord has been removed. Instead, use the type Record<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.
  • All decorators can now be used with the new decorator implementation introduced in TypeScript v5 as well as the old, experimental implementation.
  • this.template is now possibly null, reflecting the state for components using light DOM.
  • this.template.host in a LightningElement is now typed as HTMLElement, rather than the broader Element.
  • The return type of createElement has been updated to reflect the fact that the element created contains the @api-decorated props from the component definition.
    • A new helper type, LightningHTMLElement, has been introduced to provide an easy way of accessing the return type. 
      const cmp: LightningHTMLElement<MyComponent> = createElement('my-component', { is: MyComponent });
    • WARNING: Due to limitations of TypeScript, this new type incorrectly contains all props defined on the component, not just decorated props. Only decorated props are accessible at runtime.
  • Importing from "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
Breakage Fix
HTML imports (import myComponent from './my-component.html') Import @lwc/types or lwc/types somewhere in your project. I.e.: import '@&#8203;lwc/types'.
StringKeyedRecord Replace with Record<string, any> or similar.
ContextValue Renamed to WireContextValue, but it's really just Record<string, any>, so you could use a more precise type instead.
ContextConsumer Renamed to WireContextConsumer
Contextualizer Renamed to WireContextProvider
createElement Use type assertion to cast to 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 and LightningElement props, not just component @api decorated props, so it's not ideal.)
this.template is possibly undefined Use optional chaining (?.) or non-null assertion (!.)
Cannot find name ClassMemberDecoratorContext (or other decorator type) Use TypeScript v5.4.5
Other type errors? Use TypeScript v5.4.5

@​lwc/template-compiler API changes

[!NOTE]
This change only affects direct consumers of the @lwc/template-compiler npm package, who are using the compile API.

Due 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. the namespace and name options) when compiling the template.

To resolve the breaking change, add the new options. For example:

import { compile } from '@&#8203;lwc/template-compiler'

compile({
  ...previousOptions,
  // Assuming the component is `<x-foo>`:
  namespace: 'x',
  name: 'foo',
})

What's Changed

New Contributors

Full Changelog: salesforce/lwc@v6.7.2...v7.0.0

v6.7.2

Compare Source

What's Changed

Full Changelog: salesforce/lwc@v6.7.1...v6.7.2

v6.7.1

Compare Source

What's Changed

Full Changelog: salesforce/lwc@v6.7.0...v6.7.1

v6.7.0

Compare Source

What's Changed

Full Changelog: salesforce/lwc@v6.6.7...v6.7.0

v6.6.7

Compare Source

What's Changed

Full Changelog: salesforce/lwc@v6.6.6...v6.6.7

v6.6.6

Compare Source

What's Changed

Full Changelog: salesforce/lwc@v6.6.5...v6.6.6

v6.6.5

Compare Source

What's Changed

Full Changelog: salesforce/lwc@v6.6.4...v6.6.5

v6.6.4

Compare Source

What's Changed

New Contributors

Full Changelog: salesforce/lwc@v6.6.3...v6.6.4

v6.6.3

Compare Source

What's Changed

Full Changelog: salesforce/lwc@v6.6.2...v6.6.3

v6.6.2

Compare Source

What's Changed

Full Changelog: salesforce/lwc@v6.6.1...v6.6.2

v6.6.1

Compare Source

What's Changed

Full Changelog: salesforce/lwc@v6.6.0...v6.6.1

v6.6.0

Compare Source

What's Changed

Full Changelog: salesforce/lwc@v6.5.3...v6.6.0

v6.5.3

Compare Source

What's Changed

Full Changelog: salesforce/lwc@v6.5.2...v6.5.3

v6.5.2

Compare Source

What's Changed

Full Changelog: salesforce/lwc@v6.5.1...v6.5.2

v6.5.1

Compare Source

What's Changed

Configuration

📅 Schedule: Branch creation - "before 4am on Monday" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

@renovate renovate bot requested a review from a team as a code owner February 19, 2024 03:40
@renovate renovate bot requested a review from a team February 19, 2024 03:40
@renovate renovate bot added the dependencies Pull requests that update a dependency file label Feb 19, 2024
@github-actions
Copy link

github-actions bot commented Feb 19, 2024 •
edited
Loading

Pull Request Report

PR Title

✅ Title follows the conventional commit spec.

Bundle Size

File Old (kb) New (kb) Change (%)
case-assist 202.8 202.8 0
commerce 285.5 285.5 0
search 367.4 367.4 0
insight 347.8 347.8 0
product-listing 262.3 262.3 0
product-recommendation 171.9 171.9 0
recommendation 215.8 215.8 0
ssr 360.3 360.3 0

SSR Progress

Use case SSR (#) CSR (#) Progress (%)
search 39 44 89
recommendation 0 4 0
product-recommendation 0 10 0
product-listing 0 13 0
case-assist 0 6 0
insight 0 27 0
commerce 0 7 0
Detailed logs search : buildInteractiveResult
search : buildInteractiveInstantResult
search : buildInteractiveRecentResult
search : buildInteractiveCitation
search : buildGeneratedAnswer
recommendation : missing SSR support
product-recommendation : missing SSR support
product-listing : missing SSR support
case-assist : missing SSR support
insight : missing SSR support
commerce : missing SSR support

@erocheleau
Copy link
Collaborator

erocheleau commented Feb 19, 2024

After investigation it would be best to stay on 5.x.x for LWC, as this seems to be the current version of the LWC engine running on Salesforce in Spring '24 (the release that they just had).

6.x.x corresponds to their Summer release, if possible I would like to wait more time before changing the main version of the engine if that makes sense.

erocheleau
erocheleau requested changes Feb 19, 2024
View reviewed changes
Copy link
Collaborator

@erocheleau erocheleau left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stay on 5.x.x for @lwc/compiler.

@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 34c82b3 to 64e50ab Compare February 21, 2024 00:40
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch 3 times, most recently from 8fb1cfc to b457154 Compare March 1, 2024 23:30
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch 4 times, most recently from c6eda1b to b46866b Compare March 12, 2024 14:55
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from b46866b to 1660570 Compare March 15, 2024 21:30
@louis-bompart
Copy link
Collaborator

louis-bompart commented Mar 18, 2024

Stay on 5.x.x for @lwc/compiler.

@erocheleau can you open a PR to "lock" lwc/compiler to v5 then?, see renovate.json for examples.

@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 1660570 to ec6e150 Compare March 19, 2024 16:42
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch 3 times, most recently from 2e1d72f to d0459b5 Compare March 30, 2024 00:30
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from d0459b5 to 9d2de46 Compare April 9, 2024 14:50
@louis-bompart
Copy link
Collaborator

louis-bompart commented Apr 10, 2024

@erocheleau, salesforce/sfdx-lwc-jest#356 thsi got merged, and is included in #3765.
:shipit: ?

@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 9d2de46 to 6d6329f Compare April 10, 2024 21:45
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 67af92b to 5121d46 Compare July 9, 2024 00:29
@renovate renovate bot temporarily deployed to PR Artifacts July 9, 2024 00:29 Inactive
@renovate renovate bot temporarily deployed to PR Artifacts July 9, 2024 00:29 Inactive
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 5121d46 to 2520c64 Compare July 10, 2024 18:51
@renovate renovate bot temporarily deployed to PR Artifacts July 10, 2024 18:51 Inactive
@renovate renovate bot temporarily deployed to PR Artifacts July 10, 2024 18:51 Inactive
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 2520c64 to 2070951 Compare July 17, 2024 15:21
@renovate renovate bot temporarily deployed to PR Artifacts July 17, 2024 15:21 Inactive
@renovate renovate bot temporarily deployed to PR Artifacts July 17, 2024 15:21 Inactive
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 2070951 to 1a3fa90 Compare July 17, 2024 19:22
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 1a3fa90 to 5e86dba Compare July 24, 2024 18:57
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 5e86dba to ce96977 Compare July 29, 2024 15:35
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from ce96977 to d1778ab Compare August 2, 2024 01:04
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from d1778ab to 08a1245 Compare August 6, 2024 16:30
@renovate renovate bot temporarily deployed to PR Artifacts August 6, 2024 16:45 Inactive
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 08a1245 to 5a117e2 Compare August 13, 2024 23:30
@renovate renovate bot temporarily deployed to PR Artifacts August 13, 2024 23:44 Inactive
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 5a117e2 to edeee48 Compare August 22, 2024 00:35
@renovate renovate bot temporarily deployed to PR Artifacts August 22, 2024 00:50 Inactive
@renovate
Copy link
Contributor Author

renovate bot commented Aug 27, 2024

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future 7.x releases. But if you manually upgrade to 7.x then Renovate will re-enable minor and patch updates automatically.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.

@renovate renovate bot deleted the renovate/major-lwc-compiler branch August 27, 2024 14:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@erocheleau erocheleau erocheleau requested changes

@SimonMilord SimonMilord Awaiting requested review from SimonMilord SimonMilord is a code owner automatically assigned from coveo/salesforce-integration

@mmitiche mmitiche Awaiting requested review from mmitiche mmitiche is a code owner automatically assigned from coveo/salesforce-integration

@olamothe olamothe Awaiting requested review from olamothe

@y-lakhdar y-lakhdar Awaiting requested review from y-lakhdar

@fbeaudoincoveo fbeaudoincoveo Awaiting requested review from fbeaudoincoveo

Assignees

@erocheleau erocheleau

Labels

dependencies Pull requests that update a dependency file

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@erocheleau @louis-bompart