fix some coord bugs, perf

packages-premium

@@ -1 +1 @@
-Subproject commit da99fb938c5815e466cd5502ee57dab13cdbbb10
+Subproject commit bb6d0f1231b6b0619b660b369c8f98e57ab637bf

packages/__tests__/src/legacy/aspectRatio.js

@@ -10,13 +10,13 @@ describe('aspectRatio', function() {
 
     var elementWidth = 675
 
-    it('fc-content should use the ratio 1:35 to set height', function() {
+    it('view div should use the ratio 1:35 to set height', function() {
       initCalendar({}, getCalendarElement(elementWidth))
       var height = getViewContainerEl().height()
       expect(Math.round(height)).toEqual(500)
     })
 
-    it('fc-content should have width of div', function() {
+    it('view div should have width of div', function() {
       initCalendar({}, getCalendarElement(elementWidth))
       var width = getViewContainerEl().width()
       expect(Math.round(width)).toEqual(elementWidth)

packages/__tests__/src/lib/ComponentSpy.js

@@ -2,24 +2,17 @@
 export default class ComponentSpy {
 
   renderCount = 0
-  sizingCount = 0
 
 
   constructor(ComponentClass, debugClassName) {
     this.ComponentClass = ComponentClass
     let origDidMount = this.origDidMount = ComponentClass.prototype.componentDidMount
     let origDidUpdate = this.origDidUpdate = ComponentClass.prototype.componentDidUpdate
-    let origHandleSizing = null
     let watcher = this
 
     ComponentClass.prototype.componentDidMount = function() {
       watcher.renderCount++
 
-      if (this.handleSizing) {
-        origHandleSizing = this.handleSizing
-        this.handleSizing = handleSizing
-      }
-
       if (debugClassName) {
         console.log(debugClassName + '::componentDidMount', watcher.renderCount)
       }
@@ -40,22 +33,11 @@ export default class ComponentSpy {
         origDidUpdate.apply(this, arguments)
       }
     }
-
-    function handleSizing() {
-      watcher.sizingCount++
-
-      if (debugClassName) {
-        console.log(debugClassName + '::handleSizing', watcher.sizingCount)
-      }
-
-      origHandleSizing.apply(this, arguments)
-    }
   }
 
 
   resetCounts() {
     this.renderCount = 0
-    this.sizingCount = 0
   }
 
 

packages/__tests__/src/performance/daygrid-rerenders.js

@@ -26,44 +26,43 @@ it('daygrid view rerenders well', function(done) {
     eventRenderCnt = 0
   }
 
-  function expectSomeViewRendering() {
-    expect(headerSpy.renderCount).toBeLessThanOrEqual(2)
-    expect(gridSpy.renderCount).toBeLessThanOrEqual(2)
-    expect(gridSpy.sizingCount).toBeLessThanOrEqual(2)
+  function expectHeaderRendered(bool) {
+    expect(headerSpy.renderCount).toBe(bool ? 1 : 0)
   }
 
-  function expectNoViewRendering() {
-    expect(headerSpy.renderCount).toBe(0)
-    expect(gridSpy.renderCount).toBe(0)
-    expect(gridSpy.sizingCount).toBe(0)
+  function expectGridRendered(bool) {
+    // 2nd render is for shrinkWidth
+    expect(gridSpy.renderCount).toBeLessThanOrEqual(bool ? 2 : 0)
   }
 
-  expectSomeViewRendering()
+  expectHeaderRendered(true)
+  expectGridRendered(true)
   expect(eventRenderCnt).toBe(1)
 
   resetCounts()
   currentCalendar.next()
-  expectSomeViewRendering()
+  expectHeaderRendered(true)
+  expectGridRendered(true)
   expect(eventRenderCnt).toBe(0) // event will be out of view
 
   resetCounts()
   currentCalendar.changeView('listWeek') // switch away
-  expectNoViewRendering()
+  expectHeaderRendered(false)
+  expectGridRendered(false)
   expect(eventRenderCnt).toBe(0)
 
   resetCounts()
   currentCalendar.changeView('dayGridMonth') // return to view
-  expectSomeViewRendering()
+  expectHeaderRendered(true)
+  expectGridRendered(true)
   expect(eventRenderCnt).toBe(0) // event still out of view
 
   resetCounts()
   $(window).simulate('resize')
   setTimeout(function() {
 
-    // allow some rerendering as a result of handleSizing, but that's it
-    expect(headerSpy.renderCount).toBeLessThanOrEqual(1)
-    expect(gridSpy.renderCount).toBeLessThanOrEqual(1)
-    expect(gridSpy.sizingCount).toBeLessThanOrEqual(2)
+    expectHeaderRendered(false)
+    expectGridRendered(true) // receives new coords
     expect(eventRenderCnt).toBe(0)
 
     headerSpy.detach()

packages/__tests__/src/performance/list-rerenders.js

@@ -23,41 +23,33 @@ it('list view rerenders well', function(done) {
     eventRenderCnt = 0
   }
 
-  function expectSomeViewRendering() {
-    expect(listSpy.renderCount).toBeLessThanOrEqual(2)
-    expect(listSpy.sizingCount).toBeLessThanOrEqual(2)
+  function expectViewRendered(bool) {
+    expect(listSpy.renderCount).toBe(bool ? 1 : 0)
   }
 
-  function expectNoViewRendering() {
-    expect(listSpy.renderCount).toBe(0)
-    expect(listSpy.sizingCount).toBe(0)
-  }
-
-  expectSomeViewRendering()
+  expectViewRendered(true)
   expect(eventRenderCnt).toBe(1)
 
   resetCounts()
   currentCalendar.next()
-  expectSomeViewRendering()
+  expectViewRendered(true)
   expect(eventRenderCnt).toBe(0) // event will be out of view
 
   resetCounts()
   currentCalendar.changeView('dayGridWeek') // switch away
-  expectNoViewRendering()
+  expectViewRendered(false)
   expect(eventRenderCnt).toBe(0)
 
   resetCounts()
-  currentCalendar.changeView('timeGridWeek') // return to view
-  expectSomeViewRendering()
+  currentCalendar.changeView('listWeek') // return to view
+  expectViewRendered(true)
   expect(eventRenderCnt).toBe(0) // event still out of view
 
   resetCounts()
   $(window).simulate('resize')
   setTimeout(function() {
 
-    // allow some rerendering as a result of handleSizing, but that's it
-    expect(listSpy.renderCount).toBeLessThanOrEqual(1)
-    expect(listSpy.sizingCount).toBeLessThanOrEqual(2)
+    expect(listSpy.renderCount).toBe(0)
     expect(eventRenderCnt).toBe(0)
 
     listSpy.detach()

packages/__tests__/src/performance/timegrid-rerenders.js

@@ -1,13 +1,12 @@
 import { DayHeader } from '@fullcalendar/core'
-import { Table } from '@fullcalendar/daygrid'
-import { TimeCols } from '@fullcalendar/timegrid'
+import { TimeColsSlatsBody, TimeColsContentBody } from '@fullcalendar/timegrid'
 import ComponentSpy from '../lib/ComponentSpy'
 
 
 it('timegrid view rerenders well', function(done) {
   let headerSpy = new ComponentSpy(DayHeader)
-  let dayGridSpy = new ComponentSpy(Table)
-  let timeGridSpy = new ComponentSpy(TimeCols)
+  let slatsSpy = new ComponentSpy(TimeColsSlatsBody)
+  let colContentSpy = new ComponentSpy(TimeColsContentBody)
   let eventRenderCnt = 0
 
   initCalendar({
@@ -24,60 +23,62 @@ it('timegrid view rerenders well', function(done) {
 
   function resetCounts() {
     headerSpy.resetCounts()
-    dayGridSpy.resetCounts()
-    timeGridSpy.resetCounts()
+    slatsSpy.resetCounts()
+    colContentSpy.resetCounts()
     eventRenderCnt = 0
   }
 
-  function expectSomeViewRendering() {
-    expect(headerSpy.renderCount).toBeLessThanOrEqual(2)
-    expect(dayGridSpy.renderCount).toBeLessThanOrEqual(2)
-    expect(dayGridSpy.sizingCount).toBeLessThanOrEqual(2)
-    expect(timeGridSpy.renderCount).toBeLessThanOrEqual(2)
-    expect(timeGridSpy.sizingCount).toBeLessThanOrEqual(2)
+  function expectHeaderRendered(bool) {
+    expect(headerSpy.renderCount).toBe(bool ? 1 : 0)
   }
 
-  function expectNoViewRendering() {
-    expect(headerSpy.renderCount).toBe(0)
-    expect(dayGridSpy.renderCount).toBe(0)
-    expect(dayGridSpy.sizingCount).toBe(0)
-    expect(timeGridSpy.renderCount).toBe(0)
-    expect(timeGridSpy.sizingCount).toBe(0)
+  function expectSlatsRendered(bool) {
+    expect(slatsSpy.renderCount).toBe(bool ? 1 : 0)
   }
 
-  expectSomeViewRendering()
+  function expectColContentRendered(bool) {
+    // 2nd rerender is when receives slat coords
+    expect(colContentSpy.renderCount).toBeLessThanOrEqual(bool ? 2 : 0)
+  }
+
+  expectHeaderRendered(true)
+  expectSlatsRendered(true)
+  expectColContentRendered(true)
   expect(eventRenderCnt).toBe(1)
 
   resetCounts()
   currentCalendar.next()
-  expectSomeViewRendering()
+  expectHeaderRendered(true)
+  expectSlatsRendered(true)
+  expectColContentRendered(true)
   expect(eventRenderCnt).toBe(0) // event will be out of view
 
   resetCounts()
   currentCalendar.changeView('listWeek') // switch away
-  expectNoViewRendering()
+  expectHeaderRendered(false)
+  expectSlatsRendered(false)
+  expectColContentRendered(false)
   expect(eventRenderCnt).toBe(0)
 
   resetCounts()
   currentCalendar.changeView('timeGridWeek') // return to view
-  expectSomeViewRendering()
+  expectHeaderRendered(true)
+  expectSlatsRendered(true)
+  expectColContentRendered(true)
   expect(eventRenderCnt).toBe(0) // event still out of view
 
   resetCounts()
   $(window).simulate('resize')
   setTimeout(function() {
 
-    // allow some rerendering as a result of handleSizing, but that's it
-    expect(headerSpy.renderCount).toBeLessThanOrEqual(1)
-    expect(dayGridSpy.renderCount).toBeLessThanOrEqual(1)
-    expect(dayGridSpy.sizingCount).toBeLessThanOrEqual(2)
-    expect(timeGridSpy.renderCount).toBeLessThanOrEqual(1)
-    expect(timeGridSpy.sizingCount).toBeLessThanOrEqual(2)
+    expectHeaderRendered(false)
+    expectSlatsRendered(false)
+    expectColContentRendered(true) // should have adjust based of new slat coords
     expect(eventRenderCnt).toBe(0)
 
     headerSpy.detach()
-    dayGridSpy.detach()
-    timeGridSpy.detach()
+    slatsSpy.detach()
+    colContentSpy.detach()
 
     done()
   }, 1) // more than windowResizeDelay

packages/core/src/Calendar.tsx

@@ -176,7 +176,6 @@ export default class Calendar {
       this.isRendering = true
       this.renderableEventStore = createEmptyEventStore()
       this.renderRunner.request()
-      flushToDom()
       window.addEventListener('resize', this.handleWindowResize)
     }
   }
@@ -357,6 +356,7 @@ export default class Calendar {
       </ComponentContextType.Provider>,
       this.el
     )
+    flushToDom()
 
     let calendarComponent = this.component
     let viewComponent = calendarComponent.view

packages/core/src/CalendarComponent.tsx

@@ -11,7 +11,7 @@ import { DateMarker } from './datelib/marker'
 import { CalendarState } from './reducers/types'
 import { ViewPropsTransformerClass } from './plugin-system'
 import { __assign } from 'tslib'
-import { h, Fragment, createRef, flushToDom } from './vdom'
+import { h, Fragment, createRef } from './vdom'
 import { BaseComponent, subrenderer } from './vdom-util'
 import { buildDelegationHandler } from './util/dom-event'
 import { capitaliseFirstLetter } from './util/misc'
@@ -31,6 +31,7 @@ interface CalendarComponentState {
   forPrint: boolean
 }
 
+
 export default class CalendarComponent extends BaseComponent<CalendarComponentProps, CalendarComponentState> {
 
   private buildViewContext = memoize(buildContext)
@@ -134,7 +135,6 @@ export default class CalendarComponent extends BaseComponent<CalendarComponentPr
 
   handleBeforePrint = () => {
     this.setState({ forPrint: true })
-    flushToDom()
   }
 
   handleAfterPrint = () => {

packages/core/src/scrollgrid/SimpleScrollGrid.tsx

@@ -146,8 +146,8 @@ export default class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProp
       let sizingId = guid()
       this.setState({
         sizingId,
-        shrinkWidth:
-          hasShrinkWidth(this.props.cols) ? // TODO: do this optimization for ScrollGrid
+        shrinkWidth: // will create each chunk's <colgroup>
+          hasShrinkWidth(this.props.cols) ?
             computeShrinkWidth(this.scrollerElRefs.getAll())
             : 0
       }, () => {
@@ -156,7 +156,7 @@ export default class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProp
             forceYScrollbars: computeForceScrollbars(this.scrollerRefs.getAll(), 'Y')
           }, () => {
             if (sizingId === this.state.sizingId) {
-              this.setState({
+              this.setState({ // will set each chunk's clientWidth
                 scrollerClientWidths: computeScrollerClientWidths(this.scrollerElRefs),
                 scrollerClientHeights: computeScrollerClientHeights(this.scrollerElRefs)
               })

packages/core/src/util/object.ts

@@ -100,7 +100,11 @@ export function hashValuesToArray(obj) { // can't use Object.values yet because
 }
 
 
-export function isPropsEqual(obj0, obj1) {
+export function isPropsEqual(obj0, obj1) { // TODO: merge with compareObjs
+
+  if (obj0 === obj1) {
+    return true
+  }
 
   for (let key in obj0) {
     if (hasOwnProperty.call(obj0, key)) {

packages/timegrid/src/TimeCols.tsx

@@ -61,7 +61,6 @@ export const TIME_COLS_NOW_INDICATOR_UNIT = 'minute'
 
 interface TimeColsState {
   slatCoords?: TimeColsSlatsCoords
-  colCoords?: PositionCache
 }
 
 
@@ -71,6 +70,7 @@ interface TimeColsState {
 export default class TimeCols extends BaseComponent<TimeColsProps, TimeColsState> {
 
   private processSlotOptions = memoize(processSlotOptions)
+  private colCoords: PositionCache
   private slotDuration: Duration
   private snapDuration: Duration
   private snapsPerSlot: number
@@ -163,7 +163,7 @@ export default class TimeCols extends BaseComponent<TimeColsProps, TimeColsState
 
 
   handlColCoords = (colCoords: PositionCache | null) => {
-    this.setState({ colCoords })
+    this.colCoords = colCoords
   }
 
 
@@ -184,8 +184,8 @@ export default class TimeCols extends BaseComponent<TimeColsProps, TimeColsState
 
   positionToHit(positionLeft, positionTop) {
     let { dateEnv } = this.context
-    let { colCoords, slatCoords } = this.state
-    let { snapsPerSlot, snapDuration } = this
+    let { slatCoords } = this.state
+    let { snapsPerSlot, snapDuration, colCoords } = this
 
     let colIndex = colCoords.leftToIndex(positionLeft)
     let slatIndex = slatCoords.positions.topToIndex(positionTop)

packages/timegrid/src/TimeColsBg.tsx

@@ -40,29 +40,26 @@ export default class TimeColsBg extends BaseComponent<TimeColsBgProps> {
 
 
   componentDidMount() {
-    this.handleSizing()
-    this.context.addResizeHandler(this.handleSizing)
+    this.updateCoords()
   }
 
 
   componentDidUpdate() {
-    this.handleSizing()
+    this.updateCoords()
   }
 
 
   componentWillUnmount() {
-    this.context.removeResizeHandler(this.handleSizing)
-
     if (this.props.onCoords) {
       this.props.onCoords(null)
     }
   }
 
 
-  handleSizing = () => {
+  updateCoords() {
     let { props } = this
 
-    if (props.onCoords && props.tableColGroupNode && props.clientWidth) {
+    if (props.onCoords && props.clientWidth) { // clientWidth means sizing has stabilized
       props.onCoords(
         new PositionCache(
           this.rootElRef.current,

packages/timegrid/src/TimeColsContent.tsx

@@ -65,11 +65,11 @@ export default class TimeColsContent extends BaseComponent<TimeColsContentProps>
 }
 
 
-interface TimeColsContentBodyProps extends TimeColsContentBaseProps {
+export interface TimeColsContentBodyProps extends TimeColsContentBaseProps {
   nowIndicatorTop: number
 }
 
-interface TimeColsContentBaseProps {
+export interface TimeColsContentBaseProps {
   colCnt: number
   businessHourSegs: TimeColsSeg[]
   bgEventSegs: TimeColsSeg[]
@@ -85,7 +85,7 @@ interface TimeColsContentBaseProps {
 }
 
 
-class TimeColsContentBody extends BaseComponent<TimeColsContentBodyProps> {
+export class TimeColsContentBody extends BaseComponent<TimeColsContentBodyProps> {
 
   private renderMirrorEvents = subrenderer(TimeColsMirrorEvents)
   private renderFgEvents = subrenderer(TimeColsEvents)

packages/timegrid/src/TimeColsSlats.tsx

@@ -80,26 +80,23 @@ export default class TimeColsSlats extends BaseComponent<TimeColsSlatsProps> {
 
 
   componentDidMount() {
-    this.handleSizing()
-    this.context.addResizeHandler(this.handleSizing)
+    this.updateCoords()
   }
 
 
   componentDidUpdate() {
-    this.handleSizing()
+    this.updateCoords()
   }
 
 
   componentWillUnmount() {
-    this.context.removeResizeHandler(this.handleSizing)
-
     if (this.props.onCoords) {
       this.props.onCoords(null)
     }
   }
 
 
-  handleSizing = () => {
+  updateCoords() {
     let { props } = this
 
     if (props.onCoords && props.clientWidth) { // clientWidth means sizing has stabilized
@@ -117,12 +114,12 @@ export default class TimeColsSlats extends BaseComponent<TimeColsSlatsProps> {
 }
 
 
-interface TimeColsSlatsBodyProps extends TimeColsSlatsContentProps {
+export interface TimeColsSlatsBodyProps extends TimeColsSlatsContentProps {
   slatElRefs: RefMap<HTMLTableRowElement>
 }
 
 
-class TimeColsSlatsBody extends BaseComponent<TimeColsSlatsBodyProps> {
+export class TimeColsSlatsBody extends BaseComponent<TimeColsSlatsBodyProps> {
 
   private getLabelInterval = memoize(getLabelInterval)
   private getLabelFormat = memoize(getLabelFormat)

packages/timegrid/src/main.ts

@@ -7,6 +7,8 @@ import './main.scss'
 
 export { DayTimeCols, DayTimeColsView, TimeColsView, buildTimeColsModel, buildDayRanges, DayTimeColsSlicer, TimeColsSeg }
 export { default as TimeCols, TIME_COLS_NOW_INDICATOR_UNIT } from './TimeCols'
+export { TimeColsSlatsBody } from './TimeColsSlats'
+export { TimeColsContentBody } from './TimeColsContent'
 export { default as TimeColsSlatsCoords } from './TimeColsSlatsCoords'
 
 export default createPlugin({