@builder.io/sdk-svelte 0.0.10-0 → 0.0.10

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 (10) hide show
  1. package/package/--package.json +1 -1
  2. package/package/blocks/symbol/symbol.svelte +17 -4
  3. package/package/blocks/symbol/symbol.svelte.d.ts +2 -1
  4. package/package/components/render-block/render-block.svelte +4 -1
  5. package/package/functions/get-react-native-block-styles.d.ts +2 -1
  6. package/package/functions/get-react-native-block-styles.js +2 -1
  7. package/package.json +1 -1
  8. package/src/blocks/symbol/symbol.svelte +17 -4
  9. package/src/components/render-block/render-block.svelte +4 -1
  10. package/src/functions/get-react-native-block-styles.ts +3 -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.0.9",
4
+ "version": "0.0.10-0",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "package",
package/package/blocks/symbol/symbol.svelte CHANGED
@@ -4,6 +4,7 @@
4
4
  import RenderContent from "../../components/render-content/render-content.svelte";
5
5
  import BuilderContext from "../../context/builder.context.js";
6
6
  import { getContent } from "../../functions/get-content/index.js";
7
+ import { TARGET } from "../../constants/target";
7
8
  const isEvent = (attr) => attr.startsWith("on:");
8
9
  const isNonEvent = (attr) => !attr.startsWith("on:");
9
10
  const filterAttrs = (attrs, filter) => {
@@ -31,13 +32,25 @@ const setAttrs = (node, attrs) => {
31
32
  },
32
33
  };
33
34
  };
34
- export let symbol;
35
35
  export let attributes;
36
+ export let symbol;
37
+ export let dynamic;
36
38
  let builderContext = getContext(BuilderContext.key);
39
+ $: className = () => {
40
+ return [
41
+ ...(TARGET === "vue2" || TARGET === "vue3"
42
+ ? Object.keys(attributes.class)
43
+ : [attributes.class]),
44
+ "builder-symbol",
45
+ symbol?.inline ? "builder-inline-symbol" : undefined,
46
+ symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
47
+ ]
48
+ .filter(Boolean)
49
+ .join(" ");
50
+ };
37
51
  $: contentToUse = () => {
38
52
  return symbol?.content || fetchedContent;
39
53
  };
40
- let className = "builder-symbol";
41
54
  let fetchedContent = null;
42
55
  function onUpdateFn_0() {
43
56
  const symbolToUse = symbol;
@@ -71,9 +84,9 @@ $: onUpdateFn_0(...[symbol, fetchedContent]);
71
84
  <div
72
85
  {...filterAttrs(attributes, isNonEvent)}
73
86
  dataSet={{
74
- class: className,
87
+ class: className(),
75
88
  }}
76
- class={className}
89
+ class={className()}
77
90
  use:setAttrs={filterAttrs(attributes, isEvent)}
78
91
  >
79
92
  <RenderContent
package/package/blocks/symbol/symbol.svelte.d.ts CHANGED
@@ -19,8 +19,9 @@ export interface SymbolProps {
19
19
  }
20
20
  declare const __propDef: {
21
21
  props: {
22
- symbol: SymbolProps["symbol"];
23
22
  attributes: SymbolProps["attributes"];
23
+ symbol: SymbolProps["symbol"];
24
+ dynamic: SymbolProps["dynamic"];
24
25
  };
25
26
  events: {
26
27
  [evt: string]: CustomEvent<any>;
package/package/components/render-block/render-block.svelte CHANGED
@@ -75,13 +75,15 @@ $: actions = () => {
75
75
  });
76
76
  };
77
77
  $: attributes = () => {
78
+ const blockProperties = getBlockProperties(useBlock());
78
79
  return {
79
- ...getBlockProperties(useBlock()),
80
+ ...blockProperties,
80
81
  ...(TARGET === "reactNative"
81
82
  ? {
82
83
  style: getReactNativeBlockStyles({
83
84
  block: useBlock(),
84
85
  context: context,
86
+ blockStyles: blockProperties.style,
85
87
  }),
86
88
  }
87
89
  : {}),
@@ -171,6 +173,7 @@ $: inheritedTextStyles = () => {
171
173
  const styles = getReactNativeBlockStyles({
172
174
  block: useBlock(),
173
175
  context: context,
176
+ blockStyles: attributes().style,
174
177
  });
175
178
  return extractTextStyles(styles);
176
179
  };
package/package/functions/get-react-native-block-styles.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { BuilderContextInterface } from '../context/types.js';
2
2
  import type { BuilderBlock } from '../types/builder-block.js';
3
- export declare function getReactNativeBlockStyles({ block, context, }: {
3
+ export declare function getReactNativeBlockStyles({ block, context, blockStyles, }: {
4
4
  block: BuilderBlock;
5
5
  context: BuilderContextInterface;
6
+ blockStyles: any;
6
7
  }): CSSStyleDeclaration | Record<string, string | undefined>;
package/package/functions/get-react-native-block-styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-styles.js';
2
- export function getReactNativeBlockStyles({ block, context, }) {
2
+ export function getReactNativeBlockStyles({ block, context, blockStyles, }) {
3
3
  const responsiveStyles = block.responsiveStyles;
4
4
  if (!responsiveStyles) {
5
5
  return {};
@@ -10,6 +10,7 @@ export function getReactNativeBlockStyles({ block, context, }) {
10
10
  ...(responsiveStyles.large || {}),
11
11
  ...(responsiveStyles.medium || {}),
12
12
  ...(responsiveStyles.small || {}),
13
+ ...blockStyles,
13
14
  };
14
15
  const newStyles = sanitizeReactNativeBlockStyles(styles);
15
16
  return newStyles;
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.0.10-0",
4
+ "version": "0.0.10",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "package",
package/src/blocks/symbol/symbol.svelte CHANGED
@@ -30,6 +30,7 @@
30
30
  import RenderContent from "../../components/render-content/render-content.svelte";
31
31
  import BuilderContext from "../../context/builder.context.js";
32
32
  import { getContent } from "../../functions/get-content/index.js";
33
+ import { TARGET } from "../../constants/target";
33
34
 
34
35
  const isEvent = (attr) => attr.startsWith("on:");
35
36
  const isNonEvent = (attr) => !attr.startsWith("on:");
@@ -65,16 +66,28 @@
65
66
  };
66
67
  };
67
68
 
68
- export let symbol: SymbolProps["symbol"];
69
69
  export let attributes: SymbolProps["attributes"];
70
+ export let symbol: SymbolProps["symbol"];
71
+ export let dynamic: SymbolProps["dynamic"];
70
72
 
71
73
  let builderContext = getContext(BuilderContext.key);
72
74
 
75
+ $: className = () => {
76
+ return [
77
+ ...(TARGET === "vue2" || TARGET === "vue3"
78
+ ? Object.keys(attributes.class)
79
+ : [attributes.class]),
80
+ "builder-symbol",
81
+ symbol?.inline ? "builder-inline-symbol" : undefined,
82
+ symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
83
+ ]
84
+ .filter(Boolean)
85
+ .join(" ");
86
+ };
73
87
  $: contentToUse = () => {
74
88
  return symbol?.content || fetchedContent;
75
89
  };
76
90
 
77
- let className = "builder-symbol";
78
91
  let fetchedContent = null;
79
92
 
80
93
  function onUpdateFn_0() {
@@ -112,9 +125,9 @@
112
125
  <div
113
126
  {...filterAttrs(attributes, isNonEvent)}
114
127
  dataSet={{
115
- class: className,
128
+ class: className(),
116
129
  }}
117
- class={className}
130
+ class={className()}
118
131
  use:setAttrs={filterAttrs(attributes, isEvent)}
119
132
  >
120
133
  <RenderContent
package/src/components/render-block/render-block.svelte CHANGED
@@ -100,13 +100,15 @@
100
100
  });
101
101
  };
102
102
  $: attributes = () => {
103
+ const blockProperties = getBlockProperties(useBlock());
103
104
  return {
104
- ...getBlockProperties(useBlock()),
105
+ ...blockProperties,
105
106
  ...(TARGET === "reactNative"
106
107
  ? {
107
108
  style: getReactNativeBlockStyles({
108
109
  block: useBlock(),
109
110
  context: context,
111
+ blockStyles: blockProperties.style,
110
112
  }),
111
113
  }
112
114
  : {}),
@@ -198,6 +200,7 @@
198
200
  const styles = getReactNativeBlockStyles({
199
201
  block: useBlock(),
200
202
  context: context,
203
+ blockStyles: attributes().style,
201
204
  });
202
205
  return extractTextStyles(styles);
203
206
  };
package/src/functions/get-react-native-block-styles.ts CHANGED
@@ -5,9 +5,11 @@ import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-st
5
5
  export function getReactNativeBlockStyles({
6
6
  block,
7
7
  context,
8
+ blockStyles,
8
9
  }: {
9
10
  block: BuilderBlock;
10
11
  context: BuilderContextInterface;
12
+ blockStyles: any;
11
13
  }): CSSStyleDeclaration | Record<string, string | undefined> {
12
14
  const responsiveStyles = block.responsiveStyles;
13
15
  if (!responsiveStyles) {
@@ -20,6 +22,7 @@ export function getReactNativeBlockStyles({
20
22
  ...(responsiveStyles.large || {}),
21
23
  ...(responsiveStyles.medium || {}),
22
24
  ...(responsiveStyles.small || {}),
25
+ ...blockStyles,
23
26
  } as Record<string, string | number>;
24
27
 
25
28
  const newStyles = sanitizeReactNativeBlockStyles(