Comments (6)
After thinking more about this, I think @jbenallen has a good point here. Today, it is impossible for libraries to trigger rehydration, because they don't have a way to produce reactive/tracked objects. More thoughts:
-
you can get a reactive proxy of any object via
track()
decorator today (libraries can attempt to do something funky to produce trackable objects (yes, it is a hack, but it is possible). -
today, we don't prevent the extraction of a writable version of a read only attribute. they can hack it by assigning the field decorated with
@api
into a field decorated with@track
, and they effectively escape the restriction. We should close this loop asap, and throw an error in this case. -
You should be able to get a read only proxy of any object (no exceptions) to protect yourself when sending data like that to non-trusted parties.
-
I think a method called
readonly()
makes sense to be part of the library, to match the expectation of@track
, and in the future, we can makereadonly
a decorator, and@track
to also function as a regular method to have some symmetry there.
from lwc.
We reviewed this as a team and the readonly
decorator as described in this issue can be achieved with a combination of signals + Object.freeze
.
Closing this issue out.
from lwc.
Is the goal here to allow a library (LDS in this case) to emit an object to a wired property that is internally reactive such that one of its properties may be mutated later by the library without replacing the whole thing from the wire and that that internal mutation will be observed by the engine?
from lwc.
My only question about readonly
as a decorator, is what happens in this scenario?
import { Element, readonly } from 'engine';
export default class MyComponent extends Element {
@readonly
foo = { bar: true }
connectedCallback() {
this.foo.bar = false; // Error or allowed?
}
}
It seems we should throw, because that object is readonly, but you also own that object so this restriction may be strange
from lwc.
@davidturissini good question. It will throw because it is a readonly. Also, this.foo = {something: 'new'}
should also throw, the decorator makes impossible to change that field after initialization.
from lwc.
keep in this open until we add the decorator and the docs.
from lwc.
Related Issues (20)
- Inconsistent attribute ordering between static/dynamic nodes
- Lightning-datatable has wrong type of parameters passed to custom type columns through typeAttributes that passsed not with "fieldName" HOT 3
- KOA Server Not Able to Add Routes HOT 2
- Lightning datatable admits only 100 records (or something lower than 150, idk) HOT 2
- Add support for dynamic `<slot>` names HOT 3
- Version mismatch warning should warn for patch version differences as well HOT 2
- `@api` decorated property is not reactive with private class properties HOT 1
- Be homogenous to traverse the parent DOM between shadow dom and `lwc:render-mode="light"` mode HOT 6
- [error] LWR Diagnostic Error: 404: Could not find module entry with specifier "lightning/sldsMediaObject"
- Inherited template not found when using TypeScript and Babel HOT 3
- Rendering component with API version 60 lazily inside an element without `lwc:dom=manual` does not invoke `connectedCallback` or render in dev mode
- Synthetic lifecycle observable changes when slotted into native lifecycle
- Allow ElementInternals/FACE without native custom element lifecycle
- Allow components to opt in to native custom element lifecycle
- SSR hydration mismatch errors in `class` attributes HOT 1
- A synthetic shadow component can observe that its slot container is native shadow
- Hydration validation incorrectly fails for statically optimized content HOT 3
- Expand static content optimization HOT 1
- List re-rendering causes DOM state to be lost HOT 1
- Type definition for `createElement` is inaccurate
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lwc.