Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vulcanizing polymer one time bind src attribute

I'm using grunt-vulcanize from an Import file with relative paths to a vulcanized.html in a new location. When the file is ready it has change the relative paths to the new location. That's working really good for static files as images or files, but...

In the import file I have some polymer-element files: paper-fab.html for example. My Import file has a reference like:

<link rel="import" href="../myPolymerElementsFolder/paper-fab/paper-fab.html">

As you can see in line 113 of the imported file, it has two attributes resolved by one-time-binding using brackets:

<iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>

The problem appears with src attribute. The vulcanization interprets it as a path, so it adds the new relative path, resolving in something like this:

<iron-icon id="icon" src="../myPolymerElementsFolder/paper-fab/[[src]]" icon="[[icon]]"></iron-icon>

But that attribute is resolved by the polymerElement itself, so it shouldn't contain any relative path -otherwise it fails, so I need to remove it manually every vulcanization. It should work, when it's a polymer element bound attribute, like the icon attribute. Resolving in something like this:

<iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>

I understand that src attribute is special case that need to replace relative paths, but not in this special case.

I've tried with the following configuration without success:

grunt.initConfig({
    //(...)
    vulcanize: {
        default: {
            options: {
                excludes: ["finalFolder/_Imports.html"]
            },
            files: {
                "finalFolder/Vulcanized.html": "finalFolder/_Imports.html"
            }
        }
    },
});

Do you know if it's possible to resolve this modifying the config of the grunt-vulcanize? I've already open an issue in the gitHub host page.

like image 216
Mario Levrero Avatar asked Jul 01 '15 10:07

Mario Levrero


1 Answers

It's possible using grunt-string-replace plugin and adding a new task to the grunt file:

grunt.initConfig({
    //(...)
    'string-replace': {
        inline: {
            files: {
                'finalFolder/Vulcanized.html': 'finalFolder/Vulcanized.html',
            },
            options: {
                replacements: [
                  // place files inline example 
                  {
                      pattern: /[.]{2}\/Scripts\/bower\/.*\/\[\[src\]\]/g,
                      replacement: "[[src]]"
                  }
                ]
            }
        }
    }
});
like image 51
Mario Levrero Avatar answered Oct 11 '22 10:10

Mario Levrero