@novu/react 2.0.0-canary.3 → 2.0.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.
- package/dist/client/index.d.mts +2 -1
- package/dist/client/index.d.ts +2 -1
- package/dist/client/index.js +13 -1
- package/dist/client/index.js.map +1 -1
- package/dist/client/index.mjs +13 -1
- package/dist/client/index.mjs.map +1 -1
- package/dist/hooks/index.d.mts +71 -0
- package/dist/hooks/index.d.ts +71 -0
- package/dist/hooks/index.js +349 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/index.mjs +326 -0
- package/dist/hooks/index.mjs.map +1 -0
- package/dist/server/server.d.mts +2 -1
- package/dist/server/server.d.ts +2 -1
- package/package.json +3 -3
package/dist/client/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React$1 from 'react';
|
|
3
|
-
import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab } from '@novu/js/ui';
|
|
3
|
+
import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab, RouterPush } from '@novu/js/ui';
|
|
4
4
|
export { Notification } from '@novu/js/ui';
|
|
5
5
|
|
|
6
6
|
type NotificationsRenderer = (notification: Notification) => React.ReactNode;
|
|
@@ -22,6 +22,7 @@ type BaseProps = {
|
|
|
22
22
|
appearance?: Appearance;
|
|
23
23
|
localization?: Localization;
|
|
24
24
|
tabs?: Array<Tab>;
|
|
25
|
+
routerPush?: RouterPush;
|
|
25
26
|
};
|
|
26
27
|
type DefaultProps = BaseProps & DefaultInboxProps & {
|
|
27
28
|
children?: never;
|
package/dist/client/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React$1 from 'react';
|
|
3
|
-
import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab } from '@novu/js/ui';
|
|
3
|
+
import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab, RouterPush } from '@novu/js/ui';
|
|
4
4
|
export { Notification } from '@novu/js/ui';
|
|
5
5
|
|
|
6
6
|
type NotificationsRenderer = (notification: Notification) => React.ReactNode;
|
|
@@ -22,6 +22,7 @@ type BaseProps = {
|
|
|
22
22
|
appearance?: Appearance;
|
|
23
23
|
localization?: Localization;
|
|
24
24
|
tabs?: Array<Tab>;
|
|
25
|
+
routerPush?: RouterPush;
|
|
25
26
|
};
|
|
26
27
|
type DefaultProps = BaseProps & DefaultInboxProps & {
|
|
27
28
|
children?: never;
|
package/dist/client/index.js
CHANGED
|
@@ -165,6 +165,7 @@ var Renderer = ({ options, children }) => {
|
|
|
165
165
|
novuUI.updateLocalization(options.localization);
|
|
166
166
|
novuUI.updateTabs(options.tabs);
|
|
167
167
|
novuUI.updateOptions(options.options);
|
|
168
|
+
novuUI.updateRouterPush(options.routerPush);
|
|
168
169
|
}, [options]);
|
|
169
170
|
if (!novuUI) {
|
|
170
171
|
return null;
|
|
@@ -202,12 +203,23 @@ var DefaultInbox = (props) => {
|
|
|
202
203
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Mounter, { mount });
|
|
203
204
|
};
|
|
204
205
|
var Inbox = import_react6.default.memo((props) => {
|
|
205
|
-
const {
|
|
206
|
+
const {
|
|
207
|
+
localization,
|
|
208
|
+
appearance,
|
|
209
|
+
tabs,
|
|
210
|
+
routerPush,
|
|
211
|
+
applicationIdentifier,
|
|
212
|
+
subscriberId,
|
|
213
|
+
subscriberHash,
|
|
214
|
+
backendUrl,
|
|
215
|
+
socketUrl
|
|
216
|
+
} = props;
|
|
206
217
|
const options = (0, import_react6.useMemo)(() => {
|
|
207
218
|
return {
|
|
208
219
|
localization,
|
|
209
220
|
appearance,
|
|
210
221
|
tabs,
|
|
222
|
+
routerPush,
|
|
211
223
|
options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl }
|
|
212
224
|
};
|
|
213
225
|
}, [localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl]);
|
package/dist/client/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts","../../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":["export * from './components';\nexport * from './utils/types';\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\nimport { BellRenderer } from '../utils/types';\n\nexport type BellProps = {\n renderBell?: BellRenderer;\n};\n\nexport const Bell = React.memo((props: BellProps) => {\n const { renderBell } = props;\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: renderBell ? { renderBell: (el, unreadCount) => mountElement(el, renderBell(unreadCount)) } : undefined,\n });\n },\n [renderBell]\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 = (props: DefaultInboxProps) => {\n const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } =\n props;\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 renderNotification: renderNotification\n ? (el, notification) => mountElement(el, renderNotification(notification))\n : undefined,\n renderBell: 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 { Mounter } from './Mounter';\nimport type { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';\nimport { NotificationsRenderer } from '../utils/types';\n\nexport type NotificationProps = {\n renderNotification?: NotificationsRenderer;\n onNotificationClick?: NotificationClickHandler;\n onPrimaryActionClick?: NotificationActionClickHandler;\n onSecondaryActionClick?: NotificationActionClickHandler;\n};\n\nexport const Notifications = React.memo((props: NotificationProps) => {\n const { onNotificationClick, onPrimaryActionClick, renderNotification, onSecondaryActionClick } = props;\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: {\n renderNotification: renderNotification\n ? (el, notification) => mountElement(el, renderNotification(notification))\n : undefined,\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n },\n });\n },\n [renderNotification, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n );\n\n return <Mounter mount={mount} />;\n});\n"],"mappings":"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","names":["import_react","React","import_react","import_jsx_runtime","React","import_jsx_runtime","React","import_react","import_react","import_react","import_jsx_runtime","ReactDOM","import_jsx_runtime","React","import_react","import_jsx_runtime","React","import_react","import_jsx_runtime","React"]}
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts","../../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":["export * from './components';\nexport * from './utils/types';\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\nimport { BellRenderer } from '../utils/types';\n\nexport type BellProps = {\n renderBell?: BellRenderer;\n};\n\nexport const Bell = React.memo((props: BellProps) => {\n const { renderBell } = props;\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: renderBell ? { renderBell: (el, unreadCount) => mountElement(el, renderBell(unreadCount)) } : undefined,\n });\n },\n [renderBell]\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 = (props: DefaultInboxProps) => {\n const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } =\n props;\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 renderNotification: renderNotification\n ? (el, notification) => mountElement(el, renderNotification(notification))\n : undefined,\n renderBell: 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 {\n localization,\n appearance,\n tabs,\n routerPush,\n applicationIdentifier,\n subscriberId,\n subscriberHash,\n backendUrl,\n socketUrl,\n } = props;\n\n const options = useMemo(() => {\n return {\n localization,\n appearance,\n tabs,\n routerPush,\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 novuUI.updateRouterPush(options.routerPush);\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 type { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\nimport { NotificationsRenderer } from '../utils/types';\n\nexport type NotificationProps = {\n renderNotification?: NotificationsRenderer;\n onNotificationClick?: NotificationClickHandler;\n onPrimaryActionClick?: NotificationActionClickHandler;\n onSecondaryActionClick?: NotificationActionClickHandler;\n};\n\nexport const Notifications = React.memo((props: NotificationProps) => {\n const { onNotificationClick, onPrimaryActionClick, renderNotification, onSecondaryActionClick } = props;\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: {\n renderNotification: renderNotification\n ? (el, notification) => mountElement(el, renderNotification(notification))\n : undefined,\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n },\n });\n },\n [renderNotification, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n );\n\n return <Mounter mount={mount} />;\n});\n"],"mappings":"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","names":["import_react","React","import_react","import_jsx_runtime","React","import_jsx_runtime","React","import_react","import_react","import_react","import_jsx_runtime","ReactDOM","import_jsx_runtime","React","import_react","import_jsx_runtime","React","import_react","import_jsx_runtime","React"]}
|
package/dist/client/index.mjs
CHANGED
|
@@ -126,6 +126,7 @@ var Renderer = ({ options, children }) => {
|
|
|
126
126
|
novuUI.updateLocalization(options.localization);
|
|
127
127
|
novuUI.updateTabs(options.tabs);
|
|
128
128
|
novuUI.updateOptions(options.options);
|
|
129
|
+
novuUI.updateRouterPush(options.routerPush);
|
|
129
130
|
}, [options]);
|
|
130
131
|
if (!novuUI) {
|
|
131
132
|
return null;
|
|
@@ -163,12 +164,23 @@ var DefaultInbox = (props) => {
|
|
|
163
164
|
return /* @__PURE__ */ jsx4(Mounter, { mount });
|
|
164
165
|
};
|
|
165
166
|
var Inbox = React5.memo((props) => {
|
|
166
|
-
const {
|
|
167
|
+
const {
|
|
168
|
+
localization,
|
|
169
|
+
appearance,
|
|
170
|
+
tabs,
|
|
171
|
+
routerPush,
|
|
172
|
+
applicationIdentifier,
|
|
173
|
+
subscriberId,
|
|
174
|
+
subscriberHash,
|
|
175
|
+
backendUrl,
|
|
176
|
+
socketUrl
|
|
177
|
+
} = props;
|
|
167
178
|
const options = useMemo(() => {
|
|
168
179
|
return {
|
|
169
180
|
localization,
|
|
170
181
|
appearance,
|
|
171
182
|
tabs,
|
|
183
|
+
routerPush,
|
|
172
184
|
options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl }
|
|
173
185
|
};
|
|
174
186
|
}, [localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl]);
|
|
@@ -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';\nimport { BellRenderer } from '../utils/types';\n\nexport type BellProps = {\n renderBell?: BellRenderer;\n};\n\nexport const Bell = React.memo((props: BellProps) => {\n const { renderBell } = props;\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: renderBell ? { renderBell: (el, unreadCount) => mountElement(el, renderBell(unreadCount)) } : undefined,\n });\n },\n [renderBell]\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 = (props: DefaultInboxProps) => {\n const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } =\n props;\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 renderNotification: renderNotification\n ? (el, notification) => mountElement(el, renderNotification(notification))\n : undefined,\n renderBell: 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 { Mounter } from './Mounter';\nimport type { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';\nimport { NotificationsRenderer } from '../utils/types';\n\nexport type NotificationProps = {\n renderNotification?: NotificationsRenderer;\n onNotificationClick?: NotificationClickHandler;\n onPrimaryActionClick?: NotificationActionClickHandler;\n onSecondaryActionClick?: NotificationActionClickHandler;\n};\n\nexport const Notifications = React.memo((props: NotificationProps) => {\n const { onNotificationClick, onPrimaryActionClick, renderNotification, onSecondaryActionClick } = props;\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: {\n renderNotification: renderNotification\n ? (el, notification) => mountElement(el, renderNotification(notification))\n : undefined,\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n },\n });\n },\n [renderNotification, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n );\n\n return <Mounter mount={mount} />;\n});\n"],"mappings":"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","names":["React","React","jsx","jsx","React","React","jsx","React","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';\nimport { BellRenderer } from '../utils/types';\n\nexport type BellProps = {\n renderBell?: BellRenderer;\n};\n\nexport const Bell = React.memo((props: BellProps) => {\n const { renderBell } = props;\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: renderBell ? { renderBell: (el, unreadCount) => mountElement(el, renderBell(unreadCount)) } : undefined,\n });\n },\n [renderBell]\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 = (props: DefaultInboxProps) => {\n const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } =\n props;\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 renderNotification: renderNotification\n ? (el, notification) => mountElement(el, renderNotification(notification))\n : undefined,\n renderBell: 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 {\n localization,\n appearance,\n tabs,\n routerPush,\n applicationIdentifier,\n subscriberId,\n subscriberHash,\n backendUrl,\n socketUrl,\n } = props;\n\n const options = useMemo(() => {\n return {\n localization,\n appearance,\n tabs,\n routerPush,\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 novuUI.updateRouterPush(options.routerPush);\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 type { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\nimport { NotificationsRenderer } from '../utils/types';\n\nexport type NotificationProps = {\n renderNotification?: NotificationsRenderer;\n onNotificationClick?: NotificationClickHandler;\n onPrimaryActionClick?: NotificationActionClickHandler;\n onSecondaryActionClick?: NotificationActionClickHandler;\n};\n\nexport const Notifications = React.memo((props: NotificationProps) => {\n const { onNotificationClick, onPrimaryActionClick, renderNotification, onSecondaryActionClick } = props;\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: {\n renderNotification: renderNotification\n ? (el, notification) => mountElement(el, renderNotification(notification))\n : undefined,\n onNotificationClick,\n onPrimaryActionClick,\n onSecondaryActionClick,\n },\n });\n },\n [renderNotification, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n );\n\n return <Mounter mount={mount} />;\n});\n"],"mappings":"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","names":["React","React","jsx","jsx","React","React","jsx","React","React","jsx","React","React","jsx","React"]}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { Notification, NovuError, Preference, NotificationFilter, Novu, NovuOptions } from '@novu/js';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
type UseNotificationsProps = {
|
|
5
|
+
tags?: string[];
|
|
6
|
+
read?: boolean;
|
|
7
|
+
archived?: boolean;
|
|
8
|
+
limit?: number;
|
|
9
|
+
onSuccess?: (data: Notification[]) => void;
|
|
10
|
+
onError?: (error: NovuError) => void;
|
|
11
|
+
};
|
|
12
|
+
declare const useNotifications: (props?: UseNotificationsProps) => {
|
|
13
|
+
readAll: () => Promise<{
|
|
14
|
+
data?: void | undefined;
|
|
15
|
+
error?: NovuError | undefined;
|
|
16
|
+
}>;
|
|
17
|
+
archiveAll: () => Promise<{
|
|
18
|
+
data?: void | undefined;
|
|
19
|
+
error?: NovuError | undefined;
|
|
20
|
+
}>;
|
|
21
|
+
archiveAllRead: () => Promise<{
|
|
22
|
+
data?: void | undefined;
|
|
23
|
+
error?: NovuError | undefined;
|
|
24
|
+
}>;
|
|
25
|
+
notifications: Notification[] | undefined;
|
|
26
|
+
error: NovuError | undefined;
|
|
27
|
+
isLoading: boolean;
|
|
28
|
+
isFetching: boolean;
|
|
29
|
+
refetch: () => Promise<void>;
|
|
30
|
+
fetchMore: () => Promise<void>;
|
|
31
|
+
hasMore: boolean;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
type UsePreferencesProps = {
|
|
35
|
+
onSuccess?: (data: Preference[]) => void;
|
|
36
|
+
onError?: (error: NovuError) => void;
|
|
37
|
+
};
|
|
38
|
+
type UsePreferencesResult = {
|
|
39
|
+
preferences?: Preference[];
|
|
40
|
+
error?: NovuError;
|
|
41
|
+
isLoading: boolean;
|
|
42
|
+
isFetching: boolean;
|
|
43
|
+
refetch: () => Promise<void>;
|
|
44
|
+
};
|
|
45
|
+
declare const usePreferences: (props?: UsePreferencesProps) => UsePreferencesResult;
|
|
46
|
+
|
|
47
|
+
type Count = {
|
|
48
|
+
count: number;
|
|
49
|
+
filter: NotificationFilter;
|
|
50
|
+
};
|
|
51
|
+
type UseCountsProps = {
|
|
52
|
+
filters: NotificationFilter[];
|
|
53
|
+
onSuccess?: (data: Count[]) => void;
|
|
54
|
+
onError?: (error: NovuError) => void;
|
|
55
|
+
};
|
|
56
|
+
type UseCountsResult = {
|
|
57
|
+
counts?: Count[];
|
|
58
|
+
error?: NovuError;
|
|
59
|
+
isLoading: boolean;
|
|
60
|
+
isFetching: boolean;
|
|
61
|
+
refetch: () => Promise<void>;
|
|
62
|
+
};
|
|
63
|
+
declare const useCounts: (props: UseCountsProps) => UseCountsResult;
|
|
64
|
+
|
|
65
|
+
type NovuProviderProps = NovuOptions & {
|
|
66
|
+
children: JSX.Element;
|
|
67
|
+
};
|
|
68
|
+
declare const NovuProvider: ({ children, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache, }: NovuProviderProps) => react_jsx_runtime.JSX.Element;
|
|
69
|
+
declare const useNovu: () => Novu;
|
|
70
|
+
|
|
71
|
+
export { NovuProvider, type UseNotificationsProps, useCounts, useNotifications, useNovu, usePreferences };
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { Notification, NovuError, Preference, NotificationFilter, Novu, NovuOptions } from '@novu/js';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
type UseNotificationsProps = {
|
|
5
|
+
tags?: string[];
|
|
6
|
+
read?: boolean;
|
|
7
|
+
archived?: boolean;
|
|
8
|
+
limit?: number;
|
|
9
|
+
onSuccess?: (data: Notification[]) => void;
|
|
10
|
+
onError?: (error: NovuError) => void;
|
|
11
|
+
};
|
|
12
|
+
declare const useNotifications: (props?: UseNotificationsProps) => {
|
|
13
|
+
readAll: () => Promise<{
|
|
14
|
+
data?: void | undefined;
|
|
15
|
+
error?: NovuError | undefined;
|
|
16
|
+
}>;
|
|
17
|
+
archiveAll: () => Promise<{
|
|
18
|
+
data?: void | undefined;
|
|
19
|
+
error?: NovuError | undefined;
|
|
20
|
+
}>;
|
|
21
|
+
archiveAllRead: () => Promise<{
|
|
22
|
+
data?: void | undefined;
|
|
23
|
+
error?: NovuError | undefined;
|
|
24
|
+
}>;
|
|
25
|
+
notifications: Notification[] | undefined;
|
|
26
|
+
error: NovuError | undefined;
|
|
27
|
+
isLoading: boolean;
|
|
28
|
+
isFetching: boolean;
|
|
29
|
+
refetch: () => Promise<void>;
|
|
30
|
+
fetchMore: () => Promise<void>;
|
|
31
|
+
hasMore: boolean;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
type UsePreferencesProps = {
|
|
35
|
+
onSuccess?: (data: Preference[]) => void;
|
|
36
|
+
onError?: (error: NovuError) => void;
|
|
37
|
+
};
|
|
38
|
+
type UsePreferencesResult = {
|
|
39
|
+
preferences?: Preference[];
|
|
40
|
+
error?: NovuError;
|
|
41
|
+
isLoading: boolean;
|
|
42
|
+
isFetching: boolean;
|
|
43
|
+
refetch: () => Promise<void>;
|
|
44
|
+
};
|
|
45
|
+
declare const usePreferences: (props?: UsePreferencesProps) => UsePreferencesResult;
|
|
46
|
+
|
|
47
|
+
type Count = {
|
|
48
|
+
count: number;
|
|
49
|
+
filter: NotificationFilter;
|
|
50
|
+
};
|
|
51
|
+
type UseCountsProps = {
|
|
52
|
+
filters: NotificationFilter[];
|
|
53
|
+
onSuccess?: (data: Count[]) => void;
|
|
54
|
+
onError?: (error: NovuError) => void;
|
|
55
|
+
};
|
|
56
|
+
type UseCountsResult = {
|
|
57
|
+
counts?: Count[];
|
|
58
|
+
error?: NovuError;
|
|
59
|
+
isLoading: boolean;
|
|
60
|
+
isFetching: boolean;
|
|
61
|
+
refetch: () => Promise<void>;
|
|
62
|
+
};
|
|
63
|
+
declare const useCounts: (props: UseCountsProps) => UseCountsResult;
|
|
64
|
+
|
|
65
|
+
type NovuProviderProps = NovuOptions & {
|
|
66
|
+
children: JSX.Element;
|
|
67
|
+
};
|
|
68
|
+
declare const NovuProvider: ({ children, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache, }: NovuProviderProps) => react_jsx_runtime.JSX.Element;
|
|
69
|
+
declare const useNovu: () => Novu;
|
|
70
|
+
|
|
71
|
+
export { NovuProvider, type UseNotificationsProps, useCounts, useNotifications, useNovu, usePreferences };
|
|
@@ -0,0 +1,349 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/hooks/index.ts
|
|
21
|
+
var hooks_exports = {};
|
|
22
|
+
__export(hooks_exports, {
|
|
23
|
+
NovuProvider: () => NovuProvider,
|
|
24
|
+
useCounts: () => useCounts,
|
|
25
|
+
useNotifications: () => useNotifications,
|
|
26
|
+
useNovu: () => useNovu,
|
|
27
|
+
usePreferences: () => usePreferences
|
|
28
|
+
});
|
|
29
|
+
module.exports = __toCommonJS(hooks_exports);
|
|
30
|
+
|
|
31
|
+
// src/hooks/useNotifications.ts
|
|
32
|
+
var import_react2 = require("react");
|
|
33
|
+
var import_js2 = require("@novu/js");
|
|
34
|
+
|
|
35
|
+
// src/hooks/NovuProvider.tsx
|
|
36
|
+
var import_js = require("@novu/js");
|
|
37
|
+
var import_react = require("react");
|
|
38
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
39
|
+
var NovuContext = (0, import_react.createContext)(void 0);
|
|
40
|
+
var NovuProvider = ({
|
|
41
|
+
children,
|
|
42
|
+
applicationIdentifier,
|
|
43
|
+
subscriberId,
|
|
44
|
+
subscriberHash,
|
|
45
|
+
backendUrl,
|
|
46
|
+
socketUrl,
|
|
47
|
+
useCache
|
|
48
|
+
}) => {
|
|
49
|
+
const novu = (0, import_react.useMemo)(
|
|
50
|
+
() => new import_js.Novu({ applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache }),
|
|
51
|
+
[applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache]
|
|
52
|
+
);
|
|
53
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NovuContext.Provider, { value: novu, children });
|
|
54
|
+
};
|
|
55
|
+
var useNovu = () => {
|
|
56
|
+
const context = (0, import_react.useContext)(NovuContext);
|
|
57
|
+
if (!context) {
|
|
58
|
+
throw new Error("useNovu must be used within a <NovuProvider />");
|
|
59
|
+
}
|
|
60
|
+
return context;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
// src/hooks/useNotifications.ts
|
|
64
|
+
var useNotifications = (props) => {
|
|
65
|
+
const { tags, read, archived = false, limit, onSuccess, onError } = props || {};
|
|
66
|
+
const filterRef = (0, import_react2.useRef)(void 0);
|
|
67
|
+
const { notifications, on, off } = useNovu();
|
|
68
|
+
const [data, setData] = (0, import_react2.useState)();
|
|
69
|
+
const [error, setError] = (0, import_react2.useState)();
|
|
70
|
+
const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
|
|
71
|
+
const [isFetching, setIsFetching] = (0, import_react2.useState)(false);
|
|
72
|
+
const [hasMore, setHasMore] = (0, import_react2.useState)(false);
|
|
73
|
+
const length = data?.length;
|
|
74
|
+
const after = length ? data[length - 1].id : void 0;
|
|
75
|
+
const sync = (event) => {
|
|
76
|
+
if (!event.data || filterRef.current && !(0, import_js2.isSameFilter)(filterRef.current, event.data.filter)) {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
setData(event.data.notifications);
|
|
80
|
+
setHasMore(event.data.hasMore);
|
|
81
|
+
};
|
|
82
|
+
(0, import_react2.useEffect)(() => {
|
|
83
|
+
on("notifications.list.updated", sync);
|
|
84
|
+
return () => {
|
|
85
|
+
off("notifications.list.updated", sync);
|
|
86
|
+
};
|
|
87
|
+
}, []);
|
|
88
|
+
(0, import_react2.useEffect)(() => {
|
|
89
|
+
const newFilter = { tags, read, archived };
|
|
90
|
+
if (filterRef.current && (0, import_js2.isSameFilter)(filterRef.current, newFilter)) {
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
notifications.clearCache({ filter: filterRef.current });
|
|
94
|
+
filterRef.current = newFilter;
|
|
95
|
+
fetchNotifications({ refetch: true });
|
|
96
|
+
}, [tags, read, archived]);
|
|
97
|
+
const fetchNotifications = async (options) => {
|
|
98
|
+
if (options?.refetch) {
|
|
99
|
+
setError(void 0);
|
|
100
|
+
setIsLoading(true);
|
|
101
|
+
setIsFetching(false);
|
|
102
|
+
}
|
|
103
|
+
setIsFetching(true);
|
|
104
|
+
const response = await notifications.list({
|
|
105
|
+
tags,
|
|
106
|
+
read,
|
|
107
|
+
archived,
|
|
108
|
+
limit,
|
|
109
|
+
after: options?.refetch ? void 0 : after
|
|
110
|
+
});
|
|
111
|
+
if (response.error) {
|
|
112
|
+
setError(response.error);
|
|
113
|
+
onError?.(response.error);
|
|
114
|
+
} else {
|
|
115
|
+
onSuccess?.(response.data.notifications);
|
|
116
|
+
setData(response.data.notifications);
|
|
117
|
+
setHasMore(response.data.hasMore);
|
|
118
|
+
}
|
|
119
|
+
setIsLoading(false);
|
|
120
|
+
setIsFetching(false);
|
|
121
|
+
};
|
|
122
|
+
const refetch = () => {
|
|
123
|
+
notifications.clearCache({ filter: { tags, read, archived } });
|
|
124
|
+
return fetchNotifications({ refetch: true });
|
|
125
|
+
};
|
|
126
|
+
const fetchMore = async () => {
|
|
127
|
+
if (!hasMore || isFetching) return;
|
|
128
|
+
return fetchNotifications();
|
|
129
|
+
};
|
|
130
|
+
const readAll = async () => {
|
|
131
|
+
return await notifications.readAll({ tags });
|
|
132
|
+
};
|
|
133
|
+
const archiveAll = async () => {
|
|
134
|
+
return await notifications.archiveAll({ tags });
|
|
135
|
+
};
|
|
136
|
+
const archiveAllRead = async () => {
|
|
137
|
+
return await notifications.archiveAllRead({ tags });
|
|
138
|
+
};
|
|
139
|
+
return {
|
|
140
|
+
readAll,
|
|
141
|
+
archiveAll,
|
|
142
|
+
archiveAllRead,
|
|
143
|
+
notifications: data,
|
|
144
|
+
error,
|
|
145
|
+
isLoading,
|
|
146
|
+
isFetching,
|
|
147
|
+
refetch,
|
|
148
|
+
fetchMore,
|
|
149
|
+
hasMore
|
|
150
|
+
};
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
// src/hooks/usePreferences.ts
|
|
154
|
+
var import_react3 = require("react");
|
|
155
|
+
var usePreferences = (props) => {
|
|
156
|
+
const { onSuccess, onError } = props || {};
|
|
157
|
+
const [data, setData] = (0, import_react3.useState)();
|
|
158
|
+
const { preferences, on, off } = useNovu();
|
|
159
|
+
const [error, setError] = (0, import_react3.useState)();
|
|
160
|
+
const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
|
|
161
|
+
const [isFetching, setIsFetching] = (0, import_react3.useState)(false);
|
|
162
|
+
const sync = (event) => {
|
|
163
|
+
if (!event.data) {
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
166
|
+
setData(event.data);
|
|
167
|
+
};
|
|
168
|
+
(0, import_react3.useEffect)(() => {
|
|
169
|
+
fetchPreferences();
|
|
170
|
+
on("preferences.list.updated", sync);
|
|
171
|
+
on("preferences.list.pending", sync);
|
|
172
|
+
on("preferences.list.resolved", sync);
|
|
173
|
+
return () => {
|
|
174
|
+
off("preferences.list.updated", sync);
|
|
175
|
+
off("preferences.list.pending", sync);
|
|
176
|
+
off("preferences.list.resolved", sync);
|
|
177
|
+
};
|
|
178
|
+
}, []);
|
|
179
|
+
const fetchPreferences = async () => {
|
|
180
|
+
setIsFetching(true);
|
|
181
|
+
const response = await preferences.list();
|
|
182
|
+
if (response.error) {
|
|
183
|
+
setError(response.error);
|
|
184
|
+
onError?.(response.error);
|
|
185
|
+
} else {
|
|
186
|
+
onSuccess?.(response.data);
|
|
187
|
+
}
|
|
188
|
+
setIsLoading(false);
|
|
189
|
+
setIsFetching(false);
|
|
190
|
+
};
|
|
191
|
+
const refetch = () => {
|
|
192
|
+
preferences.cache.clearAll();
|
|
193
|
+
return fetchPreferences();
|
|
194
|
+
};
|
|
195
|
+
return {
|
|
196
|
+
preferences: data,
|
|
197
|
+
error,
|
|
198
|
+
isLoading,
|
|
199
|
+
isFetching,
|
|
200
|
+
refetch
|
|
201
|
+
};
|
|
202
|
+
};
|
|
203
|
+
|
|
204
|
+
// src/hooks/useCounts.ts
|
|
205
|
+
var import_react6 = require("react");
|
|
206
|
+
var import_js3 = require("@novu/js");
|
|
207
|
+
|
|
208
|
+
// src/hooks/internal/useWebsocketEvent.ts
|
|
209
|
+
var import_react5 = require("react");
|
|
210
|
+
|
|
211
|
+
// src/utils/requestLock.ts
|
|
212
|
+
function requestLock(id, cb) {
|
|
213
|
+
if (!("locks" in navigator)) {
|
|
214
|
+
cb(id);
|
|
215
|
+
return () => {
|
|
216
|
+
};
|
|
217
|
+
}
|
|
218
|
+
let isFulfilled = false;
|
|
219
|
+
let promiseResolve;
|
|
220
|
+
const promise = new Promise((resolve) => {
|
|
221
|
+
promiseResolve = resolve;
|
|
222
|
+
});
|
|
223
|
+
navigator.locks.request(id, () => {
|
|
224
|
+
if (!isFulfilled) {
|
|
225
|
+
cb(id);
|
|
226
|
+
}
|
|
227
|
+
return promise;
|
|
228
|
+
});
|
|
229
|
+
return () => {
|
|
230
|
+
isFulfilled = true;
|
|
231
|
+
promiseResolve();
|
|
232
|
+
};
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
// src/hooks/internal/useBrowserTabsChannel.ts
|
|
236
|
+
var import_react4 = require("react");
|
|
237
|
+
var useBrowserTabsChannel = ({
|
|
238
|
+
channelName,
|
|
239
|
+
onMessage
|
|
240
|
+
}) => {
|
|
241
|
+
const [tabsChannel] = (0, import_react4.useState)(
|
|
242
|
+
typeof BroadcastChannel !== "undefined" ? new BroadcastChannel(channelName) : void 0
|
|
243
|
+
);
|
|
244
|
+
const postMessage = (data) => {
|
|
245
|
+
tabsChannel?.postMessage(data);
|
|
246
|
+
};
|
|
247
|
+
(0, import_react4.useEffect)(() => {
|
|
248
|
+
const listener = (event) => {
|
|
249
|
+
onMessage(event.data);
|
|
250
|
+
};
|
|
251
|
+
tabsChannel?.addEventListener("message", listener);
|
|
252
|
+
return () => {
|
|
253
|
+
tabsChannel?.removeEventListener("message", listener);
|
|
254
|
+
};
|
|
255
|
+
}, []);
|
|
256
|
+
return { postMessage };
|
|
257
|
+
};
|
|
258
|
+
|
|
259
|
+
// src/hooks/internal/useWebsocketEvent.ts
|
|
260
|
+
var useWebSocketEvent = ({
|
|
261
|
+
event: webSocketEvent,
|
|
262
|
+
eventHandler: onMessage
|
|
263
|
+
}) => {
|
|
264
|
+
const novu = useNovu();
|
|
265
|
+
const { postMessage } = useBrowserTabsChannel({ channelName: `nv.${webSocketEvent}`, onMessage });
|
|
266
|
+
const updateReadCount = (data) => {
|
|
267
|
+
onMessage(data);
|
|
268
|
+
postMessage(data);
|
|
269
|
+
};
|
|
270
|
+
(0, import_react5.useEffect)(() => {
|
|
271
|
+
const resolveLock = requestLock(`nv.${webSocketEvent}`, () => {
|
|
272
|
+
novu.on(webSocketEvent, updateReadCount);
|
|
273
|
+
});
|
|
274
|
+
return () => {
|
|
275
|
+
novu.off(webSocketEvent, updateReadCount);
|
|
276
|
+
resolveLock();
|
|
277
|
+
};
|
|
278
|
+
}, []);
|
|
279
|
+
};
|
|
280
|
+
|
|
281
|
+
// src/hooks/useCounts.ts
|
|
282
|
+
var useCounts = (props) => {
|
|
283
|
+
const { filters, onSuccess, onError } = props;
|
|
284
|
+
const { notifications } = useNovu();
|
|
285
|
+
const [error, setError] = (0, import_react6.useState)();
|
|
286
|
+
const [counts, setCounts] = (0, import_react6.useState)();
|
|
287
|
+
const [isLoading, setIsLoading] = (0, import_react6.useState)(true);
|
|
288
|
+
const [isFetching, setIsFetching] = (0, import_react6.useState)(false);
|
|
289
|
+
const sync = async (notification) => {
|
|
290
|
+
const existingCounts = counts ?? new Array(filters.length).fill(void 0);
|
|
291
|
+
let countFiltersToFetch = [];
|
|
292
|
+
if (notification) {
|
|
293
|
+
for (let i = 0; i < existingCounts.length; i++) {
|
|
294
|
+
const filter = filters[i];
|
|
295
|
+
if ((0, import_js3.areTagsEqual)(filter.tags, notification.tags)) {
|
|
296
|
+
countFiltersToFetch.push(filter);
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
} else {
|
|
300
|
+
countFiltersToFetch = filters;
|
|
301
|
+
}
|
|
302
|
+
if (countFiltersToFetch.length === 0) {
|
|
303
|
+
return;
|
|
304
|
+
}
|
|
305
|
+
setIsFetching(true);
|
|
306
|
+
const countsRes = await notifications.count({ filters: countFiltersToFetch });
|
|
307
|
+
setIsFetching(false);
|
|
308
|
+
setIsLoading(false);
|
|
309
|
+
if (countsRes.error) {
|
|
310
|
+
setError(countsRes.error);
|
|
311
|
+
onError?.(countsRes.error);
|
|
312
|
+
return;
|
|
313
|
+
}
|
|
314
|
+
const data = countsRes.data;
|
|
315
|
+
onSuccess?.(data.counts);
|
|
316
|
+
setCounts((oldCounts) => {
|
|
317
|
+
const newCounts = [];
|
|
318
|
+
const countsReceived = data.counts;
|
|
319
|
+
for (let i = 0; i < existingCounts.length; i++) {
|
|
320
|
+
const countReceived = countsReceived.find((c) => (0, import_js3.areTagsEqual)(c.filter.tags, existingCounts[i]?.filter.tags));
|
|
321
|
+
newCounts.push(countReceived || oldCounts[i]);
|
|
322
|
+
}
|
|
323
|
+
return newCounts;
|
|
324
|
+
});
|
|
325
|
+
};
|
|
326
|
+
useWebSocketEvent({
|
|
327
|
+
event: "notifications.notification_received",
|
|
328
|
+
eventHandler: (data) => {
|
|
329
|
+
sync(data.result);
|
|
330
|
+
}
|
|
331
|
+
});
|
|
332
|
+
useWebSocketEvent({
|
|
333
|
+
event: "notifications.unread_count_changed",
|
|
334
|
+
eventHandler: () => {
|
|
335
|
+
sync();
|
|
336
|
+
}
|
|
337
|
+
});
|
|
338
|
+
(0, import_react6.useEffect)(() => {
|
|
339
|
+
setError(void 0);
|
|
340
|
+
setIsLoading(true);
|
|
341
|
+
setIsFetching(false);
|
|
342
|
+
sync();
|
|
343
|
+
}, [JSON.stringify(filters)]);
|
|
344
|
+
const refetch = async () => {
|
|
345
|
+
await sync();
|
|
346
|
+
};
|
|
347
|
+
return { counts, error, refetch, isLoading, isFetching };
|
|
348
|
+
};
|
|
349
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/index.ts","../../src/hooks/useNotifications.ts","../../src/hooks/NovuProvider.tsx","../../src/hooks/usePreferences.ts","../../src/hooks/useCounts.ts","../../src/hooks/internal/useWebsocketEvent.ts","../../src/utils/requestLock.ts","../../src/hooks/internal/useBrowserTabsChannel.ts"],"sourcesContent":["export * from './useNotifications';\nexport * from './usePreferences';\nexport * from './useCounts';\nexport { NovuProvider, useNovu } from './NovuProvider';\n","import { useState, useEffect, useRef } from 'react';\nimport { ListNotificationsResponse, Notification, NovuError, isSameFilter, NotificationFilter } from '@novu/js';\nimport { useNovu } from './NovuProvider';\n\nexport type UseNotificationsProps = {\n tags?: string[];\n read?: boolean;\n archived?: boolean;\n limit?: number;\n onSuccess?: (data: Notification[]) => void;\n onError?: (error: NovuError) => void;\n};\n\nexport const useNotifications = (props?: UseNotificationsProps) => {\n const { tags, read, archived = false, limit, onSuccess, onError } = props || {};\n const filterRef = useRef<NotificationFilter | undefined>(undefined);\n const { notifications, on, off } = useNovu();\n const [data, setData] = useState<Array<Notification>>();\n const [error, setError] = useState<NovuError>();\n const [isLoading, setIsLoading] = useState(true);\n const [isFetching, setIsFetching] = useState(false);\n const [hasMore, setHasMore] = useState(false);\n const length = data?.length;\n const after = length ? data[length - 1].id : undefined;\n\n const sync = (event: { data?: ListNotificationsResponse }) => {\n if (!event.data || (filterRef.current && !isSameFilter(filterRef.current, event.data.filter))) {\n return;\n }\n setData(event.data.notifications);\n setHasMore(event.data.hasMore);\n };\n\n useEffect(() => {\n on('notifications.list.updated', sync);\n\n return () => {\n off('notifications.list.updated', sync);\n };\n }, []);\n\n useEffect(() => {\n const newFilter = { tags, read, archived };\n if (filterRef.current && isSameFilter(filterRef.current, newFilter)) {\n return;\n }\n\n notifications.clearCache({ filter: filterRef.current });\n filterRef.current = newFilter;\n\n fetchNotifications({ refetch: true });\n }, [tags, read, archived]);\n\n const fetchNotifications = async (options?: { refetch: boolean }) => {\n if (options?.refetch) {\n setError(undefined);\n setIsLoading(true);\n setIsFetching(false);\n }\n setIsFetching(true);\n const response = await notifications.list({\n tags,\n read,\n archived,\n limit,\n after: options?.refetch ? undefined : after,\n });\n if (response.error) {\n setError(response.error);\n onError?.(response.error);\n } else {\n onSuccess?.(response.data!.notifications);\n setData(response.data!.notifications);\n setHasMore(response.data!.hasMore);\n }\n setIsLoading(false);\n setIsFetching(false);\n };\n\n const refetch = () => {\n notifications.clearCache({ filter: { tags, read, archived } });\n\n return fetchNotifications({ refetch: true });\n };\n\n const fetchMore = async () => {\n if (!hasMore || isFetching) return;\n\n return fetchNotifications();\n };\n\n const readAll = async () => {\n return await notifications.readAll({ tags });\n };\n\n const archiveAll = async () => {\n return await notifications.archiveAll({ tags });\n };\n\n const archiveAllRead = async () => {\n return await notifications.archiveAllRead({ tags });\n };\n\n return {\n readAll,\n archiveAll,\n archiveAllRead,\n notifications: data,\n error,\n isLoading,\n isFetching,\n refetch,\n fetchMore,\n hasMore,\n };\n};\n","import { Novu, NovuOptions } from '@novu/js';\nimport { createContext, useContext, useMemo } from 'react';\n\ntype NovuProviderProps = NovuOptions & {\n children: JSX.Element;\n};\n\nconst NovuContext = createContext<Novu | undefined>(undefined);\n\nexport const NovuProvider = ({\n children,\n applicationIdentifier,\n subscriberId,\n subscriberHash,\n backendUrl,\n socketUrl,\n useCache,\n}: NovuProviderProps) => {\n const novu = useMemo(\n () => new Novu({ applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache }),\n [applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache]\n );\n\n return <NovuContext.Provider value={novu}>{children}</NovuContext.Provider>;\n};\n\nexport const useNovu = () => {\n const context = useContext(NovuContext);\n if (!context) {\n throw new Error('useNovu must be used within a <NovuProvider />');\n }\n\n return context;\n};\n\nexport const useUnsafeNovu = () => {\n const context = useContext(NovuContext);\n\n return context;\n};\n","import { NovuError, Preference } from '@novu/js';\nimport { useEffect, useState } from 'react';\nimport { useNovu } from './NovuProvider';\n\ntype UsePreferencesProps = {\n onSuccess?: (data: Preference[]) => void;\n onError?: (error: NovuError) => void;\n};\n\ntype UsePreferencesResult = {\n preferences?: Preference[];\n error?: NovuError;\n isLoading: boolean; // initial loading\n isFetching: boolean; // the request is in flight\n refetch: () => Promise<void>;\n};\n\nexport const usePreferences = (props?: UsePreferencesProps): UsePreferencesResult => {\n const { onSuccess, onError } = props || {};\n const [data, setData] = useState<Preference[]>();\n const { preferences, on, off } = useNovu();\n const [error, setError] = useState<NovuError>();\n const [isLoading, setIsLoading] = useState(true);\n const [isFetching, setIsFetching] = useState(false);\n\n const sync = (event: { data?: Preference[] }) => {\n if (!event.data) {\n return;\n }\n setData(event.data);\n };\n\n useEffect(() => {\n fetchPreferences();\n\n on('preferences.list.updated', sync);\n on('preferences.list.pending', sync);\n on('preferences.list.resolved', sync);\n\n return () => {\n off('preferences.list.updated', sync);\n off('preferences.list.pending', sync);\n off('preferences.list.resolved', sync);\n };\n }, []);\n\n const fetchPreferences = async () => {\n setIsFetching(true);\n const response = await preferences.list();\n if (response.error) {\n setError(response.error);\n onError?.(response.error);\n } else {\n onSuccess?.(response.data!);\n }\n setIsLoading(false);\n setIsFetching(false);\n };\n\n const refetch = () => {\n preferences.cache.clearAll();\n return fetchPreferences();\n };\n\n return {\n preferences: data,\n error,\n isLoading,\n isFetching,\n refetch,\n };\n};\n","import { useEffect, useState } from 'react';\nimport { Notification, NotificationFilter, NovuError, areTagsEqual } from '@novu/js';\nimport { useNovu } from './NovuProvider';\nimport { useWebSocketEvent } from './internal/useWebsocketEvent';\n\ntype Count = {\n count: number;\n filter: NotificationFilter;\n};\n\ntype UseCountsProps = {\n filters: NotificationFilter[];\n onSuccess?: (data: Count[]) => void;\n onError?: (error: NovuError) => void;\n};\n\ntype UseCountsResult = {\n counts?: Count[];\n error?: NovuError;\n isLoading: boolean; // initial loading\n isFetching: boolean; // the request is in flight\n refetch: () => Promise<void>;\n};\n\nexport const useCounts = (props: UseCountsProps): UseCountsResult => {\n const { filters, onSuccess, onError } = props;\n const { notifications } = useNovu();\n const [error, setError] = useState<NovuError>();\n const [counts, setCounts] = useState<Count[]>();\n const [isLoading, setIsLoading] = useState(true);\n const [isFetching, setIsFetching] = useState(false);\n\n const sync = async (notification?: Notification) => {\n const existingCounts = counts ?? (new Array(filters.length).fill(undefined) as (Count | undefined)[]);\n let countFiltersToFetch: NotificationFilter[] = [];\n if (notification) {\n // eslint-disable-next-line no-plusplus\n for (let i = 0; i < existingCounts.length; i++) {\n const filter = filters[i];\n if (areTagsEqual(filter.tags, notification.tags)) {\n countFiltersToFetch.push(filter);\n }\n }\n } else {\n countFiltersToFetch = filters;\n }\n\n if (countFiltersToFetch.length === 0) {\n return;\n }\n\n setIsFetching(true);\n const countsRes = await notifications.count({ filters: countFiltersToFetch });\n setIsFetching(false);\n setIsLoading(false);\n if (countsRes.error) {\n setError(countsRes.error);\n onError?.(countsRes.error);\n\n return;\n }\n const data = countsRes.data!;\n onSuccess?.(data.counts);\n\n setCounts((oldCounts) => {\n const newCounts: Count[] = [];\n const countsReceived = data.counts;\n\n // eslint-disable-next-line no-plusplus\n for (let i = 0; i < existingCounts.length; i++) {\n const countReceived = countsReceived.find((c) => areTagsEqual(c.filter.tags, existingCounts[i]?.filter.tags));\n\n newCounts.push(countReceived || oldCounts![i]);\n }\n\n return newCounts;\n });\n };\n\n useWebSocketEvent({\n event: 'notifications.notification_received',\n eventHandler: (data) => {\n sync(data.result);\n },\n });\n\n useWebSocketEvent({\n event: 'notifications.unread_count_changed',\n eventHandler: () => {\n sync();\n },\n });\n\n useEffect(() => {\n setError(undefined);\n setIsLoading(true);\n setIsFetching(false);\n sync();\n }, [JSON.stringify(filters)]);\n\n const refetch = async () => {\n await sync();\n };\n\n return { counts, error, refetch, isLoading, isFetching };\n};\n","import { EventHandler, Events, SocketEventNames } from '@novu/js';\nimport { useEffect } from 'react';\nimport { useNovu } from '../NovuProvider';\nimport { requestLock } from '../../utils/requestLock';\nimport { useBrowserTabsChannel } from './useBrowserTabsChannel';\n\nexport const useWebSocketEvent = <E extends SocketEventNames>({\n event: webSocketEvent,\n eventHandler: onMessage,\n}: {\n event: E;\n eventHandler: (args: Events[E]) => void;\n}) => {\n const novu = useNovu();\n const { postMessage } = useBrowserTabsChannel({ channelName: `nv.${webSocketEvent}`, onMessage });\n\n const updateReadCount: EventHandler<Events[E]> = (data) => {\n onMessage(data);\n postMessage(data);\n };\n\n useEffect(() => {\n const resolveLock = requestLock(`nv.${webSocketEvent}`, () => {\n novu.on(webSocketEvent, updateReadCount);\n });\n\n return () => {\n novu.off(webSocketEvent, updateReadCount);\n resolveLock();\n };\n }, []);\n};\n","export function requestLock(id: string, cb: (id: string) => void) {\n // Check if the Lock API is available\n if (!('locks' in navigator)) {\n // If Lock API is not available, immediately invoke the callback and return a no-op function\n cb(id);\n return () => {};\n }\n\n let isFulfilled = false;\n let promiseResolve: () => void;\n\n const promise = new Promise<void>((resolve) => {\n promiseResolve = resolve;\n });\n\n navigator.locks.request(id, () => {\n if (!isFulfilled) {\n cb(id);\n }\n\n return promise;\n });\n\n return () => {\n isFulfilled = true;\n promiseResolve();\n };\n}\n","import { useEffect, useState } from 'react';\n\nexport const useBrowserTabsChannel = <T = unknown>({\n channelName,\n onMessage,\n}: {\n channelName: string;\n onMessage: (args: T) => void;\n}) => {\n const [tabsChannel] = useState(\n typeof BroadcastChannel !== 'undefined' ? new BroadcastChannel(channelName) : undefined\n );\n\n const postMessage = (data: T) => {\n tabsChannel?.postMessage(data);\n };\n\n useEffect(() => {\n const listener = (event: MessageEvent<T>) => {\n onMessage(event.data);\n };\n\n tabsChannel?.addEventListener('message', listener);\n\n return () => {\n tabsChannel?.removeEventListener('message', listener);\n };\n }, []);\n\n return { postMessage };\n};\n"],"mappings":"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","names":["import_react","import_js","import_react","import_react","import_js","import_react","import_react"]}
|
|
@@ -0,0 +1,326 @@
|
|
|
1
|
+
// src/hooks/useNotifications.ts
|
|
2
|
+
import { useState, useEffect, useRef } from "react";
|
|
3
|
+
import { isSameFilter } from "@novu/js";
|
|
4
|
+
|
|
5
|
+
// src/hooks/NovuProvider.tsx
|
|
6
|
+
import { Novu } from "@novu/js";
|
|
7
|
+
import { createContext, useContext, useMemo } from "react";
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
var NovuContext = createContext(void 0);
|
|
10
|
+
var NovuProvider = ({
|
|
11
|
+
children,
|
|
12
|
+
applicationIdentifier,
|
|
13
|
+
subscriberId,
|
|
14
|
+
subscriberHash,
|
|
15
|
+
backendUrl,
|
|
16
|
+
socketUrl,
|
|
17
|
+
useCache
|
|
18
|
+
}) => {
|
|
19
|
+
const novu = useMemo(
|
|
20
|
+
() => new Novu({ applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache }),
|
|
21
|
+
[applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache]
|
|
22
|
+
);
|
|
23
|
+
return /* @__PURE__ */ jsx(NovuContext.Provider, { value: novu, children });
|
|
24
|
+
};
|
|
25
|
+
var useNovu = () => {
|
|
26
|
+
const context = useContext(NovuContext);
|
|
27
|
+
if (!context) {
|
|
28
|
+
throw new Error("useNovu must be used within a <NovuProvider />");
|
|
29
|
+
}
|
|
30
|
+
return context;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
// src/hooks/useNotifications.ts
|
|
34
|
+
var useNotifications = (props) => {
|
|
35
|
+
const { tags, read, archived = false, limit, onSuccess, onError } = props || {};
|
|
36
|
+
const filterRef = useRef(void 0);
|
|
37
|
+
const { notifications, on, off } = useNovu();
|
|
38
|
+
const [data, setData] = useState();
|
|
39
|
+
const [error, setError] = useState();
|
|
40
|
+
const [isLoading, setIsLoading] = useState(true);
|
|
41
|
+
const [isFetching, setIsFetching] = useState(false);
|
|
42
|
+
const [hasMore, setHasMore] = useState(false);
|
|
43
|
+
const length = data?.length;
|
|
44
|
+
const after = length ? data[length - 1].id : void 0;
|
|
45
|
+
const sync = (event) => {
|
|
46
|
+
if (!event.data || filterRef.current && !isSameFilter(filterRef.current, event.data.filter)) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
setData(event.data.notifications);
|
|
50
|
+
setHasMore(event.data.hasMore);
|
|
51
|
+
};
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
on("notifications.list.updated", sync);
|
|
54
|
+
return () => {
|
|
55
|
+
off("notifications.list.updated", sync);
|
|
56
|
+
};
|
|
57
|
+
}, []);
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
const newFilter = { tags, read, archived };
|
|
60
|
+
if (filterRef.current && isSameFilter(filterRef.current, newFilter)) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
notifications.clearCache({ filter: filterRef.current });
|
|
64
|
+
filterRef.current = newFilter;
|
|
65
|
+
fetchNotifications({ refetch: true });
|
|
66
|
+
}, [tags, read, archived]);
|
|
67
|
+
const fetchNotifications = async (options) => {
|
|
68
|
+
if (options?.refetch) {
|
|
69
|
+
setError(void 0);
|
|
70
|
+
setIsLoading(true);
|
|
71
|
+
setIsFetching(false);
|
|
72
|
+
}
|
|
73
|
+
setIsFetching(true);
|
|
74
|
+
const response = await notifications.list({
|
|
75
|
+
tags,
|
|
76
|
+
read,
|
|
77
|
+
archived,
|
|
78
|
+
limit,
|
|
79
|
+
after: options?.refetch ? void 0 : after
|
|
80
|
+
});
|
|
81
|
+
if (response.error) {
|
|
82
|
+
setError(response.error);
|
|
83
|
+
onError?.(response.error);
|
|
84
|
+
} else {
|
|
85
|
+
onSuccess?.(response.data.notifications);
|
|
86
|
+
setData(response.data.notifications);
|
|
87
|
+
setHasMore(response.data.hasMore);
|
|
88
|
+
}
|
|
89
|
+
setIsLoading(false);
|
|
90
|
+
setIsFetching(false);
|
|
91
|
+
};
|
|
92
|
+
const refetch = () => {
|
|
93
|
+
notifications.clearCache({ filter: { tags, read, archived } });
|
|
94
|
+
return fetchNotifications({ refetch: true });
|
|
95
|
+
};
|
|
96
|
+
const fetchMore = async () => {
|
|
97
|
+
if (!hasMore || isFetching) return;
|
|
98
|
+
return fetchNotifications();
|
|
99
|
+
};
|
|
100
|
+
const readAll = async () => {
|
|
101
|
+
return await notifications.readAll({ tags });
|
|
102
|
+
};
|
|
103
|
+
const archiveAll = async () => {
|
|
104
|
+
return await notifications.archiveAll({ tags });
|
|
105
|
+
};
|
|
106
|
+
const archiveAllRead = async () => {
|
|
107
|
+
return await notifications.archiveAllRead({ tags });
|
|
108
|
+
};
|
|
109
|
+
return {
|
|
110
|
+
readAll,
|
|
111
|
+
archiveAll,
|
|
112
|
+
archiveAllRead,
|
|
113
|
+
notifications: data,
|
|
114
|
+
error,
|
|
115
|
+
isLoading,
|
|
116
|
+
isFetching,
|
|
117
|
+
refetch,
|
|
118
|
+
fetchMore,
|
|
119
|
+
hasMore
|
|
120
|
+
};
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
// src/hooks/usePreferences.ts
|
|
124
|
+
import { useEffect as useEffect2, useState as useState2 } from "react";
|
|
125
|
+
var usePreferences = (props) => {
|
|
126
|
+
const { onSuccess, onError } = props || {};
|
|
127
|
+
const [data, setData] = useState2();
|
|
128
|
+
const { preferences, on, off } = useNovu();
|
|
129
|
+
const [error, setError] = useState2();
|
|
130
|
+
const [isLoading, setIsLoading] = useState2(true);
|
|
131
|
+
const [isFetching, setIsFetching] = useState2(false);
|
|
132
|
+
const sync = (event) => {
|
|
133
|
+
if (!event.data) {
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
setData(event.data);
|
|
137
|
+
};
|
|
138
|
+
useEffect2(() => {
|
|
139
|
+
fetchPreferences();
|
|
140
|
+
on("preferences.list.updated", sync);
|
|
141
|
+
on("preferences.list.pending", sync);
|
|
142
|
+
on("preferences.list.resolved", sync);
|
|
143
|
+
return () => {
|
|
144
|
+
off("preferences.list.updated", sync);
|
|
145
|
+
off("preferences.list.pending", sync);
|
|
146
|
+
off("preferences.list.resolved", sync);
|
|
147
|
+
};
|
|
148
|
+
}, []);
|
|
149
|
+
const fetchPreferences = async () => {
|
|
150
|
+
setIsFetching(true);
|
|
151
|
+
const response = await preferences.list();
|
|
152
|
+
if (response.error) {
|
|
153
|
+
setError(response.error);
|
|
154
|
+
onError?.(response.error);
|
|
155
|
+
} else {
|
|
156
|
+
onSuccess?.(response.data);
|
|
157
|
+
}
|
|
158
|
+
setIsLoading(false);
|
|
159
|
+
setIsFetching(false);
|
|
160
|
+
};
|
|
161
|
+
const refetch = () => {
|
|
162
|
+
preferences.cache.clearAll();
|
|
163
|
+
return fetchPreferences();
|
|
164
|
+
};
|
|
165
|
+
return {
|
|
166
|
+
preferences: data,
|
|
167
|
+
error,
|
|
168
|
+
isLoading,
|
|
169
|
+
isFetching,
|
|
170
|
+
refetch
|
|
171
|
+
};
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
// src/hooks/useCounts.ts
|
|
175
|
+
import { useEffect as useEffect5, useState as useState4 } from "react";
|
|
176
|
+
import { areTagsEqual } from "@novu/js";
|
|
177
|
+
|
|
178
|
+
// src/hooks/internal/useWebsocketEvent.ts
|
|
179
|
+
import { useEffect as useEffect4 } from "react";
|
|
180
|
+
|
|
181
|
+
// src/utils/requestLock.ts
|
|
182
|
+
function requestLock(id, cb) {
|
|
183
|
+
if (!("locks" in navigator)) {
|
|
184
|
+
cb(id);
|
|
185
|
+
return () => {
|
|
186
|
+
};
|
|
187
|
+
}
|
|
188
|
+
let isFulfilled = false;
|
|
189
|
+
let promiseResolve;
|
|
190
|
+
const promise = new Promise((resolve) => {
|
|
191
|
+
promiseResolve = resolve;
|
|
192
|
+
});
|
|
193
|
+
navigator.locks.request(id, () => {
|
|
194
|
+
if (!isFulfilled) {
|
|
195
|
+
cb(id);
|
|
196
|
+
}
|
|
197
|
+
return promise;
|
|
198
|
+
});
|
|
199
|
+
return () => {
|
|
200
|
+
isFulfilled = true;
|
|
201
|
+
promiseResolve();
|
|
202
|
+
};
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
// src/hooks/internal/useBrowserTabsChannel.ts
|
|
206
|
+
import { useEffect as useEffect3, useState as useState3 } from "react";
|
|
207
|
+
var useBrowserTabsChannel = ({
|
|
208
|
+
channelName,
|
|
209
|
+
onMessage
|
|
210
|
+
}) => {
|
|
211
|
+
const [tabsChannel] = useState3(
|
|
212
|
+
typeof BroadcastChannel !== "undefined" ? new BroadcastChannel(channelName) : void 0
|
|
213
|
+
);
|
|
214
|
+
const postMessage = (data) => {
|
|
215
|
+
tabsChannel?.postMessage(data);
|
|
216
|
+
};
|
|
217
|
+
useEffect3(() => {
|
|
218
|
+
const listener = (event) => {
|
|
219
|
+
onMessage(event.data);
|
|
220
|
+
};
|
|
221
|
+
tabsChannel?.addEventListener("message", listener);
|
|
222
|
+
return () => {
|
|
223
|
+
tabsChannel?.removeEventListener("message", listener);
|
|
224
|
+
};
|
|
225
|
+
}, []);
|
|
226
|
+
return { postMessage };
|
|
227
|
+
};
|
|
228
|
+
|
|
229
|
+
// src/hooks/internal/useWebsocketEvent.ts
|
|
230
|
+
var useWebSocketEvent = ({
|
|
231
|
+
event: webSocketEvent,
|
|
232
|
+
eventHandler: onMessage
|
|
233
|
+
}) => {
|
|
234
|
+
const novu = useNovu();
|
|
235
|
+
const { postMessage } = useBrowserTabsChannel({ channelName: `nv.${webSocketEvent}`, onMessage });
|
|
236
|
+
const updateReadCount = (data) => {
|
|
237
|
+
onMessage(data);
|
|
238
|
+
postMessage(data);
|
|
239
|
+
};
|
|
240
|
+
useEffect4(() => {
|
|
241
|
+
const resolveLock = requestLock(`nv.${webSocketEvent}`, () => {
|
|
242
|
+
novu.on(webSocketEvent, updateReadCount);
|
|
243
|
+
});
|
|
244
|
+
return () => {
|
|
245
|
+
novu.off(webSocketEvent, updateReadCount);
|
|
246
|
+
resolveLock();
|
|
247
|
+
};
|
|
248
|
+
}, []);
|
|
249
|
+
};
|
|
250
|
+
|
|
251
|
+
// src/hooks/useCounts.ts
|
|
252
|
+
var useCounts = (props) => {
|
|
253
|
+
const { filters, onSuccess, onError } = props;
|
|
254
|
+
const { notifications } = useNovu();
|
|
255
|
+
const [error, setError] = useState4();
|
|
256
|
+
const [counts, setCounts] = useState4();
|
|
257
|
+
const [isLoading, setIsLoading] = useState4(true);
|
|
258
|
+
const [isFetching, setIsFetching] = useState4(false);
|
|
259
|
+
const sync = async (notification) => {
|
|
260
|
+
const existingCounts = counts ?? new Array(filters.length).fill(void 0);
|
|
261
|
+
let countFiltersToFetch = [];
|
|
262
|
+
if (notification) {
|
|
263
|
+
for (let i = 0; i < existingCounts.length; i++) {
|
|
264
|
+
const filter = filters[i];
|
|
265
|
+
if (areTagsEqual(filter.tags, notification.tags)) {
|
|
266
|
+
countFiltersToFetch.push(filter);
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
} else {
|
|
270
|
+
countFiltersToFetch = filters;
|
|
271
|
+
}
|
|
272
|
+
if (countFiltersToFetch.length === 0) {
|
|
273
|
+
return;
|
|
274
|
+
}
|
|
275
|
+
setIsFetching(true);
|
|
276
|
+
const countsRes = await notifications.count({ filters: countFiltersToFetch });
|
|
277
|
+
setIsFetching(false);
|
|
278
|
+
setIsLoading(false);
|
|
279
|
+
if (countsRes.error) {
|
|
280
|
+
setError(countsRes.error);
|
|
281
|
+
onError?.(countsRes.error);
|
|
282
|
+
return;
|
|
283
|
+
}
|
|
284
|
+
const data = countsRes.data;
|
|
285
|
+
onSuccess?.(data.counts);
|
|
286
|
+
setCounts((oldCounts) => {
|
|
287
|
+
const newCounts = [];
|
|
288
|
+
const countsReceived = data.counts;
|
|
289
|
+
for (let i = 0; i < existingCounts.length; i++) {
|
|
290
|
+
const countReceived = countsReceived.find((c) => areTagsEqual(c.filter.tags, existingCounts[i]?.filter.tags));
|
|
291
|
+
newCounts.push(countReceived || oldCounts[i]);
|
|
292
|
+
}
|
|
293
|
+
return newCounts;
|
|
294
|
+
});
|
|
295
|
+
};
|
|
296
|
+
useWebSocketEvent({
|
|
297
|
+
event: "notifications.notification_received",
|
|
298
|
+
eventHandler: (data) => {
|
|
299
|
+
sync(data.result);
|
|
300
|
+
}
|
|
301
|
+
});
|
|
302
|
+
useWebSocketEvent({
|
|
303
|
+
event: "notifications.unread_count_changed",
|
|
304
|
+
eventHandler: () => {
|
|
305
|
+
sync();
|
|
306
|
+
}
|
|
307
|
+
});
|
|
308
|
+
useEffect5(() => {
|
|
309
|
+
setError(void 0);
|
|
310
|
+
setIsLoading(true);
|
|
311
|
+
setIsFetching(false);
|
|
312
|
+
sync();
|
|
313
|
+
}, [JSON.stringify(filters)]);
|
|
314
|
+
const refetch = async () => {
|
|
315
|
+
await sync();
|
|
316
|
+
};
|
|
317
|
+
return { counts, error, refetch, isLoading, isFetching };
|
|
318
|
+
};
|
|
319
|
+
export {
|
|
320
|
+
NovuProvider,
|
|
321
|
+
useCounts,
|
|
322
|
+
useNotifications,
|
|
323
|
+
useNovu,
|
|
324
|
+
usePreferences
|
|
325
|
+
};
|
|
326
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/useNotifications.ts","../../src/hooks/NovuProvider.tsx","../../src/hooks/usePreferences.ts","../../src/hooks/useCounts.ts","../../src/hooks/internal/useWebsocketEvent.ts","../../src/utils/requestLock.ts","../../src/hooks/internal/useBrowserTabsChannel.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport { ListNotificationsResponse, Notification, NovuError, isSameFilter, NotificationFilter } from '@novu/js';\nimport { useNovu } from './NovuProvider';\n\nexport type UseNotificationsProps = {\n tags?: string[];\n read?: boolean;\n archived?: boolean;\n limit?: number;\n onSuccess?: (data: Notification[]) => void;\n onError?: (error: NovuError) => void;\n};\n\nexport const useNotifications = (props?: UseNotificationsProps) => {\n const { tags, read, archived = false, limit, onSuccess, onError } = props || {};\n const filterRef = useRef<NotificationFilter | undefined>(undefined);\n const { notifications, on, off } = useNovu();\n const [data, setData] = useState<Array<Notification>>();\n const [error, setError] = useState<NovuError>();\n const [isLoading, setIsLoading] = useState(true);\n const [isFetching, setIsFetching] = useState(false);\n const [hasMore, setHasMore] = useState(false);\n const length = data?.length;\n const after = length ? data[length - 1].id : undefined;\n\n const sync = (event: { data?: ListNotificationsResponse }) => {\n if (!event.data || (filterRef.current && !isSameFilter(filterRef.current, event.data.filter))) {\n return;\n }\n setData(event.data.notifications);\n setHasMore(event.data.hasMore);\n };\n\n useEffect(() => {\n on('notifications.list.updated', sync);\n\n return () => {\n off('notifications.list.updated', sync);\n };\n }, []);\n\n useEffect(() => {\n const newFilter = { tags, read, archived };\n if (filterRef.current && isSameFilter(filterRef.current, newFilter)) {\n return;\n }\n\n notifications.clearCache({ filter: filterRef.current });\n filterRef.current = newFilter;\n\n fetchNotifications({ refetch: true });\n }, [tags, read, archived]);\n\n const fetchNotifications = async (options?: { refetch: boolean }) => {\n if (options?.refetch) {\n setError(undefined);\n setIsLoading(true);\n setIsFetching(false);\n }\n setIsFetching(true);\n const response = await notifications.list({\n tags,\n read,\n archived,\n limit,\n after: options?.refetch ? undefined : after,\n });\n if (response.error) {\n setError(response.error);\n onError?.(response.error);\n } else {\n onSuccess?.(response.data!.notifications);\n setData(response.data!.notifications);\n setHasMore(response.data!.hasMore);\n }\n setIsLoading(false);\n setIsFetching(false);\n };\n\n const refetch = () => {\n notifications.clearCache({ filter: { tags, read, archived } });\n\n return fetchNotifications({ refetch: true });\n };\n\n const fetchMore = async () => {\n if (!hasMore || isFetching) return;\n\n return fetchNotifications();\n };\n\n const readAll = async () => {\n return await notifications.readAll({ tags });\n };\n\n const archiveAll = async () => {\n return await notifications.archiveAll({ tags });\n };\n\n const archiveAllRead = async () => {\n return await notifications.archiveAllRead({ tags });\n };\n\n return {\n readAll,\n archiveAll,\n archiveAllRead,\n notifications: data,\n error,\n isLoading,\n isFetching,\n refetch,\n fetchMore,\n hasMore,\n };\n};\n","import { Novu, NovuOptions } from '@novu/js';\nimport { createContext, useContext, useMemo } from 'react';\n\ntype NovuProviderProps = NovuOptions & {\n children: JSX.Element;\n};\n\nconst NovuContext = createContext<Novu | undefined>(undefined);\n\nexport const NovuProvider = ({\n children,\n applicationIdentifier,\n subscriberId,\n subscriberHash,\n backendUrl,\n socketUrl,\n useCache,\n}: NovuProviderProps) => {\n const novu = useMemo(\n () => new Novu({ applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache }),\n [applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache]\n );\n\n return <NovuContext.Provider value={novu}>{children}</NovuContext.Provider>;\n};\n\nexport const useNovu = () => {\n const context = useContext(NovuContext);\n if (!context) {\n throw new Error('useNovu must be used within a <NovuProvider />');\n }\n\n return context;\n};\n\nexport const useUnsafeNovu = () => {\n const context = useContext(NovuContext);\n\n return context;\n};\n","import { NovuError, Preference } from '@novu/js';\nimport { useEffect, useState } from 'react';\nimport { useNovu } from './NovuProvider';\n\ntype UsePreferencesProps = {\n onSuccess?: (data: Preference[]) => void;\n onError?: (error: NovuError) => void;\n};\n\ntype UsePreferencesResult = {\n preferences?: Preference[];\n error?: NovuError;\n isLoading: boolean; // initial loading\n isFetching: boolean; // the request is in flight\n refetch: () => Promise<void>;\n};\n\nexport const usePreferences = (props?: UsePreferencesProps): UsePreferencesResult => {\n const { onSuccess, onError } = props || {};\n const [data, setData] = useState<Preference[]>();\n const { preferences, on, off } = useNovu();\n const [error, setError] = useState<NovuError>();\n const [isLoading, setIsLoading] = useState(true);\n const [isFetching, setIsFetching] = useState(false);\n\n const sync = (event: { data?: Preference[] }) => {\n if (!event.data) {\n return;\n }\n setData(event.data);\n };\n\n useEffect(() => {\n fetchPreferences();\n\n on('preferences.list.updated', sync);\n on('preferences.list.pending', sync);\n on('preferences.list.resolved', sync);\n\n return () => {\n off('preferences.list.updated', sync);\n off('preferences.list.pending', sync);\n off('preferences.list.resolved', sync);\n };\n }, []);\n\n const fetchPreferences = async () => {\n setIsFetching(true);\n const response = await preferences.list();\n if (response.error) {\n setError(response.error);\n onError?.(response.error);\n } else {\n onSuccess?.(response.data!);\n }\n setIsLoading(false);\n setIsFetching(false);\n };\n\n const refetch = () => {\n preferences.cache.clearAll();\n return fetchPreferences();\n };\n\n return {\n preferences: data,\n error,\n isLoading,\n isFetching,\n refetch,\n };\n};\n","import { useEffect, useState } from 'react';\nimport { Notification, NotificationFilter, NovuError, areTagsEqual } from '@novu/js';\nimport { useNovu } from './NovuProvider';\nimport { useWebSocketEvent } from './internal/useWebsocketEvent';\n\ntype Count = {\n count: number;\n filter: NotificationFilter;\n};\n\ntype UseCountsProps = {\n filters: NotificationFilter[];\n onSuccess?: (data: Count[]) => void;\n onError?: (error: NovuError) => void;\n};\n\ntype UseCountsResult = {\n counts?: Count[];\n error?: NovuError;\n isLoading: boolean; // initial loading\n isFetching: boolean; // the request is in flight\n refetch: () => Promise<void>;\n};\n\nexport const useCounts = (props: UseCountsProps): UseCountsResult => {\n const { filters, onSuccess, onError } = props;\n const { notifications } = useNovu();\n const [error, setError] = useState<NovuError>();\n const [counts, setCounts] = useState<Count[]>();\n const [isLoading, setIsLoading] = useState(true);\n const [isFetching, setIsFetching] = useState(false);\n\n const sync = async (notification?: Notification) => {\n const existingCounts = counts ?? (new Array(filters.length).fill(undefined) as (Count | undefined)[]);\n let countFiltersToFetch: NotificationFilter[] = [];\n if (notification) {\n // eslint-disable-next-line no-plusplus\n for (let i = 0; i < existingCounts.length; i++) {\n const filter = filters[i];\n if (areTagsEqual(filter.tags, notification.tags)) {\n countFiltersToFetch.push(filter);\n }\n }\n } else {\n countFiltersToFetch = filters;\n }\n\n if (countFiltersToFetch.length === 0) {\n return;\n }\n\n setIsFetching(true);\n const countsRes = await notifications.count({ filters: countFiltersToFetch });\n setIsFetching(false);\n setIsLoading(false);\n if (countsRes.error) {\n setError(countsRes.error);\n onError?.(countsRes.error);\n\n return;\n }\n const data = countsRes.data!;\n onSuccess?.(data.counts);\n\n setCounts((oldCounts) => {\n const newCounts: Count[] = [];\n const countsReceived = data.counts;\n\n // eslint-disable-next-line no-plusplus\n for (let i = 0; i < existingCounts.length; i++) {\n const countReceived = countsReceived.find((c) => areTagsEqual(c.filter.tags, existingCounts[i]?.filter.tags));\n\n newCounts.push(countReceived || oldCounts![i]);\n }\n\n return newCounts;\n });\n };\n\n useWebSocketEvent({\n event: 'notifications.notification_received',\n eventHandler: (data) => {\n sync(data.result);\n },\n });\n\n useWebSocketEvent({\n event: 'notifications.unread_count_changed',\n eventHandler: () => {\n sync();\n },\n });\n\n useEffect(() => {\n setError(undefined);\n setIsLoading(true);\n setIsFetching(false);\n sync();\n }, [JSON.stringify(filters)]);\n\n const refetch = async () => {\n await sync();\n };\n\n return { counts, error, refetch, isLoading, isFetching };\n};\n","import { EventHandler, Events, SocketEventNames } from '@novu/js';\nimport { useEffect } from 'react';\nimport { useNovu } from '../NovuProvider';\nimport { requestLock } from '../../utils/requestLock';\nimport { useBrowserTabsChannel } from './useBrowserTabsChannel';\n\nexport const useWebSocketEvent = <E extends SocketEventNames>({\n event: webSocketEvent,\n eventHandler: onMessage,\n}: {\n event: E;\n eventHandler: (args: Events[E]) => void;\n}) => {\n const novu = useNovu();\n const { postMessage } = useBrowserTabsChannel({ channelName: `nv.${webSocketEvent}`, onMessage });\n\n const updateReadCount: EventHandler<Events[E]> = (data) => {\n onMessage(data);\n postMessage(data);\n };\n\n useEffect(() => {\n const resolveLock = requestLock(`nv.${webSocketEvent}`, () => {\n novu.on(webSocketEvent, updateReadCount);\n });\n\n return () => {\n novu.off(webSocketEvent, updateReadCount);\n resolveLock();\n };\n }, []);\n};\n","export function requestLock(id: string, cb: (id: string) => void) {\n // Check if the Lock API is available\n if (!('locks' in navigator)) {\n // If Lock API is not available, immediately invoke the callback and return a no-op function\n cb(id);\n return () => {};\n }\n\n let isFulfilled = false;\n let promiseResolve: () => void;\n\n const promise = new Promise<void>((resolve) => {\n promiseResolve = resolve;\n });\n\n navigator.locks.request(id, () => {\n if (!isFulfilled) {\n cb(id);\n }\n\n return promise;\n });\n\n return () => {\n isFulfilled = true;\n promiseResolve();\n };\n}\n","import { useEffect, useState } from 'react';\n\nexport const useBrowserTabsChannel = <T = unknown>({\n channelName,\n onMessage,\n}: {\n channelName: string;\n onMessage: (args: T) => void;\n}) => {\n const [tabsChannel] = useState(\n typeof BroadcastChannel !== 'undefined' ? new BroadcastChannel(channelName) : undefined\n );\n\n const postMessage = (data: T) => {\n tabsChannel?.postMessage(data);\n };\n\n useEffect(() => {\n const listener = (event: MessageEvent<T>) => {\n onMessage(event.data);\n };\n\n tabsChannel?.addEventListener('message', listener);\n\n return () => {\n tabsChannel?.removeEventListener('message', listener);\n };\n }, []);\n\n return { postMessage };\n};\n"],"mappings":";AAAA,SAAS,UAAU,WAAW,cAAc;AAC5C,SAA6D,oBAAwC;;;ACDrG,SAAS,YAAyB;AAClC,SAAS,eAAe,YAAY,eAAe;AAsB1C;AAhBT,IAAM,cAAc,cAAgC,MAAS;AAEtD,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,QAAM,OAAO;AAAA,IACX,MAAM,IAAI,KAAK,EAAE,uBAAuB,cAAc,gBAAgB,YAAY,WAAW,SAAS,CAAC;AAAA,IACvG,CAAC,uBAAuB,cAAc,gBAAgB,YAAY,WAAW,QAAQ;AAAA,EACvF;AAEA,SAAO,oBAAC,YAAY,UAAZ,EAAqB,OAAO,MAAO,UAAS;AACtD;AAEO,IAAM,UAAU,MAAM;AAC3B,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,gDAAgD;AAAA,EAClE;AAEA,SAAO;AACT;;;ADpBO,IAAM,mBAAmB,CAAC,UAAkC;AACjE,QAAM,EAAE,MAAM,MAAM,WAAW,OAAO,OAAO,WAAW,QAAQ,IAAI,SAAS,CAAC;AAC9E,QAAM,YAAY,OAAuC,MAAS;AAClE,QAAM,EAAE,eAAe,IAAI,IAAI,IAAI,QAAQ;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,SAA8B;AACtD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAoB;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,SAAS,MAAM;AACrB,QAAM,QAAQ,SAAS,KAAK,SAAS,CAAC,EAAE,KAAK;AAE7C,QAAM,OAAO,CAAC,UAAgD;AAC5D,QAAI,CAAC,MAAM,QAAS,UAAU,WAAW,CAAC,aAAa,UAAU,SAAS,MAAM,KAAK,MAAM,GAAI;AAC7F;AAAA,IACF;AACA,YAAQ,MAAM,KAAK,aAAa;AAChC,eAAW,MAAM,KAAK,OAAO;AAAA,EAC/B;AAEA,YAAU,MAAM;AACd,OAAG,8BAA8B,IAAI;AAErC,WAAO,MAAM;AACX,UAAI,8BAA8B,IAAI;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,YAAY,EAAE,MAAM,MAAM,SAAS;AACzC,QAAI,UAAU,WAAW,aAAa,UAAU,SAAS,SAAS,GAAG;AACnE;AAAA,IACF;AAEA,kBAAc,WAAW,EAAE,QAAQ,UAAU,QAAQ,CAAC;AACtD,cAAU,UAAU;AAEpB,uBAAmB,EAAE,SAAS,KAAK,CAAC;AAAA,EACtC,GAAG,CAAC,MAAM,MAAM,QAAQ,CAAC;AAEzB,QAAM,qBAAqB,OAAO,YAAmC;AACnE,QAAI,SAAS,SAAS;AACpB,eAAS,MAAS;AAClB,mBAAa,IAAI;AACjB,oBAAc,KAAK;AAAA,IACrB;AACA,kBAAc,IAAI;AAClB,UAAM,WAAW,MAAM,cAAc,KAAK;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS,UAAU,SAAY;AAAA,IACxC,CAAC;AACD,QAAI,SAAS,OAAO;AAClB,eAAS,SAAS,KAAK;AACvB,gBAAU,SAAS,KAAK;AAAA,IAC1B,OAAO;AACL,kBAAY,SAAS,KAAM,aAAa;AACxC,cAAQ,SAAS,KAAM,aAAa;AACpC,iBAAW,SAAS,KAAM,OAAO;AAAA,IACnC;AACA,iBAAa,KAAK;AAClB,kBAAc,KAAK;AAAA,EACrB;AAEA,QAAM,UAAU,MAAM;AACpB,kBAAc,WAAW,EAAE,QAAQ,EAAE,MAAM,MAAM,SAAS,EAAE,CAAC;AAE7D,WAAO,mBAAmB,EAAE,SAAS,KAAK,CAAC;AAAA,EAC7C;AAEA,QAAM,YAAY,YAAY;AAC5B,QAAI,CAAC,WAAW,WAAY;AAE5B,WAAO,mBAAmB;AAAA,EAC5B;AAEA,QAAM,UAAU,YAAY;AAC1B,WAAO,MAAM,cAAc,QAAQ,EAAE,KAAK,CAAC;AAAA,EAC7C;AAEA,QAAM,aAAa,YAAY;AAC7B,WAAO,MAAM,cAAc,WAAW,EAAE,KAAK,CAAC;AAAA,EAChD;AAEA,QAAM,iBAAiB,YAAY;AACjC,WAAO,MAAM,cAAc,eAAe,EAAE,KAAK,CAAC;AAAA,EACpD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;AElHA,SAAS,aAAAA,YAAW,YAAAC,iBAAgB;AAgB7B,IAAM,iBAAiB,CAAC,UAAsD;AACnF,QAAM,EAAE,WAAW,QAAQ,IAAI,SAAS,CAAC;AACzC,QAAM,CAAC,MAAM,OAAO,IAAIC,UAAuB;AAC/C,QAAM,EAAE,aAAa,IAAI,IAAI,IAAI,QAAQ;AACzC,QAAM,CAAC,OAAO,QAAQ,IAAIA,UAAoB;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAIA,UAAS,IAAI;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAIA,UAAS,KAAK;AAElD,QAAM,OAAO,CAAC,UAAmC;AAC/C,QAAI,CAAC,MAAM,MAAM;AACf;AAAA,IACF;AACA,YAAQ,MAAM,IAAI;AAAA,EACpB;AAEA,EAAAC,WAAU,MAAM;AACd,qBAAiB;AAEjB,OAAG,4BAA4B,IAAI;AACnC,OAAG,4BAA4B,IAAI;AACnC,OAAG,6BAA6B,IAAI;AAEpC,WAAO,MAAM;AACX,UAAI,4BAA4B,IAAI;AACpC,UAAI,4BAA4B,IAAI;AACpC,UAAI,6BAA6B,IAAI;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,YAAY;AACnC,kBAAc,IAAI;AAClB,UAAM,WAAW,MAAM,YAAY,KAAK;AACxC,QAAI,SAAS,OAAO;AAClB,eAAS,SAAS,KAAK;AACvB,gBAAU,SAAS,KAAK;AAAA,IAC1B,OAAO;AACL,kBAAY,SAAS,IAAK;AAAA,IAC5B;AACA,iBAAa,KAAK;AAClB,kBAAc,KAAK;AAAA,EACrB;AAEA,QAAM,UAAU,MAAM;AACpB,gBAAY,MAAM,SAAS;AAC3B,WAAO,iBAAiB;AAAA,EAC1B;AAEA,SAAO;AAAA,IACL,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;ACvEA,SAAS,aAAAC,YAAW,YAAAC,iBAAgB;AACpC,SAAsD,oBAAoB;;;ACA1E,SAAS,aAAAC,kBAAiB;;;ACDnB,SAAS,YAAY,IAAY,IAA0B;AAEhE,MAAI,EAAE,WAAW,YAAY;AAE3B,OAAG,EAAE;AACL,WAAO,MAAM;AAAA,IAAC;AAAA,EAChB;AAEA,MAAI,cAAc;AAClB,MAAI;AAEJ,QAAM,UAAU,IAAI,QAAc,CAAC,YAAY;AAC7C,qBAAiB;AAAA,EACnB,CAAC;AAED,YAAU,MAAM,QAAQ,IAAI,MAAM;AAChC,QAAI,CAAC,aAAa;AAChB,SAAG,EAAE;AAAA,IACP;AAEA,WAAO;AAAA,EACT,CAAC;AAED,SAAO,MAAM;AACX,kBAAc;AACd,mBAAe;AAAA,EACjB;AACF;;;AC3BA,SAAS,aAAAC,YAAW,YAAAC,iBAAgB;AAE7B,IAAM,wBAAwB,CAAc;AAAA,EACjD;AAAA,EACA;AACF,MAGM;AACJ,QAAM,CAAC,WAAW,IAAIA;AAAA,IACpB,OAAO,qBAAqB,cAAc,IAAI,iBAAiB,WAAW,IAAI;AAAA,EAChF;AAEA,QAAM,cAAc,CAAC,SAAY;AAC/B,iBAAa,YAAY,IAAI;AAAA,EAC/B;AAEA,EAAAD,WAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAA2B;AAC3C,gBAAU,MAAM,IAAI;AAAA,IACtB;AAEA,iBAAa,iBAAiB,WAAW,QAAQ;AAEjD,WAAO,MAAM;AACX,mBAAa,oBAAoB,WAAW,QAAQ;AAAA,IACtD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,YAAY;AACvB;;;AFxBO,IAAM,oBAAoB,CAA6B;AAAA,EAC5D,OAAO;AAAA,EACP,cAAc;AAChB,MAGM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,YAAY,IAAI,sBAAsB,EAAE,aAAa,MAAM,cAAc,IAAI,UAAU,CAAC;AAEhG,QAAM,kBAA2C,CAAC,SAAS;AACzD,cAAU,IAAI;AACd,gBAAY,IAAI;AAAA,EAClB;AAEA,EAAAE,WAAU,MAAM;AACd,UAAM,cAAc,YAAY,MAAM,cAAc,IAAI,MAAM;AAC5D,WAAK,GAAG,gBAAgB,eAAe;AAAA,IACzC,CAAC;AAED,WAAO,MAAM;AACX,WAAK,IAAI,gBAAgB,eAAe;AACxC,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AACP;;;ADPO,IAAM,YAAY,CAAC,UAA2C;AACnE,QAAM,EAAE,SAAS,WAAW,QAAQ,IAAI;AACxC,QAAM,EAAE,cAAc,IAAI,QAAQ;AAClC,QAAM,CAAC,OAAO,QAAQ,IAAIC,UAAoB;AAC9C,QAAM,CAAC,QAAQ,SAAS,IAAIA,UAAkB;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAIA,UAAS,IAAI;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAIA,UAAS,KAAK;AAElD,QAAM,OAAO,OAAO,iBAAgC;AAClD,UAAM,iBAAiB,UAAW,IAAI,MAAM,QAAQ,MAAM,EAAE,KAAK,MAAS;AAC1E,QAAI,sBAA4C,CAAC;AACjD,QAAI,cAAc;AAEhB,eAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,cAAM,SAAS,QAAQ,CAAC;AACxB,YAAI,aAAa,OAAO,MAAM,aAAa,IAAI,GAAG;AAChD,8BAAoB,KAAK,MAAM;AAAA,QACjC;AAAA,MACF;AAAA,IACF,OAAO;AACL,4BAAsB;AAAA,IACxB;AAEA,QAAI,oBAAoB,WAAW,GAAG;AACpC;AAAA,IACF;AAEA,kBAAc,IAAI;AAClB,UAAM,YAAY,MAAM,cAAc,MAAM,EAAE,SAAS,oBAAoB,CAAC;AAC5E,kBAAc,KAAK;AACnB,iBAAa,KAAK;AAClB,QAAI,UAAU,OAAO;AACnB,eAAS,UAAU,KAAK;AACxB,gBAAU,UAAU,KAAK;AAEzB;AAAA,IACF;AACA,UAAM,OAAO,UAAU;AACvB,gBAAY,KAAK,MAAM;AAEvB,cAAU,CAAC,cAAc;AACvB,YAAM,YAAqB,CAAC;AAC5B,YAAM,iBAAiB,KAAK;AAG5B,eAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,cAAM,gBAAgB,eAAe,KAAK,CAAC,MAAM,aAAa,EAAE,OAAO,MAAM,eAAe,CAAC,GAAG,OAAO,IAAI,CAAC;AAE5G,kBAAU,KAAK,iBAAiB,UAAW,CAAC,CAAC;AAAA,MAC/C;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,oBAAkB;AAAA,IAChB,OAAO;AAAA,IACP,cAAc,CAAC,SAAS;AACtB,WAAK,KAAK,MAAM;AAAA,IAClB;AAAA,EACF,CAAC;AAED,oBAAkB;AAAA,IAChB,OAAO;AAAA,IACP,cAAc,MAAM;AAClB,WAAK;AAAA,IACP;AAAA,EACF,CAAC;AAED,EAAAC,WAAU,MAAM;AACd,aAAS,MAAS;AAClB,iBAAa,IAAI;AACjB,kBAAc,KAAK;AACnB,SAAK;AAAA,EACP,GAAG,CAAC,KAAK,UAAU,OAAO,CAAC,CAAC;AAE5B,QAAM,UAAU,YAAY;AAC1B,UAAM,KAAK;AAAA,EACb;AAEA,SAAO,EAAE,QAAQ,OAAO,SAAS,WAAW,WAAW;AACzD;","names":["useEffect","useState","useState","useEffect","useEffect","useState","useEffect","useEffect","useState","useEffect","useState","useEffect"]}
|
package/dist/server/server.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab } from '@novu/js/ui';
|
|
1
|
+
import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab, RouterPush } from '@novu/js/ui';
|
|
2
2
|
export { Notification } from '@novu/js/ui';
|
|
3
3
|
|
|
4
4
|
type NotificationsRenderer = (notification: Notification) => React.ReactNode;
|
|
@@ -20,6 +20,7 @@ type BaseProps = {
|
|
|
20
20
|
appearance?: Appearance;
|
|
21
21
|
localization?: Localization;
|
|
22
22
|
tabs?: Array<Tab>;
|
|
23
|
+
routerPush?: RouterPush;
|
|
23
24
|
};
|
|
24
25
|
type DefaultProps = BaseProps & DefaultInboxProps & {
|
|
25
26
|
children?: never;
|
package/dist/server/server.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab } from '@novu/js/ui';
|
|
1
|
+
import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab, RouterPush } from '@novu/js/ui';
|
|
2
2
|
export { Notification } from '@novu/js/ui';
|
|
3
3
|
|
|
4
4
|
type NotificationsRenderer = (notification: Notification) => React.ReactNode;
|
|
@@ -20,6 +20,7 @@ type BaseProps = {
|
|
|
20
20
|
appearance?: Appearance;
|
|
21
21
|
localization?: Localization;
|
|
22
22
|
tabs?: Array<Tab>;
|
|
23
|
+
routerPush?: RouterPush;
|
|
23
24
|
};
|
|
24
25
|
type DefaultProps = BaseProps & DefaultInboxProps & {
|
|
25
26
|
children?: never;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@novu/react",
|
|
3
|
-
"version": "2.0.0
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"repository": "https://github.com/novuhq/novu",
|
|
5
5
|
"description": "Novu's React SDK for building custom inbox notification experiences",
|
|
6
6
|
"author": "",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"scripts": {
|
|
38
38
|
"build:watch": "tsup --watch",
|
|
39
39
|
"build": "tsup",
|
|
40
|
-
"lint": "eslint
|
|
40
|
+
"lint": "eslint src"
|
|
41
41
|
},
|
|
42
42
|
"browserslist": {
|
|
43
43
|
"production": [
|
|
@@ -65,6 +65,6 @@
|
|
|
65
65
|
"react-dom": ">=17"
|
|
66
66
|
},
|
|
67
67
|
"dependencies": {
|
|
68
|
-
"@novu/js": "^2.0.0
|
|
68
|
+
"@novu/js": "^2.0.0"
|
|
69
69
|
}
|
|
70
70
|
}
|