I have run into an ambiguous reference error when using a component from a package, where a primary project also refers to a shared dependency of that component. I have outlined an example project and a dependency project which illustrates the issue.
My aim is to have a base library of UI components, and a separate project that may subclass those components. I am currently unable to subclass those components, because as soon as I do, there ends up being two compiled versions of it - leading to the ambiguous reference error.
Dart SDK 0.6.5.0 r25017
My Package
This is the package that I created and imported into my current project. It defines a single Web Component and has a dependency on Web UI.
MyPackageComponent.html
<!DOCTYPE html>
<html><body>
<element name="my-package-component" constructor="MyPackageComponent" extends="span">
<template>My Package Component</template>
<script type="application/dart" src="MyPackageComponent.dart"></script>
</element>
</body></html>
MyPackageComponent.dart
import "package:web_ui/web_ui.dart";
class MyPackageComponent extends WebComponent
{
MyPackageComponent();
}
My Project
This is the primary project. It defines a single derived Web Component and has dependencies on My Package and Web UI.
MyLocalComponent.html
<!DOCTYPE html>
<html><body>
<element name="my-local-component" constructor="MyLocalComponent" extends="span">
<template>My Local Component</template>
<script type="application/dart" src="MyLocalComponent.dart"></script>
</element>
</body></html>
MyLocalComponent.dart
Note that MyLocalComponent is subclassed from MyPackageComponent.
import "package:MyPackage/MyPackageComponent.dart";
class MyLocalComponent extends MyPackageComponent
{
MyLocalComponent();
}
Index.html
<!DOCTYPE html>
<html><head>
<link rel="import" href="package:MyPackage/MyPackageComponent.html"/>
<link rel="import" href="MyLocalComponent.html"/>
</head><body>
<my-local-component></my-local-component> <!-- REF 1 -->
<my-package-component></my-package-component> <!-- REF 2 -->
<!-- Dart scripts etc. -->
</body>
Result
Everything runs fine if I use only the local component in Index.html (see REF 1). When I use the packaged component (see REF 2), I run into the following error:
Internal error: 'file:[omitted]/MyProject/src/out/Index.html.dart': Error: line [omitted] pos [omitted]: ambiguous reference: 'MyPackageComponent' is defined in library 'file:[omitted]/MyProject/src/out/_from_packages/MyPackage/MyPackageComponent.html.dart' and also in 'package:MyPackage/MyPackageComponent.dart'
__t.component(new MyPackageComponent()..host = __e0);
^ [omitted]/MyProject/src/out/index.html_bootstrap.dart:0
I am not sure if I am doing something wrong or if this is a bug. It seems highly unlikely that I can not use resources from other packages.
Investigation
There is an auto-generated folder in the out directory named _from_packages that seems to be the source of the ambiguous reference. MyPackageComponent is defined in there as well as in the packages directory.
Seems like the Web UI compiler is generating a class for the imported MyPackageComponent.dart (used specifically by the imported component) in addition to the original in packages/MyPackage/MyPackageComponent.dart which is referred to elsewhere in My Project.
Related
I'd like to be able to unit test my custom polymer elements.
Given a component in lib/web_components:
class Foo extends PolymerElement {
Foo.created() : super.created();
}
and a test in test/web_components:
main() {
test("Should Be a PolymerElement", (){
Foo undertest = new Foo.created();
expect(undertest, new isInstanceOf<PolymerElement>());
});
}
Running the test results in the error mentioned in the title. How can I avoid this error?
Edit:
So I've tried adding #TestOn('content-shell') at the top of my client side test files, and adding #TestOn('vm') to the server side tests.
In Grinder I have:
#Task('Test')
test() {
new PubApp.local('test').run([]);
new PubApp.local('test').run(["-p", "content-shell"]);
}
The server-side tests run fine but the client-side tests throw the following error:
pub run test -p content-shell test/web_component/foo_test.dart
"Failed to start content shell: No such file or directory"
Edit 2:
I've tried running in the dartium platform with the following command since content-shell doesn't seem to work:
pub run test:test -p dartium test/web_component/foo_test.dart
The result is:
Failed to load "test/web_component/foo_test.dart": type 'test.backend.declarer.Declarer' is not a subtype of type 'test.backend.declarer.Declarer' of 'function result'.
packages/test/test.dart 44:32 _declarer
packages/test/test.dart 108:5 test
foo_test.dart 9:3 main
package:test IframeListener.start
foo_test.dart.browser_test.dart 6:18 main
You need to create an html page for the test and run the test in the browser. The new test package has a decent readme explaining how to do that. (I have an issue that browser tests time out often. This is a known issue and will probably be fixed soon.)
Update
See Instantiating polymer element via dart code, Dynamically create polymer element for how to create a Polymer element dynamically.
Instead of main() use
#whenPolymerReady
init() {
#TestOn('content-shell') is ok but it's better to use #TestOn('browser') and then specify the concrete browser using the -p argument (-pchrome, -pdartium, -pfirefox, -pcontent-shell, ... see test README for a list of supported browsers). You can pass more than one -p at a time to run the tests at more than one browser.
You can also use a custom HTML page for the test
<!doctype html>
<!-- custom_html_test.html -->
<html>
<head>
<title>browser/polymer test</title>
<link rel="import" href="app_element.html">
<link rel="import" href="child_element.html">
<link rel="x-dart-test" href="html_test.dart">
<script src="packages/test/dart.js"></script>
</head>
<body>
<div id="granny">
<div>
<div id="parent">
<div>
<div id="child">child</div>
</div>
</div>
</div>
</div>
<app-element id="polymer-parent" unresolved>
<child-element id="polymer-child"></child-element>
</app-element>
</body>
</html>
where the file names needs to be the same as the Dart test file except .html as file extension and <link rel="x-dart-test" href="html_test.dart"> refers to your Dart test file. app-element, child-element are Polymer elements I used in my test (like your Foo)
Another update
I assume you need to use a custom HTML file (not tried without yet) for Polymer tests because otherwise there is no way to register an entry point for the transformer.
And then add the html file as entry point to the Polymer transformer section in pubspec.yaml
I am using Dart SDK 1.5.3 | polymer 0.11.0+5 | Windows x64. When I create a created a polymer application using the template 'Sample web application using the polymer library (mobile friendly) option' and run the application it works as expected with the counter incrementing when the button is clicked.
Assuming the page with the
<script type="application/dart">
export 'package:polymer/init.dart';
</script>
is index.html, attempting to refactor the application by removing the following lines from index.html
<click-counter count="5"></click-counter>
<link rel="import" href="clickcounter.html">
results in the following error:
Exception: NoSuchMethodError: method not found: 'whenPolymerReady'
Receiver: Instance of 'JsFunction'
Arguments: [Closure: () => dynamic] (package:polymer/src/loader.dart:115)
Breaking on exception: NoSuchMethodError: method not found: 'whenPolymerReady'
I have used the mechanism all the time in creating any polymer app, but has never seen such exception although I have seen documentation on the web involving Dart https://www.google.com.jm/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CBwQFjAA&url=http%3A%2F%2Fcode.google.com%2Fp%2Fdart%2Fissues%2Fdetail%3Fid%3D19161&ei=MZq8U_nlK42KyASBkYHgCw&usg=AFQjCNHOc6MD-mhzPbDOmg8Hp5NeqVufqQ&bvm=bv.70138588,d.aWw
The documentation suggested that this problem had resolved but it certainly is present in the current polymer I am using.
Each of your components (each file containing a <polymer-element> tag) must import polymer.html.
Make sure your clickcounter.html contains the line:
<link rel="import" href="packages/polymer/polymer.html" />
at the top. (It was breaking change in 0.11).
I'm clueless about these things, but for me I seemed to solve it by moving the following code:
<!-- after the Polymer elements imports -->
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script async src="packages/browser/dart.js"></script>
from the end of the <head>er, to just before the </body>.
Only my index.html now contains these lines. Lastly I also moved my custom element import above core-elements/paper-elements imports.
My dummy application created from the polymer template starts fine, but once I move the clickcounter to another directory, I start getting this error (I have updated references accordingly). My new folder structure is the following:
/lib
/src
/test
clickcounter.dart
clickcounter.html
/web
polytest.html
This is how the modified line looks:
<link rel="import" href="../lib/src/test/clickcounter.html">
I think I found the solution.
The clickcounter.html |imports link rel="import" href="packages/polymer/polymer.html|". In the entry-point file, there is no such import. When a component is imported into the entry-point, it seems that the polymer.html condition is satisfied. In the absence of a component the import has to placed directly in the file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample app</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer > 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="packages/polymer/polymer.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
<link rel="stylesheet" href="epimss_material_design.css">
</head>
<body>
<h1>Epimss material design</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
</div>
</body>
</html>
After that everything worked fine.
The same problem actually resurfaced in Dart SDK 1.6.0-dev.1.2 and was similarly solved. Still, I cannot say if its a bug or not. It simply works by adding this import. I suppose if a legitimate component is used that imports would allow the removal of the same import from the entry-point file. One of Dart or Dart-polymer expert might be able to explain what actually is happening. Looking forward to the in-depth explanation since this is the first time I have observed this issue.
I just ran into the same issue.
Are you sure your polymer imports are underneath your javascript imports?
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<!-- import the click-counter -->
<link rel="import" href="clickcounter.html">
instead of:
<!-- import the click-counter -->
<link rel="import" href="clickcounter.html">
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
I'm not in that development, but it seems like your problem is API or dependencies used in application.
I think your transformer settings is missing the entry page
transformers:
- polymer:
entry_points:
- example/index.html
Otherwise look closely at the output if there is any other warning or error that points to the root causel
I've just had exactly the same issue. It looked like the code stopped working without any change performed by me.
Root cause of the issue was, that there appeared a new version of polymer package.
So you should probably play with dependencies in your pubspec.yaml. I just explicitly changed the version of Polymer to some older one.
I have a dart package that contains three extensions of polymer element: tp-element-a, tp-element-b and tp-element-c. For each of these elements there is a html-file containing the markup of the element and a dart file for the code. The tp-element-c contains references to the tp-element-a and tp-element-b.
The package structure looks like this:
testpolymer
pubspec.yaml
- packages
- asset
tp-element-a.html
tp-element-b.html
tp-element-c.html
- lib
testpolymer.dart
tp-element-a.dart
tp-element-b.dart
tp-element-c.dart
- web
index.html
The definitiopn of the polymer elements are very simple:
tp-element-a.html
<polymer-element name="tp-element-a">
<template>
<h1>Hello Element A</h1>
</template>
<script type="application/dart" src="../lib/tp-element-a.dart"></script>
</polymer-element>
tp-element-a.dart
part of testpolymer;
#CustomTag("tp-element-a")
class TpElementA extends PolymerElement {
TpElementA.created() : super.created() {}
}
I skip the definitions of tp-element-b and tp-element-c. They are similar. With the only difference that tp-element-c uses the tp-element-a and tp-element-b within its template markup.
The file testpolymer.dart contains the definition of the library testpolymer:
library testpolymer;
import "package:polymer/polymer.dart";
part "tp-element-a.dart";
part "tp-element-b.dart";
part "tp-element-c.dart";
In the yaml file I decalre the dependency to the polymer package and add the polymer transformer:
name: testpolymer
description: A pub package
dependencies:
polymer: any
transformers:
- polymer:
entry_points: web/index.html
Last not least the index.html just contains the link to the tp-element-c.html and uses this element:
<html>
<head>
<link rel="import" href="../asset/tp-element-c.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<div id="sample_container_id">
<tp-element-c></tp-element-c>
</div>
</body>
</html>
So far so good. But when I run a pub build I get errors, that are probably all caused by organizing the dart files in a library:
packages/testpolymer/tp-element-a.dart:1:1:
Directive not allowed here.
part of testpolymer;
packages/testpolymer/tp-element-a.dart:4:26:
A class can't extend a malformed type.
Try correcting the malformed type annotation or removing the 'extends' clause.
class TpElementA extends PolymerElement {
packages/testpolymer/tp-element-a.dart:3:2:
Cannot resolve 'CustomTag'.
#CustomTag("tp-element-a")
So how is it possible to include the code for polymer elements in libraries?
If I don't organize the polymer code as a library, I get another error in tp-element-c.dart, which imports (if no library is used) the tp-element-a.dart and the tp-element-b.dart directly:
The imported libraries 'tp-element-a.dart' and 'tp-element-b.dart' should not have the same name ''
How can I resolve this puzzle?
You get the last error message, if you don't have in each dart file unique library uniquename; definitions. In your case names could be: tp-element-a, tp-element-b etc.
Short Version: The custom web component example in the first link isn't working for me. Why not? I'm running this in Dartium.
Long Version:
I copied and pasted this Dart Web UI example from this tutorial into the Dart Editor and tried to run it. Nothing showed up on the page. I've used dart before but not with web components, so I noticed that one difference between this code and other code I've written is that there was no <script src="packages/browser/dart.js"></script>, so I added that at the bottom. Now I got the error:
Internal error: Dart_Invoke: did not find top-level function 'main'.
I put a print statement in the main() function, and the text was printed before the error, which is strange. I guessed and tried adding main() {} inside the <script> tag that was in the custom component. That is, the script tag looked like:
<script type="application/dart">
import 'package:web_ui/web_ui.dart';
main() {print("in main in component");}
class CounterComponent extends WebComponent {
int count = 0;
void increment() { count++; }
}
</script>
Now that error goes away, and both print statements are printed, but nothing happens.
Here is the original tutorial code for your convenience:
<!DOCTYPE html>
<!--
Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file
for details. All rights reserved. Use of this source code is governed by a
BSD-style license that can be found in the LICENSE file.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css">
</head>
<body>
<element name="click-counter" constructor="CounterComponent" extends="div">
<template>
<button on-click="increment()">Click me</button>
<span>(click count: {{count}})</span>
</template>
<script type="application/dart">
import 'package:web_ui/web_ui.dart';
class CounterComponent extends WebComponent {
int count = 0;
void increment() { count++; }
}
</script>
</element>
<div class="well">
<div is="click-counter"></div>
</div>
<script type="application/dart">
main(){}
</script>
</body>
</html>
Web UI applications need to be "built" (usually by a script called build.dart in the project root, see this article for more details).
If I go to the Dart Editor, create a new test project using the wizard and selecting the Web Project (using the web_ui library) option, this creates the boilerplate including the build script.
Open up the html file and paste in the code from the github tutorial, replacing what is there already. When you save the file, the build.dart will be invoked, outputting the build version to /web/out/
Hit the run button, and the Dart Editor will open the app in Dartium (it knows to add /out/ to the URL).
I've been following the Dart web-ui codelab. When I embed dart source code inside a web component .html file, I'm not getting any static analysis or autocomplete support in the Dart Editor (there's an open bug for this http://code.google.com/p/dart/issues/detail?id=7449 ). Hence, I'm looking for a temporary workaround by using the src attribute.
According to the spec, the src attribute is supported for web components in Dart:
https://www.dartlang.org/articles/dart-web-components/spec.html#behavior. I tried linking to an external Dart library: given a foo.html web component for
<element name="x-foo-component" constructor="FooComponent" extends="div">
I'd like to link to a separate foo_embed.dart file in the same directory as my web component, which defines FooComponent, by adding:
<script type="application/dart" src="foo_embed.dart"></script>
within foo.html. Following the spec's suggestions, foo_embed.dart needs to be a Dart library, and would contain:
library foo_embed;
import 'package:web_ui/web_ui.dart';
class FooComponent extends WebComponent {
...
}
When I try this, running build.dart (from these instructions http://www.dartlang.org/articles/dart-web-components/tools.html) ends up only putting foo_embed.dart in out/ and there's no out/foo.html.dart generated for importing in application.dart.
As expected, pasting the contents of foo_embed.dart as an inline script inside foo.html directly (as done in the codelab) works with build.dart, and I can launch my webapp in Dartium, so I don't seem to have any other syntax problems in my project.
Do I probably have a simple syntax mistake somewhere? Or is this a temporary limitation of the Dart web components compiler? Thanks.
I can't reproduce your problem.
This works for me:
lib/foo.dart
library foo;
import 'package:web_ui/web_ui.dart';
class FooComponent extends WebComponent {
var foo = 'asddfg';
}
lib/foo.html
<element name="x-foo" constructor="FooComponent" extends="div">
<template>
<input value="{{ foo }}" />
</template>
<script type="application/dart" src="foo.dart"></script>
</element>
example/test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="components" href="packages/foo/foo.html" />
</head>
<body>
<x-foo></x-foo>
<script type="application/dart">main() {}</script>
<script type="text/javascript" src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>
Then I open up Dartium and go to .../example/out/test.html and I see an input with the data bound to it properly.