Directive scopeTypes like react's propTypes

[kentcdodds]

One of my favorite parts of React is PropTypes. I would really really love to be able to utilize this kind of api in Angular.

For those not familiar, PropTypes essentially allows you to validate the api to your component so the developer is warned in the console when providing properties that are incorrect, of the wrong type, or are required and not specified.

I love this so much that I created apiCheck.js to bring this to the VanillaJS world. And I even started a little prototype (WIP) for adding scopeTypes to Angular 1.x directives.

I would happily work on adding this functionality to angular if there's enough interest. Even something as simple as a function that would be called to validate the scope properties would be nice... Just keeping validation out of my controller logic is what I'm looking for.

Note: I'm more interested in getting this concept accepted and implemented than I am in actually using apiCheck... I don't care what's used. I just want it to be easy.

[petebacondarwin]

I like this idea but I am concerned about the performance implications and how it could actually be implemented. Each of the directive "bindings", i.e. the scope or bindToController properties, are updated independently triggered by various watches that are set up a linking time. So I would expect that this validation hook would need to be triggered for individual bindings as their watch handler is triggered.

What do others think?

[kentcdodds]

Yeah, I'll give more input later (parked now to respond quickly). But I've
been using angular-scope-types to hear success for about two months out so.
Performance is not an issue because the checking logic is returned from a
function that is not called in production. So the price I pay is the bytes
which I believe is outweighed by the benefit of a defined api.

https://github.com/alianza-dev/angular-scope-types

• Kent C. Dodds

(Sent from my mobile device, please forgive typos or brevity)
On Jul 15, 2015 7:57 AM, "Pete Bacon Darwin" notifications@github.com
wrote:

I like this idea but I am concerned about the performance implications and
how it could actually be implemented. Each of the directive "bindings",
i.e. the scope or bindToController properties, are updated independently
triggered by various watches that are set up a linking time. So I would
expect that this validation hook would need to be triggered for individual
bindings as their watch handler is triggered.

What do others think?

—
Reply to this email directly or view it on GitHub
#11657 (comment)
.

[kentcdodds]

Also, the tests could probably be written a little more clearly so you
could glean the api by looking at the test. And docs are non-existent, but
the demo should reveal the basic idea pretty well:
https://github.com/alianza-dev/angular-scope-types/blob/master/demo/script.js

• Kent C. Dodds

(Sent from my mobile device, please forgive typos or brevity)
On Jul 15, 2015 8:09 AM, "Kent C. Dodds" kent@doddsfamily.us wrote:

Yeah, I'll give more input later (parked now to respond quickly). But I've
been using angular-scope-types to hear success for about two months out so.
Performance is not an issue because the checking logic is returned from a
function that is not called in production. So the price I pay is the bytes
which I believe is outweighed by the benefit of a defined api.

https://github.com/alianza-dev/angular-scope-types

• Kent C. Dodds

(Sent from my mobile device, please forgive typos or brevity)
On Jul 15, 2015 7:57 AM, "Pete Bacon Darwin" notifications@github.com
wrote:

I like this idea but I am concerned about the performance implications
and how it could actually be implemented. Each of the directive "bindings",
i.e. the scope or bindToController properties, are updated independently
triggered by various watches that are set up a linking time. So I would
expect that this validation hook would need to be triggered for individual
bindings as their watch handler is triggered.

What do others think?

—
Reply to this email directly or view it on GitHub
#11657 (comment)
.

[kentcdodds]

I've updated the documentation to describe how to use my library. But if this were implemented directly into angular the API would be much better (wouldn't have to do most of the stuff... It's just the getScopeTypes function that we'd still have to do).

https://github.com/alianza-dev/angular-scope-types

Also updated the demo so you can play with it: https://jsbin.com/kuqeye/edit?html,js,output

[petebacondarwin]

@kentcdodds if you could put together a very basic PR with a Proof of Concept for what the API would look like and how it would not impact production performance then I would be happy to discuss including it.

[kentcdodds]

Fantastic! Would love to get something like this supported in core. Do you mind giving me a tip as to a good place to start? As well as where my tests should go?

[petebacondarwin]

The unit tests go in the test folder :-) If you are modifying the $compile service, which I guess you would need to do, then you look inside the test/ng/$compileSpec.js file. Warning it is big.