WIP: detect dangling properties on custom elements

[pkozlowski-opensource]

@mhevery @tbosch this is an attempt to query web component properties at run-time to detect invalid property bindings. I've managed to make it work in JS, but it would need more effort in TS / Dart (still, should be manageable).

But before spending more time on it, I would like to validate the approach with you: essentially we are creating an instance of a custom element if:

• we are in a browser that supports custom elements
• name of a tag looks like a custom element (contains -)

As soon as we've got an instance of a custom element we can query its properties. This has an advantage over static / hand-written "schema", since people don't have to write it by hand and valid properties can be discovered at run-time. Not sure about the potential perf impact (we can easily cache results of those checks, this would be roughly equivalent of maintaing static schema in memory). I also need to check if there are no side effect for elements that are created by not attached to the DOM.

[mhevery]

I think this is a great approach. The more we can extract at runtime the better.

I still think that there will be a need for a schema:

1. it is needed for events,
2. it is needed for SVG,
3. it is needed for matching names such as inner-html vs innerHTML
4. it is needed for web-components which may not correctly pre-initialize the properties.

But I think we can leave the schema for later now that 90% use case has been covered.

DO: cache the results for speed.

[pkozlowski-opensource]

@mhevery totally agree that we will need some hand-written / "static" schema for things that we can't infer at runtime. But I'm happy to figure as much as needed at runtime as possible so people don't have to write it "by hand".

I'm going to clean-up this PR and merge - then we can review all the cases that are left.

Thnx for the review!

[mhevery]

Sounds good to me.

[pkozlowski-opensource]

Status update: I'm back from the AngularJS trainings I've been running - will rebase this PR and add Dart support today / tomorrow (Mon / Tue)

[pkozlowski-opensource]

@mhevery @tbosch I've added caching, rebased and made the test pass. The Dart impl is still pending as I've hitting some issues (need to check a couple of things and will ask for help if blocked).

I wonder if we could land the JS support for now as I don't want this stuff to bit-rotten to much. I can also see that there is work done by @tbosch on the props checking in Dart, so it would be good to verify if my changes are compatible here.

[mhevery]

@pkozlowski-opensource I am fine with landing the JS support and backfilling the Dart later (provided that it does not break dart in the interim)

[mhevery]

LGTM

[tbosch]

Sorry, missed the messaging on this thread.
When we run Dart transformers, we can't create nor check custom elements, as we are not running in a browser. For them, we actually need a hand written schema...

[tbosch]

What is the status here? Should this be merged or is this WIP?

[pkozlowski-opensource]

@tbosch I'm going to close this one and open a new PR with full schema support.

[angular-automatic-lock-bot]

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