```html

Including Javascript and Groovy Styles

A style can be divided into smaller parts for code reuse. To include one of these parts in another, you can use the directive #lum_include.

It is important to note that the directive #lum_include is a pre-processing directive that tells LumisXP to retrieve text from another file and insert it into the location where the directive is present. This processing is done before the execution of the script.

This directive accepts a single string parameter which is the path of the file (relative to the current script) that should be included.

Example:

File /br/com/empresa/style/commons/utils.js:
let ProjectUtils = { someFunction(param1) { return ` <div> Hello, ${ param1 }! </div> `; } };

File /br/com/empresa/style/servico1/estilo.js:
<% #lum_include("../commons/utils.js") %> <ul> <li> <% lum_out.print( ProjectUtils.someFunction("World") ); %> </li> </ul>

Supposing in this example that an interface uses the file /br/com/empresa/style/servico1/estilo.js as its style, the LumisXP would process this style and the script to be used in the transformation would be:
<% let ProjectUtils = { someFunction(param1) { return ` <div> Hello, ${ param1 }! </div> `; } }; %> <ul> <li> <% lum_out.print( ProjectUtils.someFunction("World") ); %> </li> </ul>

A mistake that can occur is including in the file /br/com/empresa/style/servico1/estilo.js as follows:
#lum_include("../commons/utils.js") <ul> <li> <% lum_out.print( ProjectUtils.someFunction("World") ); %> </li> </ul>

Notice that, in this case, the #lum_include("../commons/utils.js") is placed outside the server-side script block (<% ... % >). In certain situations, this may be desirable. However, in this example, it is not, since the file /br/com/empresa/style/commons/utils.js is purely Javascript.
In this case (of the error), the script that LumisXP would assemble would be as follows:
let ProjectUtils = { someFunction(param1) { return ` <div> Hello, ${ param1 }! </div> `; } }; <ul> <li> <% lum_out.print( ProjectUtils.someFunction("World") ); %> </li> </ul>

Notice that the code is incorrect as the variable ProjectUtils is not defined in the server-side (where it is used in the fragment <% lum_out.print( ProjectUtils.someFunction("World") ); %>).

Theme Support

The path of the file to be included is relative to the current script and the path of the current script disregards the theme path.

For example, suppose that the current script is located at /br/com/empresa/style/servico1/estilo.js and you have an inclusion like #lum_include("../commons/utils.js").

Assume also that the page where the interface instance is included has two applied themes: br.com.empresa.projeto.tema1 (located at /br/com/empresa/projeto/tema1) and br.com.empresa.projeto.tema2 (located at /br/com/empresa/projeto/tema2) (applied in this order).

If the theme br.com.empresa.projeto.tema2 has two files (relative to its root):

/br/com/empresa/style/servico1/estilo.js (that is, located in /br/com/empresa/projeto/tema2/def/br/com/empresa/style/servico1/estilo.js)
/br/com/empresa/style/commons/utils.js (that is, located in /br/com/empresa/projeto/tema2/def/br/com/empresa/style/commons/utils.js)

And the theme br.com.empresa.projeto.tema1 has one file (relative to its root):

/br/com/empresa/style/commons/utils.js (that is, located in /br/com/empresa/projeto/tema1/def/br/com/empresa/style/commons/utils.js)

In this situation, the reference to the style file /br/com/empresa/style/servico1/estilo.js will be resolved to /br/com/empresa/projeto/tema2/def/br/com/empresa/style/servico1/estilo.js (since among the applied themes, this style is only available in the theme br.com.empresa.projeto.tema2).

The inclusion #lum_include("../commons/utils.js") will be resolved using the base path of the style /br/com/empresa/style/servico1/estilo.js.

Thus, the resolved path will be /br/com/empresa/style/commons/utils.js.

Once this path is resolved, LumisXP will look for this file in the applied themes (following the order of application). In this case, the resolved file will be /br/com/empresa/projeto/tema1/def/br/com/empresa/style/commons/utils.js (since the theme br.com.empresa.projeto.tema1 takes precedence over the theme br.com.empresa.projeto.tema2, given the order of application).

Thus, the final script to be used will consist of:

/br/com/empresa/projeto/tema2/def/br/com/empresa/style/servico1/estilo.js
/br/com/empresa/projeto/tema1/def/br/com/empresa/style/commons/utils.js

```