1

I am trying port to Dart this nice paper-datatable implementation using custom_element_apigen.

Some problems occurred and sought to find solutions according to my understanding (perhaps included more problems!).

However, still an error is thrown and not been able to move on. I need some help about how port to Dart!!! I will briefly describe the steps, errors and solutions that gave and a link to source code of the project test:

1) I following the steps, accord to https://github.com/dart-lang/custom-element-apigen. I had problems on Windows, but I got to resolve after (custom_element_apigen: gives an error importing paper-datatable to Dart)

2) apigen.yaml used with custom_element_apigen does not clear how to configuration. I used the "trial-and-error" method until no more error occur. It was so:

files_to_generate:
  - paper-datatable\paper-datatable.html
  - paper-datatable\paper-datatable-column.html
  - paper-datatable\paper-datatable-edit-dialog.html
  - paper-datatable\paper-datatable-card.html
  - paper-datatable\paper-datatable-styles.html
  - paper-datatable\datatable-icons.html

files_to_load:
  - package:polymer_elements/src/paper-material/paper-material.html
  - package:polymer_elements/src/iron-ajax/iron-request.html
  - package:polymer_elements/src/iron-ajax/iron-ajax.html
  - package:polymer_elements/src/iron-form/iron-form.html
  - package:polymer_elements/src/iron-meta/iron-meta.html
  - package:polymer_elements/src/iron-icon/iron-icon.html
  - package:polymer_elements/src/iron-iconset-svg/iron-iconset-svg.html
  - package:polymer_elements/src/paper-ripple/paper-ripple.html
  - package:polymer_elements/src/paper-checkbox/paper-checkbox.html
  - package:polymer_elements/src/neon-animation/animations/opaque-animation.html
  - package:polymer_elements/src/neon-animation/animations/fade-in-animation.html
  - package:polymer_elements/src/neon-animation/animations/fade-out-animation.html
  - package:polymer_elements/src/paper-tooltip/paper-tooltip.html
  - package:polymer_elements/src/iron-resizable-behavior/iron-resizable-behavior.html
  - package:polymer_interop/src/js/debug/src/lib/template/templatizer.html

  1. Some paths imports were wrongs on paper-datatable*.(html and dart) files. p.e. : import 'packages\polymer_interop\src\js\debug\src\lib\template\templatizer.dart'; I changed to import 'package:polymer_interop/src/behaviors/templatize.dart'; on paper_datatable_column.dart.

  2. I changed reserved Dart word default to defaultx on get defaultx => jsElement[r'default']; and set defaultx(value) { jsElement[r'default'] = (value is Map || (value is Iterable && value is! JsArray)) ? new JsObject.jsify(value) : value;} instructions on paper_datatable_column.dart and paper_datatable_card.dart;

  3. After the following erros were occuring in several polymer componentes. P.e.: Failed to execute 'registerElement' on 'Document': Registration failed for type 'iron-meta'. A type with that name is already registered. I changed all paths into paper-datatable*.* files to get official package (pub.dartlang) of the polymer and polymer elements. P.e.: <link rel="import" href="paper_icon_button_nodart.html"> to <link rel="import" href="../../packages/polymer_elements/paper_icon_button_nodart.html">. The register problem does not occur more!

  4. But now, the following problem is occuring and I don't know how to resolve it: On debug console appear the following message: Uncaught SyntaxError: Unexpected token =>. The web app works on browser, but the paper-datatable does not appear.

My complete test project (webstorm) is on https://github.com/supermuka/paper_datatable_port_dart_demo

Is there some wrong in how I used Dart custom_element_apigen (and apigen.yaml)? Did I some things wrong on paths changed? I also need to change some other source?

Thanks!

Community
  • 1
  • 1
Muka
  • 1,190
  • 1
  • 12
  • 27

1 Answers1

0

Most likely you just created a syntax error when editing the files. That being said there are options built in to do most of the things you manually did, and that also makes it easier to update in the future.

  • omit_imports: This is used on individual items in the files_to_generate section. It can be used to get rid of the templatizer import entirely, resolving issue #3. See example here.
  • name_substitutions: This is used on individual items in the files_to_generate section, and allows you to rename fields. You can use this to resolve issue #4, example here.
  • stubs_to_generate: This option allows you to generate stubs which actually import elements from a different package, this should resolve issue #5 you listed above. See example usage here.

Hopefully that helps, and applying those options will just resolve your issues.

Jake MacDonald
  • 1,348
  • 6
  • 7
  • About omit_imports, is there a way to get rid two or more imports on the same item? How to know what imports to omit? – Muka Feb 13 '16 at 01:01
  • 1
    omit_imports is a yaml list, so you can add as many as you want. The only thing I have needed to omit before was the `templatizer` import. – Jake MacDonald Feb 22 '16 at 22:00
  • for the `=>` syntax thing this is a new syntax for javascript closure that are not yet supported in dartium but are supported in chrome. – Vittorio Ballestra Mar 05 '16 at 15:19