perf(share): ⚡️ prerender the HTML for the share button

Instead of doing it in JS, just render it altogther in the HTML

includes/Components/CitizenComponentPageTools.php

@@ -153,7 +153,8 @@ class CitizenComponentPageTools implements CitizenComponent {
 			 * 'is-uls-ready' => $this->shouldShowULS( $variantsData ),
 			 */
 			'is-uls-ready' => false,
-			'int-language-count' => $this->numLanguages
+			'int-language-count' => $this->numLanguages,
+			'msg-citizen-share' => $this->localizer->msg( "citizen-share" )->text()
 		];
 	}
 }

resources/skins.citizen.scripts/share.js

@@ -4,15 +4,13 @@
  * @return {void}
  */
 function init() {
-	const supportsWebShareAPI = navigator.share;
-
 	if ( !mw.config.get( 'wgIsArticle' ) ) {
 		return;
 	}
 
-	const pageActions = document.querySelector( '.page-actions' );
-	if ( !pageActions ) {
-		mw.log.error( '[Citizen] Unable to attach share button (.page-actions not found)' );
+	const shareButton = document.getElementById( 'citizen-share' );
+	if ( !shareButton ) {
+		mw.log.error( '[Citizen] Unable to find share button (#shareButton not found)' );
 		return;
 	}
 
@@ -23,26 +21,13 @@ function init() {
 		url: url
 	};
 
-	const fragment = document.createDocumentFragment();
-	const button = document.createElement( 'button' );
-	button.classList.add( 'citizen-share', 'citizen-button', 'citizen-dropdown-summary' );
-	const icon = document.createElement( 'span' );
-	icon.classList.add( 'citizen-ui-icon', 'mw-ui-icon-wikimedia-share' );
-	const label = document.createElement( 'span' );
-	const labelMsg = mw.message( 'citizen-share' );
-	label.textContent = labelMsg;
-	button.setAttribute( 'title', labelMsg );
-	button.append( icon, label );
-	fragment.appendChild( button );
-	pageActions.prepend( fragment );
-
 	// eslint-disable-next-line es-x/no-async-functions
 	const handleShareButtonClick = async () => {
-		button.disabled = true; // Disable the button
+		shareButton.disabled = true; // Disable the button
 		try {
-			if ( supportsWebShareAPI ) {
+			if ( navigator.share ) {
 				await navigator.share( shareData );
-			} else {
+			} else if ( navigator.clipboard ) {
 				// Fallback to navigator.clipboard if Share API is not supported
 				await navigator.clipboard.writeText( url );
 				mw.notify( mw.msg( 'citizen-share-copied' ), {
@@ -53,11 +38,11 @@ function init() {
 		} catch ( error ) {
 			mw.log.error( `[Citizen] ${ error }` );
 		} finally {
-			button.disabled = false; // Re-enable button after error or share completes
+			shareButton.disabled = false; // Re-enable button after error or share completes
 		}
 	};
 
-	button.addEventListener( 'click', mw.util.debounce( handleShareButtonClick, 100 ) );
+	shareButton.addEventListener( 'click', mw.util.debounce( handleShareButtonClick, 100 ) );
 }
 
 module.exports = {

resources/skins.citizen.styles/components/Pagetools.less

@@ -149,6 +149,14 @@
 	}
 }
 
+.client-nojs {
+	// Hide share button completely when JS is not supported
+	// Since it won't do anything
+	.citizen-share {
+		display: none;
+	}
+}
+
 // To avoid more menu from overflow in narrow screen
 @media ( max-width: @max-width-breakpoint-tablet ) {
 	.page-actions {

templates/PageTools.mustache

@@ -4,6 +4,7 @@
 	object data-page-actions
 }}
 <div class="page-actions">
+	{{>Share}}
 	{{#has-languages}}{{>PageTools__languages}}{{/has-languages}}
 	{{#is-visible}}
 		{{#data-portlets.data-views}}{{>Menu}}{{/data-portlets.data-views}}

templates/Share.mustache

@@ -0,0 +1,8 @@
+<button
+	id="citizen-share"
+	class="citizen-share citizen-button citizen-dropdown-summary"
+	title="{{msg-citizen-share}}"
+>
+	<span class="citizen-ui-icon mw-ui-icon-wikimedia-share"></span>
+	<span>{{msg-citizen-share}}</span>
+</button>