How to install polymer iron and paper elements for Polymer 0.9 using bower? Tried using bower to install in a way similar to core-elements but fails. Migration guide doesn't provide any information on upgrading core/iron or paper elements.
bower install Polymer/iron-elements#^0.9.0
bower iron-elements#^0.9.0 not-cached git://github.com/Polymer/iron-elements.git#^0.9.0
bower iron-elements#^0.9.0 resolve git://github.com/Polymer/iron-elements.git#^0.9.0
bower iron-elements#^0.9.0 ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/Polymer/iron-elements.git", exit code of #128 fatal: remote error: Repository not found.
The new 0.9 elements are here.
You get them with bower this way:
bower install polymerelements/iron-ajax
I don't think there's an entire element collection ready yet, you should probably download every single needed element.
You can find more info about the new elements in the 0.9 release info:
Where did the elements go?
Not all elements have been ported to the
current release, but we’re porting them as fast as we can. You can
find work-in-progress versions of many elements in the PolymerElements
GitHub organization.
The elements are being reorganized into more consistent product lines,
including:
Iron elements. Basic elements that don’t express a visual style. Most
of the old core- elements are being renamed to iron-. Some former
core- elements that implemented material design (such as core-toolbar,
core-menu, core-header-panel) are being migrated to paper-.
Paper elements. Material design elements. All of the old paper-
elements, plus a few of the old core- elements.
Neon elements. Animation elements.
These element sets will be launching with their own site sometime
around the Polymer 1.0 timeframe. The new site will include API docs
for the elements. If you want to get started with the work-in-progress
versions, the individual repos are the best source for information
about the elements right now.
You can also check out the community Road to Polymer project which is
tracking the status of Polymer elements.
Also, you may find some valualble info in the Polymer Blog. Stay tuned!
Thanks Matteo. Adding to Matteo's answer we can install all available ported iron and paper elements for Polymer 0.9.0 using the following bower commands
bower install polymerelements/iron-elements
bower install polymerelements/paper-elements
for any elements installation, first go to element's page:
https://elements.polymer-project.org/
and find the element you want. while inside the element's page, in the left hand side, there is 'Bower Command' section.
just copy that and paste it in your shell/terminal/command prompt.
I had the same error as you reported, and was unable to install any elements using bower as proposed above. However, everything worked after running following command in my project folder:
git config --local url."https://".insteadOf "git://"
Here you may find more details about this solution:
Bower Install error: Unable to connect & exit code of #128
Related
The new Chrome 64 security update seems to have broken the htmlToImage libraries. None of the styling is correctly calculated and is rendered as if no styling was applied at all.
Does anyone know of a workaround / fix? Do I need to put my CSS on the server and allow CORS?
I just fixed this error.
Forked the lib and made a pull request. Until it gets merged, you can use the forked repo: https://github.com/kmap-io/html-to-image
by replacing the target of html-to-image in your package.json with:
"html-to-image": "git+https://github.com/kmap-io/html-to-image.git"
About the bug
Chrome is complaining (throws an error) about trying to read a property that does not exist. Firefox also complains, but they only throw a warning, instead of an error. The fix consists of replacing
if (sheet.cssRules) {
...
with
if (sheet.hasOwnProperty('cssRules')) {
...
There is no downside (i.e.: when cssRules exists on sheet - which is a stylesheet - the script iterates through the rules and adds them to document, as supposed to).
How to patch (until it gets merged).
For some reason, simply replacing the library's repo with the fork in which I committed the change doesn't work for this package. I asked the lib's author to add instructions on how to build after a pull-request, as they state in the readme pull requests and contributions are welcome. Until then, here's how to apply the fix using patch-package:
add "prepare": "patch-package" inside scripts, in your project's package.json
npm i patch-package --save-dev
In node_modules/html-to-image/lib/embedWebFonts.js, change line 7 from
try {
to
if (sheet.hasOwnProperty('cssRules')) try {
npx patch-package html-to-image
If you have a deployment script that builds your project from scratch, you'll need to apply the patches right before you call npm run build (or similar, depending on your stack):
git apply --ignore-whitespace patches/*.patch
That's about it.
When the fix will be merged, you'll need to run:
npx patch-package html-to-image --reverse
I'm a bit confused as to how to build a Polymer Element 1.x, scaffolded by running $ polymer init
What I did so far:
Run $ polymer init
Coded my element in ES6 without changing any of the directory structure/paths.
Run $ polymer build
Current project structure
It's identical to the structure created by running $ polymer init with no changes whatsoever in the directories/path references.
/bower_components
/demo/index.html
/test/my-element_test.html
/test/child-element_test.html
my-element.html
child-element.html
bower.json
polymer.json
index.html
README.md
Goal is to create ES5 versions of the elements.
I'd like to create built versions of my element, transpiled from ES6 to ES5.
Ideally my project structure would look like this:
/bower_components
/demo/index.html
/build/bower_components
/build/my-element-es5.html
/build/child-element-es5.html
/test/my-element_test.html
/test/child-element_test.html
my-element.html
child-element.html
bower.json
polymer.json
index.html
README.md
Running $ polymer build only creates a build/default/index.html, which only contains an <iron-component-page> referencing my element.
Does $ polymer build work on single elements created with $ polymer init or is it just for app-style projects?
If it does work for pure elements, what am I missing here?
Note: My element 'project' contains 2 elements, my-element.html and child-element.html.
Actually it seems $ polymer build is not supporting Polymer Element projects at all.
See this Issue for more info and watch this S.O post on how to do single element transpilation
I'm using this yeoman generator (https://github.com/Swiip/generator-gulp-angular) for my project. And have added a couple of bower libraries, namely, videojs, ngDialog.
The problem I'm experiencing is that the css files included in these libraries aren't being packaged up into the vendor.css file like the rest of the packages are. I know that that the generator uses wiredep, but I'm afraid I don't know enough about it to find out what went wrong.
Basically, when I go to view source, I see that there are style includes underneath the vendor.css style include, eg.
<link rel="stylesheet" href="../bower_components/ngDialog/css/ngDialog.css">
Also notice how it is included using "../". This would break if I'm in an HTML file that is in a directory other than the root.
Any pointers?
Thanks.
John.
Basically you don't have to worry about the building process, the gulpfile provided by gulp-angular is well configured for you future including bower components.
Once you run bower install your_component, be sure to run gulp build again in command line, it will then include the needed styles to your index.html.
If you would like to know more about the underlying process with that, you may check yourapp/src/index.html from line 12 to line 20 to get a sense of it. For how wiredep works for your bower components, the official document should suffice.
I was creating a customer element using the "Your first Polymer App" templates and I wanted to switch over from the included components folder to a Bower managed install. However, after swapping some URLs I began to receive the following error:
polymer Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
The solution is to change ALL of the file paths over to the Bower install of Polymer at the same time. HTML imports suppress duplicate paths but switching will cause it to load Polymer twice and things break.
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.