@novu/js 2.0.1 → 2.1.1

package/dist/esm/ui/index.mjs

@@ -1,4 +1,4 @@
-import { __privateAdd, __privateSet, __privateMethod, __privateGet, __spreadProps, __spreadValues, __objRest, Novu, __async, isSameFilter } from '../chunk-LDGUT6MH.mjs';
+import { __privateAdd, __privateSet, __privateMethod, __privateGet, __spreadProps, __spreadValues, __objRest, Novu, __async, isSameFilter } from '../chunk-APRCCICD.mjs';
 import { delegateEvents, render, createComponent, Portal, mergeProps, setAttribute, spread, template, insert, memo, effect, className, use, addEventListener, Dynamic, isServer } from 'solid-js/web';
 import { createSignal, createContext, onMount, onCleanup, For, createMemo, createEffect, splitProps, useContext, Show, Switch as Switch$1, Match, createResource, createComputed, batch } from 'solid-js';
 import { createStore, reconcile } from 'solid-js/store';
@@ -92,7 +92,9 @@ var appearanceKeys = [
   "notification",
   "notificationDot",
   "notificationSubject",
+  "notificationSubject__strong",
   "notificationBody",
+  "notificationBody__strong",
   "notificationBodyContainer",
   "notificationImage",
   "notificationDate",
@@ -159,36 +161,13 @@ var appearanceKeys = [
   "preferencesHeader__back__button",
   "preferencesHeader__title",
   // Preferences Loading
-  "preferencesLoadingContainer"
+  "preferencesLoadingContainer",
+  // Text formatting
+  "strong"
 ];
-function createDelayedLoading(initialValue, delayInMs) {
-  const [debouncedValue, setDebouncedValue] = createSignal(initialValue);
-  const [valueGiven, setValueGiven] = createSignal(initialValue);
-  const [initialDelayHasPassed, setInitialDelayHasPassed] = createSignal(false);
-  const timeout = setTimeout(() => {
-    setInitialDelayHasPassed(true);
-  }, delayInMs);
-  onCleanup(() => {
-    clearTimeout(timeout);
-  });
-  createEffect(() => {
-    if (initialDelayHasPassed()) {
-      setDebouncedValue(valueGiven());
-    }
-  });
-  const setValue = createMemo(() => {
-    if (!initialDelayHasPassed()) {
-      return setValueGiven;
-    }
-    return setDebouncedValue;
-  });
-  return [debouncedValue, setValue()];
-}
-
-// src/ui/helpers/createInfiniteScroll.ts
 function createInfiniteScroll(fetcher) {
   const [data, setData] = createSignal([]);
-  const [initialLoading, setInitialLoading] = createDelayedLoading(true, 300);
+  const [initialLoading, setInitialLoading] = createSignal(true);
   const [offset3, setOffset] = createSignal(0);
   const [end, setEnd] = createSignal(false);
   const [contents, { mutate, refetch }] = createResource(offset3, fetcher);
@@ -727,7 +706,7 @@ var useInboxContext = () => {
 };
 var NovuContext = createContext(void 0);
 function NovuProvider(props) {
-  const novu = createMemo(() => new Novu(props.options));
+  const novu = createMemo(() => props.novu || new Novu(props.options));
   return createComponent(NovuContext.Provider, {
     get value() {
       return novu();
@@ -1976,7 +1955,7 @@ var useNotificationsInfiniteScroll = (props) => {
 };
 var usePreferences = (options) => {
   const novu = useNovu();
-  const [loading, setLoading] = createDelayedLoading(true, 300);
+  const [loading, setLoading] = createSignal(true);
   const [preferences, { mutate, refetch }] = createResource(options || {}, () => __async(void 0, null, function* () {
     try {
       const response = yield novu.preferences.list();
@@ -2834,10 +2813,90 @@ var PreferencesRow = (props) => {
   });
 };
 delegateEvents(["click"]);
-var _tmpl$46 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$213 = /* @__PURE__ */ template(`<img>`);
-var _tmpl$311 = /* @__PURE__ */ template(`<p>`);
-var _tmpl$47 = /* @__PURE__ */ template(`<a><div><div class="nt-relative nt-shrink-0 nt-float-right"><p></p><div></div></div><p></p><div>`);
+var _tmpl$46 = /* @__PURE__ */ template(`<strong>`);
+var _tmpl$213 = /* @__PURE__ */ template(`<p>`);
+var parseMarkdownIntoTokens = (text) => {
+  const tokens = [];
+  let buffer = "";
+  let inBold = false;
+  for (let i = 0; i < text.length; i += 1) {
+    if (text[i] === "\\" && text[i + 1] === "*") {
+      buffer += "*";
+      i += 1;
+    } else if (text[i] === "*" && text[i + 1] === "*") {
+      if (buffer) {
+        tokens.push({
+          type: inBold ? "bold" : "text",
+          content: buffer
+        });
+        buffer = "";
+      }
+      inBold = !inBold;
+      i += 1;
+    } else {
+      buffer += text[i];
+    }
+  }
+  if (buffer) {
+    tokens.push({
+      type: inBold ? "bold" : "text",
+      content: buffer
+    });
+  }
+  return tokens;
+};
+var Bold = (props) => {
+  const style = useStyle();
+  return (() => {
+    var _el$ = _tmpl$46();
+    insert(_el$, () => props.children);
+    effect(() => className(_el$, style(props.appearanceKey || "strong", "nt-font-semibold")));
+    return _el$;
+  })();
+};
+var Text = (props) => props.children;
+var Markdown = (props) => {
+  const _a = props, {
+    children,
+    strongAppearanceKey
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "strongAppearanceKey"
+  ]);
+  const tokens = createMemo(() => parseMarkdownIntoTokens(children));
+  return (() => {
+    var _el$2 = _tmpl$213();
+    spread(_el$2, rest, false, true);
+    insert(_el$2, createComponent(For, {
+      get each() {
+        return tokens();
+      },
+      children: (token) => {
+        if (token.type === "bold") {
+          return createComponent(Bold, {
+            appearanceKey: strongAppearanceKey,
+            get children() {
+              return token.content;
+            }
+          });
+        } else {
+          return createComponent(Text, {
+            get children() {
+              return token.content;
+            }
+          });
+        }
+      }
+    }));
+    return _el$2;
+  })();
+};
+var Markdown_default = Markdown;
+
+// src/ui/components/Notification/DefaultNotification.tsx
+var _tmpl$47 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$214 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$311 = /* @__PURE__ */ template(`<a><div><div class="nt-relative nt-shrink-0 nt-float-right"><p></p><div></div></div><div>`);
 var DefaultNotification = (props) => {
   const style = useStyle();
   const {
@@ -2886,14 +2945,14 @@ var DefaultNotification = (props) => {
     }
   };
   return (() => {
-    var _el$ = _tmpl$47(), _el$4 = _el$.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$9 = _el$5.nextSibling, _el$10 = _el$9.nextSibling;
+    var _el$ = _tmpl$311(), _el$4 = _el$.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$5.nextSibling;
     _el$.$$click = handleNotificationClick;
     insert(_el$, createComponent(Show, {
       get when() {
         return !props.notification.isRead;
       },
       get children() {
-        var _el$2 = _tmpl$46();
+        var _el$2 = _tmpl$47();
         effect(() => className(_el$2, style("notificationDot", "nt-absolute -nt-translate-x-[1.0625rem] nt-translate-y-1/2 nt-size-2.5 nt-bg-primary nt-rounded-full nt-border")));
         return _el$2;
       }
@@ -2903,7 +2962,7 @@ var DefaultNotification = (props) => {
         return props.notification.avatar;
       },
       get children() {
-        var _el$3 = _tmpl$213();
+        var _el$3 = _tmpl$214();
         effect((_p$) => {
           var _v$ = style("notificationImage", "nt-size-8 nt-rounded-lg"), _v$2 = props.notification.avatar;
           _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
@@ -3046,15 +3105,26 @@ var DefaultNotification = (props) => {
       get when() {
         return props.notification.subject;
       },
+      children: (subject) => createComponent(Markdown_default, {
+        get ["class"]() {
+          return style("notificationSubject", "nt-text-start");
+        },
+        strongAppearanceKey: "notificationSubject__strong",
+        get children() {
+          return subject();
+        }
+      })
+    }), _el$8);
+    insert(_el$4, createComponent(Markdown_default, {
+      get ["class"]() {
+        return style("notificationBody", "nt-text-start");
+      },
+      strongAppearanceKey: "notificationBody__strong",
       get children() {
-        var _el$8 = _tmpl$311();
-        insert(_el$8, () => props.notification.subject);
-        effect(() => className(_el$8, style("notificationSubject", "nt-text-start nt-font-semibold")));
-        return _el$8;
+        return props.notification.body;
       }
-    }), _el$9);
-    insert(_el$9, () => props.notification.body);
-    insert(_el$10, createComponent(Show, {
+    }), _el$8);
+    insert(_el$8, createComponent(Show, {
       get when() {
         return props.notification.primaryAction;
       },
@@ -3068,7 +3138,7 @@ var DefaultNotification = (props) => {
         }
       })
     }), null);
-    insert(_el$10, createComponent(Show, {
+    insert(_el$8, createComponent(Show, {
       get when() {
         return props.notification.secondaryAction;
       },
@@ -3089,21 +3159,19 @@ var DefaultNotification = (props) => {
       })), _v$4 = style("notificationBody", "nt-overflow-hidden nt-w-full"), _v$5 = style("notificationDate", `nt-transition nt-duration-100 nt-ease-out nt-text-foreground-alpha-400 nt-shrink-0 
               nt-float-right nt-text-right group-hover:nt-opacity-0`), _v$6 = style("notificationDefaultActions", `nt-transition nt-duration-100 nt-ease-out nt-gap-2 nt-flex nt-shrink-0 
               nt-opacity-0 group-hover:nt-opacity-100 nt-justify-center nt-items-center 
-              nt-absolute nt-top-0 nt-right-0  nt-bg-neutral-100 nt-p-0.5 nt-rounded nt-z-50`), _v$7 = style("notificationBody", "nt-text-start"), _v$8 = style("notificationCustomActions", "nt-flex nt-gap-4 nt-mt-4");
+              nt-absolute nt-top-0 nt-right-0  nt-bg-neutral-100 nt-p-0.5 nt-rounded nt-z-50`), _v$7 = style("notificationCustomActions", "nt-flex nt-gap-4 nt-mt-4");
       _v$3 !== _p$.e && className(_el$, _p$.e = _v$3);
       _v$4 !== _p$.t && className(_el$4, _p$.t = _v$4);
       _v$5 !== _p$.a && className(_el$6, _p$.a = _v$5);
       _v$6 !== _p$.o && className(_el$7, _p$.o = _v$6);
-      _v$7 !== _p$.i && className(_el$9, _p$.i = _v$7);
-      _v$8 !== _p$.n && className(_el$10, _p$.n = _v$8);
+      _v$7 !== _p$.i && className(_el$8, _p$.i = _v$7);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
-      i: void 0,
-      n: void 0
+      i: void 0
     });
     return _el$;
   })();
@@ -3214,7 +3282,7 @@ var NotificationListSkeleton = (props) => {
 
 // src/ui/components/Notification/NotificationList.tsx
 var _tmpl$50 = /* @__PURE__ */ template(`<div><p data-localization=notifications.emptyNotice>`);
-var _tmpl$214 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$215 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$312 = /* @__PURE__ */ template(`<div><div>`);
 var EmptyNotificationList = () => {
   const style = useStyle();
@@ -3340,7 +3408,7 @@ var NotificationList = (props) => {
                 return !end();
               },
               get children() {
-                var _el$5 = _tmpl$214();
+                var _el$5 = _tmpl$215();
                 use(setEl, _el$5);
                 insert(_el$5, createComponent(For, {
                   get each() {
@@ -3828,6 +3896,9 @@ var Renderer = (props) => {
     get options() {
       return props.options;
     },
+    get novu() {
+      return props.novu;
+    },
     get children() {
       return createComponent(LocalizationProvider, {
         get localization() {
@@ -3897,9 +3968,9 @@ var Renderer = (props) => {
     }
   });
 };
-var version = "2.0.1";
+var version = "2.1.1";
 var cssHref = `https://cdn.jsdelivr.net/npm/@novu/js@${version}/dist/index.css`;
-var _dispose, _rootElement, _mountedElements, _setMountedElements, _appearance, _setAppearance, _localization, _setLocalization, _options, _setOptions, _tabs, _setTabs, _routerPush, _setRouterPush, _NovuUI_instances, mountComponentRenderer_fn, updateComponentProps_fn;
+var _dispose, _rootElement, _mountedElements, _setMountedElements, _appearance, _setAppearance, _localization, _setLocalization, _options, _setOptions, _tabs, _setTabs, _routerPush, _setRouterPush, _predefinedNovu, _NovuUI_instances, mountComponentRenderer_fn, updateComponentProps_fn;
 var NovuUI = class {
   constructor(props) {
     __privateAdd(this, _NovuUI_instances);
@@ -3917,6 +3988,7 @@ var NovuUI = class {
     __privateAdd(this, _setTabs);
     __privateAdd(this, _routerPush);
     __privateAdd(this, _setRouterPush);
+    __privateAdd(this, _predefinedNovu);
     var _a;
     this.id = generateRandomString(16);
     const [appearance, setAppearance] = createSignal(props.appearance);
@@ -3937,6 +4009,7 @@ var NovuUI = class {
     __privateSet(this, _setTabs, setTabs);
     __privateSet(this, _routerPush, routerPush);
     __privateSet(this, _setRouterPush, setRouterPush);
+    __privateSet(this, _predefinedNovu, props.novu);
     __privateMethod(this, _NovuUI_instances, mountComponentRenderer_fn).call(this);
   }
   mountComponent({
@@ -3999,6 +4072,7 @@ _tabs = new WeakMap();
 _setTabs = new WeakMap();
 _routerPush = new WeakMap();
 _setRouterPush = new WeakMap();
+_predefinedNovu = new WeakMap();
 _NovuUI_instances = new WeakSet();
 mountComponentRenderer_fn = function() {
   if (__privateGet(this, _dispose) !== null) {
@@ -4035,6 +4109,9 @@ mountComponentRenderer_fn = function() {
       get routerPush() {
         var _a;
         return __privateGet(_a = _self$, _routerPush).call(_a);
+      },
+      get novu() {
+        return __privateGet(_self$, _predefinedNovu);
       }
     });
   }, __privateGet(this, _rootElement));