dart-archive / angular_analyzer_plugin Goto Github PK

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.

GIF explains it all

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)

/cc @MichaelRFairhurst

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.

Can be applied to both output strategies, eg #38 and #39. Seems like it occurs much more frequently with #39. Rarer than both of those tickets so should probably done after those two are both complete.

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"

applies to #38 and #39 but I think warrants its own ticket

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.