fix(react): [DO NOT MERGE] try removing hooks from server

packages/js/package.json

@@ -8,6 +8,10 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.mjs",
   "types": "dist/cjs/index.d.ts",
+  "browser": {
+    "./dist/esm/ui/server/index.mjs": "./dist/esm/ui/index.mjs",
+    "./dist/cjs/ui/server/index.js": "./dist/cjs/ui/index.js"
+  },
   "exports": {
     ".": {
       "import": {
@@ -22,11 +26,11 @@
     "./ui": {
       "import": {
         "types": "./dist/esm/ui/index.d.mts",
-        "default": "./dist/esm/ui/index.mjs"
+        "default": "./dist/esm/ui/server/index.mjs"
       },
       "require": {
         "types": "./dist/cjs/ui/index.d.ts",
-        "default": "./dist/cjs/ui/index.js"
+        "default": "./dist/cjs/ui/server/index.js"
       }
     },
     "./themes": {
@@ -131,13 +135,16 @@
     "mitt": "^3.0.1",
     "socket.io-client": "4.7.2",
     "solid-floating-ui": "^0.3.1",
-    "solid-js": "^1.8.11",
+    "solid-js": "^1.9.4",
     "solid-motionone": "^1.0.1",
     "tailwind-merge": "^2.4.0"
   },
   "nx": {
     "tags": [
       "type:package"
     ]
+  },
+  "overrides": {
+    "vite": "5.4.10"
   }
 }

packages/js/src/ui/components/Renderer.tsx

@@ -1,5 +1,5 @@
-import { For, onCleanup, onMount } from 'solid-js';
-import { MountableElement, Portal } from 'solid-js/web';
+import { For, onCleanup, onMount, Show } from 'solid-js';
+import { isServer, MountableElement, Portal } from 'solid-js/web';
 import { NovuUI } from '..';
 import { Novu } from '../../novu';
 import type { NovuOptions } from '../../types';
@@ -74,51 +74,59 @@ export const Renderer = (props: RendererProps) => {
     });
   });
 
+  if (isServer) return null;
+
   return (
-    <NovuProvider options={props.options} novu={props.novu}>
-      <LocalizationProvider localization={props.localization}>
-        <AppearanceProvider id={props.novuUI.id} appearance={props.appearance}>
-          <FocusManagerProvider>
-            <InboxProvider tabs={props.tabs} preferencesFilter={props.preferencesFilter} routerPush={props.routerPush}>
-              <CountProvider>
-                <For each={nodes()}>
-                  {(node) => {
-                    const novuComponent = () => props.nodes.get(node)!;
-                    let portalDivElement: HTMLDivElement;
-                    const Component = novuComponents[novuComponent().name];
+    <Show when={typeof window !== 'undefined'}>
+      <NovuProvider options={props.options} novu={props.novu}>
+        <LocalizationProvider localization={props.localization}>
+          <AppearanceProvider id={props.novuUI.id} appearance={props.appearance}>
+            <FocusManagerProvider>
+              <InboxProvider
+                tabs={props.tabs}
+                preferencesFilter={props.preferencesFilter}
+                routerPush={props.routerPush}
+              >
+                <CountProvider>
+                  <For each={nodes()}>
+                    {(node) => {
+                      const novuComponent = () => props.nodes.get(node)!;
+                      let portalDivElement: HTMLDivElement;
+                      const Component = novuComponents[novuComponent().name];
 
-                    onMount(() => {
-                      /*
-                       * return here if not `<Notifications /> or `<Preferences />` since we only want to override some styles for those to work properly
-                       * due to the extra divs being introduces by the renderer/mounter
-                       */
-                      if (!['Notifications', 'Preferences'].includes(novuComponent().name)) return;
+                      onMount(() => {
+                        /*
+                         * return here if not `<Notifications /> or `<Preferences />` since we only want to override some styles for those to work properly
+                         * due to the extra divs being introduces by the renderer/mounter
+                         */
+                        if (!['Notifications', 'Preferences'].includes(novuComponent().name)) return;
 
-                      if (node instanceof HTMLElement) {
-                        node.classList.add('nt-h-full');
-                      }
-                      portalDivElement.classList.add('nt-h-full');
-                    });
+                        if (node instanceof HTMLElement) {
+                          node.classList.add('nt-h-full');
+                        }
+                        portalDivElement.classList.add('nt-h-full');
+                      });
 
-                    return (
-                      <Portal
-                        mount={node}
-                        ref={(el) => {
-                          portalDivElement = el;
-                        }}
-                      >
-                        <Root>
-                          <Component {...novuComponent().props} />
-                        </Root>
-                      </Portal>
-                    );
-                  }}
-                </For>
-              </CountProvider>
-            </InboxProvider>
-          </FocusManagerProvider>
-        </AppearanceProvider>
-      </LocalizationProvider>
-    </NovuProvider>
+                      return (
+                        <Portal
+                          mount={node}
+                          ref={(el) => {
+                            portalDivElement = el;
+                          }}
+                        >
+                          <Root>
+                            <Component {...novuComponent().props} />
+                          </Root>
+                        </Portal>
+                      );
+                    }}
+                  </For>
+                </CountProvider>
+              </InboxProvider>
+            </FocusManagerProvider>
+          </AppearanceProvider>
+        </LocalizationProvider>
+      </NovuProvider>
+    </Show>
   );
 };

packages/js/src/ui/novuUI.tsx

@@ -1,5 +1,5 @@
 import { Accessor, Setter, ComponentProps, createSignal } from 'solid-js';
-import { MountableElement, render } from 'solid-js/web';
+import { isServer, MountableElement, render } from 'solid-js/web';
 import type { NovuOptions } from '../types';
 import { NovuComponent, NovuComponentName, novuComponents, Renderer } from './components/Renderer';
 import { generateRandomString } from './helpers';
@@ -69,7 +69,9 @@ export class NovuUI {
     this.#preferencesFilter = preferencesFilter;
     this.#setPreferencesFilter = setPreferencesFilter;
 
-    this.#mountComponentRenderer();
+    if (!isServer) {
+      this.#mountComponentRenderer();
+    }
   }
 
   #mountComponentRenderer(): void {

packages/js/src/ui/server.ts

@@ -0,0 +1,51 @@
+import { Accessor, ComponentProps, Setter } from 'solid-js';
+import { MountableElement } from 'solid-js/web';
+import { Appearance, Localization, NovuProviderProps, PreferencesFilter, RouterPush, Tab } from './types';
+import { NovuComponentName, novuComponents } from './components/Renderer';
+import { NovuOptions } from '../types';
+
+export type { Notification } from '../notifications';
+export type { InboxPage, InboxProps } from './components';
+export type { BaseNovuUIOptions, NovuUIOptions } from './novuUI';
+export * from './types';
+
+export class NovuUI {
+  #dispose: { (): void } | null = null;
+  #rootElement: HTMLElement;
+  #tabs: Accessor<Array<Tab>>;
+  #routerPush: Accessor<RouterPush | undefined>;
+  #setRouterPush: Setter<RouterPush | undefined>;
+  #preferencesFilter: Accessor<PreferencesFilter | undefined>;
+  #setPreferencesFilter: Setter<PreferencesFilter | undefined>;
+  id: string;
+
+  /* eslint-disable  @typescript-eslint/no-useless-constructor */
+  /* eslint-disable    @typescript-eslint/no-empty-function */
+  constructor(props: NovuProviderProps) {}
+
+  mountComponent<T extends NovuComponentName>({
+    name,
+    element,
+    props: componentProps,
+  }: {
+    name: T;
+    element: MountableElement;
+    props?: ComponentProps<(typeof novuComponents)[T]>;
+  }) {}
+
+  unmountComponent(element: MountableElement) {}
+
+  updateAppearance(appearance?: Appearance) {}
+
+  updateLocalization(localization?: Localization) {}
+
+  updateOptions(options: NovuOptions) {}
+
+  updateTabs(tabs?: Array<Tab>) {}
+
+  updatePreferencesFilter(preferencesFilter?: PreferencesFilter) {}
+
+  updateRouterPush(routerPush?: RouterPush) {}
+
+  unmount(): void {}
+}

packages/js/tsup.config.ts

@@ -38,6 +38,7 @@ const baseModuleConfig: Options = {
   entry: {
     index: './src/index.ts',
     'ui/index': './src/ui/index.ts',
+    'ui/server/index': './src/ui/server.ts',
     'themes/index': './src/ui/themes/index.ts',
     'internal/index': './src/ui/internal/index.ts',
   },

packages/js/ui/package.json

@@ -1,5 +1,9 @@
 {
-  "main": "../dist/cjs/ui/index.cjs",
-  "module": "../dist/esm/ui/index.mjs",
-  "types": "../dist/cjs/ui/index.d.ts"
+  "main": "../dist/cjs/ui/server/index.js",
+  "module": "../dist/esm/ui/server/index.mjs",
+  "types": "../dist/cjs/ui/index.d.ts",
+  "browser": {
+    "../dist/esm/ui/server/index.mjs": "../dist/esm/ui/index.mjs",
+    "../dist/cjs/ui/server/index.js": "../dist/cjs/ui/index.js"
+  }
 }

packages/react/package.json

@@ -10,7 +10,11 @@
   "types": "dist/client/index.d.ts",
   "browser": {
     "./dist/server/server.js": "./dist/client/index.js",
-    "./dist/server/server.mjs": "./dist/client/index.mjs"
+    "./dist/server/server.mjs": "./dist/client/index.mjs",
+    "./dist/hooks/index.mjs": "./dist/hooks/index.mjs",
+    "./dist/themes/index.mjs": "./dist/themes/index.mjs",
+    "./dist/hooks/index.js": "./dist/hooks/index.js",
+    "./dist/themes/index.js": "./dist/themes/index.js"
   },
   "exports": {
     ".": {
@@ -100,5 +104,8 @@
     "tags": [
       "type:package"
     ]
+  },
+  "overrides": {
+    "vite": "5.4.10"
   }
 }

packages/react/src/context/RendererContext.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { NovuUI } from '@novu/js/ui';
 import { createContextAndHook } from '../utils/createContextAndHook';
 
 export type MountedElement = React.ReactNode;

packages/react/src/server.ts

@@ -10,7 +10,4 @@ export function InboxContent() {}
 export function Notifications() {}
 export function Preferences() {}
 export function Bell() {}
-
-// Hooks
-export { NovuProvider } from './index';
-export * from './hooks';
+export function NovuProvider() {}