ENH: investigate/implement separation between vue templates and index.html

[jsheunis]

To make the html source code more maintainable by separating the content into different files.

See: https://github.com/vuejs/Discussion/issues/313

[jsheunis]

UPDATE:

Vue Async components and vue-router lazy loading allow the functionality of keeping component templates in their own html files, and being able to load them asynchronously fetch within the component definition. See https://v2.vuejs.org/v2/guide/components-dynamic-async.html#Async-Components and https://v3.router.vuejs.org/guide/advanced/lazy-loading.html. This means that components templates don't have to be defined in <script type="text/xtemplate"> tags in the main index.html file, they are all just provided in separate template html files.

Another option that was investigated was to introduce a bundler system, such as Webpack, https://webpack.js.org/, which inherently allows a more structured coding approach, and which requires the code to be bundled into the assets that are then rendered via the browser. In this case, datalad-catalog would be dependent on npm because there is an extra bundling step required. This could likely only be a developer requirement, since the bundling will only need to be done if changes are made to the html or javascript of the catalog, and the bundled assets are what will need to be distributed. The extra dependency is something that's worth avoiding, though.

[jsheunis]

UPDATE 2:

At the same time as refactoring the html code, JS code was also refactored. Instead of using module imports (which messes up relative paths and was too confusing for me to have patience with) I split the main JS file of over 1k lines into separate files that are loaded in order from the index.html file. The gain is that the code is now much more structured and manageable (separated into constant variables/functions, component code, router code, and main app code). The tradeoff is that the scripts have to be loaded in order, and that variables and functions in the global scope are not easily discoverable across script files. I'm okay with this tradeoff, until we figure out imports or find a cleaner way to deal with this. And the extra win is not having to depend on a bundler or npm to achieve this.