This library exposes common types and utility functions for JavaScript modules running in a Jahia environment. It exposes the following APIs:
This component creates an island of interactivity on the page, following the Island Architecture paradigm.
<Island component={MyComponent} props={{ foo: "bar" }}>
<div>If MyComponent takes children, it will receive them here.</div>
</Island>It takes an optional clientOnly prop:
- By default or when set to
false, the component will be rendered on the server and hydrated in the browser. In this case, children are passed to the component. - When set to
true, the component will be rendered only in the browser, skipping the server-side rendering step. This is useful for components that cannot be rendered on the server. In this case, children are used as a placeholder until the component is hydrated.
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",
},
});useGQLQuery supports typed document nodes from @graphql-typed-document-node/core, but the JavaScript Modules Library is not prescriptive regarding GraphQL type generation and client-side usage. Here are some tools that can be used to generate types for your GraphQL queries:
On the client, you can use your favorite GraphQL client, such as Apollo Client or urql.
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");If the path has a protocol (e.g. data: URI), it will be returned as is, pairing nicely with Vite static asset imports.
This function returns the list of locales available on the current site, taking into account the current rendering mode (EDIT or LIVE).
const locales = getSiteLocales();locales is an object where the keys are the locale codes and the values are java.util.Locale objects.
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 imports of @jahia/javascript-modules-engine must be preserved during the build. This is done automatically if you use @jahia/vite-plugin.