CODEWITHSUNDEEP
polymerpolymer-2.xpolymer-3.x
codebox
codebox

Reputation: 20254

Import Polymer 2 components in Polymer 3

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?

Upvotes: 6

Views: 1465

Answers (2)

Binh Bui
Binh Bui

Reputation: 343

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.

Upvotes: 1

Павел Марченко
Павел Марченко

Reputation: 181

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

Upvotes: 4

Related Questions