refactor: migrate jahia components to typescript

javascript-modules-engine/tests/jahia-module/yarn.lock

@@ -1703,7 +1703,7 @@ __metadata:
 
 "@jahia/javascript-modules-library@file:../../../javascript-modules-library/dist::locator=%40jahia%2Fnpm-module-example%40workspace%3A.":
   version: 0.4.0-SNAPSHOT
-  resolution: "@jahia/javascript-modules-library@file:../../../javascript-modules-library/dist#../../../javascript-modules-library/dist::hash=aea839&locator=%40jahia%2Fnpm-module-example%40workspace%3A."
+  resolution: "@jahia/javascript-modules-library@file:../../../javascript-modules-library/dist#../../../javascript-modules-library/dist::hash=9e300c&locator=%40jahia%2Fnpm-module-example%40workspace%3A."
   dependencies:
     graphql: "npm:^16.0.1"
     graphql-tag: "npm:^2.12.6"
@@ -1725,7 +1725,7 @@ __metadata:
       optional: true
     styled-jsx:
       optional: true
-  checksum: 10/bf7fb99d7449c5a0de53d6dd2807041739ff1224a5a8719238e3a411c0d6d290714ddf9215bb7714f5ee8fd70086e2e73c1faa5851c97ceaadc3ef414cedbbcf
+  checksum: 10/9cc7e6803a50ed8418b64983574889bb5d760f4acb39aab6c9f4c61b26c7d9563e97acaea31d34d144c54b58325cc01e3cb344ddd9fae9c24f6881aa03892454
   languageName: node
   linkType: hard
 

javascript-modules-engine/yarn.lock

@@ -1277,7 +1277,7 @@ __metadata:
 
 "@jahia/javascript-modules-library@file:../javascript-modules-library/dist::locator=javascript-modules-engine%40workspace%3A.":
   version: 0.4.0-SNAPSHOT
-  resolution: "@jahia/javascript-modules-library@file:../javascript-modules-library/dist#../javascript-modules-library/dist::hash=add13e&locator=javascript-modules-engine%40workspace%3A."
+  resolution: "@jahia/javascript-modules-library@file:../javascript-modules-library/dist#../javascript-modules-library/dist::hash=2a2152&locator=javascript-modules-engine%40workspace%3A."
   dependencies:
     graphql: "npm:^16.0.1"
     graphql-tag: "npm:^2.12.6"
@@ -1299,7 +1299,7 @@ __metadata:
       optional: true
     styled-jsx:
       optional: true
-  checksum: 10c0/22c6d5b28dec78708fe24c5ccae64ae491316576ef23138e8ece38b780466c06b3c6d0726611ba34ef4dec9ba5a050fc2d68e6ab1ab3f7d3a0512594a55940d9
+  checksum: 10c0/5899a54137b102251184b691c8c72f0f168685da4f0da676e5369a143ccb2d9a21f012fbed50bafa1e032dde1b67a722a1e1525e69c4970be0eefd99b0b9a85c
   languageName: node
   linkType: hard
 

javascript-modules-library/src/core/server/components/AbsoluteArea.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {useServerContext} from '../hooks/useServerContext';
+import {server} from '@jahia/javascript-modules-library-private';
+
+/**
+ * Generates an absolute area in which editors may insert content objects.
+ * @returns The AbsoluteArea component
+ */
+export function AbsoluteArea({name, areaView, allowedTypes, numberOfItems, subNodesView, path, editable = true, level, areaType = 'jnt:contentList', limitedAbsoluteAreaEdit, parameters}: Readonly<{
+    /** The name of the area. */
+    name?: string,
+    /** The view to use for the area. */
+    areaView?: string,
+    /** The allowed types for the area. */
+    allowedTypes?: string[],
+    /** The number of items to display in the area. */
+    numberOfItems?: number,
+    /** The view to use for the subnodes. */
+    subNodesView?: string,
+    /** Relative (to the current node) or absolute path to the node to include. */
+    path?: string,
+    /**
+     * Enables or disables edition of this content in edit mode. Mainly used for absolute or references.
+     * @default true
+     */
+    editable?: boolean,
+    /** Ancestor level for absolute area - 0 is Home page, 1 first sub-pages, ... */
+    level?: number,
+    /**
+     * Content type to be used to create the area
+     * @default jnt:contentList
+     */
+    areaType?: string,
+    /** Is the absolute area editable everywhere or only on the page containing its node. */
+    limitedAbsoluteAreaEdit?: boolean,
+    /** The parameters to pass to the absolute area */
+    parameters?: Record<string, unknown>
+}>): React.JSX.Element {
+    const {renderContext} = useServerContext();
+    return (
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        /* eslint-disable-next-line react/no-danger */ // @ts-ignore
+        <unwanteddiv dangerouslySetInnerHTML={{
+            __html: server.render.renderAbsoluteArea({
+                name,
+                areaView,
+                allowedTypes,
+                numberOfItems,
+                subNodesView,
+                path,
+                editable,
+                level,
+                areaType,
+                limitedAbsoluteAreaEdit,
+                parameters
+            }, renderContext)
+        }}/>
+    );
+}

javascript-modules-library/src/core/server/components/AddContentButtons.jsx → javascript-modules-library/src/core/server/components/AddContentButtons.tsx

@@ -4,13 +4,22 @@ import {useServerContext} from '../hooks/useServerContext';
 
 /**
  * Generates add content buttons for a content object
- * @param {object} properties The React properties for the component.
- * @param {string} [properties.nodeTypes] The node types to add.
- * @param {string} [properties.childName='*'] The child name.
- * @param {boolean} [properties.editCheck=false] If true, the edit check will be performed.
- * @returns {JSX.Element} The add content buttons.
+ * @returns The add content buttons.
  */
-export function AddContentButtons({nodeTypes, childName = '*', editCheck = false}) {
+export function AddContentButtons({nodeTypes, childName = '*', editCheck = false}: Readonly<{
+    /** The node types to add. */
+    nodeTypes?: string;
+    /**
+     * The child name.
+     * @default *
+     */
+    childName?: string;
+    /**
+     * If true, the edit check will be performed.
+     * @default false
+     */
+    editCheck?: boolean;
+}>): React.JSX.Element {
     const {renderContext, currentResource} = useServerContext();
     return (
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment

javascript-modules-library/src/core/server/components/AddResources.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {server} from '@jahia/javascript-modules-library-private';
+import {useServerContext} from '../hooks/useServerContext';
+
+/**
+ * Adds a resources to the head tag of the HTML page.
+ * @returns A React element that renders a script or link tag.
+ */
+export function AddResources(props: Readonly<{
+    /** If true, the resource will be inserted into the document. Typically used for on-demand loading of resources. */
+    insert?: boolean,
+    /** If true, the resource will be loaded asynchronously. For scripts, this means the script will be executed as soon as it's available, without blocking the rest of the page. */
+    async?: boolean,
+    /** If true, the resource will be deferred, i.e., loaded after the document has been parsed. For scripts, this means the script will not be executed until after the page has loaded. */
+    defer?: boolean,
+    /** The type of the resource. This could be 'javascript' for .js files, 'css' for .css files, etc. */
+    type?: 'javascript' | 'css',
+    /** The path to the resource file, relative to the module. */
+    resources?: string,
+    /** Inline HTML that markup will be considered as resource. */
+    inlineResource?: string,
+    /** The title of the resource. This is typically not used for scripts or stylesheets, but may be used for other types of resources. */
+    title?: string,
+    /** A unique key for the resource. This could be used to prevent duplicate resources from being added to the document. */
+    key?: string,
+    /** The HTML tag where the resource should be added. This could be 'head' for resources that should be added to the <head> tag, 'body' for resources that should be added to the <body> tag, etc. */
+    targetTag?: 'head' | 'body',
+    /** The relationship of the resource to the document. This is typically 'stylesheet' for CSS files. */
+    rel?: string,
+    /** The media for which the resource is intended. This is typically used for CSS files, with values like 'screen', 'print', etc. */
+    media?: string,
+    /** A condition that must be met for the resource to be loaded. This could be used for conditional comments in IE, for example. */
+    condition?: string
+}>): React.JSX.Element {
+    const {renderContext} = useServerContext();
+    return (
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        /* eslint-disable-next-line react/no-danger */ // @ts-ignore
+        <unwanteddiv dangerouslySetInnerHTML={{
+            __html: server.render.addResources(props, renderContext)
+        }}/>
+    );
+}

javascript-modules-library/src/core/server/components/Area.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {useServerContext} from '../hooks/useServerContext';
+import {server} from '@jahia/javascript-modules-library-private';
+
+/**
+ * Generates an area in which editors may insert content objects.
+ * @returns The Area component
+ */
+export function Area({name, areaView, allowedTypes, numberOfItems, subNodesView, path, editable = true, areaAsSubNode, areaType = 'jnt:contentList', parameters}: Readonly<{
+    /** The name of the area. */
+    name?: string,
+    /** The view to use for the area. */
+    areaView?: string,
+    /** The allowed types for the area. */
+    allowedTypes?: string[],
+    /** The number of items to display in the area. */
+    numberOfItems?: number,
+    /** The view to use for the subnodes. */
+    subNodesView?: string,
+    /** Relative (to the current node) or absolute path to the node to include. */
+    path?: string,
+    /**
+     * Enables or disables edition of this content in edit mode. Mainly used for absolute or references.
+     * @default true
+     */
+    editable?: boolean,
+    /** Allow area to be stored as a subnode */
+    areaAsSubNode?: boolean,
+    /**
+     * Content type to be used to create the area
+     * @default jnt:contentList
+     */
+    areaType?: string,
+    /** The parameters to pass to the area */
+    parameters?: Record<string, unknown>
+}>): React.JSX.Element {
+    const {renderContext} = useServerContext();
+    return (
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        /* eslint-disable-next-line react/no-danger */ // @ts-ignore
+        <unwanteddiv dangerouslySetInnerHTML={{
+            __html: server.render.renderArea({
+                name,
+                areaView,
+                allowedTypes,
+                numberOfItems,
+                subNodesView,
+                path,
+                editable,
+                areaAsSubNode,
+                areaType,
+                parameters
+            }, renderContext)
+        }}/>
+    );
+}

javascript-modules-library/src/core/server/framework/defineJahiaComponent.tsx

@@ -0,0 +1,23 @@
+export interface JahiaComponent {
+    /** The ID of the component (autogenerated but can be overridden) */
+    id?: string;
+    /** The name of the component. */
+    name: string;
+    /** The display name of the component (in jahia's UI), optional. */
+    displayName?: string;
+    /** The type of the component. */
+    componentType: 'template' | 'view';
+    /** The content node type the component applies to. */
+    nodeType: string;
+    /** Properties to add on the component, optional. */
+    properties?: Record<string, string>;
+}
+
+/**
+ * Using this function provides autocomplete on the jahiaComponent properties.
+ * @param jahiaComponent - An object containing the Jahia component to define.
+ * @returns The jahiaComponent object.
+ */
+export function defineJahiaComponent(jahiaComponent: JahiaComponent): JahiaComponent {
+    return jahiaComponent;
+}