Firefox add-on review with external libs - javascript

I would like to submit an add-on into FF AMO. My project includes some external libs and after uploading my xpi to the store I got the message that I need to fix the following issues to have the faster automated review and signing:
Markup should not be passed to innerHTML dynamically.
Access to the Function global
It finds this issues for example inside the following files:
data/Pages/bower_components/jquery/src/core.js
data/Pages/lib/underscore.js
What could I do to ignore files from review process?
Is there any options to do that?
Thanks in advance!

After a lot of work our automatic review was successful.
In this case with the third party libs the problems and the solutions were the followings:
Third party source codes installed with bower and stored in bower_components can be detected as third party libs and if they are in the FF review system already - like angular, jquery - they will be ignored. Everything is OK.
Using third-party libs added to the project in a custom way - copying a minified file into a custom named folder will be detected as own code and will be reviewed. Do not use them like that way. Install them with bower instead.
But as you could see it was problem with a bower installed file as well in the Question: data/Pages/bower_components/jquery/src/core.js. Before creating the xpi that you will upload it is recommended to clear (better in an automatized way e.g. with gulp) the bower_compontents as well from the source codes. Keep only the dist file or files of bower_components.

Related

How and with what help to build a js package, which will include and use all used dependencies

I have a `js` file that will use a third party library installed with `npm`. This file will be downloaded to the project when we go to a certain page.
Since the third-party library is used only on this page, I do not want to include it in the project, that is, I want to download it along with the js package. What I need to use for creating a js package which will contain all dependencies? I've been looking all day, but I can't find the solution.
I solved the situation like this: I copied the content of a third-party library and pasted it into a JS file before my code.
It can also be done using a webPacker by this guide

Why my React app is not loading correctly (broken) in localhost?

I had my react project working correctly in localhost. Then, I decided to deploy it to github pages and it worked perfectly on the server too. Now, I'm trying to work on it again on localhost but it is not showing correctly. For some reason, photos are not loading and some css is not working correctly and after compile it in PowerShell says this:
Compiled successfully!
You can now view myportfolio in the browser.
Local: http://localhost:3000/myportfolio
On Your Network: http://192.168.56.1:3000/myportfolio
Note that the development build is not optimized.
To create a production build, use npm run build.
So if I go to my GitHub pages it is loading correctly but not in localhost (running npm start).
Any suggestion? Thank you in advance and let me know if you need more clarification
I did clone your repositories and found these problems:
You have been directly imported many third-party js given their relative path in the index.html. That doesn't work. You should append %PUBLIC_URL% before them. For e.g.
<script src="%PUBLIC_URL%/js/jquery.flexslider.js"></script> and similary for other script files.
But even this is not the best that you can do. You must not try to use jquery or third party js in a React App. Also, make it a part to install the related JS though npm and make them a part of the package.
You'll have to use <img src={require('/public/images/background.png')}... (Btw, the image name on your gh-pages is different. It's logo.png there)if you want the webpack to compile and make it a part of your project. Also, the path must reside within src and not public folder.
Other errors are are related to keys. Whenever you're mapping and iterating through a list in react you must specify a unique key.

Using gulp correctly showing the js file in the console [duplicate]

Recently I have seen files with the .js.map extension shipped with some JavaScript libraries (like Angular), and that just raised a few questions in my head:
What is it for? Why do the guys at Angular care to deliver a .js.map file?
How can I (as a JavaScript developer) use the angular.min.js.map file?
Should I care about creating .js.map files for my JavaScript applications?
How does it get created? I took a look at angular.min.js.map and it was filled with strange-formatted strings, so I assume it's not created manually.
The .map files are for JavaScript and CSS (and now TypeScript too) files that have been minified. They are called source maps. When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. When your app is in production, and has an error, the source map will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the source map, then any error would seem cryptic at best.
Same for CSS files. Once you take a Sass or Less file and compile it to CSS, it looks nothing like its original form. If you enable sourcemaps, then you can see the original state of the file, instead of the modified state.
So, to answer you questions in order:
What is it for? To de-reference uglified code
How can a developer use it? You use it for debugging a production app. In development mode you can use the full version of Angular. In production, you would use the minified version.
Should I care about creating a js.map file? If you care about being able to debug production code easier, then yes, you should do it.
How does it get created? It is created at build time. There are build tools that can build your .map file for you as it does other files. Sourcemaps fail if the output file is not located in the project root directory #71
I hope this makes sense.
How can a developer use it?
Don't link your js.map file in your index.html file (no need for that)
Minification tools (good ones) add a comment to your .min.js file:
//# sourceMappingURL=yourFileName.min.js.map
which will connect your .map file.
When the min.js and js.map files are ready...
Chrome: Open dev-tools, navigate to Sources tab. You will see the sources folder, where un-minified applications files are kept.
I just wanted to focus on the last part of the question; How are source map files created? by listing the build tools I know that can create source maps.
Grunt: using plugin grunt-contrib-uglify
Gulp: using plugin gulp-uglify
Google closure: using parameter --create_source_map
The map file maps the unminified file to the minified file. If you make changes in the unminified file, the changes will be automatically reflected to the minified version of the file.
Just to add to how to use map files: I use Google Chrome for Ubuntu and if I go to sources and click on a file, if there is a map file a message comes up telling me that I can view the original file and how to do it.
For the Angular files that I worked with today I click Ctrl + P and a list of original files comes up in a small window.
I can then browse through the list to view the file that I would like to inspect and check where the issue might be.

Correct minified/uglified/revv-ed JS on Windows, but empty file on Linux?

I've been pulling my hair lately. I have a Yeoman generated JekyllRB grunt/bower setup. The build works correct on my Windows machine but not on an automated Linux build machine.
With correct, I mean that I get a minified/uglified/revv-ed version of JQuery in
dist/js/50b6.app.js
On the continuous integration build setup, which runs Linux, I get an empty js file:
dist/js/d41d.app.js
I updated Grunt and all plugins to the latest version, without success. Analyzed my full Gruntfile.js, verified the src and dest of all the plugins and all seems the same, taking into account the difference in platform specific path separators.
Here is the link to the sources of my Jekyll site: site-ringo
Eventually, I was able to resolve this myself. I hadn't updated my local Bower components for a while. On my build server, I ended up with another version of JQuery than on my local machine. The newer JQuery was packaged differently leading to the jquery.js file being in another location. As such, the concat+uglify+rev build chain didn't pick up the correct file leading to the output file being empty.

Eclipse building workspace hangs after importing existing maven project because of JavaScript validation

When running Eclipse Kepler and importing an existing Maven project, Eclipse hangs during "Building Workspace (XX%)". Switching to the Progress tab reveals a "Validating nnn"; it looks like it’s validating a directory containing JavaScript files.
Kill Eclipse process.
Go to project folder and edit .project file.
Remove the following lines (it will disable failing JavaScript validator):
<buildCommand>
<name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
<arguments>
</arguments>
</buildCommand>
Save file.
Re-open Eclipse.
I faced the same problem when I tried to install Angular.js with bower in my project. I seems bower has lots of javascript files it downloaded automatically which caused my IDE to stuck in validation process for a long time. So, I solved this problem this way,
I first installed tern.js 0.9.0.
Then I went to the project properties, selected tern script path
included only the path I needed for validation, My project's
javascript folder. I excluded other path like placeholders,
Angular.js files, Jquery files.
I selected the Javascript from the properties again and did the same
things in include path's source.
My IDE currently working without freezing. I took help from there. Tern
I guess it can be helpful, where any IDE stuck due to lots of Javascript file.

Categories

Resources