Tools: Add import.meta transform in Bundler

[justinfagnani]

The Bundlers assumes modules in and modules out, but by moving the location of files it changes the answer of import.meta. The Bundler should have it's own import.meta transform that can assume import.meta support in the output, but just fixes up the .url property so that it returns the original file URL.

So

import.meta

should become:

{...import.meta, url: new URL(relativePathFromBundleToOriginal, import.meta.url).toString()}

[web-padawan]

Do I understand correctly that with this fix we will not be able to check import.meta.url to detect whether the app is bundled or not as I was assuming, e. g. like this:

let isUnbundled = this.importPath.endsWith(`${this.constructor.is}.js`);

Apparently my assumption was wrong, so I'll close #204 in favor of this issue.

There is a regression in comparison with HTML imports, though: we can do recursive HTML imports check and detect whether the specific import has been loaded or not, but AFAIK that is not possible with the current native ES modules implementation.

[justinfagnani]

Do I understand correctly that with this fix we will not be able to check import.meta.url to detect whether the app is bundled or not

Correct. import.meta.url is used in Polymer elements to resolve URLs to assets correctly. It needs to return the original URL of the module.

We're considering adding something like import.meta._bundleUrl to point to the actual bundled module's URL.

There is a regression in comparison with HTML imports, though: we can do recursive HTML imports check and detect whether the specific import has been loaded or not, but AFAIK that is not possible with the current native ES modules implementation.

I don't quite understand this. What check could you do with HTML imports?

[web-padawan]

@justinfagnani there is the code we're currently using: https://github.com/vaadin/vaadin-development-mode-detector/blob/master/vaadin-development-mode-detector.html#L17

The idea is that, if the app is bundled, then Polymer should be included into some bundle (usually the app shell, when using CLI) and the polymer-element.html should not be imported.

[justinfagnani]

That seems very unnecessary. Bundler will take care of rewriting imports to the correct bundle, so you don't need to remove the import of polymer-element.html.

[usergenic]

https://github.com/Polymer/tools/pull/300 <- should address

[web-padawan]

@justinfagnani the code which I referenced above is not meant to remove the import, but to detect whether the app is bundled or not, based on it's presence.

[usergenic]

300 fixed this and its now merged into master. Closing.

[usergenic]

@web-padawan if you have needs beyond having bundler transform instances of import.meta in bundled modules replaced with a stand-in value that provides the same values, including a preserved value for url, let's open a new issue to track that.

[ranjeet-choudhary]

"polymer-cli": "^1.7.7",
getting the below error on Opera 54 with es5-bundled.
esm-bundled works fine.

[usergenic]

@ranjeet-choudhary es5-bundled should be transforming all instances of import.meta -- Can you verify whether this is still an issue with latest polymer-cli?

If not I'll file a separate issue babel-transform-import-meta not transforming all the import.meta