How to call method of the polymer element instance from outside?

Question

I started new project from scratch on dart lang and was faced with a problem calling method of polymer element instance.

For example I have fps-counter element (fpsCounter.dart):

@HtmlImport('fps_counter.html')
library fpsCounter;
import 'package:web_components/web_components.dart' show HtmlImport;
import "package:polymer/polymer.dart";
import "dart:html";

@CustomTag("fps-counter")
class FpsCounter extends PolymerElement
{
    @observable
    int fps;

    // counter that will cleared at 60 ticks
    int _counter = 0;

    // accumulator delta time for 60 ticks
    int _accumulator = 0;

    factory FpsCounter() => new Element.tag('fps-counter');

    FpsCounter.created() : super.created() {
        polymerCreated();
    }

    bool calculateFps(double delta)
    {
        if (_counter == 60)
        {
            fps = (60000 / _accumulator).round();
            _counter = 0;
            _accumulator = 0;

            print("$fps FPS");

            return true;
        }

        _accumulator += delta;
        _counter++;

        return false;
    }
}

And want to invoke calculateFps(0.016) from out as in example below:

void _initRenderer(OSE ose)
{
    FpsCounter fpsCounter = new FpsCounter();
    fpsCounter.calculateFps(0.016);
    document.body.children.add(fpsCounter);

}

But faced with problem:

Exception: Uncaught Error: Class 'HtmlElement' has no instance method 'calculateFps'.

I really do not wanna create additional communication around that, any ideas how to make it better or how to invoke method? Thanks.

Also please to see additional files that can help:

pubspec.yaml

name: os
version: 0.0.1
dependencies:
  browser: ">=0.10.0 <0.11.0"
  ose:
    path: ./libs/ose
  polymer: any
transformers:
  - polymer

fps-counter.html

<link rel="import" href="packages/polymer/polymer.html" />
<polymer-element name="fps-counter">
    <template>
        <div>
            {{fps}} FPS
        </div>
    </template>
    <script type="application/dart" src="fpsCounter.dart"></script>
</polymer-element>

Answer 1

This looks like upgrading your custom element failed, probably due to an missing import. Otherwise FpsCounter fpsCounter = new FpsCounter(); would return a real FpsCounter instance and calling calculateFps(...) would work.

Add on top of your fps_counter.dart file:

@HtmlImport('fps_counter.html')
library some_library;
import 'package:web_components/web_components.dart' show HtmlImport;

You need to add the entry page to the pubspec.yaml polymer transformer section

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

You need to import the dart file containing the class FpsCounter otherwise you can't use FpsCounter as type annotation or.

You need to keep the FpsCounter.created() : super.created() constructor, just don't call polymerCreated() inside it if you don't extend a DOM element.

I also had to change your main() method. The way you initialized Polymer works only for >=1.0.0-rc.x but with any you don't get pre-releases but you get 0.16.3+3 instead. See also how to implement a main function in polymer apps

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

@whenPolymerReady
init() async {
  OS os = new OS();
  os.start();
}

Now it's working