Initial support for SSR rendering

Author: aeagle

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-spaces",
-	"version": "0.2.0",
+	"version": "0.2.1-beta.9",
 	"main": "dist/index.js",
 	"module": "dist/es/index.js",
 	"types": "dist/index.d.ts",

src/components/Space.tsx

@@ -3,7 +3,7 @@ import { useSpace, ParentContext, LayerContext, DOMRectContext } from "../core-r
 import * as React from "react";
 import { Centered } from "./Centered";
 import { CenteredVertically } from "./CenteredVertically";
-import { shortuuid } from "../core-utils";
+import { shortuuid, updateStyleDefinition } from "../core-utils";
 
 function applyCentering(children: React.ReactNode, centerType: CenterType | undefined) {
 	switch (centerType) {
@@ -60,6 +60,18 @@ const SpaceInner: React.FC<ISpaceProps & { wrapperInstance: Space }> = (props) =
 
 	React.useEffect(() => {
 		space.element = elementRef.current!;
+
+		if (space.element.getAttribute("data-ssr") === "1") {
+			const preRenderedStyle = space.element.children[0];
+			if (preRenderedStyle) {
+				const newStyle = document.createElement("style");
+				newStyle.id = `style_${space.id}`;
+				newStyle.innerHTML = preRenderedStyle.innerHTML;
+				document.head.appendChild(newStyle);
+			}
+			space.element.removeAttribute("data-ssr");
+			updateStyleDefinition(space);
+		}
 	}, []);
 
 	const userClasses = className ? className.split(" ").map((c) => c.trim()) : [];
@@ -86,28 +98,39 @@ const SpaceInner: React.FC<ISpaceProps & { wrapperInstance: Space }> = (props) =
 
 	const centeredContent = applyCentering(children, props.centerContent);
 
+	const outerProps = {
+		...{
+			id: space.id,
+			ref: elementRef,
+			className: outerClasses.join(" "),
+		},
+		...events,
+	} as any;
+
+	const isSSR = typeof document === "undefined";
+
+	if (isSSR) {
+		outerProps["data-ssr"] = "1";
+	}
+
 	return (
 		<>
 			{resizeHandles.mouseHandles.map((r) => (
 				<div {...r} />
 			))}
 			{React.createElement(
 				props.as || "div",
-				{
-					...{
-						id: space.id,
-						ref: elementRef,
-						className: outerClasses.join(" "),
-					},
-					...events,
-				},
-				<div className={innerClasses.join(" ")} style={innerStyle}>
-					<ParentContext.Provider value={space.id}>
-						<LayerContext.Provider value={undefined}>
-							<DOMRectContext.Provider value={domRect}>{centeredContent}</DOMRectContext.Provider>
-						</LayerContext.Provider>
-					</ParentContext.Provider>
-				</div>,
+				outerProps,
+				<>
+					{isSSR && space.ssrStyle && <style className="ssr">{space.ssrStyle}</style>}
+					<div className={innerClasses.join(" ")} style={innerStyle}>
+						<ParentContext.Provider value={space.id}>
+							<LayerContext.Provider value={undefined}>
+								<DOMRectContext.Provider value={domRect}>{centeredContent}</DOMRectContext.Provider>
+							</LayerContext.Provider>
+						</ParentContext.Provider>
+					</div>
+				</>,
 			)}
 		</>
 	);

src/core-types.ts

@@ -156,4 +156,5 @@ export interface ISpaceDefinition {
 	canResizeLeft: boolean;
 	canResizeRight: boolean;
 	canResizeBottom: boolean;
+	ssrStyle?: string;
 }

src/core-utils.ts

@@ -173,20 +173,24 @@ export function styleDefinition(space: ISpaceDefinition) {
 }
 
 export function updateStyleDefinition(space: ISpaceDefinition) {
-	if (document) {
-		const definition = styleDefinition(space);
-		const existing = document.getElementById(`style_${space.id}`);
-
-		if (existing) {
-			if (existing.innerHTML !== definition) {
-				existing.innerHTML = definition;
+	const definition = styleDefinition(space);
+	if (typeof document !== "undefined") {
+		if (document) {
+			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);
 			}
-		} else {
-			const newStyle = document.createElement("style");
-			newStyle.id = `style_${space.id}`;
-			newStyle.innerHTML = definition;
-			document.head.appendChild(newStyle);
 		}
+	} else {
+		space.ssrStyle = definition;
 	}
 }