@dropins/tools 0.21.1 → 0.21.2-alpha2

package/lib/resolve-image.js

@@ -0,0 +1,57 @@
+import { getImageParamsKeyMap } from '@adobe/elsie/lib/';
+const BREAKPOINTS = {
+    medium: 768,
+    large: 1024,
+    xlarge: 1366,
+    xxlarge: 1920,
+};
+const resolveImageUrl = (url, _opts) => {
+    const [base, query] = url.split('?');
+    const params = new URLSearchParams(query);
+    const keyMapping = getImageParamsKeyMap();
+    let opts = {};
+    if (keyMapping && Object.keys(keyMapping).length > 0 && _opts) {
+        opts = Object.entries(_opts).reduce((acc, [key, value]) => {
+            const newKey = keyMapping[key];
+            if (newKey) {
+                acc[newKey] = value;
+            }
+            return acc;
+        }, {});
+    }
+    else {
+        opts = {
+            auto: 'webp',
+            quality: 80,
+            crop: false,
+            fit: 'cover',
+            ..._opts,
+        };
+    }
+    // Append image optimization parameters
+    Object.entries(opts).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+            params.set(key, String(value));
+        }
+    });
+    return `${base}?${params.toString()}`;
+};
+export const generateSrcset = (imageURL, options) => {
+    if (!imageURL || !options?.width)
+        return;
+    const generateSrcsetUrl = (options) => {
+        return resolveImageUrl(imageURL, {
+            ...options,
+        });
+    };
+    return Object.entries(BREAKPOINTS)
+        .map(([, value]) => {
+        // calculate breakpoints width
+        const relativeWidth = (options.width * value) / BREAKPOINTS.xxlarge;
+        return `${generateSrcsetUrl({
+            ...options,
+            width: relativeWidth,
+        })} ${value}w`;
+    })
+        .join(',\n');
+};

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

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

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

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

package/lib/resolve-image.test.jsx

@@ -0,0 +1,146 @@
+import { generateSrcset } from '@adobe/elsie/lib/resolve-image';
+import { getImageParamsKeyMap } from './image-params-keymap';
+jest.mock('@adobe/elsie/lib/image-params-keymap', () => ({
+    getImageParamsKeyMap: jest.fn(),
+}));
+const imageURL = 'http://example.com/image.jpeg';
+describe('resolve-image', () => {
+    beforeEach(() => {
+        getImageParamsKeyMap.mockReturnValue(undefined);
+    });
+    test('generateSrcset should return empty string if either of the arguments are falsey', () => {
+        expect(generateSrcset('', { width: 960 })).toBe(undefined);
+        // @ts-ignore
+        expect(generateSrcset(null, null)).toBe(undefined);
+        // @ts-ignore
+        expect(generateSrcset(undefined, undefined)).toBe(undefined);
+        expect(
+        // @ts-ignore
+        generateSrcset(imageURL, { width: 90, height: undefined, quality: null })).toMatchInlineSnapshot(`
+      "http://example.com/image.jpeg?auto=webp&crop=false&fit=cover&width=36 768w,
+      http://example.com/image.jpeg?auto=webp&crop=false&fit=cover&width=48 1024w,
+      http://example.com/image.jpeg?auto=webp&crop=false&fit=cover&width=64.03125 1366w,
+      http://example.com/image.jpeg?auto=webp&crop=false&fit=cover&width=90 1920w"
+    `);
+    });
+    test('generateSrcset should return srcset for all widths in imageWidths', () => {
+        const result = generateSrcset(imageURL, { width: 960 });
+        expect(result).toMatchInlineSnapshot(`
+      "http://example.com/image.jpeg?auto=webp&quality=80&crop=false&fit=cover&width=384 768w,
+      http://example.com/image.jpeg?auto=webp&quality=80&crop=false&fit=cover&width=512 1024w,
+      http://example.com/image.jpeg?auto=webp&quality=80&crop=false&fit=cover&width=683 1366w,
+      http://example.com/image.jpeg?auto=webp&quality=80&crop=false&fit=cover&width=960 1920w"
+    `);
+    });
+    test('resolveImageUrl should accept relative URL', () => {
+        const result = generateSrcset('/test.jpg', { width: 960 });
+        expect(result).toMatchInlineSnapshot(`
+      "/test.jpg?auto=webp&quality=80&crop=false&fit=cover&width=384 768w,
+      /test.jpg?auto=webp&quality=80&crop=false&fit=cover&width=512 1024w,
+      /test.jpg?auto=webp&quality=80&crop=false&fit=cover&width=683 1366w,
+      /test.jpg?auto=webp&quality=80&crop=false&fit=cover&width=960 1920w"
+    `);
+        const result2 = generateSrcset('//domain.com/test.jpg', { width: 960 });
+        expect(result2).toMatchInlineSnapshot(`
+      "//domain.com/test.jpg?auto=webp&quality=80&crop=false&fit=cover&width=384 768w,
+      //domain.com/test.jpg?auto=webp&quality=80&crop=false&fit=cover&width=512 1024w,
+      //domain.com/test.jpg?auto=webp&quality=80&crop=false&fit=cover&width=683 1366w,
+      //domain.com/test.jpg?auto=webp&quality=80&crop=false&fit=cover&width=960 1920w"
+    `);
+    });
+    describe('custom mappings', () => {
+        test('resolveImageUrl should apply custom key mapping when provided', () => {
+            getImageParamsKeyMap.mockReturnValue({
+                width: 'w',
+                quality: 'qual',
+                fit: 'f',
+                auto: 'a',
+                crop: 'cr',
+            });
+            const result = generateSrcset(imageURL, {
+                width: 960,
+                quality: 50,
+                fit: 'cover',
+                auto: 'webp',
+                crop: false,
+            });
+            expect(result).toMatchInlineSnapshot(`
+        "http://example.com/image.jpeg?w=384&qual=50&f=cover&a=webp&cr=false 768w,
+        http://example.com/image.jpeg?w=512&qual=50&f=cover&a=webp&cr=false 1024w,
+        http://example.com/image.jpeg?w=683&qual=50&f=cover&a=webp&cr=false 1366w,
+        http://example.com/image.jpeg?w=960&qual=50&f=cover&a=webp&cr=false 1920w"
+      `);
+        });
+        test('resolveImageUrl should ignore custom key mapping if key is not found in options', () => {
+            getImageParamsKeyMap.mockReturnValue({
+                width: 'w',
+                quality: 'qual',
+                fit: 'f',
+                auto: 'a',
+                crop: 'cr',
+                height: 'h',
+            });
+            const result = generateSrcset(imageURL, {
+                width: 960,
+                quality: 50,
+                fit: 'cover',
+                auto: 'webp',
+                crop: false,
+            });
+            expect(result).toMatchInlineSnapshot(`
+        "http://example.com/image.jpeg?w=384&qual=50&f=cover&a=webp&cr=false 768w,
+        http://example.com/image.jpeg?w=512&qual=50&f=cover&a=webp&cr=false 1024w,
+        http://example.com/image.jpeg?w=683&qual=50&f=cover&a=webp&cr=false 1366w,
+        http://example.com/image.jpeg?w=960&qual=50&f=cover&a=webp&cr=false 1920w"
+      `);
+        });
+        test('resolveImageUrl should ignore option if mapping is not provided', () => {
+            getImageParamsKeyMap.mockReturnValue({
+                width: 'w',
+                quality: 'qual',
+                fit: 'f',
+                auto: 'a',
+            });
+            const result = generateSrcset(imageURL, {
+                width: 960,
+                quality: 50,
+                fit: 'cover',
+                auto: 'webp',
+                crop: false,
+            });
+            expect(result).toMatchInlineSnapshot(`
+        "http://example.com/image.jpeg?w=384&qual=50&f=cover&a=webp 768w,
+        http://example.com/image.jpeg?w=512&qual=50&f=cover&a=webp 1024w,
+        http://example.com/image.jpeg?w=683&qual=50&f=cover&a=webp 1366w,
+        http://example.com/image.jpeg?w=960&qual=50&f=cover&a=webp 1920w"
+      `);
+        });
+        test('resolveImageUrl can support completely custom params', () => {
+            getImageParamsKeyMap.mockReturnValue({
+                width: 'width',
+                scale: 'scale',
+                crop: 'crop',
+                opacity: 'opacity',
+            });
+            const result = generateSrcset(imageURL, 
+            // @ts-ignore
+            { width: 960, scale: 2, crop: 'center', opacity: 75 });
+            expect(result).toMatchInlineSnapshot(`
+        "http://example.com/image.jpeg?width=384&scale=2&crop=center&opacity=75 768w,
+        http://example.com/image.jpeg?width=512&scale=2&crop=center&opacity=75 1024w,
+        http://example.com/image.jpeg?width=683&scale=2&crop=center&opacity=75 1366w,
+        http://example.com/image.jpeg?width=960&scale=2&crop=center&opacity=75 1920w"
+      `);
+        });
+        test('resolveImageUrl should use default mapping if custom mapping object is empty', () => {
+            getImageParamsKeyMap.mockReturnValue({});
+            const result = generateSrcset(imageURL, { width: 960 });
+            expect(result).toMatchInlineSnapshot(`
+      "http://example.com/image.jpeg?auto=webp&quality=80&crop=false&fit=cover&width=384 768w,
+      http://example.com/image.jpeg?auto=webp&quality=80&crop=false&fit=cover&width=512 1024w,
+      http://example.com/image.jpeg?auto=webp&quality=80&crop=false&fit=cover&width=683 1366w,
+      http://example.com/image.jpeg?auto=webp&quality=80&crop=false&fit=cover&width=960 1920w"
+      `);
+        });
+    });
+});

package/lib/slot.d.ts

@@ -0,0 +1,43 @@
+import { RefObject, VNode } from 'preact';
+import { StateUpdater } from 'preact/hooks';
+import { Lang } from '@adobe/elsie/i18n';
+import { HTMLAttributes } from 'preact/compat';
+type MutateElement = (elem: HTMLElement) => void;
+interface State {
+    get: (key: string) => void;
+    set: (key: string, value: any) => void;
+}
+interface SlotElement {
+    appendChild: MutateElement;
+    prependChild: MutateElement;
+    appendSibling: MutateElement;
+    prependSibling: MutateElement;
+}
+interface PrivateContext<T> {
+    _setProps: StateUpdater<{}>;
+    _registerMethod: (cb: (next: T & DefaultSlotContext<T>, state: State) => void) => void;
+    _htmlElementToVNode: (element: HTMLElement) => VNode;
+}
+interface DefaultSlotContext<T> extends PrivateContext<T> {
+    dictionary: Lang;
+    getSlotElement: (key: string) => SlotElement;
+    replaceWith: MutateElement;
+    appendChild: MutateElement;
+    prependChild: MutateElement;
+    appendSibling: MutateElement;
+    prependSibling: MutateElement;
+    onChange: (cb: (next: T & DefaultSlotContext<T>) => void) => void;
+}
+type Context<T> = T & ThisType<DefaultSlotContext<T>>;
+export type SlotProps<T = any> = (ctx: T & DefaultSlotContext<T>, element: HTMLDivElement | null) => void;
+export type SlotMethod<P = any> = (callback: (next: unknown, state: State) => P) => void;
+export declare function useSlot<K, V extends HTMLDivElement>(context?: Context<K>, callback?: SlotProps<K>, render?: Function): [RefObject<V>, Record<string, any>];
+interface SlotPropsComponent<T> extends Omit<HTMLAttributes<HTMLDivElement>, 'slot'> {
+    name: string;
+    slot?: SlotProps<T>;
+    context?: Context<T>;
+    render?: (props: Record<string, any>) => VNode | VNode[];
+}
+export declare function Slot<T>({ name, slot, context, children, render, ...props }: Readonly<SlotPropsComponent<T>>): import("preact").JSX.Element;
+export {};
+//# sourceMappingURL=slot.d.ts.map

package/lib/slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../src/lib/slot.tsx"],"names":[],"mappings":"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"}

package/lib/slot.jsx

@@ -0,0 +1,184 @@
+import { useContext, useState, useRef, useEffect, useMemo, useCallback, } from 'preact/hooks';
+import { IntlContext } from '@adobe/elsie/i18n';
+// Slot Hook
+export function useSlot(
+// @ts-ignore
+context = {}, callback, render) {
+    // HTML Element
+    const elementRef = useRef(null);
+    const loadedRef = useRef(false);
+    // Methods
+    const methodsRef = useRef([]);
+    // Children VNodes
+    const [props, _setProps] = useState({
+        children: [render?.({})],
+    });
+    // Attributes
+    const [_state, setState] = useState({});
+    const state = useMemo(() => ({
+        get: (key) => _state[key],
+        set: (key, value) => {
+            setState({ ...state, [key]: value });
+        },
+    }), [_state]);
+    /** Internationalization */
+    const { intl } = useContext(IntlContext);
+    // @ts-ignore
+    context.dictionary = intl.dictionary;
+    /** Privates */
+    // @ts-ignore
+    context._setProps = _setProps;
+    const _registerMethod = useCallback((callback) => {
+        if (typeof callback === 'function') {
+            methodsRef.current.push(callback);
+        }
+        else {
+            console.warn('Skipped: Invalid _registerMethod', callback);
+        }
+    }, []);
+    // @ts-ignore
+    context._registerMethod = _registerMethod;
+    const _htmlElementToVNode = useCallback((elem) => {
+        return (<div data-slot-html-element={elem.tagName.toLowerCase()} ref={(refElem) => {
+                refElem?.appendChild(elem);
+            }}/>);
+    }, []);
+    // @ts-ignore
+    context._htmlElementToVNode = _htmlElementToVNode;
+    /** Prebuilt Methods */
+    // @ts-ignore
+    context.getSlotElement = useCallback((key) => {
+        const element = document.querySelector(`[data-slot-key="${key}"]`);
+        if (!element)
+            return;
+        return {
+            appendChild: (elem) => {
+                element.appendChild(elem);
+            },
+            prependChild: (elem) => {
+                element.insertBefore(elem, element.firstChild);
+            },
+            appendSibling: (elem) => {
+                const parent = element.parentNode;
+                parent?.insertBefore(elem, element.nextSibling);
+            },
+            prependSibling: (elem) => {
+                const parent = element.parentNode;
+                parent?.insertBefore(elem, element);
+            },
+        };
+    }, []);
+    // @ts-ignore
+    context.onChange = useCallback((callback) => {
+        methodsRef.current.push(callback);
+    }, []);
+    // @ts-ignore
+    context.replaceWith = useCallback((elem) => {
+        // @ts-ignore
+        _registerMethod((next) => {
+            // @ts-ignore
+            const children = _htmlElementToVNode(elem);
+            next._setProps({ children: [children] });
+        });
+    }, [_htmlElementToVNode, _registerMethod]);
+    // @ts-ignore
+    context.appendChild = useCallback((elem) => {
+        // @ts-ignore
+        _registerMethod((next) => {
+            // @ts-ignore
+            const vnode = _htmlElementToVNode(elem);
+            next._setProps((prev) => {
+                return {
+                    ...prev,
+                    children: [...prev.children, vnode],
+                };
+            });
+        });
+    }, [_htmlElementToVNode, _registerMethod]);
+    // @ts-ignore
+    context.prependChild = useCallback((elem) => {
+        // @ts-ignore
+        _registerMethod((next) => {
+            // @ts-ignore
+            const vnode = _htmlElementToVNode(elem);
+            next._setProps((prev) => {
+                return {
+                    ...prev,
+                    children: [vnode, ...prev.children],
+                };
+            });
+        });
+    }, [_htmlElementToVNode, _registerMethod]);
+    // @ts-ignore
+    context.appendSibling = useCallback((elem) => {
+        // @ts-ignore
+        _registerMethod(() => {
+            const parent = elementRef.current?.parentNode;
+            parent?.insertBefore(elem, elementRef.current?.nextSibling ?? null);
+        });
+    }, [_registerMethod]);
+    // @ts-ignore
+    context.prependSibling = useCallback((elem) => {
+        // @ts-ignore
+        _registerMethod(() => {
+            const parent = elementRef.current?.parentNode;
+            parent?.insertBefore(elem, elementRef.current);
+        });
+    }, [_registerMethod]);
+    // Initialization
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!callback || !element)
+            return;
+        // Run callback
+        try {
+            callback(context, element);
+        }
+        catch (error) {
+            console.error(`Error in "${callback.name}" Slot callback`, error);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Lifecycles
+    useEffect(() => {
+        // Reset
+        _setProps({ children: [render?.(props)] });
+        // Run all registered methods
+        methodsRef.current.forEach((method) => {
+            method(context, state);
+        });
+        // Required to trigger re-render of render method
+        if (render?.name === 'render' && loadedRef.current === false) {
+            loadedRef.current = true;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [JSON.stringify(context), JSON.stringify(_state), loadedRef.current]);
+    return [elementRef, props];
+}
+export function Slot({ name, slot, context, children, render, ...props }) {
+    const [elementRef, slotProps] = useSlot(context, slot, render ?? (() => children));
+    useEffect(() => {
+        if (!name)
+            console.warn('Slot "name" is required');
+    }, [name]);
+    return (<div {...props} ref={elementRef} data-slot={name}>
+      {slotProps.children}
+    </div>);
+}
+// Debugger
+// @ts-ignore
+window.DROPINS = window.DROPINS || {};
+// @ts-ignore
+window.DROPINS.showSlots = async (state) => {
+    // cache state in session storage
+    window.sessionStorage.setItem('dropin-debugger--show-slots', state.toString());
+    document.body.classList.toggle('dropin-debugger--show-slots', state);
+    if (state) {
+        try {
+            await import('@adobe/elsie/components/UIProvider/debugger.css');
+        }
+        catch (error) { }
+    }
+};
+// @ts-ignore
+window.DROPINS.showSlots(window.sessionStorage.getItem('dropin-debugger--show-slots') === 'true');

package/lib/slot.test.d.ts

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

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

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