apply review comments

core/static/bundled/alpine-index.ts

@@ -3,7 +3,7 @@ import { Alpine } from "alpinejs";
 import { limitedChoices } from "#core:alpine/limited-choices";
 import {
   type NotificationPlugin,
-  alpinePlugin as notificationPlugin,
+  notificationsPlugin as notifications,
 } from "#core:utils/notifications";
 
 declare module "alpinejs" {
@@ -11,8 +11,8 @@ declare module "alpinejs" {
     $notifications: NotificationPlugin;
   }
 }
-Alpine.plugin([sort, limitedChoices]);
-Alpine.magic("notifications", notificationPlugin);
+
+Alpine.plugin([sort, limitedChoices, notifications]);
 // biome-ignore lint/style/useNamingConvention: it's how it's named
 Object.assign(window, { Alpine });
 

core/static/bundled/utils/notifications.ts

@@ -44,27 +44,21 @@ Alpine.store("notifications", [] as Notification[]);
 function createNotification(message: string, level: NotificationLevel) {
   (Alpine.store("notifications") as Notification[]).push({ text: message, tag: level });
 }
-
-function deleteNotifications() {
-  Alpine.store("notifications", []);
+function createManyNotifications(notifs: Notification[]) {
+  for (const notif of notifs) {
+    createNotification(notif.text, notif.tag);
+  }
 }
 
-function getNotifications() {
-  return Alpine.store("notifications") as Notification[];
-}
+export const notifications: NotificationPlugin = {
+  error: (message: string) => createNotification(message, NotificationLevel.Error),
+  warning: (message: string) => createNotification(message, NotificationLevel.Warning),
+  success: (message: string) => createNotification(message, NotificationLevel.Success),
+  clear: () => Alpine.store("notifications", []),
+  addMany: (notifs: Notification[]) => createManyNotifications(notifs),
+  getAll: () => Alpine.store("notifications") as Notification[],
+};
 
-export function alpinePlugin(): NotificationPlugin {
-  return {
-    error: (message: string) => createNotification(message, NotificationLevel.Error),
-    warning: (message: string) =>
-      createNotification(message, NotificationLevel.Warning),
-    success: (message: string) =>
-      createNotification(message, NotificationLevel.Success),
-    clear: () => deleteNotifications(),
-    addMany: (notifs: Notification[]) =>
-      notifs.forEach((n) => {
-        createNotification(n.text, n.tag);
-      }),
-    getAll: () => getNotifications(),
-  };
+export function notificationsPlugin(GlobalAlpine: Alpine) {
+  GlobalAlpine.magic("notifications", () => ({ ...notifications }));
 }

core/templates/core/base/notifications.jinja

@@ -2,7 +2,7 @@
      x-init='$notifications.addMany([
              {%- for message in messages -%}
                {%- if not message.extra_tags -%}
-                 { tag: {{ message.tags|string|tojson }}, text: {{ message|string|tojson }} },
+                 { tag: "{{ message.tags }}", text: {{ message|string|tojson }} },
                {%- endif -%}
              {%- endfor -%}
              ])'

core/templates/core/macros.jinja

@@ -237,14 +237,18 @@
       clear   : optional boolean that controls if notifications should be cleared first. True is the default
   #}
   {% if messages %}
-    <div x-init="() => {
+    <div x-init='() => {
                  {%- if clear -%}
                    $notifications.clear();
                  {%- endif -%}
+                 $notifications.addMany([
                  {%- for message in messages -%}
-                   $notifications.{{ message.tags }}('{{ message }}');
+                   {%- if not message.extra_tags -%}
+                     { tag: "{{ message.tags }}", text: {{ message|string|tojson }} },
+                   {%- endif -%}
                  {%- endfor -%}
-                 }"></div>
+                 ])
+                 }'></div>
   {% endif %}
 {% endmacro %}