One JavaScript code file for multiple locations - javascript

We are developing multiple Java EE applications (8 for the moment) that are all based on the same sort of code. However, all the apps are clearly separated as different projects in Eclipse, they all have their own folder on Windows Explorer, and they all have their own repo on the Git server.
The idea was to put the redundant code somewhere (another project named "core"), and use it on every apps automatically without having to recode the same thing 8 times.
For the Java part, we did a "link source" in each project, which create sort of a symlink inside Eclipse to the "core" project, and use the specified "core" package in Java source with no problem.
But it doesn't work so well for the JavaScript/CSS part. I have absolutely no clue about how to code my redundant JS/CSS onto the "core" project, and use it elsewhere without having to manually copy it each and every time I modify it.

I think you should look into git for a solution to your problem. After all you still want the js file to be included in every project, but be maintained in a seperate project (as far as I understand it). There ought to be some sort of submodules and/or commit-handles or whatever to solve this using git.

This is what the User Library functionality in the JavaScript Include Path properties of your project is for.

Related

Eclipse for PHP Developers - Javascript Content Assist and Tasks Not Working

I'm using Eclipse IDE for PHP Developers Version 2020-03 (4.15.0) on Windows 10 Home, 64-bit.
When I create a JavaScript project (or create a PHP project and convert it to a JavaScript project) and edit a .js file or type JavaScript code between tags in an .html file, Content Assist is not giving any suggestions for built-in JavaScript objects or methods, and task tags (like TODO) are not showing in the Tasks view.
Content Assist will suggest functions, variables, objects, and methods created in whatever .js file is currently being edited, but it won't suggest any built-in JavaScript objects or methods unless they've already been used in the file (in which case it treats them as user-defined). ECMAScript Built-In Library, JavaScript Web Project Support, and ECMA 3 Browser Support Library are all included in the project's JavaScript Include Path. I can expand the Libraries under "JavaScript Resources" in the project tree and double-click on any of the entries to open the .js files that contain the definitions for the built-in objects and methods, but Content Assist doesn't suggest any of them when I type and press ctrl+space.
The Tasks view shows task tags in .php, .css, and .html files, but not in .js files. If I add a task tag in a .js file (like "/TODO Fix this/") the tag is highlighted correctly (syntax highlighting in .js files works), but it doesn't register as a task (the task icon doesn't appear in the gutter to the left of the line number the way it does in .html, .css, and .php files).
I've been searching for solutions for hours but everything I find either doesn't work, says to change a setting that's already set correctly, or doesn't apply to this version of Eclipse.
I tried using an older version of Eclipse (Oxygen.3a) and it does exactly the same thing, so I'm assuming I'm doing something wrong?
EDIT: Some answers for older versions of Eclipse that I wasn't able to find on my own showed up after I posted this (such as Eclipse: Content Assist not showing suggestions). I tried downloading an even older version of Eclipse, Mars.2, and everything is working correctly in that version. Are the issues in Eclipse 2020.3 just "bugs"?

Swagger-Codegen: How do I consolidate all files into one file for Client-Code-Generation

I’ve just got started with Swagger and NodeJS. I was able to implement Swagger to my NodeExpress application and was also able to generate typescript-client-code with Swagger-Codegen (Typescript-Angular) to be exact.
One problem that I have is the generated code is so spread out many different files. I was hoping that it only output one file api.ts and it contains everything from API calls and interfaces/models.
I’ve been looking for a way to solve this problem because it is hard to read and maintain the generated-client-code as the backend grows.
Any suggestions or pointers would be much appreciated.
Happy Holiday! Thank you
EDIT: I have been looking for answers for this for a couple of days and still haven't found one. I'm currently working on a project with ASP.NET Core and they have NSwag which does what I want to achieve with Node Swagger.
TL; DR
You may compile all files into a single *.ts file as shown at this post.
Continuous Integration Approach
Swagger code generator simplifies maintenance because it allows you to think in terms of continuous integrations.
You should not be worried about code review or aesthetics (because it is a machine generated code), but about:
API versioning
Functions, methods and classes signatures
Documentation
If you are working with a CI system such as Jenkins or Ansible, you could automatically deploy the library to a private NPM account (for JS and TS) or Maven server (for Java and Kotlin).
Keeping the package version number consistently updated will allow the IDE to correctly prompt the user about updates on the API.
Swagger uses Mustache templates for generating the code. For making simpler
changes you can simple create a copy of one of the built-in templates and
modify that.
Then you can use your modified template like this:
swagger-codegen-cli generate -t path/to/template/dir/ -i spec.json
The output directory structure, however, cannot be changed using templates
alone. For that you'd need a custom codegen module. You can either create your
own or modify one of the built-in ones.

Webstorm JavaScript External Libraries vs Project Directories

In IIS and therefore VS, there are virtual directories which allow simplified, virtual, relative referencing in script tags. They are handy. In WebStorm you can get the same effect with Project Directories and then marking your project root as a Resource Root. If you do this, you also get coding assistance in the text editor.
WebStorm also has External Libraries, what is the point of these?
Is this for when you have a link to a CDN in your script tag and you want to get coding assistance? If you already have Project Directories, what is the point of External Libraries?
I've seen this answer and I kind of get the different modes of referencing/inclusion, but I don't get the big picture. What is the core reason for the External Libraries vs the Project Directories?
Is this for when you have a link to a CDN in your script tag and you want to get coding assistance?
Yes, this is the most common case - WebStorm can't use online resources for code assistance, it needs to have the corresponding javascript files available locally. So, if you don't like to pollute your project folder with all these library files, you can have them stored outside of your project and set up as libraries.
What is the core reason for the External Libraries vs the Project Directories?
See above - external libraries allow storing library files in an arbitrary location outside your project folder and still get code completion/highlighting/etc. Please also see the answer you refer to:
Note also that libraries are 'light-weight' as compared to .js files in your project - they are treated read-only, have the inspections turned off. Plus, you can assign documentation URLs to them, enabling external documentation for library code. So, even if you have your library files in your project, it might make sense to add them as libraries
see also this blog post

Best way to keep files that are used in multiple projects in sync?

I have a few files called "helpers.scss", "helpers.js" and "consolerules.js" that I use in every one of my projects. When I'm working on a project I'm modifying one of the files, for example I will add a function for replacing all strings within a strings into "helpers.js" but then when I open my other project I don't have that function.
Or I will add a helper css class in helpers.scss in the other project and I don't have it in the other projects.
What is the best way so I can always keep them in sync when I edit them in one of the projects? I was thinking of bower, gists, git, dropbox, google drive or something like that ...
I used two ways to handle these:
Get a CDN like server
Have a single version of those files and place them on a server. For example you could have URLs such as:
https://cdn.example.com/css/helpers.css
https://cdn.example.com/js/helpers.js
If you want to support versions (maybe you should?), you can add that to the filename:
https://cdn.example.com/css/helpers-1.3.css
https://cdn.example.com/js/helpers-1.2.js
Or to the path if you view all your files as having one common version:
https://cdn.example.com/1.2/css/helpers.css
https://cdn.example.com/1.2/js/helpers.js
Versioning is useful if you want to test a website with the newest version before using that version on your live site.
This is most certainly the easiest way if you can implement it that way. Now all your other websites will use those URLs instead of local versions of the files:
<link type="text/stylesheet" href="https://cdn.example.com/1.2/css/helpers.css"/>
Pull those files at build time
Depending on how you organize your websites (it is really not clear from your questions) and assuming you have folders on your machine with the original source, you can bring in those files as required with a script that you run before you upload your sites.
In my case, I like to do that in three steps:
I write the files
I copy the files to a .../build/... folder
I send the .../build/... folder to my test or production server
One reason for this is to generate a build folder that includes exactly what you want, verify it, then send it to your server. That verification happens only when you write your script. Once done, it should not require any additional work.
So... one reason to get such a script is that I can compile my files. For example, if you write PHP code, the servers only need the most compressed version of your code (unless you are debugging and need to find line numbers...) The script that generate the build folder could do:
for p in php/*.php
do
php -w $p build/$p
done
Now your PHP code on your server may be something like 20% smaller.
Similarly, you could copy your helper.css file as in:
cp ../helper-project/css/helper.css build/public_html/css/.
This copies the helpers.css file to your build folder. Since it grabs that file from your unique ../helper-project folder, you will always end up with the latest.
And instead of a simple cp command, you could also minimize that file at the same time:
cleancss --remove-empty ../helper-project/css/helper.css > build/public_html/css/.
The only problem here is that if you make changes to the helper-project, it won't automatically update all the projects. You still have to do in each project and run the script(s) that generate the build folder and copy that to your servers. Yet, I find that to be a practical way of doing things because that way I know when I do the update and I can test the resulting website(s) before going to production and once I update a production site, I can verify that it's still all working just fine.
You can do this with git (or any modern VCS); I assume you are using some sort of VCS for your code.
If you have a project being managed in git, you can even add multiple remotes, such that you can pull in code from multiple sources.
If you are using a VCS like git, then it is just a matter of doing a git pull <remote ref> <branch ref> whenever you want to sync up.
Otherwise, the comments to your question offer some alternatives.

Understanding the role of "building" in an open source javascript package?

I'm kind of a noob to this kind of thing. I'm interested in using MIDI.js (https://github.com/mudcube/MIDI.js/) to build a musical web app, not too different from the demos they have listed and downloadable.
My expectation of MIDI.js, which is not well documented, is that it would be a bunch of javascript code that I can use, sort of like jquery.
So I don't have an understanding of the role of a "build" folder, or node.js, or a gruntfile (barely know what that is).
My question is, what is their to build? There are several example html files (with js) included in the download that run right away on my local apache server, so what is left to be built?
Thanks
From the repo it looks like the build step simply concatenates the various source files into a single MIDI.js file as well as creating the minified version.

Categories