@builder.io/sdk-svelte 0.1.12 → 0.1.14

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 (6) hide show
  1. package/package/--package.json +1 -1
  2. package/package/CHANGELOG.md +9 -0
  3. package/package/blocks/columns/columns.svelte +72 -75
  4. package/package/blocks/columns/columns.svelte.d.ts +1 -1
  5. package/package.json +1 -1
  6. package/src/blocks/columns/columns.svelte +79 -78
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.11",
4
+ "version": "0.1.13",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "package",
package/package/CHANGELOG.md CHANGED
@@ -1,3 +1,12 @@
1
+ ### 0.1.13
2
+
3
+ - Fix: Columns block styling & `stackColumnsAt` prop
4
+
5
+ ### 0.1.12
6
+
7
+ - Fix: `RenderContent` not re-rendering when its `content` updates. This fixes Symbol rendering in the visual editor.
8
+ - Feature: `RenderContent` and `getContent` now have an `apiVersion` field that can be set to `v2` or `v3` to target specific Builder API versions. Current default is `v2`
9
+
1
10
  ### 0.1.11
2
11
 
3
12
  - No changes.
package/package/blocks/columns/columns.svelte CHANGED
@@ -5,7 +5,6 @@ import RenderBlocks from "../../components/render-blocks.svelte";
5
5
  import { getSizesForBreakpoints } from "../../constants/device-sizes";
6
6
  import RenderInlinedStyles from "../../components/render-inlined-styles.svelte";
7
7
  import { TARGET } from "../../constants/target.js";
8
- import { convertStyleMapToCSS } from "../../helpers/css";
9
8
  import BuilderContext from "../../context/builder.context.js";
10
9
  export let space;
11
10
  export let columns;
@@ -23,112 +22,112 @@ function mitosis_styling(node, vars) {
23
22
  });
24
23
  }
25
24
  let builderContext = getContext(BuilderContext.key);
26
- function getGutterSize() {
27
- return typeof space === "number" ? space || 0 : 20;
28
- }
29
- function getColumns() {
30
- return columns || [];
31
- }
32
25
  function getWidth(index) {
33
- const columns = getColumns();
34
- return columns[index]?.width || 100 / columns.length;
26
+ return cols[index]?.width || 100 / cols.length;
35
27
  }
36
28
  function getColumnCssWidth(index) {
37
- const columns = getColumns();
38
- const gutterSize = getGutterSize();
39
- const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
29
+ const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
40
30
  return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
41
31
  }
42
- function maybeApplyForTablet(prop) {
43
- const _stackColumnsAt = stackColumnsAt || "tablet";
44
- return _stackColumnsAt === "tablet" ? prop : "inherit";
32
+ function getTabletStyle({ stackedStyle, desktopStyle }) {
33
+ return stackAt === "tablet" ? stackedStyle : desktopStyle;
34
+ }
35
+ function getMobileStyle({ stackedStyle, desktopStyle }) {
36
+ return stackAt === "never" ? desktopStyle : stackedStyle;
37
+ }
38
+ function columnCssVars(index) {
39
+ const width = getColumnCssWidth(index);
40
+ const gutter = `${index === 0 ? 0 : gutterSize}px`;
41
+ if (TARGET === "reactNative") {
42
+ return {
43
+ width,
44
+ marginLeft: stackColumnsAt === "never" ? gutter : 0,
45
+ };
46
+ }
47
+ const mobileWidth = "100%";
48
+ const mobileMarginLeft = 0;
49
+ return {
50
+ width,
51
+ "margin-left": gutter,
52
+ "--column-width-mobile": getMobileStyle({
53
+ stackedStyle: mobileWidth,
54
+ desktopStyle: width,
55
+ }),
56
+ "--column-margin-left-mobile": getMobileStyle({
57
+ stackedStyle: mobileMarginLeft,
58
+ desktopStyle: gutter,
59
+ }),
60
+ "--column-width-tablet": getTabletStyle({
61
+ stackedStyle: mobileWidth,
62
+ desktopStyle: width,
63
+ }),
64
+ "--column-margin-left-tablet": getTabletStyle({
65
+ stackedStyle: mobileMarginLeft,
66
+ desktopStyle: gutter,
67
+ }),
68
+ };
45
69
  }
46
70
  function getWidthForBreakpointSize(size) {
47
71
  const breakpointSizes = getSizesForBreakpoints(builderContext.content?.meta?.breakpoints || {});
48
72
  return breakpointSizes[size].max;
49
73
  }
50
74
  $: columnsCssVars = () => {
51
- const flexDir = stackColumnsAt === "never"
52
- ? "inherit"
53
- : reverseColumnsWhenStacked
54
- ? "column-reverse"
55
- : "column";
75
+ if (TARGET === "reactNative") {
76
+ return {
77
+ flexDirection: flexDir,
78
+ };
79
+ }
56
80
  return {
57
81
  "--flex-dir": flexDir,
58
- "--flex-dir-tablet": maybeApplyForTablet(flexDir),
59
- };
60
- };
61
- $: columnCssVars = () => {
62
- const width = "100%";
63
- const marginLeft = "0";
64
- return {
65
- "--column-width": width,
66
- "--column-margin-left": marginLeft,
67
- "--column-width-tablet": maybeApplyForTablet(width),
68
- "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
69
- };
70
- };
71
- $: columnStyleObjects = () => {
72
- return {
73
- columns: {
74
- small: {
75
- flexDirection: "var(--flex-dir)",
76
- alignItems: "stretch",
77
- },
78
- medium: {
79
- flexDirection: "var(--flex-dir-tablet)",
80
- alignItems: "stretch",
81
- },
82
- },
83
- column: {
84
- small: {
85
- width: "var(--column-width) !important",
86
- marginLeft: "var(--column-margin-left) !important",
87
- },
88
- medium: {
89
- width: "var(--column-width-tablet) !important",
90
- marginLeft: "var(--column-margin-left-tablet) !important",
91
- },
92
- },
82
+ "--flex-dir-tablet": getTabletStyle({
83
+ stackedStyle: flexDir,
84
+ desktopStyle: "row",
85
+ }),
93
86
  };
94
87
  };
95
88
  $: columnsStyles = () => {
96
89
  return `
97
90
  @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
98
91
  .${builderBlock.id}-breakpoints {
99
- ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
92
+ flex-direction: var(--flex-dir-tablet);
93
+ align-items: stretch;
100
94
  }
101
95
 
102
96
  .${builderBlock.id}-breakpoints > .builder-column {
103
- ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
97
+ width: var(--column-width-tablet) !important;
98
+ margin-left: var(--column-margin-left-tablet) !important;
104
99
  }
105
100
  }
106
101
 
107
102
  @media (max-width: ${getWidthForBreakpointSize("small")}px) {
108
103
  .${builderBlock.id}-breakpoints {
109
- ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
104
+ flex-direction: var(--flex-dir);
105
+ align-items: stretch;
110
106
  }
111
107
 
112
108
  .${builderBlock.id}-breakpoints > .builder-column {
113
- ${convertStyleMapToCSS(columnStyleObjects().column.small)}
109
+ width: var(--column-width-mobile) !important;
110
+ margin-left: var(--column-margin-left-mobile) !important;
114
111
  }
115
112
  },
116
113
  `;
117
114
  };
118
- $: reactNativeColumnsStyles = () => {
119
- return this.columnStyleObjects.columns.small;
120
- };
121
- $: reactNativeColumnStyles = () => {
122
- return this.columnStyleObjects.column.small;
123
- };
115
+ let gutterSize = typeof space === "number" ? space || 0 : 20;
116
+ let cols = columns || [];
117
+ let stackAt = stackColumnsAt || "tablet";
118
+ let flexDir = stackColumnsAt === "never"
119
+ ? "row"
120
+ : reverseColumnsWhenStacked
121
+ ? "column-reverse"
122
+ : "column";
124
123
  </script>
125
124
 
126
125
  <div
127
- use:mitosis_styling={{
128
- ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
129
- ...columnsCssVars(),
130
- }}
126
+ use:mitosis_styling={columnsCssVars()}
131
127
  class={`builder-columns ${builderBlock.id}-breakpoints` + " div"}
128
+ dataSet={{
129
+ "builder-block-name": "builder-columns",
130
+ }}
132
131
  >
133
132
  {#if TARGET !== "reactNative"}
134
133
  <RenderInlinedStyles styles={columnsStyles()} />
@@ -136,13 +135,11 @@ $: reactNativeColumnStyles = () => {
136
135
 
137
136
  {#each columns as column, index (index)}
138
137
  <div
139
- use:mitosis_styling={{
140
- width: getColumnCssWidth(index),
141
- marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
142
- ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
143
- ...columnCssVars(),
144
- }}
138
+ use:mitosis_styling={columnCssVars(index)}
145
139
  class="builder-column div-2"
140
+ dataSet={{
141
+ "builder-block-name": "builder-column",
142
+ }}
146
143
  >
147
144
  <RenderBlocks
148
145
  blocks={column.blocks}
package/package/blocks/columns/columns.svelte.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  import type { BuilderBlock } from "../../types/builder-block";
3
3
  type Column = {
4
- blocks: any;
4
+ blocks: BuilderBlock[];
5
5
  width?: number;
6
6
  };
7
7
  type StackColumnsAt = "tablet" | "mobile" | "never";
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.12",
4
+ "version": "0.1.14",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "package",
package/src/blocks/columns/columns.svelte CHANGED
@@ -3,12 +3,15 @@
3
3
 
4
4
  import type { SizeName } from "../../constants/device-sizes";
5
5
 
6
+ import type { Dictionary } from "../../types/typescript";
7
+
6
8
  type Column = {
7
- blocks: any;
8
- // TODO: Implement this when support for dynamic CSS lands
9
+ blocks: BuilderBlock[];
9
10
  width?: number;
10
11
  };
11
12
 
13
+ type CSSVal = string | number;
14
+
12
15
  type StackColumnsAt = "tablet" | "mobile" | "never";
13
16
 
14
17
  export interface ColumnProps {
@@ -31,7 +34,6 @@
31
34
  import { getSizesForBreakpoints } from "../../constants/device-sizes";
32
35
  import RenderInlinedStyles from "../../components/render-inlined-styles.svelte";
33
36
  import { TARGET } from "../../constants/target.js";
34
- import { convertStyleMapToCSS } from "../../helpers/css";
35
37
  import BuilderContext from "../../context/builder.context.js";
36
38
 
37
39
  export let space: ColumnProps["space"];
@@ -52,25 +54,50 @@
52
54
 
53
55
  let builderContext = getContext(BuilderContext.key);
54
56
 
55
- function getGutterSize() {
56
- return typeof space === "number" ? space || 0 : 20;
57
- }
58
- function getColumns() {
59
- return columns || [];
60
- }
61
57
  function getWidth(index) {
62
- const columns = getColumns();
63
- return columns[index]?.width || 100 / columns.length;
58
+ return cols[index]?.width || 100 / cols.length;
64
59
  }
65
60
  function getColumnCssWidth(index) {
66
- const columns = getColumns();
67
- const gutterSize = getGutterSize();
68
- const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
61
+ const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
69
62
  return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
70
63
  }
71
- function maybeApplyForTablet(prop) {
72
- const _stackColumnsAt = stackColumnsAt || "tablet";
73
- return _stackColumnsAt === "tablet" ? prop : "inherit";
64
+ function getTabletStyle({ stackedStyle, desktopStyle }) {
65
+ return stackAt === "tablet" ? stackedStyle : desktopStyle;
66
+ }
67
+ function getMobileStyle({ stackedStyle, desktopStyle }) {
68
+ return stackAt === "never" ? desktopStyle : stackedStyle;
69
+ }
70
+ function columnCssVars(index) {
71
+ const width = getColumnCssWidth(index);
72
+ const gutter = `${index === 0 ? 0 : gutterSize}px`;
73
+ if (TARGET === "reactNative") {
74
+ return {
75
+ width,
76
+ marginLeft: stackColumnsAt === "never" ? gutter : 0,
77
+ };
78
+ }
79
+ const mobileWidth = "100%";
80
+ const mobileMarginLeft = 0;
81
+ return {
82
+ width,
83
+ "margin-left": gutter,
84
+ "--column-width-mobile": getMobileStyle({
85
+ stackedStyle: mobileWidth,
86
+ desktopStyle: width,
87
+ }),
88
+ "--column-margin-left-mobile": getMobileStyle({
89
+ stackedStyle: mobileMarginLeft,
90
+ desktopStyle: gutter,
91
+ }),
92
+ "--column-width-tablet": getTabletStyle({
93
+ stackedStyle: mobileWidth,
94
+ desktopStyle: width,
95
+ }),
96
+ "--column-margin-left-tablet": getTabletStyle({
97
+ stackedStyle: mobileMarginLeft,
98
+ desktopStyle: gutter,
99
+ }),
100
+ };
74
101
  }
75
102
  function getWidthForBreakpointSize(size) {
76
103
  const breakpointSizes = getSizesForBreakpoints(
@@ -79,88 +106,64 @@
79
106
  return breakpointSizes[size].max;
80
107
  }
81
108
  $: columnsCssVars = () => {
82
- const flexDir =
83
- stackColumnsAt === "never"
84
- ? "inherit"
85
- : reverseColumnsWhenStacked
86
- ? "column-reverse"
87
- : "column";
109
+ if (TARGET === "reactNative") {
110
+ return {
111
+ flexDirection: flexDir,
112
+ };
113
+ }
88
114
  return {
89
115
  "--flex-dir": flexDir,
90
- "--flex-dir-tablet": maybeApplyForTablet(flexDir),
91
- };
92
- };
93
- $: columnCssVars = () => {
94
- const width = "100%";
95
- const marginLeft = "0";
96
- return {
97
- "--column-width": width,
98
- "--column-margin-left": marginLeft,
99
- "--column-width-tablet": maybeApplyForTablet(width),
100
- "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
101
- };
102
- };
103
- $: columnStyleObjects = () => {
104
- return {
105
- columns: {
106
- small: {
107
- flexDirection: "var(--flex-dir)",
108
- alignItems: "stretch",
109
- },
110
- medium: {
111
- flexDirection: "var(--flex-dir-tablet)",
112
- alignItems: "stretch",
113
- },
114
- },
115
- column: {
116
- small: {
117
- width: "var(--column-width) !important",
118
- marginLeft: "var(--column-margin-left) !important",
119
- },
120
- medium: {
121
- width: "var(--column-width-tablet) !important",
122
- marginLeft: "var(--column-margin-left-tablet) !important",
123
- },
124
- },
116
+ "--flex-dir-tablet": getTabletStyle({
117
+ stackedStyle: flexDir,
118
+ desktopStyle: "row",
119
+ }),
125
120
  };
126
121
  };
127
122
  $: columnsStyles = () => {
128
123
  return `
129
124
  @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
130
125
  .${builderBlock.id}-breakpoints {
131
- ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
126
+ flex-direction: var(--flex-dir-tablet);
127
+ align-items: stretch;
132
128
  }
133
129
 
134
130
  .${builderBlock.id}-breakpoints > .builder-column {
135
- ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
131
+ width: var(--column-width-tablet) !important;
132
+ margin-left: var(--column-margin-left-tablet) !important;
136
133
  }
137
134
  }
138
135
 
139
136
  @media (max-width: ${getWidthForBreakpointSize("small")}px) {
140
137
  .${builderBlock.id}-breakpoints {
141
- ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
138
+ flex-direction: var(--flex-dir);
139
+ align-items: stretch;
142
140
  }
143
141
 
144
142
  .${builderBlock.id}-breakpoints > .builder-column {
145
- ${convertStyleMapToCSS(columnStyleObjects().column.small)}
143
+ width: var(--column-width-mobile) !important;
144
+ margin-left: var(--column-margin-left-mobile) !important;
146
145
  }
147
146
  },
148
147
  `;
149
148
  };
150
- $: reactNativeColumnsStyles = () => {
151
- return this.columnStyleObjects.columns.small;
152
- };
153
- $: reactNativeColumnStyles = () => {
154
- return this.columnStyleObjects.column.small;
155
- };
149
+
150
+ let gutterSize = typeof space === "number" ? space || 0 : 20;
151
+ let cols = columns || [];
152
+ let stackAt = stackColumnsAt || "tablet";
153
+ let flexDir =
154
+ stackColumnsAt === "never"
155
+ ? "row"
156
+ : reverseColumnsWhenStacked
157
+ ? "column-reverse"
158
+ : "column";
156
159
  </script>
157
160
 
158
161
  <div
159
- use:mitosis_styling={{
160
- ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
161
- ...columnsCssVars(),
162
- }}
162
+ use:mitosis_styling={columnsCssVars()}
163
163
  class={`builder-columns ${builderBlock.id}-breakpoints` + " div"}
164
+ dataSet={{
165
+ "builder-block-name": "builder-columns",
166
+ }}
164
167
  >
165
168
  {#if TARGET !== "reactNative"}
166
169
  <RenderInlinedStyles styles={columnsStyles()} />
@@ -168,13 +171,11 @@
168
171
 
169
172
  {#each columns as column, index (index)}
170
173
  <div
171
- use:mitosis_styling={{
172
- width: getColumnCssWidth(index),
173
- marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
174
- ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
175
- ...columnCssVars(),
176
- }}
174
+ use:mitosis_styling={columnCssVars(index)}
177
175
  class="builder-column div-2"
176
+ dataSet={{
177
+ "builder-block-name": "builder-column",
178
+ }}
178
179
  >
179
180
  <RenderBlocks
180
181
  blocks={column.blocks}