Skip to content
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

chore(deps): update dependency @lwc/compiler to v8 j:kit-282 - autoclosed #4387

Closed
wants to merge 1 commit into from
Closed

chore(deps): update dependency @lwc/compiler to v8 j:kit-282 - autoclosed #4387

wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Sep 9, 2024 •
edited
Loading

This PR contains the following updates:

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

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.

[!IMPORTANT]
TypeScript's experimentalDecorators is no longer supported; you must either specify "experimentalDecorators": false or remove the option from your TSConfig.

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 of config and prop now must match the types used by adapter. 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.

type Config = { id: number }
type Book = { title: string, author: string }
declare const getBook: WireAdapterConstructor<Config, Book>

class Component extends LightningElement {
  bookId = 123
  authorName = 'Codey the Bear'

  // Valid: simple case
  @&#8203;wire(getBook, { id: 123 }) valid?: Book
  // Valid: `bookId` on the component is a number
  @&#8203;wire(getBook, {id: '$bookId'} as const) validReactiveProp?: Book
  // Invalid: `Author` is not `Book`
  @&#8203;wire(getBook, { id: 123 }) invalidPropType?: Author
  // Invalid: `true` is not a number
  @&#8203;wire(getBook, { id: true }) invalidConfigType: Book
  // Invalid: `authorName` prop on the component is not a number
  @&#8203;wire(getBook, {id: '$authorName'} as const) invalidReactiveProp?: Book
Limitations
  • Due to the way decorators are implemented in TypeScript, the type of the prop cannot be inferred from the wire adapter; you must provide an explicit type.
  • To get the most accurate validation of your types, use const assertions on your config object. Without a const 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 type string are not type checked.
    • For example, for a config of type {id: number}, providing the object {id: "123"} will pass validation, but {id: "123"} as const will not.
  • Due to the above constraints, the reported type errors can appear complex and hard to understand. They typically boil down to validating that your config object and prop type both match the type expected by the wire adapter.

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

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

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

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 is behind base branch, 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 review from a team as code owners September 9, 2024 00:26
@renovate renovate bot added the dependencies Pull requests that update a dependency file label Sep 9, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Sep 9, 2024 •
edited
Loading

Pull Request Report

PR Title

✅ Title follows the conventional commit spec.

Live demo links

Bundle Size

File Old (kb) New (kb) Change (%)
case-assist 241 241 0
commerce 339.1 339.1 0
search 409.4 409.4 0
insight 392.7 392.7 0
product-recommendation 211.5 211.5 0
recommendation 252.5 252.5 0
ssr 402 402 0
ssr-commerce 351.3 351.3 0

SSR Progress

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

@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 8894c74 to 3278564 Compare September 9, 2024 15:15
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 3278564 to 844cdbe Compare September 9, 2024 21:00
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 844cdbe to dd5885c Compare September 10, 2024 14:04
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from dd5885c to a1bf04a Compare September 10, 2024 15:00
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from a1bf04a to e0d0d09 Compare September 10, 2024 15:48
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from e0d0d09 to 41da3fd Compare September 10, 2024 16:15
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 41da3fd to 0e5b860 Compare September 10, 2024 20:06
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 0e5b860 to 7a55ee6 Compare September 11, 2024 19:46
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 7a55ee6 to 03e81e5 Compare September 11, 2024 20:36
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 03e81e5 to 4e6b074 Compare September 16, 2024 15:19
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch 2 times, most recently from 211ca42 to 9f3bbab Compare September 16, 2024 18:19
@renovate renovate bot force-pushed the renovate/major-lwc-compiler branch from 9f3bbab to c6e9f8b Compare September 16, 2024 18:26
@renovate renovate bot changed the title chore(deps): update dependency @lwc/compiler to v8 j:kit-282 chore(deps): update dependency @lwc/compiler to v8 j:kit-282 - autoclosed Sep 16, 2024
@renovate renovate bot closed this Sep 16, 2024
@renovate renovate bot deleted the renovate/major-lwc-compiler branch September 16, 2024 18:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

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

@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

@y-lakhdar y-lakhdar Awaiting requested review from y-lakhdar y-lakhdar is a code owner automatically assigned from coveo/search

@louis-bompart louis-bompart Awaiting requested review from louis-bompart louis-bompart is a code owner automatically assigned from coveo/search

@alexprudhomme alexprudhomme Awaiting requested review from alexprudhomme alexprudhomme is a code owner automatically assigned from coveo/search

Assignees
No one assigned
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.
0 participants