Skip to content

Commit 14417a0

Browse files
aeagleaeagle
committed
Initial style implementation
1 parent 381f4e7 commit 14417a0

File tree

9 files changed

+54
-37
lines changed

9 files changed

+54
-37
lines changed

‎nextjs-demo/pages/index.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as Space from "react-spaces";
33

44
export default function Home() {
55
return (
6-
<>
6+
<Space.SSR>
77
<Head>
88
<title>Create Next App</title>
99
<meta name="description" content="Generated by create next app" />
@@ -14,8 +14,19 @@ export default function Home() {
1414
<Space.LeftResizable size="25%" centerContent={Space.CenterType.HorizontalVertical} style={{ backgroundColor: "white" }}>
1515
<span style={{ color: "black" }}>Hello world</span>
1616
</Space.LeftResizable>
17-
<Space.Fill centerContent={Space.CenterType.HorizontalVertical}>Hello world</Space.Fill>
17+
<Space.RightResizable size="25%" centerContent={Space.CenterType.HorizontalVertical} style={{ backgroundColor: "white" }}>
18+
<span style={{ color: "black" }}>Hello world</span>
19+
</Space.RightResizable>
20+
<Space.Fill>
21+
<Space.TopResizable size="25%" centerContent={Space.CenterType.HorizontalVertical} style={{ backgroundColor: "white" }}>
22+
<span style={{ color: "black" }}>Hello world</span>
23+
</Space.TopResizable>
24+
<Space.BottomResizable size="25%" centerContent={Space.CenterType.HorizontalVertical} style={{ backgroundColor: "white" }}>
25+
<span style={{ color: "black" }}>Hello world</span>
26+
</Space.BottomResizable>
27+
<Space.Fill centerContent={Space.CenterType.HorizontalVertical}>Hello world</Space.Fill>
28+
</Space.Fill>
1829
</Space.ViewPort>
19-
</>
30+
</Space.SSR>
2031
);
2132
}

‎rollup.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import babel from "@rollup/plugin-babel";
55
import sourcemaps from "rollup-plugin-sourcemaps";
66
import postcss from "rollup-plugin-postcss";
77
import { uglify } from "rollup-plugin-uglify";
8+
import css from "rollup-plugin-import-css";
89
import pkg from "./package.json";
910

1011
const commonPlugins = [
@@ -26,6 +27,7 @@ const targets = [
2627
plugins: [
2728
postcss({
2829
extract: false,
30+
minimize: true,
2931
}),
3032
...commonPlugins,
3133
babel({ babelHelpers: "runtime", exclude: "node_modules/**" }),
@@ -40,6 +42,7 @@ const targets = [
4042
plugins: [
4143
postcss({
4244
extract: false,
45+
minimize: true,
4346
}),
4447
...commonPlugins,
4548
],
@@ -52,6 +55,7 @@ const targets = [
5255
plugins: [
5356
postcss({
5457
extract: true,
58+
minimize: true,
5559
}),
5660
...commonPlugins,
5761
babel({ babelHelpers: "runtime", exclude: "node_modules/**" }),
@@ -66,6 +70,7 @@ const targets = [
6670
plugins: [
6771
postcss({
6872
extract: true,
73+
minimize: true,
6974
}),
7075
...commonPlugins,
7176
],

‎src/Globals.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare module "*.css";

‎src/components/Positioned.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,6 @@ interface IPositionedProps extends IReactSpaceCommonProps {
1919
export const Positioned: React.FC<IPositionedProps> = ({ left, top, right, bottom, width, height, resizable, ...props }) => {
2020
const resizeTypes = resizable || [];
2121

22-
console.log(resizeTypes);
23-
2422
return (
2523
<Space
2624
{...props}

‎src/components/SSR.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as React from "react";
2+
import { enabledSsrSupport } from "../core-react";
3+
import css from "../styles.css";
4+
5+
export const SSR: React.FC<{ children: React.ReactNode }> = ({ children }) => {
6+
enabledSsrSupport();
7+
return (
8+
<>
9+
<style dangerouslySetInnerHTML={{ __html: css }} />
10+
{children}
11+
</>
12+
);
13+
};

‎src/components/Space.tsx‎

Lines changed: 18 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
import * as React from "react";
1313
import { Centered } from "./Centered";
1414
import { CenteredVertically } from "./CenteredVertically";
15-
import { updateStyleDefinition } from "../core-utils";
15+
import { isServer, updateStyleDefinition } from "../core-utils";
1616

1717
function applyCentering(children: React.ReactNode, centerType: CenterType | undefined) {
1818
switch (centerType) {
@@ -73,28 +73,20 @@ const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> =
7373
...{ id: idToUse },
7474
});
7575

76+
if (SSR_SUPPORT_ENABLED && !isServer()) {
77+
const preRenderedStyle = document.getElementById(`style_${idToUse}_ssr`);
78+
if (preRenderedStyle) {
79+
const newStyle = document.createElement("style");
80+
newStyle.id = `style_${idToUse}`;
81+
newStyle.innerHTML = preRenderedStyle.innerHTML;
82+
document.head.appendChild(newStyle);
83+
space.ssrStyle = preRenderedStyle.innerHTML;
84+
}
85+
updateStyleDefinition(space);
86+
}
87+
7688
useEffectOnce(() => {
7789
space.element = elementRef.current!;
78-
79-
if (SSR_SUPPORT_ENABLED) {
80-
if (space.element.getAttribute("data-ssr") === "1") {
81-
const preRenderedStyle = space.element.children[0];
82-
if (preRenderedStyle) {
83-
const id = preRenderedStyle.getAttribute("data-id");
84-
if (id) {
85-
space.id = id;
86-
console.log(space.id);
87-
}
88-
89-
const newStyle = document.createElement("style");
90-
newStyle.id = `style_${space.id}`;
91-
newStyle.innerHTML = preRenderedStyle.innerHTML;
92-
document.head.appendChild(newStyle);
93-
}
94-
space.element.removeAttribute("data-ssr");
95-
updateStyleDefinition(space);
96-
}
97-
}
9890
});
9991

10092
const userClasses = className ? className.split(" ").map((c) => c.trim()) : [];
@@ -132,22 +124,18 @@ const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> =
132124
...events,
133125
} as any;
134126

135-
if (SSR_SUPPORT_ENABLED) {
136-
outerProps["data-ssr"] = "1";
137-
}
138-
139127
return (
140128
<>
141129
{resizeHandles.mouseHandles.map((handleProps) => handleRender?.(handleProps) || <div {...handleProps} />)}
130+
{SSR_SUPPORT_ENABLED && space.ssrStyle ? (
131+
<style id={`style_${space.id}_ssr`}>{space.ssrStyle}</style>
132+
) : (
133+
<style id={`style_${space.id}_ssr`} />
134+
)}
142135
{React.createElement(
143136
props.as || "div",
144137
outerProps,
145138
<>
146-
{SSR_SUPPORT_ENABLED && space.ssrStyle && (
147-
<style className="ssr" data-id={space.id}>
148-
{space.ssrStyle}
149-
</style>
150-
)}
151139
<div className={innerClasses.join(" ")} style={innerStyle}>
152140
<ParentContext.Provider value={space.id}>
153141
<LayerContext.Provider value={undefined}>

‎src/components/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ export * from "./Layer";
1010
export * from "./Positioned";
1111
export * from "./SpaceInfo";
1212
export * from "./ViewPort";
13+
export * from "./SSR";
1314
export * from "./Options";

‎src/core-react.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,6 @@ export function useCurrentSpace() {
290290
}
291291

292292
export let SSR_SUPPORT_ENABLED = false;
293-
294293
export function enabledSsrSupport() {
295294
SSR_SUPPORT_ENABLED = true;
296295
}

‎src/core-utils.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -397,7 +397,6 @@ export function updateStyleDefinition(space: ISpaceDefinition) {
397397
const definition = styleDefinition(space);
398398
if (!isServer()) {
399399
const existing = document.getElementById(`style_${space.id}`);
400-
401400
if (existing) {
402401
if (existing.innerHTML !== definition) {
403402
existing.innerHTML = definition;
@@ -408,6 +407,8 @@ export function updateStyleDefinition(space: ISpaceDefinition) {
408407
newStyle.innerHTML = definition;
409408
document.head.appendChild(newStyle);
410409
}
410+
} else {
411+
space.ssrStyle = definition;
411412
}
412413
}
413414

0 commit comments

Comments
 (0)