Change unique id generation for compatibility with SSR

Author: aeagle

nextjs-demo/pages/index.tsx

@@ -10,13 +10,11 @@ export default function Home() {
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<Space.ViewPort id="viewport">
-				<Space.LeftResizable id="left" size="25%" centerContent={Space.CenterType.HorizontalVertical} style={{ backgroundColor: "white" }}>
+			<Space.ViewPort>
+				<Space.LeftResizable size="25%" centerContent={Space.CenterType.HorizontalVertical} style={{ backgroundColor: "white" }}>
 					<span style={{ color: "black" }}>Hello world</span>
 				</Space.LeftResizable>
-				<Space.Fill id="fill" centerContent={Space.CenterType.HorizontalVertical}>
-					Hello world
-				</Space.Fill>
+				<Space.Fill centerContent={Space.CenterType.HorizontalVertical}>Hello world</Space.Fill>
 			</Space.ViewPort>
 		</>
 	);

package.json

@@ -28,8 +28,7 @@
 	"description": "An easy to understand and nestable layout system, React Spaces allow you to divide a page or container into anchored, scrollable and resizable spaces enabling you to build desktop type user interfaces in the browser.",
 	"dependencies": {
 		"css-element-queries": "^1.2.1",
-		"prop-types": "^15.7.2",
-		"react-spaces": "file:../dist"
+		"prop-types": "^15.7.2"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.5.5",

src/components/Space.tsx

@@ -1,9 +1,18 @@
 import { CenterType, ResizeHandlePlacement, AnchorType, Type } from "../core-types";
-import { useSpace, ParentContext, LayerContext, DOMRectContext, IReactSpaceInnerProps, useEffectOnce, SSR_SUPPORT_ENABLED } from "../core-react";
+import {
+	useSpace,
+	ParentContext,
+	LayerContext,
+	DOMRectContext,
+	IReactSpaceInnerProps,
+	useEffectOnce,
+	SSR_SUPPORT_ENABLED,
+	useUniqueId,
+} from "../core-react";
 import * as React from "react";
 import { Centered } from "./Centered";
 import { CenteredVertically } from "./CenteredVertically";
-import { shortuuid, updateStyleDefinition } from "../core-utils";
+import { updateStyleDefinition } from "../core-utils";
 
 function applyCentering(children: React.ReactNode, centerType: CenterType | undefined) {
 	switch (centerType) {
@@ -22,8 +31,13 @@ export class Space extends React.Component<IReactSpaceInnerProps> {
 }
 
 const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> = (props) => {
-	if (!props.id && !props.wrapperInstance["_react_spaces_uniqueid"]) {
-		props.wrapperInstance["_react_spaces_uniqueid"] = `s${shortuuid()}`;
+	let idToUse = props.id ?? props.wrapperInstance["_react_spaces_uniqueid"];
+
+	const uniqueId = useUniqueId();
+
+	if (!idToUse) {
+		props.wrapperInstance["_react_spaces_uniqueid"] = uniqueId;
+		idToUse = props.wrapperInstance["_react_spaces_uniqueid"];
 	}
 
 	const {
@@ -56,7 +70,7 @@ const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> =
 
 	const { space, domRect, elementRef, resizeHandles } = useSpace({
 		...props,
-		...{ id: props.id || props.wrapperInstance["_react_spaces_uniqueid"] },
+		...{ id: idToUse },
 	});
 
 	useEffectOnce(() => {
@@ -66,6 +80,12 @@ const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> =
 			if (space.element.getAttribute("data-ssr") === "1") {
 				const preRenderedStyle = space.element.children[0];
 				if (preRenderedStyle) {
+					const id = preRenderedStyle.getAttribute("data-id");
+					if (id) {
+						space.id = id;
+						console.log(space.id);
+					}
+
 					const newStyle = document.createElement("style");
 					newStyle.id = `style_${space.id}`;
 					newStyle.innerHTML = preRenderedStyle.innerHTML;
@@ -123,7 +143,11 @@ const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> =
 				props.as || "div",
 				outerProps,
 				<>
-					{SSR_SUPPORT_ENABLED && space.ssrStyle && <style className="ssr">{space.ssrStyle}</style>}
+					{SSR_SUPPORT_ENABLED && space.ssrStyle && (
+						<style className="ssr" data-id={space.id}>
+							{space.ssrStyle}
+						</style>
+					)}
 					<div className={innerClasses.join(" ")} style={innerStyle}>
 						<ParentContext.Provider value={space.id}>
 							<LayerContext.Provider value={undefined}>

src/core-react.ts

@@ -117,13 +117,26 @@ export function useForceUpdate() {
 	}, []);
 }
 
+export function useUniqueId() {
+	if (React.version.startsWith("18")) {
+		return `s${React.useId().replace(/\:/g, "")}`;
+	}
+
+	if ((React as any).unstable_useOpaqueIdentifier) {
+		return `s${(React as any).unstable_useOpaqueIdentifier().replace(/\:/g, "")}`;
+	}
+
+	return `s${shortuuid()}`;
+}
+
 export function useSpace(props: IReactSpaceInnerProps) {
 	const store = currentStore;
 	const update = useForceUpdate();
 	const parent = React.useContext(ParentContext);
 	const layer = React.useContext(LayerContext);
 	const { debug } = React.useContext(OptionsContext);
-	const [spaceId] = React.useState(props.id || `s${shortuuid()}`);
+	const uniqueId = useUniqueId();
+	const [spaceId] = React.useState(props.id || uniqueId);
 	const elementRef = React.useRef<HTMLElement>();
 	const resizeSensor = React.useRef<ResizeSensor>();
 	const [domRect, setDomRect] = React.useState<DOMRect>();
@@ -277,6 +290,7 @@ export function useCurrentSpace() {
 }
 
 export let SSR_SUPPORT_ENABLED = false;
+
 export function enabledSsrSupport() {
 	SSR_SUPPORT_ENABLED = true;
 }

src/core-utils.ts

@@ -395,20 +395,18 @@ export function styleDefinition(space: ISpaceDefinition) {
 
 export function updateStyleDefinition(space: ISpaceDefinition) {
 	const definition = styleDefinition(space);
-	if (typeof document !== "undefined") {
-		if (document) {
-			const existing = document.getElementById(`style_${space.id}`);
+	if (!isServer()) {
+		const existing = document.getElementById(`style_${space.id}`);
 
-			if (existing) {
-				if (existing.innerHTML !== definition) {
-					existing.innerHTML = definition;
-				}
-			} else {
-				const newStyle = document.createElement("style");
-				newStyle.id = `style_${space.id}`;
-				newStyle.innerHTML = definition;
-				document.head.appendChild(newStyle);
+		if (existing) {
+			if (existing.innerHTML !== definition) {
+				existing.innerHTML = definition;
 			}
+		} else {
+			const newStyle = document.createElement("style");
+			newStyle.id = `style_${space.id}`;
+			newStyle.innerHTML = definition;
+			document.head.appendChild(newStyle);
 		}
 	}
 }
@@ -419,3 +417,12 @@ export function removeStyleDefinition(space: ISpaceDefinition) {
 		document.head.removeChild(existing);
 	}
 }
+
+export function isServer() {
+	if (typeof document !== "undefined") {
+		if (document) {
+			return false;
+		}
+	}
+	return true;
+}