When you have a Polymer 2 bower.json with dependency variants and run polymer install --variants, where does it store the variant dependent components?
The variants are stored in the same parent directory of the default bower_components/. For example, given variants named "variant-1" and "variant-2", the resulting directory structure of the command is:
bower-variant-1.json
bower-variant-2.json
bower.json
bower_components/
bower_components-variant-1/
bower_components-variant-2/
You can find an example test fixture for the polymer install --variants command in polymer-cli source. Run the command in that directory to see the result described above.
Related
Question
I am following the "Build an App with App Toolbox" tutorial. I had an issue with step 3 "add some elements" where the view would not display once I try to add the paper-checkbox element.
After some trial and error, I discovered that there is an extra node_modules folder within the paper-checkbox folder. This caused the view to break and therefore not display (more on this below). Why does this happen and how can this be fixed?
Tutorial Link
https://www.polymer-project.org/3.0/start/toolbox/add-elements
Full Problem Details
I started the project using the command line interface, ran polymer init and chose polymer-3-starter-kit per the tutorial instructions. I ran the following command to install paper-checkbox:
npm install #polymer/paper-checkbox
Note that I get the following warning after I install the element:
npm WARN #babel/plugin-transform-classes#7.0.0-beta.35 requires a peer of #babel/core#7.0.0-beta.35 but none is installed. You must install peer dependencies yourself.
+ #polymer/paper-checkbox#3.0.0-pre.20
added 12 packages from 1 contributor and audited 13720 packages in 27.422s
found 46 vulnerabilities (25 low, 14 moderate, 5 high, 2 critical)
run npm audit fix to fix them, or npm audit for details
I checked my node_modules folder and I can see that paper-checkbox was installed.
So far when I load my-new-view it displays correctly, like this:
However, when I add the import statement inside my-new-view.js for the paper-checkbox element,
import '#polymer/paper-checkbox/paper-checkbox.js'; the view fails to display:
After some code comparison with another project, I see that the paper-checkbox folder does not match up (see screenshot below). It contains a duplicate node_modules folder, which contains a duplicate #polymer folder. This polymer folder contains font-robota and other modules that are already contained in the top polymer directory; even more duplicated content.
Furthermore, on inspecting the webpage, the console (on chrome) gives the following error:
Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at Polymer (http://127.0.0.1:8081/node_modules/#polymer/polymer/lib/legacy/polymer-fn.js:43:18)
at http://127.0.0.1:8081/node_modules/#polymer/paper-checkbox/node_modules/#polymer/iron-meta/iron-meta.js:141:1
This error occurs due to the fact that there is duplicate content. To solve this, I simply deleted the node_modules folder within the checkbox element.
I also tried installing paper-input as well. paper-input requires iron-input. After running npm install #polymer/paper-input the same node_modules folder is installed within both the iron and paper input elements. I deleted these two folders and then the element finally works.
Why does npm do this? And how can I fix it?
Github Project Repo
https://github.com/starkindustries/my-first-polymer-app
Version Info
Git Version 2.17.1 (Apple Git-112)
NPM version 6.4.1
Node version v10.10.0
Polymer CLI version 1.8.0
Chrome Version 69.0.3497.100 (Official Build) (64-bit)
Did you run npm install #polymer/paper-checkbox from the project root? If you run npm install command from the root of papaer-checkbox folder, it would read it's dependency folder from it's package.json file and install them.
When I use polymer init to create a polymer 2 element, I see that an /app directory is created. Is this expected? I'm being told by my team members that there should be no /app directory installed when creating a polymer 2 element.
I used npm install -g polymer-cli#next for the install. Also tried uninstalling and reinstalling again.
Any ideas are appreciated.
According to the docs this is not an expected behaviour.
This is not also a behaviour of the old version of the polymer-cli.
Can you please show your prompt result after running the command?
I found out that the issue was related to having a .bowerrc file in a parent directory. In there, the 'app' directory was specified. I simply had to remove the 'app' reference and when I ran bower install again bower_components were installed without the app directory.
I am trying to use components from http://react-components.com (eg. react-youtube) in Reagent based application, but probably my naive approach is not the right one. I tried to install NPM packages with lein-npm module, include script in html page and use them via reagent/adapt-react-class as in this SO question. But for except this sample I wasn't successful.
Usually I get errors like "require/import/module is not defined" or "Youtube is undefined" (by having (def yt-test [] (r/adapt-react-class js/Youtube)). I am confused about what is needed to do. I read something about webpack/browserify, saw cljsjs packages - are those required in order to make this working?
I wrote a step by step guide on how to achieve this with webpack:
blob.tomerweller.com/reagent-import-react-components-from-npm
The general concept is the same as #scttnlsn suggested: bundle all npm packages in an external JS file and expose them through the global window object.
Those components are packaged as CommonJS modules. One approach for accessing CommonJS modules from ClojureScript is to bundle them into a single JavaScript file that can be included with your ClojureScript build.
You'll need to create a JavaScript entry point file which requires your various NPM dependencies and exposes them to ClojureScript (for example, by setting them on window). Create a file (let's call it index.js) containing:
window.YouTube = require('react-youtube');
Then use a tool like Browserify to bundle your entry point file and all of the dependencies it requires:
npm install -g browserify
browserify index.js --standalone window > bundle.js
Include bundle.js in your ClojureScript build and you'll be able to access the React component from ClojureScript via js/YouTube
Normally a bower.json file specifies some dependencies, but these are typically expressed so that they allow a range of versions of a bower package to be used (e.g. >=1.0, which means anything higher than version 1.0).
I have an automated process which needs to find what version of a bower package is actually installed on this system right now.
How can I find this out programmatically (just the version itself), ideally using standard Unix command line tools / the bower command?
bower info <thepackagename> does not show this - it shows information about what is currently available from the bower repository (for example, even if I do bower info apackageIdonthaveinstalled it will still show a valid JSON structure containing a version number).
cat bower_components/thepackagename/bower.json | node_modules/json/lib/json.js version works for some packages (assuming the npm package json is installed), but not all (e.g. jquery 2.2.0's bower package does not contain a bower.json).
Here's a grep command to do that:
grep "version\"\:" bower_components/thepackagename/.bower.json
Also, a command to see versions of all bower components for the project - this list can be a handy CI artefact:
grep "version\"\:" bower_components/*/.bower.json
Have you ever tried "bower list --json=0 --offline".
It would list all bower packages info.
The best approach I've now found, which seems to work for every package I've come across so far, is:
cat bower_components/thepackagename/.bower.json | node_modules/json/lib/json.js version
(note the extra . in .bower.json).
It would appear that bower stores some metadata about the installed package in .bower.json, and that includes the installed version.
The best I've come up with so far is:
bower list | grep jquery | perl -pe 's/.*jquery#(.*?) .*$/$1/'
(if, for example, the package I was interested in was jquery).
That's pretty ugly for a variety of reasons:
I have to repeat the package name (although this could probably be improved
with a better Perl script which filters lines too, I'm just being lazy).
bower list gets information about all installed packages, not just the one I'm interested in - the rest of the information is discarded.
bower list seems to require internet connectivity to check the registry, otherwise it fails.
Would be interested to see if this could be improved upon, particularly the last point.
Is it possible to combine polymer.html, polymer-mini.html and polymer-micro.html into a single file using gulp or some means?
You can use vulcanize this is the official tool
https://github.com/polymer/vulcanize
install:
npm install -g vulcanize
use:
vulcanize target.html > build.html
you have also gulp-vulcanize.. that uses this tool.
it combine all the imports into one single file. it gives you some more options like remove docs and more.
if you want to combine only this 3 files you can create one html that import the 3 files and vulcanize this file.
Another tool that helps doing that is Polybuild (which utilizes Vulcanize)
An all-in-one build tool for Polymer apps
Polybuild combines vulcanize, crisper, and polyclean into one easy to use solution for optimizing Polymer applications for production.
Install
npm install -g polybuild
Use
polybuild index.html