@pexip-engage-public/plugin-instance - npm Package Compare versions

Comparing version 1.0.50-canary-20230927094645 to 1.1.0-canary-20230927163206

CHANGELOG.md

 # @pexip-engage-public/plugin-instance
 
-## 1.0.50-canary-20230927094645
+## 1.1.0-canary-20230927163206
 
+### Minor Changes
+
+- ded0a77ab: bug: refactor plugin to not rely on any cookies (safari issue)
+
 ### Patch Changes
 
+- 646f90e0e: SKED-11406: domain-validation-plugin
+- Updated dependencies [ded0a77ab]
+  - @pexip-engage-public/plugin-configuration-parser@1.2.0-canary-20230927163206
+  - @pexip-engage-public/plugin-state@1.2.0-canary-20230927163206
+  - @pexip-engage-public/plugin-events@1.0.28-canary-20230927163206
+
+## 1.0.50
+
+### Patch Changes
+
 - cf9c0cb24: SKED-11478: emit event when displaying a step in the booking flow
 - Updated dependencies [cf9c0cb24]
-  - @pexip-engage-public/plugin-events@1.0.27-canary-20230927094645
+  - @pexip-engage-public/plugin-events@1.0.27
 
@@ -11,0 +25,0 @@ ## 1.0.49

package.json

 {
   "name": "@pexip-engage-public/plugin-instance",
-  "version": "1.0.50-canary-20230927094645",
+  "version": "1.1.0-canary-20230927163206",
   "homepage": "https://github.com/skedify/frontend-mono/tree/develop/apps/plugin-remix/packages/plugin-instance#readme",
@@ -36,5 +36,5 @@ "bugs": {
     "iframe-resizer": "^4.3.7",
-    "@pexip-engage-public/plugin-configuration-parser": "1.1.20",
-    "@pexip-engage-public/plugin-events": "1.0.27-canary-20230927094645",
-    "@pexip-engage-public/plugin-state": "1.1.7",
+    "@pexip-engage-public/plugin-configuration-parser": "1.2.0-canary-20230927163206",
+    "@pexip-engage-public/plugin-events": "1.0.28-canary-20230927163206",
+    "@pexip-engage-public/plugin-state": "1.2.0-canary-20230927163206",
     "@pexip-engage-public/plugin-utils": "1.0.10"
@@ -41,0 +41,0 @@ },

src/PluginInstance.ts

@@ -25,21 +25,9 @@ import {
 import { dispatchEvent, PEXIP_ENGAGE_PLUGIN_EVENT, PluginCustomEvent } from "./dispatchEvent";
+import { PexipEngagePluginFrame } from "./PexipEngagePluginFrame";
 
 type PluginEventListener = (event: PluginCustomEvent) => unknown;
 
-class PexipEngagePluginFrame extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-  }
-}
-
-const FRAME_IDENTIFIER = "pexip-engage-plugin-frame";
-
-if (!window.customElements.get(FRAME_IDENTIFIER)) {
-  window.customElements.define(FRAME_IDENTIFIER, PexipEngagePluginFrame);
-}
-
 export class PluginInstance {
-  #instance: IFrameComponent;
-  #target: HTMLElement;
+  readonly #instance: IFrameComponent;
+  readonly #target: HTMLElement;
   #state: StateUpdateMessage["payload"] | null = null;
@@ -50,18 +38,7 @@ #meta: Record<string, unknown> | null = null;
 
-  readonly fallbackHTML: string;
-
+  readonly #fallbackHTML: string;
   readonly #config: ReturnType<typeof parsePluginConfiguration>;
 
-  get config(): ReturnType<typeof parsePluginConfiguration> {
-    console.warn(
-      `The property "config" is intended for debugging purposes only and might be changed at any time without notice. Its use in production is strongly discouraged and not supported.`,
-    );
-
-    return this.#config;
-  }
-
-  readonly configuration: ReturnType<typeof parsePluginConfiguration>["config"];
-
-  constructor(target: unknown, options: unknown = {}) {
-    if (!isElement(target)) throw new Error("Invalid target passed, expected an element.");
+  constructor(element: unknown, options: unknown = {}) {
+    if (!isElement(element)) throw new Error("Invalid target passed, expected an element.");
     if (!isValidConfiguration(options))
@@ -71,36 +48,24 @@ throw new Error("Invalid configuration passed, expected an object.");
     const config = parsePluginConfiguration({
-      element: target,
+      element,
       options,
       hash: window.location.hash,
+      href: window.location.href,
     });
 
     this.#config = config;
-    this.configuration = config.config;
+    this.#target = element;
 
-    const searchParams = createSearchParamConfig({ config: config.config });
-    const src = `${PluginInstance.url}?${searchParams}`;
-
-    const iframe = document.createElement("iframe");
-    iframe.src = src;
-    iframe.style.border = "0px";
-    iframe.style.overflow = "hidden";
-    iframe.style.height = "707px";
-    iframe.style.width = "100%";
-    iframe.height = "100%";
-    iframe.width = "100%";
-    iframe.title = "pexip-engage-plugin";
-
-    const existingInstance = PluginInstance.#instances.find((i) => i.#target === target);
-    this.fallbackHTML = existingInstance?.fallbackHTML ?? target.innerHTML;
+    const existingInstance = PluginInstance.#instances.find((i) => i.#target === element);
+    this.#fallbackHTML = existingInstance ? "" : element.innerHTML;
     existingInstance?.dispose();
-    target.innerHTML = "";
 
-    const iframeContainer = document.createElement(FRAME_IDENTIFIER);
-    iframeContainer.shadowRoot?.appendChild(iframe);
-    const child = iframeContainer.shadowRoot ? iframeContainer : iframe;
+    const container = new PexipEngagePluginFrame();
+    element.innerHTML = "";
+    element.appendChild(container);
 
-    target.appendChild(child);
+    const searchParams = createSearchParamConfig({ config: config.config });
+    const src = `${PluginInstance.#url}/plugin?${searchParams}`;
 
+    const iframe = container.createPexipPlugin(src);
     const self = this;
-
     const [instance] = resizer(
@@ -116,3 +81,3 @@ {
           dispatchEvent({
-            target: target,
+            target: element,
             type: PluginEvent.LOADED,
@@ -129,5 +94,3 @@ bubbles: true,
     this.#instance = instance;
-    this.#target = target;
     PluginInstance.#instances.push(this);
-
     queueMacroTask(() => {
@@ -151,3 +114,3 @@ // TODO: Better fallback handling.
       dispatchEvent({
-        target,
+        target: element,
         type: PluginEvent.CREATION,
@@ -255,4 +218,22 @@ bubbles: true,
 
+  // KEEP STABLE UNTIL February 2024
+  /** @private internal API */
+  get config(): ReturnType<typeof parsePluginConfiguration> {
+    warnPrivate({ name: "config", type: "property" });
+
+    return this.#config;
+  }
+
+  // TODO documentation!
+  /** Configuration of this plugin instance */
+  get configuration(): ReturnType<typeof parsePluginConfiguration>["config"] {
+    return this.#config.config;
+  }
+
+  // KEEP STABLE UNTIL February 2024
+  /** @private internal API */
   get hashConfig() {
-    return encodeConfigAsHash(this.config.config);
+    warnPrivate({ name: "hashConfig", type: "property" });
+
+    return encodeConfigAsHash(this.#config.config);
   }
@@ -263,8 +244,8 @@
 
-    searchParams.append("mergedConfig", encodeURIParameters(this.config.config));
-    searchParams.append("domConfig", encodeURIParameters(this.config.domConfig));
-    searchParams.append("hashConfig", encodeURIParameters(this.config.hashConfig));
-    searchParams.append("jsConfig", encodeURIParameters(this.config.jsConfig));
+    searchParams.append("mergedConfig", encodeURIParameters(this.#config.config));
+    searchParams.append("domConfig", encodeURIParameters(this.#config.domConfig));
+    searchParams.append("hashConfig", encodeURIParameters(this.#config.hashConfig));
+    searchParams.append("jsConfig", encodeURIParameters(this.#config.jsConfig));
 
-    const url = `${PluginInstance.url}/configuration-checker?${searchParams}`;
+    const url = `${PluginInstance.#url}/configuration-checker?${searchParams}`;
 
@@ -276,5 +257,3 @@ window.open(url, "plugin-debugger");
 
-  /**
-   * Destroy the instance
-   */
+  /** Destroy the instance */
   dispose = () => {
@@ -296,3 +275,7 @@ this.#status = "disposed";
 
+  // KEEP STABLE UNTIL February 2024
+  /** @private internal API */
   setCSSVariable = (name: string, value: string) => {
+    warnPrivate({ type: "function", name: "setCSSVariable" });
+
     this.#instance.iFrameResizer.sendMessage({
@@ -311,6 +294,4 @@ type: RequestEvent.CSS_VAR_UPDATE,
 
-  /**
-   * Add an event listener
-   */
   #listeners = new Set<EventListener>();
+  /** Add an event listener */
   addEventListener = (
@@ -335,5 +316,3 @@ typeOrListener?: PluginEvent | PluginEventListener,
 
-  /**
-   * The current intention
-   */
+  /** The current intention */
   get intention(): PluginIntent | undefined {
@@ -410,2 +389,4 @@ return this.#state?.config.intent;
 
+  // KEEP STABLE UNTIL February 2024
+  /** @private internal API */
   static get config(): ReturnType<typeof parsePluginConfiguration> | undefined {
@@ -415,2 +396,4 @@ return PluginInstance.getInstance(0)?.config;
 
+  // KEEP STABLE UNTIL February 2024
+  /** @private internal API */
   static get hashConfig() {
@@ -426,6 +409,12 @@ return PluginInstance.getInstance(0)?.hashConfig;
 
+  // KEEP STABLE UNTIL February 2024
+  /** @private internal API */
   static get url() {
+    warnPrivate({ type: "property", name: "url" });
+
     return PluginInstance.#url;
   }
 
+  // KEEP STABLE UNTIL February 2024
+  /** @private internal API */
   static setEnterpriseUrl = (url: string) => {
@@ -571,1 +560,7 @@ PluginInstance.#url = url;
 }
+
+function warnPrivate({ name, type }: { name: string; type: "property" | "function" }) {
+  logger.warn(
+    `The ${type} "${name}" is intended for debugging purposes only and might be changed at any time without notice. Its use in production is strongly discouraged and not supported`,
+  );
+}

typings/PluginInstance.d.ts

@@ -8,18 +8,18 @@ import { parsePluginConfiguration } from "@pexip-engage-public/plugin-configuration-parser";
     #private;
-    readonly fallbackHTML: string;
+    constructor(element: unknown, options?: unknown);
+    /** @private internal API */
     get config(): ReturnType<typeof parsePluginConfiguration>;
-    readonly configuration: ReturnType<typeof parsePluginConfiguration>["config"];
-    constructor(target: unknown, options?: unknown);
+    /** Configuration of this plugin instance */
+    get configuration(): ReturnType<typeof parsePluginConfiguration>["config"];
+    /** @private internal API */
     get hashConfig(): string;
     openDebugger: () => string;
-    /**
-     * Destroy the instance
-     */
+    /** Destroy the instance */
     dispose: () => void;
+    /** @private internal API */
     setCSSVariable: (name: string, value: string) => void;
     setCustomCSS: (css: string) => void;
+    /** Add an event listener */
     addEventListener: (typeOrListener?: PluginEvent | PluginEventListener, cb?: PluginEventListener) => void;
-    /**
-     * The current intention
-     */
+    /** The current intention */
     get intention(): PluginIntent | undefined;
@@ -117,6 +117,10 @@ get appointment(): {
     static get intention(): "schedule" | "reschedule" | "invite" | "edit" | "cancel" | "complete" | undefined;
+    /** @private internal API */
     static get config(): ReturnType<typeof parsePluginConfiguration> | undefined;
+    /** @private internal API */
     static get hashConfig(): string | undefined;
     static openDebugger(): string | undefined;
+    /** @private internal API */
     static get url(): string;
+    /** @private internal API */
     static setEnterpriseUrl: (url: string) => void;
@@ -123,0 +127,0 @@ static getInstance: (num: unknown) => PluginInstance | undefined;

No alert changes

Improved metrics

Total package byte prevSize

110275

increased by7.51%

Number of package files

17

increased by21.43%

Lines of code

1530

increased by6.1%

Dependency changes

• + Added@pexip-engage-public/plugin-configuration@1.2.0-canary-20230927163206(transitive)

• + Added@pexip-engage-public/plugin-configuration-parser@1.2.0-canary-20230927163206(transitive)

• + Added@pexip-engage-public/plugin-events@1.0.28-canary-20230927163206(transitive)

• + Added@pexip-engage-public/plugin-state@1.2.0-canary-20230927163206(transitive)

• + Addedskedify-types@0.5.0-canary-20230927163206(transitive)

• - Removed@pexip-engage-public/plugin-configuration@1.1.2(transitive)

• - Removed@pexip-engage-public/plugin-configuration-parser@1.1.20(transitive)

• - Removed@pexip-engage-public/plugin-events@1.0.27-canary-20230927094645(transitive)

• - Removed@pexip-engage-public/plugin-state@1.1.7(transitive)

• - Removedskedify-types@0.4.15(transitive)

• Updated@pexip-engage-public/plugin-configuration-parser@1.2.0-canary-20230927163206

• Updated@pexip-engage-public/plugin-events@1.0.28-canary-20230927163206

• Updated@pexip-engage-public/plugin-state@1.2.0-canary-20230927163206