Merge pull request #138 from aeagle/feature/ss-rendering

aeagle · web-flow · commit 736bb592ace5 · 2023-01-06T23:07:35.000Z
Experimental full SSR rendering functionality

+semver: feature
diff --git a/GitVersion.yml b/GitVersion.yml
@@ -0,0 +1,4 @@
+major-version-bump-message: '\+semver:\s?(breaking|major)'
+minor-version-bump-message: '\+semver:\s?(feature|minor)'
+patch-version-bump-message: '\+semver:\s?(fix|patch)'
+commit-message-incrementing: Enabled
diff --git a/nextjs-demo/pages/index.tsx b/nextjs-demo/pages/index.tsx
@@ -4,18 +4,28 @@ import * as Space from "react-spaces";
 export default function Home() {
 	return (
 		<>
+			<Space.SSR />
 			<Head>
 				<title>Create Next App</title>
 				<meta name="description" content="Generated by create next app" />
 				<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.RightResizable size="25%" centerContent={Space.CenterType.HorizontalVertical} style={{ backgroundColor: "white" }}>
+					<span style={{ color: "black" }}>Hello world</span>
+				</Space.RightResizable>
+				<Space.Fill>
+					<Space.TopResizable size="25%" centerContent={Space.CenterType.HorizontalVertical} style={{ backgroundColor: "white" }}>
+						<span style={{ color: "black" }}>Hello world</span>
+					</Space.TopResizable>
+					<Space.BottomResizable size="25%" centerContent={Space.CenterType.HorizontalVertical} style={{ backgroundColor: "white" }}>
+						<span style={{ color: "black" }}>Hello world</span>
+					</Space.BottomResizable>
+					<Space.Fill centerContent={Space.CenterType.HorizontalVertical}>Hello world</Space.Fill>
 				</Space.Fill>
 			</Space.ViewPort>
 		</>
diff --git a/rollup.config.js b/rollup.config.js
@@ -26,6 +26,7 @@ const targets = [
 		plugins: [
 			postcss({
 				extract: false,
+				minimize: true,
 			}),
 			...commonPlugins,
 			babel({ babelHelpers: "runtime", exclude: "node_modules/**" }),
@@ -40,6 +41,7 @@ const targets = [
 		plugins: [
 			postcss({
 				extract: false,
+				minimize: true,
 			}),
 			...commonPlugins,
 		],
@@ -52,6 +54,7 @@ const targets = [
 		plugins: [
 			postcss({
 				extract: true,
+				minimize: true,
 			}),
 			...commonPlugins,
 			babel({ babelHelpers: "runtime", exclude: "node_modules/**" }),
@@ -66,6 +69,7 @@ const targets = [
 		plugins: [
 			postcss({
 				extract: true,
+				minimize: true,
 			}),
 			...commonPlugins,
 		],
diff --git a/src/Globals.d.ts b/src/Globals.d.ts
@@ -0,0 +1 @@
+declare module "*.css";
diff --git a/src/components/Positioned.tsx b/src/components/Positioned.tsx
@@ -19,8 +19,6 @@ interface IPositionedProps extends IReactSpaceCommonProps {
 export const Positioned: React.FC<IPositionedProps> = ({ left, top, right, bottom, width, height, resizable, ...props }) => {
 	const resizeTypes = resizable || [];
 
-	console.log(resizeTypes);
-
 	return (
 		<Space
 			{...props}
diff --git a/src/components/SSR.tsx b/src/components/SSR.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { enabledSsrSupport } from "../core-react";
+import css from "../styles.css";
+
+export const SSR: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+	enabledSsrSupport();
+	return (
+		<>
+			<style dangerouslySetInnerHTML={{ __html: css }} />
+			{children}
+		</>
+	);
+};
diff --git a/src/components/Space.tsx b/src/components/Space.tsx
@@ -1,9 +1,18 @@
 import { CenterType, ResizeHandlePlacement, AnchorType, Type } from "../core-types";
-import { useSpace, ParentContext, LayerContext, DOMRectContext, IReactSpaceInnerProps, useEffectOnce } 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 } from "../core-utils";
+import { isServer, updateStyleDefinition } from "../core-utils";
 
 function applyCentering(children: React.ReactNode, centerType: CenterType | undefined) {
 	switch (centerType) {
@@ -22,8 +31,14 @@ 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 [initialRender, setInitialRender] = React.useState(SSR_SUPPORT_ENABLED ? true : false);
+
+	const uniqueId = useUniqueId();
+
+	if (!idToUse) {
+		props.wrapperInstance["_react_spaces_uniqueid"] = uniqueId;
+		idToUse = props.wrapperInstance["_react_spaces_uniqueid"];
 	}
 
 	const {
@@ -56,11 +71,25 @@ const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> =
 
 	const { space, domRect, elementRef, resizeHandles } = useSpace({
 		...props,
-		...{ id: props.id || props.wrapperInstance["_react_spaces_uniqueid"] },
+		...{ id: idToUse },
 	});
 
+	if (SSR_SUPPORT_ENABLED && !isServer()) {
+		const preRenderedStyle = document.getElementById(`style_${idToUse}_ssr`);
+		if (preRenderedStyle) {
+			space.ssrStyle = preRenderedStyle.innerHTML;
+		}
+		updateStyleDefinition(space);
+	}
+
 	useEffectOnce(() => {
 		space.element = elementRef.current!;
+
+		if (SSR_SUPPORT_ENABLED) {
+			if (initialRender) {
+				setInitialRender(false);
+			}
+		}
 	});
 
 	const userClasses = className ? className.split(" ").map((c) => c.trim()) : [];
@@ -89,19 +118,22 @@ const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> =
 
 	const centeredContent = applyCentering(children, props.centerContent);
 
+	const outerProps = {
+		...{
+			id: space.id,
+			ref: elementRef,
+			className: outerClasses.join(" "),
+		},
+		...events,
+	} as any;
+
 	return (
 		<>
 			{resizeHandles.mouseHandles.map((handleProps) => handleRender?.(handleProps) || <div {...handleProps} />)}
+			{SSR_SUPPORT_ENABLED && space.ssrStyle && initialRender && <style id={`style_${space.id}_ssr`}>{space.ssrStyle}</style>}
 			{React.createElement(
 				props.as || "div",
-				{
-					...{
-						id: space.id,
-						ref: elementRef,
-						className: outerClasses.join(" "),
-					},
-					...events,
-				},
+				outerProps,
 				<div className={innerClasses.join(" ")} style={innerStyle}>
 					<ParentContext.Provider value={space.id}>
 						<LayerContext.Provider value={undefined}>
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -10,4 +10,5 @@ export * from "./Layer";
 export * from "./Positioned";
 export * from "./SpaceInfo";
 export * from "./ViewPort";
+export * from "./SSR";
 export * from "./Options";
diff --git a/src/core-react.ts b/src/core-react.ts
@@ -117,13 +117,28 @@ export function useForceUpdate() {
 	}, []);
 }
 
+export function useUniqueId() {
+	if (SSR_SUPPORT_ENABLED) {
+		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>();
@@ -275,3 +290,8 @@ export function useCurrentSpace() {
 		forceUpdate: onForceUpdate,
 	} as ISpaceContext;
 }
+
+export let SSR_SUPPORT_ENABLED = false;
+export function enabledSsrSupport() {
+	SSR_SUPPORT_ENABLED = true;
+}
diff --git a/src/core-types.ts b/src/core-types.ts
@@ -171,6 +171,7 @@ export interface ISpaceDefinition {
 	canResizeBottomLeft: boolean;
 	canResizeBottomRight: boolean;
 	allowOverflow: boolean;
+	ssrStyle: string;
 }
 
 export interface ISpaceContext {
@@ -179,4 +180,5 @@ export interface ISpaceContext {
 	startMouseDrag: (e: ResizeMouseEvent, onDragEnd?: OnDragEnd) => void;
 	startTouchDrag: (e: ResizeTouchEvent, onDragEnd?: OnDragEnd) => void;
 	forceUpdate: () => void;
+	ssrStyle?: string;
 }
diff --git a/src/core-utils.ts b/src/core-utils.ts
@@ -395,21 +395,20 @@ 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 (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 (!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);
 		}
+	} else {
+		space.ssrStyle = definition;
 	}
 }
 
@@ -419,3 +418,12 @@ export function removeStyleDefinition(space: ISpaceDefinition) {
 		document.head.removeChild(existing);
 	}
 }
+
+export function isServer() {
+	if (typeof document !== "undefined") {
+		if (document) {
+			return false;
+		}
+	}
+	return true;
+}
diff --git a/src/index.ts b/src/index.ts
@@ -22,4 +22,4 @@ export type {
 	ResizeTouchEvent
 }
 
-export { useCurrentSpace } from "./core-react";
+export { useCurrentSpace, enabledSsrSupport } from "./core-react";

Original file line number	Diff line number	Diff line change
`@@ -171,6 +171,7 @@ export interface ISpaceDefinition {`
`171`	`171`	`canResizeBottomLeft: boolean;`
`172`	`172`	`canResizeBottomRight: boolean;`
`173`	`173`	`allowOverflow: boolean;`
	`174`	`+ ssrStyle: string;`
`174`	`175`	`}`
`175`	`176`
`176`	`177`	`export interface ISpaceContext {`
`@@ -179,4 +180,5 @@ export interface ISpaceContext {`
`179`	`180`	`startMouseDrag: (e: ResizeMouseEvent, onDragEnd?: OnDragEnd) => void;`
`180`	`181`	`startTouchDrag: (e: ResizeTouchEvent, onDragEnd?: OnDragEnd) => void;`
`181`	`182`	`forceUpdate: () => void;`
	`183`	`+ ssrStyle?: string;`
`182`	`184`	`}`