Description

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;

Steps to Reproduce

1. Open the mono repo in VS Code
2. Open single-wire.js

There are few issues with ::slotted that we should take into consideration, more details here: WICG/webcomponents#728

Description

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.

Description

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.

Description

Create json-xml converter to be used to move lightning.json properties to [component name].js-meta.xml for all internal components

Description

ROM and Event membrane have different unwrap mechanisms

@davidturissini @caridy and I discussed this, Caridy will link the PR to this issue

Description

We want to make sure engine is never under compat transform.

Description

Add setAttribute and removeAttribute to LightningElement prototype.

Description

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

Description

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.

Description

Steps to Reproduce

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

Description

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.

Description

Update links in following proposals:
docs/proposals/error-code-system-2-mimic-assembly-script.md
docs/proposals/structured-commits.md
Related to #22

Description

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.

Steps to Reproduce

Check both boxes, then click clear button.
https://playground.sfdc.es/projects/BJ0IY7ytM

Expected Results

element to be updated (unchecked)

Actual Results

element is not updated, "Uncessary update message is shown"

Browsers Affected

all?

Versions

0.17.17

Description

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

Legend

Pending

Done

• ✳️ - Remove .eslintrc and .eslintignore from the root directory
• ✳️ - Update outdated dev dependencies. Good candidates: jest, typescript, rollup, tslint, ts-jest (run yarn outdated in the root directory to list all the outdated dependencies).
• ✳️ - Remove packages/README.md.
• ✳️ - Update README.md and CONTRIBUTING.md to match current developement workflow
• 🔶 - Remove power-assert and mocha in the remaing package in the favor of jest
• 🔶 - Remove eslint from packages using typescript in favor of ts-lint
• 🔶 - Share with all the projects tslint.config
• 🔶 - Run linting on the CI
• 🔶 - Make the lwc-engine unit test less verbose (Issue: #94)
• 🔴 - Stabilize IE11 compat integration test (Issue: #95, PR: #103)
• 🔴 - Add prettier to the repo (PR: #1057)

Description

Implement delegatesFocus static prop so LWC input focus can skip the custom element container.

Description

Remove compiler error when defining getter/setter for global HTML attribute.

Description

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

Description

The compiler ensures the styles are scoped to the component. However, when using the :root pseudo-class the styles leak into the global scope.

:root {
    color: red !important;
}

A solution here would be to forbid for now the :root pseudo-class.

Description

Iterate on locker-membrane for reactivity.

• Weak Map of Reactive State objects (tuple of full reactive proxy, and read only)
• Reactive State API:
  • notifcationOfPropertyMemberChange(o, key)
  • notificationOfPropertyMemberAccess(o, key)
• rename package to observable-membrane
• Distortion layer for dry objects only

New membrane APIs (hooks for touching/updating/mutating)

• getReadOnly
• getReactiveProxy

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

Description

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

Description

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.

Description

Reference to whatwg/dom#447

This is something that we can do after we introduce the slot element, which depends on the pending refactor.

Description

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

Description

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;
}

Description

Steps to Reproduce

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

Expected Results

hydration works when modifying a deeply nested property from the parent (declaring) component.

Actual Results

hydration doesn't work.

Browsers Affected

n/a

Versions

0.18.0

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:

• expose a global unwrap in DEV mode.
• monkey patch console.log (probably this will have a lot of side-effects)
• add a special global console.logProxys that will do the banch-check for Proxys

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.

Description

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() { }
}

Description

In 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

Example: https://circleci.com/gh/salesforce/lwc/973?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link

Description

• Implement default global HTML attribute getters/setters on LightningElement prototype
• Remove attributeChangedCallback and static observedAttributes

Description

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

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

Description

We need to create a new utility package in LWC for assert and cached native functionality (const { isArray } = Array)

Let's bikeshed on naming and exactly what we want to go there.

@pmdartus @caridy @diervo

Description

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.

Description

Today, the engine uses several map, reducer and forEach calls at evaluation time. We should reduce the evaluation penalty by making these lazy.

Description

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.

Description

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"

Description

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.

Steps to Reproduce

Example: ccbd126

Description

For security purposes, LWC components should not be able to pass any values as props unless they meet the following rules:

• value's prototype is null
• value's prototype is Object.prototype
• value's prototype is Array.prototype

If any object is trying to be accessed that does not meet those criteria, the engine will throw.

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?

Description

Steps to Reproduce

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;

Expected Results

config should be optional so the usage would look something like
@wire(something)
someProp;

Actual Results

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

Description

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.

Steps to Reproduce

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]);

Expected Results

1
2
3
4

Actual Results

1
2
Proxy {0: 3, 1: 4}
undefined

Browsers Affected

All Safari versions. Chrome and Firefox are not affected by this.

Description

Shadow DOM polyfill for querySelector

Description

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.

Description

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.

Description

In order to investigate performance issues related, we should provide add markers to track where we spend time in the different lifecycle hooks.

Previous discussions

@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:

• React 15.4 changelog
• Pull request

@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:

• All the boundaries between the framework and the user code: constructor, connectedCallback, disconnectedCallback, renderedCallback, attributeChangedCallback, render. Those marks give a general idea of when the different lifecycle events are triggered.
• And the 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?

Description

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.

Description

Steps to Reproduce

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

Expected Results

Compiler error

Actual Results

There isn't an error, and unexpected behavior results.

Browsers Affected

Versions

0.18.0

• LWC: x.x.x

• Aura: x.x.x

Description

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.