@cloudcannon/react-connector - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

index.js

 const React = require('react');
 
+function identity(props) {
+	return props;
+}
+
 module.exports = {
-	CloudCannonConnect: function (Component) {
+	CloudCannonConnect: function (Component, options = {}) {
+		const processProps = options?.processProps || identity;
 		return class LivePageComponent extends React.Component{
@@ -9,16 +14,36 @@ constructor(props) {
 				this.state = {}
+				this.onLoadEventListener = (e) => {
+					this.onCloudCannonLoad(e.detail.CloudCannon);
+				};
+
+				this.onUpdateEventListener = (e) => {
+					this.loadNewPropsFromCloudCannon(e.detail.CloudCannon);
+				};
 			}
 			
 			componentDidMount() {
-				window.CloudCannon = {
-					trigger: (eventName, frontMatter) => {
-						this.setState(frontMatter);
-					}
-				};
+				document.addEventListener('cloudcannon:load', this.onLoadEventListener);
+				document.addEventListener('cloudcannon:update', this.onUpdateEventListener);
+				if (window.CloudCannon) {
+					onCloudCannonLoad(window.CloudCannon);
+				}
 			}
+
+			async loadNewPropsFromCloudCannon(CloudCannon) {
+				try {
+					const latestValue = await CloudCannon.value();
+					this.setState(latestValue);
+				} catch(fetchError) {
+					consolw.warn('Failed to fetch latest page props', fetchError);
+				}
+			}
+
+			onCloudCannonLoad(CloudCannon) {
+				CloudCannon.enableEvents();
+				this.loadNewPropsFromCloudCannon(CloudCannon);
+			}
 			
 			componentWillUnmount() {
-				if (window.CloudCannon) {
-					window.CloudCannon.trigger = null;
-				}
+				document.removeEventListener('cloudcannon:load', this.onLoadEventListener);
+				document.removeEventListener('cloudcannon:update', this.onUpdateEventListener);
 			}
@@ -30,3 +55,3 @@
 					page: {
-						...this.props.page, 
+						...processProps(this.props.page),
 						...this.state,
@@ -33,0 +58,0 @@ }

package.json

 {
 	"name": "@cloudcannon/react-connector",
-	"version": "1.0.4",
+	"version": "1.0.5",
 	"description": "A React connector for activating live visual editing in CloudCannon",
 	"main": "index.js",
 	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1"
+		"test": "echo \"Error: no test specified\" && exit 0"
 	},
+	"files": [
+		"index.js"
+	],
 	"repository": {
@@ -10,0 +13,0 @@ "type": "git",

README.md

@@ -38,2 +38,21 @@ # CloudCannon React Connector
 
-In CloudCannon will now push through new page props from your editors updates. 
+In CloudCannon will now push through new page props from your editors updates. 
+
+### Modifying the props
+
+If your props are modified in the `getStaticProps` function you can mirror those same operations. Below is an example of 
+the `processProps` function which is passed the props before it is injected into the new props. This defaults to an identity
+function which passes the props directly through.
+
+```
+import { CloudCannonConnect } from '@cloudcannon/react-connector'
+
+export default function App({ Component, pageProps }) {
+	const AppComponent = CloudCannonConnect(Component, {
+		processProps: (props) => {
+			return props;
+		}
+	});
+	return <AppComponent {...pageProps}/>
+}
+```

New alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4090

increased by61.53%

Lines of code

53

increased by65.63%

Number of lines in readme file

57

increased by50%

No dependency changes