Fix container failing after dynamic creation.

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 0.2.1 - 2021-08-06
+Fix rendering error when container is created, but not attached to the dom yet.
+
 ## 0.2.0 - 2021-07-17
 - New requirement: CSP must allow inline style tags.
 - Static styles are now applied using inline global style tag instead of setting them directly. This has minor performance improvement.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@minht11/solid-virtual-container",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Virtual list/grid for Solid-js.",
   "author": "Justinas Delinda",
   "license": "MIT",

src/helpers/create-main-axis-positions.ts

@@ -1,4 +1,4 @@
-import { createComputed, untrack } from 'solid-js'
+import { createComputed, createMemo, untrack } from 'solid-js'
 import { createStore, unwrap } from 'solid-js/store'
 import { Measurements } from './create-measurements-observer'
 import { diffPositions } from './diff-positions'
@@ -17,7 +17,6 @@ interface State {
   positionCount: number
   currentPosition: number
   maxScrollPosition: number
-  positions: number[]
 }
 
 export const createMainAxisPositions = (
@@ -30,7 +29,6 @@ export const createMainAxisPositions = (
     positionCount: 0,
     maxScrollPosition: 0,
     currentPosition: 0,
-    positions: [],
   })
 
   createComputed(() => {
@@ -88,25 +86,25 @@ export const createMainAxisPositions = (
   })
 
   let prevPosition = 0
-  createComputed(() => {
+  const positions = createMemo<number[]>((prev = []) => {
     if (!measurements.isMeasured) {
-      return
+      return prev
     }
 
+    const startPosition = state.currentPosition
     const newPositions = diffPositions({
       total: axis.totalItemCount,
       focusPosition: axis.focusPosition,
       positionCount: state.positionCount,
-      startPosition: state.currentPosition,
+      startPosition,
       prevStartPosition: prevPosition,
-      // Unwrap positions, because proxy access has non negligible performance cost.
-      prevPositions: untrack(() => unwrap(state.positions)),
+      prevPositions: prev,
     })
 
-    setState('positions', newPositions)
+    prevPosition = startPosition
 
-    prevPosition = state.currentPosition
+    return newPositions
   })
 
-  return () => state.positions
+  return positions
 }

src/helpers/create-measurements-observer.ts

@@ -1,6 +1,5 @@
 import {
   createSignal,
-  on,
   createMemo,
   useContext,
   createEffect,
@@ -188,26 +187,25 @@ export const createMeasurementsObserver = (
     setMeasurements('mainAxisScrollValue', getLiveScrollValue())
   }
 
-  createEffect(
-    on(targetEl, (target) => {
-      const container = containerEl()
-      if (!target) {
-        return
-      }
+  createEffect(() => {
+    const target = targetEl()
+    const container = containerEl()
+    if (!target || !container) {
+      return
+    }
 
-      target.addEventListener('scroll', onScrollHandle)
+    target.addEventListener('scroll', onScrollHandle)
 
-      ro.observe(target)
-      ro.observe(container)
+    ro.observe(target)
+    ro.observe(container)
 
-      onCleanup(() => {
-        setMeasurements('isMeasured', false)
-        target.removeEventListener('scroll', onScrollHandle)
-        ro.unobserve(target)
-        ro.unobserve(container)
-      })
-    }),
-  )
+    onCleanup(() => {
+      setMeasurements('isMeasured', false)
+      target.removeEventListener('scroll', onScrollHandle)
+      ro.unobserve(target)
+      ro.unobserve(container)
+    })
+  })
 
   return {
     containerEl,