@plasmicpkgs/react-scroll-parallax - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/ParallaxProvider.d.ts

 import registerComponent, { ComponentMeta } from "@plasmicapp/host/registerComponent";
-import { ParallaxProviderProps } from "react-scroll-parallax";
+import React from "react";
+import { ParallaxProviderProps } from "react-scroll-parallax/dist/components/ParallaxProvider/types";
+export declare function ParallaxProviderWrapper({ children, ...props }: React.PropsWithChildren<ParallaxProviderProps>): JSX.Element;
 export declare const parallaxProviderMeta: ComponentMeta<ParallaxProviderProps>;
@@ -4,0 +6,0 @@ export declare function registerParallaxProvider(loader?: {

dist/ParallaxWrapper.d.ts

 import registerComponent, { ComponentMeta } from "@plasmicapp/host/registerComponent";
 import React from "react";
 export interface ParallaxWrapperProps {
-    xStart?: string;
-    xEnd?: string;
-    yStart?: string;
-    yEnd?: string;
+    speed?: number;
     disabled?: boolean;
@@ -13,5 +10,6 @@ previewInEditor?: boolean;
 }
-export default function ParallaxWrapper({ xStart, xEnd, yStart, yEnd, disabled, previewInEditor, children, className, }: ParallaxWrapperProps): JSX.Element;
+export default function ParallaxWrapper({ speed, disabled, previewInEditor, children, className, }: ParallaxWrapperProps): JSX.Element;
+export declare const parallaxWrapperMeta: ComponentMeta<ParallaxWrapperProps>;
 export declare function registerParallaxWrapper(loader?: {
     registerComponent: typeof registerComponent;
 }, customParallaxWrapperMeta?: ComponentMeta<ParallaxWrapperProps>): void;

dist/react-scroll-parallax.cjs.development.js

@@ -12,12 +12,6 @@ 'use strict';
 var reactScrollParallax = require('react-scroll-parallax');
+var ResizeObserver = _interopDefault(require('resize-observer-polyfill'));
 
 function ParallaxWrapper(_ref) {
-  var _ref$xStart = _ref.xStart,
-      xStart = _ref$xStart === void 0 ? "0" : _ref$xStart,
-      _ref$xEnd = _ref.xEnd,
-      xEnd = _ref$xEnd === void 0 ? "0" : _ref$xEnd,
-      _ref$yStart = _ref.yStart,
-      yStart = _ref$yStart === void 0 ? "0" : _ref$yStart,
-      _ref$yEnd = _ref.yEnd,
-      yEnd = _ref$yEnd === void 0 ? "0" : _ref$yEnd,
+  var speed = _ref.speed,
       disabled = _ref.disabled,
@@ -36,4 +30,3 @@ previewInEditor = _ref.previewInEditor,
     disabled: disabled || inEditor && !previewInEditor,
-    x: [xStart, xEnd],
-    y: [yStart, yEnd],
+    speed: speed,
     className: className
@@ -45,2 +38,3 @@ }, children);
   displayName: "Scroll Parallax",
+  importName: "ParallaxWrapper",
   importPath: "@plasmicpkgs/react-scroll-parallax",
@@ -58,22 +52,7 @@ props: {
     },
-    yStart: {
-      type: "string",
-      defaultValue: "-50%",
-      description: "The vertical offset at the start (when just scrolling into view). Can be % or px."
+    speed: {
+      type: "number",
+      description: "How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.",
+      defaultValue: 20
     },
-    yEnd: {
-      type: "string",
-      defaultValue: "50%",
-      description: "The vertical offset at the end (when just scrolling out of view). Can be % or px."
-    },
-    xStart: {
-      type: "string",
-      defaultValue: "50%",
-      description: "The horizontal offset at the start (when just scrolling into view). Can be % or px."
-    },
-    xEnd: {
-      type: "string",
-      defaultValue: "-50%",
-      description: "The horizontal offset at the end (when just scrolling out of view). Can be % or px."
-    },
     disabled: {
@@ -100,7 +79,69 @@ type: "boolean",
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+/**
+ * This is required to ensure the parallax scrolling works correctly, since if
+ * (for instance) images load after the parallax wrapper has calculated the
+ * dimensions of the space, it will result in incorrect parallax scrolling
+ * amounts.
+ *
+ * This is not great since we need to mutation-observe the whole section of the
+ * document (which may be large), but we can probably optimize this in the
+ * future.
+ */
+
+function ParallaxCacheUpdate(_ref) {
+  var children = _ref.children;
+  var parallaxController = reactScrollParallax.useController();
+  var ref = React.useRef(null);
+  React.useEffect(function () {
+    var _ref$current;
+
+    if ((_ref$current = ref.current) != null && _ref$current.parentElement) {
+      var targetNode = ref.current.parentElement;
+      var observer = new ResizeObserver(function () {
+        if (parallaxController) {
+          parallaxController.update();
+        }
+      });
+      observer.observe(targetNode);
+      return function () {
+        observer.disconnect();
+      };
+    }
+
+    return function () {};
+  }, [ref.current]);
+  return React__default.createElement("div", {
+    style: {
+      display: "contents"
+    },
+    ref: ref
+  }, children);
+}
+
+function ParallaxProviderWrapper(_ref2) {
+  var children = _ref2.children,
+      props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
+
+  return React__default.createElement(reactScrollParallax.ParallaxProvider, Object.assign({}, props), React__default.createElement(ParallaxCacheUpdate, null, children));
+}
 var parallaxProviderMeta = {
   name: "hostless-parallax-provider",
   displayName: "Parallax Provider",
-  importName: "ParallaxProvider",
-  importPath: "react-scroll-parallax",
+  importName: "ParallaxProviderWrapper",
+  importPath: "@plasmicpkgs/react-scroll-parallax",
   props: {
@@ -118,12 +159,14 @@ children: "slot",
   if (loader) {
-    loader.registerComponent(reactScrollParallax.ParallaxProvider, customParallaxProviderMeta != null ? customParallaxProviderMeta : parallaxProviderMeta);
+    loader.registerComponent(ParallaxProviderWrapper, customParallaxProviderMeta != null ? customParallaxProviderMeta : parallaxProviderMeta);
   } else {
-    registerComponent(reactScrollParallax.ParallaxProvider, customParallaxProviderMeta != null ? customParallaxProviderMeta : parallaxProviderMeta);
+    registerComponent(ParallaxProviderWrapper, customParallaxProviderMeta != null ? customParallaxProviderMeta : parallaxProviderMeta);
   }
 }
 
+exports.ParallaxProviderWrapper = ParallaxProviderWrapper;
 exports.ParallaxWrapper = ParallaxWrapper;
 exports.parallaxProviderMeta = parallaxProviderMeta;
+exports.parallaxWrapperMeta = parallaxWrapperMeta;
 exports.registerParallaxProvider = registerParallaxProvider;
 exports.registerParallaxWrapper = registerParallaxWrapper;
 //# sourceMappingURL=react-scroll-parallax.cjs.development.js.map

dist/react-scroll-parallax.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var a=require("@plasmicapp/host"),t=e(require("@plasmicapp/host/registerComponent")),r=require("react"),l=e(r),o=require("react-scroll-parallax");function i(e){var t=e.xStart,i=void 0===t?"0":t,s=e.xEnd,n=void 0===s?"0":s,p=e.yStart,c=void 0===p?"0":p,d=e.yEnd,x=void 0===d?"0":d,u=e.disabled,h=e.previewInEditor,f=e.children,v=e.className,m=r.useContext(a.PlasmicCanvasContext);if(null==r.useContext(o.ParallaxContext))throw new Error("Scroll Parallax can only be instantiated somewhere inside the Parallax Provider");return l.createElement(o.Parallax,{disabled:u||m&&!h,x:[i,n],y:[c,x],className:v},f)}var s={name:"hostless-scroll-parallax",displayName:"Scroll Parallax",importPath:"@plasmicpkgs/react-scroll-parallax",props:{children:{type:"slot",defaultValue:{type:"img",src:"https://placekitten.com/300/200",style:{maxWidth:"100%"}}},yStart:{type:"string",defaultValue:"-50%",description:"The vertical offset at the start (when just scrolling into view). Can be % or px."},yEnd:{type:"string",defaultValue:"50%",description:"The vertical offset at the end (when just scrolling out of view). Can be % or px."},xStart:{type:"string",defaultValue:"50%",description:"The horizontal offset at the start (when just scrolling into view). Can be % or px."},xEnd:{type:"string",defaultValue:"-50%",description:"The horizontal offset at the end (when just scrolling out of view). Can be % or px."},disabled:{type:"boolean",description:"Disables the parallax effect."},previewInEditor:{type:"boolean",description:"Enable the parallax effect in the editor."}},defaultStyles:{maxWidth:"100%"}},n={name:"hostless-parallax-provider",displayName:"Parallax Provider",importName:"ParallaxProvider",importPath:"react-scroll-parallax",props:{children:"slot",scrollAxis:{type:"choice",description:"Scroll axis for setting horizontal/vertical scrolling",options:["vertical","horizontal"],displayName:"Scroll Axis"}}};exports.ParallaxWrapper=i,exports.parallaxProviderMeta=n,exports.registerParallaxProvider=function(e,a){e?e.registerComponent(o.ParallaxProvider,null!=a?a:n):t(o.ParallaxProvider,null!=a?a:n)},exports.registerParallaxWrapper=function(e,a){e?e.registerComponent(i,null!=a?a:s):t(i,null!=a?a:s)};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("@plasmicapp/host"),a=e(require("@plasmicapp/host/registerComponent")),l=require("react"),t=e(l),n=require("react-scroll-parallax"),o=e(require("resize-observer-polyfill"));function i(e){var a=e.speed,o=e.disabled,i=e.previewInEditor,s=e.children,p=e.className,c=l.useContext(r.PlasmicCanvasContext);if(null==l.useContext(n.ParallaxContext))throw new Error("Scroll Parallax can only be instantiated somewhere inside the Parallax Provider");return t.createElement(n.Parallax,{disabled:o||c&&!i,speed:a,className:p},s)}var s={name:"hostless-scroll-parallax",displayName:"Scroll Parallax",importName:"ParallaxWrapper",importPath:"@plasmicpkgs/react-scroll-parallax",props:{children:{type:"slot",defaultValue:{type:"img",src:"https://placekitten.com/300/200",style:{maxWidth:"100%"}}},speed:{type:"number",description:"How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.",defaultValue:20},disabled:{type:"boolean",description:"Disables the parallax effect."},previewInEditor:{type:"boolean",description:"Enable the parallax effect in the editor."}},defaultStyles:{maxWidth:"100%"}};function p(e){var r=e.children,a=n.useController(),i=l.useRef(null);return l.useEffect((function(){var e;if(null!=(e=i.current)&&e.parentElement){var r=i.current.parentElement,l=new o((function(){a&&a.update()}));return l.observe(r),function(){l.disconnect()}}return function(){}}),[i.current]),t.createElement("div",{style:{display:"contents"},ref:i},r)}function c(e){var r=e.children,a=function(e,r){if(null==e)return{};var a,l,t={},n=Object.keys(e);for(l=0;l<n.length;l++)r.indexOf(a=n[l])>=0||(t[a]=e[a]);return t}(e,["children"]);return t.createElement(n.ParallaxProvider,Object.assign({},a),t.createElement(p,null,r))}var u={name:"hostless-parallax-provider",displayName:"Parallax Provider",importName:"ParallaxProviderWrapper",importPath:"@plasmicpkgs/react-scroll-parallax",props:{children:"slot",scrollAxis:{type:"choice",description:"Scroll axis for setting horizontal/vertical scrolling",options:["vertical","horizontal"],displayName:"Scroll Axis"}}};exports.ParallaxProviderWrapper=c,exports.ParallaxWrapper=i,exports.parallaxProviderMeta=u,exports.parallaxWrapperMeta=s,exports.registerParallaxProvider=function(e,r){e?e.registerComponent(c,null!=r?r:u):a(c,null!=r?r:u)},exports.registerParallaxWrapper=function(e,r){e?e.registerComponent(i,null!=r?r:s):a(i,null!=r?r:s)};
 //# sourceMappingURL=react-scroll-parallax.cjs.production.min.js.map

dist/react-scroll-parallax.esm.js

 import { PlasmicCanvasContext } from '@plasmicapp/host';
 import registerComponent from '@plasmicapp/host/registerComponent';
-import React, { useContext } from 'react';
-import { ParallaxContext, Parallax, ParallaxProvider } from 'react-scroll-parallax';
+import React, { useContext, useRef, useEffect } from 'react';
+import { ParallaxContext, Parallax, ParallaxProvider, useController } from 'react-scroll-parallax';
+import ResizeObserver from 'resize-observer-polyfill';
 
 function ParallaxWrapper(_ref) {
-  var _ref$xStart = _ref.xStart,
-      xStart = _ref$xStart === void 0 ? "0" : _ref$xStart,
-      _ref$xEnd = _ref.xEnd,
-      xEnd = _ref$xEnd === void 0 ? "0" : _ref$xEnd,
-      _ref$yStart = _ref.yStart,
-      yStart = _ref$yStart === void 0 ? "0" : _ref$yStart,
-      _ref$yEnd = _ref.yEnd,
-      yEnd = _ref$yEnd === void 0 ? "0" : _ref$yEnd,
+  var speed = _ref.speed,
       disabled = _ref.disabled,
@@ -28,4 +22,3 @@ previewInEditor = _ref.previewInEditor,
     disabled: disabled || inEditor && !previewInEditor,
-    x: [xStart, xEnd],
-    y: [yStart, yEnd],
+    speed: speed,
     className: className
@@ -37,2 +30,3 @@ }, children);
   displayName: "Scroll Parallax",
+  importName: "ParallaxWrapper",
   importPath: "@plasmicpkgs/react-scroll-parallax",
@@ -50,22 +44,7 @@ props: {
     },
-    yStart: {
-      type: "string",
-      defaultValue: "-50%",
-      description: "The vertical offset at the start (when just scrolling into view). Can be % or px."
+    speed: {
+      type: "number",
+      description: "How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.",
+      defaultValue: 20
     },
-    yEnd: {
-      type: "string",
-      defaultValue: "50%",
-      description: "The vertical offset at the end (when just scrolling out of view). Can be % or px."
-    },
-    xStart: {
-      type: "string",
-      defaultValue: "50%",
-      description: "The horizontal offset at the start (when just scrolling into view). Can be % or px."
-    },
-    xEnd: {
-      type: "string",
-      defaultValue: "-50%",
-      description: "The horizontal offset at the end (when just scrolling out of view). Can be % or px."
-    },
     disabled: {
@@ -92,7 +71,69 @@ type: "boolean",
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+/**
+ * This is required to ensure the parallax scrolling works correctly, since if
+ * (for instance) images load after the parallax wrapper has calculated the
+ * dimensions of the space, it will result in incorrect parallax scrolling
+ * amounts.
+ *
+ * This is not great since we need to mutation-observe the whole section of the
+ * document (which may be large), but we can probably optimize this in the
+ * future.
+ */
+
+function ParallaxCacheUpdate(_ref) {
+  var children = _ref.children;
+  var parallaxController = useController();
+  var ref = useRef(null);
+  useEffect(function () {
+    var _ref$current;
+
+    if ((_ref$current = ref.current) != null && _ref$current.parentElement) {
+      var targetNode = ref.current.parentElement;
+      var observer = new ResizeObserver(function () {
+        if (parallaxController) {
+          parallaxController.update();
+        }
+      });
+      observer.observe(targetNode);
+      return function () {
+        observer.disconnect();
+      };
+    }
+
+    return function () {};
+  }, [ref.current]);
+  return React.createElement("div", {
+    style: {
+      display: "contents"
+    },
+    ref: ref
+  }, children);
+}
+
+function ParallaxProviderWrapper(_ref2) {
+  var children = _ref2.children,
+      props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
+
+  return React.createElement(ParallaxProvider, Object.assign({}, props), React.createElement(ParallaxCacheUpdate, null, children));
+}
 var parallaxProviderMeta = {
   name: "hostless-parallax-provider",
   displayName: "Parallax Provider",
-  importName: "ParallaxProvider",
-  importPath: "react-scroll-parallax",
+  importName: "ParallaxProviderWrapper",
+  importPath: "@plasmicpkgs/react-scroll-parallax",
   props: {
@@ -110,9 +151,9 @@ children: "slot",
   if (loader) {
-    loader.registerComponent(ParallaxProvider, customParallaxProviderMeta != null ? customParallaxProviderMeta : parallaxProviderMeta);
+    loader.registerComponent(ParallaxProviderWrapper, customParallaxProviderMeta != null ? customParallaxProviderMeta : parallaxProviderMeta);
   } else {
-    registerComponent(ParallaxProvider, customParallaxProviderMeta != null ? customParallaxProviderMeta : parallaxProviderMeta);
+    registerComponent(ParallaxProviderWrapper, customParallaxProviderMeta != null ? customParallaxProviderMeta : parallaxProviderMeta);
   }
 }
 
-export { ParallaxWrapper, parallaxProviderMeta, registerParallaxProvider, registerParallaxWrapper };
+export { ParallaxProviderWrapper, ParallaxWrapper, parallaxProviderMeta, parallaxWrapperMeta, registerParallaxProvider, registerParallaxWrapper };
 //# sourceMappingURL=react-scroll-parallax.esm.js.map

package.json

 {
   "name": "@plasmicpkgs/react-scroll-parallax",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Plasmic registration call for the HTML5 video element",
@@ -40,3 +40,4 @@ "main": "dist/index.js",
     "@plasmicapp/host": "^0.0.47",
-    "react-scroll-parallax": "^2.4.0"
+    "react-scroll-parallax": "3.0.0-alpha.14",
+    "resize-observer-polyfill": "^1.5.1"
   },
@@ -43,0 +44,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

41052

increased by21.1%

Lines of code

333

increased by26.14%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedresize-observer-polyfill@^1.5.1

• + Addedbezier-easing@2.1.0(transitive)

• + Addedparallax-controller@0.1.36(transitive)

• + Addedreact-scroll-parallax@3.0.0-alpha.14(transitive)

• + Addedresize-observer-polyfill@1.5.1(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedreact-scroll-parallax@2.4.3(transitive)

• Updatedreact-scroll-parallax@3.0.0-alpha.14