npm - @novu/react - Versions diffs - 2.0.0-alpha.1 → 2.0.0-canary.0 - Mend

@novu/react 2.0.0-alpha.1 → 2.0.0-canary.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/client/index.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
-import { Notification, NotificationClickHandler, NotificationActionClickHandler, BaseNovuUIOptions } from '@novu/js/ui';
+import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab } from '@novu/js/ui';
 export { Notification } from '@novu/js/ui';
 type BellRenderProps = ({ unreadCount }: {
@@ -26,7 +26,16 @@ type DefaultInboxProps = {
     onPrimaryActionClick?: NotificationActionClickHandler;
     onSecondaryActionClick?: NotificationActionClickHandler;
 };
-type BaseProps = BaseNovuUIOptions;
+type BaseProps = {
+    applicationIdentifier: string;
+    subscriberId: string;
+    subscriberHash?: string;
+    backendUrl?: string;
+    socketUrl?: string;
+    appearance?: Appearance;
+    localization?: Localization;
+    tabs?: Array<Tab>;
+};
 type DefaultProps = BaseProps & DefaultInboxProps & {
     children?: never;
 };

package/dist/client/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
-import { Notification, NotificationClickHandler, NotificationActionClickHandler, BaseNovuUIOptions } from '@novu/js/ui';
+import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab } from '@novu/js/ui';
 export { Notification } from '@novu/js/ui';
 type BellRenderProps = ({ unreadCount }: {
@@ -26,7 +26,16 @@ type DefaultInboxProps = {
     onPrimaryActionClick?: NotificationActionClickHandler;
     onSecondaryActionClick?: NotificationActionClickHandler;
 };
-type BaseProps = BaseNovuUIOptions;
+type BaseProps = {
+    applicationIdentifier: string;
+    subscriberId: string;
+    subscriberHash?: string;
+    backendUrl?: string;
+    socketUrl?: string;
+    appearance?: Appearance;
+    localization?: Localization;
+    tabs?: Array<Tab>;
+};
 type DefaultProps = BaseProps & DefaultInboxProps & {
     children?: never;
 };

package/dist/client/index.js CHANGED Viewed

@@ -168,19 +168,19 @@ var DefaultInbox = ({
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Mounter, { mount });
 };
 var Inbox = _react2.default.memo((props) => {
+  const { localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } = props;
+  const options = _react.useMemo.call(void 0, () => {
+    return {
+      localization,
+      appearance,
+      tabs,
+      options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl }
+    };
+  }, [localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl]);
   if (isWithChildrenProps(props)) {
-    const { children, ...options2 } = props;
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Renderer, { options: options2, children });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Renderer, { options, children: props.children });
   }
-  const {
-    open,
-    renderNotification,
-    renderBell,
-    onNotificationClick,
-    onPrimaryActionClick,
-    onSecondaryActionClick,
-    ...options
-  } = props;
+  const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } = props;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Renderer, { options, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
     DefaultInbox,
     {

package/dist/client/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["/Users/pavlotymchuk/projects/js/novu-2/packages/react/dist/client/index.js","../../src/components/Bell.tsx","../../src/utils/createContextAndHook.ts","../../src/context/RenderContext.tsx","../../src/components/Mounter.tsx","../../src/components/Inbox.tsx","../../src/components/Renderer.tsx","../../src/hooks/useDataRef.ts","../../src/components/Preferences.tsx","../../src/components/Notifications.tsx"],"names":[],"mappings":"AAAA;ACAA,4EAAkB;ADElB;AACA;AEHA;AAEO,SAAS,mBAAA,CAAoB,UAAA,EAAqB,QAAA,EAA2D;AAClH,EAAA,GAAA,CAAI,CAAC,UAAA,EAAY;AACf,IAAA,MAAM,OAAO,SAAA,IAAa,SAAA,EAAW,IAAI,KAAA,CAAM,QAAQ,EAAA,EAAI,IAAI,KAAA,CAAM,CAAA,EAAA;AACvE,EAAA;AACF;AAegF;AACpB,EAAA;AACc,EAAA;AACtD,EAAA;AAEG,EAAA;AACa,IAAA;AACf,IAAA;AAEG,IAAA;AACtB,EAAA;AAEqC,EAAA;AACH,IAAA;AAEN,IAAA;AAC5B,EAAA;AAE2C,EAAA;AAC7C;AFf0E;AACA;AGXjE;AAHgF;AAEK;AAC3C,EAAA;AACnD;AHgB0E;AACA;AIjCxD;AA6BT;AApBwC;AACF,EAAA;AAEvB,EAAA;AAChB,IAAA;AACgB,IAAA;AACE,IAAA;AACiB,MAAA;AAChB,MAAA;AACT,QAAA;AACZ,MAAA;AACF,IAAA;AAEa,IAAA;AACa,MAAA;AACP,QAAA;AACjB,MAAA;AACF,IAAA;AACa,EAAA;AAEO,EAAA;AACxB;AJyB0E;AACA;AC9BjE;AAhB4C;AACN,EAAA;AAEzB,EAAA;AACQ,IAAA;AACK,MAAA;AACrB,QAAA;AACN,QAAA;AAE0C,QAAA;AAE3C,MAAA;AACH,IAAA;AACe,IAAA;AACjB,EAAA;AAE8B,EAAA;AAC/B;AD6CyE;AACA;AKzExD;AL2EwD;AACA;AM5ElB;AACnC;AACE;AN8EmD;AACA;AOjFnD;AAEmB;AACjB,EAAA;AACT,EAAA;AAEP,EAAA;AACT;APiF0E;AACA;AMvBtE;AAnD8D;AAC3B,EAAA;AACoB,EAAA;AACF,EAAA;AAElC,EAAA;AACkC,IAAA;AACtB,MAAA;AACY,QAAA;AACE,QAAA;AAElC,QAAA;AACR,MAAA;AAEY,MAAA;AACkB,QAAA;AACY,UAAA;AACX,UAAA;AAErB,UAAA;AACR,QAAA;AACH,MAAA;AACF,IAAA;AACmB,IAAA;AACrB,EAAA;AAEgB,EAAA;AAC4B,IAAA;AAC5B,IAAA;AAED,IAAA;AACE,MAAA;AACf,IAAA;AACG,EAAA;AAEW,EAAA;AACD,IAAA;AACX,MAAA;AACF,IAAA;AAE0C,IAAA;AACI,IAAA;AAChB,IAAA;AACM,IAAA;AAC1B,EAAA;AAEC,EAAA;AACJ,IAAA;AACT,EAAA;AAG2C,EAAA;AACkB,IAAA;AACH,MAAA;AACrD,IAAA;AAEA,IAAA;AACH,EAAA;AAEJ;ANgE0E;AACA;AKrGjE;AA9Ba;AACpB,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACuB;AACsB,EAAA;AAEzB,EAAA;AACQ,IAAA;AACK,MAAA;AACrB,QAAA;AACC,QAAA;AACL,UAAA;AAEwB,UAAA;AAEsC,UAAA;AAC9D,UAAA;AACA,UAAA;AACA,UAAA;AACF,QAAA;AACA,QAAA;AACD,MAAA;AACH,IAAA;AAC4D,IAAA;AAC9D,EAAA;AAE8B,EAAA;AAChC;AAEuD;AACrB,EAAA;AACG,IAAA;AAEY,IAAA;AAC/C,EAAA;AAEM,EAAA;AACJ,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACG,IAAA;AACD,EAAA;AAIA,EAAA;AAAC,IAAA;AAAA,IAAA;AACC,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AAAA,IAAA;AAEJ,EAAA;AAEH;AAE2E;AACrD,EAAA;AACvB;AL4H0E;AACA;AQvMxD;AAcT;AAVwB;AACA,EAAA;AAE2B,EAAA;AAC3B,IAAA;AACrB,MAAA;AACN,MAAA;AACD,IAAA;AACE,EAAA;AAEyB,EAAA;AAChC;ARqM0E;AACA;ASrNxD;AAmCP;AAtBwB;AACuB,EAAA;AACT,IAAA;AAEzB,IAAA;AACQ,MAAA;AACK,QAAA;AACrB,UAAA;AACN,UAAA;AAEI,UAAA;AACgE,YAAA;AAC9D,YAAA;AACA,YAAA;AACA,YAAA;AAE2C,UAAA;AAClD,QAAA;AACH,MAAA;AACsD,MAAA;AACxD,IAAA;AAE8B,IAAA;AAChC,EAAA;AACF;ATwM0E;AACA;AACA;AACA;AACA;AACA","file":"/Users/pavlotymchuk/projects/js/novu-2/packages/react/dist/client/index.js","sourcesContent":[null,"import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport type BellRenderProps = ({ unreadCount }: { unreadCount: number }) => React.ReactNode;\n\nexport type BellProps = {\n children?: never \| BellRenderProps;\n};\n\nexport const Bell = React.memo((props: BellProps) => {\n const { novuUI, mountElement } = useRenderer();\n\n const mount = React.useCallback(\n (element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Bell',\n element,\n props: props.children\n ? { mountBell: (el, { unreadCount }) => mountElement(el, props.children?.({ unreadCount })) }\n : undefined,\n });\n },\n [props.children]\n );\n\n return <Mounter mount={mount} />;\n});\n","import React from 'react';\n\nexport function assertContextExists(contextVal: unknown, msgOrCtx: string \| React.Context<any>): asserts contextVal {\n if (!contextVal) {\n throw typeof msgOrCtx === 'string' ? new Error(msgOrCtx) : new Error(`${msgOrCtx.displayName} not found`);\n }\n}\n\ntype Options = { assertCtxFn?: (v: unknown, msg: string) => void };\ntype ContextOf<T> = React.Context<{ value: T } \| undefined>;\ntype UseCtxFn<T> = () => T;\n\n/*\n Creates and returns a Context and two hooks that return the context value.\n * The Context type is derived from the type passed in by the user.\n * The first hook returned guarantees that the context exists so the returned value is always CtxValue\n * The second hook makes no guarantees, so the returned value can be CtxValue \| undefined\n /\nexport const createContextAndHook = <CtxVal>(\n displayName: string,\n options?: Options\n): [ContextOf<CtxVal>, UseCtxFn<CtxVal>, UseCtxFn<CtxVal \| Partial<CtxVal>>] => {\n const { assertCtxFn = assertContextExists } = options \|\| {};\n const Ctx = React.createContext<{ value: CtxVal } \| undefined>(undefined);\n Ctx.displayName = displayName;\n\n const useCtx = () => {\n const ctx = React.useContext(Ctx);\n assertCtxFn(ctx, `Component must be wrapped with the <Inbox /> Component`);\n\n return (ctx as any).value as CtxVal;\n };\n\n const useCtxWithoutGuarantee = () => {\n const ctx = React.useContext(Ctx);\n\n return ctx ? ctx.value : {};\n };\n\n return [Ctx, useCtx, useCtxWithoutGuarantee];\n};\n","import React from 'react';\nimport type { NovuUI } from '@novu/js/ui';\nimport { createContextAndHook } from '../utils/createContextAndHook';\n\nexport type MountedElement = React.ReactNode;\nexport type MountedElements = Map<HTMLElement, MountedElement>;\n\ntype RendererContextValue = {\n mountElement: (el: HTMLElement, mountedElement: MountedElement) => () => void;\n novuUI: NovuUI;\n};\n\nconst [RendererContext, useRendererContext] = createContextAndHook<RendererContextValue>('RendererContext');\n\nconst RendererProvider = (props: React.PropsWithChildren<{ value: RendererContextValue }>) => {\n return <RendererContext.Provider value={{ value: props.value }}>{props.children}</RendererContext.Provider>;\n};\n\nexport { useRendererContext as useRenderer, RendererProvider };\n","import React from 'react';\n\ntype MounterProps = {\n mount: (node: HTMLElement) => ((node: HTMLElement) => void) \| void;\n};\n\n/\n Mounter allows you to mount a component to a DOM node.\n /\nexport function Mounter({ mount }: MounterProps) {\n const ref = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n let unmount: (node: HTMLDivElement) => void \| undefined;\n const element = ref.current;\n if (element && mount) {\n const possibleUnmount = mount(element);\n if (possibleUnmount) {\n unmount = possibleUnmount;\n }\n }\n\n return () => {\n if (element && unmount) {\n unmount(element);\n }\n };\n }, [ref, mount]);\n\n return <div ref={ref} />;\n}\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { Renderer } from './Renderer';\n\nexport type InboxProps = DefaultProps \| WithChildrenProps;\n\nconst DefaultInbox = ({\n open,\n renderNotification,\n renderBell,\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n}: DefaultInboxProps) => {\n const { novuUI, mountElement } = useRenderer();\n\n const mount = React.useCallback(\n (element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Inbox',\n props: {\n open,\n mountNotification: renderNotification\n ? (el, { notification }) => mountElement(el, renderNotification({ notification }))\n : undefined,\n mountBell: renderBell ? (el, { unreadCount }) => mountElement(el, renderBell({ unreadCount })) : undefined,\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n },\n element,\n });\n },\n [open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n );\n\n return <Mounter mount={mount} />;\n};\n\nexport const Inbox = React.memo((props: InboxProps) => {\n if (isWithChildrenProps(props)) {\n const { children, ...options } = props;\n\n return <Renderer options={options}>{children}</Renderer>;\n }\n\n const {\n open,\n renderNotification,\n renderBell,\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n ...options\n } = props;\n\n return (\n <Renderer options={options}>\n <DefaultInbox\n open={open}\n renderNotification={renderNotification}\n renderBell={renderBell}\n onNotificationClick={onNotificationClick}\n onPrimaryActionClick={onPrimaryActionClick}\n onSecondaryActionClick={onSecondaryActionClick}\n />\n </Renderer>\n );\n});\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n return 'children' in props;\n}\n","import React, { useCallback, useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { NovuUI } from '@novu/js/ui';\nimport type { NovuUIOptions } from '@novu/js/ui';\nimport { MountedElement, RendererProvider } from '../context/RenderContext';\nimport { useDataRef } from '../hooks/useDataRef';\n\ntype RendererProps = React.PropsWithChildren<{\n options: NovuUIOptions;\n}>;\n\n/\n \n * Renderer component that provides the NovuUI instance and mounts the elements on DOM in a portal\n */\nexport const Renderer = ({ options, children }: RendererProps) => {\n const optionsRef = useDataRef(options);\n const [novuUI, setNovuUI] = useState<NovuUI \| undefined>();\n const [mountedElements, setMountedElements] = useState(new Map<HTMLElement, MountedElement>());\n\n const mountElement = useCallback(\n (el: HTMLElement, mountedElement: MountedElement) => {\n setMountedElements((prev) => {\n const newMountedElements = new Map(prev);\n newMountedElements.set(el, mountedElement);\n\n return newMountedElements;\n });\n\n return () => {\n setMountedElements((prev) => {\n const newMountedElements = new Map(prev);\n newMountedElements.delete(el);\n\n return newMountedElements;\n });\n };\n },\n [setMountedElements]\n );\n\n useEffect(() => {\n const novu = new NovuUI(optionsRef.current);\n setNovuUI(novu);\n\n return () => {\n novu.unmount();\n };\n }, []);\n\n useEffect(() => {\n if (!novuUI) {\n return;\n }\n\n novuUI.updateAppearance(options.appearance);\n novuUI.updateLocalization(options.localization);\n novuUI.updateTabs(options.tabs);\n novuUI.updateOptions(options.options);\n }, [options]);\n\n if (!novuUI) {\n return null;\n }\n\n return (\n <RendererProvider value={{ mountElement, novuUI }}>\n {[...mountedElements].map(([element, mountedElement]) => {\n return ReactDOM.createPortal(mountedElement, element);\n })}\n\n {children}\n </RendererProvider>\n );\n};\n","import { useRef } from 'react';\n\nexport const useDataRef = <T>(data: T) => {\n const ref = useRef(data);\n ref.current = data;\n\n return ref;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport const Preferences = () => {\n const { novuUI } = useRenderer();\n\n const mount = React.useCallback((element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Preferences',\n element,\n });\n }, []);\n\n return <Mounter mount={mount} />;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { NotificationsRenderProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport type { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';\n\nexport type NotificationProps = {\n children?: never \| NotificationsRenderProps;\n onNotificationClick?: NotificationClickHandler;\n onPrimaryActionClick?: NotificationActionClickHandler;\n onSecondaryActionClick?: NotificationActionClickHandler;\n};\n\nexport const Notifications = React.memo(\n ({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }: NotificationProps) => {\n const { novuUI, mountElement } = useRenderer();\n\n const mount = React.useCallback(\n (element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Notifications',\n element,\n props: children\n ? {\n mountNotification: (el, { notification }) => mountElement(el, children?.({ notification })),\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n }\n : { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick },\n });\n },\n [children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n );\n\n return <Mounter mount={mount} />;\n }\n);\n"]}
1	+ {"version":3,"sources":["/Users/pavlotymchuk/projects/js/novu-2/packages/react/dist/client/index.js","../../src/components/Bell.tsx","../../src/utils/createContextAndHook.ts","../../src/context/RenderContext.tsx","../../src/components/Mounter.tsx","../../src/components/Inbox.tsx","../../src/components/Renderer.tsx","../../src/hooks/useDataRef.ts","../../src/components/Preferences.tsx","../../src/components/Notifications.tsx"],"names":[],"mappings":"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","file":"/Users/pavlotymchuk/projects/js/novu-2/packages/react/dist/client/index.js","sourcesContent":[null,"import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport type BellRenderProps = ({ unreadCount }: { unreadCount: number }) => React.ReactNode;\n\nexport type BellProps = {\n children?: never \| BellRenderProps;\n};\n\nexport const Bell = React.memo((props: BellProps) => {\n const { novuUI, mountElement } = useRenderer();\n\n const mount = React.useCallback(\n (element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Bell',\n element,\n props: props.children\n ? { mountBell: (el, { unreadCount }) => mountElement(el, props.children?.({ unreadCount })) }\n : undefined,\n });\n },\n [props.children]\n );\n\n return <Mounter mount={mount} />;\n});\n","import React from 'react';\n\nexport function assertContextExists(contextVal: unknown, msgOrCtx: string \| React.Context<any>): asserts contextVal {\n if (!contextVal) {\n throw typeof msgOrCtx === 'string' ? new Error(msgOrCtx) : new Error(`${msgOrCtx.displayName} not found`);\n }\n}\n\ntype Options = { assertCtxFn?: (v: unknown, msg: string) => void };\ntype ContextOf<T> = React.Context<{ value: T } \| undefined>;\ntype UseCtxFn<T> = () => T;\n\n/*\n Creates and returns a Context and two hooks that return the context value.\n * The Context type is derived from the type passed in by the user.\n * The first hook returned guarantees that the context exists so the returned value is always CtxValue\n * The second hook makes no guarantees, so the returned value can be CtxValue \| undefined\n /\nexport const createContextAndHook = <CtxVal>(\n displayName: string,\n options?: Options\n): [ContextOf<CtxVal>, UseCtxFn<CtxVal>, UseCtxFn<CtxVal \| Partial<CtxVal>>] => {\n const { assertCtxFn = assertContextExists } = options \|\| {};\n const Ctx = React.createContext<{ value: CtxVal } \| undefined>(undefined);\n Ctx.displayName = displayName;\n\n const useCtx = () => {\n const ctx = React.useContext(Ctx);\n assertCtxFn(ctx, `Component must be wrapped with the <Inbox /> Component`);\n\n return (ctx as any).value as CtxVal;\n };\n\n const useCtxWithoutGuarantee = () => {\n const ctx = React.useContext(Ctx);\n\n return ctx ? ctx.value : {};\n };\n\n return [Ctx, useCtx, useCtxWithoutGuarantee];\n};\n","import React from 'react';\nimport type { NovuUI } from '@novu/js/ui';\nimport { createContextAndHook } from '../utils/createContextAndHook';\n\nexport type MountedElement = React.ReactNode;\nexport type MountedElements = Map<HTMLElement, MountedElement>;\n\ntype RendererContextValue = {\n mountElement: (el: HTMLElement, mountedElement: MountedElement) => () => void;\n novuUI: NovuUI;\n};\n\nconst [RendererContext, useRendererContext] = createContextAndHook<RendererContextValue>('RendererContext');\n\nconst RendererProvider = (props: React.PropsWithChildren<{ value: RendererContextValue }>) => {\n return <RendererContext.Provider value={{ value: props.value }}>{props.children}</RendererContext.Provider>;\n};\n\nexport { useRendererContext as useRenderer, RendererProvider };\n","import React from 'react';\n\ntype MounterProps = {\n mount: (node: HTMLElement) => ((node: HTMLElement) => void) \| void;\n};\n\n/\n Mounter allows you to mount a component to a DOM node.\n /\nexport function Mounter({ mount }: MounterProps) {\n const ref = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n let unmount: (node: HTMLDivElement) => void \| undefined;\n const element = ref.current;\n if (element && mount) {\n const possibleUnmount = mount(element);\n if (possibleUnmount) {\n unmount = possibleUnmount;\n }\n }\n\n return () => {\n if (element && unmount) {\n unmount(element);\n }\n };\n }, [ref, mount]);\n\n return <div ref={ref} />;\n}\n","import React, { useMemo } from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { Renderer } from './Renderer';\n\nexport type InboxProps = DefaultProps \| WithChildrenProps;\n\nconst DefaultInbox = ({\n open,\n renderNotification,\n renderBell,\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n}: DefaultInboxProps) => {\n const { novuUI, mountElement } = useRenderer();\n\n const mount = React.useCallback(\n (element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Inbox',\n props: {\n open,\n mountNotification: renderNotification\n ? (el, { notification }) => mountElement(el, renderNotification({ notification }))\n : undefined,\n mountBell: renderBell ? (el, { unreadCount }) => mountElement(el, renderBell({ unreadCount })) : undefined,\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n },\n element,\n });\n },\n [open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n );\n\n return <Mounter mount={mount} />;\n};\n\nexport const Inbox = React.memo((props: InboxProps) => {\n const { localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } =\n props;\n\n const options = useMemo(() => {\n return {\n localization,\n appearance,\n tabs,\n options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl },\n };\n }, [localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl]);\n\n if (isWithChildrenProps(props)) {\n return <Renderer options={options}>{props.children}</Renderer>;\n }\n\n const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } =\n props;\n\n return (\n <Renderer options={options}>\n <DefaultInbox\n open={open}\n renderNotification={renderNotification}\n renderBell={renderBell}\n onNotificationClick={onNotificationClick}\n onPrimaryActionClick={onPrimaryActionClick}\n onSecondaryActionClick={onSecondaryActionClick}\n />\n </Renderer>\n );\n});\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n return 'children' in props;\n}\n","import React, { useCallback, useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { NovuUI } from '@novu/js/ui';\nimport type { NovuUIOptions } from '@novu/js/ui';\nimport { MountedElement, RendererProvider } from '../context/RenderContext';\nimport { useDataRef } from '../hooks/useDataRef';\n\ntype RendererProps = React.PropsWithChildren<{\n options: NovuUIOptions;\n}>;\n\n/\n \n * Renderer component that provides the NovuUI instance and mounts the elements on DOM in a portal\n */\nexport const Renderer = ({ options, children }: RendererProps) => {\n const optionsRef = useDataRef(options);\n const [novuUI, setNovuUI] = useState<NovuUI \| undefined>();\n const [mountedElements, setMountedElements] = useState(new Map<HTMLElement, MountedElement>());\n\n const mountElement = useCallback(\n (el: HTMLElement, mountedElement: MountedElement) => {\n setMountedElements((prev) => {\n const newMountedElements = new Map(prev);\n newMountedElements.set(el, mountedElement);\n\n return newMountedElements;\n });\n\n return () => {\n setMountedElements((prev) => {\n const newMountedElements = new Map(prev);\n newMountedElements.delete(el);\n\n return newMountedElements;\n });\n };\n },\n [setMountedElements]\n );\n\n useEffect(() => {\n const novu = new NovuUI(optionsRef.current);\n setNovuUI(novu);\n\n return () => {\n novu.unmount();\n };\n }, []);\n\n useEffect(() => {\n if (!novuUI) {\n return;\n }\n\n novuUI.updateAppearance(options.appearance);\n novuUI.updateLocalization(options.localization);\n novuUI.updateTabs(options.tabs);\n novuUI.updateOptions(options.options);\n }, [options]);\n\n if (!novuUI) {\n return null;\n }\n\n return (\n <RendererProvider value={{ mountElement, novuUI }}>\n {[...mountedElements].map(([element, mountedElement]) => {\n return ReactDOM.createPortal(mountedElement, element);\n })}\n\n {children}\n </RendererProvider>\n );\n};\n","import { useRef } from 'react';\n\nexport const useDataRef = <T>(data: T) => {\n const ref = useRef(data);\n ref.current = data;\n\n return ref;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport const Preferences = () => {\n const { novuUI } = useRenderer();\n\n const mount = React.useCallback((element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Preferences',\n element,\n });\n }, []);\n\n return <Mounter mount={mount} />;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { NotificationsRenderProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport type { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';\n\nexport type NotificationProps = {\n children?: never \| NotificationsRenderProps;\n onNotificationClick?: NotificationClickHandler;\n onPrimaryActionClick?: NotificationActionClickHandler;\n onSecondaryActionClick?: NotificationActionClickHandler;\n};\n\nexport const Notifications = React.memo(\n ({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }: NotificationProps) => {\n const { novuUI, mountElement } = useRenderer();\n\n const mount = React.useCallback(\n (element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Notifications',\n element,\n props: children\n ? {\n mountNotification: (el, { notification }) => mountElement(el, children?.({ notification })),\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n }\n : { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick },\n });\n },\n [children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n );\n\n return <Mounter mount={mount} />;\n }\n);\n"]}

package/dist/client/index.mjs CHANGED Viewed

@@ -72,7 +72,7 @@ var Bell = React3.memo((props) => {
 });
 // src/components/Inbox.tsx
-import React5 from "react";
+import React5, { useMemo } from "react";
 // src/components/Renderer.tsx
 import { useCallback, useEffect, useState } from "react";
@@ -168,19 +168,19 @@ var DefaultInbox = ({
   return /* @__PURE__ */ jsx4(Mounter, { mount });
 };
 var Inbox = React5.memo((props) => {
+  const { localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } = props;
+  const options = useMemo(() => {
+    return {
+      localization,
+      appearance,
+      tabs,
+      options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl }
+    };
+  }, [localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl]);
   if (isWithChildrenProps(props)) {
-    const { children, ...options2 } = props;
-    return /* @__PURE__ */ jsx4(Renderer, { options: options2, children });
+    return /* @__PURE__ */ jsx4(Renderer, { options, children: props.children });
   }
-  const {
-    open,
-    renderNotification,
-    renderBell,
-    onNotificationClick,
-    onPrimaryActionClick,
-    onSecondaryActionClick,
-    ...options
-  } = props;
+  const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } = props;
   return /* @__PURE__ */ jsx4(Renderer, { options, children: /* @__PURE__ */ jsx4(
     DefaultInbox,
     {

package/dist/client/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/components/Bell.tsx","../../src/utils/createContextAndHook.ts","../../src/context/RenderContext.tsx","../../src/components/Mounter.tsx","../../src/components/Inbox.tsx","../../src/components/Renderer.tsx","../../src/hooks/useDataRef.ts","../../src/components/Preferences.tsx","../../src/components/Notifications.tsx"],"sourcesContent":["import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport type BellRenderProps = ({ unreadCount }: { unreadCount: number }) => React.ReactNode;\n\nexport type BellProps = {\n children?: never \| BellRenderProps;\n};\n\nexport const Bell = React.memo((props: BellProps) => {\n const { novuUI, mountElement } = useRenderer();\n\n const mount = React.useCallback(\n (element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Bell',\n element,\n props: props.children\n ? { mountBell: (el, { unreadCount }) => mountElement(el, props.children?.({ unreadCount })) }\n : undefined,\n });\n },\n [props.children]\n );\n\n return <Mounter mount={mount} />;\n});\n","import React from 'react';\n\nexport function assertContextExists(contextVal: unknown, msgOrCtx: string \| React.Context<any>): asserts contextVal {\n if (!contextVal) {\n throw typeof msgOrCtx === 'string' ? new Error(msgOrCtx) : new Error(`${msgOrCtx.displayName} not found`);\n }\n}\n\ntype Options = { assertCtxFn?: (v: unknown, msg: string) => void };\ntype ContextOf<T> = React.Context<{ value: T } \| undefined>;\ntype UseCtxFn<T> = () => T;\n\n/*\n Creates and returns a Context and two hooks that return the context value.\n * The Context type is derived from the type passed in by the user.\n * The first hook returned guarantees that the context exists so the returned value is always CtxValue\n * The second hook makes no guarantees, so the returned value can be CtxValue \| undefined\n /\nexport const createContextAndHook = <CtxVal>(\n displayName: string,\n options?: Options\n): [ContextOf<CtxVal>, UseCtxFn<CtxVal>, UseCtxFn<CtxVal \| Partial<CtxVal>>] => {\n const { assertCtxFn = assertContextExists } = options \|\| {};\n const Ctx = React.createContext<{ value: CtxVal } \| undefined>(undefined);\n Ctx.displayName = displayName;\n\n const useCtx = () => {\n const ctx = React.useContext(Ctx);\n assertCtxFn(ctx, `Component must be wrapped with the <Inbox /> Component`);\n\n return (ctx as any).value as CtxVal;\n };\n\n const useCtxWithoutGuarantee = () => {\n const ctx = React.useContext(Ctx);\n\n return ctx ? ctx.value : {};\n };\n\n return [Ctx, useCtx, useCtxWithoutGuarantee];\n};\n","import React from 'react';\nimport type { NovuUI } from '@novu/js/ui';\nimport { createContextAndHook } from '../utils/createContextAndHook';\n\nexport type MountedElement = React.ReactNode;\nexport type MountedElements = Map<HTMLElement, MountedElement>;\n\ntype RendererContextValue = {\n mountElement: (el: HTMLElement, mountedElement: MountedElement) => () => void;\n novuUI: NovuUI;\n};\n\nconst [RendererContext, useRendererContext] = createContextAndHook<RendererContextValue>('RendererContext');\n\nconst RendererProvider = (props: React.PropsWithChildren<{ value: RendererContextValue }>) => {\n return <RendererContext.Provider value={{ value: props.value }}>{props.children}</RendererContext.Provider>;\n};\n\nexport { useRendererContext as useRenderer, RendererProvider };\n","import React from 'react';\n\ntype MounterProps = {\n mount: (node: HTMLElement) => ((node: HTMLElement) => void) \| void;\n};\n\n/\n Mounter allows you to mount a component to a DOM node.\n /\nexport function Mounter({ mount }: MounterProps) {\n const ref = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n let unmount: (node: HTMLDivElement) => void \| undefined;\n const element = ref.current;\n if (element && mount) {\n const possibleUnmount = mount(element);\n if (possibleUnmount) {\n unmount = possibleUnmount;\n }\n }\n\n return () => {\n if (element && unmount) {\n unmount(element);\n }\n };\n }, [ref, mount]);\n\n return <div ref={ref} />;\n}\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { Renderer } from './Renderer';\n\nexport type InboxProps = DefaultProps \| WithChildrenProps;\n\nconst DefaultInbox = ({\n open,\n renderNotification,\n renderBell,\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n}: DefaultInboxProps) => {\n const { novuUI, mountElement } = useRenderer();\n\n const mount = React.useCallback(\n (element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Inbox',\n props: {\n open,\n mountNotification: renderNotification\n ? (el, { notification }) => mountElement(el, renderNotification({ notification }))\n : undefined,\n mountBell: renderBell ? (el, { unreadCount }) => mountElement(el, renderBell({ unreadCount })) : undefined,\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n },\n element,\n });\n },\n [open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n );\n\n return <Mounter mount={mount} />;\n};\n\nexport const Inbox = React.memo((props: InboxProps) => {\n if (isWithChildrenProps(props)) {\n const { children, ...options } = props;\n\n return <Renderer options={options}>{children}</Renderer>;\n }\n\n const {\n open,\n renderNotification,\n renderBell,\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n ...options\n } = props;\n\n return (\n <Renderer options={options}>\n <DefaultInbox\n open={open}\n renderNotification={renderNotification}\n renderBell={renderBell}\n onNotificationClick={onNotificationClick}\n onPrimaryActionClick={onPrimaryActionClick}\n onSecondaryActionClick={onSecondaryActionClick}\n />\n </Renderer>\n );\n});\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n return 'children' in props;\n}\n","import React, { useCallback, useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { NovuUI } from '@novu/js/ui';\nimport type { NovuUIOptions } from '@novu/js/ui';\nimport { MountedElement, RendererProvider } from '../context/RenderContext';\nimport { useDataRef } from '../hooks/useDataRef';\n\ntype RendererProps = React.PropsWithChildren<{\n options: NovuUIOptions;\n}>;\n\n/\n \n * Renderer component that provides the NovuUI instance and mounts the elements on DOM in a portal\n */\nexport const Renderer = ({ options, children }: RendererProps) => {\n const optionsRef = useDataRef(options);\n const [novuUI, setNovuUI] = useState<NovuUI \| undefined>();\n const [mountedElements, setMountedElements] = useState(new Map<HTMLElement, MountedElement>());\n\n const mountElement = useCallback(\n (el: HTMLElement, mountedElement: MountedElement) => {\n setMountedElements((prev) => {\n const newMountedElements = new Map(prev);\n newMountedElements.set(el, mountedElement);\n\n return newMountedElements;\n });\n\n return () => {\n setMountedElements((prev) => {\n const newMountedElements = new Map(prev);\n newMountedElements.delete(el);\n\n return newMountedElements;\n });\n };\n },\n [setMountedElements]\n );\n\n useEffect(() => {\n const novu = new NovuUI(optionsRef.current);\n setNovuUI(novu);\n\n return () => {\n novu.unmount();\n };\n }, []);\n\n useEffect(() => {\n if (!novuUI) {\n return;\n }\n\n novuUI.updateAppearance(options.appearance);\n novuUI.updateLocalization(options.localization);\n novuUI.updateTabs(options.tabs);\n novuUI.updateOptions(options.options);\n }, [options]);\n\n if (!novuUI) {\n return null;\n }\n\n return (\n <RendererProvider value={{ mountElement, novuUI }}>\n {[...mountedElements].map(([element, mountedElement]) => {\n return ReactDOM.createPortal(mountedElement, element);\n })}\n\n {children}\n </RendererProvider>\n );\n};\n","import { useRef } from 'react';\n\nexport const useDataRef = <T>(data: T) => {\n const ref = useRef(data);\n ref.current = data;\n\n return ref;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport const Preferences = () => {\n const { novuUI } = useRenderer();\n\n const mount = React.useCallback((element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Preferences',\n element,\n });\n }, []);\n\n return <Mounter mount={mount} />;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { NotificationsRenderProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport type { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';\n\nexport type NotificationProps = {\n children?: never \| NotificationsRenderProps;\n onNotificationClick?: NotificationClickHandler;\n onPrimaryActionClick?: NotificationActionClickHandler;\n onSecondaryActionClick?: NotificationActionClickHandler;\n};\n\nexport const Notifications = React.memo(\n ({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }: NotificationProps) => {\n const { novuUI, mountElement } = useRenderer();\n\n const mount = React.useCallback(\n (element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Notifications',\n element,\n props: children\n ? {\n mountNotification: (el, { notification }) => mountElement(el, children?.({ notification })),\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n }\n : { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick },\n });\n },\n [children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n );\n\n return <Mounter mount={mount} />;\n }\n);\n"],"mappings":"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","names":["React","React","jsx","jsx","React","React","jsx","React","options","React","jsx","React","React","jsx","React"]}
1	+ {"version":3,"sources":["../../src/components/Bell.tsx","../../src/utils/createContextAndHook.ts","../../src/context/RenderContext.tsx","../../src/components/Mounter.tsx","../../src/components/Inbox.tsx","../../src/components/Renderer.tsx","../../src/hooks/useDataRef.ts","../../src/components/Preferences.tsx","../../src/components/Notifications.tsx"],"sourcesContent":["import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport type BellRenderProps = ({ unreadCount }: { unreadCount: number }) => React.ReactNode;\n\nexport type BellProps = {\n children?: never \| BellRenderProps;\n};\n\nexport const Bell = React.memo((props: BellProps) => {\n const { novuUI, mountElement } = useRenderer();\n\n const mount = React.useCallback(\n (element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Bell',\n element,\n props: props.children\n ? { mountBell: (el, { unreadCount }) => mountElement(el, props.children?.({ unreadCount })) }\n : undefined,\n });\n },\n [props.children]\n );\n\n return <Mounter mount={mount} />;\n});\n","import React from 'react';\n\nexport function assertContextExists(contextVal: unknown, msgOrCtx: string \| React.Context<any>): asserts contextVal {\n if (!contextVal) {\n throw typeof msgOrCtx === 'string' ? new Error(msgOrCtx) : new Error(`${msgOrCtx.displayName} not found`);\n }\n}\n\ntype Options = { assertCtxFn?: (v: unknown, msg: string) => void };\ntype ContextOf<T> = React.Context<{ value: T } \| undefined>;\ntype UseCtxFn<T> = () => T;\n\n/*\n Creates and returns a Context and two hooks that return the context value.\n * The Context type is derived from the type passed in by the user.\n * The first hook returned guarantees that the context exists so the returned value is always CtxValue\n * The second hook makes no guarantees, so the returned value can be CtxValue \| undefined\n /\nexport const createContextAndHook = <CtxVal>(\n displayName: string,\n options?: Options\n): [ContextOf<CtxVal>, UseCtxFn<CtxVal>, UseCtxFn<CtxVal \| Partial<CtxVal>>] => {\n const { assertCtxFn = assertContextExists } = options \|\| {};\n const Ctx = React.createContext<{ value: CtxVal } \| undefined>(undefined);\n Ctx.displayName = displayName;\n\n const useCtx = () => {\n const ctx = React.useContext(Ctx);\n assertCtxFn(ctx, `Component must be wrapped with the <Inbox /> Component`);\n\n return (ctx as any).value as CtxVal;\n };\n\n const useCtxWithoutGuarantee = () => {\n const ctx = React.useContext(Ctx);\n\n return ctx ? ctx.value : {};\n };\n\n return [Ctx, useCtx, useCtxWithoutGuarantee];\n};\n","import React from 'react';\nimport type { NovuUI } from '@novu/js/ui';\nimport { createContextAndHook } from '../utils/createContextAndHook';\n\nexport type MountedElement = React.ReactNode;\nexport type MountedElements = Map<HTMLElement, MountedElement>;\n\ntype RendererContextValue = {\n mountElement: (el: HTMLElement, mountedElement: MountedElement) => () => void;\n novuUI: NovuUI;\n};\n\nconst [RendererContext, useRendererContext] = createContextAndHook<RendererContextValue>('RendererContext');\n\nconst RendererProvider = (props: React.PropsWithChildren<{ value: RendererContextValue }>) => {\n return <RendererContext.Provider value={{ value: props.value }}>{props.children}</RendererContext.Provider>;\n};\n\nexport { useRendererContext as useRenderer, RendererProvider };\n","import React from 'react';\n\ntype MounterProps = {\n mount: (node: HTMLElement) => ((node: HTMLElement) => void) \| void;\n};\n\n/\n Mounter allows you to mount a component to a DOM node.\n /\nexport function Mounter({ mount }: MounterProps) {\n const ref = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n let unmount: (node: HTMLDivElement) => void \| undefined;\n const element = ref.current;\n if (element && mount) {\n const possibleUnmount = mount(element);\n if (possibleUnmount) {\n unmount = possibleUnmount;\n }\n }\n\n return () => {\n if (element && unmount) {\n unmount(element);\n }\n };\n }, [ref, mount]);\n\n return <div ref={ref} />;\n}\n","import React, { useMemo } from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { Renderer } from './Renderer';\n\nexport type InboxProps = DefaultProps \| WithChildrenProps;\n\nconst DefaultInbox = ({\n open,\n renderNotification,\n renderBell,\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n}: DefaultInboxProps) => {\n const { novuUI, mountElement } = useRenderer();\n\n const mount = React.useCallback(\n (element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Inbox',\n props: {\n open,\n mountNotification: renderNotification\n ? (el, { notification }) => mountElement(el, renderNotification({ notification }))\n : undefined,\n mountBell: renderBell ? (el, { unreadCount }) => mountElement(el, renderBell({ unreadCount })) : undefined,\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n },\n element,\n });\n },\n [open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n );\n\n return <Mounter mount={mount} />;\n};\n\nexport const Inbox = React.memo((props: InboxProps) => {\n const { localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } =\n props;\n\n const options = useMemo(() => {\n return {\n localization,\n appearance,\n tabs,\n options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl },\n };\n }, [localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl]);\n\n if (isWithChildrenProps(props)) {\n return <Renderer options={options}>{props.children}</Renderer>;\n }\n\n const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } =\n props;\n\n return (\n <Renderer options={options}>\n <DefaultInbox\n open={open}\n renderNotification={renderNotification}\n renderBell={renderBell}\n onNotificationClick={onNotificationClick}\n onPrimaryActionClick={onPrimaryActionClick}\n onSecondaryActionClick={onSecondaryActionClick}\n />\n </Renderer>\n );\n});\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n return 'children' in props;\n}\n","import React, { useCallback, useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { NovuUI } from '@novu/js/ui';\nimport type { NovuUIOptions } from '@novu/js/ui';\nimport { MountedElement, RendererProvider } from '../context/RenderContext';\nimport { useDataRef } from '../hooks/useDataRef';\n\ntype RendererProps = React.PropsWithChildren<{\n options: NovuUIOptions;\n}>;\n\n/\n \n * Renderer component that provides the NovuUI instance and mounts the elements on DOM in a portal\n */\nexport const Renderer = ({ options, children }: RendererProps) => {\n const optionsRef = useDataRef(options);\n const [novuUI, setNovuUI] = useState<NovuUI \| undefined>();\n const [mountedElements, setMountedElements] = useState(new Map<HTMLElement, MountedElement>());\n\n const mountElement = useCallback(\n (el: HTMLElement, mountedElement: MountedElement) => {\n setMountedElements((prev) => {\n const newMountedElements = new Map(prev);\n newMountedElements.set(el, mountedElement);\n\n return newMountedElements;\n });\n\n return () => {\n setMountedElements((prev) => {\n const newMountedElements = new Map(prev);\n newMountedElements.delete(el);\n\n return newMountedElements;\n });\n };\n },\n [setMountedElements]\n );\n\n useEffect(() => {\n const novu = new NovuUI(optionsRef.current);\n setNovuUI(novu);\n\n return () => {\n novu.unmount();\n };\n }, []);\n\n useEffect(() => {\n if (!novuUI) {\n return;\n }\n\n novuUI.updateAppearance(options.appearance);\n novuUI.updateLocalization(options.localization);\n novuUI.updateTabs(options.tabs);\n novuUI.updateOptions(options.options);\n }, [options]);\n\n if (!novuUI) {\n return null;\n }\n\n return (\n <RendererProvider value={{ mountElement, novuUI }}>\n {[...mountedElements].map(([element, mountedElement]) => {\n return ReactDOM.createPortal(mountedElement, element);\n })}\n\n {children}\n </RendererProvider>\n );\n};\n","import { useRef } from 'react';\n\nexport const useDataRef = <T>(data: T) => {\n const ref = useRef(data);\n ref.current = data;\n\n return ref;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport const Preferences = () => {\n const { novuUI } = useRenderer();\n\n const mount = React.useCallback((element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Preferences',\n element,\n });\n }, []);\n\n return <Mounter mount={mount} />;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { NotificationsRenderProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport type { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';\n\nexport type NotificationProps = {\n children?: never \| NotificationsRenderProps;\n onNotificationClick?: NotificationClickHandler;\n onPrimaryActionClick?: NotificationActionClickHandler;\n onSecondaryActionClick?: NotificationActionClickHandler;\n};\n\nexport const Notifications = React.memo(\n ({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }: NotificationProps) => {\n const { novuUI, mountElement } = useRenderer();\n\n const mount = React.useCallback(\n (element: HTMLElement) => {\n return novuUI.mountComponent({\n name: 'Notifications',\n element,\n props: children\n ? {\n mountNotification: (el, { notification }) => mountElement(el, children?.({ notification })),\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n }\n : { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick },\n });\n },\n [children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n );\n\n return <Mounter mount={mount} />;\n }\n);\n"],"mappings":"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","names":["React","React","jsx","jsx","React","React","jsx","React","React","jsx","React","React","jsx","React"]}

package/dist/server/server.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Notification, NotificationClickHandler, NotificationActionClickHandler, BaseNovuUIOptions } from '@novu/js/ui';
+import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab } from '@novu/js/ui';
 export { Notification } from '@novu/js/ui';
 type NotificationsRenderProps = (args: {
@@ -16,7 +16,16 @@ type DefaultInboxProps = {
     onPrimaryActionClick?: NotificationActionClickHandler;
     onSecondaryActionClick?: NotificationActionClickHandler;
 };
-type BaseProps = BaseNovuUIOptions;
+type BaseProps = {
+    applicationIdentifier: string;
+    subscriberId: string;
+    subscriberHash?: string;
+    backendUrl?: string;
+    socketUrl?: string;
+    appearance?: Appearance;
+    localization?: Localization;
+    tabs?: Array<Tab>;
+};
 type DefaultProps = BaseProps & DefaultInboxProps & {
     children?: never;
 };

package/dist/server/server.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Notification, NotificationClickHandler, NotificationActionClickHandler, BaseNovuUIOptions } from '@novu/js/ui';
+import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab } from '@novu/js/ui';
 export { Notification } from '@novu/js/ui';
 type NotificationsRenderProps = (args: {
@@ -16,7 +16,16 @@ type DefaultInboxProps = {
     onPrimaryActionClick?: NotificationActionClickHandler;
     onSecondaryActionClick?: NotificationActionClickHandler;
 };
-type BaseProps = BaseNovuUIOptions;
+type BaseProps = {
+    applicationIdentifier: string;
+    subscriberId: string;
+    subscriberHash?: string;
+    backendUrl?: string;
+    socketUrl?: string;
+    appearance?: Appearance;
+    localization?: Localization;
+    tabs?: Array<Tab>;
+};
 type DefaultProps = BaseProps & DefaultInboxProps & {
     children?: never;
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@novu/react",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-canary.0",
   "repository": "https://github.com/novuhq/novu",
   "description": "Novu's React SDK for building custom inbox notification experiences",
   "author": "",
@@ -65,6 +65,6 @@
     "react-dom": ">=17"
   },
   "dependencies": {
-    "@novu/js": "^2.0.0-alpha.1"
+    "@novu/js": "^2.0.0-canary.0"
   }
 }