From 92cd75becaa7900fcebd73e0d83b6f429a1bcd73 Mon Sep 17 00:00:00 2001
From: minht11 <justas543@gmail.com>
Date: Fri, 6 Aug 2021 22:27:01 +0300
Subject: [PATCH] Fix container failing after dynamic creation.

---
 CHANGELOG.md                                |  3 ++
 package-lock.json                           |  7 +++--
 package.json                                |  2 +-
 src/helpers/create-main-axis-positions.ts   | 20 ++++++------
 src/helpers/create-measurements-observer.ts | 34 ++++++++++-----------
 5 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6e0405c..33633dc 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/package-lock.json b/package-lock.json
index 6ebe1cd..39386a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,12 @@
 {
-  "name": "solid-virtual-container",
-  "version": "0.1.0",
+  "name": "@minht11/solid-virtual-container",
+  "version": "0.2.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.1.0",
+      "name": "@minht11/solid-virtual-container",
+      "version": "0.2.1",
       "license": "MIT",
       "devDependencies": {
         "@esm-bundle/chai": "^4.3.4",
diff --git a/package.json b/package.json
index 54f2114..6281a77 100644
--- a/package.json
+++ b/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",
diff --git a/src/helpers/create-main-axis-positions.ts b/src/helpers/create-main-axis-positions.ts
index be3d314..a84b284 100644
--- a/src/helpers/create-main-axis-positions.ts
+++ b/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
 }
diff --git a/src/helpers/create-measurements-observer.ts b/src/helpers/create-measurements-observer.ts
index 5850b7c..ed28424 100644
--- a/src/helpers/create-measurements-observer.ts
+++ b/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,