3

I figured I need to reinstall a template/extension in order to take into account my changes to the joomla.asset.json file. Here is the file I'm currently using:

{
  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
  "name": "my-template",
  "version": "4.0.0",
  "description": "template description",
  "license": "GPL-2.0-or-later",
  "assets": [
    {
      "name": "template.offline",
      "type": "style",
      "uri": "offline.css"
    },
    {
      "name": "template.style",
      "type": "style",
      "uri": "template.css"
    },
    {
      "name": "template.script",
      "type": "script",
      "uri": "template.js"
    },
    {
      "name": "template.preset",
      "type": "preset",
      "dependencies": [
        "template.style#style",
        "template.script#script"
      ]      
    }
  ]
}

However there are a few things I don't quite understand:

  • how can I make Joomla acknowledge my joomla.asset.json changes without reinstalling extensions?

  • why the web asset manager loads finder.min.js when my template doesn't ask for it? is it requested for the mod_search? further more I'm getting Uncaught TypeError: a is not a constructor at finder.min.js:1 when again my template doesn't ask for it;

  • then there is the issue in core.js dependency of the original cassiopeia/joomla.asset.json for various scripts, does it mean my own joomla.asset.json defined scripts have to have the core.js as dependency as well? As you can see in the image below, the joomla-alert.min.css as well as many other assets are loaded without asking for it, I believe that is outside the template own asset manager control. joomla-asset-screenshot

  • are the above related in any way?

I will update the above with further findings.

Testing with latest Joomla 4.0.0 beta.

Thanks

3

To your first question "how can I make Joomla acknowledge my joomla.asset.json changes without reinstalling extensions?"

  1. I think it is not right that you have to reinstall the extension after every change in the file joomla.asset.json. It is only necessary the first time you add the joomla.asset.json file. So that Joomla registers this file. So you need one install with the entry
    <media folder="media/com_foos" destination="com_foos">
        <folder>js</folder>
        <filename>joomla.asset.json</filename>
    </media>

in the install manifest. If you create the file joomla.asset.json and do not install, Joomla does not know the file - with some other files this is possible. But, if Joomla knows joomla.asset.json, you can edit the content later.

I had the following file and renamed the javascript from foos-modal.js to admin-foos-modal.js.

{
  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
  "name": "com_foos",
  "version": "1.0.0",
  "description": "Joomla CMS",
  "license": "GPL-2.0-or-later",
  "assets": [
    {
      "name": "com_foos.admin-foos-modal",
      "type": "script",
      "uri": "com_foos/foos-modal.js",
      "dependencies": [
        "core"
      ],
      "attributes": {
        "defer": true
      }
    }
  ]
}

I didn't have to reinstall my extension while developing. I only changed the uri.

{
  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
  "name": "com_foos",
  "version": "1.0.0",
  "description": "Joomla CMS",
  "license": "GPL-2.0-or-later",
  "assets": [
    {
      "name": "com_foos.admin-foos-modal",
      "type": "script",
      "uri": "com_foos/admin-foos-modal.js",
      "dependencies": [
        "core"
      ],
      "attributes": {
        "defer": true
      }
    }
  ]
}

The renamed file was recognised. It is also possible to change the attributes, for example change defer to false.

  1. Secondly, you don't have to use the joomla.asset.json file. In the documentation you will find many entries like: Register custom item without json definition. For example, for a StyleSheet.
...
// Register custom item without json definition
$wa->registerStyle('bar', 'com_example/bar.css', [], ['data-foo' => 'some attribute'], ['some.dependency']);
// And use it later
$wa->useStyle('bar');
...

To your second question: "why the web asset manager loads finder.min.js when my template doesn't ask for it? is it requested for the mod_search? further more I'm getting Uncaught TypeError: a is not a constructor at finder.min.js:1 when again my template doesn't ask for it;"

We needed your code to answer this question. It may be that you insert a dependency that has the file finder.min.js as a dependency. Or you have the Finder search active in your website and the file is loaded because of the Finder joomla.asset.json

{
  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
  "name": "com_finder",
  "version": "4.0.0",
  "description": "Joomla CMS",
  "license": "GPL-2.0-or-later",
  "assets": [
    {
      "name": "com_finder.dates",
      "type": "style",
      "uri": "com_finder/dates.min.css"
    },
    {
      "name": "com_finder.filters.es5",
      "type": "script",
      "uri": "com_finder/filters-es5.min.js",
      "dependencies": [
        "core"
      ],
      "attributes": {
        "nomodule": true,
        "defer": true
      }
    },
    {
      "name": "com_finder.filters",
      "type": "script",
      "uri": "com_finder/filters.min.js",
      "dependencies": [
        "com_finder.filters.es5"
      ],
      "attributes": {
        "type": "module"
      }
    },
    {
      "name": "com_finder.finder",
      "type": "style",
      "uri": "com_finder/finder.min.css"
    },
    {
      "name": "com_finder.finder.es5",
      "type": "script",
      "uri": "com_finder/finder-es5.min.js",
      "dependencies": [
        "core"
      ],
      "attributes": {
        "nomodule": true,
        "defer": true
      }
    },
    {
      "name": "com_finder.finder",
      "type": "script",
      "uri": "com_finder/finder.min.js",
      "dependencies": [
        "com_finder.finder.es5"
      ],
      "attributes": {
        "type": "module"
      }
    },
    {
      "name": "com_finder.finder-edit.es5",
      "type": "script",
      "uri": "com_finder/finder-edit-es5.min.js",
      "dependencies": [
        "core"
      ],
      "attributes": {
        "nomodule": true,
        "defer": true
      }
    },
    {
      "name": "com_finder.finder-edit",
      "type": "script",
      "uri": "com_finder/finder-edit.min.js",
      "dependencies": [
        "com_finder.finder-edit.es5"
      ],
      "attributes": {
        "type": "module"
      }
    },
    {
      "name": "com_finder.index.es5",
      "type": "script",
      "uri": "com_finder/index-es5.min.js",
      "dependencies": [
        "core"
      ],
      "attributes": {
        "nomodule": true,
        "defer": true
      }
    },
    {
      "name": "com_finder.index",
      "type": "script",
      "uri": "com_finder/index.min.js",
      "dependencies": [
        "com_finder.index.es5"
      ],
      "attributes": {
        "type": "module"
      }
    },
    {
      "name": "com_finder.indexer",
      "type": "style",
      "uri": "com_finder/indexer.min.css"
    },
    {
      "name": "com_finder.indexer.es5",
      "type": "script",
      "uri": "com_finder/indexer-es5.min.js",
      "dependencies": [
        "core"
      ],
      "attributes": {
        "nomodule": true,
        "defer": true
      }
    },
    {
      "name": "com_finder.indexer",
      "type": "script",
      "uri": "com_finder/indexer.min.js",
      "dependencies": [
        "com_finder.indexer.es5"
      ],
      "attributes": {
        "type": "module"
      }
    },
    {
      "name": "com_finder.maps.es5",
      "type": "script",
      "uri": "com_finder/maps-es5.min.js",
      "dependencies": [
        "core"
      ],
      "attributes": {
        "nomodule": true,
        "defer": true
      }
    },
    {
      "name": "com_finder.maps",
      "type": "script",
      "uri": "com_finder/maps.min.js",
      "dependencies": [
        "com_finder.maps.es5"
      ],
      "attributes": {
        "type": "module"
      }
    }
  ]
}

EDIT

I think it is important to understand that the Joomla Web Assets Manager manages all assets in a Joomla installation. If I see it correctly, it does not apply specifically to a template. If an extension is loaded and needs these assets, it can also use the Web Assets Manager. But: It does not have to. Assets can still be included via Joomla\CMS\HTML\HTMLHelper - for example via HTMLHelper::_('jquery.framework');. The advantage of the Webassets Manager is that it ensures that these assets are no longer loaded twice if two extension include the same file. And the Assets are loaded in the correct order. This prevents conflicts.

I can't see in your image that a finder.min.js file is included in the head. By the way : com_finder has nothing to do with mod_search. com_search was decoupled in Joomla 4. Maybe you can still find it in your installation for backwards compatibility reasons. Nevertheless: Finder is now the default search and the assets are called finder*. The assets of *_search are called search*. The error Uncaught TypeError: a is not a constructor at finder.min.js:1 probably occurred when you included a Finder extension and the file finder.min.js was loaded because of the joomla.asset.json.

I can't answer the other questions. I've been reading up on web assets mainly for embedding in a component. But I can imagine that you need the file core.js for editing in the frontend. You will certainly need searchtools.js for list views where you want to offer functions for searching, filtering and sorting via Joomla. But these are only assumptions. If I had to implement now, I would look at the file and decide on a case-by-case basis.

2
  • Thank you for your answer. I've updated the question with some clarification.
    – thednp
    May 21 at 7:09
  • 1
    Please see if my addition to the answer helps you.
    – astridx
    May 22 at 8:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.