@builder.io/sdk-react 0.1.7 → 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 (9) hide show
  1. package/dist/react/components/render-block/block-styles.js +12 -1
  2. package/dist/react/components/render-block/render-block.js +12 -2
  3. package/dist/rsc/components/render-block/block-styles.js +12 -1
  4. package/dist/rsc/components/render-block/render-block.js +12 -2
  5. package/package.json +2 -4
  6. package/packages/react/src/components/render-block/block-styles.jsx +13 -1
  7. package/packages/react/src/components/render-block/render-block.jsx +56 -41
  8. package/packages/rsc/src/components/render-block/block-styles.jsx +12 -1
  9. package/packages/rsc/src/components/render-block/render-block.jsx +62 -45
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.");
@@ -126,7 +136,7 @@ export default function RenderBlock(props) {
126
136
  };
127
137
  }
128
138
  const TagRef = tag();
129
- 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,
130
140
  isEmptyHtmlElement(tag()) ? (React.createElement(React.Fragment, null,
131
141
  React.createElement(TagRef, { ...attributes(), ...actions() }))) : null,
132
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,
@@ -134,5 +144,5 @@ export default function RenderBlock(props) {
134
144
  React.createElement(TagRef, { ...attributes(), ...actions() },
135
145
  React.createElement(RenderComponent, { ...renderComponentProps() }),
136
146
  childrenWithoutParentComponent()?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))),
137
- 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));
138
148
  }
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.");
@@ -130,7 +140,7 @@ export default function RenderBlock(props) {
130
140
  },
131
141
  };
132
142
  const TagRef = state.tag;
133
- 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,
134
144
  isEmptyHtmlElement(state.tag) ? (React.createElement(React.Fragment, null,
135
145
  React.createElement(TagRef, { ...state.attributes, ...state.actions }))) : null,
136
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,
@@ -138,5 +148,5 @@ export default function RenderBlock(props) {
138
148
  React.createElement(TagRef, { ...state.attributes, ...state.actions },
139
149
  React.createElement(RenderComponent, { ...state.renderComponentProps, _context: _context }),
140
150
  state.childrenWithoutParentComponent?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: state.childrenContext, _context: _context }))),
141
- 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));
142
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.7",
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/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(
@@ -154,51 +165,55 @@ export default function RenderBlock(props) {
154
165
 
155
166
  return (
156
167
  <>
157
- {!component?.noWrap ? (
168
+ {canShowBlock() ? (
158
169
  <>
159
- {isEmptyHtmlElement(tag()) ? (
160
- <>
161
- <TagRef {...attributes()} {...actions()} />
162
- </>
163
- ) : null}
164
- {!isEmptyHtmlElement(tag()) && repeatItemData ? (
165
- <>
166
- {repeatItemData?.map((data, index) => (
167
- <RenderRepeatedBlock
168
- key={index}
169
- repeatContext={data.context}
170
- block={data.block}
171
- />
172
- ))}
173
- </>
174
- ) : null}
175
- {!isEmptyHtmlElement(tag()) && !repeatItemData ? (
170
+ {!component?.noWrap ? (
176
171
  <>
177
- <TagRef {...attributes()} {...actions()}>
178
- <RenderComponent {...renderComponentProps()} />
179
-
180
- {childrenWithoutParentComponent()?.map((child) => (
181
- <RenderBlock
182
- key={"render-block-" + child.id}
183
- block={child}
184
- context={childrenContext()}
185
- />
186
- ))}
187
-
188
- {childrenWithoutParentComponent()?.map((child) => (
189
- <BlockStyles
190
- key={"block-style-" + child.id}
191
- block={child}
192
- context={childrenContext()}
193
- />
194
- ))}
195
- </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}
196
211
  </>
197
- ) : null}
212
+ ) : (
213
+ <RenderComponent {...renderComponentProps()} />
214
+ )}
198
215
  </>
199
- ) : (
200
- <RenderComponent {...renderComponentProps()} />
201
- )}
216
+ ) : null}
202
217
  </>
203
218
  );
204
219
  }
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(
@@ -146,57 +156,64 @@ export default function RenderBlock(props) {
146
156
 
147
157
  return (
148
158
  <>
149
- {!state.component?.noWrap ? (
159
+ {state.canShowBlock ? (
150
160
  <>
151
- {isEmptyHtmlElement(state.tag) ? (
152
- <>
153
- <TagRef {...state.attributes} {...state.actions} />
154
- </>
155
- ) : null}
156
- {!isEmptyHtmlElement(state.tag) && state.repeatItemData ? (
157
- <>
158
- {state.repeatItemData?.map((data, index) => (
159
- <RenderRepeatedBlock
160
- key={index}
161
- repeatContext={data.context}
162
- block={data.block}
163
- _context={_context}
164
- />
165
- ))}
166
- </>
167
- ) : null}
168
- {!isEmptyHtmlElement(state.tag) && !state.repeatItemData ? (
161
+ {!state.component?.noWrap ? (
169
162
  <>
170
- <TagRef {...state.attributes} {...state.actions}>
171
- <RenderComponent
172
- {...state.renderComponentProps}
173
- _context={_context}
174
- />
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
+ />
175
187
 
176
- {state.childrenWithoutParentComponent?.map((child) => (
177
- <RenderBlock
178
- key={"render-block-" + child.id}
179
- block={child}
180
- context={state.childrenContext}
181
- _context={_context}
182
- />
183
- ))}
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
+ ))}
184
196
 
185
- {state.childrenWithoutParentComponent?.map((child) => (
186
- <BlockStyles
187
- key={"block-style-" + child.id}
188
- block={child}
189
- context={state.childrenContext}
190
- _context={_context}
191
- />
192
- ))}
193
- </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}
194
208
  </>
195
- ) : null}
209
+ ) : (
210
+ <RenderComponent
211
+ {...state.renderComponentProps}
212
+ _context={_context}
213
+ />
214
+ )}
196
215
  </>
197
- ) : (
198
- <RenderComponent {...state.renderComponentProps} _context={_context} />
199
- )}
216
+ ) : null}
200
217
  </>
201
218
  );
202
219
  }