@dotcms/client 0.0.1-alpha.7 → 0.0.1-alpha.9

package/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+    "extends": ["../../../.eslintrc.base.json"],
+    "ignorePatterns": ["!**/*"],
+    "overrides": [
+        {
+            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+            "rules": {}
+        },
+        {
+            "files": ["*.ts", "*.tsx"],
+            "rules": {}
+        },
+        {
+            "files": ["*.js", "*.jsx"],
+            "rules": {}
+        }
+    ]
+}

package/jest.config.ts

@@ -0,0 +1,15 @@
+/* eslint-disable */
+export default {
+    displayName: 'sdk-client',
+    preset: '../../../jest.preset.js',
+    globals: {
+        'ts-jest': {
+            tsconfig: '<rootDir>/tsconfig.spec.json'
+        }
+    },
+    transform: {
+        '^.+\\.[tj]s$': 'ts-jest'
+    },
+    moduleFileExtensions: ['ts', 'js', 'html'],
+    coverageDirectory: '../../../coverage/libs/sdk/client'
+};

package/package.json

@@ -1,25 +1,26 @@
 {
-  "name": "@dotcms/client",
-  "version": "0.0.1-alpha.7",
-  "type": "module",
-  "description": "Official JavaScript library for interacting with DotCMS REST APIs.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/dotCMS/core.git#master"
-  },
-  "keywords": [
-    "dotCMS",
-    "CMS",
-    "Content Management",
-    "API Client",
-    "REST API"
-  ],
-  "author": "dotcms <dev@dotcms.com>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/dotCMS/core/issues"
-  },
-  "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/client/README.md",
-  "module": "./src/index.js",
-  "main": "./src/index.js"
+    "name": "@dotcms/client",
+    "version": "0.0.1-alpha.9",
+    "type": "module",
+    "description": "Official JavaScript library for interacting with DotCMS REST APIs.",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/dotCMS/core.git#master"
+    },
+    "scripts": {
+        "build": "nx run sdk-client:build:js; cd ../../../../dotCMS/src/main/webapp/html/js/editor-js; rm -rf src package.json *.esm.d.ts"
+    },
+    "keywords": [
+        "dotCMS",
+        "CMS",
+        "Content Management",
+        "API Client",
+        "REST API"
+    ],
+    "author": "dotcms <dev@dotcms.com>",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/dotCMS/core/issues"
+    },
+    "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/client/README.md"
 }

package/project.json

@@ -0,0 +1,63 @@
+{
+    "name": "sdk-client",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/sdk/client/src",
+    "projectType": "library",
+    "targets": {
+        "build": {
+            "executor": "@nrwl/js:tsc",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/sdk/client",
+                "main": "libs/sdk/client/src/index.ts",
+                "tsConfig": "libs/sdk/client/tsconfig.lib.json",
+                "assets": ["libs/sdk/client/*.md"]
+            }
+        },
+        "build:js": {
+            "executor": "@nrwl/rollup:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "../dotCMS/src/main/webapp/html/js/editor-js",
+                "outputFileName": "sdk-editor",
+                "format": ["esm"],
+                "tsConfig": "libs/sdk/client/tsconfig.lib.json",
+                "project": "libs/sdk/client/package.json",
+                "entryFile": "libs/sdk/client/src/lib/editor/sdk-editor-vtl.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+                "compiler": "swc",
+                "extractCss": false
+            }
+        },
+        "publish": {
+            "executor": "nx:run-commands",
+            "options": {
+                "command": "node tools/scripts/publish.mjs sdk-js-client {args.ver} {args.tag}"
+            },
+            "dependsOn": ["build"]
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": ["libs/sdk/client/**/*.ts"]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/sdk/client/jest.config.ts",
+                "passWithNoTests": true
+            },
+            "configurations": {
+                "ci": {
+                    "ci": true,
+                    "codeCoverage": true
+                }
+            }
+        }
+    },
+    "tags": []
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './lib/client/sdk-js-client';
+export * from './lib/editor/sdk-editor';
+export * from './lib/editor/models/editor.model';
+export * from './lib/editor/models/client.model';

package/src/lib/client/sdk-js-client.spec.ts

@@ -0,0 +1,258 @@
+/// <reference types="jest" />
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { DotCmsClient, dotcmsClient } from './sdk-js-client';
+global.fetch = jest.fn();
+
+// Utility function to mock fetch responses
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const mockFetchResponse = (body: any, ok = true, status = 200) => {
+    (fetch as jest.Mock).mockImplementationOnce(() =>
+        Promise.resolve({
+            ok,
+            status,
+            json: () => Promise.resolve(body)
+        })
+    );
+};
+
+describe('DotCmsClient', () => {
+    describe('with full configuration', () => {
+        let client: DotCmsClient;
+
+        beforeEach(() => {
+            (fetch as jest.Mock).mockClear();
+
+            client = dotcmsClient.init({
+                dotcmsUrl: 'http://localhost',
+                siteId: '123456',
+                authToken: 'ABC'
+            });
+        });
+
+        describe('init', () => {
+            it('should initialize with valid configuration', () => {
+                const config = {
+                    dotcmsUrl: 'https://example.com',
+                    siteId: '123456',
+                    authToken: 'ABC'
+                };
+
+                const client = dotcmsClient.init(config);
+                expect(client).toBeDefined();
+            });
+
+            it('should throw error on missing dotcmsUrl', () => {
+                const config = {
+                    dotcmsUrl: '',
+                    siteId: '123456',
+                    authToken: 'ABC'
+                };
+
+                expect(() => {
+                    dotcmsClient.init(config);
+                }).toThrow("Invalid configuration - 'dotcmsUrl' is required");
+            });
+
+            it('should throw error if dotcmsUrl is not a valid URL', () => {
+                const config = {
+                    dotcmsUrl: '//example.com',
+                    siteId: '123456',
+                    authToken: 'ABC'
+                };
+
+                expect(() => {
+                    dotcmsClient.init(config);
+                }).toThrow("Invalid configuration - 'dotcmsUrl' must be a valid URL");
+            });
+
+            it('should throw error on missing authToken', () => {
+                const config = {
+                    dotcmsUrl: 'https://example.com',
+                    siteId: '123456',
+                    authToken: ''
+                };
+
+                expect(() => {
+                    dotcmsClient.init(config);
+                }).toThrow("Invalid configuration - 'authToken' is required");
+            });
+        });
+
+        describe('page.get', () => {
+            it('should fetch page data successfully', async () => {
+                const mockResponse = { content: 'Page data' };
+                mockFetchResponse(mockResponse);
+
+                const data = await client.page.get({ path: '/home' });
+
+                expect(fetch).toHaveBeenCalledTimes(1);
+                expect(fetch).toHaveBeenCalledWith(
+                    'http://localhost/api/v1/page/json/home?host_id=123456',
+                    {
+                        headers: { Authorization: 'Bearer ABC' }
+                    }
+                );
+                expect(data).toEqual(mockResponse);
+            });
+
+            it('should throw an error if the path is not provided', async () => {
+                await expect(client.page.get({} as any)).rejects.toThrowError(
+                    `The 'path' parameter is required for the Page API`
+                );
+            });
+
+            it('should get the page for specified persona', () => {
+                const mockResponse = { content: 'Page data' };
+                mockFetchResponse(mockResponse);
+
+                client.page.get({ path: '/home', personaId: 'doe123' });
+
+                expect(fetch).toHaveBeenCalledWith(
+                    'http://localhost/api/v1/page/json/home?com.dotmarketing.persona.id=doe123&host_id=123456',
+                    {
+                        headers: { Authorization: 'Bearer ABC' }
+                    }
+                );
+            });
+
+            it('should get the page for specified siteId', () => {
+                const mockResponse = { content: 'Page data' };
+                mockFetchResponse(mockResponse);
+
+                client.page.get({ path: '/home', siteId: 'host-123' });
+
+                expect(fetch).toHaveBeenCalledWith(
+                    'http://localhost/api/v1/page/json/home?host_id=host-123',
+                    {
+                        headers: { Authorization: 'Bearer ABC' }
+                    }
+                );
+            });
+
+            it('should get the page for specified language', () => {
+                const mockResponse = { content: 'Page data' };
+                mockFetchResponse(mockResponse);
+
+                client.page.get({ path: '/home', language_id: 99 });
+
+                expect(fetch).toHaveBeenCalledWith(
+                    'http://localhost/api/v1/page/json/home?language_id=99&host_id=123456',
+                    {
+                        headers: { Authorization: 'Bearer ABC' }
+                    }
+                );
+            });
+        });
+
+        describe('nav.get', () => {
+            it('should fetch navigation data successfully', async () => {
+                const mockResponse = { nav: 'Navigation data' };
+                mockFetchResponse(mockResponse);
+
+                const data = await client.nav.get({ path: '/', depth: 1 });
+
+                expect(fetch).toHaveBeenCalledTimes(1);
+                expect(fetch).toHaveBeenCalledWith('http://localhost/api/v1/nav/?depth=1', {
+                    headers: { Authorization: 'Bearer ABC' }
+                });
+                expect(data).toEqual(mockResponse);
+            });
+
+            it('should correctly handle the root path', async () => {
+                const mockResponse = { nav: 'Root nav data' };
+                mockFetchResponse(mockResponse);
+
+                const data = await client.nav.get({ path: '/' });
+
+                expect(fetch).toHaveBeenCalledWith('http://localhost/api/v1/nav/', {
+                    headers: { Authorization: 'Bearer ABC' }
+                });
+                expect(data).toEqual(mockResponse);
+            });
+
+            it('should throw an error if the path is not provided', async () => {
+                await expect(client.nav.get({} as any)).rejects.toThrowError(
+                    `The 'path' parameter is required for the Nav API`
+                );
+            });
+        });
+    });
+
+    describe('with minimal configuration', () => {
+        let client: DotCmsClient;
+
+        beforeEach(() => {
+            (fetch as jest.Mock).mockClear();
+
+            client = dotcmsClient.init({
+                dotcmsUrl: 'http://localhost',
+                authToken: 'ABC'
+            });
+        });
+
+        it('should get the page without siteId', () => {
+            const mockResponse = { content: 'Page data' };
+            mockFetchResponse(mockResponse);
+
+            client.page.get({ path: '/home' });
+
+            expect(fetch).toHaveBeenCalledWith('http://localhost/api/v1/page/json/home', {
+                headers: { Authorization: 'Bearer ABC' }
+            });
+        });
+    });
+
+    describe('with requestOptions', () => {
+        let client: DotCmsClient;
+
+        beforeEach(() => {
+            (fetch as jest.Mock).mockClear();
+
+            client = dotcmsClient.init({
+                dotcmsUrl: 'http://localhost',
+                siteId: '123456',
+                authToken: 'ABC',
+                requestOptions: {
+                    headers: {
+                        'X-My-Header': 'my-value'
+                    },
+                    cache: 'no-cache'
+                }
+            });
+        });
+
+        it('should fetch page data with extra headers and cache', async () => {
+            const mockResponse = { content: 'Page data' };
+            mockFetchResponse(mockResponse);
+
+            const data = await client.page.get({ path: '/home' });
+
+            expect(fetch).toHaveBeenCalledTimes(1);
+            expect(fetch).toHaveBeenCalledWith(
+                'http://localhost/api/v1/page/json/home?host_id=123456',
+                {
+                    headers: { Authorization: 'Bearer ABC', 'X-My-Header': 'my-value' },
+                    cache: 'no-cache'
+                }
+            );
+            expect(data).toEqual(mockResponse);
+        });
+
+        it('should fetch bav data with extra headers and cache', async () => {
+            const mockResponse = { content: 'Page data' };
+            mockFetchResponse(mockResponse);
+
+            const data = await client.nav.get();
+
+            expect(fetch).toHaveBeenCalledTimes(1);
+            expect(fetch).toHaveBeenCalledWith(
+                'http://localhost/api/v1/nav/?depth=0&languageId=1',
+                {
+                    headers: { Authorization: 'Bearer ABC', 'X-My-Header': 'my-value' },
+                    cache: 'no-cache'
+                }
+            );
+            expect(data).toEqual(mockResponse);
+        });
+    });
+});

package/src/lib/{sdk-js-client.d.ts → client/sdk-js-client.ts}

@@ -36,6 +36,7 @@ export interface ClientConfig {
      */
     requestOptions?: Omit<RequestInit, 'body' | 'method'>;
 }
+
 type PageApiOptions = {
     /**
      * The path of the page you want to retrieve.
@@ -49,6 +50,12 @@ type PageApiOptions = {
      * @type {number}
      */
     siteId?: string;
+    /**
+     * The mode of the page you want to retrieve. If not provided will use the default mode of the site.
+     *
+     * @type {number}
+     */
+    mode?: string;
     /**
      * The language id of the page you want to retrieve. If not provided will use the default language of the site.
      *
@@ -74,6 +81,7 @@ type PageApiOptions = {
      */
     depth?: number;
 };
+
 type NavApiOptions = {
     /**
      * The root path to begin traversing the folder tree.
@@ -109,6 +117,17 @@ type NavApiOptions = {
      */
     languageId?: number;
 };
+
+function isValidUrl(url: string): boolean {
+    try {
+        new URL(url);
+
+        return true;
+    } catch (error) {
+        return false;
+    }
+}
+
 /**
  * `DotCmsClient` is a TypeScript class that provides methods to interact with the DotCMS REST API.
  * It requires a configuration object on instantiation, which includes the DotCMS URL, site ID, and authentication token.
@@ -124,11 +143,37 @@ type NavApiOptions = {
  * @method nav.get(options: NavApiOptions = { depth: 0, path: '/', languageId: 1 }): Promise<unknown> - Retrieves information about the dotCMS file and folder tree.
  *
  */
-export declare class DotCmsClient {
-    private config;
-    private requestOptions;
-    constructor(config?: ClientConfig);
-    page: {
+export class DotCmsClient {
+    private config: ClientConfig;
+    private requestOptions!: Omit<RequestInit, 'body' | 'method'>;
+
+    constructor(
+        config: ClientConfig = { dotcmsUrl: '', authToken: '', requestOptions: {}, siteId: '' }
+    ) {
+        if (!config.dotcmsUrl) {
+            throw new Error("Invalid configuration - 'dotcmsUrl' is required");
+        }
+
+        if (!isValidUrl(config.dotcmsUrl)) {
+            throw new Error("Invalid configuration - 'dotcmsUrl' must be a valid URL");
+        }
+
+        if (!config.authToken) {
+            throw new Error("Invalid configuration - 'authToken' is required");
+        }
+
+        this.config = config;
+
+        this.requestOptions = {
+            ...this.config.requestOptions,
+            headers: {
+                Authorization: `Bearer ${this.config.authToken}`,
+                ...this.config.requestOptions?.headers
+            }
+        };
+    }
+
+    page = {
         /**
          * `page.get` is an asynchronous method of the `DotCmsClient` class that retrieves all the elements of any Page in your dotCMS system in JSON format.
          * It takes a `PageApiOptions` object as a parameter and returns a Promise that resolves to the response from the DotCMS API.
@@ -142,9 +187,41 @@ export declare class DotCmsClient {
          * @returns {Promise<unknown>} - A Promise that resolves to the response from the DotCMS API.
          * @throws {Error} - Throws an error if the options are not valid.
          */
-        get: (options: PageApiOptions) => Promise<unknown>;
+        get: async (options: PageApiOptions): Promise<unknown> => {
+            this.validatePageOptions(options);
+
+            const queryParamsObj: Record<string, string> = {};
+            for (const [key, value] of Object.entries(options)) {
+                if (value === undefined || key === 'path' || key === 'siteId') continue;
+
+                if (key === 'personaId') {
+                    queryParamsObj['com.dotmarketing.persona.id'] = String(value);
+                } else if (key === 'mode' && value) {
+                    queryParamsObj['mode'] = String(value);
+                } else {
+                    queryParamsObj[key] = String(value);
+                }
+            }
+
+            const queryHostId = options.siteId ?? this.config.siteId ?? '';
+
+            if (queryHostId) {
+                queryParamsObj['host_id'] = queryHostId;
+            }
+
+            const queryParams = new URLSearchParams(queryParamsObj).toString();
+
+            const formattedPath = options.path.startsWith('/') ? options.path : `/${options.path}`;
+            const url = `${this.config.dotcmsUrl}/api/v1/page/json${formattedPath}${
+                queryParams ? `?${queryParams}` : ''
+            }`;
+            const response = await fetch(url, this.requestOptions);
+
+            return response.json();
+        }
     };
-    nav: {
+
+    nav = {
         /**
          * `nav.get` is an asynchronous method of the `DotCmsClient` class that retrieves information about the dotCMS file and folder tree.
          * It takes a `NavApiOptions` object as a parameter (with default values) and returns a Promise that resolves to the response from the DotCMS API.
@@ -156,11 +233,47 @@ export declare class DotCmsClient {
          * @returns {Promise<unknown>} - A Promise that resolves to the response from the DotCMS API.
          * @throws {Error} - Throws an error if the options are not valid.
          */
-        get: (options?: NavApiOptions) => Promise<unknown>;
+        get: async (
+            options: NavApiOptions = { depth: 0, path: '/', languageId: 1 }
+        ): Promise<unknown> => {
+            this.validateNavOptions(options);
+
+            // Extract the 'path' from the options and prepare the rest as query parameters
+            const { path, ...queryParamsOptions } = options;
+            const queryParamsObj: Record<string, string> = {};
+            Object.entries(queryParamsOptions).forEach(([key, value]) => {
+                if (value !== undefined) {
+                    queryParamsObj[key] = String(value);
+                }
+            });
+
+            const queryParams = new URLSearchParams(queryParamsObj).toString();
+
+            // Format the URL correctly depending on the 'path' value
+            const formattedPath = path === '/' ? '/' : `/${path}`;
+            const url = `${this.config.dotcmsUrl}/api/v1/nav${formattedPath}${
+                queryParams ? `?${queryParams}` : ''
+            }`;
+
+            const response = await fetch(url, this.requestOptions);
+
+            return response.json();
+        }
     };
-    private validatePageOptions;
-    private validateNavOptions;
+
+    private validatePageOptions(options: PageApiOptions): void {
+        if (!options.path) {
+            throw new Error("The 'path' parameter is required for the Page API");
+        }
+    }
+
+    private validateNavOptions(options: NavApiOptions): void {
+        if (!options.path) {
+            throw new Error("The 'path' parameter is required for the Nav API");
+        }
+    }
 }
+
 /**
  * `dotcmsClient` is an object that provides a method to initialize the DotCMS SDK client.
  * It has a single method `init` which takes a configuration object and returns an instance of the `DotCmsClient` class.
@@ -169,7 +282,7 @@ export declare class DotCmsClient {
  *
  * @method init(config: ClientConfig): DotCmsClient - Initializes the SDK client.
  */
-export declare const dotcmsClient: {
+export const dotcmsClient = {
     /**
      * `init` is a method of the `dotcmsClient` object that initializes the SDK client.
      * It takes a configuration object as a parameter and returns an instance of the `DotCmsClient` class.
@@ -178,6 +291,7 @@ export declare const dotcmsClient: {
      * @param {ClientConfig} config - The configuration object for the DotCMS client.
      * @returns {DotCmsClient} - An instance of the {@link DotCmsClient} class.
      */
-    init: (config: ClientConfig) => DotCmsClient;
+    init: (config: ClientConfig): DotCmsClient => {
+        return new DotCmsClient(config);
+    }
 };
-export {};

package/src/lib/editor/listeners/listeners.spec.ts

@@ -0,0 +1,55 @@
+import {
+    listenContentChange,
+    listenEditorMessages,
+    listenHoveredContentlet,
+    pingEditor,
+    scrollHandler
+} from './listeners';
+
+import { CUSTOMER_ACTIONS, postMessageToEditor } from '../models/client.model';
+
+jest.mock('../models/client.model', () => ({
+    postMessageToEditor: jest.fn(),
+    CUSTOMER_ACTIONS: {
+        NAVIGATION_UPDATE: 'set-url',
+        SET_BOUNDS: 'set-bounds',
+        SET_CONTENTLET: 'set-contentlet',
+        IFRAME_SCROLL: 'scroll',
+        PING_EDITOR: 'ping-editor',
+        CONTENT_CHANGE: 'content-change',
+        NOOP: 'noop'
+    }
+}));
+
+describe('listeners', () => {
+    it('should listen editor messages', () => {
+        const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+        listenEditorMessages();
+        expect(addEventListenerSpy).toHaveBeenCalledWith('message', expect.any(Function));
+    });
+
+    it('should listen to hovered contentlet', () => {
+        const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
+        listenHoveredContentlet();
+        expect(addEventListenerSpy).toHaveBeenCalledWith('pointermove', expect.any(Function));
+    });
+
+    it('should handle scroll', () => {
+        const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+        scrollHandler();
+        expect(addEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+    });
+
+    it('should listen to content change', () => {
+        const observeSpy = jest.spyOn(MutationObserver.prototype, 'observe');
+        listenContentChange();
+        expect(observeSpy).toHaveBeenCalledWith(document, { childList: true, subtree: true });
+    });
+
+    it('should send ping to editor', () => {
+        pingEditor();
+        expect(postMessageToEditor).toHaveBeenCalledWith({
+            action: CUSTOMER_ACTIONS.PING_EDITOR
+        });
+    });
+});