@croct/plug-react 0.4.2 → 0.5.0-next.2

package/src/ssr-polyfills.test.ts

@@ -0,0 +1,65 @@
+import croct, {Configuration} from '@croct/plug';
+import {croct as croctPolyfill, isSsr} from './ssr-polyfills';
+import spyOn = jest.spyOn;
+
+describe('Croct polyfill (CSR)', () => {
+    beforeAll(() => {
+        jest.clearAllMocks();
+    });
+
+    const config: Configuration = {appId: '00000000-0000-0000-0000-000000000000'};
+
+    it('should delay unplugging to avoid reconnections', async () => {
+        jest.useFakeTimers();
+
+        const unplug = spyOn(croct, 'unplug');
+
+        const plug = spyOn(croct, 'plug');
+
+        croctPolyfill.plug(config);
+
+        expect(plug).toHaveBeenCalledTimes(1);
+
+        // First attempt: cancelling
+
+        const firstAttempt = croctPolyfill.unplug();
+
+        expect(unplug).not.toHaveBeenCalled();
+
+        croctPolyfill.plug(config);
+
+        jest.runOnlyPendingTimers();
+
+        await expect(firstAttempt).rejects.toThrow('Unplug cancelled.');
+
+        expect(unplug).not.toHaveBeenCalled();
+
+        // Second attempt: failing
+
+        unplug.mockRejectedValueOnce(new Error('Unplug failed.'));
+
+        const secondAttempt = croct.unplug();
+
+        jest.runOnlyPendingTimers();
+
+        await expect(secondAttempt).rejects.toThrow('Unplug failed.');
+
+        // Third attempt: succeeding
+
+        unplug.mockResolvedValueOnce();
+
+        const thirdAttempt = croct.unplug();
+
+        jest.runOnlyPendingTimers();
+
+        await expect(thirdAttempt).resolves.toBeUndefined();
+
+        expect(unplug).toHaveBeenCalledTimes(2);
+    });
+});
+
+describe('isSsr', () => {
+    it('should always return false', () => {
+        expect(isSsr()).toBe(false);
+    });
+});

package/src/ssr-polyfills.ts

@@ -0,0 +1,68 @@
+import csrPlug, {Plug} from '@croct/plug';
+
+export function isSsr(): boolean {
+    return typeof window === 'undefined'
+        || typeof window.document === 'undefined'
+        || typeof window.document.createElement === 'undefined';
+}
+
+export const croct: Plug = !isSsr()
+    ? (function factory(): Plug {
+        let timeoutId: ReturnType<typeof setTimeout>|null = null;
+        let resolveCallback: () => void;
+        let rejectCallback: (reason: any) => void;
+
+        return new Proxy(csrPlug, {
+            get: function getProperty(target, property: keyof Plug): any {
+                switch (property) {
+                    case 'plug':
+                        if (timeoutId !== null) {
+                            clearTimeout(timeoutId);
+                            timeoutId = null;
+                            rejectCallback?.(new Error('Unplug cancelled.'));
+                        }
+
+                        break;
+
+                    case 'unplug':
+                        return () => {
+                            // Delay unplugging to avoid reconnections between remounts (e.g. strict mode).
+                            // It can be problematic when aiming to replug the SDK with a different configuration.
+                            // However, since it is an unusual use case and there is a log message to warn about
+                            // the plugin being already plugged, the trade-off is worth it.
+                            timeoutId = setTimeout(() => target.unplug().then(resolveCallback, rejectCallback), 100);
+
+                            return new Promise<void>((resolve, reject) => {
+                                resolveCallback = resolve;
+                                rejectCallback = reject;
+                            });
+                        };
+                }
+
+                return target[property];
+            },
+        });
+    }())
+    : new Proxy(csrPlug, {
+        get: function getProperty(_, property: keyof Plug): any {
+            switch (property) {
+                case 'initialized':
+                    return false;
+
+                case 'plug':
+                    return () => {
+                        // no-op
+                    };
+
+                case 'unplug':
+                    return () => Promise.resolve();
+
+                default:
+                    throw new Error(
+                        `Property croct.${String(property)} is not supported on server-side (SSR). `
+                        + 'Consider refactoring  the logic as a side-effect (useEffect) or a client-side callback '
+                        + '(onClick, onChange, etc).',
+                    );
+            }
+        },
+    });

package/ssr-polyfills.d.ts

@@ -1,3 +1,3 @@
-import { Plug } from '@croct/plug';
-export declare function isSsr(): boolean;
-export declare const croct: Plug;
+import { Plug } from '@croct/plug';
+export declare function isSsr(): boolean;
+export declare const croct: Plug;

package/ssr-polyfills.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.croct = exports.isSsr = void 0;
+const plug_1 = __importDefault(require("@croct/plug"));
+function isSsr() {
+    return typeof window === 'undefined'
+        || typeof window.document === 'undefined'
+        || typeof window.document.createElement === 'undefined';
+}
+exports.isSsr = isSsr;
+exports.croct = !isSsr()
+    ? (function factory() {
+        let timeoutId = null;
+        let resolveCallback;
+        let rejectCallback;
+        return new Proxy(plug_1.default, {
+            get: function getProperty(target, property) {
+                switch (property) {
+                    case 'plug':
+                        if (timeoutId !== null) {
+                            clearTimeout(timeoutId);
+                            timeoutId = null;
+                            rejectCallback === null || rejectCallback === void 0 ? void 0 : rejectCallback(new Error('Unplug cancelled.'));
+                        }
+                        break;
+                    case 'unplug':
+                        return () => {
+                            // Delay unplugging to avoid reconnections between remounts (e.g. strict mode).
+                            // It can be problematic when aiming to replug the SDK with a different configuration.
+                            // However, since it is an unusual use case and there is a log message to warn about
+                            // the plugin being already plugged, the trade-off is worth it.
+                            timeoutId = setTimeout(() => target.unplug().then(resolveCallback, rejectCallback), 100);
+                            return new Promise((resolve, reject) => {
+                                resolveCallback = resolve;
+                                rejectCallback = reject;
+                            });
+                        };
+                }
+                return target[property];
+            },
+        });
+    }())
+    : new Proxy(plug_1.default, {
+        get: function getProperty(_, property) {
+            switch (property) {
+                case 'initialized':
+                    return false;
+                case 'plug':
+                    return () => {
+                        // no-op
+                    };
+                case 'unplug':
+                    return () => Promise.resolve();
+                default:
+                    throw new Error(`Property croct.${String(property)} is not supported on server-side (SSR). `
+                        + 'Consider refactoring  the logic as a side-effect (useEffect) or a client-side callback '
+                        + '(onClick, onChange, etc).');
+            }
+        },
+    });
+//# sourceMappingURL=ssr-polyfills.js.map

package/ssr-polyfills.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr-polyfills.js","sourceRoot":"","sources":["src/ssr-polyfills.ts"],"names":[],"mappings":";;;;;;AAAA,uDAA0C;AAE1C,SAAgB,KAAK;IACjB,OAAO,OAAO,MAAM,KAAK,WAAW;WAC7B,OAAO,MAAM,CAAC,QAAQ,KAAK,WAAW;WACtC,OAAO,MAAM,CAAC,QAAQ,CAAC,aAAa,KAAK,WAAW,CAAC;AAChE,CAAC;AAJD,sBAIC;AAEY,QAAA,KAAK,GAAS,CAAC,KAAK,EAAE;IAC/B,CAAC,CAAC,CAAC,SAAS,OAAO;QACf,IAAI,SAAS,GAAuC,IAAI,CAAC;QACzD,IAAI,eAA2B,CAAC;QAChC,IAAI,cAAqC,CAAC;QAE1C,OAAO,IAAI,KAAK,CAAC,cAAO,EAAE;YACtB,GAAG,EAAE,SAAS,WAAW,CAAC,MAAM,EAAE,QAAoB;gBAClD,QAAQ,QAAQ,EAAE;oBACd,KAAK,MAAM;wBACP,IAAI,SAAS,KAAK,IAAI,EAAE;4BACpB,YAAY,CAAC,SAAS,CAAC,CAAC;4BACxB,SAAS,GAAG,IAAI,CAAC;4BACjB,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC;yBACpD;wBAED,MAAM;oBAEV,KAAK,QAAQ;wBACT,OAAO,GAAG,EAAE;4BACR,+EAA+E;4BAC/E,sFAAsF;4BACtF,oFAAoF;4BACpF,+DAA+D;4BAC/D,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC,EAAE,GAAG,CAAC,CAAC;4BAEzF,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;gCACzC,eAAe,GAAG,OAAO,CAAC;gCAC1B,cAAc,GAAG,MAAM,CAAC;4BAC5B,CAAC,CAAC,CAAC;wBACP,CAAC,CAAC;iBACT;gBAED,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAC;YAC5B,CAAC;SACJ,CAAC,CAAC;IACP,CAAC,EAAE,CAAC;IACJ,CAAC,CAAC,IAAI,KAAK,CAAC,cAAO,EAAE;QACjB,GAAG,EAAE,SAAS,WAAW,CAAC,CAAC,EAAE,QAAoB;YAC7C,QAAQ,QAAQ,EAAE;gBACd,KAAK,aAAa;oBACd,OAAO,KAAK,CAAC;gBAEjB,KAAK,MAAM;oBACP,OAAO,GAAG,EAAE;wBACR,QAAQ;oBACZ,CAAC,CAAC;gBAEN,KAAK,QAAQ;oBACT,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;gBAEnC;oBACI,MAAM,IAAI,KAAK,CACX,kBAAkB,MAAM,CAAC,QAAQ,CAAC,0CAA0C;0BAC1E,yFAAyF;0BACzF,2BAA2B,CAChC,CAAC;aACT;QACL,CAAC;KACJ,CAAC,CAAC"}

package/CroctProvider.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';

package/components/Personalization/index.d.test.d.ts

@@ -1 +0,0 @@
-export {};

package/components/Personalization/index.stories.d.ts

@@ -1,7 +0,0 @@
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { PersonalizationProps } from './index';
-declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
-export default _default;
-export declare const WithSuspense: Story<Omit<PersonalizationProps<string>, 'expression'>>;
-export declare const WithInitialState: Story<Omit<PersonalizationProps<string, null>, 'expression'>>;
-export declare const WithFallbackState: Story<Omit<PersonalizationProps<string>, 'expression'>>;

package/components/Personalization/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/components/Slot/index.d.test.d.ts

@@ -1 +0,0 @@
-export {};

package/components/Slot/index.stories.d.ts

@@ -1,17 +0,0 @@
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { SlotProps } from './index';
-declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
-export default _default;
-declare type HomeBannerProps = {
-    loading?: true;
-    title: string;
-    subtitle: string;
-    cta: {
-        label: string;
-        link: string;
-    };
-};
-declare type HomeBannerSlotProps = SlotProps<HomeBannerProps>;
-export declare const WithSuspense: Story<HomeBannerSlotProps>;
-export declare const WithInitialState: Story<HomeBannerSlotProps>;
-export declare const WithFallbackState: Story<HomeBannerSlotProps>;

package/components/Slot/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/hooks/Cache.test.d.ts

@@ -1 +0,0 @@
-export {};

package/hooks/useContent.d.test.d.ts

@@ -1 +0,0 @@
-export {};

package/hooks/useContent.ssr.test.d.ts

@@ -1 +0,0 @@
-export {};

package/hooks/useContent.stories.d.ts

@@ -1,19 +0,0 @@
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { UseContentOptions } from './useContent';
-declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
-export default _default;
-declare type HomeBannerProps = {
-    loading?: true;
-    title: string;
-    subtitle: string;
-    cta: {
-        label: string;
-        link: string;
-    };
-};
-declare type HeroOptions = UseContentOptions<HomeBannerProps, HomeBannerProps> & {
-    slotId?: 'home-banner';
-};
-export declare const WithSuspense: Story<HeroOptions>;
-export declare const WithInitialState: Story<HeroOptions>;
-export declare const WithFallbackState: Story<HeroOptions>;

package/hooks/useContent.test.d.ts

@@ -1 +0,0 @@
-export {};

package/hooks/useCroct.ssr.test.d.ts

@@ -1 +0,0 @@
-export {};

package/hooks/useCroct.test.d.ts

@@ -1 +0,0 @@
-export {};

package/hooks/useEvaluation.d.test.d.ts

@@ -1 +0,0 @@
-export {};

package/hooks/useEvaluation.ssr.test.d.ts

@@ -1 +0,0 @@
-export {};

package/hooks/useEvaluation.stories.d.ts

@@ -1,8 +0,0 @@
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { UseEvaluationOptions } from './useEvaluation';
-declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
-export default _default;
-declare type PersonalizedNewsWidgetProps = UseEvaluationOptions<string | null, string>;
-export declare const WithSuspense: Story<PersonalizedNewsWidgetProps>;
-export declare const WithInitialState: Story<PersonalizedNewsWidgetProps>;
-export declare const WithFallbackState: Story<PersonalizedNewsWidgetProps>;

package/hooks/useEvaluation.test.d.ts

@@ -1 +0,0 @@
-export {};

package/hooks/useLoader.test.d.ts

@@ -1 +0,0 @@
-export {};

package/ssr-polyfills.ssr.test.d.ts

@@ -1 +0,0 @@
-export {};

package/ssr-polyfills.test.d.ts

@@ -1 +0,0 @@
-export {};