Need advice for Javascript environment to use

[PowerGod]

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:

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 ?

 

[HelenF]

People write the code in a human-readable way, and then it gets "minified" for the final output. It's supposed to run more efficiently. (And if someone doesn't provide source code, either they like the obfuscation or they don't care.)

For example, compare https://code.jquery.com/jquery-3.5.1.js with https://code.jquery.com/jquery-3.5.1.min.js

 

[ElPoco]

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.

 

[PowerGod]

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.

 

[HelenF]

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.