dart-archive / angular_analyzer_plugin Goto Github PK
View Code? Open in Web Editor NEWWORK MOVED TO dart-lang/angular repository
Home Page: https://github.com/dart-lang/angular/tree/master/angular_analyzer_plugin
WORK MOVED TO dart-lang/angular repository
Home Page: https://github.com/dart-lang/angular/tree/master/angular_analyzer_plugin
If I create a component and use it in a different component, when I alter that original components public interface, the template for the second component is not rechecked.
Currently expecting # instead of let
Edited: Looks like we are lacking in full :not support, wildcards, and ids. Combinations are allowed. Part of doing this ticket will be evaluating the differences between the source at the bottom and what we support so far
Original: Right now we support only a few options for selectors, and we don't support them in combination.
However, the comments for selector in the angular dart codebase reveals that it can be any mix of classes, properties with or without values, property wildcards, and/or an element name
https://github.com/angular/angular.dart/blob/master/lib/core_dom/selector.dart#L9
Currently reports error "The operator | is not defined for {{type}}"
If I write
<div ngFor="let x of xs">...</div>
I need to see an error reminding me to use *ngFor
.
Can also occur with
<div ngFor let-x [ngForOf]="xs">...</div>
in which case the proper solution is to put <template ngFor let-x [ngForOf]="xs"><div>...</div></template>
however this is fringe.
These could be detected separately. In the former case, the ngFor directive will not match the element, where in the former it will. Reporting an error for unknown properties could solve this.
In the latter case, the ngFor directive is matched but its not in a template element.
If caught separately, we could report errors.
But its probably fine just to check node.attributes for "ngFor", and if !node.isOrHasTemplateAttribute
then report a single error which suggests both solutions in the error message.
let
can only be used in templates, and #
can only be used in non templates.
This is actually pretty arbitrary and confusing, even if its less confusing than having #
do everything from ngFor to #form="ngForm"
.
Still, this is probably a great place to have a tool help people use the right ones especially when they are new.
Like issue #38 but this is an alternate usage strategy
Currently, code such as
class MyEventEmitter<T> extends EventEmitter<T> { ... }
...
@Output MyEventEmitter<int> intEvents;
will fail.
Per @scheglov, its possible that EventEmitter
itself is already a subtype of the required type, which may be simply Stream<T>
.
Note as well that we should do this right, tracking where the subtype relationship specifies the type parameters, ie
class MyIntEventEmitter extends EventEmitter<int> { ... }
If this is considerably more work then a new ticket should be made for this edge case.
Seeing this in an example project:
template: '''
<!-- pass the result of an expression into GnomePics, #PassingDataToSubComponents -->
<gnome-pics [is-sleeping]="isSleeping"></gnome-pics>
...
''',
directives: const [GnomePics, NgIf]
)
class GnomeConscious {
bool isSleeping = false;
...```
Error is "the bound input does not exist on any directives" until you change it to `[isSleeping]` in the template.
https://github.com/akserg/angular.dart.ui.demo
Turns out this project is angular1 dart, but nonetheless ran into a issue that we should solve
The null object does not have a getter 'offset'.
NoSuchMethodError: method not found: 'offset'
Receiver: null
Arguments: []
#0 Object._noSuchMethod (dart:core-patch/object_patch.dart:44)
#1 Object.noSuchMethod (dart:core-patch/object_patch.dart:47)
#2 AngularNavigationContributor._addDirectiveRegions (package:angular_analyzer_server_plugin/src/analysis.dart:94)
#3 AngularNavigationContributor.computeNavigation (package:angular_analyzer_server_plugin/src/analysis.dart:54)
#4 computeNavigation (package:analysis_server/src/domains/analysis/navigation.dart:28)
#5 sendAnalysisNotificationNavigation.<anonymous closure> (package:analysis_server/src/operation/operation_analysis.dart:203)
#6 _sendNotification.<anonymous closure> (package:analysis_server/src/operation/operation_analysis.dart:274)
#7 _PerformanceTagImpl.makeCurrentWhile (package:analyzer/src/generated/utilities_general.dart:189)
#8 _sendNotification (package:analysis_server/src/operation/operation_analysis.dart:272)
#9 sendAnalysisNotificationNavigation (package:analysis_server/src/operation/operation_analysis.dart:201)
#10 NavigationOperation.perform (package:analysis_server/src/operation/operation_analysis.dart:296)
#11 AnalysisServer.performOperation (package:analysis_server/src/analysis_server.dart:966)
#12 Future.Future.<anonymous closure> (dart:async/future.dart:118)
#13 _rootRun (dart:async/zone.dart:1146)
#14 _CustomZone.run (dart:async/zone.dart:1026)
#15 _CustomZone.runGuarded (dart:async/zone.dart:924)
#16 _CustomZone.bindCallback.<anonymous closure> (dart:async/zone.dart:951)
#17 _rootRun (dart:async/zone.dart:1150)
#18 _CustomZone.run (dart:async/zone.dart:1026)
#19 _CustomZone.runGuarded (dart:async/zone.dart:924)
#20 _CustomZone.bindCallback.<anonymous closure> (dart:async/zone.dart:951)
#21 Timer._createTimer.<anonymous closure> (dart:async-patch/timer_patch.dart:16)
#22 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:385)
#23 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:414)
#24 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:148)
java.lang.Throwable
at com.intellij.openapi.diagnostic.Logger.error(Logger.java:127)
at com.jetbrains.lang.dart.analyzer.DartAnalysisServerService$1.serverError(DartAnalysisServerService.java:208)
at com.google.dart.server.internal.BroadcastAnalysisServerListener.serverError(BroadcastAnalysisServerListener.java:180)
at com.google.dart.server.internal.remote.processor.NotificationServerErrorProcessor.process(NotificationServerErrorProcessor.java:37)
at com.google.dart.server.internal.remote.RemoteAnalysisServerImpl.processNotification(RemoteAnalysisServerImpl.java:502)
at com.google.dart.server.internal.remote.RemoteAnalysisServerImpl.processResponse(RemoteAnalysisServerImpl.java:517)
at com.google.dart.server.internal.remote.RemoteAnalysisServerImpl.access$600(RemoteAnalysisServerImpl.java:49)
at com.google.dart.server.internal.remote.RemoteAnalysisServerImpl$ServerResponseReaderThread.run(RemoteAnalysisServerI```
For instance, it would be nice to find ([thisError]), and we can do the usual type checking
When @View
specified a directive, but template does not use it.
Its hard to tell when things get sugared/desugared what exactly is going on.
For instance, ff you fail to include NgFor
in your directives
list for a component and then use the template <div *ngFor="item of items">...</div>
, you get the error "bound input does not exist on any directives" with a squiggle under "of". Should say "bound input [ngForOf] does not exist on any directives" to be clearer.
Of course, ngFor and ngIf may deserve errors specific to them, but its good to have the fundamentals done well.
(Or whatever makes more sense)
And open issues for future work?
Obviously a lot that could be done here, but it would be a good idea to validate the selectors where the directive is defined, and validate that all of those selectors are satisfied exactly once when the directive with transclusion is later used (will have to investigate the rules here to make sure we validate it correctly)
Probably make the existing Dart Quick Fixes accessible and integrate it through Angular plugins into HTML templates.
Variables can be overwritten with #thissyntax, and in ngFor, maybe a few other places...
Would love to test this out :) Is that already possible?
Just tried
<li *ngFor="let item of getItems(lowerEl)">...
but I'm getting an error here.
Requires some discovery....what syntax exactly is allowed here?
Seeing in this project: https://github.com/daftspaniel
the code <textarea [ngStyle]="{width: showPreview ? '48%':'99%'}"
Getting the error "Undefined name width."
Does this work in angular? We can probably tinker with the AST that the parser produces to turn these into string literals. Or maybe there's a problem with the way we call the parser.
Looks to me like we try to parse an expression, but don't check that the whole expression was consumed by the parser.
Examples:
{{valid_dart; I can write anything here and it doesn't catch it}}
{{something...}}
both of these are invalid but not caught
Very easy to accidentally write
<image src="image.src" />
but that won't work, should be (I think...)
<image [src]="image.src" />
Note that this can be valid. So it should be a lint error, which we will try to keep separate.
Worth brainstorming where else these problems come up
A few things, most notable ngform, use this.
Check for loaded directives which set exportAs
, set the #var
to be of the matching type according to the right hand side of the expression matching the correctly exported directive/component.
I think its because the dart:html event doesn't begin with "on" and we are stripping it, but it could be some other reason.
<input (keyup)="code" />
getting error "the bound output does not exist on any directives"
Is there any doc available on how to use angular2-dart-analyzer
with angular dart 2.0 projects in Webstrom?
Example of working code:
@Component(selector: 'blah', template: '<div exportedDirective #newvar="exportedDirective">{{newvar.exportedDirectiveProperty}}</div>')
class BlahComponent {}
@Directive(selector: '[exportedDirective]', exportAs: 'exportedDirective')
class ExportedDirective {
String exportedDirectiveProperty;
}
This example works and typechecks the property on newvar
. However, misspell the "exportAs" identifier, or misspell the selector property:
@Component(selector: 'blah', template: '<div exportedDirective #newvar="exprtedDirctiv">{{newvar.exportedDirectiveProperty}}</div>')
class BlahComponent {}
@Directive(selector: '[exportedDirective]', exportAs: 'exportedDirective')
class ExportedDirective {
String exportedDirectiveProperty;
}
(causing #newvar="exprtedDirctiv" to have no matching directives to assign to 'newvar
)
or
@Component(selector: 'blah', template: '<div exprtdDirctive #newvar="exportedDirective">{{newvar.exportedDirectiveProperty}}</div>')
class BlahComponent {}
@Directive(selector: '[exportedDirective]', exportAs: 'exportedDirective')
class ExportedDirective {
String exportedDirectiveProperty;
}
(causing ExportedDirective to not match the div, and therefore "#newvar=..." could never possibly find it)
In both cases you get the error "the getter newvar isn't defined for the class BlahComponent" and the squiggles go under the "newvar" in the mustache.
We should instead see squiggles under the attribute value in #newvar="..."
and say something to the effect of "No matching directives on this element export themselves under the name exprtdDirctive"
Seems like you can put in an html template with simply the text <p>
by itself and not get an error?
We track them but don't check them in the template resolution stage
In playground/outline_component.html I put in the line
<li *ngFor='let item of items; var x=index; trackBy: items' [hidden]='item != null'>
and I get the very confusing error of
WARNING: Attribute value expression (of type List) is not assignable to component input (of type (num, dynamic) โ dynamic) ([angular2_quickstart] lib/overview_component.html:1)
Could use some dedicated logic to clean this error up
Track which fields are @Output
on which components, so that we can catch mispellings etc in (eventBindings)="whatToDo()"
Currently all dart expressions accept $event as an 'any' type, but we can do better than that.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.