Modularize features and getting a build script.

[Saturate]

Hello guys,

This project is pretty nice and does a lot of stuff, thanks for that! I would like to contribute a bit, but the first thing that strikes me is that everything is in one file.

When working with big projects I find that it's always nice to have features in modules, this way, reuse-ability and maintenance is way more easy plus you get a lot of other benefits.

I have been using RequireJS a lot, with Handlebars for templates. I highly recommend this.

With require the project structure could look like like the following. I'm not sure that's the exact way that would be best, but it's pretty easy to change.

• modules/
  • global/
  • pages/
    • cart.js
  • cart/
    • add_empty_cart_button.js

// main.js (bootstraps the extension)
require(['modules/pages/cart'], function (CartPage) {
   // if bla bla Cart Code
   CartPage();
});

// modules/pages/cart.js
define(['modules/cart/add_empty_cart_button'], function(addEmptyCartButton) {
    // addEmptyCartButton is what's returned, could be any object/function
});

// modules/cart/add_empty_cart_button.js
define(function() {
    addtext = "<a href='javascript:document.cookie=\"shoppingCartGID=0; path=/\";location.reload();' class='btn_checkout_blue' style='float: left; margin-top: 14px;'><div class='leftcap'></div><div class='rightcap'></div>" + localized_strings[language].empty_cart + "</a>";

    var loc = 0;
    xpath_each("//div[contains(@class,'checkout_content')]", function (node) {
        loc = loc + 1;
        if (loc == 2) { $(node).prepend(addtext); }
    });
});

It's pretty simple, and allows for building all files into one minimized and optimized file. It's easy to use localization as well as a templating language (Jade, Handlebars, ect.) for HTML markup (this would help this project a lot, it can be hard to read the current HTML one liners)

Now I'm willing to setup the build and make the first modules, and examples of these. I would use Gulp where we also would get JSHint and other things like the possibility of unit testing. I can setup a CI server on Travis, for testing each commit with UNIT Tests and JSHint,

So the real question really is, how would you feel about this? I would hate to waste my time if you did not want it for some reason.

I'm sure there are some questions, just ask here and I'll answer them :-)

[jshackles]

Thanks for looking into this. My biggest worry with setting up a build environment such as this one is that a lot of the code that is created in this repository is then reused (and massaged) to work with the other versions of the extension (Firefox, Standalone, Opera, Safari, etc). It seems that if we were to do this, we would need to split the code between a "source" directory and a "compiled" directory (we have a lot of users who test and report issues by cloning this repository and loading it into Chrome as an unpackaged extension) and that it would need to be done simultaneously for the other versions.

Maybe I'm just not understanding how RequireJS works. :(

Either way, we will probably not be changing our build process until at least after the Steam Summer Sale is completed, which should be around June 30th.

[Saturate]

You don't necessarily need to compile the files before they work. You can load both an un-optimized and readable version from the source folder or build the chrome package from the compiled folder.

In-fact you don't need to optimize the files at all, on a extension it's pretty limited what you get in terms of optimization.

As a start I would not use optimization, I would just split the functions/methods up. This will make the project easier to merge and to maintain, the modules would then be testable with Gulp/Grunt. It would be super easy to add the preferred testing suit (Mocha, QUnit, ect.) to the Gulp file I added in #510.

A good plan of going forward according to me would be:

1. Setup RequireJS - this is super easy, just include the file.
2. Convert some of the functions into modular code. (This will give an idea about how it will work, and look)
3. Confirm that this is a good idea, for the maintainability by using the examples made in 2.
4. Let the conversion begin. Pull requests and own commit can slowly make functions use the require functions. (Work on other/new features will not be blocked by this)
5. All code should be modular by now, easier to read and understand. Easy to make UNIT Test for.
6. If we haven't done it before 5. make an example UNIT test for a function/module.
7. UNIT Test new stuff and allow for pull requests of old functions to ensure the stability of the project.

I'm more than willing to help out with 1 and 2 as a start - just to get it all started with RequireJS.

About the summer sale, I understand that. It would be a bad date to start something new - for obvious reasons.

RequireJS is made by James Burke from mozilla.

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

[jshackles]

Thanks for the explanation. This is something we'll definitely look into after the sale is over.

[Saturate]

Made a start in #510 why was this not accepted?

[VanityFox]

So, Enhanced Steam is discontinued. There is now Augmented Steam. Perhaps your requested feature/bugfix is already implemented there! If not, you could move your issue there.

[Saturate]

@VanityFox Thanks, it's still some very big files, and it's now 5 years later :-) It's not "fixed" yet, and it should most likely just be a gradual thing.

I would most likely "start over", in the sense that creating a new foundation for it all - and then just "copy" the old code over - or simply rewrite the most used features.