Need advice for Javascript environment to use


PowerGod

Forum Addict!
Joined
Jun 20, 2011
Messages
4,417
I'm not so used with javascript, and the times I needed to modify some scripts, those were really simple and small...

but now I want to hack the GOG Galaxy 2.0 interface, and there is for example this "client.js" that is a more than 3 MB one liner script, and this makes it really difficult to read, and also I wonder why it was made like this... I suppose that is the programming environment that does this.

After having "beautified" the javascript code, there are still things like this, and I understand this is a single string, but WTF:
Code:
module.exports = '<flat-button\n    galaxy-click\n    js-galaxy-menu-trigger="gameViewMoreButtonMenu"\n    selenium-id="gameViewMoreMenuButton"\n    button-role="tertiary"\n    button-padding="small"\n>\n    <galaxy-icon\n        i-gameViewMoreButton-triggerIcon\n        name="sliders-thick"\n    ></galaxy-icon>\n</flat-button>\n\n<galaxy-basic-menu\n    i-gameViewMoreButtonDropdown\n    i-menuWrapper="bottom"\n    menu-id="\'gameViewMoreButtonMenu\'"\n    selenium-id="gameViewMoreMenu"\n>\n    <menu\n        i-menu\n        galaxy-menu-root-menu\n    >\n        <div i-menu-triangleContainer>\n            <div i-menu-triangle></div>\n        </div>\n\n        <div ng-if="$ctrl.isPlayTasksNestedMenuVisible">\n            <play-tasks-nested-menu\n                is-play-disabled="$ctrl.isPlayTasksNestedMenuDisabled"\n                feature-settings-piece="$ctrl.featureSettingsPiece"\n                on-launch-play-task="$ctrl.launchPlayTask(playTask)"\n            ></play-tasks-nested-menu>\n            <hr i-menu-hr>\n        </div>\n\n        <galaxy-menu-button\n            ng-if="$ctrl.currentPlatform == $ctrl.gamingPlatforms.GOG"\n            is-disabled="!$ctrl.isChangelogAvailable"\n            on-click="$ctrl.openGameChangelog()"\n            selenium-id="gameViewMoreMenuGameChangelogButton"\n            slug="[[ (\'galaxy2.0_gameView.game_view__more_button__view_notes\' | translate) + \' \' + $ctrl.currentVersionOrBuildId ]]"\n        ></galaxy-menu-button>\n\n        <galaxy-menu-button\n            on-click="$ctrl.openGameEditWindow()"\n            is-disabled="!$ctrl.isGrkOwnedOrSubscribed"\n            selenium-id="gameViewMoreMenuEditButton"\n            slug="galaxy2.0_gameView.game_view__more_button__edit_game_info"\n        ></galaxy-menu-button>\n\n        <game-manage-nested-menu grk="$ctrl.grk"></game-manage-nested-menu>\n\n        <div ng-if="$ctrl.currentPlatform === $ctrl.gamingPlatforms.GENERIC">\n            <hr i-menu-hr>\n\n            <galaxy-menu-button\n                on-click="$ctrl.removeFromLibrary()"\n                is-disabled="$ctrl.isRemoveFromLibraryDisabled"\n                slug="galaxy2.0_gameView.game_view__remove_from_library"\n                selenium-id="gameViewMoreMenuRemoveButton"\n            ></galaxy-menu-button>\n\n            <galaxy-menu-button\n                on-click="$ctrl.removeExecutables()"\n                is-disabled="$ctrl.isUnlinkExecutableDisabled"\n                slug="[[ $ctrl.playTasks.length > 1 ? \'galaxy2.0_gameView.game_view__unlink_all_executables\' : \'galaxy2.0_gameView.game_view__unlink_executable\' ]]"\n            ></galaxy-menu-button>\n        </div>\n\n        <div ng-if="$ctrl.currentPlatform === $ctrl.gamingPlatforms.GOG">\n            <galaxy-menu-button\n                on-click="$ctrl.checkForUpdates()"\n                is-disabled="!$ctrl.isGameInstalled"\n                slug="galaxy2.0_gameView.game_view__more_button__check_updates"\n            ></galaxy-menu-button>\n        </div>\n\n        \x3c!-- SUPPORT & STORE LINKS SECTION --\x3e\n\n        <div ng-if="$ctrl.currentPlatform === $ctrl.gamingPlatforms.GOG">\n            <hr i-menu-hr>\n            <galaxy-menu-button\n                on-click="$ctrl.openSupport()"\n                ng-disabled="!$ctrl.supportLink"\n                slug="app_settings__support"\n                selenium-id="gameViewMoreMenuSupportButton"\n            ></galaxy-menu-button>\n\n            <galaxy-menu-button\n                on-click="$ctrl.openProductCard()"\n                ng-disabled="!$ctrl.productPageLink"\n                slug="galaxy2.0_gameView.game_view__more_button__view_in_store"\n                selenium-id="gameViewMoreMenuProductCardButton"\n            ></galaxy-menu-button>\n        </div>\n\n        <div ng-if="$ctrl.currentPlatform === $ctrl.gamingPlatforms.GENERIC && $ctrl.productPageLink">\n            <hr i-menu-hr>\n\n            <galaxy-menu-button\n                on-click="$ctrl.openProductCard()"\n                ng-disabled="!$ctrl.productPageLink"\n                slug="galaxy2.0_gameView.game_view__more_button__view_in_store"\n                selenium-id="gameViewMoreMenuProductCardButton"\n            ></galaxy-menu-button>\n        </div>\n\n        \x3c!-- SUPPORT & STORE LINKS SECTION END --\x3e\n\n        \x3c!-- Not bound to anything yet, so commented out\n\n        <galaxy-menu-button\n            ng-disabled="true"\n            ng-if="$ctrl.currentPlatform !== $ctrl.gamingPlatforms.GENERIC"\n            slug="galaxy2.0_gameView.game_view__more_button__patch_notes"\n        ></galaxy-menu-button> --\x3e\n    </menu>\n</galaxy-basic-menu>\n'

Is there some kind of programming environment that can manage javascript and these html strings in some kind of easier way ?
Or I just have to copy the code elsewhere to modify it in a human readable way and put it back again every time after I'm done ?
 
It can also be written in some framework (even sometimes in a different language) that will generate .js files that are quite different from what the original code.
 
Well, then seems like I'll have to do first some VIM functions to manage those strings, so to put them back after my changes.
 
If you clean it up into readable code that also works, you don't necessarily have to put it back afterwards.

If it's using ES6+, looks like you can do multi-line strings with backticks. Otherwise the options are a little messier.
 
Back
Top