update: upgrade messageformat to 4.0.0-5

Toromyx · Nov 14, 2023 · 148bbb5 · 148bbb5
1 parent 333c719
commit 148bbb5
Show file tree

Hide file tree

Showing 19 changed files with 58 additions and 124 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/content/entity/recipe-file/edit/RecipeFileEdit.svelte b/src/components/content/entity/recipe-file/edit/RecipeFileEdit.svelte
@@ -16,17 +16,13 @@ This component implements form fields for editing a recipe file.
 </script>
 
 <SvelteInput
-  label="{messages.labels.entityFields.recipeFile.name
-    .resolveMessage()
-    .toString()}"
+  label="{messages.labels.entityFields.recipeFile.name.format()}"
   name="name"
   value="{name}"
   required="{true}"
 />
 <FileInput
-  label="{messages.labels.entityFields.recipeFile.path
-    .resolveMessage()
-    .toString()}"
+  label="{messages.labels.entityFields.recipeFile.path.format()}"
   name="path"
   required="{true}"
 />
diff --git a/src/components/content/entity/recipe-file/list/RecipeFileList.svelte b/src/components/content/entity/recipe-file/list/RecipeFileList.svelte
@@ -44,9 +44,7 @@ This component display an ordered list of all recipe files of a recipe step.
             updateOrder(recipeFileRepository, $list, id);
           }}"
           confirmation="{true}"
-          >{messages.labels.actions.delete
-            .resolveMessage()
-            .toString()}</SvelteButton
+          >{messages.labels.actions.delete.format()}</SvelteButton
         >
       </li>
     {/each}
@@ -64,9 +62,7 @@ This component display an ordered list of all recipe files of a recipe step.
   >
     <RecipeFileEdit />
     <SvelteButton type="submit"
-      >{messages.labels.actions.create
-        .resolveMessage()
-        .toString()}</SvelteButton
+      >{messages.labels.actions.create.format()}</SvelteButton
     >
   </SvelteForm>
 {/if}
diff --git a/src/components/content/entity/recipe-file/view/RecipeFileView.svelte b/src/components/content/entity/recipe-file/view/RecipeFileView.svelte
@@ -57,8 +57,7 @@ It includes functionality to optically recognize characters in the recipe file.
     on:click="{() =>
       void invoke(Command.OCR, { recipeFileId: id }).then((result) => {
         output = result;
-      })}"
-    >{messages.labels.actions.ocr.resolveMessage().toString()}</SvelteButton
+      })}">{messages.labels.actions.ocr.format()}</SvelteButton
   >
   <output for="{buttonId}">
     <iframe

diff --git a/src/components/content/entity/recipe-ingredient/edit/RecipeIngredientEdit.svelte b/src/components/content/entity/recipe-ingredient/edit/RecipeIngredientEdit.svelte
@@ -123,9 +123,7 @@ The event `edit` is fired when the user makes yn change to any field. The event
   name="quantity"
   type="number"
   value="{innerQuantity}"
-  label="{messages.labels.entityFields.recipeIngredient.quantity
-    .resolveMessage()
-    .toString()}"
+  label="{messages.labels.entityFields.recipeIngredient.quantity.format()}"
   min="0"
 />
 <SvelteInput
@@ -134,9 +132,7 @@ The event `edit` is fired when the user makes yn change to any field. The event
   on:paste
   name="unit"
   value="{innerUnit}"
-  label="{messages.labels.entityFields.recipeIngredient.unit
-    .resolveMessage()
-    .toString()}"
+  label="{messages.labels.entityFields.recipeIngredient.unit.format()}"
   list="{UNIT_LIST_ID}"
 />
 <Autocomplete
@@ -150,9 +146,7 @@ The event `edit` is fired when the user makes yn change to any field. The event
   value="{innerIngredientId ? [innerIngredientId] : []}"
   userInput="{innerIngredientName}"
   excludedValues="{usedIngredientIds}"
-  label="{messages.labels.entityFields.recipeIngredient.ingredient
-    .resolveMessage()
-    .toString()}"
+  label="{messages.labels.entityFields.recipeIngredient.ingredient.format()}"
   callback="{async (userInput) => (ingredientIdUserInput = userInput)}"
   results="{whenLoadingDefault($ingredientIdResults, [])}"
   createCallback="{(userInput) =>
@@ -167,7 +161,5 @@ The event `edit` is fired when the user makes yn change to any field. The event
   on:paste
   name="quality"
   value="{innerQuality}"
-  label="{messages.labels.entityFields.recipeIngredient.quality
-    .resolveMessage()
-    .toString()}"
+  label="{messages.labels.entityFields.recipeIngredient.quality.format()}"
 />
diff --git a/src/components/content/entity/recipe-ingredient/list/RecipeIngredientList.svelte b/src/components/content/entity/recipe-ingredient/list/RecipeIngredientList.svelte
@@ -105,9 +105,7 @@ It also displays displays the ingredients recipes drafts.
             updateOrder(recipeIngredientRepository, $list, id);
           }}"
           confirmation="{true}"
-          >{messages.labels.actions.delete
-            .resolveMessage()
-            .toString()}</SvelteButton
+          >{messages.labels.actions.delete.format()}</SvelteButton
         >
       </li>
     {/each}
@@ -154,9 +152,7 @@ It also displays displays the ingredients recipes drafts.
       usedIngredientIds="{whenLoadingDefault($usedIngredientsList, [])}"
     />
     <SvelteButton type="submit"
-      >{messages.labels.actions.create
-        .resolveMessage()
-        .toString()}</SvelteButton
+      >{messages.labels.actions.create.format()}</SvelteButton
     >
   </SvelteForm>
 {/if}
diff --git a/...ntent/entity/recipe-ingredient/list/RecipeIngredientList/AdditionalIngredientsForm.svelte b/...ntent/entity/recipe-ingredient/list/RecipeIngredientList/AdditionalIngredientsForm.svelte
@@ -103,24 +103,21 @@ The event `done` is emitted either on creation or cancellation. This can be used
               parsedRecipeIngredients = parsedRecipeIngredients;
             }}"
             confirmation="{true}"
-            >{messages.labels.actions.remove
-              .resolveMessage()
-              .toString()}</SvelteButton
+            >{messages.labels.actions.remove.format()}</SvelteButton
           >
         </li>
       {/each}
     </ol>
     <SvelteButton
       on:click="{() => {
         parsedRecipeIngredients = [...parsedRecipeIngredients, { name: '' }];
-      }}"
-      >{messages.labels.actions.add.resolveMessage().toString()}</SvelteButton
+      }}">{messages.labels.actions.add.format()}</SvelteButton
     >
   </SvelteFieldset>
   <SvelteButton type="submit"
-    >{messages.labels.actions.create.resolveMessage().toString()}</SvelteButton
+    >{messages.labels.actions.create.format()}</SvelteButton
   >
   <SvelteButton on:click="{() => dispatch('done')}"
-    >{messages.labels.actions.cancel.resolveMessage().toString()}</SvelteButton
+    >{messages.labels.actions.cancel.format()}</SvelteButton
   >
 </SvelteForm>
diff --git a/src/components/content/entity/recipe-ingredient/view/RecipeIngredientView.svelte b/src/components/content/entity/recipe-ingredient/view/RecipeIngredientView.svelte
@@ -119,17 +119,17 @@ It also takes care of the unit conversion.
   function translateUnit(unit, value) {
     switch (unit) {
       case Unit.MASS_KILOGRAM:
-        return messages.units.kilogram.resolveMessage({ value }).toString();
+        return messages.units.kilogram.format({ value });
       case Unit.MASS_GRAM:
-        return messages.units.gram.resolveMessage({ value }).toString();
+        return messages.units.gram.format({ value });
       case Unit.MASS_POUND:
-        return messages.units.pound.resolveMessage({ value }).toString();
+        return messages.units.pound.format({ value });
       case Unit.VOLUME_LITRE:
-        return messages.units.litre.resolveMessage({ value }).toString();
+        return messages.units.litre.format({ value });
       case Unit.VOLUME_MILLILITRE:
-        return messages.units.millilitre.resolveMessage({ value }).toString();
+        return messages.units.millilitre.format({ value });
       case Unit.VOLUME_US_CUP:
-        return messages.units.usCup.resolveMessage({ value }).toString();
+        return messages.units.usCup.format({ value });
     }
   }
 

diff --git a/src/components/content/entity/recipe-step/edit/RecipeStepEdit.svelte b/src/components/content/entity/recipe-step/edit/RecipeStepEdit.svelte
@@ -17,8 +17,6 @@ This component implements form fields to edit a recipe step.
 <SvelteTextarea
   name="description"
   value="{description}"
-  label="{messages.labels.entityFields.recipeStep.description
-    .resolveMessage()
-    .toString()}"
+  label="{messages.labels.entityFields.recipeStep.description.format()}"
   required="{true}"
 />
diff --git a/src/components/content/entity/recipe-step/list/RecipeStepList.svelte b/src/components/content/entity/recipe-step/list/RecipeStepList.svelte
@@ -42,9 +42,7 @@ This component displays an ordered list of recipe steps of a recipe.
         updateOrder(recipeStepRepository, $list, id);
       }}"
       confirmation="{true}"
-      >{messages.labels.actions.delete
-        .resolveMessage()
-        .toString()}</SvelteButton
+      >{messages.labels.actions.delete.format()}</SvelteButton
     >
   {/each}
   <SvelteForm
@@ -58,15 +56,13 @@ This component displays an ordered list of recipe steps of a recipe.
     }}"
   >
     <h2>
-      {messages.headings.recipeStep.resolveMessage({
+      {messages.headings.recipeStep.format({
         number: $list.length + 1,
       })}
     </h2>
     <RecipeStepEdit />
     <SvelteButton type="submit"
-      >{messages.labels.actions.create
-        .resolveMessage()
-        .toString()}</SvelteButton
+      >{messages.labels.actions.create.format()}</SvelteButton
     >
   </SvelteForm>
 {/if}
diff --git a/src/components/content/entity/recipe-step/view/RecipeStepView.svelte b/src/components/content/entity/recipe-step/view/RecipeStepView.svelte
@@ -28,13 +28,11 @@ This component displays the content of a recipe step.
 
 {#if isLoaded($recipeStep)}
   <h2>
-    {messages.headings.recipeStep
-      .resolveMessage({ number: $recipeStep.order })
-      .toString()}
+    {messages.headings.recipeStep.format({ number: $recipeStep.order })}
   </h2>
-  <h3>{messages.headings.ingredients.resolveMessage().toString()}</h3>
+  <h3>{messages.headings.ingredients.format()}</h3>
   <RecipeIngredientList recipeStepId="{id}" factor="{factor}" />
-  <h3>{messages.headings.description.resolveMessage().toString()}</h3>
+  <h3>{messages.headings.description.format()}</h3>
   <Editable
     on:edit="{async ({ detail: { values, changed } }) => {
       const update = { id };
@@ -49,6 +47,6 @@ This component displays the content of a recipe step.
     </svelte:fragment>
     <RecipeStepEdit slot="edit" description="{$recipeStep.description}" />
   </Editable>
-  <h3>{messages.headings.files.resolveMessage().toString()}</h3>
+  <h3>{messages.headings.files.format()}</h3>
   <RecipeFileList recipeStepId="{id}" />
 {/if}
diff --git a/src/components/content/entity/recipe/list/RecipeList.svelte b/src/components/content/entity/recipe/list/RecipeList.svelte
@@ -42,9 +42,9 @@ This component lists all recipes with a form to create a new recipe.
     } catch (reason) {
       if (reason instanceof ExternalRecipeUrlNotSupportedError) {
         input.setAndReportCustomValidity(
-          messages.validity.externalRecipeUrlNotSupported
-            .resolveMessage({ url: reason.url })
-            .toString(),
+          messages.validity.externalRecipeUrlNotSupported.format({
+            url: reason.url,
+          }),
         );
         return;
       }
@@ -66,10 +66,8 @@ This component lists all recipes with a form to create a new recipe.
             void recipeRepository.delete(id);
           }
         },
-        label: messages.labels.actions.delete.resolveMessage().toString(),
-        labelAll: messages.labels.actions.deleteSelectedItems
-          .resolveMessage()
-          .toString(),
+        label: messages.labels.actions.delete.format(),
+        labelAll: messages.labels.actions.deleteSelectedItems.format(),
         confirmation: true,
       },
     ]}"
@@ -83,19 +81,13 @@ This component lists all recipes with a form to create a new recipe.
       bind:this="{input}"
       name="name"
       required="{true}"
-      label="{messages.labels.entityFields.recipe.name
-        .resolveMessage()
-        .toString()}"
+      label="{messages.labels.entityFields.recipe.name.format()}"
     />
     <SvelteButton type="submit" disabled="{loadingExternalRecipe}"
       ><span aria-live="polite"
         >{#if loadingExternalRecipe}<SvelteProgress
-            label="{messages.labels.descriptions.progress.loadingExternalRecipe
-              .resolveMessage()
-              .toString()}"
-          />{:else}{messages.labels.actions.create
-            .resolveMessage()
-            .toString()}{/if}</span
+            label="{messages.labels.descriptions.progress.loadingExternalRecipe.format()}"
+          />{:else}{messages.labels.actions.create.format()}{/if}</span
       ></SvelteButton
     >
   </SvelteForm>

diff --git a/src/components/content/entity/recipe/view/RecipeView.svelte b/src/components/content/entity/recipe/view/RecipeView.svelte
@@ -31,7 +31,7 @@ This component displays the content of a recipe.
       on:input="{({ detail }) => (factor = detail)}"
       name="factor"
       type="number"
-      label="{messages.labels.factor.resolveMessage().toString()}"
+      label="{messages.labels.factor.format()}"
       value="{factor}"
       min="{0}"
     />

diff --git a/src/components/element/ActionableList.svelte b/src/components/element/ActionableList.svelte
@@ -75,9 +75,7 @@
   bind:this="{selectAllInput}"
   on:input="{onInputSelectAll}"
   type="checkbox"
-  aria-label="{messages.labels.descriptions.bulkActions.selectAllItems
-    .resolveMessage()
-    .toString()}"
+  aria-label="{messages.labels.descriptions.bulkActions.selectAllItems.format()}"
   checked="{allSelected}"
   indeterminate="{allSelected === undefined}"
 />
@@ -86,9 +84,7 @@
     <li>
       <input
         type="checkbox"
-        aria-label="{messages.labels.descriptions.bulkActions.selectItem
-          .resolveMessage()
-          .toString()}"
+        aria-label="{messages.labels.descriptions.bulkActions.selectItem.format()}"
         bind:checked="{checked[item]}"
       /><slot item="{item}" />{#each actions as action}<SvelteButton
           on:click="{() => action.callback([item])}"

diff --git a/src/components/element/form/Autocomplete.svelte b/src/components/element/form/Autocomplete.svelte
@@ -146,22 +146,16 @@ The `select` event is fired when a value is selected or deselected. Its detail i
         ...[
           (value) =>
             value.length < min
-              ? messages.validity.autocomplete.min
-                  .resolveMessage({ min })
-                  .toString()
+              ? messages.validity.autocomplete.min.format({ min })
               : undefined,
           (value) =>
             value.length > max
-              ? messages.validity.autocomplete.max
-                  .resolveMessage({ max })
-                  .toString()
+              ? messages.validity.autocomplete.max.format({ max })
               : undefined,
           (value) => {
             for (const item of value) {
               if (excludedValues.includes(item)) {
-                return messages.validity.autocomplete.includesExcluded
-                  .resolveMessage()
-                  .toString();
+                return messages.validity.autocomplete.includesExcluded.format();
               }
             }
           },
@@ -196,9 +190,7 @@ The `select` event is fired when a value is selected or deselected. Its detail i
   <span
     >{#each innerValue as item}<span
         ><slot item="{item}" /><SvelteButton on:click="{() => deselect(item)}"
-          >{messages.labels.actions.delete
-            .resolveMessage()
-            .toString()}</SvelteButton
+          >{messages.labels.actions.delete.format()}</SvelteButton
         ></span
       >{/each}</span
   >
@@ -235,9 +227,7 @@ The `select` event is fired when a value is selected or deselected. Its detail i
         <SvelteButton
           on:click="{() => createAndSelect()}"
           disabled="{innerValue.length >= max}"
-          >{messages.labels.actions.create
-            .resolveMessage()
-            .toString()}</SvelteButton
+          >{messages.labels.actions.create.format()}</SvelteButton
         >
       </li>
     {/if}

diff --git a/src/components/element/form/FileInput.svelte b/src/components/element/form/FileInput.svelte
@@ -100,10 +100,7 @@ The `input` or `change` events are fired when the user sets the value of the fie
       if (selected) {
         onDialogOrFileDrop(selected);
       }
-    }}"
-    >{messages.labels.actions.file.open
-      .resolveMessage()
-      .toString()}</SvelteButton
+    }}">{messages.labels.actions.file.open.format()}</SvelteButton
   >
   <input
     bind:this="{input}"

diff --git a/src/components/element/form/SvelteSelect.svelte b/src/components/element/form/SvelteSelect.svelte
@@ -29,10 +29,9 @@ The `input` or `change` events are fired when the user selects an option.
    * the form element placeholder
    * @type {string}
    */
-  export let placeholder =
-    messages.imperatives.selectPlaceholder.resolveMessage({
-      label,
-    });
+  export let placeholder = messages.imperatives.selectPlaceholder.format({
+    label,
+  });
   /**
    * whether the form element is required or not
    * @type {boolean}