JavaScript Modules Reference Documentation

This section contains reference information about the different types of libraries and objects available to JavaScript module developers.

The JavaScript @jahia/js-server-core library

This library contains all the functions and React components that are critical to implementing JavaScript modules.

The reference HTML documentation can be found here: https://jahia.github.io/js-server-core/

Below, we will provide a quick overview of some of the functions and components available in the library.

The useServerContext hook

The useServerContext hook provides access to the most relevant Jahia objects for the currently executing request, such as the currentNode being rendered, the current renderContext (which contains the HTTP request and response), and other contact information. Let’s look at a quick example of how this hook can be used by using a view for a type npmExample:testUrlParameters that retrieves a URL parameter from the HTTP request using the Java HTTP Servlet API exposed by the renderContext.getRequest() call :

import React from 'react';
import { useServerContext } from '@jahia/js-server-core';

export const TestUrlParameters = () => {
    const {renderContext} = useServerContext();
    const urlParam = renderContext.getRequest().getParameter('test');
    return (
        <>
            <h3>Url parameter test</h3>
            <div>{urlParam}</div>
        </>
    );
}

TestUrlParameters.jahiaComponent = {
    nodeType: 'npmExample:testUrlParameters',
    name: 'default',
    displayName: 'test url parameters',
    componentType: 'view'
}

The useServerContext returns an object that contains different fields, which are defined by the following structure:

/**
 * A context object that gives access to the underlying Jahia Java objects that are part of the current rendering context
 */
export interface ServerContext {
    /**
     * Jahia's rendering context, it provides access to all kinds of context information, such as the current request, response, user, mode, mainResource and more
     */
    renderContext : RenderContext;
    /**
     * The current resource being rendered, which is a combination of the current node and its template/view information
     */
    currentResource : Resource;
    /**
     * The current JCR node being rendered
     */
    currentNode : JCRNodeWrapper;
    /**
     * The main JCR node being rendered, which is the root node of the current page
     */
    mainNode : JCRNodeWrapper;
    /**
     * The OSGi bundle key of the current module being rendered
     */
    bundleKey : string;
}

    

You can find all the relevant HTML documentation about these structures and all the sub-objects in the reference HTML documentation for the @jahia/js-server-core library and, more specifically, for the ServerContext object here:

https://jahia.github.io/js-server-core/interfaces/types_manual_servercontext.ServerContext.html

Java helper objects in @jahia/js-server-core

The @jahia/js-server-core library also exposes some Java classes that provide helper functions that help JavaScript developers access services such as (OSGi) module configuration properties, the Jahia JavaScript registry, Jahia’s rendering service, and Jahia’s GraphQL API.

These classes are accessible through the top-level server object. Here is an example of using that object to access OSGi module configuration properties:

import React from 'react';
import {server} from '@jahia/js-server-core';

export const TestConfig = () => {
    const configValues = server.config.getConfigValues('org.jahia.modules.test');
    return (
        <>
            <p>configValues.configKey1={configValues.configKey1}</p>
            <p>configValues.configKey2={configValues.configKey2}</p>
        </>
    )
}

TestConfig.jahiaComponent = {
    nodeType: 'npmExample:testJConfig',
    name: 'react',
    displayName: 'test jConfig (react)',
    componentType: 'view'
}

In the above example we import the server object from the @jahia/js-server-core library and access its config field that is actually implemented using a Java class that gives us access to functions to access module configuration.

Here’s a quick overview of all the Java objects exposed by the server object:

import {ConfigHelper, GQLHelper, OSGiHelper, RegistryHelper, RenderHelper} from 'org.jahia.modules.npm.modules.engine.js.server';

/**
 * A set of helpers that provide common functionality provided by Jahia for Javascript server-side rendering
 */
export const server: {
    /**
     * This helper provides access to OSGi configuration
     */
    config: ConfigHelper,
    /**
     * This helper provides access Jahia's GraphQL API, to execute queries and mutations
     */
    gql: GQLHelper,
    /**
     * This helper provides access to OSGi bundle for resource loading and service access
     */
    osgi: OSGiHelper,
    /**
     * This helper provides access to Jahia's registry API, to register new UI objects or retrieving existing ones
     */
    registry: RegistryHelper,
    /**
     * This helper provides rendering functions such as registering page resources, adding cache dependencies or rendering components
     */
    render: RenderHelper
};    

You can find the HTML documentation for this object here: https://jahia.github.io/js-server-core/variables/types_manual_server.server.html

From there you can access all the different functions that are available on the different helper Java classes and use them in your JavaScript modules.