isserver-fixes

src/components/Editor/Toolbar/EditorFloatingMenu.tsx

@@ -1,5 +1,6 @@
 import type { Editor } from '@tiptap/core'
 import { Show, createEffect, createSignal } from 'solid-js'
+import { isServer } from 'solid-js/web'
 import { renderUploadedImage } from '~/components/Upload/renderUploadedImage'
 import { Icon } from '~/components/_shared/Icon'
 import { useLocalize } from '~/context/localize'
@@ -23,6 +24,7 @@ const embedData = (data: string) => {
   const element = document.createRange().createContextualFragment(data)
   const { attributes } = element.firstChild as HTMLIFrameElement
   const result: { src: string; width?: string; height?: string } = { src: '' }
+  if (isServer) return result
 
   for (let i = 0; i < attributes.length; i++) {
     const attribute = attributes.item(i)

src/components/HeaderNav/Header.tsx

@@ -1,6 +1,7 @@
 import { A, redirect, useSearchParams } from '@solidjs/router'
 import { clsx } from 'clsx'
 import { Show, createEffect, createSignal, onCleanup, onMount } from 'solid-js'
+import { isServer } from 'solid-js/web'
 import { useLocalize } from '~/context/localize'
 import { useSession } from '~/context/session'
 import { useUI } from '~/context/ui'
@@ -53,6 +54,7 @@ export const Header = (props: Props) => {
   let windowScrollTop = 0
 
   createEffect(() => {
+    if (isServer) return
     const mainContent = document.querySelector<HTMLDivElement>('.main-content')
 
     if (fixed() || modal() !== null) {

src/components/NotificationsPanel/NotificationsPanel.tsx

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx'
 import { Show, createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js'
+import { isServer } from 'solid-js/web'
 import { throttle } from 'throttle-debounce'
-
 import { useLocalize } from '~/context/localize'
 import { PAGE_SIZE, useNotifications } from '~/context/notifications'
 import { useSession } from '~/context/session'
@@ -9,7 +9,6 @@ import { useEscKeyDownHandler } from '~/lib/useEscKeyDownHandler'
 import { useOutsideClickHandler } from '~/lib/useOutsideClickHandler'
 import { Button } from '../_shared/Button'
 import { Icon } from '../_shared/Icon'
-
 import { EmptyMessage } from './EmptyMessage'
 import { NotificationGroup } from './NotificationView/NotificationGroup'
 
@@ -72,6 +71,7 @@ export const NotificationsPanel = (props: Props) => {
   let windowScrollTop = 0
 
   createEffect(() => {
+    if (isServer) return
     const mainContent = document.querySelector<HTMLDivElement>('.main-content')
 
     if (props.isOpen && mainContent && window) {

src/components/_shared/Lightbox/Lightbox.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx'
-import { Show, createEffect, createMemo, createSignal, on, onCleanup } from 'solid-js'
+import { Show, createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js'
 
 import { getImageUrl } from '~/lib/getThumbUrl'
 import { useEscKeyDownHandler } from '~/lib/useEscKeyDownHandler'
@@ -23,7 +23,7 @@ export const Lightbox = (props: Props) => {
   const [translateX, setTranslateX] = createSignal(0)
   const [translateY, setTranslateY] = createSignal(0)
   const [transitionEnabled, setTransitionEnabled] = createSignal(false)
-  let lightboxRef: HTMLElement | null
+  const [lightboxRef, setLightboxRef] = createSignal<HTMLDivElement | undefined>()
 
   const handleSmoothAction = (action: () => void) => {
     setTransitionEnabled(true)
@@ -32,11 +32,8 @@ export const Lightbox = (props: Props) => {
   }
 
   const closeLightbox = () => {
-    lightboxRef?.classList.add(styles.fadeOut)
-
-    setTimeout(() => {
-      props.onClose()
-    }, 200)
+    lightboxRef()?.classList.add(styles.fadeOut)
+    setTimeout(props.onClose, 200)
   }
 
   const zoomIn = (event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => {
@@ -88,30 +85,30 @@ export const Lightbox = (props: Props) => {
 
   useEscKeyDownHandler(closeLightbox)
 
-  let startX = 0
-  let startY = 0
-  let isDragging = false
+  const [startX, setStartX] = createSignal(0)
+  const [startY, setStartY] = createSignal(0)
+  const [isDragging, setIsDragging] = createSignal(false)
 
   const onMouseDown: (event: MouseEvent) => void = (event) => {
-    startX = event.clientX - translateX()
-    startY = event.clientY - translateY()
-    isDragging = true
+    setStartX(event.clientX - translateX())
+    setStartY(event.clientY - translateY())
+    setIsDragging(true)
     event.preventDefault()
   }
 
   const onMouseMove: (event: MouseEvent) => void = (event) => {
-    if (isDragging) {
-      setTranslateX(event.clientX - startX)
-      setTranslateY(event.clientY - startY)
+    if (isDragging()) {
+      setTranslateX(event.clientX - startX())
+      setTranslateY(event.clientY - startY())
     }
   }
 
-  const onMouseUp: () => void = () => {
-    isDragging = false
-  }
+  const onMouseUp = () => setIsDragging(false)
 
+  onMount(() => {
     document.addEventListener('mousemove', onMouseMove)
     document.addEventListener('mouseup', onMouseUp)
+  })
 
   onCleanup(() => {
     document.removeEventListener('mousemove', onMouseMove)
@@ -125,7 +122,6 @@ export const Lightbox = (props: Props) => {
   }))
 
   let fadeTimer: string | number | NodeJS.Timeout
-
   createEffect(
     on(
       zoomLevel,
@@ -147,7 +143,7 @@ export const Lightbox = (props: Props) => {
       class={clsx(styles.Lightbox, props.class)}
       onClick={closeLightbox}
       onWheel={(e) => e.preventDefault()}
-      ref={(el) => (lightboxRef = el)}
+      ref={setLightboxRef}
     >
       <Show when={pictureScalePercentage()}>
         <div class={styles.scalePercentage}>{`${pictureScalePercentage()}%`}</div>

src/lib/createTooltip.ts

@@ -70,11 +70,3 @@ export function createTooltip(referenceElement?: Element, tooltipElement?: HTMLE
     }
   }
 }
-
-// Usage example
-const referenceElement = document.querySelector('#reference')
-const tooltipElement = document.querySelector('#tooltip')
-createTooltip(referenceElement as HTMLElement, tooltipElement as HTMLElement, {
-  placement: 'top',
-  offset: [0, 8]
-})