Search code examples
dartpolymersmoke

Dart Polymer: binding html files to scripts results in broken bootstrap.dart containing "%5C" characters


After doing a Pub Get and Pub Upgrade my custom-PolymerElements don't work anymore. It seems to me that the

<script type="application/dart" src="view.dart"></script>

is interpreted incorrectly. In my index.html_bootstrap.dart it is listed as: import 'dialog%5Cview.dart' as smoke_1; The "%5C" ( \ ) should be a slash ( / ) anyway and I'm pretty sure that it shouldn't be escaped. I tried it with the dart stable (1.8.5) and dev (1.9.0) versions for 64bit Windows.

I already tried to revert my package to their previous version but since I hadn't constraint them in my pubspec file I have no way to determine which versions worked before my changes. In another dart polymer project I'm working on I use the same setup (extended polymer elements) and it still works . The equivalent position in the index.html_bootstrap.dart reads: import 'dialog/view.dart' as smoke_1;

(edit) some (shortened) code:

/web/dialog/error/view.html

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">
<link rel="import" href="packages/core_elements/core_animated_pages.html">

<polymer-element name="error-view">
<template>
    <style>
        paper-dialog {
            margin-top: 20px;
            height: 400px;
            width: 600px; }     
    </style>
    <paper-dialog id="extendedNode" heading="{{dialogtitle}}" vertical autoCloseDisabled=true transition="paper-transition-center" opened=true>
      <content> 
      <core-animated-pages selected="{{page}}" valueattr="id" transitions="hero-transition cross-fade">
            <section id="0">
                    <p  cross-fade>A system error occured while connecting with the server.</p>
                    <br>
                    <p  cross-fade>Error message: {{dialogtext}}</p>
          </section>       
    </core-animated-pages>
    </content>
    </paper-dialog>
  </template>

<script type="application/dart" src="view.dart"></script>
</polymer-element>

/web/dialog/error/view.dart

import 'package:polymer/polymer.dart';
import '../view.dart'; // <- the base class 'DialogView'

  @CustomTag('error-view')
  class ErrorView extends DialogView{

    ErrorView.created() : super.created(){
    componentName = 'error-view';
    this.dialogtitle = 'System Error';
  }

}

/web/dialog/view.dart

import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:intl/intl.dart';

import '../locale/de.dart' as de;

class DialogView extends PolymerElement {
   @observable int page;
   //there are a lot of helper functions and variables in here
}

I use many pairs of those components extending the base component (which has no view.html but only a view.dart that allows me to hold and manipulate different dialogs within one List. This worked perfectly fine until I did the Pub Get / Upgrade and was not solved by repairing the cache. A project using a similar structure still works fine.


Solution

  • This resolves it for now:

    pubspec.yaml

    code_transformers: '<= 0.2.5'