@builder.io/sdk-svelte 3.0.0 → 3.0.2

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 (136) hide show
  1. package/lib/browser/blocks/image/component-info.js +2 -1
  2. package/lib/browser/blocks/image/image.svelte +2 -1
  3. package/lib/browser/blocks/img/component-info.js +2 -1
  4. package/lib/browser/blocks/text/text.svelte +2 -15
  5. package/lib/browser/blocks/text/text.svelte.d.ts +0 -1
  6. package/lib/browser/blocks/video/component-info.js +3 -2
  7. package/lib/browser/components/block/block.helpers.d.ts +6 -3
  8. package/lib/browser/components/block/block.helpers.js +16 -5
  9. package/lib/browser/components/block/block.svelte +3 -3
  10. package/lib/browser/components/content/components/enable-editor.helpers.d.ts +11 -0
  11. package/lib/browser/components/content/components/enable-editor.helpers.js +15 -0
  12. package/lib/browser/components/content/components/enable-editor.svelte +37 -8
  13. package/lib/browser/components/content/components/enable-editor.svelte.d.ts +1 -1
  14. package/lib/browser/components/content/content.svelte +4 -15
  15. package/lib/browser/components/content/content.svelte.d.ts +1 -1
  16. package/lib/browser/constants/file-types.d.ts +2 -0
  17. package/lib/browser/constants/file-types.js +2 -0
  18. package/lib/browser/constants/sdk-version.d.ts +1 -1
  19. package/lib/browser/constants/sdk-version.js +1 -1
  20. package/lib/browser/context/builder.context.d.ts +1 -0
  21. package/lib/browser/context/builder.context.js +1 -0
  22. package/lib/browser/context/types.d.ts +1 -0
  23. package/lib/browser/functions/evaluate/edge-runtime/edge-runtime.js +1 -4
  24. package/lib/browser/functions/extract-localized-values.d.ts +2 -0
  25. package/lib/browser/functions/extract-localized-values.js +37 -0
  26. package/lib/browser/functions/get-block-component-options.d.ts +2 -1
  27. package/lib/browser/functions/get-block-component-options.js +18 -2
  28. package/lib/browser/functions/get-content/generate-content-url.js +28 -3
  29. package/lib/browser/functions/get-processed-block.d.ts +1 -6
  30. package/lib/browser/functions/get-processed-block.js +11 -14
  31. package/lib/browser/functions/register-component.js +4 -1
  32. package/lib/browser/functions/traverse.d.ts +34 -0
  33. package/lib/browser/functions/traverse.js +63 -0
  34. package/lib/browser/helpers/flatten.d.ts +6 -0
  35. package/lib/browser/helpers/flatten.js +23 -0
  36. package/lib/browser/server-index.d.ts +1 -1
  37. package/lib/browser/types/components.d.ts +3 -0
  38. package/lib/edge/blocks/image/component-info.js +2 -1
  39. package/lib/edge/blocks/image/image.svelte +2 -1
  40. package/lib/edge/blocks/img/component-info.js +2 -1
  41. package/lib/edge/blocks/text/text.svelte +2 -15
  42. package/lib/edge/blocks/text/text.svelte.d.ts +0 -1
  43. package/lib/edge/blocks/video/component-info.js +3 -2
  44. package/lib/edge/components/block/block.helpers.d.ts +6 -3
  45. package/lib/edge/components/block/block.helpers.js +16 -5
  46. package/lib/edge/components/block/block.svelte +3 -3
  47. package/lib/edge/components/content/components/enable-editor.helpers.d.ts +11 -0
  48. package/lib/edge/components/content/components/enable-editor.helpers.js +15 -0
  49. package/lib/edge/components/content/components/enable-editor.svelte +37 -8
  50. package/lib/edge/components/content/components/enable-editor.svelte.d.ts +1 -1
  51. package/lib/edge/components/content/content.svelte +4 -15
  52. package/lib/edge/components/content/content.svelte.d.ts +1 -1
  53. package/lib/edge/constants/file-types.d.ts +2 -0
  54. package/lib/edge/constants/file-types.js +2 -0
  55. package/lib/edge/constants/sdk-version.d.ts +1 -1
  56. package/lib/edge/constants/sdk-version.js +1 -1
  57. package/lib/edge/context/builder.context.d.ts +1 -0
  58. package/lib/edge/context/builder.context.js +1 -0
  59. package/lib/edge/context/types.d.ts +1 -0
  60. package/lib/edge/functions/evaluate/edge-runtime/edge-runtime.js +1 -4
  61. package/lib/edge/functions/extract-localized-values.d.ts +2 -0
  62. package/lib/edge/functions/extract-localized-values.js +37 -0
  63. package/lib/edge/functions/get-block-component-options.d.ts +2 -1
  64. package/lib/edge/functions/get-block-component-options.js +18 -2
  65. package/lib/edge/functions/get-content/generate-content-url.js +28 -3
  66. package/lib/edge/functions/get-processed-block.d.ts +1 -6
  67. package/lib/edge/functions/get-processed-block.js +11 -14
  68. package/lib/edge/functions/register-component.js +4 -1
  69. package/lib/edge/functions/traverse.d.ts +34 -0
  70. package/lib/edge/functions/traverse.js +63 -0
  71. package/lib/edge/helpers/flatten.d.ts +6 -0
  72. package/lib/edge/helpers/flatten.js +23 -0
  73. package/lib/edge/server-index.d.ts +1 -1
  74. package/lib/edge/types/components.d.ts +3 -0
  75. package/lib/node/blocks/image/component-info.js +2 -1
  76. package/lib/node/blocks/image/image.svelte +2 -1
  77. package/lib/node/blocks/img/component-info.js +2 -1
  78. package/lib/node/blocks/text/text.svelte +2 -15
  79. package/lib/node/blocks/text/text.svelte.d.ts +0 -1
  80. package/lib/node/blocks/video/component-info.js +3 -2
  81. package/lib/node/components/block/block.helpers.d.ts +6 -3
  82. package/lib/node/components/block/block.helpers.js +16 -5
  83. package/lib/node/components/block/block.svelte +3 -3
  84. package/lib/node/components/content/components/enable-editor.helpers.d.ts +11 -0
  85. package/lib/node/components/content/components/enable-editor.helpers.js +15 -0
  86. package/lib/node/components/content/components/enable-editor.svelte +37 -8
  87. package/lib/node/components/content/components/enable-editor.svelte.d.ts +1 -1
  88. package/lib/node/components/content/content.svelte +4 -15
  89. package/lib/node/components/content/content.svelte.d.ts +1 -1
  90. package/lib/node/constants/file-types.d.ts +2 -0
  91. package/lib/node/constants/file-types.js +2 -0
  92. package/lib/node/constants/sdk-version.d.ts +1 -1
  93. package/lib/node/constants/sdk-version.js +1 -1
  94. package/lib/node/context/builder.context.d.ts +1 -0
  95. package/lib/node/context/builder.context.js +1 -0
  96. package/lib/node/context/types.d.ts +1 -0
  97. package/lib/node/functions/evaluate/edge-runtime/edge-runtime.js +1 -4
  98. package/lib/node/functions/extract-localized-values.d.ts +2 -0
  99. package/lib/node/functions/extract-localized-values.js +37 -0
  100. package/lib/node/functions/get-block-component-options.d.ts +2 -1
  101. package/lib/node/functions/get-block-component-options.js +18 -2
  102. package/lib/node/functions/get-content/generate-content-url.js +28 -3
  103. package/lib/node/functions/get-processed-block.d.ts +1 -6
  104. package/lib/node/functions/get-processed-block.js +11 -14
  105. package/lib/node/functions/register-component.js +4 -1
  106. package/lib/node/functions/traverse.d.ts +34 -0
  107. package/lib/node/functions/traverse.js +63 -0
  108. package/lib/node/helpers/flatten.d.ts +6 -0
  109. package/lib/node/helpers/flatten.js +23 -0
  110. package/lib/node/server-index.d.ts +1 -1
  111. package/lib/node/types/components.d.ts +3 -0
  112. package/package.json +1 -1
  113. package/src/blocks/image/component-info.ts +2 -1
  114. package/src/blocks/image/image.svelte +4 -1
  115. package/src/blocks/img/component-info.ts +2 -1
  116. package/src/blocks/text/text.svelte +1 -24
  117. package/src/blocks/video/component-info.ts +3 -2
  118. package/src/components/block/block.helpers.ts +18 -6
  119. package/src/components/block/block.svelte +7 -3
  120. package/src/components/content/components/enable-editor.helpers.ts +18 -0
  121. package/src/components/content/components/enable-editor.svelte +40 -8
  122. package/src/components/content/content.svelte +4 -11
  123. package/src/constants/file-types.ts +2 -0
  124. package/src/constants/sdk-version.ts +1 -1
  125. package/src/context/builder.context.ts +1 -0
  126. package/src/context/types.ts +1 -0
  127. package/src/functions/evaluate/edge-runtime/edge-runtime.ts +1 -5
  128. package/src/functions/extract-localized-values.ts +38 -0
  129. package/src/functions/get-block-component-options.ts +19 -2
  130. package/src/functions/get-content/generate-content-url.ts +30 -3
  131. package/src/functions/get-processed-block.ts +10 -18
  132. package/src/functions/register-component.ts +4 -1
  133. package/src/functions/traverse.ts +64 -0
  134. package/src/helpers/flatten.ts +23 -0
  135. package/src/server-index.ts +1 -1
  136. package/src/types/components.ts +3 -0
@@ -10,8 +10,11 @@ const serializeFn = (fnValue) => {
10
10
  // 2. `name(args) => {code}`
11
11
  // 3. `(args) => {}`
12
12
  // 4. `args => {}`
13
+ // 5. `async function(args) {code}`
14
+ // 6. `async (args) => {}`
15
+ // 7. `async args => {}`
13
16
  const isArrowWithoutParens = /^[a-zA-Z0-9_]+\s*=>/i.test(fnStr);
14
- const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(') && !isArrowWithoutParens;
17
+ const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('async') && !fnStr.startsWith('(') && !isArrowWithoutParens;
15
18
  return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
16
19
  };
17
20
  export function serializeIncludingFunctions(info) {
@@ -0,0 +1,34 @@
1
+ type TraverseCallback = (value: any, update: (newValue: any) => void) => void;
2
+ /**
3
+ * Recursively traverses an object or array, invoking a callback on each value.
4
+ *
5
+ * @param {any} obj - The object or array to traverse. Can also handle primitives, null, or undefined.
6
+ * @param {TraverseCallback} callback - The function to invoke on each value. Receives the current value
7
+ * and an `update` function to modify the value in its parent container.
8
+ * @param {any} [parent=null] - The parent object or array of the current value. Used internally.
9
+ * @param {any} [key=null] - The key or index of the current value in its parent. Used internally.
10
+ * @param {WeakSet} [visited=new WeakSet()] - Tracks visited objects to handle circular references. Used internally.
11
+ *
12
+ * @example
13
+ * // Example: Doubling all numbers in an object
14
+ * const obj = { a: 1, b: [2, 3, { c: 4 }] };
15
+ * traverse(obj, (value, update) => {
16
+ * if (typeof value === 'number') {
17
+ * update(value * 2);
18
+ * }
19
+ * });
20
+ * console.log(obj); // { a: 2, b: [4, 6, { c: 8 }] }
21
+ *
22
+ * @example
23
+ * // Example: Handling circular references
24
+ * const obj = { a: 1 };
25
+ * obj.self = obj;
26
+ * traverse(obj, (value, update) => {
27
+ * if (typeof value === 'number') {
28
+ * update(value * 2);
29
+ * }
30
+ * });
31
+ * console.log(obj.a); // 2
32
+ */
33
+ export declare function traverse(obj: any, callback: TraverseCallback, parent?: any, key?: any, visited?: WeakSet<WeakKey>): void;
34
+ export {};
@@ -0,0 +1,63 @@
1
+ /**
2
+ * Recursively traverses an object or array, invoking a callback on each value.
3
+ *
4
+ * @param {any} obj - The object or array to traverse. Can also handle primitives, null, or undefined.
5
+ * @param {TraverseCallback} callback - The function to invoke on each value. Receives the current value
6
+ * and an `update` function to modify the value in its parent container.
7
+ * @param {any} [parent=null] - The parent object or array of the current value. Used internally.
8
+ * @param {any} [key=null] - The key or index of the current value in its parent. Used internally.
9
+ * @param {WeakSet} [visited=new WeakSet()] - Tracks visited objects to handle circular references. Used internally.
10
+ *
11
+ * @example
12
+ * // Example: Doubling all numbers in an object
13
+ * const obj = { a: 1, b: [2, 3, { c: 4 }] };
14
+ * traverse(obj, (value, update) => {
15
+ * if (typeof value === 'number') {
16
+ * update(value * 2);
17
+ * }
18
+ * });
19
+ * console.log(obj); // { a: 2, b: [4, 6, { c: 8 }] }
20
+ *
21
+ * @example
22
+ * // Example: Handling circular references
23
+ * const obj = { a: 1 };
24
+ * obj.self = obj;
25
+ * traverse(obj, (value, update) => {
26
+ * if (typeof value === 'number') {
27
+ * update(value * 2);
28
+ * }
29
+ * });
30
+ * console.log(obj.a); // 2
31
+ */
32
+ export function traverse(obj, callback, parent = null, key = null, visited = new WeakSet()) {
33
+ if (obj == null || typeof obj !== 'object') {
34
+ callback(obj, (newValue) => {
35
+ if (parent !== null && key !== null) {
36
+ parent[key] = newValue;
37
+ }
38
+ });
39
+ return;
40
+ }
41
+ if (visited.has(obj)) {
42
+ return;
43
+ }
44
+ visited.add(obj);
45
+ if (Array.isArray(obj)) {
46
+ obj.forEach((item, index) => {
47
+ const update = (newValue) => {
48
+ obj[index] = newValue;
49
+ };
50
+ callback(item, update);
51
+ traverse(item, callback, obj, index, visited);
52
+ });
53
+ }
54
+ else {
55
+ Object.entries(obj).forEach(([key, value]) => {
56
+ const update = (newValue) => {
57
+ obj[key] = newValue;
58
+ };
59
+ callback(value, update);
60
+ traverse(value, callback, obj, key, visited);
61
+ });
62
+ }
63
+ }
@@ -14,3 +14,9 @@ export declare function flatten<T extends Record<string, any>>(object: T, path?:
14
14
  export declare function flattenMongoQuery(obj: any, _current?: any, _res?: any): {
15
15
  [key: string]: string;
16
16
  };
17
+ /**
18
+ * Unflatten a flat object with dot-separated keys back into a nested object.
19
+ *
20
+ * { 'foo.bar': 'baz' } -> { foo: { bar: 'baz' }}
21
+ */
22
+ export declare function unflatten(obj: any): any;
@@ -37,3 +37,26 @@ export function flattenMongoQuery(obj, _current, _res = {}) {
37
37
  }
38
38
  return _res;
39
39
  }
40
+ /**
41
+ * Unflatten a flat object with dot-separated keys back into a nested object.
42
+ *
43
+ * { 'foo.bar': 'baz' } -> { foo: { bar: 'baz' }}
44
+ */
45
+ export function unflatten(obj) {
46
+ const result = {};
47
+ for (const key in obj) {
48
+ const parts = key.split('.');
49
+ let current = result;
50
+ for (let i = 0; i < parts.length; i++) {
51
+ const part = parts[i];
52
+ if (i === parts.length - 1) {
53
+ current[part] = obj[key];
54
+ }
55
+ else {
56
+ current[part] = current[part] || {};
57
+ current = current[part];
58
+ }
59
+ }
60
+ }
61
+ return result;
62
+ }
@@ -15,7 +15,7 @@ export type { ContentVariantsPrps as ContentProps } from './components/content-v
15
15
  /**
16
16
  * General Builder types
17
17
  */
18
- export type { RegisteredComponent } from './context/types';
18
+ export type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from './context/types';
19
19
  export type { BuilderBlock } from './types/builder-block';
20
20
  export type { BuilderContent } from './types/builder-content';
21
21
  export type { ComponentInfo } from './types/components';
@@ -146,6 +146,9 @@ export interface ComponentInfo {
146
146
  */
147
147
  builderLinkComponent?: boolean;
148
148
  };
149
+ meta?: {
150
+ [key: string]: any;
151
+ };
149
152
  }
150
153
  type Permission = 'read' | 'publish' | 'editCode' | 'editDesigns' | 'admin' | 'create';
151
154
  export {};
@@ -1,3 +1,4 @@
1
+ import { IMAGE_FILE_TYPES } from '../../constants/file-types';
1
2
  export const componentInfo = {
2
3
  name: 'Image',
3
4
  static: true,
@@ -13,7 +14,7 @@ export const componentInfo = {
13
14
  name: 'image',
14
15
  type: 'file',
15
16
  bubble: true,
16
- allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'webp'],
17
+ allowedFileTypes: IMAGE_FILE_TYPES,
17
18
  required: true,
18
19
  defaultValue: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a',
19
20
  onChange: (options) => {
@@ -29,7 +29,8 @@ $: srcSetToUse = () => {
29
29
  if (!url ||
30
30
  // We can auto add srcset for cdn.builder.io and shopify
31
31
  // images, otherwise you can supply this prop manually
32
- !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
32
+ !(typeof url === "string" &&
33
+ (url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/)))) {
33
34
  return srcset;
34
35
  }
35
36
  if (noWebp) {
@@ -1,3 +1,4 @@
1
+ import { IMAGE_FILE_TYPES } from '../../constants/file-types';
1
2
  export const componentInfo = {
2
3
  // friendlyName?
3
4
  name: 'Raw:Img',
@@ -7,7 +8,7 @@ export const componentInfo = {
7
8
  name: 'image',
8
9
  bubble: true,
9
10
  type: 'file',
10
- allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'gif', 'webp'],
11
+ allowedFileTypes: IMAGE_FILE_TYPES,
11
12
  required: true
12
13
  }],
13
14
  noWrap: true,
@@ -1,6 +1,4 @@
1
- <script>import { evaluate } from "../../functions/evaluate/index";
2
- export let builderContext;
3
- export let text = undefined;
1
+ <script>export let text = undefined;
4
2
  function stringifyStyles(stylesObj) {
5
3
  let styles = "";
6
4
  for (let key in stylesObj) {
@@ -11,17 +9,6 @@ function stringifyStyles(stylesObj) {
11
9
  }
12
10
  return styles;
13
11
  }
14
- $: processedText = () => {
15
- const context = $builderContext;
16
- const { context: contextContext, localState, rootState, rootSetState, } = context;
17
- return String(text?.toString() || "").replace(/{{([^}]+)}}/g, (match, group) => evaluate({
18
- code: group,
19
- context: contextContext,
20
- localState,
21
- rootState,
22
- rootSetState,
23
- }));
24
- };
25
12
  </script>
26
13
 
27
14
  <div
@@ -30,5 +17,5 @@ $: processedText = () => {
30
17
  })}
31
18
  class="builder-text"
32
19
  >
33
- {@html processedText()}
20
+ {@html text?.toString() || ""}
34
21
  </div>
@@ -2,7 +2,6 @@ import { SvelteComponent } from "svelte";
2
2
  import type { TextProps } from "./text.types";
3
3
  declare const __propDef: {
4
4
  props: {
5
- builderContext: TextProps["builderContext"];
6
5
  text?: TextProps["text"];
7
6
  };
8
7
  events: {
@@ -1,3 +1,4 @@
1
+ import { IMAGE_FILE_TYPES, VIDEO_FILE_TYPES } from '../../constants/file-types';
1
2
  export const componentInfo = {
2
3
  name: 'Video',
3
4
  canHaveChildren: true,
@@ -9,14 +10,14 @@ export const componentInfo = {
9
10
  inputs: [{
10
11
  name: 'video',
11
12
  type: 'file',
12
- allowedFileTypes: ['mp4'],
13
+ allowedFileTypes: VIDEO_FILE_TYPES,
13
14
  bubble: true,
14
15
  defaultValue: 'https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd27731a526464deba0016216f5f9e570%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&token=d27731a526464deba0016216f5f9e570&alt=media&optimized=true',
15
16
  required: true
16
17
  }, {
17
18
  name: 'posterImage',
18
19
  type: 'file',
19
- allowedFileTypes: ['jpeg', 'png'],
20
+ allowedFileTypes: IMAGE_FILE_TYPES,
20
21
  helperText: 'Image to show before the video plays'
21
22
  }, {
22
23
  name: 'autoPlay',
@@ -3,9 +3,10 @@ import type { Writable } from "svelte/store";
3
3
  import type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from '../../context/types';
4
4
  import type { BuilderBlock } from '../../types/builder-block';
5
5
  import type { RepeatData } from './types';
6
- export declare const getComponent: ({ block, registeredComponents }: {
6
+ export declare const getComponent: ({ block, registeredComponents, model }: {
7
7
  block: BuilderBlock;
8
8
  registeredComponents: RegisteredComponents;
9
+ model: string;
9
10
  }) => RegisteredComponent | null | undefined;
10
11
  export declare const getRepeatItemData: ({ block, context }: {
11
12
  block: BuilderBlock;
@@ -20,8 +21,10 @@ export declare const provideLinkComponent: (block: RegisteredComponent | null |
20
21
  } | {
21
22
  builderLinkComponent?: undefined;
22
23
  };
23
- export declare const provideRegisteredComponents: (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents) => {
24
- builderComponents: RegisteredComponents;
24
+ export declare const provideRegisteredComponents: (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents, model: string) => {
25
+ builderComponents: {
26
+ [k: string]: RegisteredComponent;
27
+ };
25
28
  } | {
26
29
  builderComponents?: undefined;
27
30
  };
@@ -1,13 +1,20 @@
1
1
  import { evaluate } from '../../functions/evaluate/index';
2
2
  import { extractTextStyles } from '../../functions/extract-text-styles';
3
3
  import { getStyle } from '../../functions/get-style';
4
- export const getComponent = ({ block, registeredComponents }) => {
4
+ const checkIsComponentRestricted = (component, model) => {
5
+ if (!component)
6
+ return true;
7
+ if (!model)
8
+ return false;
9
+ return component.models && component.models.length > 0 && !component.models.includes(model);
10
+ };
11
+ export const getComponent = ({ block, registeredComponents, model }) => {
5
12
  const componentName = block.component?.name;
6
13
  if (!componentName) {
7
14
  return null;
8
15
  }
9
16
  const ref = registeredComponents[componentName];
10
- if (!ref) {
17
+ if (!ref || checkIsComponentRestricted(ref, model)) {
11
18
  // TODO: Public doc page with more info about this message
12
19
  console.warn(`
13
20
  Could not find a registered component named "${componentName}".
@@ -71,11 +78,15 @@ export const provideLinkComponent = (block, linkComponent) => {
71
78
  };
72
79
  return {};
73
80
  };
74
- export const provideRegisteredComponents = (block, registeredComponents) => {
75
- if (block?.shouldReceiveBuilderProps?.builderComponents)
81
+ export const provideRegisteredComponents = (block, registeredComponents, model) => {
82
+ if (block?.shouldReceiveBuilderProps?.builderComponents) {
83
+ const filteredRegisteredComponents = Object.fromEntries(Object.entries(registeredComponents).filter(([_, component]) => {
84
+ return !checkIsComponentRestricted(component, model);
85
+ }));
76
86
  return {
77
- builderComponents: registeredComponents
87
+ builderComponents: filteredRegisteredComponents
78
88
  };
89
+ }
79
90
  return {};
80
91
  };
81
92
  export const provideBuilderBlock = (block, builderBlock) => {
@@ -31,7 +31,6 @@ $: processedBlock = () => {
31
31
  rootState: $context.rootState,
32
32
  rootSetState: $context.rootSetState,
33
33
  context: $context.context,
34
- shouldEvaluateBindings: true,
35
34
  });
36
35
  return blockToUse;
37
36
  };
@@ -39,6 +38,7 @@ $: blockComponent = () => {
39
38
  return getComponent({
40
39
  block: processedBlock(),
41
40
  registeredComponents: registeredComponents,
41
+ model: $context.model,
42
42
  });
43
43
  };
44
44
  $: Tag = () => {
@@ -77,11 +77,11 @@ $: componentRefProps = () => {
77
77
  blockChildren: processedBlock().children ?? [],
78
78
  componentRef: blockComponent?.()?.component,
79
79
  componentOptions: {
80
- ...getBlockComponentOptions(processedBlock()),
80
+ ...getBlockComponentOptions(processedBlock(), $context),
81
81
  ...provideBuilderBlock(blockComponent(), processedBlock()),
82
82
  ...provideBuilderContext(blockComponent(), context),
83
83
  ...provideLinkComponent(blockComponent(), linkComponent),
84
- ...provideRegisteredComponents(blockComponent(), registeredComponents),
84
+ ...provideRegisteredComponents(blockComponent(), registeredComponents, $context.model),
85
85
  },
86
86
  context: context,
87
87
  linkComponent: linkComponent,
@@ -0,0 +1,11 @@
1
+ import type { Target } from '../../../types/targets';
2
+ /**
3
+ * SDKS that use the elementRef approach to enable visual editing.
4
+ * We don't need to render the div for other SDKs as they attach event listeners to the window.
5
+ */
6
+ export declare const SDKS_USING_ELEMENT_REF_APPROACH: Target[];
7
+ /**
8
+ * We need to attach this div only when content exists or isPreviewing/isEditing even when content is null,
9
+ * as we need to set the elementRef and allow previewing and visual editing
10
+ */
11
+ export declare const needsElementRefDivForEditing: () => boolean;
@@ -0,0 +1,15 @@
1
+ import { TARGET } from '../../../constants/target';
2
+ import { isEditing } from '../../../functions/is-editing';
3
+ import { isPreviewing } from '../../../functions/is-previewing';
4
+ /**
5
+ * SDKS that use the elementRef approach to enable visual editing.
6
+ * We don't need to render the div for other SDKs as they attach event listeners to the window.
7
+ */
8
+ export const SDKS_USING_ELEMENT_REF_APPROACH = ['svelte', 'qwik', 'vue'];
9
+ /**
10
+ * We need to attach this div only when content exists or isPreviewing/isEditing even when content is null,
11
+ * as we need to set the elementRef and allow previewing and visual editing
12
+ */
13
+ export const needsElementRefDivForEditing = () => {
14
+ return SDKS_USING_ELEMENT_REF_APPROACH.includes(TARGET) && (isEditing() || isPreviewing());
15
+ };
@@ -18,6 +18,7 @@ import { createEditorListener } from "../../../helpers/subscribe-to-editor";
18
18
  import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing";
19
19
  import { triggerAnimation } from "../../block/animator";
20
20
  import "../../dynamic-div.svelte";
21
+ import { needsElementRefDivForEditing } from "./enable-editor.helpers";
21
22
  import { getWrapperClassName } from "./styles.helpers";
22
23
  export let isNestedRender = undefined;
23
24
  export let builderContextSignal;
@@ -29,11 +30,21 @@ export let enrich = undefined;
29
30
  export let trustedHosts = undefined;
30
31
  export let model = undefined;
31
32
  export let content = undefined;
33
+ export let context = undefined;
32
34
  export let data = undefined;
33
35
  export let showContent;
34
36
  export let contentWrapper = undefined;
35
- export let context = undefined;
36
37
  export let contentWrapperProps = undefined;
38
+ function stringifyStyles(stylesObj) {
39
+ let styles = "";
40
+ for (let key in stylesObj) {
41
+ const dashedKey = key.replace(/[A-Z]/g, function (match) {
42
+ return "-" + match.toLowerCase();
43
+ });
44
+ styles += dashedKey + ":" + stylesObj[key] + ";";
45
+ }
46
+ return styles;
47
+ }
37
48
  function mergeNewRootState(newData) {
38
49
  const combinedState = {
39
50
  ...$builderContextSignal.rootState,
@@ -178,8 +189,12 @@ function elementRef_onIniteditingbldr(event) {
178
189
  : {}),
179
190
  });
180
191
  Object.values($builderContextSignal.componentInfos).forEach((registeredComponent) => {
181
- const message = createRegisterComponentMessage(registeredComponent);
182
- window.parent?.postMessage(message, "*");
192
+ if (!model ||
193
+ !registeredComponent.models?.length ||
194
+ registeredComponent.models.includes(model)) {
195
+ const message = createRegisterComponentMessage(registeredComponent);
196
+ window.parent?.postMessage(message, "*");
197
+ }
183
198
  });
184
199
  window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
185
200
  }
@@ -197,13 +212,21 @@ function elementRef_onInitpreviewingbldr(event) {
197
212
  *
198
213
  * TO-DO: should we only update the state when there is a change?
199
214
  **/
200
- if (searchParamPreviewModel === model &&
201
- previewApiKey === apiKey &&
202
- (!content || searchParamPreviewId === content.id)) {
215
+ if (searchParamPreviewModel === "BUILDER_STUDIO" ||
216
+ (searchParamPreviewModel === model &&
217
+ previewApiKey === apiKey &&
218
+ (!content || searchParamPreviewId === content.id))) {
203
219
  fetchOneEntry({
204
- model: model,
220
+ model: model || "",
205
221
  apiKey: apiKey,
206
222
  apiVersion: $builderContextSignal.apiVersion,
223
+ ...(searchParamPreviewModel === "BUILDER_STUDIO" && context?.symbolId
224
+ ? {
225
+ query: {
226
+ id: context.symbolId,
227
+ },
228
+ }
229
+ : {}),
207
230
  }).then((content) => {
208
231
  if (content) {
209
232
  mergeNewContent(content);
@@ -293,9 +316,15 @@ onDestroy(() => {
293
316
  });
294
317
  </script>
295
318
 
296
- {#if $builderContextSignal.content}
319
+ {#if $builderContextSignal.content || needsElementRefDivForEditing()}
297
320
  <svelte:element
298
321
  this={ContentWrapper}
322
+ style={stringifyStyles({
323
+ display:
324
+ !$builderContextSignal.content && needsElementRefDivForEditing()
325
+ ? "none"
326
+ : undefined,
327
+ })}
299
328
  {...{}}
300
329
  bind:this={elementRef}
301
330
  on:click={(event) => {
@@ -19,10 +19,10 @@ declare const __propDef: {
19
19
  trustedHosts?: BuilderEditorProps["trustedHosts"];
20
20
  model?: BuilderEditorProps["model"];
21
21
  content?: BuilderEditorProps["content"];
22
+ context?: BuilderEditorProps["context"];
22
23
  data?: BuilderEditorProps["data"];
23
24
  showContent: BuilderEditorProps["showContent"];
24
25
  contentWrapper?: BuilderEditorProps["contentWrapper"];
25
- context?: BuilderEditorProps["context"];
26
26
  contentWrapperProps?: BuilderEditorProps["contentWrapperProps"];
27
27
  };
28
28
  events: {
@@ -18,7 +18,6 @@ export let apiKey;
18
18
  export let context = undefined;
19
19
  export let content = undefined;
20
20
  export let customComponents = undefined;
21
- export let model = undefined;
22
21
  export let data = undefined;
23
22
  export let locale = undefined;
24
23
  export let canTrack = undefined;
@@ -26,6 +25,7 @@ export let apiVersion = undefined;
26
25
  export let blocksWrapper = undefined;
27
26
  export let blocksWrapperProps = undefined;
28
27
  export let nonce = undefined;
28
+ export let model = undefined;
29
29
  export let apiHost = undefined;
30
30
  export let enrich = undefined;
31
31
  export let showContent;
@@ -46,13 +46,7 @@ let scriptStr = getUpdateVariantVisibilityScript({
46
46
  });
47
47
  let registeredComponents = [
48
48
  ...getDefaultRegisteredComponents(),
49
- ...(customComponents?.filter(({ models }) => {
50
- if (!models?.length)
51
- return true;
52
- if (!model)
53
- return true;
54
- return models.includes(model);
55
- }) || []),
49
+ ...(customComponents || []),
56
50
  ].reduce((acc, { component, ...info }) => ({
57
51
  ...acc,
58
52
  [info.name]: {
@@ -78,13 +72,7 @@ let builderContextSignal = writable({
78
72
  apiVersion: apiVersion,
79
73
  componentInfos: [
80
74
  ...getDefaultRegisteredComponents(),
81
- ...(customComponents?.filter(({ models }) => {
82
- if (!models?.length)
83
- return true;
84
- if (!model)
85
- return true;
86
- return models.includes(model);
87
- }) || []),
75
+ ...(customComponents || []),
88
76
  ].reduce((acc, { component: _, ...info }) => ({
89
77
  ...acc,
90
78
  [info.name]: serializeIncludingFunctions(info),
@@ -93,6 +81,7 @@ let builderContextSignal = writable({
93
81
  BlocksWrapper: blocksWrapper || "div",
94
82
  BlocksWrapperProps: blocksWrapperProps || {},
95
83
  nonce: nonce || "",
84
+ model: model || "",
96
85
  });
97
86
  if (!apiKey) {
98
87
  logger.error("No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
@@ -6,7 +6,6 @@ declare const __propDef: {
6
6
  context?: ContentProps["context"];
7
7
  content?: ContentProps["content"];
8
8
  customComponents?: ContentProps["customComponents"];
9
- model?: ContentProps["model"];
10
9
  data?: ContentProps["data"];
11
10
  locale?: ContentProps["locale"];
12
11
  canTrack?: ContentProps["canTrack"];
@@ -14,6 +13,7 @@ declare const __propDef: {
14
13
  blocksWrapper?: ContentProps["blocksWrapper"];
15
14
  blocksWrapperProps?: ContentProps["blocksWrapperProps"];
16
15
  nonce?: ContentProps["nonce"];
16
+ model?: ContentProps["model"];
17
17
  apiHost?: ContentProps["apiHost"];
18
18
  enrich?: ContentProps["enrich"];
19
19
  showContent: ContentProps["showContent"];
@@ -0,0 +1,2 @@
1
+ export declare const IMAGE_FILE_TYPES: string[];
2
+ export declare const VIDEO_FILE_TYPES: string[];
@@ -0,0 +1,2 @@
1
+ export const IMAGE_FILE_TYPES = ['jpeg', 'jpg', 'png', 'svg', 'webp', 'gif', 'jfif', 'pjpeg', 'pjp', 'apng', 'avif', 'tif', 'tiff', 'heif', 'bmp', 'eps', 'raw', 'cr2', 'nef', 'orf', 'sr2', 'psd', 'heic', 'dib', 'ai'];
2
+ export const VIDEO_FILE_TYPES = ['mp4', 'webm', 'mkv', 'flv', 'vob', 'ogv', 'ogg', 'drc', 'gif', 'gifv', 'mng', 'avi', 'mov', 'qt', 'mts', 'm2ts', 'ts', 'wmv', 'yuv', 'rm', 'rmvb', 'viv', 'asf', 'amv', 'm4p', 'mpeg', 'mpe', 'm2v', 'm4v', 'svi', '3gp', '3g2', 'mxf', 'roq', 'nsv', 'f4v', 'f4p', 'f4a', 'f4b'];
@@ -1 +1 @@
1
- export declare const SDK_VERSION = "3.0.0";
1
+ export declare const SDK_VERSION = "3.0.2";
@@ -1 +1 @@
1
- export const SDK_VERSION = "3.0.0";
1
+ export const SDK_VERSION = "3.0.2";
@@ -13,6 +13,7 @@ declare const _default: {
13
13
  BlocksWrapper: string;
14
14
  BlocksWrapperProps: {};
15
15
  nonce: string;
16
+ model: string;
16
17
  }>;
17
18
  key: symbol;
18
19
  };
@@ -14,6 +14,7 @@ export default {
14
14
  BlocksWrapper: "div",
15
15
  BlocksWrapperProps: {},
16
16
  nonce: "",
17
+ model: "",
17
18
  }),
18
19
  key,
19
20
  };
@@ -36,5 +36,6 @@ export interface BuilderContextInterface extends Pick<BlocksWrapperProps, 'Block
36
36
  componentInfos: Dictionary<ComponentInfo>;
37
37
  inheritedStyles: Record<string, unknown>;
38
38
  nonce: string;
39
+ model: string;
39
40
  canTrack?: boolean;
40
41
  }
@@ -1,4 +1,3 @@
1
- import { logger } from '../../../helpers/logger';
2
1
  import { flattenState, getFunctionArguments } from '../helpers';
3
2
  import Interpreter from './acorn-interpreter';
4
3
  /**
@@ -84,10 +83,8 @@ export const runInEdge = ({ builder, context, event, rootState, localState, root
84
83
  return `var ${key} = ${jsonValName} === undefined ? undefined : JSON.parse(${jsonValName});`;
85
84
  }).join('\n');
86
85
  const cleanedCode = processCode(code);
87
- if (cleanedCode === '') {
88
- logger.warn('Skipping evaluation of empty code block.');
86
+ if (cleanedCode === '')
89
87
  return;
90
- }
91
88
  const transformed = `
92
89
  function theFunction() {
93
90
  ${prependedCode}
@@ -0,0 +1,2 @@
1
+ import type { BuilderBlock } from '../types/builder-block';
2
+ export declare function resolveLocalizedValues(block: BuilderBlock, locale: string | undefined): BuilderBlock;