Update UMD config to merge packages #30

jcheringer · 2024-07-03T19:31:00Z

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: '[email protected]',
				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

github-actions · 2024-07-03T19:31:33Z

Size Change: -31 B (-0.11%)

Total Size: 29.3 kB

Filename	Size	Change
`dist/index.umd.js`	3.79 kB	-31 B (-0.81%)

ℹ️ View Unchanged

Filename	Size
`dist/index.esm.js`	6.19 kB
`dist/index.js`	6.33 kB
`dist/index.react.js`	8.25 kB
`dist/index.react.umd.js`	4.71 kB

_{compressed-size-action}

wellyshen

LGTM, thank you for addressing this issue 💙

jcheringer self-assigned this Jul 3, 2024

jcheringer requested a review from wellyshen July 3, 2024 19:32

wellyshen approved these changes Jul 4, 2024

View reviewed changes

Update UMD config to merge packages

0a09d63

jcheringer force-pushed the update/umd-config branch from c8a6383 to 0a09d63 Compare July 4, 2024 18:08

jcheringer merged commit 18b4746 into trunk Jul 4, 2024
4 checks passed

jcheringer deleted the update/umd-config branch July 4, 2024 18:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update UMD config to merge packages #30

Update UMD config to merge packages #30

jcheringer commented Jul 3, 2024

github-actions bot commented Jul 3, 2024 •

edited

Loading

wellyshen left a comment

Update UMD config to merge packages #30

Update UMD config to merge packages #30

Conversation

jcheringer commented Jul 3, 2024

Proposed Changes

Testing Instructions

github-actions bot commented Jul 3, 2024 • edited Loading

wellyshen left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 3, 2024 •

edited

Loading