@dropins/tools 0.21.1 → 0.21.2-alpha2

package/lib/debounce.test.js

@@ -0,0 +1,40 @@
+import { debounce } from './debounce';
+jest.useFakeTimers();
+describe('debounce()', () => {
+    const mockCallback = jest.fn();
+    const debouncedFn = debounce(mockCallback, 500);
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    test('runs the callback', () => {
+        debouncedFn();
+        expect(mockCallback).not.toHaveBeenCalled();
+        jest.runAllTimers();
+        expect(mockCallback).toHaveBeenCalledTimes(1);
+    });
+    test('runs the callback after a set amount of time and not before', () => {
+        debouncedFn();
+        jest.advanceTimersByTime(250);
+        expect(mockCallback).not.toHaveBeenCalled();
+        jest.advanceTimersByTime(250);
+        expect(mockCallback).toHaveBeenCalledTimes(1);
+    });
+    test('does not run callback on multiple calls within a short period', () => {
+        // Initial call
+        debouncedFn();
+        jest.advanceTimersByTime(250);
+        expect(mockCallback).not.toHaveBeenCalled();
+        // Second call
+        debouncedFn();
+        jest.advanceTimersByTime(250);
+        expect(mockCallback).not.toHaveBeenCalled();
+        // Third call
+        debouncedFn();
+        jest.advanceTimersByTime(250);
+        expect(mockCallback).not.toHaveBeenCalled();
+        // Last call then exceed timeout - callback should only have been called once
+        debouncedFn();
+        jest.advanceTimersByTime(500);
+        expect(mockCallback).toHaveBeenCalledTimes(1);
+    });
+});

package/lib/deepmerge.d.ts

@@ -0,0 +1,2 @@
+export { default as deepmerge } from 'deepmerge';
+//# sourceMappingURL=deepmerge.d.ts.map

package/lib/deepmerge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deepmerge.d.ts","sourceRoot":"","sources":["../../src/lib/deepmerge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,WAAW,CAAC"}

package/lib/deepmerge.js

@@ -0,0 +1 @@
+export { default as deepmerge } from 'deepmerge';

package/lib/form-values.d.ts

@@ -0,0 +1,5 @@
+export declare const getFormValues: (form: HTMLFormElement) => {
+    [k: string]: any;
+};
+export declare const getFormErrors: (form: HTMLFormElement) => {};
+//# sourceMappingURL=form-values.d.ts.map

package/lib/form-values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-values.d.ts","sourceRoot":"","sources":["../../src/lib/form-values.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,SAAU,eAAe;;CAIlD,CAAC;AAEF,eAAO,MAAM,aAAa,SAAU,eAAe,OAelD,CAAC"}

package/lib/form-values.js

@@ -0,0 +1,17 @@
+export const getFormValues = (form) => {
+    const formData = new FormData(form);
+    const result = Object.fromEntries(formData);
+    return result;
+};
+export const getFormErrors = (form) => {
+    const formData = new FormData(form);
+    const data = Object.fromEntries(formData);
+    const result = Object.entries(data).reduce((result, [key]) => {
+        // @ts-ignore
+        const field = form.elements[key];
+        return field?.validationMessage
+            ? { ...result, [key]: field.validationMessage }
+            : { ...result };
+    }, {});
+    return result;
+};

package/lib/form-values.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=form-values.test.d.ts.map

package/lib/form-values.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-values.test.d.ts","sourceRoot":"","sources":["../../src/lib/form-values.test.tsx"],"names":[],"mappings":""}

package/lib/form-values.test.jsx

@@ -0,0 +1,29 @@
+import { render } from '@adobe/elsie/lib/tests';
+import { getFormValues, getFormErrors } from './form-values';
+describe('form-values()', () => {
+    test('getFormValues()', () => {
+        const { container } = render(<form>
+        <input name="foo" required value="Foo"/>
+        <input name="bar" required value="Bar"/>
+      </form>);
+        const formElement = container.querySelector('form');
+        const values = getFormValues(formElement);
+        expect(values).toEqual({ bar: 'Bar', foo: 'Foo' });
+    });
+    test('getFormErrors()', () => {
+        const { container } = render(<form>
+        <input name="foo" required value="Foo"/>
+        <input name="bar" required/>
+        <input name="age" type="number" value="uno"/>
+        <input name="website" type="url" value="url"/>
+        <input name="e-mail" type="email" value="email@"/>
+      </form>);
+        const formElement = container.querySelector('form');
+        const errors = getFormErrors(formElement);
+        expect(errors).toEqual({
+            bar: 'Constraints not satisfied',
+            website: 'Constraints not satisfied',
+            'e-mail': 'Constraints not satisfied',
+        });
+    });
+});

package/lib/i18n.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Convert locale from Magento standard to react-intl BCP 47 language tag
+ *
+ * @param {string} locale - A locale (e.g. `fr_FR`).
+ * @returns {string} A BCP 47 language tag (e.g. `fr-FR`).
+ */
+export declare const toLanguageTag: (locale: string) => string;
+//# sourceMappingURL=i18n.d.ts.map

package/lib/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/lib/i18n.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,aAAa,WAAY,MAAM,WAE3C,CAAC"}

package/lib/i18n.js

@@ -0,0 +1,9 @@
+/**
+ * Convert locale from Magento standard to react-intl BCP 47 language tag
+ *
+ * @param {string} locale - A locale (e.g. `fr_FR`).
+ * @returns {string} A BCP 47 language tag (e.g. `fr-FR`).
+ */
+export const toLanguageTag = (locale) => {
+    return locale.replace('_', '-');
+};

package/lib/i18n.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=i18n.test.d.ts.map

package/lib/i18n.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.test.d.ts","sourceRoot":"","sources":["../../src/lib/i18n.test.tsx"],"names":[],"mappings":""}

package/lib/i18n.test.jsx

@@ -0,0 +1,8 @@
+import { toLanguageTag } from './i18n';
+describe('i18n', () => {
+    test('locale is transformed to language tag format', () => {
+        const magentoLocale = 'en_US';
+        const languageTag = toLanguageTag(magentoLocale);
+        expect(languageTag).toBe('en-US');
+    });
+});

package/lib/image-params-keymap.d.ts

@@ -0,0 +1,4 @@
+export declare const setImageParamsKeyMap: (value: typeof this._map) => void, getImageParamsKeyMap: () => {
+    [key: string]: string;
+} | undefined;
+//# sourceMappingURL=image-params-keymap.d.ts.map

package/lib/image-params-keymap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-params-keymap.d.ts","sourceRoot":"","sources":["../../src/lib/image-params-keymap.ts"],"names":[],"mappings":"AAuBA,eAAO,MAAgB,oBAAoB,UAVrB,OAAO,IAAI,CAAC,IAAI,WAUe,oBAAoB;;aACpD,CAAC"}

package/lib/image-params-keymap.js

@@ -0,0 +1,19 @@
+class ImageParamsKeyMap {
+    _map;
+    get map() {
+        return this._map;
+    }
+    set map(value) {
+        this._map = value;
+    }
+    getMethods() {
+        return {
+            setMap: (value) => {
+                this.map = value;
+            },
+            getMap: () => this.map,
+        };
+    }
+}
+const keyMap = new ImageParamsKeyMap();
+export const { setMap: setImageParamsKeyMap, getMap: getImageParamsKeyMap } = keyMap.getMethods();

package/lib/image-params-keymap.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=image-params-keymap.test.d.ts.map

package/lib/image-params-keymap.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-params-keymap.test.d.ts","sourceRoot":"","sources":["../../src/lib/image-params-keymap.test.ts"],"names":[],"mappings":""}

package/lib/image-params-keymap.test.js

@@ -0,0 +1,7 @@
+import { setImageParamsKeyMap, getImageParamsKeyMap, } from './image-params-keymap';
+describe('ImageParamsKeyMap', () => {
+    test('setImageParamsKeyMap() should set the map and getImageParamsKeyMap() should get the map', () => {
+        setImageParamsKeyMap({ width: 'w' });
+        expect(getImageParamsKeyMap()).toEqual({ width: 'w' });
+    });
+});

package/lib/index.d.ts

@@ -0,0 +1,14 @@
+export * from '@adobe/elsie/lib/form-values';
+export * from '@adobe/elsie/lib/classes';
+export * from '@adobe/elsie/lib/deepmerge';
+export * from '@adobe/elsie/lib/debounce';
+export * from '@adobe/elsie/lib/resolve-image';
+export * from '@adobe/elsie/lib/render';
+export * from '@adobe/elsie/lib/i18n';
+export * from '@adobe/elsie/lib/initializer';
+export * from '@adobe/elsie/lib/config';
+export * from '@adobe/elsie/lib/types';
+export * from '@adobe/elsie/lib/slot';
+export * from '@adobe/elsie/lib/vcomponent';
+export * from '@adobe/elsie/lib/image-params-keymap';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sCAAsC,CAAC"}

package/lib/index.js

@@ -0,0 +1,13 @@
+export * from '@adobe/elsie/lib/form-values';
+export * from '@adobe/elsie/lib/classes';
+export * from '@adobe/elsie/lib/deepmerge';
+export * from '@adobe/elsie/lib/debounce';
+export * from '@adobe/elsie/lib/resolve-image';
+export * from '@adobe/elsie/lib/render';
+export * from '@adobe/elsie/lib/i18n';
+export * from '@adobe/elsie/lib/initializer';
+export * from '@adobe/elsie/lib/config';
+export * from '@adobe/elsie/lib/types';
+export * from '@adobe/elsie/lib/slot';
+export * from '@adobe/elsie/lib/vcomponent';
+export * from '@adobe/elsie/lib/image-params-keymap';

package/lib/initializer.d.ts

@@ -0,0 +1,78 @@
+import { Config } from '@adobe/elsie/lib';
+type Listener = {
+    off(): void;
+};
+type Listeners<T> = (config?: T) => Array<Listener | undefined>;
+type Init<T> = (config?: T) => Promise<void>;
+type Options<T> = {
+    init: Init<T>;
+    listeners: Listeners<T>;
+};
+/**
+ * `Initializer` is a class that represents an initializer.
+ * An initializer is responsible for setting up event listeners and initializing a module.
+ *
+ * @class
+ *
+ * @property {Function} listeners - A method that accepts a config object and returns an array of listeners.
+ * @property {Function} init - A method that initializes the module. It accepts an options object.
+ * @property {Config} config - A Config object that stores the configuration for the module.
+ *
+ * @method constructor - Constructs a new Initializer. Accepts an options object with `init` and `listeners` properties.
+ */
+export declare class Initializer<T> {
+    private _listeners;
+    listeners: Listeners<T>;
+    init: Init<T>;
+    config: Config<T>;
+    /**
+     * Constructs a new Initializer.
+     *
+     * @param {Object} options - The options for the Initializer.
+     * @param {Function} options.listeners - A function that accepts a config object and returns an array of listeners.
+     * @param {Function} options.init - A function that initializes the module. It accepts an options object.
+     */
+    constructor({ init, listeners }: Options<T>);
+}
+type Initializers = [Initializer<any>, {
+    [key: string]: any;
+} | undefined][];
+/**
+ * Class representing initializers.
+ *
+ * @class
+ *
+ * @method register - Registers a new initializer. If the initializers have already been mounted, it also immediately binds the event listeners and initializes the API for the new initializer.
+ * @method mount - Mounts all registered initializers. This involves binding the event listeners and initializing the APIs for each initializer, in that order.
+ * @method setImageParamKeys - Sets the image parameter keys. These keys are used when initializing the APIs for the initializers.
+ */
+export declare class initializers {
+    static _initializers: Initializers;
+    static _mounted: boolean;
+    static _imageParamsKeyMap: {
+        [key: string]: string;
+    } | undefined;
+    /**
+     * Registers a new initializer.
+     *
+     * @param initializer - The initializer to register. This should be an object with `listeners` and `init` methods.
+     * @param options - An optional object with additional options. These options are passed to the `listeners` and `init` methods of the initializer.
+     */
+    static register(initializer: Initializer<any>, options?: {
+        [key: string]: any;
+    }): void;
+    /**
+     * Mounts all registered initializers.
+     */
+    static mount(): void;
+    /**
+     * Sets the image parameter keys.
+     *
+     * @param params - An object mapping keys to values.
+     */
+    static setImageParamKeys(params: {
+        [key: string]: any;
+    }): void;
+}
+export {};
+//# sourceMappingURL=initializer.d.ts.map

package/lib/initializer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"initializer.d.ts","sourceRoot":"","sources":["../../src/lib/initializer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAwB,MAAM,kBAAkB,CAAC;AAEhE,KAAK,QAAQ,GAAG;IAAE,GAAG,IAAI,IAAI,CAAA;CAAE,CAAC;AAEhC,KAAK,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,KAAK,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAC;AAEhE,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AAE7C,KAAK,OAAO,CAAC,CAAC,IAAI;IAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAE7D;;;;;;;;;;;GAWG;AAEH,qBAAa,WAAW,CAAC,CAAC;IACxB,OAAO,CAAC,UAAU,CAAkB;IACpC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACxB,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,MAAM,YAA4B;IAElC;;;;;;OAMG;gBACS,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC;CAe5C;AAED,KAAK,YAAY,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG,SAAS,CAAC,EAAE,CAAC;AAE7E;;;;;;;;GAQG;AACH,qBAAa,YAAY;IACvB,MAAM,CAAC,aAAa,EAAE,YAAY,CAAM;IACxC,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAS;IACjC,MAAM,CAAC,kBAAkB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,SAAS,CAAa;IAE7E;;;;;OAKG;IACH,MAAM,CAAC,QAAQ,CACb,WAAW,EAAE,WAAW,CAAC,GAAG,CAAC,EAC7B,OAAO,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE;IASlC;;OAEG;IACH,MAAM,CAAC,KAAK;IAiBZ;;;;OAIG;IACH,MAAM,CAAC,iBAAiB,CAAC,MAAM,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE;CAGxD"}

package/lib/initializer.js

@@ -0,0 +1,93 @@
+import { Config, setImageParamsKeyMap } from '@adobe/elsie/lib';
+/**
+ * `Initializer` is a class that represents an initializer.
+ * An initializer is responsible for setting up event listeners and initializing a module.
+ *
+ * @class
+ *
+ * @property {Function} listeners - A method that accepts a config object and returns an array of listeners.
+ * @property {Function} init - A method that initializes the module. It accepts an options object.
+ * @property {Config} config - A Config object that stores the configuration for the module.
+ *
+ * @method constructor - Constructs a new Initializer. Accepts an options object with `init` and `listeners` properties.
+ */
+export class Initializer {
+    _listeners = [];
+    listeners;
+    init;
+    config = new Config({});
+    /**
+     * Constructs a new Initializer.
+     *
+     * @param {Object} options - The options for the Initializer.
+     * @param {Function} options.listeners - A function that accepts a config object and returns an array of listeners.
+     * @param {Function} options.init - A function that initializes the module. It accepts an options object.
+     */
+    constructor({ init, listeners }) {
+        this.listeners = (config) => {
+            // Unbind existing listeners
+            this._listeners.forEach((listener) => listener.off());
+            // Bind new listeners
+            return (this._listeners = listeners(config));
+        };
+        this.init = (options) => {
+            const { imageParamsKeyMap, ...rest } = options;
+            this.config.setConfig({ ...this.config.getConfig(), ...rest });
+            setImageParamsKeyMap(imageParamsKeyMap);
+            return init(options);
+        };
+    }
+}
+/**
+ * Class representing initializers.
+ *
+ * @class
+ *
+ * @method register - Registers a new initializer. If the initializers have already been mounted, it also immediately binds the event listeners and initializes the API for the new initializer.
+ * @method mount - Mounts all registered initializers. This involves binding the event listeners and initializing the APIs for each initializer, in that order.
+ * @method setImageParamKeys - Sets the image parameter keys. These keys are used when initializing the APIs for the initializers.
+ */
+export class initializers {
+    static _initializers = [];
+    static _mounted = false;
+    static _imageParamsKeyMap = undefined;
+    /**
+     * Registers a new initializer.
+     *
+     * @param initializer - The initializer to register. This should be an object with `listeners` and `init` methods.
+     * @param options - An optional object with additional options. These options are passed to the `listeners` and `init` methods of the initializer.
+     */
+    static register(initializer, options) {
+        if (initializers._mounted) {
+            initializer.listeners?.(options);
+            initializer.init?.(options);
+        }
+        initializers._initializers.push([initializer, options]);
+    }
+    /**
+     * Mounts all registered initializers.
+     */
+    static mount() {
+        initializers._mounted = true;
+        // In this specific order
+        // 1. Bind events
+        initializers._initializers?.forEach(([initializer, options]) => {
+            initializer.listeners?.(options);
+        });
+        // 2. Initialize APIs
+        initializers._initializers?.forEach(([initializer, options]) => {
+            initializer.init?.({
+                imageParamsKeyMap: initializers._imageParamsKeyMap,
+                ...options,
+            });
+        });
+    }
+    /**
+     * Sets the image parameter keys.
+     *
+     * @param params - An object mapping keys to values.
+     */
+    static setImageParamKeys(params) {
+        initializers._imageParamsKeyMap = params;
+    }
+}

package/lib/initializer.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=initializer.test.d.ts.map

package/lib/initializer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"initializer.test.d.ts","sourceRoot":"","sources":["../../src/lib/initializer.test.ts"],"names":[],"mappings":""}

package/lib/initializer.test.js

@@ -0,0 +1,64 @@
+import { setImageParamsKeyMap } from './image-params-keymap';
+import { Initializer, initializers } from './initializer';
+jest.mock('@adobe/elsie/lib/image-params-keymap', () => ({
+    setImageParamsKeyMap: jest.fn(),
+}));
+describe('Initializer', () => {
+    test('init', async () => {
+        const init = jest.fn();
+        const initializer = new Initializer({ init, listeners: () => [] });
+        await initializer.init({ foo: 'bar' });
+        expect(init).toHaveBeenCalledWith({ foo: 'bar' });
+    });
+    test('listeners', () => {
+        const listenerOffMock = jest.fn();
+        const listenerMock = { off: listenerOffMock };
+        const listeners = jest.fn().mockReturnValue([listenerMock]);
+        const initializer = new Initializer({
+            init: () => Promise.resolve(),
+            listeners,
+        });
+        initializer.listeners({ foo: 'bar' });
+        expect(listenerOffMock).not.toHaveBeenCalled();
+        expect(listeners).toHaveBeenCalledWith({ foo: 'bar' });
+        initializer.listeners({ foo: 'bar' });
+        // Make sure it unbinds existing listeners
+        expect(listenerOffMock).toHaveBeenCalledTimes(1);
+    });
+});
+describe('initializers', () => {
+    test('should call every init and listener on mount', async () => {
+        const init = jest.fn();
+        const listeners = jest.fn().mockReturnValue([]);
+        const initializer = new Initializer({ init, listeners });
+        initializers.register(initializer, { foo: 'bar' });
+        initializers.mount();
+        expect(init).toHaveBeenCalledWith({ foo: 'bar' });
+        expect(listeners).toHaveBeenCalledWith({ foo: 'bar' });
+    });
+    test('should call init and listeners if registered after mount', async () => {
+        const init = jest.fn();
+        const listeners = jest.fn().mockReturnValue([]);
+        const initializer = new Initializer({ init, listeners });
+        initializers.mount();
+        expect(init).not.toHaveBeenCalledWith({ foo: 'bar' });
+        expect(listeners).not.toHaveBeenCalledWith({ foo: 'bar' });
+        initializers.register(initializer, { foo: 'bar' });
+        expect(init).toHaveBeenCalledWith({ foo: 'bar' });
+        expect(listeners).toHaveBeenCalledWith({ foo: 'bar' });
+    });
+    describe('setImageParamKeys()', () => {
+        test('should pass imageParamKeys to keymap class', async () => {
+            const init = jest.fn();
+            const listeners = jest.fn().mockReturnValue([]);
+            const initializer = new Initializer({ init, listeners });
+            initializers.setImageParamKeys({ width: 'w' });
+            initializers.register(initializer, { foo: 'bar' });
+            initializers.mount();
+            expect(setImageParamsKeyMap).toHaveBeenCalledWith({
+                width: 'w',
+            });
+            expect(init).toHaveBeenCalledWith({ foo: 'bar' });
+        });
+    });
+});

package/lib/render.d.ts

@@ -0,0 +1,10 @@
+import { VNode } from 'preact';
+import { Container } from '@adobe/elsie/lib';
+export declare class Render {
+    private _provider;
+    constructor(provider: VNode<any>);
+    render<T>(Component: Container<T>, props: T): (rootElement: HTMLElement) => Promise<void>;
+    unmount(rootElement: HTMLElement): void;
+    toString<T>(Component: Container<T>, props: T, options?: T): Promise<string>;
+}
+//# sourceMappingURL=render.d.ts.map

package/lib/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/lib/render.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAc,MAAM,kBAAkB,CAAC;AAEzD,qBAAa,MAAM;IACjB,OAAO,CAAC,SAAS,CAAa;gBAElB,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC;IAIhC,MAAM,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,iBACd,WAAW;IAexC,OAAO,CAAC,WAAW,EAAE,WAAW;IAM1B,QAAQ,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC;CAajE"}

package/lib/render.jsx

@@ -0,0 +1,34 @@
+import { render } from 'preact';
+import renderToString from 'preact-render-to-string';
+import { VComponent } from '@adobe/elsie/lib';
+export class Render {
+    _provider;
+    constructor(provider) {
+        this._provider = provider;
+    }
+    render(Component, props) {
+        return async (rootElement) => {
+            if (!Component)
+                throw new Error('Component is not defined');
+            if (!rootElement)
+                throw new Error('Root element is not defined');
+            const initialData = (await Component.getInitialData?.(props)) ?? {};
+            render(<VComponent node={this._provider} {...this._provider.props}>
+          <Component {...props} initialData={initialData}/>
+        </VComponent>, rootElement);
+        };
+    }
+    unmount(rootElement) {
+        if (!rootElement)
+            throw new Error('Root element is not defined');
+        render(null, rootElement);
+    }
+    async toString(Component, props, options) {
+        if (!Component)
+            throw new Error('Component is not defined');
+        const initialData = (await Component.getInitialData?.(props)) ?? {};
+        return renderToString(<VComponent node={this._provider} {...this._provider.props}>
+        <Component {...props} initialData={initialData}/>
+      </VComponent>, {}, { ...options });
+    }
+}

package/lib/render.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=render.test.d.ts.map

package/lib/render.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.test.d.ts","sourceRoot":"","sources":["../../src/lib/render.test.tsx"],"names":[],"mappings":""}

package/lib/render.test.jsx

@@ -0,0 +1,70 @@
+import { Render } from './render';
+import { render } from 'preact';
+import renderToString from 'preact-render-to-string';
+import { VComponent } from '.';
+jest.mock('preact');
+jest.mock('preact-render-to-string');
+describe('Render', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    test('render', async () => {
+        const provider = new Render(<div />);
+        await provider.render(() => <span />, {})(document.createElement('div'));
+        expect(render).toHaveBeenCalled();
+    });
+    test('render without rootElement', async () => {
+        const provider = new Render(<div />);
+        //@ts-ignore
+        // eslint-disable-next-line jest/valid-expect
+        expect(provider.render(() => <span />)(null)).rejects.toThrowError('Root element is not defined');
+    });
+    test('render wihtout component', async () => {
+        const provider = new Render(<div />);
+        //@ts-ignore
+        // eslint-disable-next-line jest/valid-expect
+        expect(provider.render(null)(null)).rejects.toThrowError('Component is not defined');
+    });
+    test('unmount', async () => {
+        const provider = new Render(<div />);
+        const root = document.createElement('div');
+        provider.unmount(root);
+        expect(render).toHaveBeenCalledWith(null, root);
+    });
+    test('unmount without rootElement', async () => {
+        const provider = new Render(<div />);
+        //@ts-ignore
+        // eslint-disable-next-line jest/valid-expect
+        expect(() => provider.unmount()).toThrow('Root element is not defined');
+    });
+    test('toString', async () => {
+        const provider = new Render(<div />);
+        const ChildTestComponent = () => <span />;
+        await provider.toString(ChildTestComponent, {});
+        const newComponent = (<VComponent node={<div />}>
+        {(() => (<ChildTestComponent initialData={{}}/>))()}
+      </VComponent>);
+        // Remove the internal __v properties of components so they can be compared
+        const deepOmitInternalProperties = (obj) => {
+            if (Array.isArray(obj)) {
+                return obj.map(deepOmitInternalProperties);
+            }
+            else if (obj !== null && typeof obj === 'object') {
+                /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+                const { __v, ...rest } = obj;
+                Object.keys(rest).forEach((key) => {
+                    rest[key] = deepOmitInternalProperties(rest[key]);
+                });
+                return rest;
+            }
+            return obj;
+        };
+        expect(deepOmitInternalProperties(renderToString.mock.calls[0][0])).toEqual(deepOmitInternalProperties(newComponent));
+    });
+    test('toString without component', async () => {
+        const provider = new Render(<div />);
+        //@ts-ignore
+        // eslint-disable-next-line jest/valid-expect
+        expect(provider.toString(null)).rejects.toThrowError('Component is not defined');
+    });
+});

package/lib/resolve-image.d.ts

@@ -0,0 +1,10 @@
+export interface ResolveImageUrlOptions {
+    width: number;
+    height?: number;
+    auto?: string;
+    quality?: number;
+    crop?: boolean;
+    fit?: string;
+}
+export declare const generateSrcset: (imageURL: string, options: ResolveImageUrlOptions) => string | undefined;
+//# sourceMappingURL=resolve-image.d.ts.map

package/lib/resolve-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-image.d.ts","sourceRoot":"","sources":["../../src/lib/resolve-image.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAqCD,eAAO,MAAM,cAAc,aACf,MAAM,WACP,sBAAsB,uBAqBhC,CAAC"}