refactor: use window size

package.json

@@ -20,6 +20,7 @@
     "@solid-primitives/i18n": "^1.4.1",
     "@solid-primitives/keyed": "^1.2.0",
     "@solid-primitives/media": "^2.2.5",
+    "@solid-primitives/resize-observer": "^2.0.21",
     "@solid-primitives/storage": "^2.1.1",
     "@solid-primitives/timer": "^1.3.7",
     "@solid-primitives/websocket": "^1.1.0",

pnpm-lock.yaml

@@ -32,6 +32,9 @@ dependencies:
   '@solid-primitives/media':
     specifier: ^2.2.5
     version: 2.2.5(solid-js@1.7.11)
+  '@solid-primitives/resize-observer':
+    specifier: ^2.0.21
+    version: 2.0.21(solid-js@1.7.11)
   '@solid-primitives/storage':
     specifier: ^2.1.1
     version: 2.1.1(solid-js@1.7.11)
@@ -2627,6 +2630,21 @@ packages:
       solid-js: 1.7.11
     dev: false
 
+  /@solid-primitives/resize-observer@2.0.21(solid-js@1.7.11):
+    resolution:
+      {
+        integrity: sha512-73k3hfk6qSW4ok18DSHytHmbXh5vP1SXIBLu8N0lW6khhlHGdWt2q5Zu4iLhVoqO2kQ4zju/hcyDOx7UTablow==,
+      }
+    peerDependencies:
+      solid-js: ^1.6.12
+    dependencies:
+      '@solid-primitives/event-listener': 2.3.0(solid-js@1.7.11)
+      '@solid-primitives/rootless': 1.4.2(solid-js@1.7.11)
+      '@solid-primitives/static-store': 0.0.5(solid-js@1.7.11)
+      '@solid-primitives/utils': 6.2.1(solid-js@1.7.11)
+      solid-js: 1.7.11
+    dev: false
+
   /@solid-primitives/rootless@1.4.2(solid-js@1.7.11):
     resolution:
       {
@@ -5329,10 +5347,7 @@ packages:
     dev: false
 
   /is-module@1.0.0:
-    resolution:
+    resolution: { integrity: sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE= }
-      {
-        integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==,
-      }
     dev: false
 
   /is-negative-zero@2.0.2:
@@ -5362,10 +5377,7 @@ packages:
     dev: false
 
   /is-obj@1.0.1:
-    resolution:
+    resolution: { integrity: sha1-PkcprB9f3gJc19g6iW2rn09n2w8= }
-      {
-        integrity: sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==,
-      }
     engines: { node: '>=0.10.0' }
     dev: false
 
@@ -5413,10 +5425,7 @@ packages:
     dev: false
 
   /is-regexp@1.0.0:
-    resolution:
+    resolution: { integrity: sha1-/S2INUXEa6xaYz57mgnof6LLUGk= }
-      {
-        integrity: sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==,
-      }
     engines: { node: '>=0.10.0' }
     dev: false
 
@@ -5586,10 +5595,7 @@ packages:
     dev: false
 
   /jsesc@0.5.0:
-    resolution:
+    resolution: { integrity: sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0= }
-      {
-        integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==,
-      }
     hasBin: true
     dev: false
 
@@ -5810,10 +5816,7 @@ packages:
     dev: false
 
   /lodash.debounce@4.0.8:
-    resolution:
+    resolution: { integrity: sha1-gteb/zCmfEAF/9XiUVMArZyk168= }
-      {
-        integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==,
-      }
     dev: false
 
   /lodash.isfunction@3.0.9:
@@ -5859,10 +5862,7 @@ packages:
     dev: false
 
   /lodash.sortby@4.7.0:
-    resolution:
+    resolution: { integrity: sha1-7dFMgk4sycHgsKG0K7UhBRakJDg= }
-      {
-        integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==,
-      }
     dev: false
 
   /lodash.startcase@4.4.0:
@@ -6915,7 +6915,6 @@ packages:
       {
         integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==,
       }
-    deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
     peerDependencies:
       rollup: ^2.0.0
     dependencies:
@@ -7216,7 +7215,6 @@ packages:
       {
         integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==,
       }
-    deprecated: Please use @jridgewell/sourcemap-codec instead
     dev: false
 
   /spdx-correct@3.2.0:
@@ -7744,10 +7742,7 @@ packages:
     dev: false
 
   /tr46@1.0.1:
-    resolution:
+    resolution: { integrity: sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk= }
-      {
-        integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==,
-      }
     dependencies:
       punycode: 2.3.0
     dev: false

src/components/ForTwoColumns.tsx

@@ -1,11 +1,11 @@
+import { createWindowSize } from '@solid-primitives/resize-observer'
 import { JSX, Show, createMemo } from 'solid-js'
-import { useWindowWidth } from '~/helpers'
 import { renderInTwoColumn } from '~/signals'
 
 export const ForTwoColumns = (props: { subChild: JSX.Element[] }) => {
-  const { windowWidth } = useWindowWidth()
+  const windowSize = createWindowSize()
   const isShowTwoColumns = createMemo(
-    () => windowWidth() >= 640 && renderInTwoColumn(),
+    () => windowSize.width >= 640 && renderInTwoColumn(),
   ) // 640 is sm size in daisyui
   const leftCloumns = createMemo(() =>
     props.subChild.filter((_, index) => index % 2 === 0 || !isShowTwoColumns()),

src/helpers/global.ts

@@ -1,22 +1,4 @@
-import { createSignal, onCleanup } from 'solid-js'
+import { createSignal } from 'solid-js'
-
-export const useWindowWidth = () => {
-  const [windowWidth, setWindowWidth] = createSignal(0)
-  const set = () => {
-    setWindowWidth(document.body?.clientWidth ?? 0)
-  }
-
-  set()
-  window.addEventListener('resize', set)
-
-  onCleanup(() => {
-    window.removeEventListener('resize', set)
-  })
-
-  return {
-    windowWidth,
-  }
-}
 
 export const useStringBooleanMap = () => {
   const [map, setMap] = createSignal<Record<string, boolean>>({})