@dotcms/uve 0.0.1-beta.4 → 0.0.1-beta.6

package/index.cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var types = require('./types.cjs.js');
+var internal = require('./internal.cjs.js');
 
 /**
  * Gets the current state of the Universal Visual Editor (UVE).
@@ -54,5 +55,32 @@ function getUVEState() {
     publishDate
   };
 }
+/**
+ * Creates a subscription to a UVE event.
+ *
+ * @param {string} event - The event to subscribe to.
+ * @param {UVECallback} callback - The callback to call when the event is triggered.
+ * @return {UnsubscribeUVE | undefined} The unsubscribe function if the event is valid, undefined otherwise.
+ *
+ * @example
+ * ```ts
+ * const unsubscribeChanges = createUVESubscription('changes', (payload) => {
+ *   console.log(payload);
+ * });
+ * ```
+ */
+function createUVESubscription(event, callback) {
+  if (!getUVEState()) {
+    console.warn('UVE Subscription: Not running inside UVE');
+    return internal.__UVE_EVENT_ERROR_FALLBACK__(event);
+  }
+  const eventCallback = internal.__UVE_EVENTS__[event];
+  if (!eventCallback) {
+    console.error(`UVE Subscription: Event ${event} not found`);
+    return internal.__UVE_EVENT_ERROR_FALLBACK__(event);
+  }
+  return eventCallback(callback);
+}
 
+exports.createUVESubscription = createUVESubscription;
 exports.getUVEState = getUVEState;

package/index.esm.js

@@ -1,4 +1,5 @@
 import { UVE_MODE } from './types.esm.js';
+import { __UVE_EVENT_ERROR_FALLBACK__, __UVE_EVENTS__ } from './internal.esm.js';
 
 /**
  * Gets the current state of the Universal Visual Editor (UVE).
@@ -52,5 +53,31 @@ function getUVEState() {
     publishDate
   };
 }
+/**
+ * Creates a subscription to a UVE event.
+ *
+ * @param {string} event - The event to subscribe to.
+ * @param {UVECallback} callback - The callback to call when the event is triggered.
+ * @return {UnsubscribeUVE | undefined} The unsubscribe function if the event is valid, undefined otherwise.
+ *
+ * @example
+ * ```ts
+ * const unsubscribeChanges = createUVESubscription('changes', (payload) => {
+ *   console.log(payload);
+ * });
+ * ```
+ */
+function createUVESubscription(event, callback) {
+  if (!getUVEState()) {
+    console.warn('UVE Subscription: Not running inside UVE');
+    return __UVE_EVENT_ERROR_FALLBACK__(event);
+  }
+  const eventCallback = __UVE_EVENTS__[event];
+  if (!eventCallback) {
+    console.error(`UVE Subscription: Event ${event} not found`);
+    return __UVE_EVENT_ERROR_FALLBACK__(event);
+  }
+  return eventCallback(callback);
+}
 
-export { getUVEState };
+export { createUVESubscription, getUVEState };

package/internal.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./src/internal";

package/internal.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./internal.cjs.js').default;

package/internal.cjs.js

@@ -0,0 +1,76 @@
+'use strict';
+
+/**
+ * Actions received from the dotCMS UVE
+ *
+ * @internal
+ * @enum {string}
+ */
+exports.__NOTIFY_CLIENT__ = void 0;
+(function (__NOTIFY_CLIENT__) {
+  /**
+   * Request to page to reload
+   */
+  __NOTIFY_CLIENT__["UVE_RELOAD_PAGE"] = "uve-reload-page";
+  /**
+   * Request the bounds for the elements
+   */
+  __NOTIFY_CLIENT__["UVE_REQUEST_BOUNDS"] = "uve-request-bounds";
+  /**
+   * Received pong from the editor
+   */
+  __NOTIFY_CLIENT__["UVE_EDITOR_PONG"] = "uve-editor-pong";
+  /**
+   * Received scroll event trigger from the editor
+   */
+  __NOTIFY_CLIENT__["UVE_SCROLL_INSIDE_IFRAME"] = "uve-scroll-inside-iframe";
+  /**
+   * Set the page data
+   */
+  __NOTIFY_CLIENT__["UVE_SET_PAGE_DATA"] = "uve-set-page-data";
+  /**
+   * Copy contentlet inline editing success
+   */
+  __NOTIFY_CLIENT__["UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS"] = "uve-copy-contentlet-inline-editing-success";
+})(exports.__NOTIFY_CLIENT__ || (exports.__NOTIFY_CLIENT__ = {}));
+
+// TODO: WE NEED TO LOOK FOR ALL THE NOTIFY_CLIENT EVENTS AND ADD THEM TO THE UVE_EVENTS CONSTANT WHEN WE MIGRATE THE EDITOR TO THE NEW UVE LIBRARY
+/**
+ * Events that can be subscribed to in the UVE
+ *
+ * @internal
+ * @type {Record<string, UVEEvent>}
+ */
+const __UVE_EVENTS__ = {
+  changes: callback => {
+    const messageCallback = event => {
+      if (event.data.name === exports.__NOTIFY_CLIENT__.UVE_SET_PAGE_DATA) {
+        callback(event.data.payload);
+      }
+    };
+    window.addEventListener('message', messageCallback);
+    return {
+      unsubscribe: () => {
+        window.removeEventListener('message', messageCallback);
+      },
+      event: 'changes'
+    };
+  }
+};
+/**
+ * Default UVE event
+ *
+ * @param {string} event - The event to subscribe to.
+ * @internal
+ */
+const __UVE_EVENT_ERROR_FALLBACK__ = event => {
+  return {
+    unsubscribe: () => {
+      /* do nothing */
+    },
+    event
+  };
+};
+
+exports.__UVE_EVENTS__ = __UVE_EVENTS__;
+exports.__UVE_EVENT_ERROR_FALLBACK__ = __UVE_EVENT_ERROR_FALLBACK__;

package/internal.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './internal.cjs.js';
+export { _default as default } from './internal.cjs.default.js';

package/internal.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src/internal";

package/internal.esm.js

@@ -0,0 +1,73 @@
+/**
+ * Actions received from the dotCMS UVE
+ *
+ * @internal
+ * @enum {string}
+ */
+var __NOTIFY_CLIENT__;
+(function (__NOTIFY_CLIENT__) {
+  /**
+   * Request to page to reload
+   */
+  __NOTIFY_CLIENT__["UVE_RELOAD_PAGE"] = "uve-reload-page";
+  /**
+   * Request the bounds for the elements
+   */
+  __NOTIFY_CLIENT__["UVE_REQUEST_BOUNDS"] = "uve-request-bounds";
+  /**
+   * Received pong from the editor
+   */
+  __NOTIFY_CLIENT__["UVE_EDITOR_PONG"] = "uve-editor-pong";
+  /**
+   * Received scroll event trigger from the editor
+   */
+  __NOTIFY_CLIENT__["UVE_SCROLL_INSIDE_IFRAME"] = "uve-scroll-inside-iframe";
+  /**
+   * Set the page data
+   */
+  __NOTIFY_CLIENT__["UVE_SET_PAGE_DATA"] = "uve-set-page-data";
+  /**
+   * Copy contentlet inline editing success
+   */
+  __NOTIFY_CLIENT__["UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS"] = "uve-copy-contentlet-inline-editing-success";
+})(__NOTIFY_CLIENT__ || (__NOTIFY_CLIENT__ = {}));
+
+// TODO: WE NEED TO LOOK FOR ALL THE NOTIFY_CLIENT EVENTS AND ADD THEM TO THE UVE_EVENTS CONSTANT WHEN WE MIGRATE THE EDITOR TO THE NEW UVE LIBRARY
+/**
+ * Events that can be subscribed to in the UVE
+ *
+ * @internal
+ * @type {Record<string, UVEEvent>}
+ */
+const __UVE_EVENTS__ = {
+  changes: callback => {
+    const messageCallback = event => {
+      if (event.data.name === __NOTIFY_CLIENT__.UVE_SET_PAGE_DATA) {
+        callback(event.data.payload);
+      }
+    };
+    window.addEventListener('message', messageCallback);
+    return {
+      unsubscribe: () => {
+        window.removeEventListener('message', messageCallback);
+      },
+      event: 'changes'
+    };
+  }
+};
+/**
+ * Default UVE event
+ *
+ * @param {string} event - The event to subscribe to.
+ * @internal
+ */
+const __UVE_EVENT_ERROR_FALLBACK__ = event => {
+  return {
+    unsubscribe: () => {
+      /* do nothing */
+    },
+    event
+  };
+};
+
+export { __NOTIFY_CLIENT__, __UVE_EVENTS__, __UVE_EVENT_ERROR_FALLBACK__ };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/uve",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.6",
   "description": "Official JavaScript library for interacting with Universal Visual Editor (UVE)",
   "repository": {
     "type": "git",
@@ -26,6 +26,12 @@
       "types": "./types.esm.d.ts",
       "import": "./types.cjs.mjs",
       "default": "./types.cjs.js"
+    },
+    "./internal": {
+      "module": "./internal.esm.js",
+      "types": "./internal.esm.d.ts",
+      "import": "./internal.cjs.mjs",
+      "default": "./internal.cjs.js"
     }
   },
   "typesVersions": {
@@ -35,6 +41,9 @@
       ],
       "types": [
         "./src/types.d.ts"
+      ],
+      "internal": [
+        "./src/internal.d.ts"
       ]
     }
   },

package/src/index.d.ts

@@ -1,2 +1 @@
-import { getUVEState } from './lib/utils';
-export { getUVEState };
+export * from './lib/utils';

package/src/internal/constants.d.ts

@@ -0,0 +1,18 @@
+import { UVEEvent } from '../lib/types';
+/**
+ * Events that can be subscribed to in the UVE
+ *
+ * @internal
+ * @type {Record<string, UVEEvent>}
+ */
+export declare const __UVE_EVENTS__: Record<string, UVEEvent>;
+/**
+ * Default UVE event
+ *
+ * @param {string} event - The event to subscribe to.
+ * @internal
+ */
+export declare const __UVE_EVENT_ERROR_FALLBACK__: (event: string) => {
+    unsubscribe: () => void;
+    event: string;
+};

package/src/internal/enums.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Actions received from the dotCMS UVE
+ *
+ * @internal
+ * @enum {string}
+ */
+export declare enum __NOTIFY_CLIENT__ {
+    /**
+     * Request to page to reload
+     */
+    UVE_RELOAD_PAGE = "uve-reload-page",
+    /**
+     * Request the bounds for the elements
+     */
+    UVE_REQUEST_BOUNDS = "uve-request-bounds",
+    /**
+     * Received pong from the editor
+     */
+    UVE_EDITOR_PONG = "uve-editor-pong",
+    /**
+     * Received scroll event trigger from the editor
+     */
+    UVE_SCROLL_INSIDE_IFRAME = "uve-scroll-inside-iframe",
+    /**
+     * Set the page data
+     */
+    UVE_SET_PAGE_DATA = "uve-set-page-data",
+    /**
+     * Copy contentlet inline editing success
+     */
+    UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS = "uve-copy-contentlet-inline-editing-success"
+}

package/src/internal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './enums';

package/src/internal.d.ts

@@ -0,0 +1 @@
+export * from './internal/index';

package/src/lib/types.d.ts

@@ -31,3 +31,29 @@ export declare enum UVE_MODE {
     LIVE = "LIVE",
     UNKNOWN = "UNKNOWN"
 }
+/**
+ * Callback function for UVE events
+ * @callback UVECallback
+ * @param {unknown} payload - The payload of the event
+ */
+export type UVECallback = (payload: unknown) => void;
+/**
+ * Unsubscribe function for UVE events
+ * @callback UnsubscribeUVE
+ */
+export type UnsubscribeUVE = () => void;
+/**
+ * UVESubscription type
+ * @typedef {Object} UVESubscription
+ * @property {UnsubscribeUVE} unsubscribe - The unsubscribe function for the UVE event
+ * @property {string} event - The event name
+ */
+export type UVESubscription = {
+    unsubscribe: UnsubscribeUVE;
+    event: string;
+};
+/**
+ * UVE event type
+ * @typedef {function} UVEEvent
+ */
+export type UVEEvent = (callback: UVECallback) => UVESubscription;

package/src/lib/utils.d.ts

@@ -1,4 +1,4 @@
-import { UVEState } from './types';
+import { UVECallback, UVEState, UVESubscription } from './types';
 /**
  * Gets the current state of the Universal Visual Editor (UVE).
  *
@@ -28,3 +28,18 @@ import { UVEState } from './types';
  * ```
  */
 export declare function getUVEState(): UVEState | undefined;
+/**
+ * Creates a subscription to a UVE event.
+ *
+ * @param {string} event - The event to subscribe to.
+ * @param {UVECallback} callback - The callback to call when the event is triggered.
+ * @return {UnsubscribeUVE | undefined} The unsubscribe function if the event is valid, undefined otherwise.
+ *
+ * @example
+ * ```ts
+ * const unsubscribeChanges = createUVESubscription('changes', (payload) => {
+ *   console.log(payload);
+ * });
+ * ```
+ */
+export declare function createUVESubscription(event: string, callback: UVECallback): UVESubscription;

package/src/types.d.ts

@@ -1,2 +1 @@
-import { UVE_MODE, UVEState } from './lib/types';
-export { UVE_MODE, UVEState };
+export * from './lib/types';