Initializer

import { Initializer } from '@adobe/elsie/lib';
// import { events } from '@adobe/event-bus';

type ConfigProps = {};

export const initialize = new Initializer<ConfigProps>({
  init: async (config) => {
    const defaultConfig = {};
    initialize.config.setConfig({ ...defaultConfig, ...config });
  },

  listeners: () => [
    // events.on('authenticated', (authenticated) => {
    //   console.log('authenticated', authenticated);
    // }),
  ],
});

export const config = initialize.config;

// Host Site
import { initializers } from '@dropins/elsie/initializer.js';
import { initialize as pkg } from 'my-domain-package/initializer.js';

// Register Packages
initializers.register(pkg, { ...config });

// Mount Initializers
window.addEventListener('load', initializers.mount);

setImageParamKeys(params)

The setImageParamKeys method is part of the initializers module in the @dropins/tools package. It allows you to set image parameters globally for all drop-ins that use the Image component.

Default Behavior

By default, Fastly parameters are used if setImageParamKeys is not called or if no parameters are provided.

Parameters

• params - { [key: string]: string | ((data: any) => [string, string]) }
  • An object of key-value pairs to map image parameters to their respective keys in the URL.
  • The value can be a string or a function that takes the parameter value as an argument and returns a tuple of the new key and transformed value.

Functionality

• If a parameter key is provided via setImageParamKeys, it is used in generating image URLs instead of the default Fastly parameters.
• If a parameter key is not provided via setImageParamKeys, it is omitted from the generated image URLs.
• If a mapped key is a function and it is not specified as a parameter in the Image component, it is called with null. It should return a tuple of the key and value.
• If a mapping callback is provided, the callback is called with the parameter value (if it exists) and should return a tuple of the new key and transformed value.
• If a mapping callback returns null, the parameter is omitted from the generated image URLs.

Usage

Call the setImageParamKeys() function before the register() and mount() functions in the application layer.

// Set global image parameters
initializers.setImageParamKeys({
  // Re-map the width parameter to imgWidth
  width: 'imgWidth',
  // Transform the quality parameter
  quality: (value) => ['imgQuality', value * 100],
  // Add an additional parameter to the image URL
  extraParam: () => ['extraParam', 'extraValue'],
});

// Register Initializers
initializers.register(pkg.initialize, {
  langDefinitions,
});

// Mount Initializers
initializers.mount();

Now, when a dropin uses the Image component to render an image with a width of 300 pixels and quality value of 0.8:

<Image
  loading={'lazy'}
  src={'https://example.com/image.jpg'}
  alt={'Example Image'}
  width="300"
  height="300"
  params={{ width: 300, quality: 0.8 }}
/>

It renders the following image element:

<img
  loading="lazy"
  src="https://example.com/image.jpg"
  srcset="https://example.com/image.jpg?imgWidth=300&imgQuality=80&extraParam=extraValue 768w, https://example.com/image.jpg?imgWidth=300&imgQuality=80&extraParam=extraValue 1024w, https://example.com/image.jpg?imgWidth=300&imgQuality=80&extraParam=extraValue 1366w, https://example.com/image.jpg?imgWidth=300&imgQuality=80&extraParam=extraValue 1920w"
  alt="Example Image"
  width="300"
  height="300"
/>

In this example, the width parameter is mapped to imgWidth and the value of the quality parameter is modified and mapped to imgQuality.