Add version comparer

Author: mlocati

gh-pages/src/App.vue

@@ -2,11 +2,12 @@
 import {
   getAvailableVersions,
   getVersion,
-  type LanguageData,
+  type Language,
   type Version,
 } from './Version';
 import {computed, onMounted, ref, watch} from 'vue';
 import * as UrlService from './UrlService';
+import DifferModal from './components/DifferModal.vue';
 
 type SortBys = 'id' | 'name';
 
@@ -15,6 +16,7 @@ const availableVersions = ref<string[] | null>(null);
 const wantedVersion = ref<string>('');
 const version = ref<Version | null>(null);
 const sortBy = ref<SortBys>('id');
+const differModal = ref<InstanceType<typeof DifferModal> | null>(null);
 
 onMounted(async () => {
   availableVersions.value = await getAvailableVersions();
@@ -29,7 +31,7 @@ async function loadVersion(v: string): Promise<void> {
   busy.value = true;
   try {
     const loadedVersion = await getVersion(v);
-    if (loadedVersion._version !== v) {
+    if (loadedVersion.version !== v) {
       return;
     }
     UrlService.setVersionInUrl(v);
@@ -42,56 +44,55 @@ async function loadVersion(v: string): Promise<void> {
   }
 }
 watch(wantedVersion, (v) => {
-  if (v && v !== version.value?._version) {
+  if (v && v !== version.value?.version) {
     loadVersion(v);
   }
 });
-export interface Language extends LanguageData {
-  id: string;
-}
 
 const comparer = new Intl.Collator('en', {sensitivity: 'base'});
 
 const languages = computed<Language[]>(() => {
-  const result: Language[] = [];
   if (!version.value) {
-    return result;
-  }
-  for (const [id, data] of Object.entries(version.value)) {
-    if (id === '_version') {
-      continue;
-    }
-    result.push({id, ...(<LanguageData>data)});
+    return [];
   }
+  const result = [...version.value.languages];
   result.sort((a, b) => comparer.compare(a[sortBy.value], b[sortBy.value]));
   return result;
 });
 </script>
 
 <template>
-  <div class="container text-center" v-if="availableVersions !== null">
-    <div class="row justify-content-center">
-      <label class="col-sm-2 col-form-label" for="wanted-version"
-        >Version</label
-      >
-      <div class="col-md-2 col-sm-4 col-xs-10">
-        <select
-          id="wanted-version"
-          v-model="wantedVersion"
-          :disabled="busy"
-          class="form-control"
-        >
-          <option v-for="v in availableVersions" :value="v" :key="v">
-            {{ v }}
-          </option>
-        </select>
+  <div class="container" v-if="availableVersions !== null">
+    <div class="row justify-content-center mb-3">
+      <div class="col-12" style="max-width: 300px">
+        <div class="input-group input-group-sm">
+          <label for="wanted-version" class="input-group-text">Version</label>
+          <select
+            id="wanted-version"
+            v-model="wantedVersion"
+            :disabled="busy"
+            class="form-control"
+          >
+            <option v-for="v in availableVersions" :value="v" :key="v">
+              {{ v }}
+            </option>
+          </select>
+          <button
+            v-if="version !== null"
+            type="button"
+            class="btn btn-outline-secondary"
+            @click="differModal?.open(version.version)"
+          >
+            Compare
+          </button>
+        </div>
       </div>
     </div>
   </div>
   <div v-if="version !== null" class="container-fluid">
     <table class="table table-sm table-striped table-hover caption-top">
       <caption class="text-center">
-        <h2>gettext plural rules from CLDR {{ version._version }}</h2>
+        <h2>gettext plural rules from CLDR {{ version.version }}</h2>
       </caption>
       <thead>
         <tr>
@@ -125,7 +126,7 @@ const languages = computed<Language[]>(() => {
       <tbody>
         <tr
           v-for="language in languages"
-          :key="`${language.id}@${version._version}`"
+          :key="`${language.id}@${version.version}`"
         >
           <td>
             <code>{{ language.id }}</code>
@@ -156,4 +157,5 @@ const languages = computed<Language[]>(() => {
       </tbody>
     </table>
   </div>
+  <DifferModal ref="differModal" />
 </template>

gh-pages/src/Differ.ts

@@ -0,0 +1,73 @@
+import type {Language, Version} from './Version';
+
+interface Diff {
+  fromLanguage: Language;
+  toLanguage: Language;
+  change: string;
+}
+
+export interface Diffs {
+  fromVersion: Version;
+  toVersion: Version;
+  added: Language[];
+  removed: Language[];
+  changed: Diff[];
+}
+
+function diffLanguages(fromVersion: Version, toVersion: Version): Diff[] {
+  let result: Diff[] = [];
+  toVersion.languages.forEach((toLanguage) => {
+    const fromLanguage = fromVersion.languages.find(
+      (fromLanguage) => fromLanguage.id === toLanguage.id,
+    );
+    if (fromLanguage) {
+      result = result.concat(diffLanguage(fromLanguage, toLanguage));
+    }
+  });
+  return result;
+}
+
+function diffLanguage(fromLanguage: Language, toLanguage: Language): Diff[] {
+  let result: Diff[] = [];
+  if (fromLanguage.name !== toLanguage.name) {
+    result.push({
+      fromLanguage,
+      toLanguage,
+      change: `Name changed from ${fromLanguage.name} to ${toLanguage.name}`,
+    });
+  }
+  if (fromLanguage.plurals !== toLanguage.plurals) {
+    result.push({
+      fromLanguage,
+      toLanguage,
+      change: `Plurals changed from ${fromLanguage.plurals} to ${toLanguage.plurals}`,
+    });
+  } else if (fromLanguage.formula !== toLanguage.formula) {
+    result.push({
+      fromLanguage,
+      toLanguage,
+      change: `Formula changed from\n${fromLanguage.formula}\nto\n${toLanguage.formula}`,
+    });
+  }
+  return result;
+}
+
+export function computeDiffs(fromVersion: Version, toVersion: Version): Diffs {
+  return {
+    fromVersion,
+    toVersion,
+    added: toVersion.languages.filter(
+      (toLanguage) =>
+        !fromVersion.languages.some(
+          (fromLanguage) => toLanguage.id === fromLanguage.id,
+        ),
+    ),
+    removed: fromVersion.languages.filter(
+      (fromLanguage) =>
+        !toVersion.languages.some(
+          (toLanguage) => toLanguage.id === fromLanguage.id,
+        ),
+    ),
+    changed: diffLanguages(fromVersion, toVersion),
+  };
+}

gh-pages/src/Version.ts

@@ -1,13 +1,22 @@
 type PluralCases = 'zero' | 'one' | 'two' | 'few' | 'many' | 'other';
 
-export interface LanguageData {
+interface RawLanguage {
   name: string;
   formula: string;
   plurals: number;
   cases: PluralCases[];
   examples: Record<PluralCases, string>;
 }
-export type Version = Record<string, LanguageData> & {_version: string};
+
+type RawVersion = Record<string, RawLanguage>;
+
+export interface Language extends RawLanguage {
+  id: string;
+}
+export interface Version {
+  version: string;
+  languages: Language[];
+}
 
 let availableVersions: string[] | undefined;
 
@@ -27,8 +36,14 @@ export async function getVersion(version: string): Promise<Version> {
     return loadedVersions[version];
   }
   const response = await fetch(`data/versions/${version}.min.json`);
-  const data = <Version>await response.json();
-  data._version = version;
-  loadedVersions[version] = data;
-  return (loadedVersions[version] = data);
+  const rawVersion = <RawVersion>await response.json();
+  const parsedVersion: Version = {
+    version,
+    languages: Object.entries(rawVersion).map(([id, rawLanguage]) => ({
+      id,
+      ...rawLanguage,
+    })),
+  };
+  loadedVersions[version] = parsedVersion;
+  return parsedVersion;
 }