fix(compiler): Compiler errors for missing keys in iterator #138

davidturissini · 2018-03-06T22:38:12Z

Details

Not including a key in iterators(for:each and iterator:foo) will now produce a compile time error. Furthermore, using duplicate keys inside of an iteration will now warn the user as this is most likely a mistake and will result in incorrect markup.

Does this PR introduce a breaking change?

Yes
No

If yes, please describe the impact and migration path for existing applications:
Please check if your PR fulfills the following requirements:

We are currently auto-generating keys in iterators via a weak map in api.k. This is proving to be problematic so we have decided to change direction and require devs to supply a key value themselves. This will break downstream components.

Fixes #136

davidturissini · 2018-03-06T22:39:11Z

packages/lwc-engine/src/framework/api.ts

@@ -255,6 +254,11 @@ export function i(iterable: Iterable<any>, factory: (value: any, index: number,
    let next = iterator.next();
    let j = 0;
    let { value, done: last } = next;
+    if (process.env.NODE_ENV !== 'production') {
+        // var is intentional here, function level scoping is required.
+        var keyMap = {};


I couldn't think of a better way to hoist a map of used keys that will get populated in the while loop. Suggestions happily taken :)

Thinking about this a little bit more, I think this will still get minified if I use let outside of the prod check

davidturissini · 2018-03-06T22:40:20Z

packages/lwc-engine/src/framework/api.ts

@@ -271,9 +275,14 @@ export function i(iterable: Iterable<any>, factory: (value: any, index: number,
        if (process.env.NODE_ENV !== 'production') {
            const vnodes = isArray(vnode) ? vnode : [vnode];
            vnodes.forEach((childVnode) => {
-                if (!isNull(childVnode) && isObject(childVnode) && !isUndefined(childVnode.sel) && childVnode.sel.indexOf('-') > 0 && isUndefined(childVnode.key)) {


I don't think we want the childVnode.sel.indexOf('-') check here. This is valid for all elements, not just custom

davidturissini · 2018-03-06T22:40:42Z

packages/lwc-engine/src/framework/api.ts

-                objToKeyMap.set(unwrapped, objKey);
-            }
-            return compilerKey + ':' + objKey;
+            throw new Error(`Invalid key value ${obj}. Key must be a string or number.`);


Opted for an Error instead of assert because I believe we will want this in production.

you will have to do toString() around this, otherwise it might throw that it can't be stringify.

this error is only incomplete, we should at least tell them what VM is this, but in prod we don't have toString on VM.

my recommendation is to keep it as an assert until the next refactor of the errors.

davidturissini · 2018-03-06T22:41:35Z

packages/lwc-template-compiler/src/parser/expression.ts

@@ -122,23 +122,3 @@ export function getForEachParent(element: IRElement): IRElement | null {

    return null;
 }
-
-export function keyExpression(element: IRElement) {


We no longer need to climb the iterator tree to magically bind the iterator value to our key. Instead, if the user has not defined their own key, we throw.

davidturissini · 2018-03-06T22:41:52Z

packages/lwc-template-compiler/src/parser/index.ts

@@ -110,7 +111,7 @@ export default function parse(source: string, state: State): {
                applyHandlers(element);
                applyComponent(element);
                applySlot(element);
-                applyKey(element);
+                applyKey(element, elementNode.__location);


@pmdartus __location seems like a bad idea to use here?

The element has access to the original node from the __original property.

lwc/packages/lwc-template-compiler/src/shared/ir.ts

Line 25 in 12c6567

__original: original,

No need to pass the location there.

It looks like __original is an instance of HTMLElement, not parse5.AST.Default.Element

davidturissini · 2018-03-06T22:42:37Z

packages/lwc-template-compiler/src/parser/index.ts

@@ -373,10 +374,9 @@ export default function parse(source: string, state: State): {
            }

            element.forKey = keyAttribute.value;
+        } else if ((getIteratorParent(element) || getForEachParent(element)) && element.tag !== 'template') {


This can possibly be abstracted out to isIteratorElement that returns true is element will be iterated over.

caridy · 2018-03-06T22:46:20Z

packages/lwc-engine/src/framework/api.ts

@@ -255,6 +254,11 @@ export function i(iterable: Iterable<any>, factory: (value: any, index: number,
    let next = iterator.next();
    let j = 0;
    let { value, done: last } = next;
+    let keyMap;
+    if (process.env.NODE_ENV !== 'production') {
+        keyMap = {};


create(null) to avoid surprises.

caridy · 2018-03-06T22:47:36Z

packages/lwc-engine/src/framework/api.ts

-                    // TODO - it'd be nice to log the owner component rather than the iteration children
-                    assert.logWarning(`Missing "key" attribute in iteration with child "<${childVnode.sel}>", index ${i}. Instead set a unique "key" attribute value on all iteration children so internal state can be preserved during rehydration.`);
+                if (!isNull(childVnode) && isObject(childVnode) && !isUndefined(childVnode.sel)) {
+                    if (isUndefined(childVnode.key)) {


what about key being null?

probably better to just test for typeof to be number or string

salesforce-best-lwc-internal · 2018-03-07T00:00:44Z

Benchmark comparison

Base commit: 02a1320 | Target commit: 9d1c60c

benchmark	base(`02a1320`)	target(`9d1c60c`)	trend
table-append-1k.benchmark:benchmark-table/append/1k	274.44 (± 5.51 ms)	263.92 (± 4.21 ms)	👍
table-clear-1k.benchmark:benchmark-table/clear/1k	14.28 (± 0.57 ms)	12.20 (± 0.32 ms)	👍
table-create-10k.benchmark:benchmark-table/create/10k	1589.07 (± 31.51 ms)	1521.79 (± 27.64 ms)	👍
table-create-1k.benchmark:benchmark-table/create/1k	167.12 (± 2.00 ms)	156.81 (± 1.99 ms)	👍
table-update-10th-1k.benchmark:benchmark-table/update-10th/1k	150.52 (± 2.99 ms)	130.47 (± 1.45 ms)	👍
tablecmp-append-1k.benchmark:benchmark-table-component/append/1k	351.38 (± 2.33 ms)	356.76 (± 8.25 ms)	👎
tablecmp-clear-1k.benchmark:benchmark-table/clear/1k	34.76 (± 1.52 ms)	35.13 (± 1.66 ms)	👌
tablecmp-create-10k.benchmark:benchmark-table-component/create/10k	2677.99 (± 20.79 ms)	2775.77 (± 61.84 ms)	👎
tablecmp-create-1k.benchmark:benchmark-table-component/create/1k	310.25 (± 12.09 ms)	297.95 (± 6.76 ms)	👍
tablecmp-update-10th-1k.benchmark:benchmark-table-component/update-10th/1k	146.16 (± 2.86 ms)	121.22 (± 1.48 ms)	👍

pmdartus · 2018-03-07T00:08:46Z

I have some usability concern with this change, especially with external customers. Even if React and Vue offer the capability to add keys but doesn't require it.

I would expect that if we throw at compile time, we will run into the same issue than the React community is running into where people use the array index has a key. If we really want to proceed with this change, we should also ensure that the key is not bound to the for:index identifier.

salesforce-best-lwc-internal · 2018-03-07T00:37:34Z

Benchmark comparison

Base commit: 02a1320 | Target commit: 3a87e45

benchmark	base(`02a1320`)	target(`3a87e45`)	trend
table-append-1k.benchmark:benchmark-table/append/1k	274.44 (± 5.51 ms)	255.63 (± 3.38 ms)	👍
table-clear-1k.benchmark:benchmark-table/clear/1k	14.28 (± 0.57 ms)	12.30 (± 0.45 ms)	👍
table-create-10k.benchmark:benchmark-table/create/10k	1589.07 (± 31.51 ms)	1506.64 (± 15.67 ms)	👍
table-create-1k.benchmark:benchmark-table/create/1k	167.12 (± 2.00 ms)	157.43 (± 2.51 ms)	👍
table-update-10th-1k.benchmark:benchmark-table/update-10th/1k	150.52 (± 2.99 ms)	127.99 (± 1.92 ms)	👍
tablecmp-append-1k.benchmark:benchmark-table-component/append/1k	351.38 (± 2.33 ms)	349.50 (± 7.57 ms)	👌
tablecmp-clear-1k.benchmark:benchmark-table/clear/1k	34.76 (± 1.52 ms)	33.98 (± 1.48 ms)	👌
tablecmp-create-10k.benchmark:benchmark-table-component/create/10k	2677.99 (± 20.79 ms)	2678.82 (± 16.63 ms)	👌
tablecmp-create-1k.benchmark:benchmark-table-component/create/1k	310.25 (± 12.09 ms)	293.09 (± 6.59 ms)	👍
tablecmp-update-10th-1k.benchmark:benchmark-table-component/update-10th/1k	146.16 (± 2.86 ms)	118.05 (± 1.97 ms)	👍

caridy · 2018-03-07T18:15:35Z

I have some usability concern with this change, especially with external customers. Even if React and Vue offer the capability to add keys but doesn't require it.

We should start with the more restrictive, and eventually relax if possible, as we always do!

I would expect that if we throw at compile time, we will run into the same issue than the React community is running into where people use the array index has a key. If we really want to proceed with this change, we should also ensure that the key is not bound to the for:index identifier.

I think this is a good suggestion, and in the compiler, we can know for sure if the identifier is the one defined in the iteration as the index, and throw for now.

caridy · 2018-03-15T17:42:09Z

guys, this should be part of the next release, otherwise people will face issues that they can't explain when no keys are provided.

davidturissini · 2018-03-15T18:04:32Z

@caridy do we still want to implement throwing when the user uses index?

caridy · 2018-03-15T18:27:39Z

@davidturissini yes, I think we should do that to avoid any confusion.

apapko · 2018-03-15T18:32:52Z

packages/lwc-engine/src/framework/api.ts

+                        keyMap[key] = 1;
+                    } else {
+                        // TODO - it'd be nice to log the owner component rather than the iteration children
+                        assert.logWarning(`Missing "key" attribute in iteration with child "<${childVnode.sel}>", index ${i}. Instead set a unique "key" attribute value on all iteration children so internal state can be preserved during rehydration.`);


Instead set a unique "key" - 'instead' word is not needed here since there was no alternative. We can just start with 'Set a unique key ...'

apapko · 2018-03-15T20:03:23Z

...es/lwc-template-compiler/src/__tests__/fixtures/directive-key/error-expression/metadata.json

@@ -3,7 +3,7 @@
    "length": 11,
    "level": "error",
    "message": "Key attribute value should be an expression",
-    "start": 83


that is a big gap 83 vs 19

davidturissini · 2018-03-15T21:57:46Z

packages/lwc-template-compiler/src/parser/index.ts

            if (keyAttribute.type !== IRAttributeType.Expression) {
                return warnAt(`Key attribute value should be an expression`, keyAttribute.location);
            }

+            if (isForOfChild(element)) {
+                if (keyAttribute.value.property.name === 'index') {


@pmdartus There is a type error here and it's difficult to trace exactly what keyAttribute should be. Typescript doesn't like me looking at property key on value. Any tips?

salesforce-best-lwc-internal · 2018-03-16T00:30:47Z

Benchmark comparison

Base commit: 7da31a7 | Target commit: cf84fc1

benchmark	base(`7da31a7`)	target(`cf84fc1`)	trend
table-append-1k.benchmark:benchmark-table/append/1k	661.43 (± 32.60 ms)	248.32 (± 3.46 ms)	👍
table-clear-1k.benchmark:benchmark-table/clear/1k	17.89 (± 2.44 ms)	11.64 (± 0.33 ms)	👍
table-create-10k.benchmark:benchmark-table/create/10k	1587.87 (± 41.17 ms)	1486.11 (± 18.43 ms)	👍
table-create-1k.benchmark:benchmark-table/create/1k	169.35 (± 11.42 ms)	151.43 (± 1.07 ms)	👍
table-update-10th-1k.benchmark:benchmark-table/update-10th/1k	170.31 (± 17.04 ms)	124.39 (± 1.81 ms)	👍
tablecmp-append-1k.benchmark:benchmark-table-component/append/1k	360.86 (± 15.11 ms)	343.63 (± 6.69 ms)	👍
tablecmp-clear-1k.benchmark:benchmark-table/clear/1k	34.45 (± 1.15 ms)	32.66 (± 1.23 ms)	👍
tablecmp-create-10k.benchmark:benchmark-table-component/create/10k	2635.79 (± 44.14 ms)	2617.89 (± 18.33 ms)	👌
tablecmp-create-1k.benchmark:benchmark-table-component/create/1k	296.73 (± 24.38 ms)	278.52 (± 2.42 ms)	👍
tablecmp-update-10th-1k.benchmark:benchmark-table-component/update-10th/1k	164.30 (± 16.68 ms)	113.94 (± 1.59 ms)	👍

salesforce-best-lwc-internal · 2018-03-16T01:07:39Z

Benchmark comparison

Base commit: 7da31a7 | Target commit: 6e215eb

benchmark	base(`7da31a7`)	target(`6e215eb`)	trend
table-append-1k.benchmark:benchmark-table/append/1k	661.43 (± 32.60 ms)	267.64 (± 6.70 ms)	👍
table-clear-1k.benchmark:benchmark-table/clear/1k	17.89 (± 2.44 ms)	13.21 (± 0.58 ms)	👍
table-create-10k.benchmark:benchmark-table/create/10k	1587.87 (± 41.17 ms)	1593.33 (± 30.79 ms)	👌
table-create-1k.benchmark:benchmark-table/create/1k	169.35 (± 11.42 ms)	165.37 (± 5.50 ms)	👌
table-update-10th-1k.benchmark:benchmark-table/update-10th/1k	170.31 (± 17.04 ms)	130.15 (± 3.42 ms)	👍
tablecmp-append-1k.benchmark:benchmark-table-component/append/1k	360.86 (± 15.11 ms)	346.28 (± 3.98 ms)	👍
tablecmp-clear-1k.benchmark:benchmark-table/clear/1k	34.45 (± 1.15 ms)	34.84 (± 1.25 ms)	👌
tablecmp-create-10k.benchmark:benchmark-table-component/create/10k	2635.79 (± 44.14 ms)	2754.26 (± 39.70 ms)	👎
tablecmp-create-1k.benchmark:benchmark-table-component/create/1k	296.73 (± 24.38 ms)	288.64 (± 3.77 ms)	👌
tablecmp-update-10th-1k.benchmark:benchmark-table-component/update-10th/1k	164.30 (± 16.68 ms)	119.88 (± 2.64 ms)	👍

David Turissini added 4 commits March 6, 2018 11:34

Starting throw for no key

b841982

Missing iterator key compiler errors

89645c5

Integration test compiler fixes

d138d2e

Runtime errors for missing keys

d85123e

davidturissini commented Mar 6, 2018

View reviewed changes

some test cleanup

ce4b715

davidturissini commented Mar 6, 2018

View reviewed changes

Changing var to let

12c6567

caridy reviewed Mar 6, 2018

View reviewed changes

Adding key to benchmark

9d1c60c

pr changes

3a87e45

caridy approved these changes Mar 15, 2018

View reviewed changes

David Turissini added 2 commits March 15, 2018 12:19

Merge branch 'master' into dturissini/issue-136/throw-no-key

222ef58

Fixing incorrect merge

db5545b

apapko reviewed Mar 15, 2018

View reviewed changes

Throwing error when index is used

0f76569

davidturissini commented Mar 15, 2018

View reviewed changes

Deep checking for property and value name

0ea3caf

David Turissini added 3 commits March 15, 2018 17:16

Refactoring a little bit

84acc3c

Small TS fix

8941ade

cleanup

cf84fc1

Fixing issue with iterators

6e215eb

caridy approved these changes Mar 16, 2018

View reviewed changes

davidturissini merged commit de8ee82 into master Mar 16, 2018

davidturissini deleted the dturissini/issue-136/throw-no-key branch March 16, 2018 21:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(compiler): Compiler errors for missing keys in iterator #138

fix(compiler): Compiler errors for missing keys in iterator #138

davidturissini commented Mar 6, 2018 •

edited

Loading

davidturissini Mar 6, 2018

davidturissini Mar 6, 2018

davidturissini Mar 6, 2018

davidturissini Mar 6, 2018

caridy Mar 6, 2018

caridy Mar 6, 2018

caridy Mar 6, 2018

davidturissini Mar 6, 2018

davidturissini Mar 6, 2018

pmdartus Mar 6, 2018

davidturissini Mar 7, 2018

davidturissini Mar 6, 2018

caridy Mar 6, 2018

caridy Mar 6, 2018

caridy Mar 6, 2018

salesforce-best-lwc-internal bot commented Mar 7, 2018

pmdartus commented Mar 7, 2018

salesforce-best-lwc-internal bot commented Mar 7, 2018

caridy commented Mar 7, 2018

caridy commented Mar 15, 2018

davidturissini commented Mar 15, 2018 •

edited

Loading

caridy commented Mar 15, 2018

apapko Mar 15, 2018

apapko Mar 15, 2018

davidturissini Mar 15, 2018

salesforce-best-lwc-internal bot commented Mar 16, 2018

salesforce-best-lwc-internal bot commented Mar 16, 2018

fix(compiler): Compiler errors for missing keys in iterator #138

fix(compiler): Compiler errors for missing keys in iterator #138

Conversation

davidturissini commented Mar 6, 2018 • edited Loading

Details

Does this PR introduce a breaking change?

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

salesforce-best-lwc-internal bot commented Mar 7, 2018

Benchmark comparison

pmdartus commented Mar 7, 2018

salesforce-best-lwc-internal bot commented Mar 7, 2018

Benchmark comparison

caridy commented Mar 7, 2018

caridy commented Mar 15, 2018

davidturissini commented Mar 15, 2018 • edited Loading

caridy commented Mar 15, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

salesforce-best-lwc-internal bot commented Mar 16, 2018

Benchmark comparison

salesforce-best-lwc-internal bot commented Mar 16, 2018

Benchmark comparison

davidturissini commented Mar 6, 2018 •

edited

Loading

davidturissini commented Mar 15, 2018 •

edited

Loading