@builder.io/sdk-svelte 5.2.4 → 5.2.6

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 (27) hide show
  1. package/lib/browser/blocks/image/component-info.js +2 -1
  2. package/lib/browser/blocks/image/image.svelte +7 -4
  3. package/lib/browser/blocks/image/image.svelte.d.ts +2 -2
  4. package/lib/browser/components/content/components/enable-editor.svelte +1 -0
  5. package/lib/browser/constants/sdk-version.d.ts +1 -1
  6. package/lib/browser/constants/sdk-version.js +1 -1
  7. package/lib/browser/functions/is-from-trusted-host.js +9 -3
  8. package/lib/edge/blocks/image/component-info.js +2 -1
  9. package/lib/edge/blocks/image/image.svelte +7 -4
  10. package/lib/edge/blocks/image/image.svelte.d.ts +2 -2
  11. package/lib/edge/components/content/components/enable-editor.svelte +1 -0
  12. package/lib/edge/constants/sdk-version.d.ts +1 -1
  13. package/lib/edge/constants/sdk-version.js +1 -1
  14. package/lib/edge/functions/is-from-trusted-host.js +9 -3
  15. package/lib/node/blocks/image/component-info.js +2 -1
  16. package/lib/node/blocks/image/image.svelte +7 -4
  17. package/lib/node/blocks/image/image.svelte.d.ts +2 -2
  18. package/lib/node/components/content/components/enable-editor.svelte +1 -0
  19. package/lib/node/constants/sdk-version.d.ts +1 -1
  20. package/lib/node/constants/sdk-version.js +1 -1
  21. package/lib/node/functions/is-from-trusted-host.js +9 -3
  22. package/package.json +1 -1
  23. package/src/blocks/image/component-info.ts +2 -1
  24. package/src/blocks/image/image.svelte +7 -4
  25. package/src/components/content/components/enable-editor.svelte +1 -0
  26. package/src/constants/sdk-version.ts +1 -1
  27. package/src/functions/is-from-trusted-host.ts +8 -4
package/lib/browser/blocks/image/component-info.js CHANGED
@@ -102,7 +102,8 @@ export const componentInfo = {
102
102
  }, {
103
103
  name: 'sizes',
104
104
  type: 'string',
105
- hideFromUI: true
105
+ advanced: true,
106
+ helperText: 'The sizes attribute for responsive images, e.g. "(max-width: 600px) 100vw, 50vw"'
106
107
  }, {
107
108
  name: 'srcset',
108
109
  type: 'string',
package/lib/browser/blocks/image/image.svelte CHANGED
@@ -4,14 +4,14 @@ export let image;
4
4
  export let src = undefined;
5
5
  export let srcset = undefined;
6
6
  export let noWebp = undefined;
7
- export let aspectRatio = undefined;
7
+ export let sizes = undefined;
8
8
  export let highPriority = undefined;
9
+ export let aspectRatio = undefined;
9
10
  export let altText = undefined;
10
11
  export let title = undefined;
11
12
  export let backgroundPosition = undefined;
12
13
  export let backgroundSize = undefined;
13
14
  export let className = undefined;
14
- export let sizes = undefined;
15
15
  export let builderBlock = undefined;
16
16
  export let fitContent = undefined;
17
17
  function stringifyStyles(stylesObj) {
@@ -56,6 +56,9 @@ $: webpSrcSet = () => {
56
56
  return "";
57
57
  }
58
58
  };
59
+ $: sizesToUse = () => {
60
+ return sizes || (highPriority ? undefined : "auto");
61
+ };
59
62
  $: aspectRatioCss = () => {
60
63
  const aspectRatioStyles = {
61
64
  position: "absolute",
@@ -72,7 +75,7 @@ onMount(() => { });
72
75
 
73
76
  <picture>
74
77
  {#if webpSrcSet()}
75
- <source type="image/webp" srcset={webpSrcSet()} />
78
+ <source type="image/webp" srcset={webpSrcSet()} sizes={sizesToUse()} />
76
79
  {/if}<img
77
80
  style={stringifyStyles({
78
81
  objectPosition: backgroundPosition || "center",
@@ -87,7 +90,7 @@ onMount(() => { });
87
90
  class={"builder-image" + (className ? " " + className : "") + " img"}
88
91
  src={image}
89
92
  srcset={srcSetToUse()}
90
- {sizes}
93
+ sizes={sizesToUse()}
91
94
  /></picture
92
95
  >
93
96
 
package/lib/browser/blocks/image/image.svelte.d.ts CHANGED
@@ -6,14 +6,14 @@ declare const __propDef: {
6
6
  src?: ImageProps["src"];
7
7
  srcset?: ImageProps["srcset"];
8
8
  noWebp?: ImageProps["noWebp"];
9
- aspectRatio?: ImageProps["aspectRatio"];
9
+ sizes?: ImageProps["sizes"];
10
10
  highPriority?: ImageProps["highPriority"];
11
+ aspectRatio?: ImageProps["aspectRatio"];
11
12
  altText?: ImageProps["altText"];
12
13
  title?: ImageProps["title"];
13
14
  backgroundPosition?: ImageProps["backgroundPosition"];
14
15
  backgroundSize?: ImageProps["backgroundSize"];
15
16
  className?: ImageProps["className"];
16
- sizes?: ImageProps["sizes"];
17
17
  builderBlock?: ImageProps["builderBlock"];
18
18
  fitContent?: ImageProps["fitContent"];
19
19
  };
package/lib/browser/components/content/components/enable-editor.svelte CHANGED
@@ -281,6 +281,7 @@ let hasExecuted = false;
281
281
  let contextValue = $builderContextSignal;
282
282
  let prevData = null;
283
283
  let prevLocale = "";
284
+ let prevContent = null;
284
285
  let ContentWrapper = contentWrapper || "div";
285
286
  let httpReqsData = {};
286
287
  let httpReqsPending = {};
package/lib/browser/constants/sdk-version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const SDK_VERSION = "5.2.4";
1
+ export declare const SDK_VERSION = "5.2.6";
package/lib/browser/constants/sdk-version.js CHANGED
@@ -1 +1 @@
1
- export const SDK_VERSION = "5.2.4";
1
+ export const SDK_VERSION = "5.2.6";
package/lib/browser/functions/is-from-trusted-host.js CHANGED
@@ -1,8 +1,14 @@
1
1
  const DEFAULT_TRUSTED_HOSTS = ['*.beta.builder.io', 'beta.builder.io', 'builder.io', 'localhost', 'qa.builder.io'];
2
2
  export function isFromTrustedHost(trustedHosts, e) {
3
- if (!e.origin.startsWith('http') && !e.origin.startsWith('https')) {
3
+ let url;
4
+ try {
5
+ url = new URL(e.origin);
6
+ }
7
+ catch {
8
+ return false;
9
+ }
10
+ if (url.protocol !== 'http:' && url.protocol !== 'https:') {
4
11
  return false;
5
12
  }
6
- const url = new URL(e.origin), hostname = url.hostname;
7
- return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex(trustedHost => trustedHost.startsWith('*.') ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
13
+ return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex(trustedHost => trustedHost.startsWith('*.') ? url.hostname.endsWith(trustedHost.slice(1)) : trustedHost === url.hostname) > -1;
8
14
  }
package/lib/edge/blocks/image/component-info.js CHANGED
@@ -102,7 +102,8 @@ export const componentInfo = {
102
102
  }, {
103
103
  name: 'sizes',
104
104
  type: 'string',
105
- hideFromUI: true
105
+ advanced: true,
106
+ helperText: 'The sizes attribute for responsive images, e.g. "(max-width: 600px) 100vw, 50vw"'
106
107
  }, {
107
108
  name: 'srcset',
108
109
  type: 'string',
package/lib/edge/blocks/image/image.svelte CHANGED
@@ -4,14 +4,14 @@ export let image;
4
4
  export let src = undefined;
5
5
  export let srcset = undefined;
6
6
  export let noWebp = undefined;
7
- export let aspectRatio = undefined;
7
+ export let sizes = undefined;
8
8
  export let highPriority = undefined;
9
+ export let aspectRatio = undefined;
9
10
  export let altText = undefined;
10
11
  export let title = undefined;
11
12
  export let backgroundPosition = undefined;
12
13
  export let backgroundSize = undefined;
13
14
  export let className = undefined;
14
- export let sizes = undefined;
15
15
  export let builderBlock = undefined;
16
16
  export let fitContent = undefined;
17
17
  function stringifyStyles(stylesObj) {
@@ -56,6 +56,9 @@ $: webpSrcSet = () => {
56
56
  return "";
57
57
  }
58
58
  };
59
+ $: sizesToUse = () => {
60
+ return sizes || (highPriority ? undefined : "auto");
61
+ };
59
62
  $: aspectRatioCss = () => {
60
63
  const aspectRatioStyles = {
61
64
  position: "absolute",
@@ -72,7 +75,7 @@ onMount(() => { });
72
75
 
73
76
  <picture>
74
77
  {#if webpSrcSet()}
75
- <source type="image/webp" srcset={webpSrcSet()} />
78
+ <source type="image/webp" srcset={webpSrcSet()} sizes={sizesToUse()} />
76
79
  {/if}<img
77
80
  style={stringifyStyles({
78
81
  objectPosition: backgroundPosition || "center",
@@ -87,7 +90,7 @@ onMount(() => { });
87
90
  class={"builder-image" + (className ? " " + className : "") + " img"}
88
91
  src={image}
89
92
  srcset={srcSetToUse()}
90
- {sizes}
93
+ sizes={sizesToUse()}
91
94
  /></picture
92
95
  >
93
96
 
package/lib/edge/blocks/image/image.svelte.d.ts CHANGED
@@ -6,14 +6,14 @@ declare const __propDef: {
6
6
  src?: ImageProps["src"];
7
7
  srcset?: ImageProps["srcset"];
8
8
  noWebp?: ImageProps["noWebp"];
9
- aspectRatio?: ImageProps["aspectRatio"];
9
+ sizes?: ImageProps["sizes"];
10
10
  highPriority?: ImageProps["highPriority"];
11
+ aspectRatio?: ImageProps["aspectRatio"];
11
12
  altText?: ImageProps["altText"];
12
13
  title?: ImageProps["title"];
13
14
  backgroundPosition?: ImageProps["backgroundPosition"];
14
15
  backgroundSize?: ImageProps["backgroundSize"];
15
16
  className?: ImageProps["className"];
16
- sizes?: ImageProps["sizes"];
17
17
  builderBlock?: ImageProps["builderBlock"];
18
18
  fitContent?: ImageProps["fitContent"];
19
19
  };
package/lib/edge/components/content/components/enable-editor.svelte CHANGED
@@ -281,6 +281,7 @@ let hasExecuted = false;
281
281
  let contextValue = $builderContextSignal;
282
282
  let prevData = null;
283
283
  let prevLocale = "";
284
+ let prevContent = null;
284
285
  let ContentWrapper = contentWrapper || "div";
285
286
  let httpReqsData = {};
286
287
  let httpReqsPending = {};
package/lib/edge/constants/sdk-version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const SDK_VERSION = "5.2.4";
1
+ export declare const SDK_VERSION = "5.2.6";
package/lib/edge/constants/sdk-version.js CHANGED
@@ -1 +1 @@
1
- export const SDK_VERSION = "5.2.4";
1
+ export const SDK_VERSION = "5.2.6";
package/lib/edge/functions/is-from-trusted-host.js CHANGED
@@ -1,8 +1,14 @@
1
1
  const DEFAULT_TRUSTED_HOSTS = ['*.beta.builder.io', 'beta.builder.io', 'builder.io', 'localhost', 'qa.builder.io'];
2
2
  export function isFromTrustedHost(trustedHosts, e) {
3
- if (!e.origin.startsWith('http') && !e.origin.startsWith('https')) {
3
+ let url;
4
+ try {
5
+ url = new URL(e.origin);
6
+ }
7
+ catch {
8
+ return false;
9
+ }
10
+ if (url.protocol !== 'http:' && url.protocol !== 'https:') {
4
11
  return false;
5
12
  }
6
- const url = new URL(e.origin), hostname = url.hostname;
7
- return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex(trustedHost => trustedHost.startsWith('*.') ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
13
+ return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex(trustedHost => trustedHost.startsWith('*.') ? url.hostname.endsWith(trustedHost.slice(1)) : trustedHost === url.hostname) > -1;
8
14
  }
package/lib/node/blocks/image/component-info.js CHANGED
@@ -102,7 +102,8 @@ export const componentInfo = {
102
102
  }, {
103
103
  name: 'sizes',
104
104
  type: 'string',
105
- hideFromUI: true
105
+ advanced: true,
106
+ helperText: 'The sizes attribute for responsive images, e.g. "(max-width: 600px) 100vw, 50vw"'
106
107
  }, {
107
108
  name: 'srcset',
108
109
  type: 'string',
package/lib/node/blocks/image/image.svelte CHANGED
@@ -4,14 +4,14 @@ export let image;
4
4
  export let src = undefined;
5
5
  export let srcset = undefined;
6
6
  export let noWebp = undefined;
7
- export let aspectRatio = undefined;
7
+ export let sizes = undefined;
8
8
  export let highPriority = undefined;
9
+ export let aspectRatio = undefined;
9
10
  export let altText = undefined;
10
11
  export let title = undefined;
11
12
  export let backgroundPosition = undefined;
12
13
  export let backgroundSize = undefined;
13
14
  export let className = undefined;
14
- export let sizes = undefined;
15
15
  export let builderBlock = undefined;
16
16
  export let fitContent = undefined;
17
17
  function stringifyStyles(stylesObj) {
@@ -56,6 +56,9 @@ $: webpSrcSet = () => {
56
56
  return "";
57
57
  }
58
58
  };
59
+ $: sizesToUse = () => {
60
+ return sizes || (highPriority ? undefined : "auto");
61
+ };
59
62
  $: aspectRatioCss = () => {
60
63
  const aspectRatioStyles = {
61
64
  position: "absolute",
@@ -72,7 +75,7 @@ onMount(() => { });
72
75
 
73
76
  <picture>
74
77
  {#if webpSrcSet()}
75
- <source type="image/webp" srcset={webpSrcSet()} />
78
+ <source type="image/webp" srcset={webpSrcSet()} sizes={sizesToUse()} />
76
79
  {/if}<img
77
80
  style={stringifyStyles({
78
81
  objectPosition: backgroundPosition || "center",
@@ -87,7 +90,7 @@ onMount(() => { });
87
90
  class={"builder-image" + (className ? " " + className : "") + " img"}
88
91
  src={image}
89
92
  srcset={srcSetToUse()}
90
- {sizes}
93
+ sizes={sizesToUse()}
91
94
  /></picture
92
95
  >
93
96
 
package/lib/node/blocks/image/image.svelte.d.ts CHANGED
@@ -6,14 +6,14 @@ declare const __propDef: {
6
6
  src?: ImageProps["src"];
7
7
  srcset?: ImageProps["srcset"];
8
8
  noWebp?: ImageProps["noWebp"];
9
- aspectRatio?: ImageProps["aspectRatio"];
9
+ sizes?: ImageProps["sizes"];
10
10
  highPriority?: ImageProps["highPriority"];
11
+ aspectRatio?: ImageProps["aspectRatio"];
11
12
  altText?: ImageProps["altText"];
12
13
  title?: ImageProps["title"];
13
14
  backgroundPosition?: ImageProps["backgroundPosition"];
14
15
  backgroundSize?: ImageProps["backgroundSize"];
15
16
  className?: ImageProps["className"];
16
- sizes?: ImageProps["sizes"];
17
17
  builderBlock?: ImageProps["builderBlock"];
18
18
  fitContent?: ImageProps["fitContent"];
19
19
  };
package/lib/node/components/content/components/enable-editor.svelte CHANGED
@@ -281,6 +281,7 @@ let hasExecuted = false;
281
281
  let contextValue = $builderContextSignal;
282
282
  let prevData = null;
283
283
  let prevLocale = "";
284
+ let prevContent = null;
284
285
  let ContentWrapper = contentWrapper || "div";
285
286
  let httpReqsData = {};
286
287
  let httpReqsPending = {};
package/lib/node/constants/sdk-version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const SDK_VERSION = "5.2.4";
1
+ export declare const SDK_VERSION = "5.2.6";
package/lib/node/constants/sdk-version.js CHANGED
@@ -1 +1 @@
1
- export const SDK_VERSION = "5.2.4";
1
+ export const SDK_VERSION = "5.2.6";
package/lib/node/functions/is-from-trusted-host.js CHANGED
@@ -1,8 +1,14 @@
1
1
  const DEFAULT_TRUSTED_HOSTS = ['*.beta.builder.io', 'beta.builder.io', 'builder.io', 'localhost', 'qa.builder.io'];
2
2
  export function isFromTrustedHost(trustedHosts, e) {
3
- if (!e.origin.startsWith('http') && !e.origin.startsWith('https')) {
3
+ let url;
4
+ try {
5
+ url = new URL(e.origin);
6
+ }
7
+ catch {
8
+ return false;
9
+ }
10
+ if (url.protocol !== 'http:' && url.protocol !== 'https:') {
4
11
  return false;
5
12
  }
6
- const url = new URL(e.origin), hostname = url.hostname;
7
- return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex(trustedHost => trustedHost.startsWith('*.') ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
13
+ return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex(trustedHost => trustedHost.startsWith('*.') ? url.hostname.endsWith(trustedHost.slice(1)) : trustedHost === url.hostname) > -1;
8
14
  }
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": "5.2.4",
4
+ "version": "5.2.6",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "lib",
package/src/blocks/image/component-info.ts CHANGED
@@ -104,7 +104,8 @@ export const componentInfo: ComponentInfo = {
104
104
  }, {
105
105
  name: 'sizes',
106
106
  type: 'string',
107
- hideFromUI: true
107
+ advanced: true,
108
+ helperText: 'The sizes attribute for responsive images, e.g. "(max-width: 600px) 100vw, 50vw"'
108
109
  }, {
109
110
  name: 'srcset',
110
111
  type: 'string',
package/src/blocks/image/image.svelte CHANGED
@@ -8,14 +8,14 @@
8
8
  export let src: ImageProps["src"] = undefined;
9
9
  export let srcset: ImageProps["srcset"] = undefined;
10
10
  export let noWebp: ImageProps["noWebp"] = undefined;
11
- export let aspectRatio: ImageProps["aspectRatio"] = undefined;
11
+ export let sizes: ImageProps["sizes"] = undefined;
12
12
  export let highPriority: ImageProps["highPriority"] = undefined;
13
+ export let aspectRatio: ImageProps["aspectRatio"] = undefined;
13
14
  export let altText: ImageProps["altText"] = undefined;
14
15
  export let title: ImageProps["title"] = undefined;
15
16
  export let backgroundPosition: ImageProps["backgroundPosition"] = undefined;
16
17
  export let backgroundSize: ImageProps["backgroundSize"] = undefined;
17
18
  export let className: ImageProps["className"] = undefined;
18
- export let sizes: ImageProps["sizes"] = undefined;
19
19
  export let builderBlock: ImageProps["builderBlock"] = undefined;
20
20
  export let fitContent: ImageProps["fitContent"] = undefined;
21
21
 
@@ -64,6 +64,9 @@
64
64
  return "";
65
65
  }
66
66
  };
67
+ $: sizesToUse = () => {
68
+ return sizes || (highPriority ? undefined : "auto");
69
+ };
67
70
  $: aspectRatioCss = () => {
68
71
  const aspectRatioStyles = {
69
72
  position: "absolute",
@@ -81,7 +84,7 @@
81
84
 
82
85
  <picture>
83
86
  {#if webpSrcSet()}
84
- <source type="image/webp" srcset={webpSrcSet()} />
87
+ <source type="image/webp" srcset={webpSrcSet()} sizes={sizesToUse()} />
85
88
  {/if}<img
86
89
  style={stringifyStyles({
87
90
  objectPosition: backgroundPosition || "center",
@@ -96,7 +99,7 @@
96
99
  class={"builder-image" + (className ? " " + className : "") + " img"}
97
100
  src={image}
98
101
  srcset={srcSetToUse()}
99
- {sizes}
102
+ sizes={sizesToUse()}
100
103
  /></picture
101
104
  >
102
105
 
package/src/components/content/components/enable-editor.svelte CHANGED
@@ -367,6 +367,7 @@
367
367
  let contextValue = $builderContextSignal;
368
368
  let prevData = null;
369
369
  let prevLocale = "";
370
+ let prevContent = null;
370
371
  let ContentWrapper = contentWrapper || "div";
371
372
  let httpReqsData = {};
372
373
  let httpReqsPending = {};
package/src/constants/sdk-version.ts CHANGED
@@ -1 +1 @@
1
- export const SDK_VERSION = "5.2.4"
1
+ export const SDK_VERSION = "5.2.6"
package/src/functions/is-from-trusted-host.ts CHANGED
@@ -2,10 +2,14 @@ const DEFAULT_TRUSTED_HOSTS = ['*.beta.builder.io', 'beta.builder.io', 'builder.
2
2
  export function isFromTrustedHost(trustedHosts: string[] | undefined, e: {
3
3
  origin: string;
4
4
  }): boolean {
5
- if (!e.origin.startsWith('http') && !e.origin.startsWith('https')) {
5
+ let url: URL;
6
+ try {
7
+ url = new URL(e.origin);
8
+ } catch {
6
9
  return false;
7
10
  }
8
- const url = new URL(e.origin),
9
- hostname = url.hostname;
10
- return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex(trustedHost => trustedHost.startsWith('*.') ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
11
+ if (url.protocol !== 'http:' && url.protocol !== 'https:') {
12
+ return false;
13
+ }
14
+ return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex(trustedHost => trustedHost.startsWith('*.') ? url.hostname.endsWith(trustedHost.slice(1)) : trustedHost === url.hostname) > -1;
11
15
  }