Dart pub
This package is a community effort to bring support for Polymer 2 and latest HTML standards to Dart (DDC).
It features :
polymer 2.0.0 (web components 1.0)ES6 output codeimd (require js implementation using html imports)bowerPolymerize works on every platforms where DDC runs that's MacOS and Linux for now.
The upcoming version of pub will support DDC build and polymerize will support it too thus extending the platform where you can use it.
Polymerize uses DDC and Polymer-2, this means that it will only work on modern browsers. So far only chrome and firefox have been tested but Safari should work too along with latest IE11 builds.
Eventually some "transpiling" support can be added along with some optimizing post processing (like vulcanize or similar) could be added to the build chain to broaden the compatibility range.
UPDATE : after moving to PUB+DDC there's something broken with firefox , will fix soon. But I wanted to publish this release quickly after 1.24 was officially released.
In order to build a project with polymerize you have to add the following transformer and dev dependencies to your pubspec:
dev_dependencies:
- polymerize: ^0.9.0
transformers:
- polymerize:
entry-point: web/index.dart
The entry point is the main dart file. Your html file should look as this:
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<script type="application/dart" src="index.dart"></script>
<script src="polymerize_require/start.js"></script>
</head>
...
</html>
See the demo todo project for more details.
pub build --web-compiler dartdevc (or add the necessary entries in the pubspec as well) DISCLAIMER : When using dartdevc for production build you will loose al the optimizations that dart2js normally makes to your code. This means that you will have bigger fat code even if modular and loaded only on demand.
A sample project illustrating how to build polymer-2 components using polymerize can be found here :
See the README for more information.
This is a sample component definition:
import 'package:polymer_element/polymer_element.dart';
import 'package:my_component/other_component.dart';
@PolymerRegister('my-tag',template:'my-tag.html')
abstract class MyTag extends PolymerElement {
int count = 0; // <- no need to annotate this !!!
onClickIt(Event ev,details) { // <- NO need to annotate this!!!!
count = count + 1; // <- no need to call `set` API , magical setter in action here
}
@Observe('count')
void countChanged(val) {
print("Count has changed : ${count}");
}
MyTag() { // <- Use a simple constructor for created callback !!!
print("HELLO THERE !")
}
factory MyTag.tag() => Element.tag('my-tag'); // <- If you want to create it programmatically use this
connectedCallback() {
super.connectedCallback(); // <- super MUST BE CALLED if you override this callback (needed by webcomponents v1) !!!!
}
}
The Html template is just the usual dom-module template without any JS code. The import dependencies will generate the appropriate html imports so there is no need to add them to
the template.
The index.html should preload imd, webcomponents polyfill and polymer.html (see the demo).
To import a bower component and use it in your project simply create a stub (that can created automatically, see below) for it and use the @BowerImport annotation along with @PolymerRegister with native=true, for instance:
@PolymerRegister('paper-button',native:true)
@BowerImport(ref:'PolymerElements/paper-button#2.0-preview',import:"paper-button/paper-button.html",name:'paper-button')
abstract class PaperButton extends PolymerElement implements imp0.PaperButtonBehavior {
/**
* If true, the button should be styled with a shadow.
*/
external bool get raised;
external set raised(bool value);
}
During the build phase polymerize will check any @BowerImport annotation on classes of dependencies, generate a bower.json file (using resolutions if you need to override something) and then
runs bower install.
You can also automatically generate a stub from the HTML polymer component using polymerize generate_wrapper, for instance:
pub run polymerize:polymerize generate-wrapper --component-refs comps.yaml --dest-path out -p polymer_elements --bower-needs-map Polymer.IronFormElementBehavior=package:polymer_elements/iron_form_element_behavior.dart
(You have to add polymerize as a dev dependency of your project).
The generator uses a yaml file describing the components to analyze passed through the component-refs options (see gen/comps.yam in this repo for an example).
The project polymerize_elements is an example of wrappers generated using this tool for the polymer-elements components.
After complilation everything will be found in the bazel output folder (bazel-bin), ready to be used.
Builder for build (use polymerizeBuilder() to generate a builder for polymerize)skip-generate: true to skip generation polymer_elements and html5 toobower_resolutions.yaml optional ovverride for polymerize init.packages (dart 1.20)paper_dialog.dart)polymerizeweb assets (not only index.html)amd is actually fully supported)Add this to your package's pubspec.yaml file:
dependencies:
polymerize: "^0.9.8"
You can install packages from the command line:
with pub:
$ pub get
with Flutter:
$ flutter packages get
Alternatively, your editor might support pub get or packages get.
Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:polymerize/polymerize.dart';
| Version | Uploaded | Documentation | Archive |
|---|---|---|---|
| 0.9.8 | Nov 16, 2017 |
|
|
| 0.9.7 | Oct 31, 2017 |
|
|
| 0.9.6 | Sep 10, 2017 |
|
|
| 0.9.5 | Jul 24, 2017 |
|
|
| 0.9.4 | Jun 30, 2017 |
|
|
| 0.9.3 | Jun 23, 2017 |
|
|
| 0.9.2 | Jun 22, 2017 |
|
|
| 0.9.1+1 | Jun 18, 2017 |
|
|
| 0.9.1 | Jun 18, 2017 |
|
|
| 0.9.0+1 | Jun 13, 2017 |
|
|
We analyzed this package on Apr 23, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
|
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
66 | / 100 |
|
Health:
Code health derived from static analysis.
[more]
|
98 | / 100 |
|
Maintenance:
Reflects how tidy and up-to-date the package is.
[more]
|
94 | / 100 |
|
Overall score:
Weighted score of the above.
[more]
|
81 |
Detected platforms: Flutter, other
Primary library:
package:polymerize/polymerize.dartwith components:io,isolate,build.
Use constrained dependencies.
The
pubspec.yamlcontains 10 dependencies without version constraints. Specify version ranges for the following dependencies:archive,args,barback,code_transformers,homedir,logging_handlers,package_resolver,resource,stack_trace,test.
Fix analysis and formatting issues.
Analysis or formatting checks reported 56 hints.
Strong-mode analysis of
lib/init_transformer.dartgave the following hint:line: 4 col: 1
'barback' is deprecated and shouldn't be used.Strong-mode analysis of
lib/polymerize.dartgave the following hint:line: 109 col: 47
'allowMultiple' is deprecated and shouldn't be used.Similar analysis of the following files failed:
lib/src/code_generator.dart(hint)lib/src/dart_file_command.dart(hint)lib/src/dep_analyzer.dart(hint)lib/src/pub_command.dart(hint)lib/src/transformers.dart(hint)lib/src/utils.dart(hint)lib/src/wrapper_generator.dart(hint)lib/test_support.dart(hint)lib/transformer.dart(hint)
The description is too short.
Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.
Package is pre-v1 release.
While there is nothing inherently wrong with versions of
0.*.*, it usually means that the author is still experimenting with the general direction API.
Maintain an example.
Create a short demo in the
example/directory to show how to use this package. Common file name patterns include:main.dart,example.dartor you could also usepolymerize.dart.
Use analysis_options.yaml.
Rename old
.analysis_optionsfile toanalysis_options.yaml.
| Package | Constraint | Resolved | Available |
|---|---|---|---|
| Direct dependencies | |||
| Dart SDK | >=1.8.0 <2.0.0 | ||
| archive | any | 1.0.33 | |
| args | any | 1.4.2 | |
| barback | any | 0.15.2+15 | |
| bazel_worker | ^0.1.4 | 0.1.9 | |
| build | ^0.10.2 | 0.10.2+1 | 0.12.2 |
| build_runner | ^0.4.0 | 0.4.0+3 | 0.8.3 |
| code_builder | ^1.0.2 | 1.0.4 | 3.0.3 |
| code_transformers | any | 0.5.1+4 | |
| glob | ^1.1.3 | 1.1.5 | |
| homedir | any | 0.0.4 | |
| html | ^0.13.2 | 0.13.3 | |
| html5 | ^0.1.7 | 0.1.8 | |
| logging_handlers | any | 0.8.0 | |
| package_resolver | any | 1.0.2 | |
| resource | any | 2.1.2 | |
| source_gen | ^0.7.0 | 0.7.5+1 | 0.8.1 |
| stack_trace | any | 1.9.2 | |
| test | any | 0.12.35 | |
| Transitive dependencies | |||
| analyzer | 0.30.0+4 | 0.31.1 | |
| async | 1.13.3 | 2.0.6 | |
| boolean_selector | 1.0.3 | ||
| build_barback | 0.4.0+1 | 0.5.0+3 | |
| charcode | 1.1.1 | ||
| cli_util | 0.1.2+1 | ||
| collection | 1.14.9 | ||
| convert | 2.0.1 | ||
| crypto | 2.0.2+1 | ||
| csslib | 0.14.1 | ||
| dart2ts | 0.0.1 | ||
| dart_style | 1.0.9+1 | 1.0.10 | |
| fixnum | 0.10.7 | ||
| front_end | 0.1.0-alpha.4.1 | 0.1.0-alpha.11 | |
| func | 1.0.0 | ||
| http | 0.11.3+16 | ||
| http_multi_server | 2.0.4 | ||
| http_parser | 3.1.1 | ||
| intl | 0.15.6 | ||
| io | 0.3.2+1 | ||
| isolate | 1.1.0 | 2.0.0 | |
| js | 0.6.1 | ||
| kernel | 0.3.0-alpha.1.1 | 0.3.0-alpha.11 | |
| logging | 0.11.3+1 | ||
| matcher | 0.12.2 | ||
| meta | 1.1.2 | ||
| mime | 0.9.6 | ||
| multi_server_socket | 1.0.1 | ||
| node_preamble | 1.4.0 | ||
| package_config | 1.0.3 | ||
| path | 1.5.1 | ||
| plugin | 0.2.0+2 | ||
| polymerize_common | 1.0.2 | ||
| pool | 1.3.4 | ||
| protobuf | 0.7.2 | ||
| pub_semver | 1.3.7 | ||
| shelf | 0.6.8 | 0.7.2 | |
| shelf_packages_handler | 1.0.3 | ||
| shelf_static | 0.2.7 | ||
| shelf_web_socket | 0.2.2 | ||
| source_map_stack_trace | 1.1.4 | ||
| source_maps | 0.10.4 | ||
| source_span | 1.4.0 | ||
| stream_channel | 1.6.5 | ||
| stream_transform | 0.0.11 | ||
| string_scanner | 1.0.2 | ||
| term_glyph | 1.0.0 | ||
| typed_data | 1.1.5 | ||
| utf | 0.9.0+4 | ||
| watcher | 0.9.7+7 | ||
| web_socket_channel | 1.0.7 | ||
| yaml | 2.1.13 | ||