@livepreso/content-react 0.3.4 → 0.3.6

package/.rush/temp/shrinkwrap-deps.json

@@ -1,5 +1,5 @@
 {
-  "../../content/content-react": "../../content/content-react:gIunKntbEKHWcVSt+h52eM+NioiBP31+ikW5HR9+F8o=:",
+  "../../content/content-react": "../../content/content-react:bddeBDvUeJPa+NT4hb6TbJCKyl7AZrKwScnaAaM2sGc=:",
   "/@babel/helper-annotate-as-pure/7.22.5": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
   "/@babel/helper-module-imports/7.22.15": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
   "/@babel/helper-plugin-utils/7.22.5": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",

package/CHANGELOG.json

@@ -1,6 +1,35 @@
 {
   "name": "@livepreso/content-react",
   "entries": [
+    {
+      "version": "0.3.6",
+      "tag": "@livepreso/content-react_v0.3.6",
+      "date": "Wed, 20 Mar 2024 01:31:57 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Subslide functionaly accessible throughout slides"
+          }
+        ]
+      }
+    },
+    {
+      "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",

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Change Log - @livepreso/content-react
 
-This log was last generated on Sun, 14 Jan 2024 21:06:16 GMT and should not be manually modified.
+This log was last generated on Wed, 20 Mar 2024 01:31:57 GMT and should not be manually modified.
+
+## 0.3.6
+Wed, 20 Mar 2024 01:31:57 GMT
+
+### Patches
+
+- Subslide functionaly accessible throughout slides
+
+## 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

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/components/Subslide.js

@@ -4,108 +4,119 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import { SlideContext, SubslideContext } from "../contexts.js";
 
 const DEFAULT_TRANSITION_STATE = {
-  entering: false,
-  entered: false,
-  exiting: false,
-  exited: false,
+	entering: false,
+	entered: false,
+	exiting: false,
+	exited: false,
 };
 
 export function Subslide(props) {
-  const {
-    id,
-    setSubslide,
-    endAnimation,
-    className,
-    style,
-    index,
-    active,
-    children,
-    animateSpeed,
-  } = props;
-  const { isSlideReady } = useContext(SlideContext);
-  const [transitions, setTransitions] = useState({
-    ...DEFAULT_TRANSITION_STATE,
-    entered: active,
-  });
-
-  // Poor mans classnames. Let's keep dependencies small.
-  const classes = ["subslide"];
-
-  if (typeof className === "string") {
-    classes.push(className);
-  }
-
-  if (active) {
-    classes.push("currentpage");
-  }
-
-  const subslide = useRef(null);
-
-  function animateIn() {
-    setSubslide(index);
-    setTransitions({
-      ...DEFAULT_TRANSITION_STATE,
-      entering: true,
-    });
-
-    setTimeout(() => {
-      subslide.current.ready = true;
-      subslide.current.animating(false);
-      setTransitions({
-        ...DEFAULT_TRANSITION_STATE,
-        entered: true,
-      });
-      endAnimation();
-    }, animateSpeed);
-    return subslide.current;
-  }
-
-  function animateOut() {
-    setTransitions({
-      ...DEFAULT_TRANSITION_STATE,
-      exiting: true,
-    });
-    setTimeout(() => {
-      subslide.current.ready = true;
-      subslide.current.animating(false);
-      setTransitions({
-        ...DEFAULT_TRANSITION_STATE,
-        exited: true,
-      });
-      endAnimation();
-    }, animateSpeed);
-    return subslide.current;
-  }
-
-  useEffect(() => {
-    if (isSlideReady) {
-      const bridgeSub = Bridge.Sub.get(`subslide-${index}`);
-
-      subslide.current = bridgeSub;
-
-      let transitions = {
-        in: animateIn.bind(this),
-        out: animateOut.bind(this),
-      };
-
-      // The hack
-      subslide.current.transitions(transitions);
-
-      subslide.current.ready = true;
-      subslide.current.animating(false);
-    }
-  }, [isSlideReady]);
-
-  return (
-    <SubslideContext.Provider
-      value={{
-        isActive: active,
-        transitions,
-      }}
-    >
-      <div id={id} style={{ flex: 1, position: "relative", ...style || {} }} className={classes.join(" ")}>
-        {children}
-      </div>
-    </SubslideContext.Provider>
-  );
+	const {
+		id,
+		setSubslide,
+		endAnimation,
+		className,
+		style,
+		index,
+		active,
+		children,
+		animateSpeed,
+	} = props;
+	const { isSlideReady, registerSubslide, unregisterSubslide } =
+		useContext(SlideContext);
+	const [transitions, setTransitions] = useState({
+		...DEFAULT_TRANSITION_STATE,
+		entered: active,
+	});
+
+	// Poor mans classnames. Let's keep dependencies small.
+	const classes = ["subslide"];
+
+	if (typeof className === "string") {
+		classes.push(className);
+	}
+
+	if (active) {
+		classes.push("currentpage");
+	}
+
+	const subslide = useRef(null);
+
+	function animateIn() {
+		setSubslide(index);
+		setTransitions({
+			...DEFAULT_TRANSITION_STATE,
+			entering: true,
+		});
+
+		setTimeout(() => {
+			subslide.current.ready = true;
+			subslide.current.animating(false);
+			setTransitions({
+				...DEFAULT_TRANSITION_STATE,
+				entered: true,
+			});
+			endAnimation();
+		}, animateSpeed);
+		return subslide.current;
+	}
+
+	function animateOut() {
+		setTransitions({
+			...DEFAULT_TRANSITION_STATE,
+			exiting: true,
+		});
+		setTimeout(() => {
+			subslide.current.ready = true;
+			subslide.current.animating(false);
+			setTransitions({
+				...DEFAULT_TRANSITION_STATE,
+				exited: true,
+			});
+			endAnimation();
+		}, animateSpeed);
+		return subslide.current;
+	}
+
+	useEffect(() => {
+		if (isSlideReady) {
+			const bridgeSub = Bridge.Sub.get(`subslide-${index}`);
+
+			subslide.current = bridgeSub;
+
+			let transitions = {
+				in: animateIn.bind(this),
+				out: animateOut.bind(this),
+			};
+
+			// The hack
+			subslide.current.transitions(transitions);
+
+			subslide.current.ready = true;
+			subslide.current.animating(false);
+		}
+	}, [isSlideReady]);
+
+	// Increase and decrease total count of subslides
+	useEffect(() => {
+		registerSubslide();
+		return () => unregisterSubslide();
+	}, []);
+
+	return (
+		<SubslideContext.Provider
+			value={{
+				isActive: active,
+				transitions,
+			}}
+		>
+			<div
+				id={id}
+				style={{ flex: 1, position: "relative", ...(style || {}) }}
+				className={classes.join(" ")}
+			>
+				{children}
+			</div>
+		</SubslideContext.Provider>
+	);
 }

package/lib/components/Subslides.js

@@ -1,71 +1,66 @@
 /* eslint-disable react/jsx-no-constructed-context-values */
 // TODO: Remove above
-import React, { useState } from "react";
+import React, { useContext } from "react";
 import { ScrollableArea, Subslide } from "./index.js";
-import { useAsyncReference, useModes } from "../hooks";
+import { SlideContext, SubslidesContext } from "../contexts.js";
 
-import { SubslidesContext } from "../contexts.js";
+import { useModes } from "../hooks";
 
 export function Subslides({ children, animateSpeed }) {
-  const [currentSubslide, setCurrentSubslide] = useAsyncReference(1);
-  const [animating, setAnimating] = useState({
-    up: false,
-    down: false,
-  });
-  const { isScreenshot } = useModes();
+	const {
+		subslideAnimating: animating,
+		setSubslideAnimating: setAnimating,
+		currentSubslide,
+		setCurrentSubslide,
+	} = useContext(SlideContext);
+	const { isScreenshot } = useModes();
 
-  let totalSubslides = 0;
+	function mapSubslide(child, index) {
+		return React.cloneElement(child, {
+			id: `subslide-${index + 1}`,
+			style: { height: "100%" },
+			setSubslide: (index) => {
+				setAnimating({
+					down: index > currentSubslide,
+					up: index < currentSubslide,
+				});
+				setCurrentSubslide(index);
+			},
+			endAnimation: () => {
+				setAnimating({ down: false, up: false });
+			},
+			animateSpeed: isScreenshot ? 0 : animateSpeed,
+			index: index + 1,
+			active: index + 1 === currentSubslide,
+			key: index,
+		});
+	}
 
-  function mapSubslide(child, index) {
-    totalSubslides++;
-    return React.cloneElement(child, {
-      id: `subslide-${index + 1}`,
-      style: { height: "100%" },
-      setSubslide: (index) => {
-        setAnimating({
-          down: index > currentSubslide.current,
-          up: index < currentSubslide.current,
-        });
-        setCurrentSubslide(index);
-      },
-      endAnimation: () => {
-        setAnimating({ down: false, up: false });
-      },
-      animateSpeed: isScreenshot ? 0 : animateSpeed,
-      index: index + 1,
-      active: index + 1 === currentSubslide.current,
-      key: index,
-    });
-  }
+	const newChildren = React.Children.map(children, (child, index) => {
+		if (child.type === Subslide) {
+			return mapSubslide(child, index);
+		}
 
-  const newChildren = React.Children.map(children, (child, index) => {
-    if (child.type === Subslide) {
-      return mapSubslide(child, index);
-    }
+		if (child.type === ScrollableArea) {
+			return React.cloneElement(child, {
+				children: React.Children.map(child.props.children, mapSubslide),
+			});
+		}
 
-    if (child.type === ScrollableArea) {
-      return React.cloneElement(child, {
-        children: React.Children.map(child.props.children, mapSubslide),
-      });
-    }
+		return child;
+	});
 
-    return child;
-  });
-
-  return (
-    <SubslidesContext.Provider
-      value={{
-        animating,
-        currentSubslideIndex: currentSubslide.current,
-        totalSubslides: totalSubslides,
-      }}
-    >
-      {newChildren}
-    </SubslidesContext.Provider>
-  );
+	return (
+		<SubslidesContext.Provider
+			value={{
+				animating,
+			}}
+		>
+			{newChildren}
+		</SubslidesContext.Provider>
+	);
 }
 
 Subslides.defaultProps = {
-  animateSpeed: 500,
+	animateSpeed: 500,
 };
-

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-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";
 
@@ -26,7 +26,16 @@ export function useRootSlide(article) {
 	const isCurrent = article.closest(".presoSlide").hasClass("current");
 	const [synced, setSynced] = useState(!isRemote);
 	const [internalSlideState, setInternalSlideState] = useAsyncReference({});
+	const [totalSubslides, setTotalSubslides] = useAsyncReference(0);
+	const [currentSubslide, setCurrentSubslide] = useAsyncReference(
+		totalSubslides ? 1 : null,
+	);
+	const [subslideAnimating, setSubslideAnimating] = useAsyncReference({
+		up: false,
+		down: false,
+	});
 	const [slideReady, setSlideReady] = useState(false);
+	const doneRegister = useRef({ promises: [] });
 
 	const [transitions, setTransitions] = useState({
 		...DEFAULT_TRANSITION_STATE,
@@ -105,11 +114,19 @@ 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,8 +141,18 @@ export function useRootSlide(article) {
 		transitions,
 		slideKey: key,
 		isCurrentSlide: isCurrent,
+		doneRegister,
 		rootElement: article.get(0),
 
+		registerSubslide: () => setTotalSubslides(totalSubslides.current + 1),
+		unregisterSubslide: () => setTotalSubslides(totalSubslides.current - 1),
+
+		subslideAnimating: subslideAnimating.current,
+		setSubslideAnimating,
+		totalSubslides: totalSubslides.current,
+		currentSubslide: currentSubslide.current,
+		setCurrentSubslide,
+
 		// For use by shared state
 		internalSlideState,
 		setInternalSlideState,

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/lib/hooks/use-slide.js

@@ -2,5 +2,15 @@ import { SlideContext } from "../contexts.js";
 import { useContext } from "react";
 
 export function useSlide() {
-	return useContext(SlideContext);
+	const {
+		slideKey,
+		isSlideReady,
+		doneRegister,
+		isCurrentSlide,
+		totalSubslides,
+		currentSubslide,
+		transitions
+	} = useContext(SlideContext);
+
+	return { slideKey, isSlideReady, doneRegister, isCurrentSlide, currentSubslide, totalSubslides, transitions };
 }

package/lib/hooks/use-subslides.js

@@ -1,30 +1,51 @@
-import { SubslidesContext } from "../contexts.js";
+import { SlideContext, SubslideContext } from "../contexts.js";
+
 import { useContext } from "react";
+import { useSlide } from "./use-slide";
 
 export function useSubslides() {
-  const context = useContext(SubslidesContext);
-  const index = context.currentSubslideIndex;
+	const context = useContext(SubslideContext);
+	const { subslideAnimating: animating } = useContext(SlideContext);
+	const { currentSubslide: index, totalSubslides } = useSlide();
 
-  const atTop = index === 1;
-  const atBottom = index === context.totalSubslides;
-  return {
-    ...context,
-    atTop,
-    atBottom,
-    navigateUp() {
-      if (atTop) {
-        return;
-      }
+	const atTop = index === 1;
+	const atBottom = index === totalSubslides;
+	return {
+		...context,
+		animating,
+		atTop,
+		atBottom,
+		totalSubslides,
+		currentSubslideIndex: index,
+		navigateTo(newIndex) {
+			if (newIndex === index) {
+				// It's the same index, no need to change
+				return;
+			}
 
-      Bridge.Sub.show(`subslide-${index - 1}`);
-    },
-    navigateDown() {
-      if (atBottom) {
-        return;
-      }
+			if (newIndex < 1 || newIndex > totalSubslides) {
+				/* eslint-disable-next-line no-console */
+				console.warn(
+					`Cannot navigate to subslide ${newIndex} as it does not exist.`,
+				);
+				return;
+			}
 
-      Bridge.Sub.show(`subslide-${index + 1}`);
-    }
-  };
-}
+			window.Bridge.Sub.show(`subslide-${newIndex}`);
+		},
+		navigateUp() {
+			if (atTop) {
+				return;
+			}
 
+			window.Bridge.Sub.show(`subslide-${index - 1}`);
+		},
+		navigateDown() {
+			if (atBottom) {
+				return;
+			}
+
+			window.Bridge.Sub.show(`subslide-${index + 1}`);
+		},
+	};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepreso/content-react",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "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];
-}