Was looking at https://github.com/dart-lang/polymer-dart/blob/master/bin/new_element.dart

_href="{{observableValue}}" links are rendered incorrectly, when the tag / element is placed inside of a package. The behaviour has changed since 0.15.5 which appears to work correctly.

To reproduce, my-element must be in the package /lib path.

mypackage/lib/my_element.html

<link rel="import" href="../../packages/polymer/polymer.html">
<polymer-element name="my-element">
    <template>
            <a _href="{{url}}">link</a>
    </template>
    <script type="application/dart" src="my_element.dart"></script>
</polymer-element>

mypackage/lib/my_element.dart

import 'package:polymer/polymer.dart';
@CustomTag('my-element')
class MyElement extends PolymerElement {
    @observable String url = "https://github.com/dart-lang/polymer-dart";
    MyElement.created() : super.created();  
}

Polymer 0.15.5 anchor is rendered correctly as:

https://github.com/dart-lang/polymer-dart

Polymer 0.16.0+1 anchor is rendered incorrectly as:

localhost:8080/packages/mypackage/https://github.com/dart-lang/polymer-dart

If the element is placed alongside index.html under /web, _href works correctly.

Dart Editor 1.9.0.dev_10_04 (DEV) / Chromium Version 39.0.2171.99

It's invalid to load a part file in Dartium, this is not necessarily intuitive and the current error is cryptic.

I filed https://code.google.com/p/dart/issues/detail?id=23082 to make the error better in the vm/dartium. However, one idea would be to detect this ahead of time when processing html/dart files in the polymer transformers.

Context: https://code.google.com/p/dart/issues/detail?id=20314#c5

This gets really bad with icon sets, https://github.com/Polymer/core-icons/blob/master/core-icons.html for instance exposes a ton of elements with really common ids. These will get picked up by document.getElementById and querySelector calls :(.

Ideally this ordering should be handled at runtime dynamically, as a short-term solution, we could at least ensure that within a library we sort the order we register classes to make it less likely to fail.

When I run pub upgrade

environment:
  sdk: '>=1.0.0 <2.0.0'

dependencies:
  core_elements: ">=0.2.0 <0.8.0"
  polymer: '>=0.12.0+5 <0.17.0'

dev_dependencies:
#  grinder: '>=0.7.0 <0.8.0'
  paper_elements: ">=0.1.0+2 <0.8.0"
#  test: '>=0.12.0 <0.13.0'

transformers:
- polymer:
    entry_points:
    - example/example01.html
    - example/example02.html
    - example/example03.html

If running an index.html file from a subfolder without specifying the full path then you will get erroneous warnings (for instance http://localhost:8000/web).

Currently, custom elements that share stylistic attributes are recommended to use <core-style> to avoid duplication of code (in the case of writing or inlining the CSS multiple times) or extra network requests (in the case of linking to the same stylesheet from multiple places).

This is a good optimization, but it represents an extra step in the learning curve, since it's a Polymer-specific API. It's also somewhat non-idiomatic compared to regular HTML+CSS.

It would be great if the existing standard <link rel="stylesheet"> mechanism could be optimized in the same way as <core-style>, or alternatively, transformed into <core-style> references.

I made 2 versions of the same test application.
First one uses @HtmlImport:
https://gist.github.com/vsheyanov/349d8210f566b80b5e25

Second one uses link rel="import"
https://gist.github.com/vsheyanov/8ef3ca894610d5aa7760

In both examples there is a parent-component

<polymer-element name="parent-component">
    <template>
        <child-component selectedValue="{{selectedValue}}"></child-component>
    </template>

and child component

<polymer-element name="child-component">
    <template>
        Value: {{selectedValue.label}}
    </template>
</polymer-element>

Problem is that when @HtmlImport is used, object selectedValue is not bound properly to child-component.
Instead of passing DataVO object to selectedValue attribute it passes string '[DartObject object]'.
This leads to an exception

Exception: Uncaught Error: Error evaluating expression 'selectedValue.label': Class 'String' has no instance getter 'label'.
NoSuchMethodError: method not found: 'label'
Receiver: 
Arguments: []
Stack Trace:
#0      Object._noSuchMethod (dart:core-patch/object_patch.dart:42)
#1      Object.noSuchMethod (dart:core-patch/object_patch.dart:45)
#2      _LocalInstanceMirror._invokeGetter (dart:mirrors-patch/mirrors_impl.dart:549)
#3      _LocalInstanceMirror._getFieldSlow (dart:mirrors-patch/mirrors_impl.dart:466)
#4      _LocalInstanceMirror.getField (dart:mirrors-patch/mirrors_impl.dart:480)
#5      ReflectiveObjectAccessorService.read (package:smoke/mirrors.dart:26:63)
#6      read (package:smoke/smoke.dart:30:39)

In child component I've added change handler and for @HtmlIImport it logs String which is wrong, but when link rel="import" is used it logs DataVO which is right and everything works fine.

build_log_combiner.dart and other logic related to build logs should move into code_transformers, including the log widget and transformers that inject it.

index_page_builder.dart should move into another package, maybe code_transformers as well.

polyfill_injector.dart should move into web_components.

html_finalizer.dart should move into another package, or be the beginning of a new package.

Please try following project
https://drive.google.com/file/d/0B3rLcM6YFZ4VY0w5MW9BYXhvZkE/view?usp=sharing

Then nav-panel includes a core-header-panel. It works fine when running in Dartium. When runs as Javascript, the core-header-panel does not shown because the height is 0.

If changing the core-header-panel to two nested div (commented out in nav-panel), the nav-panel is shown, but If I have long nav list, the nav-panel does not scroll because its height is larger than the screen height.

https://github.com/dart-lang/polymer-dart/blob/e5bed5253c5b4bc2c0dc4e81ec15438d17015acd/lib/src/build/script_compactor.dart#L624

it'd be nice to not have the "isTwoWay" logic hard code details about template_binding (actually, NodeBind on the JS side). Maybe this is a symptom of polymer.dart doing transformation stuff for all its dependencies (similar issues with web_components pkg).

moved from https://code.google.com/p/dart/issues/detail?id=17895

For any html file which is in the same top level folder as an entry point which loads it, it must point to the packages symlink in the same folder as the entry point. Two entry points in different subfolders cannot load the same html import if it lives in the same top level folder as the entry points.

I cannot pub get or pub upgrade with 0.16 on Dart 1.8.5. With a basic pubspec.yaml:

name: svg_example
dependencies:
  polymer: any
dev_dependencies:
  unittest: any

A pub get on a new project (or pub upgrade on an old project) results in:

pub get
Resolving dependencies... (1.8s)
The null object does not have a getter 'isNotEmpty'.

NoSuchMethodError: method not found: 'isNotEmpty'
Receiver: null
Arguments: []
dart:core                                                                                                                                Object.noSuchMethod
package:path/src/style/posix.dart 34                                                                                                     PosixStyle.rootLength
package:path/src/internal_style.dart 46                                                                                                  InternalStyle.getRoot
package:path/src/parsed_path.dart 47                                                                                                     ParsedPath.ParsedPath.parse
package:path/src/context.dart 529                                                                                                        Context._parse
package:path/src/context.dart 108                                                                                                        Context.dirname
package:path/path.dart 145                                                                                                               dirname
...

Adding a constraint on Polymer to be less than 0.16 resolves the problem.

Does 0.16 need an SDK constraint?

On Dartium, when using screen resolution, I confirmed error console messages below at polymer-spa-example and my own app with latest polymer(0.16.1+2) and paper/core- element(0.7.0).

Here is the console message.

interop_support.js:72 Already have a Dart type associated with core-a11y-keys
interop_support.js:72 Already have a Dart type associated with core-selection
interop_support.js:72 Already have a Dart type associated with core-selector
interop_support.js:72 Already have a Dart type associated with core-animated-pages
interop_support.js:72 Already have a Dart type associated with core-meta
interop_support.js:72 Already have a Dart type associated with core-iconset
interop_support.js:72 Already have a Dart type associated with core-icon
interop_support.js:72 Already have a Dart type associated with core-iconset-svg
interop_support.js:72 Already have a Dart type associated with core-icon-button
interop_support.js:72 Already have a Dart type associated with core-menu
interop_support.js:72 Already have a Dart type associated with core-toolbar
interop_support.js:72 Already have a Dart type associated with core-media-query
interop_support.js:72 Already have a Dart type associated with core-drawer-panel
interop_support.js:72 Already have a Dart type associated with core-header-panel
interop_support.js:72 Already have a Dart type associated with core-scaffold
interop_support.js:72 Already have a Dart type associated with paper-ripple
interop_support.js:72 Already have a Dart type associated with paper-button-base
interop_support.js:72 Already have a Dart type associated with paper-item
undefined:1 Exception: Uncaught Error: Already registered (Polymer) prototype for element core-xhr-dart
Stack Trace:
JsFunction.apply (dart:js:254)
Polymer.register (package:polymer/src/instance.dart:169:48)
CustomTag.initialize (package:polymer/src/initializers.dart:12:41)
loadInitializers.. (package:initialize/src/static_loader.dart:46:42)
_runInitQueue (package:initialize/initialize.dart:35:24)
run (package:initialize/initialize.dart:27:23)
run (package:web_components/src/static_initializer.dart:15:13)
initWebComponents. (package:web_components/src/init.dart:28:38)
_RootZone.runUnary (dart:async/zone.dart:1155)
_Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:484)
_Future._propagateToListeners (dart:async/future_impl.dart:567)
_Future._completeWithValue (dart:async/future_impl.dart:358)
_Future._asyncComplete. (dart:async/future_impl.dart:412)
_asyncRunCallbackLoop (dart:async/schedule_microtask.dart:41)
_asyncRunCallback (dart:async/schedule_microtask.dart:48)
_handleMutation (dart:html:42316)

(Update) I do apologize several refereneces are accidentally created by this post.

The following tests are failing in dartium on the bots, but work locally.

• build/test/publish_attributes_test
• build/test/publish_inherited_properties_test

Hello,

something like this worken with polymer 0.15.1+5 but with 0.15.5 the list won't render, without any warnings or errors:

...
      <core-list-dart data="{{data}}" height="80">
          <template>
              <div class="{{ {selected: selected} }}" style="height: 80px">
                  List row: {{index}}, User data from model: {{model.name}}
                  <input type="checkbox" checked="{{model.checked}}">
              </div>
          </template>
      </core-list-dart>
...

...
@observable var data;
...
data = toObservable([
        new Person('Bob', true),
        new Person('Tim', false),
        new Person('Bill', true)
    ]);
...
class Person extends Observable {
  @observable String name;
  @observable bool checked;
  Person(this.name, this.checked);
}

When using I am having this error:
[web] GET /packages/core_elements/src/web-animations-js/web-animations-next-lite.min.js.map => Could not find asset core_elements|lib/src/web-animations-js/web-animations-next-lite.min.js.map.

If I copy the missing file from the JS repository to the dart package dir it is not working. Where should I copy the missing file or how can it fixed?
Thanks.

original report on the js side of things here Polymer/polymer#995

I have a working polymer project and get the error message below when I first start the project, or add child polymer elements.

Child Elements are using new @HtmlImport('home_view.html') annotation.

To fix it, I take out the imports statements, which builds successfully. Then insert the import statements for the children elements and app runs successfully.
import 'package:app/home_view.dart'; import 'package:app/contact_view.dart';

Error:
`Transform polymer (PolymerBootstrapTransformer) on app|web/index.html threw error: Bad state: No element
dart:collection/list.dart 133 Object&ListMixin.firstWhere
package:initialize/transformer.dart 452:30 InitializerData.annotationNode
package:web_components/build/html_import_annotation_recorder.dart 30:52 HtmlImportAnnotationRecorder.shouldApply
package:initialize/transformer.dart 279:60 _BootstrapFileBuilder._buildNewEntryPoint.
dart:collection/list.dart 127 Object&ListMixin.firstWhere
package:initialize/transformer.dart 279:39 _BootstrapFileBuilder._buildNewEntryPoint
package:initialize/transformer.dart 195:68 _BootstrapFileBuilder.run
package:initialize/transformer.dart 35:28 generateBootstrapFile
package:web_components/build/web_components.dart 32:50 generateWebComponentsBootstrap
package:polymer/src/build/polymer_bootstrap.dart 55:68 PolymerBootstrapTransformer.apply..
dart:async/zone.dart 1155 _RootZone.runUnary
dart:async/future_impl.dart 484 _Future._propagateToListeners.handleValueCallback
dart:async/future_impl.dart 567 _Future._propagateToListeners
dart:async/future_impl.dart 550 _Future._propagateToListeners.handleWhenCompleteCallback.
dart:async/zone.dart 1155 _RootZone.runUnary
dart:async/future_impl.dart 484 _Future._propagateToListeners.handleValueCallback
dart:async/future_impl.dart 567 _Future._propagateToListeners
dart:async/future_impl.dart 358 _Future._completeWithValue
dart:async/future_impl.dart 412 _Future._asyncComplete.
dart:async/schedule_microtask.dart 41 _asyncRunCallbackLoop
dart:async/schedule_microtask.dart 48 _asyncRunCallback
dart:isolate-patch/isolate_patch.dart 96 _runPendingImmediateCallback
dart:isolate-patch/isolate_patch.dart 143 _RawReceivePortImpl._handleMessage

dart:collection Object&ListMixin.firstWhere
package:initialize/transformer.dart 452:30 InitializerData.annotationNode
package:web_components/build/html_import_annotation_recorder.dart 30:52 HtmlImportAnnotationRecorder.shouldApply
package:initialize/transformer.dart 279:60 _BootstrapFileBuilder._buildNewEntryPoint.
dart:collection Object&ListMixin.firstWhere
package:initialize/transformer.dart 279:39 _BootstrapFileBuilder._buildNewEntryPoint
package:initialize/transformer.dart 195:68 _BootstrapFileBuilder.run
package:initialize/transformer.dart 35:28 generateBootstrapFile
package:web_components/build/web_components.dart 32:50 generateWebComponentsBootstrap
package:polymer/src/build/polymer_bootstrap.dart 55:68 PolymerBootstrapTransformer.apply..
dart:isolate _RawReceivePortImpl._handleMessage`

Please see following link for details:

https://code.google.com/p/dart/issues/detail?id=22863&sort=-opened&colspec=ID%20Type%20Status%20Priority%20Area%20Milestone%20Owner%20Summary%20Modified%20Opened

we missed this line in the change to use named arguments:

https://github.com/dart-lang/polymer-dart/blob/master/lib/src/build/common.dart#L230

I'll create a fix shortly and release it as 0.15.5+4

Hi guys.
Sample app: https://gist.github.com/vsheyanov/5ae29f9853b532f49e5b

In Chrome I see this (which is what I expect actually)

In Firefox (which I think is wrong):

I'm not sure if this is an issue or my expectations are wrong.

The test package has an idiosyncratic way of linking HTML files to their Dart counterparts: <link rel="x-dart-test" href="path/to/test.dart"> (in practice, the hrefwill always point to whatever_test.dart, but the <link> exists to avoid reliance on that). This screws up the polymer transformers, since they're unable to tell which Dart file is imported by the HTML and thus unable to transform it properly.

Since the test package is (hopefully) going to be the standard framework for testing Dart, it would be great if the polymer transformers could be able to understand its link tags like they do other HTML references to Dart files.

or consider getting rid of it... this might be less relevant now that we have end2end tests in our samples.

After upgrading on the 12th of march dart projects with subfolders does not run.

The following output in the console occurs after hitting run in the dart editor:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/interface%5Ct_file.dart An error occurred loading file: http://localhost:8080/interface%5Ct_file.dart

-one for each of my polymer templates (like t_file.dart), which are in folder "web/interface".
After hours trying to fix it, I created a new polymer app from scratch. I create a template called t_file. It works fine when t_file is in folder web, but if I restructure and move t_file to subfolder web/interface, I cannot get the progam to run. There are no complaints in the editor, but I get the above error on running. A blank webpage appears.

Is the replacement of the slash character to %5C expected? Is that the problem?

after adding the below to yaml everything runs fine.
code_transformers: '<= 0.2.5'
polymer: '<= 0.15.5+4'

reports on stackoverflow of the same issue:
http://stackoverflow.com/questions/28975203/dart-editor-how-to-use-sub-folders

Incompatible version constraints on web_components:
- core_elements 0.4.0 depends on version >=0.9.0 <0.10.0
- polymer 0.14.0 depends on version >=0.7.0 <0.8.0

Polymer seems to use a fairly old version of web_components. Is it possible to upgrade? Polymer is required to use core_elements...

Do polymer.dart expressions have support for indexed iterables?

When I try to create one:

<template repeat="{{item, index in items}}">
   {{index}}: <stuff-with-item item="{{item}}"></stuff-with-item>
</template>

I get the error "MyPolymerElement has no setter 'item'".

@HtmlImport(‘my_element.html’)

or link to more detailed information

Hia

Have following along with the changes and discussion in test packages to support polymer.

I get the <link rel="x-dart-test" href="unit_name_test.dart"> and understand that changes in polymer.init.dart.

But I really need some help.

My previous approach was to include the unit test in for polymer transformation. In the test itself I would init polymer and onReady', create the withnew Elementwith a nullSanitizer and thenappend(_element)` this all worked well with async/await.. Then I could query and find the element, check it's shadow dom etc.

With the changes to test, I am really very unclear what is the best way to structure these unit test.

So could you help with maybe an example of our new poly'way'. I can see that you have got it working from 0.16.2 . But it just not coming together for me...fog is not lifting. Any help would be appreciated...

In my ideal world I could:

• Not have to register the polymer test in polymer section of the pubspec.yaml.
• I could create a file in my test directory call foo_bar_test.dart, hopefully avoid having a custom HTML unless there was JS script dependences I needed to access.
• In the unit test foo_bar_test.dart I would just do something like:

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

main(){

Element _testEl = createElement(<my-foo id="good_foo"></my-foo>);

test('foo should do a little dance, well at least appear on the page.',() async{
    document.body.append(_testEl);
    Element testSubject = await document.querySelector('#good_foo');
    expect( testSubject.shadowRoot, isNotNull);
});

}

That again is ideal world... and the above would just run along side all other test when I pub run test -p content-shell. Stepping back to reality an annotation would be fine... @polyTest have using @initMethod annotation above main(){ would not kill anyone..

I am just not sure of the way to proceed... I know I don't want to have anything in my setup that needs to await the zone to showup...

So a gist with a example that we will call the poly way would really help me... Maybe that will lift my fog of war on this problem..

Thanks in advance.

Please update Logging version dependencies to the latest one

Thanks

Consider the element:

<link rel="import" href="../../packages/paper_elements/paper_input.html">
<paper-input id="newNoteInput"
             floatingLabel
             label="Add a new note"
             on-change="{{add}}"
             value="{{newNote}}"
             ></paper-input>

The on-change calling the add method fires just fine in Chrome, but doesn't fire in Safari (or Safari iOS).

It would be great to have the Polymer-dart version of this tutorial/article:

https://www.polymer-project.org/articles/spa.html

see #55 for an example

I can't get rid of this warning

Failed to inline stylesheet: Could not find asset bwu_datagrid|example/src/composite_editor_item_details/asset/examples.css. null (more details)
example/composite_editor_item_details.html:405:5
<link rel="stylesheet" href="src/composite_editor_item_details/asset/examples.css">

It is this import
https://github.com/bwu-dart/bwu_datagrid/blob/master/example/src/composite_editor_item_details/composite_editor_view.html#L10

This is the entry page

https://github.com/bwu-dart/bwu_datagrid/blob/master/example/composite_editor_item_details.html
the app-element is https://github.com/bwu-dart/bwu_datagrid/blob/master/example/src/composite_editor_item_details/app_element.html

I tried adding a few ../ but I wasn't able to find a way to point it to the correct directory.
The same import works in all other examples. The difference here is that the import is in an element composite-editor-view which is imported by app-element. In the other examples the examples.css is only used in the app-element.

This should highlight core-style as a suggestion for theming

example/component/news/test/news_index_test.html works locally but times out on the bots

If you are building the contents of web and an entry point is in a sub directory of web then the transformer will fail to output the right path when executing pub build.

Example transformer.

transformers:
- polymer:
    entry_points:
    - web/index.html     # Builds fine
    - web/sub/index.html # Builds incorrectly

The following is the behavior of the transformer in the sub folder.

pub build

• packages/web_components/webcomponents.min.js 👎
• packages/web_components/dart_support.js 👎
• ../packages/polymer/src/js/polymer/polymer.min.js 👍

pub build --mode=debug

• packages/web_components/webcomponents.js 👎
• packages/web_components/dart_support.js 👎
• ../packages/polymer/src/js/polymer/polymer.min.js 👍
• packages/browser/dart.js 👎

for instance:

transformer:
- polymer:
    entryPoints: web/index.html

Should give a warning (or error?) that entryPoints is not a known option, and probably print out the available options.

Still using <0.3.0. Smoke is newer and uses the latest analyzer.

To avoid common programming mistakes, can the requirement to call the superclass life-cycle methods be removed when writing custom elements? This appears to not be a requirement in the JavaScript version, and forgetting to call super.attached and super.detached in polymer.dart can have problematic side-effects.

The relevant page on the dartlang.org website states that "The constructor or overriding method must call the superclass constructor or method first."

The implication is that these life-cycle methods must be implemented as such:

ready() {
  super.ready();
  ...
}

domReady() {
  super.domReady();
  ...
}

attached() {
  super.attached();
  ...
}

detached() {
  super.detached();
  ...
}

However, looking at the polymer.dart implementation, only the attached and detached methods have implementations in the base class. So, calling super.ready() and super.domReady() currently has no effect.

Developers may inadvertently omit calling the superclass implementation. Per the above, that would cause no problem in case of ready or domReady but can cause side-effects that are difficult to track down in case of, e.g., attached. As an example, if one fails to call super.attached() any subsequent call to hasBeenAttached will return false regardless of whether the element was attached. There will be no warning to the developer by any linter, dart2js, etc.

Since the dartlang.org website implies that these superclass methods must always be called, and since there can be negative side-effects from forgetting to call the methods, can the polymer.dart implementation be changed such that the relevant code in the superclass is always executed similar to how it is done in the JavaScript implementation shown below?

/**
 * Low-level lifecycle method called as part of standard Custom Elements
 * operation. Polymer implements this method to provide basic default 
 * functionality. For custom create-time tasks, implement `attached` 
 * instead, which is called immediately after `attachedCallback`.   * 
 * @method attachedCallback
 */
attachedCallback: function() {
  // when the element is attached, prevent it from unbinding.
  this.cancelUnbindAll();
  // invoke user action
  if (this.attached) {
    this.attached();
  }
  if (!this.hasBeenAttached) {
    this.hasBeenAttached = true;
    if (this.domReady) {
      this.async('domReady');
    }
  }
},

In the JavaScript implementation, it seems attached can be implemented without needing to call any prototype function. The above problem with hasBeenAttached remaining false would not occur as _hasBeenAttached is always assigned true after the custom element's attached method has been called.

CoreScaffold e = shadowRoot.querySelector('core-scaffold');
e.closeDrawer();

Drawer doesn't close as per documentation neither does togglePanel work.

I have posted a StackOverflow question here with plenty of details:
https://stackoverflow.com/questions/27957771/manually-hiding-and-showing-drawer-panel-in-core-scaffold-using-dart

If more details are required, I'm happy to update on both sites.

This touches a lot of packages, but in the end we'll allow folks to use a newer args package.

• polymer
• web_components
• code_transformers
• observe
• smoke
• initialize

Dart supports class get and set methods for customizing access to object properties. Polymer support template binding to tie object properties to the DOM. These two features should interact nicely, but instead Polymer's template binding appears to bypass Dart's property methods.

In particular, setting an object attribute via a Polymer template binding doesn't invoke the class's set method.

A minimal example:

@CustomTag('my-example-element')
class MyExampleElement extends PolymerElement {

    @published
    String get myExampleProperty => readValue(#myExampleProperty);

    set myExampleProperty(String newValue) {
        writeValue(#myExampleProperty, newValue);
        print('Property value changed!');
    }
}

Now, if we do:

$['id-of-an-instance-of-my-example-element'].myExampleProperty = 'foo';

Our setter gets called, the value of the property is updated in any template bindings, and the print() message in the setter shows up.

However, if instead we do:

<my-example-element myExampleProperty="foo"></my-example-element>

Then our setter is not called, and although the value of the property is updated in template bindings and in code within the Dart class that makes use of it, the print() in the setter isn't invoked.

Ideally, these two should be equivalent, and they should both go through the class's set method.

0.15.0 warned about uninitialized elements but 0.16.0 loads the page, the Polymer elements don't show and no error/warning/hint is shown.

See #33