@fullcalendar/react - npm Package Compare versions

Comparing version 6.1.6 to 6.1.7

dist/index.d.ts

@@ -8,19 +8,19 @@ import { Component } from 'react';
 export default class FullCalendar extends Component<CalendarOptions, CalendarState> {
-    static act: (f: () => void) => void;
+    static act: typeof runNow;
     private elRef;
     private calendar;
-    private customRenderingRequestId;
     private handleCustomRendering;
-    private needsCustomRenderingResize;
-    private isInitialRender;
+    private resizeId;
+    private isUnmounting;
     state: CalendarState;
     render(): JSX.Element;
     componentDidMount(): void;
-    requestCustomRendering(customRenderingMap: any): void;
-    doCustomRendering(customRenderingMap: any): void;
-    cancelCustomRendering(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
+    requestResize: () => void;
+    doResize(): void;
+    cancelResize(): void;
     getApi(): CalendarApi;
 }
+declare function runNow(f: () => void): void;
 export {};

dist/index.js

 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { Component, createRef } from 'react';
-import { createPortal } from 'react-dom';
+import React, { Component, createRef, PureComponent } from 'react';
+import { createPortal, flushSync } from 'react-dom';
 import { Calendar, } from '@fullcalendar/core';
@@ -10,18 +10,21 @@ import { CustomRenderingStore, } from '@fullcalendar/core/internal';
         this.elRef = createRef();
-        this.needsCustomRenderingResize = false;
-        this.isInitialRender = true;
+        this.isUnmounting = false;
         this.state = {
             customRenderingMap: new Map()
         };
+        this.requestResize = () => {
+            if (!this.isUnmounting) {
+                this.cancelResize();
+                this.resizeId = requestAnimationFrame(() => {
+                    this.doResize();
+                });
+            }
+        };
     }
     render() {
-        const portalNodes = [];
+        const customRenderingNodes = [];
         for (const customRendering of this.state.customRenderingMap.values()) {
-            const { generatorMeta } = customRendering;
-            const vnode = typeof generatorMeta === 'function' ?
-                generatorMeta(customRendering.renderProps) :
-                generatorMeta;
-            portalNodes.push(createPortal(vnode, customRendering.containerEl, customRendering.id));
+            customRenderingNodes.push(React.createElement(CustomRenderingComponent, { key: customRendering.id, customRendering: customRendering }));
         }
-        return (React.createElement("div", { ref: this.elRef }, portalNodes));
+        return (React.createElement("div", { ref: this.elRef }, customRenderingNodes));
     }
@@ -33,41 +36,41 @@ componentDidMount() {
         this.calendar.render();
+        let lastRequestTimestamp;
         customRenderingStore.subscribe((customRenderingMap) => {
-            if (this.isInitialRender) {
-                this.doCustomRendering(customRenderingMap);
-            }
-            else {
-                this.requestCustomRendering(customRenderingMap);
-            }
-        });
-    }
-    requestCustomRendering(customRenderingMap) {
-        this.cancelCustomRendering();
-        this.customRenderingRequestId = requestAnimationFrame(() => {
-            FullCalendar.act(() => {
-                this.doCustomRendering(customRenderingMap);
+            const requestTimestamp = Date.now();
+            const isMounting = !lastRequestTimestamp;
+            const runFunc = (this.isUnmounting ||
+                isMounting ||
+                (requestTimestamp - lastRequestTimestamp) < 100 // rerendering frequently
+            ) ? runNow // either sync rendering (first-time or React 17) or async (React 18)
+                : flushSync; // guaranteed sync rendering
+            runFunc(() => {
+                this.setState({ customRenderingMap }, () => {
+                    lastRequestTimestamp = requestTimestamp;
+                    if (isMounting) {
+                        this.doResize();
+                    }
+                    else {
+                        this.requestResize();
+                    }
+                });
             });
         });
     }
-    doCustomRendering(customRenderingMap) {
-        this.needsCustomRenderingResize = true;
-        this.setState({ customRenderingMap });
-    }
-    cancelCustomRendering() {
-        if (this.customRenderingRequestId) {
-            cancelAnimationFrame(this.customRenderingRequestId);
-            this.customRenderingRequestId = undefined;
-        }
-    }
     componentDidUpdate() {
-        this.isInitialRender = false;
         this.calendar.resetOptions(Object.assign(Object.assign({}, this.props), { handleCustomRendering: this.handleCustomRendering }));
-        if (this.needsCustomRenderingResize) {
-            this.needsCustomRenderingResize = false;
-            this.calendar.updateSize();
-        }
     }
     componentWillUnmount() {
+        this.isUnmounting = true;
+        this.cancelResize();
         this.calendar.destroy();
-        this.cancelCustomRendering();
     }
+    doResize() {
+        this.calendar.updateSize();
+    }
+    cancelResize() {
+        if (this.resizeId !== undefined) {
+            cancelAnimationFrame(this.resizeId);
+            this.resizeId = undefined;
+        }
+    }
     getApi() {
@@ -77,3 +80,18 @@ return this.calendar;
 }
-FullCalendar.act = (f) => { f(); };
+FullCalendar.act = runNow; // DEPRECATED. Not leveraged anymore
+class CustomRenderingComponent extends PureComponent {
+    render() {
+        const { customRendering } = this.props;
+        const { generatorMeta } = customRendering;
+        const vnode = typeof generatorMeta === 'function' ?
+            generatorMeta(customRendering.renderProps) :
+            generatorMeta;
+        return createPortal(vnode, customRendering.containerEl);
+    }
+}
+// Util
+// -------------------------------------------------------------------------------------------------
+function runNow(f) {
+    f();
+}
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@fullcalendar/react",
-  "version": "6.1.6",
+  "version": "6.1.7",
   "title": "FullCalendar React Component",
@@ -20,3 +20,3 @@ "description": "The official React Component for FullCalendar",
   "peerDependencies": {
-    "@fullcalendar/core": "~6.1.6",
+    "@fullcalendar/core": "~6.1.7",
     "react": "^16.7.0 || ^17 || ^18",
@@ -29,7 +29,7 @@ "react-dom": "^16.7.0 || ^17 || ^18"
     "@babel/preset-react": "^7.9.4",
-    "@fullcalendar/core": "~6.1.6",
-    "@fullcalendar/daygrid": "~6.1.6",
-    "@fullcalendar/list": "~6.1.6",
-    "@fullcalendar/resource": "~6.1.6",
-    "@fullcalendar/resource-timeline": "~6.1.6",
+    "@fullcalendar/core": "~6.1.7",
+    "@fullcalendar/daygrid": "~6.1.7",
+    "@fullcalendar/list": "~6.1.7",
+    "@fullcalendar/resource": "~6.1.7",
+    "@fullcalendar/resource-timeline": "~6.1.7",
     "@rollup/plugin-babel": "^5.0.0",
@@ -36,0 +36,0 @@ "@rollup/plugin-commonjs": "^12.0.0",

No alert changes

Improved metrics

Total package byte prevSize

20672

increased by13.74%

Lines of code

339

increased by21.07%

No dependency changes