salesforce / lwc Goto Github PK
View Code? Open in Web Editor NEW⚡️ LWC - A Blazing Fast, Enterprise-Grade Web Components Foundation
Home Page: https://lwc.dev
License: Other
⚡️ LWC - A Blazing Fast, Enterprise-Grade Web Components Foundation
Home Page: https://lwc.dev
License: Other
While developing a standalone app or in a browser other than Chrome, we don't pull the devTools module for Proxys, which makes debugging very hard.
Moreover we should provide some scape hatch or tool for non-chrome browsers so we can also unwrap a proxy.
Some ideas:
unwrap
in DEV mode.console.logProxys
that will do the banch-check for ProxysIn an unpredictable manner, the integration tests on Circle CI start failing.
ERROR: connect ECONNREFUSED 127.0.0.1:4445
internetexplorer.11_103.windows10
Error: connect ECONNREFUSED 127.0.0.1:4445
In https://github.com/salesforce/lwc/blob/master/packages/lwc-engine/types/engine.d.ts#L75 we define wire
like this:
export function wire(adapterId: string, adapterConfig: Object): void;
This is not correct. It needs to be defined as a property and method decorator.
As a comparison, see how track
is defined:
export const track: PropertyDecorator;
We have identified issues related to usage of globals like removeEventListener
, which was supposed to be imported from the module that caches all those from Element.prototype
, but the import statement was never defined, and since removeEventListener
is in fact a global, the IDE doesn't complain, and everything works fine in most browsers except IE11. We better figure a way to prevent this from happening again.
See #74 and its final spec at https://github.com/salesforce/lwc/blob/master/docs/proposals/0103-wire-adapters.md for wire adapter interface definition. This needs to be implemented and all existing wire adapters updated.
Implement delegatesFocus
static prop so LWC input focus can skip the custom element container.
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.Engine = {})));
If define is available, global.Engine = {} will not be set up correctly and error in Lightning out usage.
Add setAttribute and removeAttribute to LightningElement prototype.
If you have a wire provider that doesn't depend on elements property change, you would still need to pass an object value as the @wire 'config'
An example would be a wire provider that uses the "wiredEventTarget" to provide contextual value
@wire(something, {})
someProp;
config should be optional so the usage would look something like
@wire(something)
someProp;
throws an exception
@wire(, ) expects 2 parameters.
at error (/tools/sfdc-lwc-compiler/3ED6E45CD46D1152BF2A37381054C956A73179B6/src/lwc/sfdc-lwc-compiler.js:80440:15)
at /tools/sfdc-lwc-compiler/3ED6E45CD46D1152BF2A37381054C956A73179B6/src/lwc/sfdc-lwc-compiler.js:98231:17
After removing the yarn.lock
(662347d), we start running into issues with unexpected packages update (#30). We originally deleted the lock file because we were not able to run tests on our internal CI.
I have recreated a new branch with a handcrafted version of the yarn.lock
https://github.com/salesforce/lwc/tree/pmdartus/yarnlock. But before opening a PR, what is our strategy to make the internal CI passes while keeping the yarn.lock
in the monorepo.
Array.prototype.concat
doesn't work with Proxies in Safari. Webkit bug
While Apple takes care of fixing the issue, we will need to patch the concat
method for now.
const proxy = new Proxy([3, 4], {});
const res = [1, 2].concat(proxy);
console.log(res[0]);
console.log(res[1]);
console.log(res[2]);
console.log(res[3]);
1
2
3
4
1
2
Proxy {0: 3, 1: 4}
undefined
All Safari versions. Chrome and Firefox are not affected by this.
Today the babel-plugin-transform-lwc-class
throws when applying a decorator that is not imported to a class method.
export default class Test {
@api
// ^ Supported decorators (api, wire, track) should be imported from "engine"
test() {}
}
But the same restriction doesn't get applied to properties. The following code passes compilation but doesn't work as expected at runtime.
export default class Test {
@api test = false;
}
ROM and Event membrane have different unwrap mechanisms
@davidturissini @caridy and I discussed this, Caridy will link the PR to this issue
If data-id is defined, and we do this.getAttribute('data-id')
Engine won't resolve it correctly because of the following code:
getAttribute(attrName) {
// logging errors for experimental and special attributes
{
const vm = this[ViewModelReflection];
assert.vm(vm);
if (isString(attrName)) {
const propName = getPropNameFromAttrName(attrName);
// propName here is dataId which is wrong
original from
#44 (comment)
Whats the reasoning behind using undefined
for missing data and null
for missing error? Do we even need to include data and error keys at all in these cases?
When LWC templates are compiled, all Global HTML Attributes except for data-
and aria-
should be included in the props
map, not attrs
.
Compiler should also warn when a user defines a lowercased public prop name:
import { Element } from 'engine';
class MyElement extends Element {
// warning
@api get accesskey() { }
}
For security purposes, LWC components should not be able to pass any values as props unless they meet the following rules:
If any object is trying to be accessed that does not meet those criteria, the engine will throw.
In order to investigate performance issues related, we should provide add markers to track where we spend time in the different lifecycle hooks.
@caridy commented on Nov 16, 2016
connected, disconnected and updated should be the 3 phases that somehow (in dev-mode) we should report so that the Timeline can show them accordingly. The latest version of react provides similar capability.
@pmdartus on Nov 18, 2016
Couple of links about this subject:
@caridy commented on Apr 4, 2017
Question: how to do this with a service? If possible, we should try to do it in a service so we don't have to have all that in the engine itself. @p-dartus can you take care of identifying the important moments for the marks so we can validate the thesis that this might be doable via services?
@diervo commented on Apr 4, 2017
Lessons learned from instrumentation work in Aura, is that it will be hard to make everything trough a service.
IMO the best approach will be combine hooking points with a service, and go from there.
@pmdartus commented on Apr 7, 2017
I think it will be difficult to leverage Raptor services for the component profiling. In the current design, services hooks are triggered only after their associated life-cycle event. But in the case of the profiling marks, it requires a hook before and after the life-cycle event.
I think that marking the following methods would really improve the debugability and the performance profiling:
constructor
, connectedCallback
, disconnectedCallback
, renderedCallback
, attributeChangedCallback
, render
. Those marks give a general idea of when the different lifecycle events are triggered.rehydrate
method. This method is at the root of the children component creation call stack. This mark gives a better idea of the page structure, and what part of the component tree is currently getting created/rendered.Here are the generated marks when adding hooks to the methods in invoker.js
and the rehydrate
method in cmp.js
@pmdartus commented on Apr 11, 2017
@cpatino Any thoughts on this ?
@caridy commented on Apr 11, 2017
I'm ok with this, but let's make sure we brainstorm about how to add those marks. If they should be permanent, or if they should be in place only in dev mode, etc.
@caridy commented on Oct 10, 2017
@p-dartus can you work on the format proposal for this?
We want to make sure engine
is never under compat transform.
With the migration to github some links, some links in the repo are now broken. Here is list of all the files containing references to git.soma
:
$ ag soma.salesforce -l
CHANGELOG.md
docs/proposals/error-code-system-2-mimic-assembly-script.md
docs/proposals/structured-commits.md
README.md
package.json
CONTRIBUTING.md
packages/benchmark/README.md
packages/proxy-compat/src/__tests__/object-test.ts
packages/lwc-engine/dist/umd/es5/engine.js
packages/lwc-engine/dist/umd/es2017/engine_debug.js
packages/lwc-engine/dist/commonjs/es5/engine.js
packages/lwc-engine/dist/umd/es5/engine_debug.js
packages/lwc-engine/dist/umd/es2017/engine.js
packages/lwc-engine/dist/modules/es2017/engine.js
packages/lwc-engine/dist/commonjs/es2017/engine.js
packages/lwc-engine/src/framework/patch.ts
packages/lwc-integration/src/shared/test-case.js
packages/lwc-template-compiler/src/__tests__/fixtures/regression/slot-name-with-dash/actual.html
lerna.json
This can lead to odd issues.
If you have
export default class NavItem extends Element {
@selected;
_selected = false;
@api
get selected() {
return this._selected;
}
@api
set selected(newValue) {
this._selected = newValue;
this.classList.add('something')
}
There is an invisible constructor, and it yields the error message:
[Assert Violation: Failed to construct [object:vm NavItem (0)]: The result must not have attributes. Adding or tampering with classname in constructor is not allowed in a web component, use connectedCallback() instead.]
Compiler error
There isn't an error, and unexpected behavior results.
0.18.0
Remove compiler error when defining getter/setter for global HTML attribute.
Since the merge of the snabdom refactor (#47), the engine test became extremely verbose. It produces more than 10k lines of lines of stack traces. All those logs is a real block for running the engine tests in watch mode
One of the big offenders is that the engine checks if the same tag name is used by multiple components: registerComponent
Today, the engine uses several map, reducer and forEach calls at evaluation time. We should reduce the evaluation penalty by making these lazy.
When updating a property that is being iterated, if the array that is passed in is out of sync with the element, based on its previous rendering cycle, the patchVnode, and update$2 methods do not try to reconcile the actual state of the dom with the vnode. It just compares the last vnode to the current (which is the same, and hense, no update)
I think this is bug.
Check both boxes, then click clear button.
https://playground.sfdc.es/projects/BJ0IY7ytM
element to be updated (unchecked)
element is not updated, "Uncessary update message is shown"
all?
0.17.17
LDS, and other libraries that produce objects might want to produce values that can be used as properties. Additionally, they want to tap into the internal mechanism of the reactive engine to produce reactive objects that can trigger rehydration.
Initially, we want to try this model with LDS, and for what, we we exposing a high-privilege (not-documented) api to LDS can import it.
After the big internal refactor (#120), we moved away from Uglify since harmony branch is no longer maintained. Instead we use the minify project.
However, with the latests version of Babel, there still some bugs in some of the internal transformers:
babel/minify#803
Before 214 we need to fix those to optimize compression.
Engine services currently have these callbacks:
export interface ServiceDef {
wiring?: ServiceCallback;
connected?: ServiceCallback;
disconnected?: ServiceCallback;
rendered?: ServiceCallback;
piercing?: MembranePiercingCallback;
}
This issue proposes an additional callback: updated
. This is fired once if one or more tracked properties are updated.
Wire service will leverage this. It will allow wire service to stop monkey patching the component instance with setters to intercept updates to properties used in its DSL ($
-prefixed variables). It will reduce an additional microtask used to collect all property changes.
More details to come.
Error produced by ci/conventional-title validator does not disable pull request 'squash and merge' button. If title is invalid user should not be to merge pull request.
Configure git PR to disabled 'squash and merge' when title validation fails.
Applicable to lwc and best repos
During release we we generate changelog file by using lerna --conventional-commits flag. However, using this flag automatically disables release version prompt ( patch, minor, major ). Lerna uses conventional-commits-recommended-bump plugin to auto-select release version depending on the current set of commits (ex: fix and feat would trigger a 'minor' bump ).
Issue: since we are still under version 1.0.0 and need a more granular control of how versions get incremented we should not use lerna's --conventional-commits.
Solution: use conventional-changelog library instead. This library will be invoked after release script is completed and will automatically generate changelog file, commit it and push it. One caveat is that changelog file will be pushed after release tag is published, therefore commit history will list new tag entry followed by changelog update.
Create json-xml converter to be used to move lightning.json properties to [component name].js-meta.xml for all internal components
When doing the final merge, if the title is incorrect, it will still go through hence not allowing the change-log to pick the changes properly.
Example: ccbd126
Today, decorators are tightly coupled to engine reactivity. We should de-couple these so decorators can be moved into their own repo and have limited knowledge of engine internals.
Reference to whatwg/dom#447
This is something that we can do after we introduce the slot element, which depends on the pending refactor.
Update links in following proposals:
docs/proposals/error-code-system-2-mimic-assembly-script.md
docs/proposals/structured-commits.md
Related to #22
A follow up for #88, we currently use state.file.metadata
to keep track of compiler metadata. However, state.file
is internal api of babel and could change in the future. When it changes, our implementation would not work as expected.
We've also explored using plugin config option for compiler metadata bookkeeping but Babel has issues logged to cache config so that alternative isn't future safe either.
We need to have a proper future safe way for compiler metadata bookkeeping during plugin transform.
Iterate on locker-membrane
for reactivity.
Reactive State
objects (tuple of full reactive proxy, and read only)New membrane APIs (hooks for touching/updating/mutating)
subscribeToMutations
notifyMutation
API:
const membrane = new ReactiveMembrane(() => {});
const foo = {
bar: 'baz',
}
membrane.getReadOnly(foo); // get read only reactive membrane
membrane.getReactiveProxy(foo); // get read/write reactive membrane
During yarn release pre-commit hook is suppose to be invoked to validate the commit message. However, husky throws an error related to environment in which husky is running is incorrect:
"PREFIX" environment variable: currently set to "/usr/local"
Similar issue typicode/husky#205
NOTE: if this error interferes with your release, simply uncomment this line in packages.json:
"commitmsg": "validate-commit-msg"
There are few issues with ::slotted
that we should take into consideration, more details here: WICG/webcomponents#728
<template>
SVG tag with iteration fails to compile
<svg>
<template for:each={state.lines} for:item="n"></template>
</svg>
while
<template>
DIV with iteration does not fail to compile
<div>
<template for:each={state.lines} for:item="n"></template>
</div>
</template>
Shadow DOM polyfill for querySelector
We recently added dangerousObjectMutation
method on the engine for component authors to opt-out of read-only membrane in public props. This method is designed to be a temporary stop-gap, and should be removed ASAP.
-- x-demo.js
@track _filters;
@api
get filters() {
return this._filters;
}
@api
set filters(newValue) {
this._filters = newValue
}
-- x-parent.js
<template>
<x-demo filters={myState.theFilters}/>
</template>
If you modify myState.theFilters
via a slice call in a parent component, it will not cause rehydration of x-demo.html. However, if you remove @track, it will work as expected. Alternatively, you can rewrite the get/set which don't do anything useful, to just be @api filters
, and it will also work as expected. Something about @track (when the value being set is already a proxy) will interfere with rehydration.
hydration works when modifying a deeply nested property from the parent (declaring) component.
hydration doesn't work.
n/a
0.18.0
According to the WC spec, certain elements are not allowed to attached a shadow dom, and therefore, we should prevent people set forceTagName
to those, otherwise we will not be able to use shadowDOM when forceTagName is specified in the future.
This is the full list:
"article", "aside", "blockquote", "body", "div", "footer", "h1", "h2", "h3", "h4", "h5", "h6", "header", "main" "nav", "p", "section", or "span"
Full spec is here:
https://dom.spec.whatwg.org/#dom-element-attachshadow
When transforming a namespace import on engine
the compiler throws. For example:
import * as engine from 'engine';
export default class Test extends engine.Element {}
Error:
Cannot read property 'name' of undefined.
While we need to fix the uncaught exception, this bug opened another discussion concerning if we should or not allow namespace import on engine
. While the following code is valid javascript, it will be hard for the compiler to transform the decorator.
import * as engine from 'engine';
export default class Test extends engine.Element {
@engine.api props;
}
It appears that we want to block namespaced import for now. We can still relax it in the future if requested.
As today, iterator keys are not required, and therefore we are seeing problems with the state of the iteration, replacing all items with new since their key does not match or always match (undefined). I believe the best bet for now is to require the key during compilation.
This issue list ongoing cleanup work items to keep this project clean and improve the overall developer productivity. Don't hesitate to pick up one of those work items between when you get bored. 💃
Effort | Icon |
---|---|
Low | ✳️ |
Medium | 🔶 |
High | 🔴 |
.eslintrc
and .eslintignore
from the root directoryjest
, typescript
, rollup
, tslint
, ts-jest
(run yarn outdated
in the root directory to list all the outdated dependencies).packages/README.md
.README.md
and CONTRIBUTING.md
to match current developement workflowpower-assert
and mocha
in the remaing package in the favor of jest
eslint
from packages using typescript in favor of ts-lint
tslint.config
lwc-engine
unit test less verbose (Issue: #94)A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.