From 0e6b3378087d28a6bf070e4c7a076461823b2e7e Mon Sep 17 00:00:00 2001
From: Dhanush <dhanushcdivaker8984@gmail.com>
Date: Sat, 21 Dec 2024 01:57:27 +0530
Subject: [PATCH 1/2] Fix translation loading issue and ensure translations are
 applied before updating UI

---
 demo/js/demo.js   | 53 ++++++++++++++++++++++++++---------------------
 package-lock.json |  2 +-
 2 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/demo/js/demo.js b/demo/js/demo.js
index a35d1de..064485a 100644
--- a/demo/js/demo.js
+++ b/demo/js/demo.js
@@ -1,27 +1,32 @@
-function updateText() {
-	'use strict';
-	var i18n = $.i18n(), language, person, kittens, message, gender;
-
-	message = '$1 has $2 {{plural:$2|kitten|kittens}}. ' +
-		'{{gender:$3|He|She}} loves to play with {{plural:$2|it|them}}.';
-	language = $( '.language option:selected' ).val();
-	person = $( '.person option:selected' ).text();
-	gender = $( '.person option:selected' ).val();
-	kittens = $( '.kittens' ).val();
+function loadTranslations(callback) {
+    var i18n = $.i18n();
+    // Load the translation file
+    i18n.load('../assets/lang/ui_' + i18n.locale + '.json', i18n.locale).done(function() {
+        callback(); // Once translations are loaded, call the callback function
+    });
+}
 
-	i18n.locale = language;
-	i18n.load( 'i18n/demo-' + i18n.locale + '.json', i18n.locale ).done(
-		function () {
-			var personName = $.i18n( person ), localizedMessage = $.i18n( message, personName,
-				kittens, gender );
-			$( '.result' ).text( localizedMessage ).prop( 'title', i18n.localize( message ) );
-		} );
+function _T(key) {
+    'use strict';
+    var i18n = $.i18n();
+    return i18n(key); // Directly return the translation after it's loaded
 }
-// Enable debug
-$.i18n.debug = true;
 
-$( document ).ready( function ( $ ) {
-	'use strict';
-	updateText();
-	$( '.kittens, .person, .language' ).on( 'change keyup', updateText );
-} );
+$(document).ready(function () {
+    loadTranslations(function() {
+        // Now that translations are loaded, populate the formats object
+        var formats = { 
+            portrait: _T('text-portrait'), 
+            landscape: _T('text-landscape'), 
+            square: _T('text-square') 
+        };
+
+        $.each(formats, function (key, format) {
+            console.log('appending ' + key);
+            $('#format').append($('<option>', { 
+                value: key,
+                text: format
+            }));
+        });
+    });
+});
diff --git a/package-lock.json b/package-lock.json
index 70059c6..72925e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "@wikimedia/jquery.i18n",
+  "name": "@wikimedia/jquery.",
   "version": "1.0.10",
   "lockfileVersion": 2,
   "requires": true,

From 930d33d64ee33147e4b2737707fb1ae30bfb747e Mon Sep 17 00:00:00 2001
From: Dhanush <dhanushcdivaker8984@gmail.com>
Date: Wed, 25 Dec 2024 03:29:55 +0530
Subject: [PATCH 2/2] Removed jQuery dependency and refactored translation
 loading

---
 demo/js/demo.js   | 44 +++++++++++++++++++++++++++++++-------------
 package-lock.json |  2 +-
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/demo/js/demo.js b/demo/js/demo.js
index 064485a..088cb8a 100644
--- a/demo/js/demo.js
+++ b/demo/js/demo.js
@@ -1,32 +1,50 @@
+// Assuming i18n is some object and its methods need to be handled manually, 
+// if you are using a library for i18n, the load mechanism might be similar
 function loadTranslations(callback) {
-    var i18n = $.i18n();
+    // Assuming i18n is an object with a load method
+    const i18n = { 
+        locale: 'en', // Replace with dynamic locale if needed
+        load: function(url, locale) {
+            return fetch(url)
+                .then(response => response.json())
+                .then(data => {
+                    this.translations = data;
+                });
+        },
+        get: function(key) {
+            return this.translations[key] || key; // Return the translation or the key itself if not found
+        }
+    };
+
     // Load the translation file
-    i18n.load('../assets/lang/ui_' + i18n.locale + '.json', i18n.locale).done(function() {
-        callback(); // Once translations are loaded, call the callback function
-    });
+    i18n.load('../assets/lang/ui_' + i18n.locale + '.json', i18n.locale)
+        .then(function() {
+            callback(); // Once translations are loaded, call the callback function
+        });
 }
 
 function _T(key) {
     'use strict';
-    var i18n = $.i18n();
-    return i18n(key); // Directly return the translation after it's loaded
+    const i18n = { translations: {} }; // Assuming i18n object
+    return i18n.get(key); // Directly return the translation after it's loaded
 }
 
-$(document).ready(function () {
+document.addEventListener('DOMContentLoaded', function () {
     loadTranslations(function() {
         // Now that translations are loaded, populate the formats object
-        var formats = { 
+        const formats = { 
             portrait: _T('text-portrait'), 
             landscape: _T('text-landscape'), 
             square: _T('text-square') 
         };
 
-        $.each(formats, function (key, format) {
+        // Instead of $.each(), use Object.keys() and forEach() in vanilla JS
+        Object.keys(formats).forEach(function(key) {
             console.log('appending ' + key);
-            $('#format').append($('<option>', { 
-                value: key,
-                text: format
-            }));
+            const option = document.createElement('option');
+            option.value = key;
+            option.textContent = formats[key];
+            document.getElementById('format').appendChild(option);
         });
     });
 });
diff --git a/package-lock.json b/package-lock.json
index 72925e6..70059c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "@wikimedia/jquery.",
+  "name": "@wikimedia/jquery.i18n",
   "version": "1.0.10",
   "lockfileVersion": 2,
   "requires": true,