polymer 0.16.3+3

Polymer.dart

Polymer.dart is a set of comprehensive UI and utility components for building web applications. With Polymer.dart's custom elements, templating, data binding, and other features, you can quickly build structured, encapsulated, client-side web apps.

Polymer.dart is a Dart port of Polymer created and maintained by the Dart team. The Dart team is collaborating with the Polymer team to ensure that polymer.dart elements and polyfills are fully compatible with Polymer.

Polymer.dart replaces Web UI, which has been deprecated.

Learn More

  • The Polymer.dart homepage contains a list of features, project status, installation instructions, tips for upgrading from Web UI, and links to other documentation.

  • See our TodoMVC example by opening up the Dart Editor's Welcome Page and selecting "TodoMVC".

  • For more information about Dart, see http://www.dartlang.org/.

  • When you use this package, you automatically get the polymer_expressions package, which provides an expressive syntax for use with templates.

Try It Now

Add the polymer.dart package to your pubspec.yaml file:

dependencies:
  polymer: ">=0.16.0 <0.17.0"

Instead of using any, we recommend using version ranges to avoid getting your project broken on each release. Using a version range lets you upgrade your package at your own pace. You can find the latest version number at https://pub.dartlang.org/packages/polymer.

Building and Deploying

To build a deployable version of your app, add the polymer transformers to your pubspec.yaml file:

transformers:
- polymer

Then, run pub build. The polymer transformers assume all files under web are possible entry points, this can be adjusted with arguments in your pubspec.yaml file. For example, you can say only web/index.html is an entry point as follows:

transformers:
- polymer:
    entry_points: web/index.html

Here is a list of arguments used by the polymer transformers: * js: whether to load JS code directly. By default polymer converts your app's html file to load the compiled JS code directly. Setting this parameter to false will keep a dart script tag and the dart.js script tag on the page.

  • csp: whether to load a Content Security Policy (CSP) compliant JS file. Dart2js generates two JS files, one that is not CSP compilant and one that is. By default, polymer uses the former becuase it's likely more efficient, but you can choose the latter by setting this flag.

  • entry_points: can be a list of entry points or, for convenience, a single entry point as shown above.

For example, this specification includes 2 entrypoints and chooses the CSP compliant JS file:

transformers:
- polymer:
    entry_points:
    - web/index.html
    - web/index2.html
    csp: true

Testing

Polymer elements can be tested using either the original unittest or new test packages. In both cases the easiest way to create a test is by using the default main from polymer/init.dart and then defining all your tests inside of a method marked with an @whenPolymerReady annotation.

import 'package:polymer/polymer.dart';
export 'package:polymer/init.dart';

@whenPolymerReady
void runTests() {
  // Define your tests here.
}
 

You will also need to define a custom html file for your test (see the README for the testing package you are using for more information on this).

Note: If you are using the new test package, it is important that you add the test transformer after the polymer transformer, so it should look roughly like this:

transformer:
- polymer:
    entry_points:
      - test/my_test.html
- test/pub_serve:
    $include: test/**_test{.*,}.dart

Contacting Us

Please file issues in our Issue Tracker or contact us on the Dart Web UI mailing list.

We also have the Web UI development list for discussions about internals of the code, code reviews, etc.

0.16.3+3

  • Inject the polyfills after any &lt;base&gt; tags in the head.

0.16.3+2

  • Fix invalid warning about missing polymer.html import from the linter.
  • Update logging package to &lt;0.12.0.

0.16.3+1

  • Update observe to 0.13.1.

0.16.3

  • Update analyzer to &lt;0.26.0.

0.16.2

  • Add support for the new link[rel="x-dart-test"] tags from the test package to the transformer.

  • The Future returned from the default main method in package:polymer/init.dart now guarantees that it will not complete until all @initMethod and @whenPolymerReady functions have been executed. This is to support writing tests inside these methods using the new test package.

  • Fix the bootstrap file to return the original result of main.

0.16.1+4

  • Use polymer_interop for everything polymer js related. Projects which only provide/use wrappers around js elements should be able to switch to using that package instead of this one.

0.16.1+3

  • Update polymer js version to 0.5.5.

0.16.1+2

  • Update pubspec from html5lib to html.

0.16.1+1

  • Switch html5lib package dependency to html.

0.16.1

  • Added @whenPolymerReady annotation for functions. This will call the function once Polymer.onReady completes, reducing the boilerplate in entry points to the following:

    import 'package:polymer/polymer.dart';
    export 'package:polymer/init.dart';
    
    @whenPolymerReady
    void onReady() {
      /// Custom setup code here.
    }
    

0.16.0+7

  • Switch to using initWebComponents internally which gives better guarantees around development time ordering of initializers. This should fix most issues related to element registration order.

0.16.0+6

  • Update args constraint.
  • Pass bindingStartDelimiters to the ImportInlinerTransformer so it can handle bindings in urls appropriately, #35.

0.16.0+5

  • Update web_components constraint.

0.16.0+4

  • Fix static configuration for exported libraries.

0.16.0+3

  • Increase upper bound of smoke package to &lt;0.4.0.

0.16.0+2

  • Update the polyfill injector to work properly for entry points that live in sub-folders.

0.16.0+1

  • Update analyzer and codetransformers versions and use new mock sdk from codetransformers.

0.16.0

  • initPolymer now returns a Future&lt;Zone&gt; instead of a Zone. This will likely affect most polymer applications.

    Given a current program:

    main() =&gt; initPolymer().run(realMain);
    realMain() =&gt; ...
    

    This should be translated to:

    main() =&gt; initPolymer().then((zone) =&gt; zone.run(realMain));
    realMain() =&gt; ...
    

    Or alternatively, you can use an @initMethod:

    main() =&gt; initPolymer();    
    
    @initMethod
    realMain() =&gt; ...
    
  • Dropped support for the experimental bootstrap.

  • The polymer transformer is now integrated with the initialize transformer. This means you can now use @HtmlImport on library directives. This allows producers of elements to declare their own html dependencies so consumers don't have to know about your html imports at all. See web_components 0.10.2 for more information on @HtmlImport.

  • The startPolymer method no longer takes a deployMode argument. This is meant as an internal-only method and should not affect apps. It also now returns a Future.

  • The transformer has been heavily refactored and may behave slightly differently. Please file any bugs related to this at https://github.com/dart-lang/polymer-dart/issues/new.

0.15.5+4

  • Fix for #23 (0.15.5+3 missed an invocation of the observe transformer).

0.15.5+3

  • Pass more state to the observe transformer so it won't output log files in release mode.

0.15.5+2

  • Update duplicate css file message.

0.15.5+1

  • Changes order in which CustomTags are registered to guarantee that the order is deterministic and that within a library superclasses are registered before subclasses. This fixes 17.

0.15.5

  • Update to polymer js version 0.5.2. This fixes 11.

0.15.4

  • Fix template if when using template attribute 209.

  • Renamed injectBoundHTML to injectBoundHtml and changed its signature to use named instead of positional optional arguments. Also added support for custom NodeValidator and/or TreeSanitizer. The old version still exists for now with an @deprecated annotation.

0.15.3+1

  • Fix logic for detecting when the compiler is linting within an auto-binding-dart template element. This removes some false positive warnings.

0.15.3

  • Narrow the constraint on observe to ensure that new features are reflected in polymer's version.

0.15.2

  • Upgraded to polymer js version 0.5.1. Dart Note: Since dirty checking is only a development feature for Polymer Dart, we did not include the functionality to stop dirty checks in inactive windows.

  • polymer.js is now the unminified version, and polymer.min.js is the minified version.

  • Fixed bug where polymer js was creating instances of extended elements in order to check if they had been registered. All dart custom elements now get registered with polymer js using the HTMLElement prototype.

0.15.1+5

  • Increase code_transformers lower bound and use shared transformers from it.

0.15.1+4

  • Fix double-registration bug when using exports 21439.

0.15.1+3

  • Make sure that dart_support.js is always appended after platform.js, 21435.

0.15.1+2

  • Handle and warn about cases where a script file is included twice from the same entrypoint 21332.

0.15.1+1

  • Fix typo in error message polymer#42

0.15.1

  • Upgraded to polymer 0.4.2
  • No need to include dart_support.js in your entrypoints anymore.

0.15.0+1

  • Widen web_components version constraint.

0.15.0

  • Upgraded to polymer 0.4.1
  • Added Polymer.forceReady method. This forces a ready state regardless of whether or not there are still polymer-element declarations waiting for their class definitions to be loaded.

  • Added Polymer.waitingFor method. This returns a list of all polymer-element declarations that are still waiting for their class definitions to be loaded.

  • Add runtime checking of the waitingFor queue and print to the console if a deadlock situation is suspected to help diagnose the white screen of death.

  • Added injectBoundHTML instance method. This can be used to dynamically inject html that is bound to your current element into a target element.

0.14.3

  • Warn if the same css file is inlined more than once, 19996.

  • Don't start moving elements from head to body until we find the first import, 20826.

  • Add option to not inject platform.js in the build output 20865. To use, set inject_platform_js to false in the polymer transformer config section of your pubspec.yaml:

    transformers:
    - polymer:
        inject_platform_js: false
        ...
    

0.14.2+1

  • Fix findController function for js or dart wrapped elements. This fixes event bindings when using paper-dialog and probably some other cases, 20931.

0.14.2

  • Polymer will now create helpful index pages in all folders containing entry points and in their parent folders, in debug mode only 20963.

0.14.1

  • The build.dart file no longer requires a list of entry points, and you can replace the entire file with export 'package:polymer/default_build.dart'; 20396.

  • Inlined imports from the head of the document now get inserted inside a hidden div, similar to the js vulcanizer 20943.

0.14.0+1

  • Small style improvements on error/warnings page.

0.14.0

  • Upgraded to polymer 0.4.0 ([polymer-dev#d66a86e][d66a86e]).
  • The platform.js script is no longer required in Chrome or Dartium (version 36). You can now remove this from your projects for development, and it will be injected when running pub build or pub serve. If you would like the option to not inject platform.js at all in the built output (if you are deploying to chrome exclusively), please star this bug http://dartbug.com/20865.

  • Fixed invalid linter warning when using event handlers inside an auto-binding-dart template, 20913.

0.13.1

  • Upgraded error messages to have a unique and stable identifier. This requires a version of code_transformers newer than 0.2.3.

  • Upgraded minimum version constraint on args to 0.11.0.

0.13.0+3

  • Added a warning about flashes of unstyled content if we can detect a situation that would cause it 20751.

0.13.0+2

  • Update internal transformers to delete .concat.js and .map files when in release mode, saving about 1MB of space in the built output.

0.13.0+1

  • Bug fix for http://dartbug.com/18171. Elements that extend other elements but don't have a template will still inherit styles from those elements.

  • Bug fix for http://dartbug.com/20544. Better runtime logging when attributes are defined on an element but have no corresponding property on the class.

0.13.0

  • Update to match polymer 0.3.5 ([polymer-dev#5d00e4b][5d00e4b]). There was a breaking change in the web_components package where selecting non-rendered elements doesn't work, but it shouldn't affect most people. See https://github.com/Polymer/ShadowDOM/issues/495.

0.12.2+1

  • Small bug fix for polymer:new_element

0.12.2

  • Fix for 20539. Log widget will now html escape messages.

  • Fix for 20538. Log widget will now surface lint logs from imported files.

  • Backward compatible change to prepare for upcoming change of the user agent in Dartium.

  • pub run polymer:new_element now supports specifying a base class. Note: only native DOM types and custom elements written in Dart can be extended. Elements adapted from Javascript (like core- and paper- elements) cannot be extended.

  • other bug fixes in polymer:new_entry.

0.12.1

  • New: When running in pub-serve, any warnings and errors detected by the polymer transformers will be displayed in the lower-right corner of your entrypoint page. You can opt-out by adding this option to your pubspec:

    transformers:
    - polymer:
        ...
        inject_build_logs_in_output: false
    
  • New: there are now two template generators in the polymer package! On any project that depends on polymer, you can create template files for a new custom element by invoking:

    pub run polymer:new_element element-name [-o output_dir]
    

    And, if you invoke:

    pub run polymer:new_entry web/index.html
    

    we will create a new entry-point file and add it to your pubspec for you.

  • Added the ability to override the stylesheet inlining behavior. There is now an option exposed in the pubspec.yaml called inline_stylesheets. There are two possible values, a boolean or a map. If only a boolean is supplied then that will set the global default behavior. If a map is supplied, then the keys should be file paths, and the value is a boolean. You can use the special key 'default' to set the default value.

    For example, the following would change the default to not inline any styles, except for the foo.css file in your web folder and the bar.css file under the foo packages lib directory:

    transformers:
    - polymer:
        ...
        inline_stylesheets:
            default: false
            web/foo.css: true
            packages/foo/bar.css: true
    
  • Bug fix for http://dartbug.com/20286. Bindings in url attributes will no longer throw an error.

0.12.0+7

  • Widen the constraint on unittest.

0.12.0+6

  • Widen the constraint on analyzer.
  • Support for _src and similar attributes in polymer transformers.

0.12.0+5

  • Raise the lower bound on the source_maps constraint to exclude incompatible versions.

0.12.0+4

  • Widen the constraint on source_maps.

0.12.0+3

  • Fix a final use of getLocationMessage.

0.12.0+2

  • Widen the constraint on barback.

0.12.0+1

  • Switch from source_maps' Span class to source_span's SourceSpan class.

0.12.0

  • Updated to match polymer 0.3.4 ([polymer-dev#6ad2d61][6ad2d61]), this includes the following changes: * added @ComputedProperty * @published can now be written using the readValue/writeValue helper methods to match the same timing semantics as Javscript properties. * underlying packages are also updated. Some noticeable changes are: * observe: path-observers syntax is slightly different * polymer_expressions: updating the value of an expression will issue a

     notification.
    
    • template_binding: better NodeBind interop support (for two-way bindings with JS polymer elements).

  • Several fixes for CSP, including a cherry-pick from polymer.js [commit#3b690ad][3b690ad].

  • Fix for 17596
  • Fix for 19770

0.11.0+5

  • fixes web_components version in dependencies

0.11.0+4

  • workaround for bug 19653

0.11.0+3

  • update readme

0.11.0+2

  • bug fix: event listeners were not in the dirty-checking zone
  • bug fix: dispatch event in auto-binding

0.11.0+1

  • Added a workaround for bug in HTML imports (issue 19650).

0.11.0

  • breaking change: platform.js and dart_support.js must be specified in your entry points at the beginning of &lt;head&gt;.

  • breaking change: polymer.html is not required in entrypoints, but it is required from files that use &lt;polymer-element&gt;.

  • breaking change: enteredView/leftView were renamed to attached/detached. The old lifecycle methods will not be invoked.

  • breaking change: Event bindings with @ are no longer supported.
  • breaking change: @published by default is no longer reflected as an attribute by default. This might break if you try to use the attribute in places like CSS selectors. To make it reflected back to an attribute use @PublishedProperty(reflect: true).

0.10.1

  • Reduce the analyzer work by mocking a small subset of the core libraries.

0.10.0+1

  • Better error message on failures in pub-serve/pub-build when pubspec.yaml is missing or has a wrong configuration for the polymer transformers.

0.10.0

  • Interop with polymer-js elements now works.
  • Polymer polyfills are now consolidated in package:web_components, which is identical to platform.js from http://polymer-project.org.

  • The output of pub-build no longer uses mirrors. We replace all uses of mirrors with code generation.

  • breaking change: Declaring a polymer app requires an extra import to &lt;link rel="import" href="packages/polymer/polymer.html"&gt;

  • breaking change: "noscript" polymer-elements are created by polymer.js, and therefore cannot be extended (subtyped) in Dart. They can still be used by Dart elements or applications, however.

  • New feature: @ObserveProperty('foo bar.baz') myMethod() {...} will cause myMethod to be called when "foo" or "bar.baz" changes.

  • Updated for 0.10.0-dev package:observe and package:template_binding changes.
  • breaking change: @initMethod and @CustomTag are only supported on public classes/methods.

0.9.5

  • Improvements on how to handle cross-package HTML imports.

0.9.4

  • Removes unused dependency on csslib.

0.9.3+3

  • Removes workaround now that mirrors implement a missing feature. Requires SDK >= 1.1.0-dev.5.0.

0.9.3+2

  • Fix rare canonicalization bug 15694

0.9.3+1

  • Fix type error in runner.dart 15649.

0.9.3

  • pub-build now runs the linter automatically

0.9.2+4

  • fix linter on SVG and MathML tags with XML namespaces

0.9.2+3

  • fix 15574, event bindings in dart2js, by working around issue 15573

0.9.2+2

  • fix enteredView in dart2js, by using custom_element >= 0.9.1+1

[6ad2d61]:https://github.com/Polymer/polymer-dev/commit/6a3e1b0e2a0bbe546f6896b3f4f064950d7aee8f [3b690ad]:https://github.com/Polymer/polymer-dev/commit/3b690ad0d995a7ea339ed601075de2f84d92bafd

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  polymer: "^0.16.3+3"

2. Install it

You can install packages from the command line:

$ pub get

Alternatively, your editor might support pub. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:polymer/polymer.dart';

About

Polymer.dart is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers.

Author

Email web-ui-dev@dartlang.org Polymer.dart Authors

Homepage

www.dartlang.org/polymer-dart/

Documentation

www.dartdocs.org/documentation/polymer/0.16.3%2B3/index.html#polymer

Uploader

jmesserly@google.com
sigmund@google.com
dgrove@google.com
nweiz@google.com
jakemac@google.com
kevmoo@google.com

Share