How to check what is included in NPM package - javascript

I installed this package: npm install #mediapipe/camera_utils
I would like to know how to find the contents of a package.

A good trick I've found is to use the website npmfs.com instead of npmjs.com (just replace "s" with "f" in a package url).
Here're the contents of that particular package (per each version)
and here're the contents of camera_utils.js from the latest version:
(function(){/*
Copyright The Closure Library Authors.
SPDX-License-Identifier: Apache-2.0
*/
'use strict';var e="function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){if(a==Array.prototype||a==Object.prototype)return a;a[b]=c.value;return a};function f(a){a=["object"==typeof globalThis&&globalThis,a,"object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global];for(var b=0;b<a.length;++b){var c=a[b];if(c&&c.Math==Math)return c}throw Error("Cannot find global object");}var h=f(this);
function k(a,b){if(b)a:{var c=h;a=a.split(".");for(var d=0;d<a.length-1;d++){var g=a[d];if(!(g in c))break a;c=c[g]}a=a[a.length-1];d=c[a];b=b(d);b!=d&&null!=b&&e(c,a,{configurable:!0,writable:!0,value:b})}}var l="function"==typeof Object.assign?Object.assign:function(a,b){for(var c=1;c<arguments.length;c++){var d=arguments[c];if(d)for(var g in d)Object.prototype.hasOwnProperty.call(d,g)&&(a[g]=d[g])}return a};k("Object.assign",function(a){return a||l});var m=this||self;var n={facingMode:"user",width:640,height:480};function p(a,b){this.video=a;this.h=0;this.g=Object.assign(Object.assign({},n),b)}function q(a){window.requestAnimationFrame(function(){r(a)})}function t(a,b){a.video.srcObject=b;a.video.onloadedmetadata=function(){a.video.play();q(a)}}function r(a){var b=null;a.video.paused||a.video.currentTime===a.h||(a.h=a.video.currentTime,b=a.g.onFrame());b?b.then(function(){q(a)}):q(a)}
p.prototype.start=function(){var a=this;navigator.mediaDevices&&navigator.mediaDevices.getUserMedia||alert("No navigator.mediaDevices.getUserMedia exists.");var b=this.g;return navigator.mediaDevices.getUserMedia({video:{facingMode:b.facingMode,width:b.width,height:b.height}}).then(function(c){t(a,c)}).catch(function(c){console.error("Failed to acquire camera feed: "+c);alert("Failed to acquire camera feed: "+c);throw c;})};var u=["Camera"],v=m;
u[0]in v||"undefined"==typeof v.execScript||v.execScript("var "+u[0]);for(var w;u.length&&(w=u.shift());)u.length||void 0===p?v[w]&&v[w]!==Object.prototype[w]?v=v[w]:v=v[w]={}:v[w]=p;}).call(this);
Note: NPM is actually adding this feature natively through the Explore tab but it's currently in beta.

First of all the best way to check will be npm
website itself from where you are
downloading this plugin.
During the installation itself you can check by command npm install -ddd
If you are willing to know more what all package content you need to
go to node_modules folder, find the package name which you are
looking for. Inside that folder you can find its own
pacakge.json file which includes all of its dependencies.

Related

index.css:undefined:undefined: plugin is not a function

I am attempting the Introducing a complete toolchain chapter of the Understanding client-side web development tools module of the MDN Front End Developer course. I have reached the final Running the transformation section where the instructions advise to run npx parcel src/index.html. At this stage I encounter two issues.
The build process gets stuck on Building scheduler-tracing.development.js. After several aborted attempts I let this run for 6 hours before aborting.
After aborting the process and re-running, I receive the following error:
/home/username/dev/will-it-miss/src/index.css:undefined:undefined: plugin is not a function
at LazyResult.run (/home/username/dev/will-it-miss/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:288:14)
at LazyResult.asyncTick (/home/username/dev/will-it-miss/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:212:26)
at /home/username/dev/will-it-miss/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:254:14
at new Promise (<anonymous>)
at LazyResult.async (/home/username/dev/will-it-miss/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:250:23)
at LazyResult.then (/home/username/dev/will-it-miss/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:131:17)
Being new to development I haven't had much luck in troubleshooting this error but these are the actions taken so far:
Set index.js script type to module and updated SVG paths as suggested in this thread on the MDN Discourse forum.
Replaced the postcss specific nested selectors from index.css with regular selectors
Reverted the project version of postcss to a previous build
Deleted and rebuilt the project from scratch 5~ times and get the same results (Stuck building scheduler-tracing.development.js, abort process, re-run and error relating to index.css outlined above.
Another user reported the same error I have as shown in the linked forum thread. if there is any other info that could be useful in troubleshooting this error, please let me know.
Try the following:
Run the following command to install a compatible version of
postcss-preset-env: npm install --save-dev postcss-preset-env#6.7.0
Add a single file called .postcssrc.json (if it is not already there; this replaces the .postcssrc file) to the root of your project
directory.
Add the following contents to the new file, which will automagically
give us full access to the latest CSS features:
{ "plugins": { "postcss-preset-env": { "stage": 0 } } }
Run the npx parcel index.html command again.
References:
Github, Inc. Issue with "Introducing a complete toolchain": fails to build; problem with postcss-preset-env versions #12495. https://github.com/mdn/content/issues/12495#issuecomment-1025004164. (Accessed 20 July, 2022).

Power BI custom D3 chart Could not find plugin "proposal-numeric-separator"

I have tried for custom D3 Power BI ,but showing me below error .I also reinstall pbiviz and node but showing same error .Need little help.
I tried adding different version older but not got success.
my node version is v12.16.1. and pbiviz 3.1.10 Now
PS C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard> pbiviz package
info Building visual...
info Start preparing plugin template
info Finish preparing plugin template
Error parsing bundle asset "C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard\.tmp\drop\visual.js": no such file
No bundles were parsed. Analyzer will show only original module sizes from stats file.
Webpack Bundle Analyzer saved report to C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard\webpack.statistics.prod.html
ERROR Failed to compile with 1 errors 10:43:12 PM
error in ./.tmp/precompile/visualPlugin.ts
Module build failed (from C:/Users/mahendra/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/babel-loader/lib/index.js):
Error: [BABEL] C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard\.tmp\precompile\visualPlugin.ts: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "C:\\Users\\mahendra\\AppData\\Roaming\\npm\\node_modules\\powerbi-visuals-tools\\node_modules\\#babel\\preset-env\\lib\\index.js")
at getPlugin (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\preset-env\lib\index.js:67:11)
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\preset-env\lib\index.js:258:62
at Array.map (<anonymous>)
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\preset-env\lib\index.js:258:43
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\helper-plugin-utils\lib\index.js:19:12
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\core\lib\config\full.js:199:14
at Generator.next (<anonymous>)
at Function.<anonymous> (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\core\lib\gensync-utils\async.js:26:3)
at Generator.next (<anonymous>)
at step (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:254:32)
at evaluateAsync (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:284:5)
at Function.errback (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:108:7)
at errback (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\core\lib\gensync-utils\async.js:70:18)
at async (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:183:31)
at onFirstPause (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:209:13)
at Generator.next (<anonymous>)
# multi ./.tmp/precompile/visualPlugin.ts
error Package wasn't created. 1 errors found
warn Please, make sure that the visual source code matches to requirements of certification:
info Visual must use API v2.5 and above
info The project repository must:
info Include package.json and package-lock.json;
info Not include node_modules folder
info Run npm install expect no errors
info Run pbiviz package expect no errors
info The compiled package of the Custom Visual should match submitted package.
info npm audit command must not return any alerts with high or moderate level.
info The project must include Tslint from Microsoft with no overridden configuration, and this command shouldn’t return any tslint errors.
info https://www.npmjs.com/package/tslint-microsoft-contrib
info Ensure no arbitrary/dynamic code is run (bad: eval(), unsafe use of settimeout(), requestAnimationFrame(), setinterval(some function with user input).. running user input/data etc.)
info Ensure DOM is manipulated safely (bad: innerHTML, D3.html(<some user/data input>), unsanitized user input/data directly added to DOM, etc.)
info Ensure no js errors/exceptions in browser console for any input data. As test dataset please use this sample report
info Full description of certification requirements you can find in documentation:
info https://learn.microsoft.com/en-us/power-bi/power-bi-custom-visuals-certified#certification-requirements
I sorted out after long trial and error.
Here are the steps. First, manually install the problematic dependencies:
npm install --save-dev #babel/core
npm install --save-dev #babel/preset-env
npm i #babel/plugin-proposal-numeric-separator
Second, go to file path in which the error is occurring (not in your code dir). In my case:
C:/Users/mahendra/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/#babel/preset-env/lib/available-plugins.js
Note that this was found by examining the error message and noticing this line:
Ensure there is an entry in ./available-plugins.js for it. (While processing: "C:/Users/mahendra/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/#babel/preset-env/lib/index.js")
Finally, add the following lines to the file:
var _pluginTransformNumericSeperator = _interopRequireDefault(require("#babel/plugin-proposal-numeric-separator")); (Import dependency; anywhere above the definition of the export object _default)
"proposal-numeric-separator": _pluginTransformNumericSeperator (Add the dependency as a new export in the export object _default by adding a new key value pair)
Note that you may have to replace the path argument to require() with an absolute path to the location of #babel/plugin-proposal-numeric-separator in step 1 above if you are unable to resolve this during your next build.
Enjoy!
The root issue seems to be a problematic version of #babel/plugin-proposal-numeric-separator that powerbi-visuals-tools is depending on.
An alternative to the accepted solution is to install a working version of #babel/plugin-proposal-numeric-separator as a global dependency and then modify the powerbi-visuals-tools to use this instead of its packaged version. See steps below:
npm i -g #babel/plugin-proposal-numeric-separator
Locate the file that lists dependencies for the failing module. See the accepted answer for instructions, but it seems to be this path for Windows: <userDir>/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/#babel/preset-env/lib/available-plugins.js
Add the following lines to this file:
var _pluginTransformNumericSeperator = _interopRequireDefault(require("#babel/plugin-proposal-numeric-separator"));
This imports our globally installed dependency: place anywhere above the definition of the export object _default
"proposal-numeric-separator": _pluginTransformNumericSeperator
Add the dependency as a new export in the export object _default by adding a new key value pair
You should now see the build succeed.
As a note, I'd generally avoid installing global dependencies like this. However, this may be the easiest workaround until the powerbi-visuals-tools package is updated to fix this issue. When this is done, I would recommend uninstalling the global dependency and reinstalling the powerbi-visuals-tools from scratch to undo our changes to the dependency file.

Protractor>Package.json configuration> Cannot find .bin folder in my mac book

I'm creating a protractor project and I need to set up the dependencies in the npm package.json
On my course my trainer has a window machine, I have a mac book and I am having problems finding the .bin folder so I can find the correct node to start protractor
I did
cd/documents/ls/cd JSworkspace/ls/my_project/ls/node_modules/ls
I was expecting to find the .bin folder....but I can't find it anywhere.
I don't know where to find the .bin folder and I would really appreciate your help. As I am looking for the webdriver manager file in the .bin folder
thanks a million
This is currently in my node_modules folder
#types jasmine
adm-zip jasmine-core
agent-base jasminewd2
ajv jsbn
ansi-regex json-schema
ansi-styles json-schema-traverse
array-union json-stringify-safe
array-uniq jsprim
arrify jszip
asn1 lie
assert-plus mime-db
asynckit mime-types
aws-sign2 minimatch
aws4 minimist
balanced-match ms
bcrypt-pbkdf oauth-sign
blocking-proxy object-assign
brace-expansion once
browserstack optimist
caseless os-tmpdir
chalk pako
co path-is-absolute
combined-stream path-is-inside
concat-map performance-now
core-js pify
core-util-is pinkie
dashdash pinkie-promise
debug process-nextick-args
del protractor
delayed-stream psl
ecc-jsbn punycode
es6-promise q
es6-promisify qs
escape-string-regexp readable-stream
exit request
extend rimraf
extsprintf safe-buffer
fast-deep-equal safer-buffer
fast-json-stable-stringify saucelabs
forever-agent sax
form-data selenium-webdriver
fs.realpath semver
getpass source-map
glob source-map-support
globby sshpk
har-schema string_decoder
har-validator strip-ansi
has-ansi supports-color
http-signature tmp
https-proxy-agent tough-cookie
immediate tunnel-agent
inflight tweetnacl
inherits util-deprecate
ini uuid
is-path-cwd verror
is-path-in-cwd webdriver-js-extender
is-path-inside wordwrap
is-typedarray wrappy
isarray xml2js
isstream xmlbuilder
.bin folder is hidden (and every folder/file with dot at the beginning).
You need to do that in the terminal:
defaults write com.apple.finder AppleShowAllFiles YES
And then restart the Terminal.
Please uninstall and reinstall protractor at local level.
thanks. I found that if I do shift+cmd+. I can reveal the hidden files. I was able to get access to the .bin folder.
I also installed protractor at local level as well.

How do I include a .gitignore file as part of my npm module?

I am building an npm module that will generate a specific project template for certain software projects. As such, when a developer installs my npm module and runs it, I would like the program to create files and folders in a certain way.
One such file I would like to include in the project template is a .gitignore file because the software project is going to assume it will be tracked via git. However, when I call "npm install" on my module, npm renames all my .gitignore files to .npmignore files. How can I ensure that my .gitignore files are not tampered with by npm when I distribute my module?
Currently npm doesn't allow .gitignore files to be included as part of an npm package and will instead rename it to .npmignore.
A common workaround is to rename the .gitignore to gitignore before publishing. Then as part of an init script, rename the gitignore file to .gitignore. This approach is used in Create React App
Here's how to do it in Node, code from Create React App init script
const gitignoreExists = fs.existsSync(path.join(appPath, '.gitignore'));
if (gitignoreExists) {
// Append if there's already a `.gitignore` file there
const data = fs.readFileSync(path.join(appPath, 'gitignore'));
fs.appendFileSync(path.join(appPath, '.gitignore'), data);
fs.unlinkSync(path.join(appPath, 'gitignore'));
} else {
// Rename gitignore after the fact to prevent npm from renaming it to .npmignore
// See: https://github.com/npm/npm/issues/1862
fs.moveSync(
path.join(appPath, 'gitignore'),
path.join(appPath, '.gitignore'),
[]
);
}
https://github.com/npm/npm/issues/1862
Looks like this is a known issue. The answer at the bottom seems like the recommended approach. In case the issue or link ever gets destroyed:
For us, I think a better solution is going to be clear documentation that if authors wish to use .gitignore in their generators, they will need to name their files .##gitignore##, which will be a value gitignore set to the same string gitignore.
In this way, the file that gets published as a template file to npm is called .##gitignore## and won't get caught by npm, but then later it gets replaced with the string to be .gitignore.
You can see multiple commits dealing with npm issue 1862:
this project adds a rename.json:
lib/init-template/rename.json
{
".npmignore": ".gitignore",
}
this one renames the .gitignore:
templates/default/.gitignore → templates/default/{%=gitignore%}
index.js
## -114,6 +114,10 ## generator._pkgData = function (pkg) {
+ // npm will rename .gitignore to .npmignore:
+ // [ref](https://github.com/npm/npm/issues/1862)
+ pkg.gitignore = '.gitignore';
Edit: even though this answer causes .gitignore to be included in the published package (proven by unpkg), upon running npm install the .gitignore file is simply removed! So even getting NPM to include the file is not enough.
Another solution (simpler imo):
Include both .gitignore and .npmignore in the repo. Add the following to your .npmignore file:
!.gitignore
!.npmignore
Now that .npmignore will already exist in the published package, NPM won't rename .gitignore.

How to do JSLint in Vim

I spend my days in vim, currently writing a lot of JavaScript. I've been trying to find a way to integrate JSLint or something similar into vim to improve my coding. Has anyone managed to do something like this?
I tried this: Javascript Syntax Checking From Vim, unfortunately the output is very crude.
The best-practice way IMO is:
Install Syntastic Vim plugin - Best syntax-checker around for plenty of languages, plus it integrates with Vim's location-list (==quickfix) window.
I recommend cloning from the GitHub repo and installing using a plugin manager like Vundle or Pathogen, since it's more frequently updated.
Choose one of the two options below:
JSLint
Install jsl (JSLint executable) using your favorite package manager (Ubuntu's apt-get, Mac's home brew, etc.).
Community-driven jshint.com (better than JSLint)
Install node.js using your favorite package manager.
Install Node Package Manager: 'curl https://npmjs.org/install.sh | sh' EDIT: npm IS PART OF node.js NOW
See http://npmjs.org for more info.
Install jshint globally: 'npm install jshint -g'
Put your jshint config file in your $HOME dir: '~/.jshintrc'
Here's JSHint-Node's example configuration file, they pulled from mine and added more stuff.
Here's my original copy, which you can also start from.
Overwrite Syntastic's syntax_checkers/javascript.vim file with this one - EDIT: NO LONGER NECESSARY WITH NEWEST SYNTASTIC VERSION.
Script copied from FactorayLab's really helpful Vim GitHub page, which I recommend every Vim user to check out.
Enjoy! :)
You can follow the intructions from JSLint web-service + VIM integration or do what I did:
Download http://jslint.webvm.net/mylintrun.js and http://www.jslint.com/fulljslint.js
and put them in a directory of your choice.
Then add the following line to the beginning of mylintrun.js:
var filename= arguments[0];
and change last line of code in mylintrun.js ("print( ...)") to:
print ( filename + ":" + (obj["line"] + 1) + ":" + (obj["character"] + 1) + ":" + obj["reason"] );
This makes in mylintrun.js output a error list that can be used with the VIM quickfix window (:copen).
Now set the following in VIM:
set makeprg=cat\ %\ \\\|\ /my/path/to/js\ /my/path/to/mylintrun.js\ %
set errorformat=%f:%l:%c:%m
where you have to change /my/path/to/js to the path to SpiderMonkey and /my/path/to/mylintrun.js to the path where you put the JS files.
Now, you can use :make in VIM and use the quickfix window (:he quickfix-window) to jump from error to error.
Another option is jslint.vim from Jesse Hallet. It's available on GitHub and works with or without Vim's QuickFix window. It's a nice plugin!
I've been very happy using node-lint
sudo npm -g install jslint
Then whack this somewhere in your .vim
set makeprg=jslint\ %
set errorformat=%-P%f,
\%E%>\ #%n\ %m,%Z%.%#Line\ %l\\,\ Pos\ %c,
\%-G%f\ is\ OK.,%-Q
Now a :make will run jslint. Errors appear in the quickfix window.
Here are the Mac OS instructions updated for Nov. 2012. Assumes you have Homebrew installed in order to get Node.js, and that you've already installed Syntastic for Vim (I use https://github.com/carlhuda/janus which provides this automatically):
$ brew install node.js
$ npm install -g jshint
Then add '/usr/local/share/npm/bin' to your PATH (probably in ~/.bashrc). For example, add the line:
export PATH="$PATH:/usr/local/share/npm/bin"
restart your Terminal and check that
$ jshint
is executable from the command line. Syntastic will discover jsHint automatically. Restart MacVim and enjoy!
Much better is to pipe the results through Lynx to deal with JSLint's unfortunate choice of HTML for output format. I have a blog post on how to do it here:
http://www.fleegix.org/articles/2008-09-06-jslint-in-vim-through-lynx

Categories