Hydrolysis errors if using ES6 classes

[robdodson]

I recently tried using an ES6 class for my element's definition and saw the following hydrolysis error when viewing the docs.

Failed to load source at: http://localhost:8080/components/quick-alert/quick-alert.html TypeError: Cannot read property 'forEach' of undefined
    at annotateElement (http://localhost:8080/components/hydrolysis/hydrolysis.js:1061:24)
    at Array.forEach (native)
    at Analyzer.annotate (http://localhost:8080/components/hydrolysis/hydrolysis.js:470:17)
    at http://localhost:8080/components/hydrolysis/hydrolysis.js:177:16

I'm wondering if this PR should fix the issue or if it still requires more work. cc @garlicnation

Element definition is here if you want to repro:

<link rel="import" href="../polymer/polymer.html">

<!--
An element providing a solution to no problem in particular.
Example:
    <quick-alert></quick-alert>
@group Seed Elements
@element quick-alert
@demo demo/index.html
@hero hero.svg
-->
<dom-module id="quick-alert">
  <style>
    :host {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }
    .alert {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-family: Roboto, Helvetica, sans-serif;
    }
    [hidden] {
      display: none;
    }
  </style>
  <template>
    <div class="alert" hidden="{{!shown}}">
      <content></content>
    </div>
  </template>
</dom-module>

<script>
  'use strict';

  class QuickAlert {
    get is() {
      return 'quick-alert';
    }

    get properties() {
      return {
        shown: {
          type: Boolean,
          value: false
        }
      }
    }
  }

  Polymer(QuickAlert.prototype);
</script>

[cadwmaster]

Had the same error trying to fix the documentation and demo of the paper-dropdown-menu component

[bedeoverend]

+1. Though I'm using a slightly different syntax, the one outlined in this article - I'm not sure if that makes a difference to the parser.

[ebidel]

Yea, I wouldn't use the syntax in #35 (comment). get properties() is returning a new properties object on every access! Instead, properties should be setup once at registration time. The syntax in the article is 💰

[cayblood]

I'm declaring properties in beforeRegister() but still seeing this error. Anyone got this working?

[bedeoverend]

Is there any update on this? Did the ES6 PR attempt to resolve?

I'm using ES6 in all my components and would love to be able to auto-generate docs, are there any examples / docs of ES6 syntax that is supported by hydrolysis?

[jgautheron]

The ES6 PR didn't solve this issue. I have the same error as @robdodson mentioned above: Cannot read property 'forEach' of undefined which is related to the element properties not being properly parsed.

This error is only a symptom, not the source of the issue, a quick fix silences the error but still the component page won't show.

Here's the sample code which fails:

class Foo {
  beforeRegister() {
    this.is = 'foo';
    this.properties = {
      cover: String,
      photo: String,
      username: String
    };
  }
}
Polymer(Foo);

Compiling the ES6 code through Babel doesn't help at all. Still fails, for the same reason.

[jgautheron]

I fixed it in my fork.
ES6 class parsing is just not implemented, so I implemented it quickly. I would have thrown a PR, but some tests are failing for no apparent reason and it could be cleaner (a separate elementFinder for ES6 classes). If someone is willing to help...

[efeminella]

Any ETA or a roadmap for when ES6 class parsing will be natively supported by Hydrolysis, perhaps a PR from @jgautheron 's fork to get this going?

[jgautheron]

Just sent a PR:
Polymer/polymer-analyzer#204

[RoXuS]

Hi jgautheron,

Thx for your PR.

It seems to be not good with behavior :

get behaviors() {
    return [
      ...,
    ];

The result :

Maybe my statement isn't good ?

[jgautheron]

You should declare them in beforeRegister with this.behaviors = [];.

[MeTaNoV]

and for listeners, this should work?

this.listeners = {
        "tap": "regularTap",
        "special.tap": "specialTap"
      };

[jgautheron]

Listeners are not shown in the iron-component-page, AFAIK for now only the following are displayed:

• properties
• methods
• behaviors
• events

[efeminella]

Hey guys, any traction on this yet?

[justinfagnani]

I'm moving this bug to hydrolysis

[mbana]

Does this actually work now? If so, would someone please post an example. I've been trying to get it to work not realising it's a bug: the /demo/ and /test/ routes in polyserve work, the documentation page however doesn't.

[justinfagnani]

@mbana this bug is closed. You can continue the discussion at: https://github.com/Polymer/hydrolysis/issues/221