feat(common): introduce KeyValuePipe #24319

Toxicable · 2018-06-06T09:33:29Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[x] Feature

What is the current behavior?

There is no way to iterate a object or Map

Closes: #24200
Continuation from: #11319

What is the new behavior?

A pipe to object Map or object (dictionary) to a key value pair array for use in a ngFor

Does this PR introduce a breaking change?

[ ] Yes
[x] No

mhevery · 2018-06-06T17:22:56Z

packages/common/src/pipes/entries_pipe.ts

+  value: V;
+}
+
+@Pipe({name: 'mutableToKeyValue', pure: false})


I don' think the word mutable should be there. It is inconsistent with the rest of the systems naming.

Changed to keyvalue similar to the lowercase on LowerCasePipe

mhevery · 2018-06-06T17:27:38Z

packages/common/src/pipes/entries_pipe.ts

+      this.differ = this.differs.find(input).create();
+    }
+
+    // TODO: shouldnt the differ allow Map?


It does: https://github.com/angular/angular/blob/master/packages/core/src/change_detection/differs/default_keyvalue_differ.ts#L74 Not sure I understand that comment.

I get a type error if I pass input directly

specifically:

Argument of type '{ [key: string]: V; [key: number]: V; } | Map<K, V>' is not assignable to parameter of type '{ [key: string]: V; }'. Type 'Map<K, V>' is not assignable to type '{ [key: string]: V; }'. Index signature is missing in type 'Map<K, V>'

mhevery · 2018-06-06T17:30:49Z

packages/common/src/pipes/entries_pipe.ts

+    let nextValue: Array<KeyValuePair<string, V>>;
+    // always return a new array ref at this
+    if (input instanceof Map) {
+      // keys maintain their type here


I don't think we should be stringifing it here. What is your reasoning for it?

Object.keys converts all keys to strings. So to be consistent we should do the same with Map

mhevery · 2018-06-06T17:31:55Z

packages/common/src/pipes/entries_pipe.ts

+                      .map(key => this.makeKeyValuePair(String(key), input.get(key)));
+    } else {
+      // all keys will be converted into strings when using Object.keys()
+      nextValue = Object.keys(input).sort().map(key => this.makeKeyValuePair(key, input[key]));


map is not very performant. Given that this will be in the hotpath could we implement it with a for loop instead?

Done.
Still not overly happy with Array.from(input.keys()) since it's an extra iteration but I don't see another way to sort it without resolving the iterator into an Array

mhevery · 2018-06-06T17:33:14Z

packages/common/src/pipes/entries_pipe.ts

+
+import {KeyValueDiffer, KeyValueDiffers, Pipe, PipeTransform} from '@angular/core';
+
+export interface KeyValuePair<K, V> {


I think KeyValue is shorter. I don't think the word Pair adds value.

mhevery · 2018-06-06T17:34:41Z

tools/public_api_guard/common/common.d.ts

+    transform(input: null | {
+        [key: string]: V;
+        [key: number]: V;
+    } | Map<K, V>): Array<KeyValuePair<string, V>> | null;


I would expect that KeyValuePair should be exported as well since it would be part of the public API, but I don't see it in this file.

mhevery · 2018-06-06T17:35:57Z

packages/common/src/pipes/index.ts

@@ -14,6 +14,7 @@
 import {AsyncPipe} from './async_pipe';
 import {LowerCasePipe, TitleCasePipe, UpperCasePipe} from './case_conversion_pipes';
 import {DatePipe} from './date_pipe';
+import {MutableToKeyValuePipe} from './entries_pipe';


I would expect KeyValuePair to be exported as well since it is part of public API.

Toxicable · 2018-06-07T00:53:17Z

@mhevery I've addressed your feedback

mhevery

I am sorry I missed the docs the first time through. Hopefully this is the last pass.

mhevery · 2018-06-07T04:06:42Z

packages/common/src/pipes/entries_pipe.ts

+}
+
+@Pipe({name: 'keyvalue', pure: false})
+export class KeyValuePipe<K, V> implements PipeTransform {


Sorry I did not notice this earlier. Because this is public API it needs to have documentation. See example here: https://github.com/angular/angular/blob/master/packages/common/src/pipes/date_pipe.ts#L14-L105

Never been very good at docs, let me know if that'll suffice

mhevery · 2018-06-07T04:08:23Z

packages/common/src/pipes/entries_pipe.ts

+    return nextValue;
+  }
+
+  private makeKeyValuePair(key: number|string, value: any): KeyValue<string, V> {


This method would be better as free floating function since it would minify better. (It does not use this hence it does not need to be a member of the class)

mhevery · 2018-06-07T04:10:02Z

packages/common/src/pipes/entries_pipe.ts

+import {KeyValueDiffer, KeyValueDiffers, Pipe, PipeTransform} from '@angular/core';
+
+export interface KeyValue<K, V> {
+  key: K;


since K is always a string there is no need for K

mhevery · 2018-06-07T04:12:55Z

packages/common/src/pipes/entries_pipe.ts

+    let nextValue: Array<KeyValue<string, V>> = [];
+
+    if (input instanceof Map) {
+      const keys = Array.from(input.keys()).sort();


If keys are not strings than the sort will fail. I think you need to convert to string before sort()

Unless i've misinterpted you, sort can handle number just fine.
take this example

The reason im hesitant to simply convert it is that it'll be a whole extra iteration.
Also I do have a test for this https://github.com/angular/angular/pull/24319/files#diff-b6bf05a02506b3cd96c753d3a8d0d30aR72
maybe I should add one with alpha and numerical

I think I get what you mean: when the input is a function, object etc.
I think adding a param for a sort comparitor function would be the best idea here. With the default behaviour being .sort() so leave it to the dev to add the comparitor if they have complex keys

mhevery · 2018-06-07T04:13:35Z

packages/common/src/pipes/entries_pipe.ts

+      for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        // input could possibly be Megamorphic here
+        nextValue.push(this.makeKeyValuePair(String(key), input[key]));


No need to convert to string since Object.keys will always return strings

Thanks, missed that in refactoring

alfaproject · 2018-06-07T08:03:24Z

A question before this becomes public API: shouldn't the sort be optional? (maybe on by default, but configurable at least?)

Toxicable · 2018-06-08T08:23:27Z

@mhevery I've added a compareFn to deal with the sorting issues but i've become a bit uncertain about the implementation now.
There are many any casts since the types don't match up between Map and Object since the compareFn is really only for Map (since you cant have complex types as the key in a Object)

mhevery · 2018-06-11T22:36:20Z

packages/common/src/pipes/keyvalue_pipe.ts

+ * The output array will be ordered by keys.
+ * By default the comparator will be by Unicode point value
+ * You can optionally pass a compareFn if your keys are complex types.
+ *


Could you add an example of usage. We are trying to make sure that all new APIs have an example. See as an example of how to do it https://github.com/angular/angular/blob/master/packages/common/src/pipes/async_pipe.ts#L43-L68. Notice that the example https://github.com/angular/angular/blob/master/packages/examples/common/pipes/ts/async_pipe.ts has tests https://github.com/angular/angular/blob/master/packages/examples/common/pipes/ts/e2e_test/pipe_spec.ts which verifies that the example does not get broken.

mhevery · 2018-06-11T22:48:14Z

packages/common/src/pipes/keyvalue_pipe.ts

+      this.differ = this.differs.find(input).create();
+    }
+
+    // TODO: shouldnt the differ signature allow Map?


shouldnt => shouldn't

The issue is that you declared your type as {} | Map where as KeyValueDiffer has: diff(object: Map<K, V>): KeyValueChanges<K, V>; and diff(object: {[key: string]: V}): KeyValueChanges<string, V>; overloaded methods. The issue is that neither {} or Map is a subtype of {}|Map. To make this work you would have to declare diff(object: {[key: string]: V}|Map<K,V> ): KeyValueChanges<K|string, V>; or something like that, but than you would love the type information on string.

So casting to any is a reasonable compromise.

Alternatively you could do:

const differChanges = input instanceof Map ? this.differ.diff(input) : this.differ.diff(input);

Which types but is very weird.

I would remove the comment/TODO.

mhevery · 2018-06-11T22:54:04Z

packages/common/src/pipes/keyvalue_pipe.ts

+  return {key: key as any, value};
+}
+
+export interface KeyValue<V> {


KeyValue is part of public API, it needs docs. (example not needed)

mhevery · 2018-06-11T23:51:58Z

OK, I thought about it some more and I have done some refactoring to clean up the code and the type system. I pushed the changes here 97fbe77

Toxicable · 2018-06-12T00:02:35Z

@mhevery Thanks man, that helps a lot, will make those final few docs and tests tonight

alfaproject · 2018-06-13T08:22:00Z

packages/common/src/pipes/keyvalue_pipe.ts

+ *
+ */
+@Pipe({name: 'keyvalue', pure: false})
+export class KeyValuePipe implements PipeTransform {


Any reason not to do KeyValuePipe<K, V>? It down-levels to the exact same code and would avoid having to use any, I think.

Toxicable · 2018-06-13T09:53:11Z

@mhevery Addressed all your feedback and added more tests / docs.

The sourcelab failure looks unrelated to my changes

mhevery · 2018-06-13T19:12:01Z

@Toxicable Thank you for all of your patience in getting this into mergeable state. 👍

mary-poppins · 2018-06-13T19:14:11Z

mhevery · 2018-06-13T19:15:56Z

http://test/OCL:200432210:BASE:200432373:1528917235420:35b9231e

PR Close #24319

angular-automatic-lock-bot · 2019-09-13T17:52:49Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

feat(core): export defaultKeyValueDiffers to private api

f647586

googlebot added the cla: yes label Jun 6, 2018

Toxicable mentioned this pull request Jun 6, 2018

feat(common): new pipe to support object for ngFor #11319

Closed

3 tasks

mhevery suggested changes Jun 6, 2018

View reviewed changes

Toxicable force-pushed the entries-pipe branch from 7fb7e8f to 617a924 Compare June 6, 2018 18:39

vicb added the area: common Issues related to APIs in the @angular/common package label Jun 6, 2018

Toxicable changed the title ~~Entries pipe~~ feat(common): introduce KeyValuePipe Jun 7, 2018

mhevery suggested changes Jun 7, 2018

View reviewed changes

mhevery reviewed Jun 11, 2018

View reviewed changes

alfaproject reviewed Jun 13, 2018

View reviewed changes

Fabian Wiles added 2 commits June 13, 2018 21:26

feat(common): introduce KeyValuePipe

5cde92a

feat(core): KeyValueDiffer#diff allows null values

d22802b

Toxicable force-pushed the entries-pipe branch from 00bddba to d22802b Compare June 13, 2018 09:27

Fabian Wiles added 2 commits June 13, 2018 21:41

fixup! feat(common): introduce KeyValuePipe

b99eba1

fixup! feat(common): introduce KeyValuePipe

cfb35c7

fixup! feat(common): introduce KeyValuePipe

83ec620

mhevery added the target: major This PR is targeted for the next major release label Jun 13, 2018

mhevery approved these changes Jun 13, 2018

View reviewed changes

mhevery added the action: merge The PR is ready for merge by the caretaker label Jun 13, 2018

mhevery added the aio: preview label Jun 13, 2018

mhevery closed this in 92b278c Jun 13, 2018

mhevery pushed a commit that referenced this pull request Jun 13, 2018

feat(common): introduce KeyValuePipe (#24319)

2b49bf7

PR Close #24319

mhevery pushed a commit that referenced this pull request Jun 13, 2018

feat(core): KeyValueDiffer#diff allows null values (#24319)

52ce9d5

PR Close #24319

Toxicable deleted the entries-pipe branch June 13, 2018 20:33

mhevery mentioned this pull request Jun 14, 2018

Provide primitives to iterate ES6 Maps with ngFor #24200

Closed

mhevery mentioned this pull request Sep 7, 2018

fix(core): correct the nullability of kvDiffer #21623

Closed

3 tasks

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 13, 2019


		import {KeyValueDiffer, KeyValueDiffers, Pipe, PipeTransform} from '@angular/core';

		export interface KeyValuePair<K, V> {

feat(common): introduce KeyValuePipe #24319

feat(common): introduce KeyValuePipe #24319

Conversation

Toxicable commented Jun 6, 2018 • edited Loading

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

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

Toxicable commented Jun 7, 2018

mhevery left a 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

Toxicable Jun 7, 2018 • edited Loading

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

alfaproject commented Jun 7, 2018 • edited Loading

Toxicable commented Jun 8, 2018

Choose a reason for hiding this comment

mhevery Jun 11, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mhevery commented Jun 11, 2018

Toxicable commented Jun 12, 2018 • edited Loading

Choose a reason for hiding this comment

Toxicable commented Jun 13, 2018 • edited Loading

mhevery commented Jun 13, 2018

mary-poppins commented Jun 13, 2018

mhevery commented Jun 13, 2018

angular-automatic-lock-bot bot commented Sep 13, 2019

Toxicable commented Jun 6, 2018 •

edited

Loading

Toxicable Jun 7, 2018 •

edited

Loading

alfaproject commented Jun 7, 2018 •

edited

Loading

mhevery Jun 11, 2018 •

edited

Loading

Toxicable commented Jun 12, 2018 •

edited

Loading

Toxicable commented Jun 13, 2018 •

edited

Loading