Update UMD config to merge packages

Proposed Changes

This PR updates the Webpack library configuration for the UDM module to use the option assign-properties. This will ensure that both, Hovercards and the Quick Editor package can use the Gravatar namespace while importing a UDM module.

Testing Instructions

Checkout this branch
Ensure node_modules are up to date by running npm install
Navigate to the hovercards folder and build the package: cd web/packages/hovercards && npm run build
Navigate to the quick-editor folder and build the package: cd web/packages/quick-editor && npm run build
Create an index.html with the following contents file under the directory: web/packages/:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./hovercards/dist/style.css" />
    <style>
        .gravatar-quick-editor, .gravatar-hovercards {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            margin-bottom: 60px;
        }

        img {
            border-radius: 50%;
        }

        button {
            padding: 8px 20px;
        }
    </style>
</head>
<body>
    <div class="gravatar-quick-editor">
        <h1>Gravatar Quick Editor</h1>
        <img
            class="avatar"
            alt="Avatar"
            src="https://1.gravatar.com/avatar/4f615f4811330c1883eb440d6621e7c2bb8e4bbb610f74e1159d2973a0aea99f?size=256"
        />
        <button id="edit-avatar">Edit Avatar</button>
    </div>
    <div class="gravatar-hovercards">
        <h1>Gravatar Hovercards</h1>
        <img
            src="https://www.gravatar.com/avatar/33252cd1f33526af53580fcb1736172f06e6716f32afdd1be19ec3096d15dea5?s=60&d=retro&r=g"
            width="60"
            height="60"
        />
        <img
            src="https://www.gravatar.com/avatar/c3bb8d897bb538896708195dd9eb162f585654611c50a3a1c9a16a7b64f33270"
            width="60"
            height="60"
        />
        <div id="attr" data-gravatar-hash="c3bb8d897bb538896708195dd9eb162f585654611c50a3a1c9a16a7b64f33270?s=60&d=retro&r=g">@WellyTest</div>
        <div id="inline-hovercard"></div>
    </div>
    <script src="./hovercards/dist/index.umd.js"></script>
    <script src="./quick-editor/dist/index.umd.js"></script>
    <script type="text/javascript">
        window.addEventListener( 'DOMContentLoaded', () => {
            const { Hovercards, GravatarQuickEditor } = Gravatar;

            const options = {
                placement: 'right',
                myHash: '99c3338797c95c418d9996bd39931506',
            };
            const hovercards = new Hovercards( options );

            const attach = ( target, opts ) => {
                hovercards.attach( target, opts );
            };

            attach( document.body, { ignoreSelector: '' } );

            // To test sanitization
            document.getElementById( 'inline-hovercard' )?.appendChild(
                Hovercards.createHovercard( {
                    hash: '99c3338797c95c418d9996bd39931506',
                    avatarUrl: 'https://www.gravatar.com/avatar/99c3338797c95c418d9996bd39931506?s=60&d=retro&r=g&esc=^^',
                    profileUrl: 'https://gravatar.com/wellyshen',
                    displayName: '<i>gyp</i>',
                    location: '<i>Earth</i>',
                    description: '<i>Test</i>, &amp;, &lt;, &gt;, &quot;, &#39;, &#x60;',
                } )
            );

            new GravatarQuickEditor( {
                email: 'joao.heringer@automattic.com',
                scope: [ 'avatars' ],
                editorTriggerSelector: '#edit-avatar',
                avatarSelector: '.avatar',
            } );
        } );
    </script>
</body>
</html>

Open the file on your preferred browser and check if the Hovercards and the Quick Editor work as expected

Automattic / gravatar

Update UMD config to merge packages #30

Proposed Changes

Testing Instructions