Import Polymer 2 components in Polymer 3

Question

I am developing a web component using Polymer v3, and need to include some custom elements defined in legacy Polymer 2 components in the template HTML of my new component.

Since HTML imports are no longer supported in Polymer 3, what approach should I take to include them? If I was using Polymer 2 I could just add the following in my component's HTML file:

<link rel="import" href="../my-legacy-component.html">

I have tried adding the above link into the template HTML of my component, but it appears that doesn't work. I have also tried various import commands to reference the JS files inside the legacy component directly, but received various inscrutable JS errors so I'm not sure if that is the correct way to go either.

I can't believe there isn't a simple way to do this - would the Polymer team really introduce a new version of the library that is completely incompatible with all the components created using older versions?

Bellini

Answer 1

Did you try to use polymer-modulizer? Modulizer performs many different upgrade tasks, like:

• Detects which .html files are used as HTML Imports and moves them to .js
• Rewrites in HTML to import in JS.
• Removes "module wrappers" - IIFEs that scopes your code.
• Converts bower.json to package.json, using the corresponding packages on npm.
• Converts "namespace references" to the proper JS module import, ie: Polymer.Async.timeOut to timeOut as imported from @polymer/polymer/lib/util/async.
• Creates exports for values assigned to namespace referencs. ie, Foo.bar = {...} becomes export const bar = {...}
• Rewrites namespace objects - an object with many members intended to be used as a module-like object, to JS modules.
• Moves Polymer element templates from HTML into a JS template string.
• Removes s if they only contained a template.
• Moves other generic HTML in the document into a JS string and creates it when the module runs.

more on github

Alexia

Thanks, yes I looked at that - when I tried to run it I got an error saying that the module 'js-yaml' could not be found, seems like that utility isn't all that robust – Bellini

Ok, I raised a bug on their github and it was fixed within 12 hours(!) So this might be a viable option but I don't really like the idea of having to rewrite the source code of a component to get it to work, it would be much nicer if the framework itself supported importing legacy components. – Bellini

None of the rewrites in HTML to import in JS works on my end using this tool, have to do that by hand on everything – Mccrory

Answer 2

I have ran into the same problem with the module js-yaml earlier. I don't have enough reputation for a comment yet so I just write it down here.

1. Run this sudo npm install -g js-yaml -> This will install the missing package for the tool
2. Then at the root of your project, run modulizer --import-style name --out . -> This will convert your component from Polymer 2 to Polymer 3. The option --import-style name tells the tool to use package name instead of path. --out will make the tool writes those files to the directory.
3. After that, if no error prompts. Try to serve it with polymer serve --module-resolution=node -> Since we are using node modules now, we have to provide the --module-resolution=node option.

Timetable

Thanks, I've raised this as an issue on their github project, if you want to add any information it's here: github.com/Polymer/polymer-modulizer/issues/436 – Bellini

Yeah. I guess it was some fat-fingering issue. – Timetable