@builder.io/sdk-svelte 0.1.7 → 0.1.9

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 (11) hide show
  1. package/package/--package.json +1 -1
  2. package/package/CHANGELOG.md +12 -0
  3. package/package/blocks/section/section.svelte +2 -2
  4. package/package/components/render-block/block-styles.svelte +12 -1
  5. package/package/components/render-block/render-block.svelte +33 -21
  6. package/package/types/builder-block.d.ts +8 -0
  7. package/package.json +1 -1
  8. package/src/blocks/section/section.svelte +2 -2
  9. package/src/components/render-block/block-styles.svelte +12 -1
  10. package/src/components/render-block/render-block.svelte +33 -21
  11. package/src/types/builder-block.ts +10 -0
package/package/--package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@builder.io/sdk-svelte",
3
3
  "description": "Builder.io SDK for Svelte",
4
- "version": "0.1.6",
4
+ "version": "0.1.8",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "package",
package/package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ ### 0.1.9
2
+
3
+ - No changes.
4
+
5
+ ### 0.1.8
6
+
7
+ - Added support for "Show If" & "Hide If" dynamic bindings to elements.
8
+
9
+ ### 0.1.7
10
+
11
+ - No changes.
12
+
1
13
  ### 0.1.6
2
14
 
3
15
  - Types: removed redundant `builtIn` field in `customComponents` prop types
package/package/blocks/section/section.svelte CHANGED
@@ -45,9 +45,9 @@ function mitosis_styling(node, vars) {
45
45
  use:mitosis_styling={{
46
46
  width: "100%",
47
47
  alignSelf: "stretch",
48
- flexGrow: "1",
48
+ flexGrow: 1,
49
49
  boxSizing: "border-box",
50
- maxWidth: `${maxWidth && typeof maxWidth === "number" ? maxWidth : 1200}px`,
50
+ maxWidth: maxWidth || 1200,
51
51
  display: "flex",
52
52
  flexDirection: "column",
53
53
  alignItems: "stretch",
package/package/components/render-block/block-styles.svelte CHANGED
@@ -4,6 +4,7 @@
4
4
  import { TARGET } from "../../constants/target.js";
5
5
  import { getProcessedBlock } from "../../functions/get-processed-block.js";
6
6
  import { createCssClass } from "../../helpers/css.js";
7
+ import { checkIsDefined } from "../../helpers/nullable.js";
7
8
  import RenderInlinedStyles from "../render-inlined-styles.svelte";
8
9
  export let block;
9
10
  export let context;
@@ -15,6 +16,16 @@ $: useBlock = () => {
15
16
  shouldEvaluateBindings: true,
16
17
  });
17
18
  };
19
+ $: canShowBlock = () => {
20
+ // only render styles for blocks that are visible
21
+ if (checkIsDefined(useBlock().hide)) {
22
+ return !useBlock().hide;
23
+ }
24
+ if (checkIsDefined(useBlock().show)) {
25
+ return useBlock().show;
26
+ }
27
+ return true;
28
+ };
18
29
  $: css = () => {
19
30
  const styles = useBlock().responsiveStyles;
20
31
  const content = context.content;
@@ -47,6 +58,6 @@ $: css = () => {
47
58
  };
48
59
  </script>
49
60
 
50
- {#if TARGET !== "reactNative" && css()}
61
+ {#if TARGET !== "reactNative" && css() && canShowBlock()}
51
62
  <RenderInlinedStyles styles={css()} />
52
63
  {/if}
package/package/components/render-block/render-block.svelte 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.svelte";
14
14
  import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
15
+ import { checkIsDefined } from "../../helpers/nullable.js";
15
16
  const setAttrs = (node, attrs = {}) => {
16
17
  const attrKeys = Object.keys(attrs);
17
18
  const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
@@ -43,6 +44,15 @@ $: useBlock = () => {
43
44
  shouldEvaluateBindings: true,
44
45
  });
45
46
  };
47
+ $: canShowBlock = () => {
48
+ if (checkIsDefined(useBlock().hide)) {
49
+ return !useBlock().hide;
50
+ }
51
+ if (checkIsDefined(useBlock().show)) {
52
+ return useBlock().show;
53
+ }
54
+ return true;
55
+ };
46
56
  $: proxyState = () => {
47
57
  if (typeof Proxy === "undefined") {
48
58
  console.error("no Proxy available in this environment, cannot proxy state.");
@@ -144,30 +154,32 @@ let repeatItemData = getRepeatItemData({
144
154
  });
145
155
  </script>
146
156
 
147
- {#if !component?.noWrap}
148
- {#if isEmptyHtmlElement(tag())}
149
- <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
150
- {/if}
157
+ {#if canShowBlock()}
158
+ {#if !component?.noWrap}
159
+ {#if isEmptyHtmlElement(tag())}
160
+ <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
161
+ {/if}
151
162
 
152
- {#if !isEmptyHtmlElement(tag()) && repeatItemData}
153
- {#each repeatItemData as data, index (index)}
154
- <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
155
- {/each}
156
- {/if}
163
+ {#if !isEmptyHtmlElement(tag()) && repeatItemData}
164
+ {#each repeatItemData as data, index (index)}
165
+ <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
166
+ {/each}
167
+ {/if}
157
168
 
158
- {#if !isEmptyHtmlElement(tag()) && !repeatItemData}
159
- <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
160
- <RenderComponent {...renderComponentProps()} />
169
+ {#if !isEmptyHtmlElement(tag()) && !repeatItemData}
170
+ <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
171
+ <RenderComponent {...renderComponentProps()} />
161
172
 
162
- {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
163
- <svelte:self block={child} context={childrenContext()} />
164
- {/each}
173
+ {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
174
+ <svelte:self block={child} context={childrenContext()} />
175
+ {/each}
165
176
 
166
- {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
167
- <BlockStyles block={child} context={childrenContext()} />
168
- {/each}
169
- </svelte:element>
177
+ {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
178
+ <BlockStyles block={child} context={childrenContext()} />
179
+ {/each}
180
+ </svelte:element>
181
+ {/if}
182
+ {:else}
183
+ <RenderComponent {...renderComponentProps()} />
170
184
  {/if}
171
- {:else}
172
- <RenderComponent {...renderComponentProps()} />
173
185
  {/if}
package/package/types/builder-block.d.ts CHANGED
@@ -54,5 +54,13 @@ export interface BuilderBlock {
54
54
  } | null;
55
55
  animations?: any[];
56
56
  style?: Partial<CSSStyleDeclaration>;
57
+ /**
58
+ * generated by the "Hide If" binding
59
+ */
60
+ hide?: boolean;
61
+ /**
62
+ * generated by the "Show If" binding
63
+ */
64
+ show?: boolean;
57
65
  }
58
66
  export {};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@builder.io/sdk-svelte",
3
3
  "description": "Builder.io SDK for Svelte",
4
- "version": "0.1.7",
4
+ "version": "0.1.9",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "package",
package/src/blocks/section/section.svelte CHANGED
@@ -55,9 +55,9 @@
55
55
  use:mitosis_styling={{
56
56
  width: "100%",
57
57
  alignSelf: "stretch",
58
- flexGrow: "1",
58
+ flexGrow: 1,
59
59
  boxSizing: "border-box",
60
- maxWidth: `${maxWidth && typeof maxWidth === "number" ? maxWidth : 1200}px`,
60
+ maxWidth: maxWidth || 1200,
61
61
  display: "flex",
62
62
  flexDirection: "column",
63
63
  alignItems: "stretch",
package/src/components/render-block/block-styles.svelte CHANGED
@@ -17,6 +17,7 @@
17
17
  import { TARGET } from "../../constants/target.js";
18
18
  import { getProcessedBlock } from "../../functions/get-processed-block.js";
19
19
  import { createCssClass } from "../../helpers/css.js";
20
+ import { checkIsDefined } from "../../helpers/nullable.js";
20
21
  import RenderInlinedStyles from "../render-inlined-styles.svelte";
21
22
 
22
23
  export let block: BlockStylesProps["block"];
@@ -30,6 +31,16 @@
30
31
  shouldEvaluateBindings: true,
31
32
  });
32
33
  };
34
+ $: canShowBlock = () => {
35
+ // only render styles for blocks that are visible
36
+ if (checkIsDefined(useBlock().hide)) {
37
+ return !useBlock().hide;
38
+ }
39
+ if (checkIsDefined(useBlock().show)) {
40
+ return useBlock().show;
41
+ }
42
+ return true;
43
+ };
33
44
  $: css = () => {
34
45
  const styles = useBlock().responsiveStyles;
35
46
  const content = context.content;
@@ -70,6 +81,6 @@
70
81
  };
71
82
  </script>
72
83
 
73
- {#if TARGET !== "reactNative" && css()}
84
+ {#if TARGET !== "reactNative" && css() && canShowBlock()}
74
85
  <RenderInlinedStyles styles={css()} />
75
86
  {/if}
package/src/components/render-block/render-block.svelte CHANGED
@@ -31,6 +31,7 @@
31
31
  import { extractTextStyles } from "../../functions/extract-text-styles.js";
32
32
  import RenderComponent from "./render-component.svelte";
33
33
  import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
34
+ import { checkIsDefined } from "../../helpers/nullable.js";
34
35
 
35
36
  const setAttrs = (node, attrs = {}) => {
36
37
  const attrKeys = Object.keys(attrs);
@@ -66,6 +67,15 @@
66
67
  shouldEvaluateBindings: true,
67
68
  });
68
69
  };
70
+ $: canShowBlock = () => {
71
+ if (checkIsDefined(useBlock().hide)) {
72
+ return !useBlock().hide;
73
+ }
74
+ if (checkIsDefined(useBlock().show)) {
75
+ return useBlock().show;
76
+ }
77
+ return true;
78
+ };
69
79
  $: proxyState = () => {
70
80
  if (typeof Proxy === "undefined") {
71
81
  console.error(
@@ -174,30 +184,32 @@
174
184
  });
175
185
  </script>
176
186
 
177
- {#if !component?.noWrap}
178
- {#if isEmptyHtmlElement(tag())}
179
- <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
180
- {/if}
187
+ {#if canShowBlock()}
188
+ {#if !component?.noWrap}
189
+ {#if isEmptyHtmlElement(tag())}
190
+ <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
191
+ {/if}
181
192
 
182
- {#if !isEmptyHtmlElement(tag()) && repeatItemData}
183
- {#each repeatItemData as data, index (index)}
184
- <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
185
- {/each}
186
- {/if}
193
+ {#if !isEmptyHtmlElement(tag()) && repeatItemData}
194
+ {#each repeatItemData as data, index (index)}
195
+ <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
196
+ {/each}
197
+ {/if}
187
198
 
188
- {#if !isEmptyHtmlElement(tag()) && !repeatItemData}
189
- <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
190
- <RenderComponent {...renderComponentProps()} />
199
+ {#if !isEmptyHtmlElement(tag()) && !repeatItemData}
200
+ <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
201
+ <RenderComponent {...renderComponentProps()} />
191
202
 
192
- {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
193
- <svelte:self block={child} context={childrenContext()} />
194
- {/each}
203
+ {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
204
+ <svelte:self block={child} context={childrenContext()} />
205
+ {/each}
195
206
 
196
- {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
197
- <BlockStyles block={child} context={childrenContext()} />
198
- {/each}
199
- </svelte:element>
207
+ {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
208
+ <BlockStyles block={child} context={childrenContext()} />
209
+ {/each}
210
+ </svelte:element>
211
+ {/if}
212
+ {:else}
213
+ <RenderComponent {...renderComponentProps()} />
200
214
  {/if}
201
- {:else}
202
- <RenderComponent {...renderComponentProps()} />
203
215
  {/if}
package/src/types/builder-block.ts CHANGED
@@ -56,4 +56,14 @@ export interface BuilderBlock {
56
56
  } | null;
57
57
  animations?: any[]; // TODO: type the animation spec
58
58
  style?: Partial<CSSStyleDeclaration>;
59
+
60
+ /**
61
+ * generated by the "Hide If" binding
62
+ */
63
+ hide?: boolean;
64
+
65
+ /**
66
+ * generated by the "Show If" binding
67
+ */
68
+ show?: boolean;
59
69
  }