Move custom.js

[MAA-Novicell]

Would it make sense to move and add a better flow for custom JS development

In this path 'Swift/Swift/Files/Templates/Designs/Swift/Assets/js/' we have a 'custom.js' (non-compiled) along with some compiled JS, this 'custom.js' could be replaced by the below setup.

I was thinking something along the lines of this setup:

Inside 'Swift/Swift/Files/Templates/Designs/Swift/Assets/_src/js/' source folder we have 'swift.js'

I would make a 'custom.js' here with same setup as 'swift.js' like below:

import { Custom } from "./custom/_custom-feature";

const custom = function () {
    return {
	Custom : Custom
    }
}();

export { custom };

window.custom = custom;

This file would be used to include all future custom files inside the custom folder, and as webpack use the dead code elimination - then the unused imports will be stripped anyway.

the folder could contain files like this:

const CustomFeature = function () {
    'use strict';
    return {
        init() {
            console.log("Hello from Custom Feature");
            this.load();
        },
        load() {
            // after init
        }
    }
}();

window.CustomFeature = CustomFeature;
CustomFeature.init();

If this suggestion is implemented I would also suggest doing a separate compiled 'custom.js' where 'scripts.js' is output

Adding the new compiled 'custom.js' to the master templates.

• Swift_Master.cshtml need to contain these:

Dynamicweb.Context.Current.Response.AddHeader("link", $"</Files/Templates/Designs/Swift/Assets/js/custom.js?{jsFileInfo.LastWriteTime.Ticks}; rel=preload; as=script;");
<script src="~/Files/Templates/Designs/Swift/Assets/js/[email protected]" defer></script>

• Swift_MasterNoLayout.cshtml need to contain these:

<link rel="preload" href="~/Files/Templates/Designs/Swift/Assets/js/[email protected]" as="script">
<script src="~/Files/Templates/Designs/Swift/Assets/js/[email protected]" async></script>

And also add 'custom.js' to webpack.config.js

entry: {
    'scripts': '/../Files/Templates/Designs/Swift/Assets/_src/js/swift.js',
    'custom': '/../Files/Templates/Designs/Swift/Assets/_src/js/custom.js',
}

OBS: I haven't taken steps for commenting out the code in this example by default, but above is just to illustrate our wish.

[misterwinther]

@MAA-Novicell This is indeed a great suggestion. More solutions have been dicussed during the "birth" of the custom file - the current solution is a non-compiled file that doesn't need to be compiled, and is easy for non-devs to add simple js code.
But thinking about our dev-partners - we definitely need a more solid way to handle custom js and placeholders for these that works well out-of-the-box.

We will certainly look into this matter during the next release sprint :)