@builder.io/sdk-react 0.1.6 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/react/blocks/columns/columns.js +8 -5
  2. package/dist/react/components/render-block/block-styles.js +12 -1
  3. package/dist/react/components/render-block/render-block.js +12 -3
  4. package/dist/rsc/blocks/columns/columns.js +7 -5
  5. package/dist/rsc/components/render-block/block-styles.js +12 -1
  6. package/dist/rsc/components/render-block/render-block.js +12 -3
  7. package/package.json +2 -4
  8. package/packages/react/src/blocks/columns/columns.jsx +9 -5
  9. package/packages/react/src/components/render-block/block-styles.jsx +13 -1
  10. package/packages/react/src/components/render-block/render-block.jsx +56 -42
  11. package/packages/rsc/src/blocks/columns/columns.jsx +8 -5
  12. package/packages/rsc/src/components/render-block/block-styles.jsx +12 -1
  13. package/packages/rsc/src/components/render-block/render-block.jsx +62 -46
package/dist/react/blocks/columns/columns.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import * as React from "react";
2
+ import { useContext } from "react";
2
3
  import RenderBlocks from "../../components/render-blocks";
3
4
  import { getSizesForBreakpoints } from "../../constants/device-sizes";
4
5
  import RenderInlinedStyles from "../../components/render-inlined-styles";
5
6
  import { TARGET } from "../../constants/target.js";
6
7
  import { convertStyleMapToCSS } from "../../helpers/css";
8
+ import BuilderContext from "../../context/builder.context.js";
7
9
  export default function Columns(props) {
8
10
  function getGutterSize() {
9
11
  return typeof props.space === "number" ? props.space || 0 : 20;
@@ -47,7 +49,7 @@ export default function Columns(props) {
47
49
  };
48
50
  }
49
51
  function getWidthForBreakpointSize(size) {
50
- const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
52
+ const breakpointSizes = getSizesForBreakpoints(builderContext.content?.meta?.breakpoints || {});
51
53
  return breakpointSizes[size].max;
52
54
  }
53
55
  function columnStyleObjects() {
@@ -103,15 +105,16 @@ export default function Columns(props) {
103
105
  function reactNativeColumnStyles() {
104
106
  return columnStyleObjects.column.small;
105
107
  }
108
+ const builderContext = useContext(BuilderContext);
106
109
  return (React.createElement(React.Fragment, null,
107
110
  React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
108
- " div-46a0fd84", style: {
111
+ " div-0a8a143e", style: {
109
112
  ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
110
113
  ...columnsCssVars(),
111
114
  } },
112
115
  TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
113
116
  React.createElement(RenderInlinedStyles, { styles: columnsStyles() }))) : null,
114
- props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-46a0fd84-2", style: {
117
+ props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-0a8a143e-2", style: {
115
118
  width: getColumnCssWidth(index),
116
119
  marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
117
120
  ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
@@ -120,10 +123,10 @@ export default function Columns(props) {
120
123
  React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
121
124
  flexGrow: "1",
122
125
  } }))))),
123
- React.createElement("style", null, `.div-46a0fd84 {
126
+ React.createElement("style", null, `.div-0a8a143e {
124
127
  display: flex;
125
128
  line-height: normal;
126
- }.div-46a0fd84-2 {
129
+ }.div-0a8a143e-2 {
127
130
  display: flex;
128
131
  flex-direction: column;
129
132
  align-items: stretch;
package/dist/react/components/render-block/block-styles.js CHANGED
@@ -3,6 +3,7 @@ import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../constant
3
3
  import { TARGET } from "../../constants/target.js";
4
4
  import { getProcessedBlock } from "../../functions/get-processed-block.js";
5
5
  import { createCssClass } from "../../helpers/css.js";
6
+ import { checkIsDefined } from "../../helpers/nullable.js";
6
7
  import RenderInlinedStyles from "../render-inlined-styles";
7
8
  export default function BlockStyles(props) {
8
9
  function useBlock() {
@@ -13,6 +14,16 @@ export default function BlockStyles(props) {
13
14
  shouldEvaluateBindings: true,
14
15
  });
15
16
  }
17
+ function canShowBlock() {
18
+ // only render styles for blocks that are visible
19
+ if (checkIsDefined(useBlock().hide)) {
20
+ return !useBlock().hide;
21
+ }
22
+ if (checkIsDefined(useBlock().show)) {
23
+ return useBlock().show;
24
+ }
25
+ return true;
26
+ }
16
27
  function css() {
17
28
  const styles = useBlock().responsiveStyles;
18
29
  const content = props.context.content;
@@ -43,6 +54,6 @@ export default function BlockStyles(props) {
43
54
  : "";
44
55
  return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
45
56
  }
46
- return (React.createElement(React.Fragment, null, TARGET !== "reactNative" && css() ? (React.createElement(React.Fragment, null,
57
+ return (React.createElement(React.Fragment, null, TARGET !== "reactNative" && css() && canShowBlock() ? (React.createElement(React.Fragment, null,
47
58
  React.createElement(RenderInlinedStyles, { styles: css() }))) : null));
48
59
  }
package/dist/react/components/render-block/render-block.js CHANGED
@@ -12,6 +12,7 @@ import { TARGET } from "../../constants/target.js";
12
12
  import { extractTextStyles } from "../../functions/extract-text-styles.js";
13
13
  import RenderComponent from "./render-component";
14
14
  import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
15
+ import { checkIsDefined } from "../../helpers/nullable.js";
15
16
  export default function RenderBlock(props) {
16
17
  const [component, setComponent] = useState(() => getComponent({
17
18
  block: props.block,
@@ -30,6 +31,15 @@ export default function RenderBlock(props) {
30
31
  shouldEvaluateBindings: true,
31
32
  });
32
33
  }
34
+ function canShowBlock() {
35
+ if (checkIsDefined(useBlock().hide)) {
36
+ return !useBlock().hide;
37
+ }
38
+ if (checkIsDefined(useBlock().show)) {
39
+ return useBlock().show;
40
+ }
41
+ return true;
42
+ }
33
43
  function proxyState() {
34
44
  if (typeof Proxy === "undefined") {
35
45
  console.error("no Proxy available in this environment, cannot proxy state.");
@@ -86,7 +96,6 @@ export default function RenderBlock(props) {
86
96
  ...actions(),
87
97
  },
88
98
  }),
89
- customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
90
99
  },
91
100
  context: childrenContext(),
92
101
  };
@@ -127,7 +136,7 @@ export default function RenderBlock(props) {
127
136
  };
128
137
  }
129
138
  const TagRef = tag();
130
- return (React.createElement(React.Fragment, null, !component?.noWrap ? (React.createElement(React.Fragment, null,
139
+ return (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !component?.noWrap ? (React.createElement(React.Fragment, null,
131
140
  isEmptyHtmlElement(tag()) ? (React.createElement(React.Fragment, null,
132
141
  React.createElement(TagRef, { ...attributes(), ...actions() }))) : null,
133
142
  !isEmptyHtmlElement(tag()) && repeatItemData ? (React.createElement(React.Fragment, null, repeatItemData?.map((data, index) => (React.createElement(RenderRepeatedBlock, { key: index, repeatContext: data.context, block: data.block }))))) : null,
@@ -135,5 +144,5 @@ export default function RenderBlock(props) {
135
144
  React.createElement(TagRef, { ...attributes(), ...actions() },
136
145
  React.createElement(RenderComponent, { ...renderComponentProps() }),
137
146
  childrenWithoutParentComponent()?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))),
138
- childrenWithoutParentComponent()?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(RenderComponent, { ...renderComponentProps() }))));
147
+ childrenWithoutParentComponent()?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(RenderComponent, { ...renderComponentProps() })))) : null));
139
148
  }
package/dist/rsc/blocks/columns/columns.js CHANGED
@@ -4,6 +4,7 @@ import { getSizesForBreakpoints } from "../../constants/device-sizes";
4
4
  import RenderInlinedStyles from "../../components/render-inlined-styles";
5
5
  import { TARGET } from "../../constants/target.js";
6
6
  import { convertStyleMapToCSS } from "../../helpers/css";
7
+ import BuilderContext from "../../context/builder.context.js";
7
8
  export default function Columns(props) {
8
9
  const _context = { ...props["_context"] };
9
10
  const state = {
@@ -49,7 +50,7 @@ export default function Columns(props) {
49
50
  };
50
51
  },
51
52
  getWidthForBreakpointSize(size) {
52
- const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
53
+ const breakpointSizes = getSizesForBreakpoints(builderContext.content?.meta?.breakpoints || {});
53
54
  return breakpointSizes[size].max;
54
55
  },
55
56
  get columnStyleObjects() {
@@ -106,15 +107,16 @@ export default function Columns(props) {
106
107
  return this.columnStyleObjects.column.small;
107
108
  },
108
109
  };
110
+ const builderContext = _context["BuilderContext"];
109
111
  return (React.createElement(React.Fragment, null,
110
112
  React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
111
- " div-ca644030", style: {
113
+ " div-fbdb9b00", style: {
112
114
  ...(TARGET === "reactNative" ? state.reactNativeColumnsStyles : {}),
113
115
  ...state.columnsCssVars,
114
116
  } },
115
117
  TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
116
118
  React.createElement(RenderInlinedStyles, { styles: state.columnsStyles, _context: _context }))) : null,
117
- props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-ca644030-2", style: {
119
+ props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-fbdb9b00-2", style: {
118
120
  width: state.getColumnCssWidth(index),
119
121
  marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
120
122
  ...(TARGET === "reactNative"
@@ -125,10 +127,10 @@ export default function Columns(props) {
125
127
  React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
126
128
  flexGrow: "1",
127
129
  }, _context: _context }))))),
128
- React.createElement("style", null, `.div-ca644030 {
130
+ React.createElement("style", null, `.div-fbdb9b00 {
129
131
  display: flex;
130
132
  line-height: normal;
131
- }.div-ca644030-2 {
133
+ }.div-fbdb9b00-2 {
132
134
  display: flex;
133
135
  flex-direction: column;
134
136
  align-items: stretch;
package/dist/rsc/components/render-block/block-styles.js CHANGED
@@ -3,6 +3,7 @@ import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../constant
3
3
  import { TARGET } from "../../constants/target.js";
4
4
  import { getProcessedBlock } from "../../functions/get-processed-block.js";
5
5
  import { createCssClass } from "../../helpers/css.js";
6
+ import { checkIsDefined } from "../../helpers/nullable.js";
6
7
  import RenderInlinedStyles from "../render-inlined-styles";
7
8
  export default function BlockStyles(props) {
8
9
  const _context = { ...props["_context"] };
@@ -15,6 +16,16 @@ export default function BlockStyles(props) {
15
16
  shouldEvaluateBindings: true,
16
17
  });
17
18
  },
19
+ get canShowBlock() {
20
+ // only render styles for blocks that are visible
21
+ if (checkIsDefined(state.useBlock.hide)) {
22
+ return !state.useBlock.hide;
23
+ }
24
+ if (checkIsDefined(state.useBlock.show)) {
25
+ return state.useBlock.show;
26
+ }
27
+ return true;
28
+ },
18
29
  get css() {
19
30
  const styles = state.useBlock.responsiveStyles;
20
31
  const content = props.context.content;
@@ -46,6 +57,6 @@ export default function BlockStyles(props) {
46
57
  return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
47
58
  },
48
59
  };
49
- return (React.createElement(React.Fragment, null, TARGET !== "reactNative" && state.css ? (React.createElement(React.Fragment, null,
60
+ return (React.createElement(React.Fragment, null, TARGET !== "reactNative" && state.css && state.canShowBlock ? (React.createElement(React.Fragment, null,
50
61
  React.createElement(RenderInlinedStyles, { styles: state.css, _context: _context }))) : null));
51
62
  }
package/dist/rsc/components/render-block/render-block.js CHANGED
@@ -11,6 +11,7 @@ import { TARGET } from "../../constants/target.js";
11
11
  import { extractTextStyles } from "../../functions/extract-text-styles.js";
12
12
  import RenderComponent from "./render-component";
13
13
  import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
14
+ import { checkIsDefined } from "../../helpers/nullable.js";
14
15
  export default function RenderBlock(props) {
15
16
  const _context = { ...props["_context"] };
16
17
  const state = {
@@ -31,6 +32,15 @@ export default function RenderBlock(props) {
31
32
  shouldEvaluateBindings: true,
32
33
  });
33
34
  },
35
+ get canShowBlock() {
36
+ if (checkIsDefined(state.useBlock.hide)) {
37
+ return !state.useBlock.hide;
38
+ }
39
+ if (checkIsDefined(state.useBlock.show)) {
40
+ return state.useBlock.show;
41
+ }
42
+ return true;
43
+ },
34
44
  get proxyState() {
35
45
  if (typeof Proxy === "undefined") {
36
46
  console.error("no Proxy available in this environment, cannot proxy state.");
@@ -87,7 +97,6 @@ export default function RenderBlock(props) {
87
97
  ...state.actions,
88
98
  },
89
99
  }),
90
- customBreakpoints: state.childrenContext?.content?.meta?.breakpoints,
91
100
  },
92
101
  context: state.childrenContext,
93
102
  };
@@ -131,7 +140,7 @@ export default function RenderBlock(props) {
131
140
  },
132
141
  };
133
142
  const TagRef = state.tag;
134
- return (React.createElement(React.Fragment, null, !state.component?.noWrap ? (React.createElement(React.Fragment, null,
143
+ return (React.createElement(React.Fragment, null, state.canShowBlock ? (React.createElement(React.Fragment, null, !state.component?.noWrap ? (React.createElement(React.Fragment, null,
135
144
  isEmptyHtmlElement(state.tag) ? (React.createElement(React.Fragment, null,
136
145
  React.createElement(TagRef, { ...state.attributes, ...state.actions }))) : null,
137
146
  !isEmptyHtmlElement(state.tag) && state.repeatItemData ? (React.createElement(React.Fragment, null, state.repeatItemData?.map((data, index) => (React.createElement(RenderRepeatedBlock, { key: index, repeatContext: data.context, block: data.block, _context: _context }))))) : null,
@@ -139,5 +148,5 @@ export default function RenderBlock(props) {
139
148
  React.createElement(TagRef, { ...state.attributes, ...state.actions },
140
149
  React.createElement(RenderComponent, { ...state.renderComponentProps, _context: _context }),
141
150
  state.childrenWithoutParentComponent?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: state.childrenContext, _context: _context }))),
142
- state.childrenWithoutParentComponent?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: state.childrenContext, _context: _context })))))) : null)) : (React.createElement(RenderComponent, { ...state.renderComponentProps, _context: _context }))));
151
+ state.childrenWithoutParentComponent?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: state.childrenContext, _context: _context })))))) : null)) : (React.createElement(RenderComponent, { ...state.renderComponentProps, _context: _context })))) : null));
143
152
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@builder.io/sdk-react",
3
3
  "description": "Builder.io SDK for React",
4
- "version": "0.1.6",
4
+ "version": "0.1.8",
5
5
  "main": "src/index.js",
6
6
  "type": "module",
7
7
  "exports": {
@@ -26,9 +26,7 @@
26
26
  "react": "^18.2.0"
27
27
  },
28
28
  "devDependencies": {
29
- "react": "^18.2.0"
30
- },
31
- "dependencies": {
29
+ "react": "^18.2.0",
32
30
  "typescript": "^4.9.4"
33
31
  }
34
32
  }
package/packages/react/src/blocks/columns/columns.jsx CHANGED
@@ -1,9 +1,11 @@
1
1
  import * as React from "react";
2
+ import { useContext } from "react";
2
3
  import RenderBlocks from "../../components/render-blocks";
3
4
  import { getSizesForBreakpoints } from "../../constants/device-sizes";
4
5
  import RenderInlinedStyles from "../../components/render-inlined-styles";
5
6
  import { TARGET } from "../../constants/target.js";
6
7
  import { convertStyleMapToCSS } from "../../helpers/css";
8
+ import BuilderContext from "../../context/builder.context.js";
7
9
 
8
10
  export default function Columns(props) {
9
11
  function getGutterSize() {
@@ -57,7 +59,7 @@ export default function Columns(props) {
57
59
 
58
60
  function getWidthForBreakpointSize(size) {
59
61
  const breakpointSizes = getSizesForBreakpoints(
60
- props.customBreakpoints || {}
62
+ builderContext.content?.meta?.breakpoints || {}
61
63
  );
62
64
  return breakpointSizes[size].max;
63
65
  }
@@ -119,12 +121,14 @@ export default function Columns(props) {
119
121
  return columnStyleObjects.column.small;
120
122
  }
121
123
 
124
+ const builderContext = useContext(BuilderContext);
125
+
122
126
  return (
123
127
  <>
124
128
  <div
125
129
  className={
126
130
  `builder-columns ${props.builderBlock.id}-breakpoints` +
127
- " div-46a0fd84"
131
+ " div-0a8a143e"
128
132
  }
129
133
  style={{
130
134
  ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
@@ -139,7 +143,7 @@ export default function Columns(props) {
139
143
 
140
144
  {props.columns?.map((column, index) => (
141
145
  <div
142
- className="builder-column div-46a0fd84-2"
146
+ className="builder-column div-0a8a143e-2"
143
147
  style={{
144
148
  width: getColumnCssWidth(index),
145
149
  marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
@@ -159,10 +163,10 @@ export default function Columns(props) {
159
163
  </div>
160
164
  ))}
161
165
  </div>
162
- <style>{`.div-46a0fd84 {
166
+ <style>{`.div-0a8a143e {
163
167
  display: flex;
164
168
  line-height: normal;
165
- }.div-46a0fd84-2 {
169
+ }.div-0a8a143e-2 {
166
170
  display: flex;
167
171
  flex-direction: column;
168
172
  align-items: stretch;
package/packages/react/src/components/render-block/block-styles.jsx CHANGED
@@ -6,6 +6,7 @@ import {
6
6
  import { TARGET } from "../../constants/target.js";
7
7
  import { getProcessedBlock } from "../../functions/get-processed-block.js";
8
8
  import { createCssClass } from "../../helpers/css.js";
9
+ import { checkIsDefined } from "../../helpers/nullable.js";
9
10
  import RenderInlinedStyles from "../render-inlined-styles";
10
11
 
11
12
  export default function BlockStyles(props) {
@@ -18,6 +19,17 @@ export default function BlockStyles(props) {
18
19
  });
19
20
  }
20
21
 
22
+ function canShowBlock() {
23
+ // only render styles for blocks that are visible
24
+ if (checkIsDefined(useBlock().hide)) {
25
+ return !useBlock().hide;
26
+ }
27
+ if (checkIsDefined(useBlock().show)) {
28
+ return useBlock().show;
29
+ }
30
+ return true;
31
+ }
32
+
21
33
  function css() {
22
34
  const styles = useBlock().responsiveStyles;
23
35
  const content = props.context.content;
@@ -59,7 +71,7 @@ export default function BlockStyles(props) {
59
71
 
60
72
  return (
61
73
  <>
62
- {TARGET !== "reactNative" && css() ? (
74
+ {TARGET !== "reactNative" && css() && canShowBlock() ? (
63
75
  <>
64
76
  <RenderInlinedStyles styles={css()} />
65
77
  </>
package/packages/react/src/components/render-block/render-block.jsx CHANGED
@@ -16,6 +16,7 @@ import { TARGET } from "../../constants/target.js";
16
16
  import { extractTextStyles } from "../../functions/extract-text-styles.js";
17
17
  import RenderComponent from "./render-component";
18
18
  import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
19
+ import { checkIsDefined } from "../../helpers/nullable.js";
19
20
 
20
21
  export default function RenderBlock(props) {
21
22
  const [component, setComponent] = useState(() =>
@@ -40,6 +41,16 @@ export default function RenderBlock(props) {
40
41
  });
41
42
  }
42
43
 
44
+ function canShowBlock() {
45
+ if (checkIsDefined(useBlock().hide)) {
46
+ return !useBlock().hide;
47
+ }
48
+ if (checkIsDefined(useBlock().show)) {
49
+ return useBlock().show;
50
+ }
51
+ return true;
52
+ }
53
+
43
54
  function proxyState() {
44
55
  if (typeof Proxy === "undefined") {
45
56
  console.error(
@@ -102,7 +113,6 @@ export default function RenderBlock(props) {
102
113
  ...actions(),
103
114
  },
104
115
  }),
105
- customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
106
116
  },
107
117
  context: childrenContext(),
108
118
  };
@@ -155,51 +165,55 @@ export default function RenderBlock(props) {
155
165
 
156
166
  return (
157
167
  <>
158
- {!component?.noWrap ? (
168
+ {canShowBlock() ? (
159
169
  <>
160
- {isEmptyHtmlElement(tag()) ? (
161
- <>
162
- <TagRef {...attributes()} {...actions()} />
163
- </>
164
- ) : null}
165
- {!isEmptyHtmlElement(tag()) && repeatItemData ? (
166
- <>
167
- {repeatItemData?.map((data, index) => (
168
- <RenderRepeatedBlock
169
- key={index}
170
- repeatContext={data.context}
171
- block={data.block}
172
- />
173
- ))}
174
- </>
175
- ) : null}
176
- {!isEmptyHtmlElement(tag()) && !repeatItemData ? (
170
+ {!component?.noWrap ? (
177
171
  <>
178
- <TagRef {...attributes()} {...actions()}>
179
- <RenderComponent {...renderComponentProps()} />
180
-
181
- {childrenWithoutParentComponent()?.map((child) => (
182
- <RenderBlock
183
- key={"render-block-" + child.id}
184
- block={child}
185
- context={childrenContext()}
186
- />
187
- ))}
188
-
189
- {childrenWithoutParentComponent()?.map((child) => (
190
- <BlockStyles
191
- key={"block-style-" + child.id}
192
- block={child}
193
- context={childrenContext()}
194
- />
195
- ))}
196
- </TagRef>
172
+ {isEmptyHtmlElement(tag()) ? (
173
+ <>
174
+ <TagRef {...attributes()} {...actions()} />
175
+ </>
176
+ ) : null}
177
+ {!isEmptyHtmlElement(tag()) && repeatItemData ? (
178
+ <>
179
+ {repeatItemData?.map((data, index) => (
180
+ <RenderRepeatedBlock
181
+ key={index}
182
+ repeatContext={data.context}
183
+ block={data.block}
184
+ />
185
+ ))}
186
+ </>
187
+ ) : null}
188
+ {!isEmptyHtmlElement(tag()) && !repeatItemData ? (
189
+ <>
190
+ <TagRef {...attributes()} {...actions()}>
191
+ <RenderComponent {...renderComponentProps()} />
192
+
193
+ {childrenWithoutParentComponent()?.map((child) => (
194
+ <RenderBlock
195
+ key={"render-block-" + child.id}
196
+ block={child}
197
+ context={childrenContext()}
198
+ />
199
+ ))}
200
+
201
+ {childrenWithoutParentComponent()?.map((child) => (
202
+ <BlockStyles
203
+ key={"block-style-" + child.id}
204
+ block={child}
205
+ context={childrenContext()}
206
+ />
207
+ ))}
208
+ </TagRef>
209
+ </>
210
+ ) : null}
197
211
  </>
198
- ) : null}
212
+ ) : (
213
+ <RenderComponent {...renderComponentProps()} />
214
+ )}
199
215
  </>
200
- ) : (
201
- <RenderComponent {...renderComponentProps()} />
202
- )}
216
+ ) : null}
203
217
  </>
204
218
  );
205
219
  }
package/packages/rsc/src/blocks/columns/columns.jsx CHANGED
@@ -4,6 +4,7 @@ import { getSizesForBreakpoints } from "../../constants/device-sizes";
4
4
  import RenderInlinedStyles from "../../components/render-inlined-styles";
5
5
  import { TARGET } from "../../constants/target.js";
6
6
  import { convertStyleMapToCSS } from "../../helpers/css";
7
+ import BuilderContext from "../../context/builder.context.js";
7
8
 
8
9
  export default function Columns(props) {
9
10
  const _context = { ...props["_context"] };
@@ -54,7 +55,7 @@ export default function Columns(props) {
54
55
  },
55
56
  getWidthForBreakpointSize(size) {
56
57
  const breakpointSizes = getSizesForBreakpoints(
57
- props.customBreakpoints || {}
58
+ builderContext.content?.meta?.breakpoints || {}
58
59
  );
59
60
  return breakpointSizes[size].max;
60
61
  },
@@ -113,12 +114,14 @@ export default function Columns(props) {
113
114
  },
114
115
  };
115
116
 
117
+ const builderContext = _context["BuilderContext"];
118
+
116
119
  return (
117
120
  <>
118
121
  <div
119
122
  className={
120
123
  `builder-columns ${props.builderBlock.id}-breakpoints` +
121
- " div-ca644030"
124
+ " div-fbdb9b00"
122
125
  }
123
126
  style={{
124
127
  ...(TARGET === "reactNative" ? state.reactNativeColumnsStyles : {}),
@@ -136,7 +139,7 @@ export default function Columns(props) {
136
139
 
137
140
  {props.columns?.map((column, index) => (
138
141
  <div
139
- className="builder-column div-ca644030-2"
142
+ className="builder-column div-fbdb9b00-2"
140
143
  style={{
141
144
  width: state.getColumnCssWidth(index),
142
145
  marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
@@ -159,10 +162,10 @@ export default function Columns(props) {
159
162
  </div>
160
163
  ))}
161
164
  </div>
162
- <style>{`.div-ca644030 {
165
+ <style>{`.div-fbdb9b00 {
163
166
  display: flex;
164
167
  line-height: normal;
165
- }.div-ca644030-2 {
168
+ }.div-fbdb9b00-2 {
166
169
  display: flex;
167
170
  flex-direction: column;
168
171
  align-items: stretch;
package/packages/rsc/src/components/render-block/block-styles.jsx CHANGED
@@ -6,6 +6,7 @@ import {
6
6
  import { TARGET } from "../../constants/target.js";
7
7
  import { getProcessedBlock } from "../../functions/get-processed-block.js";
8
8
  import { createCssClass } from "../../helpers/css.js";
9
+ import { checkIsDefined } from "../../helpers/nullable.js";
9
10
  import RenderInlinedStyles from "../render-inlined-styles";
10
11
 
11
12
  export default function BlockStyles(props) {
@@ -20,6 +21,16 @@ export default function BlockStyles(props) {
20
21
  shouldEvaluateBindings: true,
21
22
  });
22
23
  },
24
+ get canShowBlock() {
25
+ // only render styles for blocks that are visible
26
+ if (checkIsDefined(state.useBlock.hide)) {
27
+ return !state.useBlock.hide;
28
+ }
29
+ if (checkIsDefined(state.useBlock.show)) {
30
+ return state.useBlock.show;
31
+ }
32
+ return true;
33
+ },
23
34
  get css() {
24
35
  const styles = state.useBlock.responsiveStyles;
25
36
  const content = props.context.content;
@@ -62,7 +73,7 @@ export default function BlockStyles(props) {
62
73
 
63
74
  return (
64
75
  <>
65
- {TARGET !== "reactNative" && state.css ? (
76
+ {TARGET !== "reactNative" && state.css && state.canShowBlock ? (
66
77
  <>
67
78
  <RenderInlinedStyles styles={state.css} _context={_context} />
68
79
  </>
package/packages/rsc/src/components/render-block/render-block.jsx CHANGED
@@ -15,6 +15,7 @@ import { TARGET } from "../../constants/target.js";
15
15
  import { extractTextStyles } from "../../functions/extract-text-styles.js";
16
16
  import RenderComponent from "./render-component";
17
17
  import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
18
+ import { checkIsDefined } from "../../helpers/nullable.js";
18
19
 
19
20
  export default function RenderBlock(props) {
20
21
  const _context = { ...props["_context"] };
@@ -37,6 +38,15 @@ export default function RenderBlock(props) {
37
38
  shouldEvaluateBindings: true,
38
39
  });
39
40
  },
41
+ get canShowBlock() {
42
+ if (checkIsDefined(state.useBlock.hide)) {
43
+ return !state.useBlock.hide;
44
+ }
45
+ if (checkIsDefined(state.useBlock.show)) {
46
+ return state.useBlock.show;
47
+ }
48
+ return true;
49
+ },
40
50
  get proxyState() {
41
51
  if (typeof Proxy === "undefined") {
42
52
  console.error(
@@ -96,7 +106,6 @@ export default function RenderBlock(props) {
96
106
  ...state.actions,
97
107
  },
98
108
  }),
99
- customBreakpoints: state.childrenContext?.content?.meta?.breakpoints,
100
109
  },
101
110
  context: state.childrenContext,
102
111
  };
@@ -147,57 +156,64 @@ export default function RenderBlock(props) {
147
156
 
148
157
  return (
149
158
  <>
150
- {!state.component?.noWrap ? (
159
+ {state.canShowBlock ? (
151
160
  <>
152
- {isEmptyHtmlElement(state.tag) ? (
153
- <>
154
- <TagRef {...state.attributes} {...state.actions} />
155
- </>
156
- ) : null}
157
- {!isEmptyHtmlElement(state.tag) && state.repeatItemData ? (
158
- <>
159
- {state.repeatItemData?.map((data, index) => (
160
- <RenderRepeatedBlock
161
- key={index}
162
- repeatContext={data.context}
163
- block={data.block}
164
- _context={_context}
165
- />
166
- ))}
167
- </>
168
- ) : null}
169
- {!isEmptyHtmlElement(state.tag) && !state.repeatItemData ? (
161
+ {!state.component?.noWrap ? (
170
162
  <>
171
- <TagRef {...state.attributes} {...state.actions}>
172
- <RenderComponent
173
- {...state.renderComponentProps}
174
- _context={_context}
175
- />
163
+ {isEmptyHtmlElement(state.tag) ? (
164
+ <>
165
+ <TagRef {...state.attributes} {...state.actions} />
166
+ </>
167
+ ) : null}
168
+ {!isEmptyHtmlElement(state.tag) && state.repeatItemData ? (
169
+ <>
170
+ {state.repeatItemData?.map((data, index) => (
171
+ <RenderRepeatedBlock
172
+ key={index}
173
+ repeatContext={data.context}
174
+ block={data.block}
175
+ _context={_context}
176
+ />
177
+ ))}
178
+ </>
179
+ ) : null}
180
+ {!isEmptyHtmlElement(state.tag) && !state.repeatItemData ? (
181
+ <>
182
+ <TagRef {...state.attributes} {...state.actions}>
183
+ <RenderComponent
184
+ {...state.renderComponentProps}
185
+ _context={_context}
186
+ />
176
187
 
177
- {state.childrenWithoutParentComponent?.map((child) => (
178
- <RenderBlock
179
- key={"render-block-" + child.id}
180
- block={child}
181
- context={state.childrenContext}
182
- _context={_context}
183
- />
184
- ))}
188
+ {state.childrenWithoutParentComponent?.map((child) => (
189
+ <RenderBlock
190
+ key={"render-block-" + child.id}
191
+ block={child}
192
+ context={state.childrenContext}
193
+ _context={_context}
194
+ />
195
+ ))}
185
196
 
186
- {state.childrenWithoutParentComponent?.map((child) => (
187
- <BlockStyles
188
- key={"block-style-" + child.id}
189
- block={child}
190
- context={state.childrenContext}
191
- _context={_context}
192
- />
193
- ))}
194
- </TagRef>
197
+ {state.childrenWithoutParentComponent?.map((child) => (
198
+ <BlockStyles
199
+ key={"block-style-" + child.id}
200
+ block={child}
201
+ context={state.childrenContext}
202
+ _context={_context}
203
+ />
204
+ ))}
205
+ </TagRef>
206
+ </>
207
+ ) : null}
195
208
  </>
196
- ) : null}
209
+ ) : (
210
+ <RenderComponent
211
+ {...state.renderComponentProps}
212
+ _context={_context}
213
+ />
214
+ )}
197
215
  </>
198
- ) : (
199
- <RenderComponent {...state.renderComponentProps} _context={_context} />
200
- )}
216
+ ) : null}
201
217
  </>
202
218
  );
203
219
  }