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?
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
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.
Run this sudo npm install -g js-yaml -> This will install the missing package for the tool
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.
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.
Related
I am in the middle of converting a Polymer 2 app to Polymer 3. Modulizer did not work for me so I converted it manually. Thanks to the great upgrade guide it has been mostly straight forward so far.
One task is left though:
in my Polymer 2 app I had a special html import (d3-import.html) that brought in the d3.js lib version 3 which comes as a plain JavaScript file (no ES6 module!). This import was dynamically loaded in only two out of overall 20 pages because the other 18 pages did not need it.
In Polymer 3 I can not import it as an ES6 module because it is not a module. Loading it in my main start.html would mean it gets loaded even if the user only uses the other 18 pages that don't need it.
I tried writing script-tags in my web component templates but that doesn't seem to work. Unfortunately I don't see any error in the browser tools. The template simply stops to load at the line of the script-tags.
Any idea how to do this?
Additional question:
since I start using lit-element in the same application. How to solve the same problem with lit-element?
Edit: note that I currently don't use any build steps/tools except for polymer-build to replace the module paths with actual file paths.
Note that this challenge has nothing to do with Polymer or LitElement, this is only an issue with how to load non-module resources from a module.
The most straightforward way that I know of is to use a bundler like Rollup that can support CommonJS or UMD. Rollup has the commonjs plugin for this: https://github.com/rollup/plugins/tree/master/packages/commonjs
The other option is to upgrade to D3 5.x, which appears to be published as standard modules itself. Given the number of files involved, you'll still likely want a bundler to reduce network roundtrips.
I wish to use polymer to create a web component and embed it in another project built with angular.js.
The same way we can do with stencil, where I can just import a script and use the web components.
I tried following the official polymer tutorial, but it only specifies how to build a "polymer app", I wish to have a component, bundled into a single JS file.
I tried running these commands with polymer CLI.
polymer init
polymer build
I got an HTML file, but the source component was not compiled or bundled.
I expected a compiled version of the component which I can use in any other project - like I get when I compile stencil.
Here are some useful links for you
https://medium.com/#tonytunes2005/integrating-polymer-3-components-on-angular-5-317f8c43ef03
https://medium.com/google-developer-experts/mix-and-match-angular-custom-elements-polymer-1aee0b3d63a1
https://vaadin.com/blog/using-polymer-components-in-angular-2
we started our project with ES6 javascript skeleton.
we would like to extract some styles and custom attributes to a common folder so we can use these at any Aurelia module we will build in the future.
the problem is with the bundle files. we don't know how to config them to bundle external folder out of the main ES6 folder.
can you please tell us what to do?
It sounds like you want to build an Aurelia plugin that you can import into any project. I would start by taking a look at the Aurelia plugin skeleton.
Once you've built your plugin with the custom styles and attributes you want, you'll want to either register it with jspm as a link, or publically through a registry such as npm or github.
Once published, you will be able to jspm install registry:my-package in any new project, and add the following line to your main.js file:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.plugin('my-package');
}
For more information on this last step, see the brilliant answer provided by Ashley Grant here.
Polymer dist/ folder has a single html file https://github.com/Polymer/polymer/tree/master/dist with a HTML import and a script tag. Most of the polymer elements doesn't even have a dist folder. Wouldn't it be a good practice to provide a single distribution bundle file like polymer.js and do the same for each polymer element available there?
There are some obvious advantages with this approach:
1. Minimum http requests to get the polymer core or a polymer element.
2. Easy to use for the clients, just include the required element.
Example: Elements that depend on other shared elements,
- shared-element: /webcomponents/font-roboto/roboto.js
- custom-element1: uses shared-element
- custom-element2: uses shared-element
An app using custom-element1 and custom-element2 downloads /webcomponents/font-roboto/roboto.js
only once with a single http request.
<script src="../webcomponents/webcomponentsjs/webcomponents.js"></script>
<script src="../webcomponents/custom-element1/custom-element1.js"></script>
<script src="../webcomponents/custom-element2/custom-element2.js"></script>
PS: the above custom-element1.js does the same thing as custom-element1.html expect that it is convenient to programmatically load and access the component.
I would like to hear from polymer team or other polymer developers/users on the best practices they are following to solve this.
If I'm understanding you correctly, what you want is Vulcanize.
As of the time of this writing, for polymer 1.0, the instructions are:
If you have an input HTML file, elements.html, that uses a number of HTML imports, you can run it through Vulcanize as follows:
vulcanize elements.html -o elements.vulcanized.html
The -o or --output flag will direct the output to a new file called elements.vulcanized.html. If you omit the -o flag, Vulcanize will print the output to stdout, which can be useful if you want to pipe it to another command.
elements.vulcanized.html now contains a version of elements.html with all imports inlined and dependencies flattened. Paths to any URLs are automatically adjusted for the new output location, with the exception of those set in JavaScript.
You can pass additional options to Vulcanize in the form of flags. For a full list of supported flags, see the official Vulcanize documentation.
Here’s the same example from above. The extra flags tell Vulcanize to strip out comments, and to merge external scripts and CSS files into the vulcanized file.
vulcanize -o elements.vulcanized.html elements.html --strip-comments --inline-scripts --inline-css
https://www.polymer-project.org/1.0/tools/optimize-for-production.html
It seems that you have to manually checkout a bunch of repos, and when I tried to run the core-tests runner.html, they reference htmls from outside the folder which is restricted by the browser
Polymer uses a notion of components. We define a component as a set of shareable resources in a folder. All of your components should be together in one master folder (I usually call it components). This way one component can reference another component by looking in ../<component-name>/.
A project will generally look something like this:
my-project/
index.html
components/ <-- could be symlink or a server redirection
platform/ <-- polyfills
polymer/ <-- polymer
core-ajax/ <-- a custom element
...
core-tests in particular, is itself a component. It lives in the components folder and runs tests on other components (by looking at ../<component-name>/ as above).
So, if your web-root in the example above is my-project, you should be able to access my-project/components/core-tests/runner.html to run those component tests.
There are multiple ways to populate the components folder. The easiest way is to use Bower (http://bower.io) with a command like bower install Polymer/core-elements.
You can also use Git checkouts, or ZIP archives. There is a nifty utility for downloading Bower packages as zip files at bowerarchiver.appspot.com. E.g.:
http://bowerarchiver.appspot.com/archive?core-elements=Polymer/core-elements
Will get you a zip of the core-elements Polymer component, with all of it's dependencies.
There are two Yeoman generators that can help you with starting off: yo polymer and yo element
yo polymer is based on the polymer seed-element and yo element is based on the polymer-boilerplate.
I ended up writing a blog post on getting the hang of these different setups. If you get the latest version of the generator from the github repo it will scaffold an app for you:
npm install -g git+https://github.com/yeoman/generator-polymer.git
Also make sure to have a look at the vulcanize task to concat your components.