@egjs/react-flicking - npm Package Compare versions

Comparing version 4.10.1 to 4.10.2-beta.0

declaration/consts.d.ts

 import { FlickingProps } from "./types";
 export declare const DEFAULT_PROPS: FlickingProps;

declaration/Flicking.d.ts

@@ -16,3 +16,3 @@ import * as React from "react";
     private _renderEmitter;
-    private _prevProps;
+    private _prevChildren;
     get reactPanels(): (StrictPanel | NonStrictPanel | HTMLDivElement)[];
@@ -19,0 +19,0 @@ get renderEmitter(): Component<{

declaration/index.d.ts

@@ -0,0 +0,0 @@ import Flicking from "./Flicking";

declaration/index.umd.d.ts

 import Flicking from "./Flicking";
 export default Flicking;

declaration/NonStrictPanel.d.ts

@@ -0,0 +0,0 @@ import * as React from "react";

declaration/ReactElementProvider.d.ts

@@ -0,0 +0,0 @@ import { ElementProvider } from "@egjs/flicking";

declaration/ReactRenderer.d.ts

@@ -0,0 +0,0 @@ import { ExternalRenderer, PanelOptions, RendererOptions } from "@egjs/flicking";

declaration/StrictPanel.d.ts

@@ -0,0 +0,0 @@ import * as React from "react";

declaration/types.d.ts

@@ -8,2 +8,3 @@ /// <reference types="react" />
     cameraClass: string;
+    renderOnSameKey: boolean;
     plugins: Plugin[];
@@ -10,0 +11,0 @@ status?: Status;

declaration/ViewportSlot.d.ts

@@ -0,0 +0,0 @@ import React, { ReactNode } from "react";

dist/flicking.cjs.js

@@ -238,2 +238,3 @@ /*
   cameraClass: "",
+  renderOnSameKey: false,
   plugins: [],
@@ -493,4 +494,7 @@ useFindDOMNode: false,
     _this._renderEmitter = new Component();
-    _this._panels = _this._createPanelRefs(props, _this._getChildren());
-    _this._prevProps = _this.props;
+
+    var children = _this._getChildren();
+
+    _this._panels = _this._createPanelRefs(props, children);
+    _this._prevChildren = children;
     return _this;
@@ -537,3 +541,3 @@ }
     this._pluginsDiffer = new ListDiffer();
-    this._prevProps = this.props;
+    this._prevChildren = children;
 
@@ -559,6 +563,5 @@ this._bindEvents();
     if (!vanillaFlicking || !vanillaFlicking.initialized) return false;
-    if (!this._hasSameChildren(prevProps, nextProps)) return true;
 
-    nextProps.children;
-        var restProps = __rest(nextProps, ["children"]);
+    var children = nextProps.children,
+        restProps = __rest(nextProps, ["children"]);
 
@@ -571,2 +574,7 @@ for (var key in restProps) {
 
+    var prevChildren = this._prevChildren;
+
+    var nextChildren = this._getChildren(children);
+
+    if (nextProps.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) return true;
     return false;
@@ -577,12 +585,13 @@ };
     var vanillaFlicking = this._vanillaFlicking;
-    var nextProps = this.props;
-    var prevProps = this._prevProps; // Ignore updates before init, they will be updated after "ready" event's force update
+    var props = this.props;
+    var prevChildren = this._prevChildren; // Ignore updates before init, they will be updated after "ready" event's force update
 
     if (!vanillaFlicking || !vanillaFlicking.initialized) return;
 
-    if (!this._hasSameChildren(prevProps, nextProps)) {
-      var nextChildren = this._getChildren(nextProps.children);
+    var nextChildren = this._getChildren(props.children);
 
-      this._panels = this._createPanelRefs(nextProps, nextChildren);
+    if (props.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) {
+      this._panels = this._createPanelRefs(props, nextChildren);
       this._diffResult = this._jsxDiffer.update(nextChildren);
+      this._prevChildren = nextChildren;
     }
@@ -650,3 +659,2 @@ };
     var panels = !!props.virtual && ((_b = props.panelsPerView) !== null && _b !== void 0 ? _b : -1) > 0 ? this._getVirtualPanels() : this._getPanels();
-    this._prevProps = props;
     return React.createElement(Viewport, __assign({}, attributes, {
@@ -718,10 +726,7 @@ className: viewportClasses.join(" "),
 
-  __proto._hasSameChildren = function (prevProps, nextProps) {
-    var prevChildren = this._getChildren(prevProps.children);
-
-    var nextChildren = this._getChildren(nextProps.children);
-
-    if (prevChildren.length !== nextChildren.length) return false;
+  __proto._hasSameChildren = function (prevChildren, nextChildren) {
+    if (prevChildren.length !== nextChildren.length || prevChildren.length === 0) return false;
     var same = prevChildren.every(function (child, idx) {
       var nextChild = nextChildren[idx];
+      console.log(child, nextChild);
 
@@ -728,0 +733,0 @@ if (child.key && nextChild.key) {

dist/flicking.esm.js

@@ -238,2 +238,3 @@ /*
   cameraClass: "",
+  renderOnSameKey: false,
   plugins: [],
@@ -493,4 +494,7 @@ useFindDOMNode: false,
     _this._renderEmitter = new Component();
-    _this._panels = _this._createPanelRefs(props, _this._getChildren());
-    _this._prevProps = _this.props;
+
+    var children = _this._getChildren();
+
+    _this._panels = _this._createPanelRefs(props, children);
+    _this._prevChildren = children;
     return _this;
@@ -537,3 +541,3 @@ }
     this._pluginsDiffer = new ListDiffer();
-    this._prevProps = this.props;
+    this._prevChildren = children;
 
@@ -559,6 +563,5 @@ this._bindEvents();
     if (!vanillaFlicking || !vanillaFlicking.initialized) return false;
-    if (!this._hasSameChildren(prevProps, nextProps)) return true;
 
-    nextProps.children;
-        var restProps = __rest(nextProps, ["children"]);
+    var children = nextProps.children,
+        restProps = __rest(nextProps, ["children"]);
 
@@ -571,2 +574,7 @@ for (var key in restProps) {
 
+    var prevChildren = this._prevChildren;
+
+    var nextChildren = this._getChildren(children);
+
+    if (nextProps.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) return true;
     return false;
@@ -577,12 +585,13 @@ };
     var vanillaFlicking = this._vanillaFlicking;
-    var nextProps = this.props;
-    var prevProps = this._prevProps; // Ignore updates before init, they will be updated after "ready" event's force update
+    var props = this.props;
+    var prevChildren = this._prevChildren; // Ignore updates before init, they will be updated after "ready" event's force update
 
     if (!vanillaFlicking || !vanillaFlicking.initialized) return;
 
-    if (!this._hasSameChildren(prevProps, nextProps)) {
-      var nextChildren = this._getChildren(nextProps.children);
+    var nextChildren = this._getChildren(props.children);
 
-      this._panels = this._createPanelRefs(nextProps, nextChildren);
+    if (props.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) {
+      this._panels = this._createPanelRefs(props, nextChildren);
       this._diffResult = this._jsxDiffer.update(nextChildren);
+      this._prevChildren = nextChildren;
     }
@@ -650,3 +659,2 @@ };
     var panels = !!props.virtual && ((_b = props.panelsPerView) !== null && _b !== void 0 ? _b : -1) > 0 ? this._getVirtualPanels() : this._getPanels();
-    this._prevProps = props;
     return React.createElement(Viewport, __assign({}, attributes, {
@@ -718,10 +726,7 @@ className: viewportClasses.join(" "),
 
-  __proto._hasSameChildren = function (prevProps, nextProps) {
-    var prevChildren = this._getChildren(prevProps.children);
-
-    var nextChildren = this._getChildren(nextProps.children);
-
-    if (prevChildren.length !== nextChildren.length) return false;
+  __proto._hasSameChildren = function (prevChildren, nextChildren) {
+    if (prevChildren.length !== nextChildren.length || prevChildren.length === 0) return false;
     var same = prevChildren.every(function (child, idx) {
       var nextChild = nextChildren[idx];
+      console.log(child, nextChild);
 
@@ -728,0 +733,0 @@ if (child.key && nextChild.key) {

dist/flicking.umd.js

@@ -236,2 +236,3 @@ /*
       cameraClass: "",
+      renderOnSameKey: false,
       plugins: [],
@@ -491,4 +492,7 @@ useFindDOMNode: false,
         _this._renderEmitter = new Component();
-        _this._panels = _this._createPanelRefs(props, _this._getChildren());
-        _this._prevProps = _this.props;
+
+        var children = _this._getChildren();
+
+        _this._panels = _this._createPanelRefs(props, children);
+        _this._prevChildren = children;
         return _this;
@@ -535,3 +539,3 @@ }
         this._pluginsDiffer = new ListDiffer();
-        this._prevProps = this.props;
+        this._prevChildren = children;
 
@@ -557,6 +561,5 @@ this._bindEvents();
         if (!vanillaFlicking || !vanillaFlicking.initialized) return false;
-        if (!this._hasSameChildren(prevProps, nextProps)) return true;
 
-        nextProps.children;
-            var restProps = __rest(nextProps, ["children"]);
+        var children = nextProps.children,
+            restProps = __rest(nextProps, ["children"]);
 
@@ -569,2 +572,7 @@ for (var key in restProps) {
 
+        var prevChildren = this._prevChildren;
+
+        var nextChildren = this._getChildren(children);
+
+        if (nextProps.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) return true;
         return false;
@@ -575,12 +583,13 @@ };
         var vanillaFlicking = this._vanillaFlicking;
-        var nextProps = this.props;
-        var prevProps = this._prevProps; // Ignore updates before init, they will be updated after "ready" event's force update
+        var props = this.props;
+        var prevChildren = this._prevChildren; // Ignore updates before init, they will be updated after "ready" event's force update
 
         if (!vanillaFlicking || !vanillaFlicking.initialized) return;
 
-        if (!this._hasSameChildren(prevProps, nextProps)) {
-          var nextChildren = this._getChildren(nextProps.children);
+        var nextChildren = this._getChildren(props.children);
 
-          this._panels = this._createPanelRefs(nextProps, nextChildren);
+        if (props.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) {
+          this._panels = this._createPanelRefs(props, nextChildren);
           this._diffResult = this._jsxDiffer.update(nextChildren);
+          this._prevChildren = nextChildren;
         }
@@ -648,3 +657,2 @@ };
         var panels = !!props.virtual && ((_b = props.panelsPerView) !== null && _b !== void 0 ? _b : -1) > 0 ? this._getVirtualPanels() : this._getPanels();
-        this._prevProps = props;
         return React.createElement(Viewport, __assign({}, attributes, {
@@ -716,10 +724,7 @@ className: viewportClasses.join(" "),
 
-      __proto._hasSameChildren = function (prevProps, nextProps) {
-        var prevChildren = this._getChildren(prevProps.children);
-
-        var nextChildren = this._getChildren(nextProps.children);
-
-        if (prevChildren.length !== nextChildren.length) return false;
+      __proto._hasSameChildren = function (prevChildren, nextChildren) {
+        if (prevChildren.length !== nextChildren.length || prevChildren.length === 0) return false;
         var same = prevChildren.every(function (child, idx) {
           var nextChild = nextChildren[idx];
+          console.log(child, nextChild);
 
@@ -726,0 +731,0 @@ if (child.key && nextChild.key) {

package.json

 {
   "name": "@egjs/react-flicking",
-  "version": "4.10.1",
+  "version": "4.10.2-beta.0",
   "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
@@ -32,3 +32,3 @@ "main": "dist/flicking.cjs.js",
     "@types/react": "^18.0.5",
-    "@types/react-dom": "16.8.4",
+    "@types/react-dom": "18.0.0",
     "@types/react-is": "^17.0.0",
@@ -35,0 +35,0 @@ "cpx": "^1.5.0",

README.md

@@ -45,10 +45,11 @@ <h1 align=center>
 <Flicking
-  viewportTag = "div"
-  cameraTag = "div"
-  cameraClass = ""
-  align = "center"
-  onMove = {(e: MoveEvent) => {}}
-  onWillChange = {(e: WillChangeEvent) => {}}
-  horizontal = {true}
-  circular = {true}
+  viewportTag="div"
+  cameraTag="div"
+  cameraClass=""
+  renderOnSameKey={false}
+  align="center"
+  onMove={(e: MoveEvent) => {}}
+  onWillChange={(e: WillChangeEvent) => {}}
+  horizontal={true}
+  circular={true}
 >
@@ -61,2 +62,10 @@ <div>panel 0</div>
 
+## ✨ React exclusive options
+- viewportTag: HTML tag for `.flicking-viewport` element. (default: **"div"**)
+- cameraTag: HTML tag for `.flicking-camera` element. (default: **"div"**)
+- cameraClass: `className` for `.flicking-camera` element. (default: **""**)
+- renderOnSameKey: Whether to always render children even they have the same keys (default: **false**)
+  - Flicking doesn't rerender when children have same length & keys for performance by default.
+  - If you have to bypass this behavior, like when you have to update panel's innerHTML without changing the list of child elements, you can either set this option to `true`, or you can call Flicking component's `forceUpdate()`.
+
 ## 📦 Packages
@@ -63,0 +72,0 @@ You can use all plugins just like native @egjs/flicking.

src/react-flicking/consts.ts

@@ -31,2 +31,3 @@ /*
   cameraClass: "",
+  renderOnSameKey: false,
   plugins: [],
@@ -33,0 +34,0 @@ useFindDOMNode: false,

src/react-flicking/ReactRenderer.ts

@@ -5,2 +5,3 @@ /*
  */
+import { flushSync } from "react-dom";
 import { ExternalRenderer, PanelOptions, RendererOptions, getFlickingAttached } from "@egjs/flicking";
@@ -42,3 +43,3 @@
       });
-      reactFlicking.forceUpdate();
+        reactFlicking.forceUpdate();
     });
@@ -58,3 +59,3 @@ }
       });
-      reactFlicking.forceUpdate();
+        reactFlicking.forceUpdate();
     });
@@ -61,0 +62,0 @@ }

src/react-flicking/types.ts

@@ -32,2 +32,3 @@ /*
   cameraClass: string;
+  renderOnSameKey: boolean;
   plugins: Plugin[];
@@ -34,0 +35,0 @@ status?: Status;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

111

increased by8.82%

Worsened metrics

Total package byte prevSize

211863

decreased by-0.22%

Number of package files

30

decreased by-11.76%

Lines of code

2767

decreased by-2.12%

Number of low quality alerts

1

increased byInfinity%

No dependency changes