customJS

One of the main characteristics of the components generated by Web Component Factory is that it is possible to incorporate JavaScript code into the component without altering the component itself. Not only that, but all constants, variables and methods of the component can be accessed directly without intermediaries. The mechanism for doing this is called customJS.

A Web Component has a life cycle in which it is created, displayed on the screen (render), modified and deleted. connectedCallback is a key method of a Web Component, which is called when the component is displayed or rendered, and naturally, WCF adds the entire code that will generate the HTML and CSS with the corresponding functionality. customJS code is added at the end of this function as an integral part of it.

customJS as a mechanism used by WCF to add JavaScript by the user, has the virtue of entirely separating the code generated by the component factory from what the user added, allowing each one to be modified completely independently. What is really important to note is that changes in the component, especially those that alter its structure rather than its appearance (i.e., those that change the HTML, not those that alter the CSS), can modify the names of variables and other identifiers, requiring a review of the customJS to keep it running correctly.

this

Inside customJs, the component can be retrieved through the JavaScript keyword this, as in any method of an object.

Using getInstanceById is not needed, nor is there any other API function to access elements: constants and variables declared above are used directly.

customJS in the editor and as a URL

The WCF factory interface allows editing customJS directly in a small editor. The editor is very simple and designed to add small pieces of code that are sufficient when minor changes are needed.

In addition to the editor, customJS can be added by providing a URL. The factory takes the content of the URL and adds it as is to the component. The idea behind it, is that the programmer uses their usual tools to generate the JavaScript and incorporates it into the component’s code in this way.

Once the code is incorporated, there is no other link between WCF or the component and the URL or its content. The component will never access that URL, nor is it stored in its code. It does not matter if its content changes or if the URL becomes invalid; the incorporated customJS will remain unchanged.

If customJS is generated both through the editor and the URL, the code from the editor is added first, followed by the code from the URL.