@builder.io/sdk-svelte 4.0.10 → 4.1.0

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 (12) hide show
  1. package/lib/browser/blocks/img/img.svelte +15 -2
  2. package/lib/browser/constants/sdk-version.d.ts +1 -1
  3. package/lib/browser/constants/sdk-version.js +1 -1
  4. package/lib/edge/blocks/img/img.svelte +15 -2
  5. package/lib/edge/constants/sdk-version.d.ts +1 -1
  6. package/lib/edge/constants/sdk-version.js +1 -1
  7. package/lib/node/blocks/img/img.svelte +15 -2
  8. package/lib/node/constants/sdk-version.d.ts +1 -1
  9. package/lib/node/constants/sdk-version.js +1 -1
  10. package/package.json +1 -1
  11. package/src/blocks/img/img.svelte +17 -2
  12. package/src/constants/sdk-version.ts +1 -1
package/lib/browser/blocks/img/img.svelte CHANGED
@@ -5,12 +5,13 @@
5
5
 
6
6
  <script>import { isEditing } from "../../functions/is-editing";
7
7
  import { filterAttrs } from "../helpers";
8
+ import { getSrcSet } from "../image/image.helpers";
8
9
  import { setAttrs } from "../helpers";
10
+ export let imgSrc = undefined;
11
+ export let image = undefined;
9
12
  export let backgroundSize = undefined;
10
13
  export let backgroundPosition = undefined;
11
- export let imgSrc = undefined;
12
14
  export let altText = undefined;
13
- export let image = undefined;
14
15
  export let attributes = undefined;
15
16
  function stringifyStyles(stylesObj) {
16
17
  let styles = "";
@@ -22,6 +23,17 @@ function stringifyStyles(stylesObj) {
22
23
  }
23
24
  return styles;
24
25
  }
26
+ $: srcSetToUse = () => {
27
+ const url = imgSrc || image;
28
+ if (!url || typeof url !== "string") {
29
+ return undefined;
30
+ }
31
+ // We can auto add srcset for cdn.builder.io images
32
+ if (!url.match(/builder\.io/)) {
33
+ return undefined;
34
+ }
35
+ return getSrcSet(url);
36
+ };
25
37
  </script>
26
38
 
27
39
  {#key (isEditing() && imgSrc) || "default-key"}
@@ -32,6 +44,7 @@ function stringifyStyles(stylesObj) {
32
44
  })}
33
45
  alt={altText}
34
46
  src={imgSrc || image}
47
+ srcSet={srcSetToUse()}
35
48
  {...filterAttrs(attributes, "on:", false)}
36
49
  use:setAttrs={filterAttrs(attributes, "on:", true)}
37
50
  />
package/lib/browser/constants/sdk-version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const SDK_VERSION = "4.0.10";
1
+ export declare const SDK_VERSION = "4.1.0";
package/lib/browser/constants/sdk-version.js CHANGED
@@ -1 +1 @@
1
- export const SDK_VERSION = "4.0.10";
1
+ export const SDK_VERSION = "4.1.0";
package/lib/edge/blocks/img/img.svelte CHANGED
@@ -5,12 +5,13 @@
5
5
 
6
6
  <script>import { isEditing } from "../../functions/is-editing";
7
7
  import { filterAttrs } from "../helpers";
8
+ import { getSrcSet } from "../image/image.helpers";
8
9
  import { setAttrs } from "../helpers";
10
+ export let imgSrc = undefined;
11
+ export let image = undefined;
9
12
  export let backgroundSize = undefined;
10
13
  export let backgroundPosition = undefined;
11
- export let imgSrc = undefined;
12
14
  export let altText = undefined;
13
- export let image = undefined;
14
15
  export let attributes = undefined;
15
16
  function stringifyStyles(stylesObj) {
16
17
  let styles = "";
@@ -22,6 +23,17 @@ function stringifyStyles(stylesObj) {
22
23
  }
23
24
  return styles;
24
25
  }
26
+ $: srcSetToUse = () => {
27
+ const url = imgSrc || image;
28
+ if (!url || typeof url !== "string") {
29
+ return undefined;
30
+ }
31
+ // We can auto add srcset for cdn.builder.io images
32
+ if (!url.match(/builder\.io/)) {
33
+ return undefined;
34
+ }
35
+ return getSrcSet(url);
36
+ };
25
37
  </script>
26
38
 
27
39
  {#key (isEditing() && imgSrc) || "default-key"}
@@ -32,6 +44,7 @@ function stringifyStyles(stylesObj) {
32
44
  })}
33
45
  alt={altText}
34
46
  src={imgSrc || image}
47
+ srcSet={srcSetToUse()}
35
48
  {...filterAttrs(attributes, "on:", false)}
36
49
  use:setAttrs={filterAttrs(attributes, "on:", true)}
37
50
  />
package/lib/edge/constants/sdk-version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const SDK_VERSION = "4.0.10";
1
+ export declare const SDK_VERSION = "4.1.0";
package/lib/edge/constants/sdk-version.js CHANGED
@@ -1 +1 @@
1
- export const SDK_VERSION = "4.0.10";
1
+ export const SDK_VERSION = "4.1.0";
package/lib/node/blocks/img/img.svelte CHANGED
@@ -5,12 +5,13 @@
5
5
 
6
6
  <script>import { isEditing } from "../../functions/is-editing";
7
7
  import { filterAttrs } from "../helpers";
8
+ import { getSrcSet } from "../image/image.helpers";
8
9
  import { setAttrs } from "../helpers";
10
+ export let imgSrc = undefined;
11
+ export let image = undefined;
9
12
  export let backgroundSize = undefined;
10
13
  export let backgroundPosition = undefined;
11
- export let imgSrc = undefined;
12
14
  export let altText = undefined;
13
- export let image = undefined;
14
15
  export let attributes = undefined;
15
16
  function stringifyStyles(stylesObj) {
16
17
  let styles = "";
@@ -22,6 +23,17 @@ function stringifyStyles(stylesObj) {
22
23
  }
23
24
  return styles;
24
25
  }
26
+ $: srcSetToUse = () => {
27
+ const url = imgSrc || image;
28
+ if (!url || typeof url !== "string") {
29
+ return undefined;
30
+ }
31
+ // We can auto add srcset for cdn.builder.io images
32
+ if (!url.match(/builder\.io/)) {
33
+ return undefined;
34
+ }
35
+ return getSrcSet(url);
36
+ };
25
37
  </script>
26
38
 
27
39
  {#key (isEditing() && imgSrc) || "default-key"}
@@ -32,6 +44,7 @@ function stringifyStyles(stylesObj) {
32
44
  })}
33
45
  alt={altText}
34
46
  src={imgSrc || image}
47
+ srcSet={srcSetToUse()}
35
48
  {...filterAttrs(attributes, "on:", false)}
36
49
  use:setAttrs={filterAttrs(attributes, "on:", true)}
37
50
  />
package/lib/node/constants/sdk-version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const SDK_VERSION = "4.0.10";
1
+ export declare const SDK_VERSION = "4.1.0";
package/lib/node/constants/sdk-version.js CHANGED
@@ -1 +1 @@
1
- export const SDK_VERSION = "4.0.10";
1
+ export const SDK_VERSION = "4.1.0";
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": "4.0.10",
4
+ "version": "4.1.0",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "lib",
package/src/blocks/img/img.svelte CHANGED
@@ -25,13 +25,14 @@
25
25
  <script lang="ts">
26
26
  import { isEditing } from "../../functions/is-editing";
27
27
  import { filterAttrs } from "../helpers";
28
+ import { getSrcSet } from "../image/image.helpers";
28
29
  import { setAttrs } from "../helpers";
29
30
 
31
+ export let imgSrc: ImgProps["imgSrc"] = undefined;
32
+ export let image: ImgProps["image"] = undefined;
30
33
  export let backgroundSize: ImgProps["backgroundSize"] = undefined;
31
34
  export let backgroundPosition: ImgProps["backgroundPosition"] = undefined;
32
- export let imgSrc: ImgProps["imgSrc"] = undefined;
33
35
  export let altText: ImgProps["altText"] = undefined;
34
- export let image: ImgProps["image"] = undefined;
35
36
  export let attributes: ImgProps["attributes"] = undefined;
36
37
  function stringifyStyles(stylesObj) {
37
38
  let styles = "";
@@ -43,6 +44,19 @@
43
44
  }
44
45
  return styles;
45
46
  }
47
+
48
+ $: srcSetToUse = () => {
49
+ const url = imgSrc || image;
50
+ if (!url || typeof url !== "string") {
51
+ return undefined;
52
+ }
53
+
54
+ // We can auto add srcset for cdn.builder.io images
55
+ if (!url.match(/builder\.io/)) {
56
+ return undefined;
57
+ }
58
+ return getSrcSet(url);
59
+ };
46
60
  </script>
47
61
 
48
62
  {#key (isEditing() && imgSrc) || "default-key"}
@@ -53,6 +67,7 @@
53
67
  })}
54
68
  alt={altText}
55
69
  src={imgSrc || image}
70
+ srcSet={srcSetToUse()}
56
71
  {...filterAttrs(attributes, "on:", false)}
57
72
  use:setAttrs={filterAttrs(attributes, "on:", true)}
58
73
  />
package/src/constants/sdk-version.ts CHANGED
@@ -1 +1 @@
1
- export const SDK_VERSION = "4.0.10"
1
+ export const SDK_VERSION = "4.1.0"