How to compile a dart polymer project - dart

I written a website using dart and polymer, it runs well in Chromium, but cannot get it compiled to js.
The directory layout is like:
my_proj/
pubspec.yaml (Contents below)
lib/
some_code.dart ... (Used by index.dart, app.dart and custom_elem_x.dart)
asset/
3rd-party codes ... (CSS, JS lib, etc.)
web/
index.html (Traditional HTML, no polymer stuff)
app.html (Use lots of custom elements written in polymer)
script/
index.dart (Pure dart, nothing fancy, has a main())
app.dart (Has a main(), in which initPolymer() get called)
polymer/
custom_elem_1.html (Imported by app.html via \
custom_elem_1.dart <link rel="import" href="polymer/custom_elem_1.html">)
...
custom_elem_n.html
custom_elem_n.dart
pubspec.yaml:
name: blah
dependencies:
browser: any
polymer: any
...
transformers:
- polymer:
entry_points: web/app.html
- $dart2js:
minify: true
If I run pub build under my_proj/, there is no error as far as I can tell, (lots of warnings, though). But the index.html is static (just contents, no actions), and the custom element in app.html is not rendering. Any idea what caused this?
I am using dart-sdk 1.2.1 (pub --version) on Debian 7 32bit.
Thanks.
Edit
Managed to fix it by deleting all packages/ in project dir, and running pub get again. custom_element, shadow_dom, html5lib get updated to 0.9.2, seems these updates got it fixed, because I put get several times before, and nothing worked.

Related

Do not resolve dependencies in dart 2.0 sample app project

Installed JetBrains WebStorm 2018.1 EAP
Installed Dart using a third-party installer by link from official site
Created a new project, with default settings. Dart version 2.0.0-dev.20.0. Check Generate sample content checkbox and select Dart Web App. Create.
Press Run.
Get message:
No pubspec.lock file found, please run "pub get" first.
Press 'get dependences'. In the window below, I get the message:
Working dir: C:\Users\Anton\Source\Front\untitled "C:\Program
Files\Dart\dart-sdk\bin\pub.bat" get Resolving dependencies...
Overriding the upper bound Dart SDK constraint to <=2.0.0-dev.20.0 for
the following packages:
browser
To disable this you can set the PUB_ALLOW_PRERELEASE_SDK system
environment variable to false, or you can silence this message by
setting it to quiet.
+ browser 0.10.0+2 Downloading browser 0.10.0+2... Process finished with exit code -1 073 741 795
I try to execute pub get through the terminal - and get the same message
I add environment variable PUB_ALLOW_PRERELEASE_SDK, like this: set PUB_ALLOW_PRERELEASE_SDK=false, but but after nothing has changed
I try download manually, but I can not find a description of where these files should be located, relative to the project
I'm new to the frontend and especially to dart so most likely I miss some small detail
pubspec.yaml
name: untitled
version: 0.0.1
description: A sample web application
dependencies:
browser: any
dev_dependencies:
# unittest: any
untitled.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="untitled.css">
</head>
<body>
<div id="sample_container_id">
<p id="sample_text_id">Click me!</p>
</div>
<script type="application/dart" src="untitled.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
As Gunter said, the warning about PUB_ALLOW_PRERELEASE_SDK is to be expected while using a pre-release Dart SDK.

package "dart_to_js_script_rewriter" is not a dependency

I just started learning dart.
first I created an angular2-dart based project from https://angular.io/docs/dart/latest/quickstart.html and it worked properly.
now I want to add auth0-lock dart package from https://pub.dartlang.org/packages/auth0_lock, so I modified pubspec.yaml to the following:
name: go_dart_angular2_zingchart
description: Go Dart Angular2 with ZingChart Started Kit
version: 0.0.1
environment:
sdk: '>=1.13.0 <2.0.0'
dependencies:
angular2: ^2.0.0-beta.18
browser: ^0.10.0
dart_to_js_script_rewriter: ^1.0.1
auth0_lock: ^0.1.0
transformers:
- angular2:
platform_directives:
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
platform_pipes:
- 'package:angular2/common.dart#COMMON_PIPES'
entry_points: client/web/main.dart
- dart_to_js_script_rewriter
and now when I execute pub get I get the following error:
Error on line 15, column 3 of ../../../.pub-cache/hosted/pub.dartlang.org/auth0_lock-0.1.0/pubspec.yaml: Error loading transformer "dart_to_js_script_rewriter": package "dart_to_js_script_rewriter" is not a dependency.
- dart_to_js_script_rewriter
^^^^^^^^^^^^^^^^^^^^^^^^^^
since I'm new to dart and not entirely sure what I'm doing.. I have no idea how to fix this :)
any ideas ?
thanks!
I get the same error when adding auth0_lock: ^0.1.0 to my dependencies and running pub get. The error message says that "dart_to_js_script_rewriter" is not a dependency in the pubspec.yaml of the auth0_lock package. It looks like it's added under dev_dependecies if you look here. Dev dependencies of any dependent packages are ignored. Pub only gets your package’s dev dependencies.
So I think this is a problem in their package.
So, what I did was I went to https://github.com/andresaraujo/auth0_lock.dart and cloned the package, added it into my own project root in a directory called auth0_lock. And then, in my pubspec.yaml i put:
auth0_lock:
path: auth0_lock
After that I can import it using
import 'package:auth0_lock/auth0_lock.dart';

Pub get 'Connection closed before full header was received' Angular + Polymer

I am trying to get packages from the PUB with the following:
name: 'ch_padart'
version: 0.0.1
dependencies:
angular: "1.1.0"
angular_node_bind: any
polymer: ">=0.15.5+2 <0.16.0"
core_elements: ">=0.6.0+4 <0.7.0"
paper_elements: ">=0.6.1 <0.7.0"
web_components: ">=0.9.0 <0.11.0"
browser: ">=0.10.0+2 <0.11.0"
dev_dependencies:
unittest: ">=0.11.0+5 <0.12.0"
mock: ">=0.11.0+2 <0.12.0"
transformers:
- angular:
html_files:
- web/index.html
- polymer:
entry_points: web/index.html
lint: false
but the end result is always 'Connection closed before full header was received'
If you remove angular OR polymer (and elements) and then run pub get, there is no issue and all download and runs fine. No other warnings are displayed and --verbose yields nothing helpful that I can see.
When you run pub get -v from command line you will see that pub is working quite hard but can't find a compatible set of dependencies. There was a similar issue recently that the I guess the collection package was required in different dependencies with non-overlapping version constraints.
This is quite common when using Angular with Polymer.
You might need to investigate the dependencies manually to find the cause.
Maybe you get some feedback from pub get when you remove all dependency constraints and then start adding them again one by one.
the pubviz packages helps to resolve this kind of issue as well: https://pub.dartlang.org/packages/pubviz

Linter warnings when importing packages within dart libs

I am working on a big Dart project that includes a web frontend as well as a couple of custom libs. We are using the recommended folder structure as described here.
my_app/
lib/
my_library1/
example/
lib/
my_library1.dart
my_library1.html
pubspec.yaml
...
web/
pubspec.yaml
And we have several libraries in our lib folder that we all import in our main pubspec.yaml like this:
dependencies:
my_library1:
path: lib/my_library1
This is all working just fine, but when I use pub build to generate a JS build, I get a ton of Linter warnings about how to import packages correctly for each lib we have.
For example, the my_library1 lib has a polymer import in the my_library1.html file that looks like this:
<link rel="import" href="../../packages/polymer/polymer.html">
The warning for this would be:
[Warning from polymer (Linter) on my_app|lib/my_library1/lib/my_library1.html]:
line 1, column 1 of lib\my_library1\lib\my_library1.html: Invalid URL to reach to another package: ../../packages/polymer/polymer.html. Path reaching to other packages must first reach up all the way to the packages directory. For example, try changing the URL to: ../../../../packages/polymer/polymer.html. See http://goo.gl/5HPeuP#code_transformers_2 for details.
<link rel="import" href="../../packages/polymer/polymer.html">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Now, if I change that line to what they suggest (../../../../packages/polymer/polymer.html), I get this error instead:
[Warning from polymer (Linter) on my_library1|lib/my_library1.html]:
line 1, column 1 of lib\my_library1.html: Invalid URL to reach to another package: ../../../../packages/polymer/polymer.html. Path reaching to other packages must first reach up all the way to the packages directory. For example, try changing the URL to: ../../packages/polymer/polymer.html. See http://goo.gl/5HPeuP#code_transformers_2 for details.
<link rel="import" href="../../../../packages/polymer/polymer.html">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
So no matter how I do it, it's wrong. Interestingly, the source file for the warning changes from my_library1|lib\my_library1.html to my_app|lib\my_library1\lib\my_library1.html.
Does this make sense to anyone?
btw, I have been reading up on this stuff on various Dart sites (#1, #2, #3), but to no avail.
I am using Dart 1.7.2 (STABLE) and polymer 0.15.3+2
Your package should not contain more than one pubspec.yaml file. The lib/ folder should have only dart files and other assets, such as html, js and css files. For example, you can organize your project as follow:
my_app/
lib/
my_library1/
my_library1.dart
my_library1.html
...
web/
pubspec.yaml //you do not need to include my_library1 as a dependency here
Furthermore, if you want to use my_library1 in others packages, you need to move it to its own package:
my_library1/
example/
lib/
my_library1.dart
my_library1.html
pubspec.yaml
my_app/
lib/
...
web/
pubspec.yaml //you need to include my_library1 as a dependency here
In either case, my_library1.html can use the following import:
<link rel="import" href="../../packages/polymer/polymer.html">

Can Web UI template be added to a Dart library package?

The generated sample content for a web_ui applications adds xclickcounter.dart AND xclickcounter.html in the web folder. This is an Application Package.
How may I add these to the lib folder to be used as a package that other pacages will depend on? Is it possible?
(TL;DR - just drag the xclickcounter files into a lib folder, and use that package in another package)
Yes, this is possible. You would structure your projects like this:
xclickcounter/
pubpec.yaml
build.dart
lib/
xclickcounter.html
xclickcounter.css
xclickcounter.dart
web/
test.html -- if you wanted to test it in this project
...elsewhere...
myAppProject/
pubspec.yaml
build.dart
web/
myapp.html
myapp.dart
myapp's pubspec.yaml would contain
dependencies:
xclickcounter:
path: ..\..[relative_or_absolute]..\xclickcounter
[or deploy xclickcounter to git]
myapp.html would contain something like:
<head>
<link rel="components" href="package:xclickcounter/xclickcounter.html">
</head>
<body>
<x-click-counter></x-click-counter>
...
</body>

Resources