What is the difference between web/template and web/templates

Question

I've noticed in the core both web/template and web/templates are used:

• vendor/magento/module-ui/view/frontend/web/templates/group/group.html
• vendor/magento/module-ui/view/frontend/web/template/messages.html

Is this a mistake or is there a reason why there are two different directories?

Answer 1

Singular template is the standard directory.

Despite the quantity of files in the Magento_Ui templates directory, that case appears to be a unique instance and why it was done that way is not clear to me. The Magento_Ui module appears to be the only module that uses web/templates instead of web/template. There is a requirejs-config entry that maps template to templates like so:

'ui/template': 'Magento_Ui/templates'

(source: module-ui/view/base/requirejs-config.js).

The file (module-ui/view/base/web/js/lib/knockout/template/loader.js) that handles the async requests for templates has a formatPath method which returns:

 return result.replace(/^([^\/]+)/g, '$1/template')

Consequently, if you use template as the directory, you can be less explicit in loading HTML templates, or you must map it.

For a concrete example of a core module using the template directory, refer to the Magento_Checkout module which has a large number of .html templates in the web/template directory.

---

The map was part of one of the first commits: https://github.com/magento/magento2/blame/0865a13d4785221cec11f343ddc3452a77014951/app/code/Magento/Ui/view/base/requirejs-config.js. It would not surprise me if the template was standardized and Magento_Ui was never updated.

Answer 2

Its not a mistake, they have intentionally placed both folders, default one as we have seen for other modules is "template", however they have mapped the 'templates' folder in vendor/magento/module-ui/view/base/requirejs-config.js as following:

paths: {
        'ui/template': 'Magento_Ui/templates'
    }

and they have used this mapped path as following:

'text!ui/template/tooltip/tooltip.html'

in vendor/magento/module-ui/view/base/web/js/lib/knockout/bindings/tooltip.js at line 11 in defined section.

The other way to access the template files from 'templates' folder can be seen in vendor/magento/module-ui/view/base/web/js/grid/columns/thumbnail.js at line 13 as 'text!Magento_ui/templates/grid/cells/thumbnail/preview.html'

Also please note that the template files from this folder are actually used to render the html so it can be used, like to show the rendered html in a popup model. The rendering is achieved by feeding the template and its variables as arguments to mage/template class.