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(npm) Update NPM (major) #113

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

chore(npm) Update NPM (major) #113

wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link
Contributor

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

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@lwc/compiler (source) ^6.3.4 -> ^8.0.0 age adoption passing confidence
@lwc/engine-dom (source) ^6.3.4 -> ^8.0.0 age adoption passing confidence
@lwc/engine-server (source) ^6.3.4 -> ^8.0.0 age adoption passing confidence
@lwc/jest-preset (source) ^16.0.0 -> ^18.0.0 age adoption passing confidence
@lwc/jest-shared (source) ^16.0.0 -> ^18.0.0 age adoption passing confidence
@lwc/jest-transformer (source) ^16.0.0 -> ^18.0.0 age adoption passing confidence
@lwc/synthetic-shadow (source) ^6.3.4 -> ^8.0.0 age adoption passing confidence
lwc (source) ^6.3.4 -> ^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

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.

  • 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 added the chore label Jun 19, 2024
@renovate renovate bot changed the title chore(npm) Update NPM to v7 (major) chore(npm) Update NPM (major) Sep 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
chore
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
0 participants