(asked in stackoverflow as well http://stackoverflow.com/questions/32599151/importing-polymer-behavior-in-polymerts/32599461#32599461)

Trying to add the behavior for IronControlState to my web component. Here's a minimal working example:
Html Template"

<link rel="import" href="../bower_components/iron-behaviors/iron-control-state.html">

<dom-module id="beh-test">
  <template>
    <button on-click="func">BUTTON</button>
    <content></content>
  </template>
</dom-module>

TS code:

declare var Polymer: {IronControlState: {focused: boolean} };

@component('beh-test')
@behavior(Polymer.IronControlState)
export class BehTest extends polymer.Base {

  func() {
    console.log(this.focused);
    console.log(Polymer.IronControlState);
  }

  ready() {
    console.log('beh-test ready');
  }
}

Polymer.IronControlState is being imported correctly (it get printed to the console when func() is called ), but it's behaviour isn't being added. The browser console kicks out the warning [beh-test::_flattenBehaviorsList]: behavior is null, check for missing or 404 import

What am I doing wrong?

The library needs to be written as a .d.ts file so that can it be published on DefinitelyTyped and imported more easily.

Using version 0.1.24.
notifySplices is needed for array observation when one cannot use Polymer's array mutation functions.
(notifyPath does not work properly for arrays).

Is there any trick to using Behavior properties such as animationConfig and keyBindings?

The Polymer documentation says that splice can also be used to insert elements. Here is the signature it gives:

splice(path, index, removeCount, [item1, ..., itemN])

The declaration in polymer-ts.ts is missing the items to add:

splice(path: string, start: number, deleteCount: number):any;

As the package is going to be used in production, we need a minified version of the JavaScript files, perhaps something that can be loaded with an HTML import.

@template fails to work with arrays (using dom-repeat), console output is:
Polymer::Attributes: couldnt decode Array as JSON`

There is a flaw in the webcomponents polyfill (see here and here) that causes a wrong load order of PolymerTS in IE and FF, making it fail to initialize custom elements.

The correct order (Chrome) should be:

1. webcomponents loads via <script>
2. polymer loads via HTML import (<link rel="import">)
3. polymer-ts loads via <script> and creates polymer.Base from Polymer.Base
4. custom elements loads via HTML import
5. element html is processed
6. element typescript code loads via <script>
7. element typescript code executes, polymer.Base is used to extend elements
8. everything has loaded, webcomponents fires WebComponentsReady
9. application responds to WebComponentsReady and starts itself

The bug makes point n.2 and n.3 to be after n.7, and thus point n.7 fails because polymer.Base is undefined.

@sorvell suggested that we listen to the HTMLImportsLoaded event before we initialize PolymerTS (delay n.3), but this is not enough because point n.7 still requires a working polymer.Base, and the only solution that comes in my mind is to add event-wait code for every defined element, which honestly is not viable.

I'm open to suggestions. Currently I've fixed by loading a home-made polymer.js via <script> in point n.2, avoiding the HTMLImport.

Other solutions include:

• ship a concatenated version of polymer.js + polymer-ts.js with this package (making bowering of Polymer no longer necessary)
• make HTML import of polymer-ts.js (point n.3) so that it's called in the correct order, but this requires that application is loaded also with an HTML import

https://www.polymer-project.org/1.0/docs/devguide/events.html

Polymer.dom(event).localTarget/path/rootTarget

This needs to be added to polymer-ts.d.ts

Starting line 57

interface dom {
    (event: Event): Dom.api.Event;
    (node: HTMLElement): HTMLElement;
    (node: polymer.Base): HTMLElement;
    flush(): any;
}

This solves the errors I am getting from atom-typescript and it runs fine.

For main application polymer is using autobinding element described here:
https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-bind

I would like to have something like this in index.html:

<template is="dom-bind" id="main-app">                                       
    <div>Greet {{appGreet}}</div>                                  
</template>

and main-app.ts:

/// <reference path="../bower_components/polymer-ts/polymer-ts.d.ts"/>                                                              
@component('main-app')                                                                                                              

class MainApp extends polymer.Base {
   @property({ type: String })
   appGreet: string = "GREET!!!";

   public handleSomething() {
      console.log('Handle something');
   }
   public ready() {
     console.log( "READY!!!!")
   }
}

MainApp.register();

It's not working as expected. I guess problem is in component function however I'm not that oriented in polymerts to fix it or find workaround.

behaviors: any[] = [
FrostAura.Dynamics.Client.Behaviours.Core.FaCoreBehaviour
];

doesn't seem to work. Nor does (Becaue the polymer.Base extending makes it un-newable):
behaviors: any[] = [
new FrostAura.Dynamics.Client.Behaviours.Core.FaCoreBehaviour()
];

Am I doing this incorrectly or is it not yet supported?

Is using polymer behaviors, such as those from the neon-animation suite, supported in some manner? If not do you have any tips, tricks or advice about how to implement it?

Thanks.

Everything works until I try vulcanize ( needed for Chrome Apps ), then polymer-ts.js complains that Polymer is undefined, no matter where I stick the imports.

Allow @Property without any parameter

I'm trying out PolymerTS, with some basic experience in plain Polymer 1.0. Not sure I want the decorators but I could not get it to work without them. I am using TypeScript 1.5.

Now, I was able to bind a property to display to a div and to bind one-way to an input (to display the initial input value), but I've not been able to bind two-ways to the input : ts/js code is not getting the new value of the bound property if the user types something in the input, the value of the property remains the initial value no matter what I type in the input field.

Example:

(.html)
<input type="text" value="{{userName}}" />
(.ts:)
@property({ readonly: false }) userName = "myself";

p.s.: I tried with Polymer's paper-input as well, but no luck:
<paper-input value="{{userName}}"></paper-input>

Again, note that binding to a div works fine, as in this example:

(.html)
<template is="dom-repeat" items="{{tables}}">
  <div>{{item}}</div>
</template>
(.ts)
@property({ type: Array, value: function () { return []; } }) tables;
...
this.set('tables', myTableArrayData);

Thank you !

They are getting called in some cases with strange values. This was working in 1.2

  @observe("pickedMesh")
  pickedMeshChanged(newMesh: THREE.Mesh, oldMesh: THREE.Mesh) {
    window.console.log(arguments);
    if (newMesh instanceof THREE.Mesh) // HAD TO ADD THIS
    ...

When first initialized, pickedMesh is getting called with strange values of true/false and instead they shouldn't be called at all till a user has loaded and clicked on a mesh

pv-view.ts:105 [true, undefined]
pv-view.ts:105 [false, null]
pv-view.ts:105 [null, true]
pv-view.ts:105 [null, false]

This works under polymer 1.2, and the logs are silent. Nothing appears.

I've added a class attribute to my component class and did not decorate it with @property keyword. This is still accessible from node.attrName and can be used inside of template via binding. Is this some edge case, or is it supposed to behave like that? Code looks much nicer without it, but I don't want to use it if it breaks in some cases.

Thanks,
Dan

In the repo's main readme, the snippets for the property and observe annotations have semicolons at the end of the line.

The following code runs as expected, though the TypeScript type checker does not recognize properties clientWidth or clientHeight:

/// <reference path="../../bower_components/polymer-ts/polymer-ts.ts" />


@component("my-element")

class MyElement extends polymer.Base {


    attached() {


      console.log(this.clientWidth + 'x' + this.clientHeight);

    }
}


MyElement.register();

Those properties are currently not defined in polymer.Base. Can this be corrected by having polymer.Base extend Element?

Of course, this request assumes that all custom elements are indeed of type Element, and I am not familiar enough with the Polymer 1.0 implementation to know whether that is the case. Is it correct that custom elements are always created by calling createElement() (which returns an object of type Element)?

I came across this issue filed with the TypeScript GitHub repository, which seems relevant. Perhaps that issue needs to be addressed before a change can be made in PolymerTS?

Per the polymer guide, to observe path changes, one needs to add an observer to the list of observers, rather than adding it as a property annotation: (observing path changes)

However, currently the decorator will add an observer to the list of observers only if it has a comma, and will not add it to the list of observers if it has a dot. This can be fixed pretty simply by checking for a period as well as a comma when deciding which invocation to use. (I would submit a change myself, but I believe I am blocked by the lack of a LICENSE on the repository).

I would appreciate if this could be fixed in a release soon.

Trying to get PolymerTS working in this fork

https://github.com/gertcuykens/polymer-starter-kit

Given this:

  @property({type: Boolean, readOnly: true})
  bubbles:boolean = false;

this.bubbles == undefined unless I remove the readOnly attribute (in which case it equals false, as expected).

The polymer website describes how to setup annotated event listeners:

https://www.polymer-project.org/1.0/docs/devguide/events.html

Simply writing another function on my custom element's class however does not expose the function properly. For example:

My .ts

@component('my-element')
class MyElement extends polymer.Base {
  public myFunction():void {
    console.log('Hello!');
  }
}
MyElement.register();

My .html

<dom-module id='my-element'>
    <template>
        <button on-click='myFunction'>Click Me!</button>
    </template>
</dom-module>

<script src='/my-element.js'></script>

In the console it logs: [my-element::_createEventHandler]: listener method 'myFunction' not defined. Is there a way to do this in Polymer TS?

Say I have:

export class MyElement extends polymer.Base {
  field: number;

  constructor(n: number) {
    super();
    this.field = n;
  }
}

And I do:

const myElement = MyElement.create(arg);
Polymer.dom(someContainer).appendChild(myElement);

// I would like to access myElement.field after it is set by the constructor

AFAIU, the constructor (which is actually the factoryImpl) might not have been called yet at the bottom. What should I do in order to make sure that when I access myElement.field, the constructor has run? Is there an event/callback I can latch on, or do I need to implement some logic myself?

Thanks!

Hi

What do you think to use module to better organize the polymer typescript?

Below my suggestion :

module polymer {

export class Base { ... }

export interface Element { ... }

export interface propDefinition { ... }

}  // end module

interface Polymer { ... }

declare var Polymer: Polymer;

function component(tagname: string) { ... }

function extend(tagname: string) { ... }

function hostAttributes(attributes: Object) { ... }

function property(ob: polymer.propDefinition) { ... }

function computed(ob?: polymer.propDefinition) { ... }

function listener(eventName: string) { ... }

function behavior(behaviorObject: any): any { ... }

function observe(propertiesList: string) { ... }

function createElement(element: Function): void { ... }

function createClass(element: Function): void { ... }

Hi

I've thought that a yeoman generator would be useful to help, this amazing project, to be widely used

So I've released a first version of such generator available here

Please test it and if you consider it useful for project's growing , add it in PolymerTS' references

Hi there,

I'm getting following error:

TypeError: Class constructor FooBarElement cannot be invoked without 'new' 
in polymer-ts:208

I'm using the "target": "es6" option in my tsconfig.json file, and my element looks like:

@component('foo-bar')
class FooBarElement extends polymer.Base {
...
}

FooBarElement.register();

I took a look at your issues and some of your code, including this PR https://github.com/nippur72/PolymerTS/pull/27/files which seems to add support for es6, but didn't found yet a solution to solve the error.

Thanks for your work.

We can choose between two alternative syntax for computed properties:

• with @computed decorator

   // defines a computed property called "fullname" depending on "test" property
   @computed("fullname", "test")
   computeFullName(test)
   {
      return "Douglas Adams [" + test + "]";         
   }

• allowing @property decorator to be applied on functions:

   @property({ name:"fullname", type: String, computed: "test" })
   computefullname(test)
   {
      return "Douglas Adams [" + test + "]";         
   }

unfortunately in the actual Polymer, a computed function can't have the same name as its property, so in the latter case we must have "computefullname" and { name:"fullname" }

Support native constructor in place of .create(), e.g.

var el = new MyElement();
// in place of
var el = MyElement.create();

It's not possible to have an element-class that extends another class that is not polymer.Base:

class MyAbstract extends polymer.Base implements polymer.Element {
  // methods here are not carried in the final polymer element
}

class My extends MyAbstract  {
  private myProp1: string = 'initialVal';
}

The polymer api document for importHref indicates there's a fourth parameter, optAsync, of type Boolean. I think this may have been added recently, as it is not mentioned here.

That parameter is missing from the type definition file.

In the polymer-ts.d.ts you should have:

 set(path: string|[string, number], value: any, root?: Object): any;

When using either:
@property({... observer: "dataChanged" })
data: any;

or
@observe("data")
public dataChanged(newValue, oldValue)

The observer works as expected, however if I change the function to be a function expression like this:
public dataChanged = (newValue, oldValue) => {...

The observer breaks and I get an error that the observer method "dataChanged" can not be found. I need the ability to use a function expression so that I can control the this reference inside of my event handler. If anyone can help point me in the right direction I can work on PR for this.

Thanks!

Hello, and thank you for the nice work!

The compiler complains when processing polymer-ts.ts / polymer-td.d.ts: "A class may only extend another class." at: export declare class PolymerBase extends HTMLElement

When inheriting from a polymer.Base derived class, the Register() method on the class prototype fails to work as expected.

1. The derived element cannot fire Register without the error "element already registered in Polymer".
   (Fix: #57)
2. In addition to the issue in addressed in #57, the extended element fails to correctly call the derived overrides.
   (Workaround: order registration from child to parent. See below)

These problems occur regardless of the import structure, so a single file example is enough to demonstrate the issue:

// base-element.ts
import 'polymer-ts';

@component('base-element')
export class BaseElement extends polymer.Base {
    ready() { 
        console.log(this.is + " element is ready!");
    }
}

BaseElement.register();

@component('new-element')
export class NewElement extends BaseElement {
    ready() { 
        // FAILS: even with the fix from #1, this override will not fire correctly.
        super.ready();
        console.log("this element is ready!");
    }
}

// FAILS: With "element already registered in polymer"
NewElement.register();

Even with the fix from #1, the class inheritance overrides are not successfully applied:

Workaround for the second part
@nippur72's suggestion to alter the order of registration shows the correct override behavior:

// BOTTOM of base-element.ts

// WORKAROUND: Order registration from children in hierarchy to parent
NewElement.register();
BaseElement.register();

This correctly allows the registration of a hierarchy of derived classes, and displays the expected behavior.

The workaround can be extended as long as the registration is done in child > parent hierarchy order, including multiple children of the same class.

// BOTTOM of base-element.ts

@component('third-element')
export class ThirdElement extends BaseElement {
}

// ThirdElement.register(); // Could place it here
NewElement.register();
ThirdElement.register();  // Or here: New/Third* are the same class level in hierarchy, so order does not trigger the error
BaseElement.register();

So a temporary workaround until this issue is fixed is to keep your registration order from child to parent.

While the automatic plumbing of calls to create to the ready/constructor/attached methods is great, an annoying issue is that the type of the arguments passed to create is never checked against the type of the parameters received by constructor, but rather against the very liberal declared type of polymer.Base.create

Would it be conceivable to make it so that this is actually checked, by changing the plumbing a little?

Is there currently a use-case for calling new Element(args)? If not, could it be used as a shorthand for Element.create(args)? This would trick TypeScript into checking the arguments against the constructor arguments, even though behind the scenes the call is more complex.

Due to missing types on lines 111-113 in the generated polymer-ts.d.ts, code using this library must have noImplicitAny set to true to compile.

It seems changing polymer-ts.ts lines 327-329 would fix this.

Change handlers in Polymer take two parameters; the first one representing the old property value and the second representing the new value.

However, in polymer-ts, the order is reversed, e.g.:

// single property observer
@observe("name");
nameChanged(newName,oldName)
{
   // ... 
}

This may be a bit opinionated, and of course polymer-ts can change the order, but to remain as API-compatible as possible and not to confuse users coming from the non-typescript world, it may be preferred to match the parameter order as defined in Polymer:

// single property observer
@observe("name");
nameChanged(oldName,newName)  // "oldName, newName" instead of "newName, oldName"
{
   // ... 
}

expected: if I have a behavior that defines a new member for the Typescript class, that member is implicitly mixed in to classes that reference that behavior via the decorator.

actual: the member is not mixed in, so that referencing it in the class using the behavior creates a type error.

is fixing this feasible within the constraints of typescript decorators?

Hi, I'm playing with Polymer + TS and I've found these definitions. I'm experiencing an issue when trying to react to a change in a 2-way bound property: the changed callback never gets called. Yet, as far as I can see by debugging it is correctly defined in the object prototype, and I get no errors in the console. I found no code example for observing a property change in your source, so maybe it's just me doing something stupid.
My element is fairly simple as this is just a test: its template contains an input to be 2-way bound to a property named text:

<input autofocus value="{{text}}" placeholder="enter text"/>

The TS relevant code is (note the notify:true and the callback named after the documented convention):

@tag("my-element")
class MyElement implements PolymerElement {
  @property({type: String, value: "example", notify: true })
  public text: string;
  ...
  public textChanged(): void {
      // this.text should contain the new value. Anyway this never gets called.
  }

}

Could anyone suggest a solution?

I've written a Babel plugin which parses standard Polymer javascript into TypeScript - https://github.com/nalbion/babel-plugin-polymer-to-typescript.

The output looks okay to my untrained eye, but when I try to generate .d.ts files from the generated .ts files I'm currently getting a bunch of errors - hopefully you can help and then I'll be able to publish about 100 auto-generated .d.ts files to DefinatelyTyped.

I've copied relevant snippets from the generated iron-behaviors/iron-control-state.ts with tsc errors below. Hopefully you'll have more experience with TypeScript than me.

/// <reference path="../../bower_components/polymer-ts/polymer-ts.d.ts"/>
/**
   * @demo demo/index.html
   * @polymerBehavior
   */
//  error TS2300: Duplicate identifier 'Polymer'
declare module Polymer {
  class IronControlState extends polymer.Base {

    /**
     * If true, the element currently has focus.
     */
    @property({
      type: Boolean,
      notify: true,
      readOnly: true,
      reflectToAttribute: true
    })
 // error TS1039: Initializers are not allowed in ambient contexts.
    focused: boolean = false;

    constructor() {
      super();
 // error TS1183: An implementation cannot be declared in ambient contexts.
      this._boundFocusBlurHandler = (() => {
        return this._focusBlurHandler.bind(this);
      })();
    }

   ready() {
// error TS2345: Argument of type 'Function' is not assignable to parameter of type 'EventListener | EventListenerObject'.
      this.addEventListener('focus', this._boundFocusBlurHandler, true);
      this.addEventListener('blur', this._boundFocusBlurHandler, true);
    }

    _disabledChanged(disabled, old) {
      this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
      this.style.pointerEvents = disabled ? 'none' : '';
      if (disabled) {
// error TS1036: Statements are not allowed in ambient contexts.
        this._oldTabIndex = this.tabIndex;
        this.focused = false;
        this.tabIndex = -1;
      } else if (this._oldTabIndex !== undefined) {
        this.tabIndex = this._oldTabIndex;
      }
    }

    @observe('focused, disabled')
    _changedControlState() {
//error TS2339: Property '_controlStateChanged' does not exist on type 'IronControlState'.
      // _controlStateChanged is abstract, follow-on behaviors may implement it
      if (this._controlStateChanged) {
        this._controlStateChanged();
      }
    }

Setting notify: true in the object passed to the @Property annotation and modifying the corresponding property value does not cause the change handler to be called, e.g:

/// <reference path="../../bower_components/polymer-ts/polymer-ts.ts" />
@component(“my-component”)
class MyComponent extends polymer.Base {


    @property({type: Boolean, value: true, notify: true})
    public prop:boolean;


    public propChanged(oldValue:boolean, newValue:boolean) {

        console.log("not called")

    }

    
attached() {
        this.prop = false;
    }

}



MyComponent.register();

Note/work-around: The @observe decorator appears to work as expected.

As of Polymer 1.0, the recommended way of accessing the local or light DOM is through Polymer.dom(this.root) and Polymer.dom(this).

According to the PolymerTS type definitions, "this" inside of polymer.Base does not refer to an HTMLElement so the Typescript type checker does not like the following example:

@component("my-element")
class MyElement extends polymer.Base implements polymer.Element
{
    attached() {
        let div1:HTMLDivElement = document.createElement('div');
        Polymer.dom(this).appendChild(div1);

        let div2:HTMLDivElement = document.createElement('div');
        Polymer.dom(this.root).appendChild(div2);
    }
}

The type checker complains:

TS2345: Argument of type 'MyElement' is not assignable to parameter of type 'HTMLElement'
TS2339: Property 'root' does not exist on type 'MyElement'

The docs refer to "behaviour"s but the code examples show "@behavior". Since the official docs refer to "behaviors" it seems wise to conclusively standardize on "behavior".

Seems when the computed value is based on a sub-property, the @computed annotation style does not work. Maybe clarify in the documentation. Example:

    @property({ type: Object, notify: true })
    model: AppModel;

     // this does not compile
    @computed({ type: Boolean, notify: true })
    isAuthenticated(model.userProfile: any): boolean {
        return this.model.userProfile != null;
    }

    //this works
    @property({ type: Boolean, notify: true, computed: "getAuthenticated(model.userProfile)" })
    isAuthenticated: boolean;
    getAuthenticated(userProfile: any): boolean {
        return this.model.userProfile != null;
    }

I see under bower.json that this is intended to be released under the MIT license. Can you add a LICENSE file to the repository please?

The flush function is currently defined on the Polymer object itself.
It should be on the Polymer.dom object.

Polymer.dom.flush();

See https://www.polymer-project.org/1.0/docs/migration.html#dom-apis

There isn't a guide on contributing to this repository, and as a contributor it isn't clear what tools should be run to generate the js, typing files, minified js, et cetera, in a way that's consistent with previous releases.

Perhaps setting up a simple gulp workflow is in order?

Hello.
Visual Studio 2013/ typescript 1.5

• I just create object at runtime this way:
  var el:any = document.createElement('login-form');
document.appendChild(el);
  is there ay way use strictly typed objects like this ?
  var el:LoginForm = new LoginForm();
document.body.appendChild(el); // Argument of type 'LoginForm' is not assignable to parameter of type 'Node'.
• I don't wont put any line of java script in html templates, and manage all the code with types in TS
  How I can access the Class instance associated with dom-element like:
  var el:any = document.createElement('login-form');
el['login-form.ts-Scope?'].dataProvider = data;
el['login-form.ts-Scope?'].addEventListener("loginTriggered", myHandler);
• Also is there any possible issues with initialization of "model" in case of property set?

Great thanks for this repo!

Hi, I have following configuration
tsc version is 1.8.7

tsconfig

{
  "compilerOptions": {
    "module": "system",
    "target": "es5",
    "sourceMap": true,
    "experimentalDecorators": true,
    "suppressImplicitAnyIndexErrors": true,
    "out": "."
  },
  "exclude": [
    "node_modules",
    "app/bower_components"
  ],
  "filesGlob": [
    "typings/browser.d.ts"
  ],
  "files": [
    "app/elements/my-element/my-element.ts",
    "typings/browser.d.ts"
  ]
}

typings.json

{
  "version": false,
  "dependencies": {},
  "ambientDependencies": {
    "polymer": "registry:dt/polymer#1.1.6+20160123034809",
    "polymer-ts": "registry:dt/polymer-ts#0.1.19+20151211074327"
  }
}

and I'm trying to compile one of yours element example. I got those erros

typings/browser/ambient/polymer-ts/index.d.ts(103,11): error TS2415: Class 'Base' incorrectly extends base class 'PolymerBase'.
  Property '$' is optional in type 'Base' but required in type 'PolymerBase'.
typings/browser/ambient/polymer-ts/index.d.ts(106,9): error TS2300: Duplicate identifier 'is'.
typings/browser/ambient/polymer/index.d.ts(23,13): error TS2430: Interface 'Base' incorrectly extends interface 'PolymerBase'.
typings/browser/ambient/polymer/index.d.ts(78,5): error TS2300: Duplicate identifier 'is'.
typings/browser/ambient/polymer/index.d.ts(151,5): error TS2425: Class 'PolymerBase' defines instance member property '$$', but extended class 'Base' defines it as instance member function.
typings/browser/ambient/polymer/index.d.ts(311,37): error TS2503: Cannot find namespace 'webcomponents'.
typings/browser/ambient/polymer/index.d.ts(313,42): error TS2503: Cannot find namespace 'webcomponents'.
typings/browser/ambient/polymer/index.d.ts(317,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'Polymer' must be of type '{ (prototype: Element): FunctionConstructor; Class(prototype: Element): Function; dom: dom; appen...', but here has type 'PolymerStatic'.
error TS5033: Could not write file '.': EISDIR: illegal operation on a directory, open '.'

Is there something that I'm doing wrong?