liferay_frontend_component.md

⚠️ The contents of this repo have been migrated to the liferay/liferay-frontend-projects monorepo and more specifically to the to the guidelines/ directory. Maintenance will continue there, and this repo will be archived (ie. switched to read-only mode). Depending on whether files have moved in the new repo, you may be able to see the current version of this page at this location.

Demystifying liferay-frontend:component tag

We can use this tag for removing JavaScript code from JSPs. This tag accepts a module property through which We can pass a relative path for the script to be loaded. Also, this tag automatically registers the component with Liferay’s component global registry, depending on the componentId property. When using this tag, namespace(or portletNamespace) and spritemap props will become available.

For example, in the JSP page:

...
<liferay-frontend:component
	componentId="myComponent"
	module="path/to/my/js/myComponent.js"
/>
...

And when exporting the myComponent.js file we can define a default function there like:

export default function myComponent({namespace, spritemap, ...props}) {
	// ... code that uses namespace, spritemap etc
}

This tag can be very handy if you want to use modern JS features, since we don’t have support for transpiling modern JS from taglibs.

Also, this tag adds some treatment for handling JavaScript in our JSPs like adding special treatment for our built-in SPA framework.

All the content will be injected on the page using AUI_SCRIPT_DATA already explained here.