So I found this nice port of Chart.js as a polymer component on customelements.io but I'm not able to use them in my polymer.dart project. I copied all the files from the library project into my project and fixed the paths but the elements are not showing up. I get
Uncaught ReferenceError: Polymer is not defined chart-bar.html:27(anonymous function) chart-bar.html:27
(+ same error for the other files from the library proj).
I have no bower.json in my project (but a pubspec.yaml) and I'm wondering if I need one because the library project got one in there?
So what is the right way to get those polymer elements into my project?
There is currently no straight-forward way to use Polymer.js polymer elements in a Polymer.dart project.
You can try to generate Dart wrappers using https://github.com/dart-lang/custom-element-apigen / https://pub.dartlang.org/search?q=custom-element-apigen.
The code generation depends on proper JavaScript codedoc in the JS elements which is often incomplete but I have heard of people who were satisfied by the result (Dart core_elements/paper_elements are generated with this but there is also manual work involved).
Related
I'm porting an existing angular2 ts library to Dart.
Everything's working in Dartium but after building the app won't run in Chrome.
I'm getting an "The selector "demo-app" did not match any elements" error.
Not sure how to debug, any help would be appreciated!
Please see https://github.com/laagland/ng2-dart-pagination for the code.
- dart_to_js_script_rewriter
should be the last transformer.
Also add this setting to the Angular transformer
- angular2:
platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
See https://github.com/kwalrath/angular.io/blob/d87fb0995aafe5da1c2be708986d74828b65d55c/public/docs/_examples/forms/dart/pubspec.yaml for an example.
You should try to avoid mirrors in browser applications because it causes code bloat. I didn't chech all your code, but I saw the #MirrorsUsed annotation. If you need reflection, use the reflectable package instead.
I'm building up some Dart code that I would like to use in an app where it is essentially a library to the javascript. I'm wondering how I can specify which Dart files I'd like in the project to be part of the library. For example, theres Foo.dart and Bar.dart. How can I have the created product include both Foo.dart and Bar.dart in one file? I'm also concerned about tree shaking since none of the classes are instantiated in Dart.
There's also a Baz.dart, and I would like to have a different build for compiling Foo.dart and Baz.dart into a single file (though this is less important, as I can accomplish this would separate projects and some symlinking).
Thanks!
This use case (build a JavaScript library with Dart) isn't supported yet.
The reworked js-interop package is supposed to allow to do that but I don't know about it's current state.
I am trying to build a Dart client-side project using Polymer. I have followed numerous different instructions found online. For example I have followed the instructions given here:
http://radar.oreilly.com/2013/09/build-reusable-widgets-for-the-web-with-polymer-and-dart.html
When I do that and I compile using 'pub build' I find that the only dart files that are built to corresponding js files are ones that have a 'main' method in them. For example, no auto_complete.dart.js or auto_complete.dart.precompiled.js is created.
I can cause these files to be created by adding a 'main', but that does not seem right to me or to the responders in the following thread:
https://groups.google.com/a/dartlang.org/forum/#!topic/misc/8JfbwwCodrA
If I import the dart file into my main dart file then the javascript is included with that. However nothing shows for the templates and I see a message in the chrome 36 console saying auto_complete.dart.precompiled.js can't be found.
I would put all the code in here but the problem shows regardless of what code examples I use. For example it shows when using the code for this example, as-is except for upgrading the ObservableMixin to Observable and putting in the constructor:
http://radar.oreilly.com/2013/09/build-reusable-widgets-for-the-web-with-polymer-and-dart.html
Is there a way to use existing Polymer standard core elements , such as core-toolbar and core-menu, in Dart?
If you download the polymer project with bower you can find the javascript versions in /polymer/bower-components/.
core-toolbar, for instance, contains a core-toolbar.html and a metadata.html. These have <polymer-element> tags in them just like in Dart. Can these be adapted?
In the meantime, an official package has arrived:
http://pub.dartlang.org/packages/core_elements
And you can even have the paper elements of the material design:
http://pub.dartlang.org/packages/paper_elements
I found this issues:
https://code.google.com/p/dart/issues/detail?id=14098
This is not the post I talked about in my comment.
https://code.google.com/p/dart/issues/detail?id=13758
The linked discussion in this issue could be the post I remembered
the TodoMVC is a Dart demo project (https://www.dartlang.org/samples/) that uses some Polymer.js polymer_elements
see source in lib-elements directory
As mentioned in my comment alternatively you could use the Dart port of polymer_elements and polymer_ui_elements
https://github.com/ErikGrimes/polymer_elements
https://github.com/ErikGrimes/polymer_ui_elements
I don't want to wait anymore and would like to use a polymer element written in dart right away.
The problem is that I want to use it in an already existing app, that's running on JavaScript.
Can I just compile my polymer elements to JavaScript, include the whole thing in my current app, and use my <awesome-element> tags?
No, you have to build a Dart app to use Dart Polymer elements.
You can include JavaScript in a Dart/PolymerDart application.