@builder.io/sdk-svelte 0.1.12 → 0.1.13

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