@livepreso/content-react 0.3.3 → 0.3.5

package/CHANGELOG.json

@@ -1,6 +1,35 @@
 {
   "name": "@livepreso/content-react",
   "entries": [
+    {
+      "version": "0.3.5",
+      "tag": "@livepreso/content-react_v0.3.5",
+      "date": "Sun, 03 Mar 2024 23:59:09 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Hot reload improvements"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@livepreso/content-base\" from `~1.1.2` to `~1.1.3`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.3.4",
+      "tag": "@livepreso/content-react_v0.3.4",
+      "date": "Sun, 14 Jan 2024 21:06:16 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Remove observer in use-modes due to render loops"
+          }
+        ]
+      }
+    },
     {
       "version": "0.3.3",
       "tag": "@livepreso/content-react_v0.3.3",

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Change Log - @livepreso/content-react
 
-This log was last generated on Thu, 21 Dec 2023 00:50:30 GMT and should not be manually modified.
+This log was last generated on Sun, 03 Mar 2024 23:59:09 GMT and should not be manually modified.
+
+## 0.3.5
+Sun, 03 Mar 2024 23:59:09 GMT
+
+### Patches
+
+- Hot reload improvements
+
+## 0.3.4
+Sun, 14 Jan 2024 21:06:16 GMT
+
+### Patches
+
+- Remove observer in use-modes due to render loops
 
 ## 0.3.3
 Thu, 21 Dec 2023 00:50:30 GMT

package/index.js

@@ -1,9 +1,9 @@
 import React, { useEffect } from "react";
 
 import { AppBase } from "@livepreso/content-base";
-import { createRoot } from "react-dom/client";
 import { CompanywideJSON } from "./lib/components/CompanywideJSON.js";
 import { SlideContext } from "./lib/contexts.js";
+import { createRoot } from "react-dom/client";
 import errorFn from "@livepreso/content-base/error.js";
 import { useRootSlide } from "./lib/hooks/use-root-slide.js";
 
@@ -26,6 +26,10 @@ class ErrorBoundary extends React.Component {
 	}
 }
 
+if (module.hot && typeof window.__deck_roots__ === "undefined") {
+	window.__deck_roots__ = {};
+}
+
 export class App extends AppBase {
 	static run(rootApp = null) {
 		const base = new App();
@@ -41,8 +45,17 @@ export class App extends AppBase {
 
 	defaultRenderer(Slide, article) {
 		const el = article.get(0);
+
+		if (module.hot && window.__deck_roots__[el.id]) {
+			this.unmountRoot(el.id);
+		}
+
 		const root = createRoot(el);
 
+		if (module.hot) {
+			window.__deck_roots__[el.id] = root;
+		}
+
 		const RootApp = this.rootApp(Slide);
 
 		function App() {
@@ -52,10 +65,17 @@ export class App extends AppBase {
 			useEffect(() => {
 				function slideClosed() {
 					root.unmount();
+					if (module.hot) {
+						delete window.__deck_roots__[el.id];
+					}
 				}
 
 				article.on("slide:closed", slideClosed);
-			});
+
+				return () => {
+					article.off("slide:closed", slideClosed);
+				};
+			}, []);
 
 			return (
 				<SlideContext.Provider value={slideState}>
@@ -70,6 +90,25 @@ export class App extends AppBase {
 
 		root.render(<App />);
 	}
+
+	unmountRoot(key) {
+		if (!window.__deck_roots__[key]) {
+			return;
+		}
+		window.__deck_roots__[key].unmount();
+		delete window.__deck_roots__[key];
+	}
+
+	refresh() {
+		const keys = this.getActiveSlideKeys();
+		for (const key of keys) {
+			if (window.__deck_roots__?.[key]) {
+				this.unmountRoot(key);
+			}
+
+			this.renderSlide(key);
+		}
+	}
 }
 
 export * from "./lib/hooks";

package/lib/hooks/index.js

@@ -1,9 +1,11 @@
+export * from "./use-slide-ready.js";
 export * from "./use-shared-state.js";
 export * from "./use-async-reference.js";
 export * from "./use-modes.js";
-export * from "./use-context.js";
+export * from "./use-slide-context.js";
 export * from "./use-companywide.js";
 export * from "./use-slide.js";
 export * from "./use-transitions.js";
 export * from "./use-subslides.js";
 export * from "./use-prep-editable.js";
+export * from "./use-slide-done.js";

package/lib/hooks/use-modes.js

@@ -1,6 +1,4 @@
-import { useEffect, useState } from "react";
-
-function getModes() {
+export function useModes() {
 	const bodyClasses = [...document.body.classList];
 
 	const isMaster = bodyClasses.includes("master");
@@ -33,21 +31,3 @@ function getModes() {
 		isPresomanager,
 	};
 }
-
-export function useModes() {
-	const [modes, setModes] = useState(getModes());
-
-	useEffect(() => {
-		const observer = new MutationObserver(() => {
-			setModes(getModes());
-		});
-
-		observer.observe(document.body, {
-			attributes: ["classList"],
-		});
-
-		return () => observer.disconnect();
-	}, []);
-
-	return modes;
-}

package/lib/hooks/use-root-slide.js

@@ -1,5 +1,5 @@
 import { useAsyncReference, useModes } from "./index.js";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import ulog from "ulog";
 
@@ -27,6 +27,7 @@ export function useRootSlide(article) {
 	const [synced, setSynced] = useState(!isRemote);
 	const [internalSlideState, setInternalSlideState] = useAsyncReference({});
 	const [slideReady, setSlideReady] = useState(false);
+	const doneRegister = useRef({ promises: [] });
 
 	const [transitions, setTransitions] = useState({
 		...DEFAULT_TRANSITION_STATE,
@@ -105,11 +106,21 @@ export function useRootSlide(article) {
 		const slideExiting = updateState("exiting");
 		const slideExited = updateState("exited");
 
+		article.off();
 		article.on("slide:entering", slideEntering);
 		article.on("slide:entered", slideEntered);
 		article.on("slide:exiting", slideExiting);
 		article.on("slide:exited", slideExited);
-		article.on("slideready", (e) => {
+		article.on("slide:closed", () => {
+			doneRegister.current.promises = [];
+		});
+		article.on("slideready", (e, done) => {
+			Promise.all(
+				doneRegister.current.promises
+			).then(() => {
+				done();
+			});
+
 			setSlideReady(true);
 			slideEntered(e);
 		});
@@ -124,6 +135,7 @@ export function useRootSlide(article) {
 		transitions,
 		slideKey: key,
 		isCurrentSlide: isCurrent,
+		doneRegister,
 		rootElement: article.get(0),
 
 		// For use by shared state

package/lib/hooks/use-slide-context.js

@@ -0,0 +1,62 @@
+import isPlainObject from "lodash.isplainobject";
+import { useEffect } from "react";
+import { useSharedState } from "./index.js";
+
+function getValueFromContext(context, path, defaultValue) {
+  if (path) {
+    return Bridge.Context.get(path, defaultValue);
+  }
+
+  return context;
+}
+
+export function useSlideContext(contextPath = null, defaultValue = null) {
+  let persist = false;
+  let path = contextPath;
+
+  const value = getValueFromContext(
+    window.Bridge.Context.getDict(),
+    path,
+    defaultValue
+  );
+  const [context, setContextState] = useSharedState(value);
+
+  // You could pass in an object, so that you can set whether
+  // the saves are persistent or not.
+  if (isPlainObject(contextPath)) {
+    path = contextPath.path || null;
+    persist = contextPath.save || false;
+  }
+
+  function setContext(key, data) {
+    let setPath = key;
+    let setData = data;
+
+    if (path) {
+      if (data) {
+        setPath = `${path}.${key}`;
+      } else {
+        setPath = path;
+        setData = key;
+      }
+    }
+
+    Bridge.Context.set(setPath, setData, persist);
+
+    const value = getValueFromContext(
+      Bridge.Context.getDict(),
+      path,
+      defaultValue
+    );
+    setContextState(value);
+  }
+
+  useEffect(() => {
+    if (context !== value) {
+      Bridge.Context.set(path, context, persist);
+    }
+  }, [context]);
+
+  return [context, setContext];
+}
+

package/lib/hooks/use-slide-done.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef, useCallback } from "react";
+import { useSlide } from "./use-slide";
+
+export function useSlideDone() {
+	const { doneRegister } = useSlide();
+	const doneFn = useRef(null);
+
+	const callback = useCallback(() => {
+		if (!doneFn.current) {
+			console.warn(
+				"Attempted to call useSlideDone() callback before component mounted.",
+			);
+			return;
+		}
+		doneFn.current();
+	}, []);
+
+	useEffect(() => {
+		doneRegister.current.promises.push(
+			new Promise((resolve) => {
+				doneFn.current = resolve;
+			}),
+		);
+	}, []);
+
+	return callback;
+}

package/lib/hooks/use-slide-ready.js

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useSlide } from "./use-slide";
+
+export function useSlideReady(fn) {
+	const { isSlideReady } = useSlide();
+
+	useEffect(() => {
+		if (isSlideReady) {
+			fn();
+		}
+	}, [isSlideReady]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepreso/content-react",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "",
   "main": "index.js",
   "publishConfig": {
@@ -17,7 +17,7 @@
   "dependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@livepreso/content-base": "~1.1.2",
+    "@livepreso/content-base": "~1.1.3",
     "ulog": "~2.0.0-beta.18",
     "lodash.get": "~4.4.2",
     "lodash.isplainobject": "~4.0.6",

package/lib/hooks/use-context.js

@@ -1,61 +0,0 @@
-import { useEffect, useState } from "react";
-
-import isPlainObject from "lodash.isplainobject";
-
-function getValueFromContext(context, path, defaultValue) {
-	if (path) {
-		return Bridge.Context.get(path, defaultValue);
-	}
-
-	return context;
-}
-
-export function useContext(contextPath = null, defaultValue = null) {
-	let persist = false;
-	let path = contextPath;
-
-	const value = getValueFromContext(
-		window.Bridge.Context.getDict(),
-		path,
-		defaultValue,
-	);
-	const [context, setContextState] = useState(value);
-
-	// You could pass in an object, so that you can set whether
-	// the saves are persistent or not.
-	if (isPlainObject(contextPath)) {
-		path = contextPath.path || null;
-		persist = contextPath.save || false;
-	}
-
-	function setContext(key, data) {
-		let setPath = key;
-		let setData = data;
-
-		if (path) {
-			if (data) {
-				setPath = `${path}.${key}`;
-			} else {
-				setPath = path;
-				setData = key;
-			}
-		}
-
-		Bridge.Context.set(setPath, setData, persist);
-
-		const value = getValueFromContext(
-			Bridge.Context.getDict(),
-			path,
-			defaultValue,
-		);
-		setContextState(value);
-	}
-
-	useEffect(() => {
-		if (context !== value) {
-			Bridge.Context.set(path, context, persist);
-		}
-	}, [context]);
-
-	return [context, setContext];
-}