This library exposes common types and utility functions for JavaScript modules running in a Jahia environment. It exposes the following APIs:
This component is used to render a React component in the browser. It is used to render a component in the browser, skipping the server-side rendering step. Provided children, if any, will be rendered on the server and replaced by the component in the browser.
<RenderInBrowser child={MyComponent} props={{ foo: "bar" }}>
<div>Loading...</div>
</RenderInBrowser>This component is used to hydrate a React component in the browser. It will be rendered on the server then hydrated in the browser. Provided children, if any, will be children of the component.
<HydrateInBrowser child={MyComponent} props={{ foo: "bar" }}>
<div>I'm a child of MyComponent</div>
</HydrateInBrowser>This component renders a Jahia component out of a node or a JS object.
// Render a JCR node
<Render node={node} />
// Render a JS object
<Render content={{ nodeType: "ns:nodeType" }}>This component renders a child node of the current node. It's a thin wrapper around Render and AddContentButtons.
<RenderChild name="child" />This component renders all children of the current node. It's a thin wrapper around Render, getChildNodes and AddContentButtons.
<RenderChildren />This component creates an absolute area in the page. It's an area of user-contributable content, child of the node of your choice.
<AbsoluteArea name="footer" parent={renderContext.getSite().getHome()} />This component creates an area in the page. It's an area of user-contributable content that is local to the page where it is present.
<Area name="main" />This component renders a set of buttons to add content to the current node.
<AddContentButtons />This component adds resources to the page, making sure they are loaded only once and insert them at the desired position.
<AddResources type="css" resources="styles.css" />This function is used to declare a Jahia component. It takes a component definition as first argument, and a React component as second argument.
jahiaComponent(
{
componentType: "view",
nodeType: "ns:hello",
},
({ name }: { name: string }) => {
return <h1>Hello {name}!</h1>;
},
);The first argument of the component function is an object containing the JCR properties of the node being rendered. The server context is passed as the second argument. See useServerContext for more information.
This hook is used to execute a GraphQL query on the current Jahia instance.
const { data, errors } = useGQLQuery({
query: /* GraphQL */ `
query MyQuery($workspace: Workspace!) {
jcr(workspace: $workspace) {
workspace
}
}
`,
variables: {
workspace: "LIVE",
},
});This hook is used to execute a JCR query on the current Jahia instance.
const pages = useJCRQuery({ query: "SELECT * FROM [jnt:page]" });This hook is used to access the server context, which contains information about the current node, page, and rendering context.
const {
/**
* 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,
/**
* The current resource being rendered, which is a combination of the current node and its
* template/view information
*/
currentResource,
/** The current JCR node being rendered */
currentNode,
/** The main JCR node being rendered, which is the root node of the current page */
mainNode,
/** The OSGi bundle key of the current module being rendered */
bundleKey,
} = useServerContext();You do not need to use this hook when rendering a component with jahiaComponent, as the server context is passed as the second argument of the component function.
This function is used to get the child nodes of a JCR node.
const children = getChildNodes(node, limit, offset, filter);This function is used to get the properties of a JCR node.
const { title, description } = getNodeProps(node, ["title", "description"]);This function is used to get nodes by a JCR query.
const pages = getNodesByJCRQuery(session, "SELECT * FROM [jnt:page]", limit, offset);This function transforms a path to an endpoint into a full URL.
const dashboard = buildEndpointUrl("/jahia/dashboard");This function transforms a JCR node into a full URL to the node.
const home = buildNodeUrl(renderContext.getSite().getHome().getNode());This function transforms a path to a file in the module into a full URL.
const styles = buildModuleFileUrl("dist/styles.css");This variable provides access to the Java server API.
const bundle = server.osgi.getBundle(bundleKey);This module does not contain actual implementations of the components and hooks. All accesses to @jahia/javascript-modules-engine must be replaced by javascriptModulesLibraryBuilder.getSharedLibrary('@jahia/javascript-modules-engine') in the final bundle. This is done automatically during the build process if you use @jahia/vite-plugin.