@builder.io/sdk-svelte 0.8.1 → 0.10.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.
- package/lib/browser/components/blocks/blocks-wrapper.svelte +8 -4
- package/lib/browser/components/blocks/blocks.svelte +8 -1
- package/lib/browser/components/content/components/enable-editor.svelte +7 -2
- package/lib/browser/components/content/components/enable-editor.svelte.d.ts +3 -1
- package/lib/browser/components/content/content.svelte +8 -0
- package/lib/browser/components/content/content.svelte.d.ts +4 -0
- package/lib/browser/components/content-variants/content-variants.svelte +12 -0
- package/lib/browser/components/content-variants/content-variants.svelte.d.ts +4 -0
- package/lib/browser/components/content-variants/content-variants.types.d.ts +16 -0
- package/lib/browser/constants/sdk-version.d.ts +1 -1
- package/lib/browser/constants/sdk-version.js +1 -1
- package/lib/browser/context/builder.context.d.ts +2 -0
- package/lib/browser/context/builder.context.js +2 -0
- package/lib/browser/context/types.d.ts +2 -1
- package/lib/browser/functions/get-block-properties.js +5 -9
- package/lib/browser/functions/get-content/index.d.ts +2 -2
- package/lib/browser/functions/get-content/index.js +4 -4
- package/lib/browser/functions/transform-block-properties.d.ts +7 -1
- package/lib/browser/functions/transform-block-properties.js +1 -1
- package/lib/browser/types/enforced-partials.d.ts +7 -2
- package/lib/edge/components/blocks/blocks-wrapper.svelte +8 -4
- package/lib/edge/components/blocks/blocks.svelte +8 -1
- package/lib/edge/components/content/components/enable-editor.svelte +7 -2
- package/lib/edge/components/content/components/enable-editor.svelte.d.ts +3 -1
- package/lib/edge/components/content/content.svelte +8 -0
- package/lib/edge/components/content/content.svelte.d.ts +4 -0
- package/lib/edge/components/content-variants/content-variants.svelte +12 -0
- package/lib/edge/components/content-variants/content-variants.svelte.d.ts +4 -0
- package/lib/edge/components/content-variants/content-variants.types.d.ts +16 -0
- package/lib/edge/constants/sdk-version.d.ts +1 -1
- package/lib/edge/constants/sdk-version.js +1 -1
- package/lib/edge/context/builder.context.d.ts +2 -0
- package/lib/edge/context/builder.context.js +2 -0
- package/lib/edge/context/types.d.ts +2 -1
- package/lib/edge/functions/get-block-properties.js +5 -9
- package/lib/edge/functions/get-content/index.d.ts +2 -2
- package/lib/edge/functions/get-content/index.js +4 -4
- package/lib/edge/functions/transform-block-properties.d.ts +7 -1
- package/lib/edge/functions/transform-block-properties.js +1 -1
- package/lib/edge/types/enforced-partials.d.ts +7 -2
- package/lib/node/components/blocks/blocks-wrapper.svelte +8 -4
- package/lib/node/components/blocks/blocks.svelte +8 -1
- package/lib/node/components/content/components/enable-editor.svelte +7 -2
- package/lib/node/components/content/components/enable-editor.svelte.d.ts +3 -1
- package/lib/node/components/content/content.svelte +8 -0
- package/lib/node/components/content/content.svelte.d.ts +4 -0
- package/lib/node/components/content-variants/content-variants.svelte +12 -0
- package/lib/node/components/content-variants/content-variants.svelte.d.ts +4 -0
- package/lib/node/components/content-variants/content-variants.types.d.ts +16 -0
- package/lib/node/constants/sdk-version.d.ts +1 -1
- package/lib/node/constants/sdk-version.js +1 -1
- package/lib/node/context/builder.context.d.ts +2 -0
- package/lib/node/context/builder.context.js +2 -0
- package/lib/node/context/types.d.ts +2 -1
- package/lib/node/functions/get-block-properties.js +5 -9
- package/lib/node/functions/get-content/index.d.ts +2 -2
- package/lib/node/functions/get-content/index.js +4 -4
- package/lib/node/functions/transform-block-properties.d.ts +7 -1
- package/lib/node/functions/transform-block-properties.js +1 -1
- package/lib/node/types/enforced-partials.d.ts +7 -2
- package/package.json +1 -1
- package/src/components/blocks/blocks-wrapper.svelte +16 -4
- package/src/components/blocks/blocks.svelte +11 -2
- package/src/components/content/components/enable-editor.svelte +14 -3
- package/src/components/content/content.svelte +9 -0
- package/src/components/content-variants/content-variants.svelte +15 -0
- package/src/components/content-variants/content-variants.types.ts +16 -0
- package/src/constants/sdk-version.ts +1 -1
- package/src/context/builder.context.ts +2 -0
- package/src/context/types.ts +2 -1
- package/src/functions/get-block-properties.ts +5 -9
- package/src/functions/get-content/index.ts +5 -5
- package/src/functions/transform-block-properties.ts +9 -1
- package/src/types/enforced-partials.ts +8 -2
- package/lib/browser/functions/get-react-native-block-styles.d.ts +0 -7
- package/lib/browser/functions/get-react-native-block-styles.js +0 -17
- package/lib/browser/functions/sanitize-react-native-block-styles.d.ts +0 -3
- package/lib/browser/functions/sanitize-react-native-block-styles.js +0 -61
- package/lib/edge/functions/get-react-native-block-styles.d.ts +0 -7
- package/lib/edge/functions/get-react-native-block-styles.js +0 -17
- package/lib/edge/functions/sanitize-react-native-block-styles.d.ts +0 -3
- package/lib/edge/functions/sanitize-react-native-block-styles.js +0 -61
- package/lib/node/functions/get-react-native-block-styles.d.ts +0 -7
- package/lib/node/functions/get-react-native-block-styles.js +0 -17
- package/lib/node/functions/sanitize-react-native-block-styles.d.ts +0 -3
- package/lib/node/functions/sanitize-react-native-block-styles.js +0 -61
- package/src/functions/get-react-native-block-styles.ts +0 -27
- package/src/functions/sanitize-react-native-block-styles.ts +0 -58
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
<script context="module"></script>
|
|
2
2
|
|
|
3
3
|
<script>import { isEditing } from "../../functions/is-editing.js";
|
|
4
|
+
export let BlocksWrapper;
|
|
4
5
|
export let blocks;
|
|
5
6
|
export let parent;
|
|
6
7
|
export let path;
|
|
7
8
|
export let styleProp;
|
|
9
|
+
export let BlocksWrapperProps;
|
|
8
10
|
function mitosis_styling(node, vars) {
|
|
9
11
|
Object.entries(vars || {}).forEach(([p, v]) => {
|
|
10
12
|
if (p.startsWith("--")) {
|
|
@@ -42,9 +44,10 @@ $: className = () => {
|
|
|
42
44
|
};
|
|
43
45
|
</script>
|
|
44
46
|
|
|
45
|
-
<
|
|
47
|
+
<svelte:element
|
|
48
|
+
this={BlocksWrapper}
|
|
46
49
|
use:mitosis_styling={styleProp}
|
|
47
|
-
class={className() + "
|
|
50
|
+
class={className() + " svelte-element"}
|
|
48
51
|
builder-path={path}
|
|
49
52
|
builder-parent-id={parent}
|
|
50
53
|
{...{}}
|
|
@@ -57,12 +60,13 @@ $: className = () => {
|
|
|
57
60
|
on:keypress={(event) => {
|
|
58
61
|
onClick();
|
|
59
62
|
}}
|
|
63
|
+
{...BlocksWrapperProps}
|
|
60
64
|
>
|
|
61
65
|
<slot />
|
|
62
|
-
</
|
|
66
|
+
</svelte:element>
|
|
63
67
|
|
|
64
68
|
<style>
|
|
65
|
-
.
|
|
69
|
+
.svelte-element {
|
|
66
70
|
display: flex;
|
|
67
71
|
flex-direction: column;
|
|
68
72
|
align-items: stretch;
|
|
@@ -16,7 +16,14 @@ let builderContext = getContext(BuilderContext.key);
|
|
|
16
16
|
let componentsContext = getContext(ComponentsContext.key);
|
|
17
17
|
</script>
|
|
18
18
|
|
|
19
|
-
<BlocksWrapper
|
|
19
|
+
<BlocksWrapper
|
|
20
|
+
{blocks}
|
|
21
|
+
{parent}
|
|
22
|
+
{path}
|
|
23
|
+
{styleProp}
|
|
24
|
+
BlocksWrapper={$context?.BlocksWrapper}
|
|
25
|
+
BlocksWrapperProps={$context?.BlocksWrapperProps}
|
|
26
|
+
>
|
|
20
27
|
{#if blocks}
|
|
21
28
|
{#each blocks as block ("render-block-" + block.id)}
|
|
22
29
|
<Block
|
|
@@ -17,6 +17,7 @@ import { logger } from "../../../helpers/logger.js";
|
|
|
17
17
|
import "../../../helpers/preview-lru-cache/set.js";
|
|
18
18
|
import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing.js";
|
|
19
19
|
export let builderContextSignal;
|
|
20
|
+
export let contentWrapper = undefined;
|
|
20
21
|
export let model = undefined;
|
|
21
22
|
export let context = undefined;
|
|
22
23
|
export let canTrack = undefined;
|
|
@@ -26,6 +27,7 @@ export let includeRefs = undefined;
|
|
|
26
27
|
export let enrich = undefined;
|
|
27
28
|
export let content = undefined;
|
|
28
29
|
export let showContent;
|
|
30
|
+
export let contentWrapperProps = undefined;
|
|
29
31
|
function mergeNewContent(newContent) {
|
|
30
32
|
const newContentValue = {
|
|
31
33
|
...$builderContextSignal.content,
|
|
@@ -217,6 +219,7 @@ let elementRef;
|
|
|
217
219
|
let forceReRenderCount = 0;
|
|
218
220
|
let lastUpdated = 0;
|
|
219
221
|
let shouldSendResetCookie = false;
|
|
222
|
+
let ContentWrapper = contentWrapper || "div";
|
|
220
223
|
let httpReqsData = {};
|
|
221
224
|
let clicked = false;
|
|
222
225
|
onMount(() => {
|
|
@@ -284,7 +287,8 @@ onDestroy(() => {
|
|
|
284
287
|
</script>
|
|
285
288
|
|
|
286
289
|
{#if $builderContextSignal.content}
|
|
287
|
-
<
|
|
290
|
+
<svelte:element
|
|
291
|
+
this={ContentWrapper}
|
|
288
292
|
{...{}}
|
|
289
293
|
key={forceReRenderCount}
|
|
290
294
|
bind:this={elementRef}
|
|
@@ -300,6 +304,7 @@ onDestroy(() => {
|
|
|
300
304
|
hidden: true,
|
|
301
305
|
"aria-hidden": true,
|
|
302
306
|
}}
|
|
307
|
+
{...contentWrapperProps}
|
|
303
308
|
class={`variant-${content?.testVariationId || content?.id}`}
|
|
304
309
|
on:initeditingbldr={(event) => {
|
|
305
310
|
elementRef_onIniteditingbldr(event);
|
|
@@ -309,5 +314,5 @@ onDestroy(() => {
|
|
|
309
314
|
}}
|
|
310
315
|
>
|
|
311
316
|
<slot />
|
|
312
|
-
</
|
|
317
|
+
</svelte:element>
|
|
313
318
|
{/if}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
type BuilderEditorProps = Omit<ContentProps, "customComponents" | "data" | "apiVersion" | "isSsrAbTest"> & {
|
|
2
|
+
type BuilderEditorProps = Omit<ContentProps, "customComponents" | "data" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps"> & {
|
|
3
3
|
builderContextSignal: Writable<BuilderContextInterface>;
|
|
4
4
|
setBuilderContextSignal?: (signal: any) => any;
|
|
5
5
|
children?: any;
|
|
@@ -10,6 +10,7 @@ import type { Writable } from "svelte/store";
|
|
|
10
10
|
declare const __propDef: {
|
|
11
11
|
props: {
|
|
12
12
|
builderContextSignal: BuilderEditorProps["builderContextSignal"];
|
|
13
|
+
contentWrapper?: BuilderEditorProps["contentWrapper"];
|
|
13
14
|
model?: BuilderEditorProps["model"];
|
|
14
15
|
context?: BuilderEditorProps["context"];
|
|
15
16
|
canTrack?: BuilderEditorProps["canTrack"];
|
|
@@ -19,6 +20,7 @@ declare const __propDef: {
|
|
|
19
20
|
enrich?: BuilderEditorProps["enrich"];
|
|
20
21
|
content?: BuilderEditorProps["content"];
|
|
21
22
|
showContent: BuilderEditorProps["showContent"];
|
|
23
|
+
contentWrapperProps?: BuilderEditorProps["contentWrapperProps"];
|
|
22
24
|
};
|
|
23
25
|
events: {
|
|
24
26
|
[evt: string]: CustomEvent<any>;
|
|
@@ -18,11 +18,15 @@ export let locale = undefined;
|
|
|
18
18
|
export let context = undefined;
|
|
19
19
|
export let apiKey;
|
|
20
20
|
export let apiVersion = undefined;
|
|
21
|
+
export let blocksWrapper = undefined;
|
|
22
|
+
export let blocksWrapperProps = undefined;
|
|
21
23
|
export let model = undefined;
|
|
22
24
|
export let canTrack = undefined;
|
|
23
25
|
export let includeRefs = undefined;
|
|
24
26
|
export let enrich = undefined;
|
|
25
27
|
export let showContent;
|
|
28
|
+
export let contentWrapper = undefined;
|
|
29
|
+
export let contentWrapperProps = undefined;
|
|
26
30
|
export let isSsrAbTest;
|
|
27
31
|
function contentSetState(newRootState) {
|
|
28
32
|
$builderContextSignal.rootState = newRootState;
|
|
@@ -78,6 +82,8 @@ let builderContextSignal = writable({
|
|
|
78
82
|
[info.name]: serializeComponentInfo(info),
|
|
79
83
|
}), {}),
|
|
80
84
|
inheritedStyles: {},
|
|
85
|
+
BlocksWrapper: blocksWrapper || "div",
|
|
86
|
+
BlocksWrapperProps: blocksWrapperProps || {},
|
|
81
87
|
});
|
|
82
88
|
setContext(ComponentsContext.key, {
|
|
83
89
|
registeredComponents: registeredComponents,
|
|
@@ -95,6 +101,8 @@ setContext(ComponentsContext.key, {
|
|
|
95
101
|
{enrich}
|
|
96
102
|
{showContent}
|
|
97
103
|
{builderContextSignal}
|
|
104
|
+
{contentWrapper}
|
|
105
|
+
{contentWrapperProps}
|
|
98
106
|
{...{}}
|
|
99
107
|
>
|
|
100
108
|
{#if isSsrAbTest}
|
|
@@ -9,11 +9,15 @@ declare const __propDef: {
|
|
|
9
9
|
context?: ContentProps["context"];
|
|
10
10
|
apiKey: ContentProps["apiKey"];
|
|
11
11
|
apiVersion?: ContentProps["apiVersion"];
|
|
12
|
+
blocksWrapper?: ContentProps["blocksWrapper"];
|
|
13
|
+
blocksWrapperProps?: ContentProps["blocksWrapperProps"];
|
|
12
14
|
model?: ContentProps["model"];
|
|
13
15
|
canTrack?: ContentProps["canTrack"];
|
|
14
16
|
includeRefs?: ContentProps["includeRefs"];
|
|
15
17
|
enrich?: ContentProps["enrich"];
|
|
16
18
|
showContent: ContentProps["showContent"];
|
|
19
|
+
contentWrapper?: ContentProps["contentWrapper"];
|
|
20
|
+
contentWrapperProps?: ContentProps["contentWrapperProps"];
|
|
17
21
|
isSsrAbTest: ContentProps["isSsrAbTest"];
|
|
18
22
|
};
|
|
19
23
|
events: {
|
|
@@ -20,6 +20,10 @@ export let customComponents = undefined;
|
|
|
20
20
|
export let locale = undefined;
|
|
21
21
|
export let includeRefs = undefined;
|
|
22
22
|
export let enrich = undefined;
|
|
23
|
+
export let blocksWrapper = undefined;
|
|
24
|
+
export let blocksWrapperProps = undefined;
|
|
25
|
+
export let contentWrapper = undefined;
|
|
26
|
+
export let contentWrapperProps = undefined;
|
|
23
27
|
$: updateCookieAndStylesScriptStr = () => {
|
|
24
28
|
return getUpdateCookieAndStylesScript(getVariants(content).map((value) => ({
|
|
25
29
|
id: value.testVariationId,
|
|
@@ -81,6 +85,10 @@ onMount(() => {
|
|
|
81
85
|
{includeRefs}
|
|
82
86
|
{enrich}
|
|
83
87
|
isSsrAbTest={shouldRenderVariants}
|
|
88
|
+
{blocksWrapper}
|
|
89
|
+
{blocksWrapperProps}
|
|
90
|
+
{contentWrapper}
|
|
91
|
+
{contentWrapperProps}
|
|
84
92
|
/>
|
|
85
93
|
{/each}
|
|
86
94
|
{/if}
|
|
@@ -100,4 +108,8 @@ onMount(() => {
|
|
|
100
108
|
{includeRefs}
|
|
101
109
|
{enrich}
|
|
102
110
|
isSsrAbTest={shouldRenderVariants}
|
|
111
|
+
{blocksWrapper}
|
|
112
|
+
{blocksWrapperProps}
|
|
113
|
+
{contentWrapper}
|
|
114
|
+
{contentWrapperProps}
|
|
103
115
|
/>
|
|
@@ -20,6 +20,10 @@ declare const __propDef: {
|
|
|
20
20
|
locale?: VariantsProviderProps["locale"];
|
|
21
21
|
includeRefs?: VariantsProviderProps["includeRefs"];
|
|
22
22
|
enrich?: VariantsProviderProps["enrich"];
|
|
23
|
+
blocksWrapper?: VariantsProviderProps["blocksWrapper"];
|
|
24
|
+
blocksWrapperProps?: VariantsProviderProps["blocksWrapperProps"];
|
|
25
|
+
contentWrapper?: VariantsProviderProps["contentWrapper"];
|
|
26
|
+
contentWrapperProps?: VariantsProviderProps["contentWrapperProps"];
|
|
23
27
|
};
|
|
24
28
|
events: {
|
|
25
29
|
[evt: string]: CustomEvent<any>;
|
|
@@ -17,4 +17,20 @@ export interface ContentVariantsPrps {
|
|
|
17
17
|
/** @deprecated use `enrich` instead **/
|
|
18
18
|
includeRefs?: boolean;
|
|
19
19
|
enrich?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* The element that wraps your content. Defaults to `div` ('ScrollView' in React Native).
|
|
22
|
+
*/
|
|
23
|
+
contentWrapper?: any;
|
|
24
|
+
/**
|
|
25
|
+
* Additonal props to pass to `contentWrapper`. Defaults to `{}`.
|
|
26
|
+
*/
|
|
27
|
+
contentWrapperProps?: any;
|
|
28
|
+
/**
|
|
29
|
+
* The element that wraps your blocks. Defaults to `div` ('ScrollView' in React Native).
|
|
30
|
+
*/
|
|
31
|
+
blocksWrapper?: any;
|
|
32
|
+
/**
|
|
33
|
+
* Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
|
|
34
|
+
*/
|
|
35
|
+
blocksWrapperProps?: any;
|
|
20
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SDK_VERSION = "0.
|
|
1
|
+
export declare const SDK_VERSION = "0.10.0";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const SDK_VERSION = "0.
|
|
1
|
+
export const SDK_VERSION = "0.10.0";
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { BlocksWrapperProps } from '../components/blocks/blocks-wrapper.svelte';
|
|
1
2
|
import type { ApiVersion } from '../types/api-version.js';
|
|
2
3
|
import type { BuilderContent } from '../types/builder-content.js';
|
|
3
4
|
import type { ComponentInfo } from '../types/components.js';
|
|
@@ -8,7 +9,7 @@ export type RegisteredComponent = ComponentInfo & {
|
|
|
8
9
|
export type RegisteredComponents = Dictionary<RegisteredComponent>;
|
|
9
10
|
export type BuilderRenderState = Record<string, unknown>;
|
|
10
11
|
export type BuilderRenderContext = Record<string, unknown>;
|
|
11
|
-
export interface BuilderContextInterface {
|
|
12
|
+
export interface BuilderContextInterface extends Pick<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'> {
|
|
12
13
|
content: Nullable<BuilderContent>;
|
|
13
14
|
context: BuilderRenderContext;
|
|
14
15
|
/**
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { TARGET } from '../constants/target.js';
|
|
2
2
|
import { convertStyleMapToCSSArray } from '../helpers/css.js';
|
|
3
|
-
import { getReactNativeBlockStyles } from './get-react-native-block-styles.js';
|
|
4
3
|
import { transformBlockProperties } from './transform-block-properties.js';
|
|
5
4
|
const extractRelevantRootBlockProperties = (block) => {
|
|
6
5
|
// currently we are only spreading the `href` property
|
|
@@ -42,14 +41,11 @@ export function getBlockProperties({ block, context }) {
|
|
|
42
41
|
style: block.style ? getStyleAttribute(block.style) : undefined,
|
|
43
42
|
class: [block.id, 'builder-block', block.class, block.properties?.class].filter(Boolean).join(' ')
|
|
44
43
|
};
|
|
45
|
-
|
|
46
|
-
properties
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
return transformBlockProperties(properties);
|
|
44
|
+
return transformBlockProperties({
|
|
45
|
+
properties,
|
|
46
|
+
context,
|
|
47
|
+
block
|
|
48
|
+
});
|
|
53
49
|
}
|
|
54
50
|
/**
|
|
55
51
|
* Svelte does not support style attribute as an object so we need to flatten it.
|
|
@@ -16,11 +16,11 @@ type ContentResults = {
|
|
|
16
16
|
/**
|
|
17
17
|
* @internal Exported only for testing purposes. Do not use.
|
|
18
18
|
*/
|
|
19
|
-
export declare const _processContentResult: (options: GetContentOptions, content: ContentResults, url?: URL) => Promise<
|
|
19
|
+
export declare const _processContentResult: (options: GetContentOptions, content: ContentResults, url?: URL) => Promise<BuilderContent[]>;
|
|
20
20
|
/**
|
|
21
21
|
* Returns a paginated array of entries that match the given options.
|
|
22
22
|
*/
|
|
23
|
-
export declare function fetchEntries(options: GetContentOptions): Promise<
|
|
23
|
+
export declare function fetchEntries(options: GetContentOptions): Promise<BuilderContent[] | null>;
|
|
24
24
|
/**
|
|
25
25
|
* @deprecated `getAllContent` was renamed to `fetchEntries`. This is a temporary alias to avoid breaking changes.
|
|
26
26
|
*/
|
|
@@ -16,7 +16,7 @@ export async function fetchOneEntry(options) {
|
|
|
16
16
|
limit: 1
|
|
17
17
|
});
|
|
18
18
|
if (allContent) {
|
|
19
|
-
return allContent
|
|
19
|
+
return allContent[0] || null;
|
|
20
20
|
}
|
|
21
21
|
return null;
|
|
22
22
|
}
|
|
@@ -47,9 +47,9 @@ export const _processContentResult = async (options, content, url = generateCont
|
|
|
47
47
|
content.results = newResults;
|
|
48
48
|
}
|
|
49
49
|
if (!canTrack)
|
|
50
|
-
return content;
|
|
50
|
+
return content.results;
|
|
51
51
|
if (!(isBrowser() || TARGET === 'reactNative'))
|
|
52
|
-
return content;
|
|
52
|
+
return content.results;
|
|
53
53
|
/**
|
|
54
54
|
* For client-side navigations, it is ideal to handle AB testing at this point instead of using our
|
|
55
55
|
* complex multi-rendering variants approach, which is only needed for SSR'd content.
|
|
@@ -69,7 +69,7 @@ export const _processContentResult = async (options, content, url = generateCont
|
|
|
69
69
|
catch (e) {
|
|
70
70
|
logger.error('Could not process A/B tests. ', e);
|
|
71
71
|
}
|
|
72
|
-
return content;
|
|
72
|
+
return content.results;
|
|
73
73
|
};
|
|
74
74
|
/**
|
|
75
75
|
* Returns a paginated array of entries that match the given options.
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import type { BuilderContextInterface } from '../context/types';
|
|
2
|
+
import type { BuilderBlock } from '../types/builder-block';
|
|
3
|
+
export declare function transformBlockProperties<T>({ properties }: {
|
|
4
|
+
properties: T;
|
|
5
|
+
context: BuilderContextInterface;
|
|
6
|
+
block: BuilderBlock;
|
|
7
|
+
}): T;
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import type { Prettify } from './typescript.js';
|
|
2
|
+
/**
|
|
3
|
+
* Lol Typescript
|
|
4
|
+
* https://stackoverflow.com/questions/49927523/disallow-call-with-any/49928360#49928360
|
|
5
|
+
*/
|
|
6
|
+
type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
|
|
2
7
|
type OptionalFieldsOnly<T> = {
|
|
3
|
-
[K in keyof T as T[K] extends Required<T>[K] ? never : K]: T[K];
|
|
8
|
+
[K in keyof T as T[K] extends Required<T>[K] ? IfAny<T[K], K, never> : K]: T[K];
|
|
4
9
|
};
|
|
5
10
|
type RequiredFieldsOnly<T> = {
|
|
6
|
-
[K in keyof T as T[K] extends Required<T>[K] ? K : never]: T[K];
|
|
11
|
+
[K in keyof T as T[K] extends Required<T>[K] ? IfAny<T[K], never, K> : never]: T[K];
|
|
7
12
|
};
|
|
8
13
|
type Enforced<T> = {
|
|
9
14
|
[K in keyof T]-?: T[K];
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
<script context="module"></script>
|
|
2
2
|
|
|
3
3
|
<script>import { isEditing } from "../../functions/is-editing.js";
|
|
4
|
+
export let BlocksWrapper;
|
|
4
5
|
export let blocks;
|
|
5
6
|
export let parent;
|
|
6
7
|
export let path;
|
|
7
8
|
export let styleProp;
|
|
9
|
+
export let BlocksWrapperProps;
|
|
8
10
|
function mitosis_styling(node, vars) {
|
|
9
11
|
Object.entries(vars || {}).forEach(([p, v]) => {
|
|
10
12
|
if (p.startsWith("--")) {
|
|
@@ -42,9 +44,10 @@ $: className = () => {
|
|
|
42
44
|
};
|
|
43
45
|
</script>
|
|
44
46
|
|
|
45
|
-
<
|
|
47
|
+
<svelte:element
|
|
48
|
+
this={BlocksWrapper}
|
|
46
49
|
use:mitosis_styling={styleProp}
|
|
47
|
-
class={className() + "
|
|
50
|
+
class={className() + " svelte-element"}
|
|
48
51
|
builder-path={path}
|
|
49
52
|
builder-parent-id={parent}
|
|
50
53
|
{...{}}
|
|
@@ -57,12 +60,13 @@ $: className = () => {
|
|
|
57
60
|
on:keypress={(event) => {
|
|
58
61
|
onClick();
|
|
59
62
|
}}
|
|
63
|
+
{...BlocksWrapperProps}
|
|
60
64
|
>
|
|
61
65
|
<slot />
|
|
62
|
-
</
|
|
66
|
+
</svelte:element>
|
|
63
67
|
|
|
64
68
|
<style>
|
|
65
|
-
.
|
|
69
|
+
.svelte-element {
|
|
66
70
|
display: flex;
|
|
67
71
|
flex-direction: column;
|
|
68
72
|
align-items: stretch;
|
|
@@ -16,7 +16,14 @@ let builderContext = getContext(BuilderContext.key);
|
|
|
16
16
|
let componentsContext = getContext(ComponentsContext.key);
|
|
17
17
|
</script>
|
|
18
18
|
|
|
19
|
-
<BlocksWrapper
|
|
19
|
+
<BlocksWrapper
|
|
20
|
+
{blocks}
|
|
21
|
+
{parent}
|
|
22
|
+
{path}
|
|
23
|
+
{styleProp}
|
|
24
|
+
BlocksWrapper={$context?.BlocksWrapper}
|
|
25
|
+
BlocksWrapperProps={$context?.BlocksWrapperProps}
|
|
26
|
+
>
|
|
20
27
|
{#if blocks}
|
|
21
28
|
{#each blocks as block ("render-block-" + block.id)}
|
|
22
29
|
<Block
|
|
@@ -17,6 +17,7 @@ import { logger } from "../../../helpers/logger.js";
|
|
|
17
17
|
import "../../../helpers/preview-lru-cache/set.js";
|
|
18
18
|
import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing.js";
|
|
19
19
|
export let builderContextSignal;
|
|
20
|
+
export let contentWrapper = undefined;
|
|
20
21
|
export let model = undefined;
|
|
21
22
|
export let context = undefined;
|
|
22
23
|
export let canTrack = undefined;
|
|
@@ -26,6 +27,7 @@ export let includeRefs = undefined;
|
|
|
26
27
|
export let enrich = undefined;
|
|
27
28
|
export let content = undefined;
|
|
28
29
|
export let showContent;
|
|
30
|
+
export let contentWrapperProps = undefined;
|
|
29
31
|
function mergeNewContent(newContent) {
|
|
30
32
|
const newContentValue = {
|
|
31
33
|
...$builderContextSignal.content,
|
|
@@ -217,6 +219,7 @@ let elementRef;
|
|
|
217
219
|
let forceReRenderCount = 0;
|
|
218
220
|
let lastUpdated = 0;
|
|
219
221
|
let shouldSendResetCookie = false;
|
|
222
|
+
let ContentWrapper = contentWrapper || "div";
|
|
220
223
|
let httpReqsData = {};
|
|
221
224
|
let clicked = false;
|
|
222
225
|
onMount(() => {
|
|
@@ -284,7 +287,8 @@ onDestroy(() => {
|
|
|
284
287
|
</script>
|
|
285
288
|
|
|
286
289
|
{#if $builderContextSignal.content}
|
|
287
|
-
<
|
|
290
|
+
<svelte:element
|
|
291
|
+
this={ContentWrapper}
|
|
288
292
|
{...{}}
|
|
289
293
|
key={forceReRenderCount}
|
|
290
294
|
bind:this={elementRef}
|
|
@@ -300,6 +304,7 @@ onDestroy(() => {
|
|
|
300
304
|
hidden: true,
|
|
301
305
|
"aria-hidden": true,
|
|
302
306
|
}}
|
|
307
|
+
{...contentWrapperProps}
|
|
303
308
|
class={`variant-${content?.testVariationId || content?.id}`}
|
|
304
309
|
on:initeditingbldr={(event) => {
|
|
305
310
|
elementRef_onIniteditingbldr(event);
|
|
@@ -309,5 +314,5 @@ onDestroy(() => {
|
|
|
309
314
|
}}
|
|
310
315
|
>
|
|
311
316
|
<slot />
|
|
312
|
-
</
|
|
317
|
+
</svelte:element>
|
|
313
318
|
{/if}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
type BuilderEditorProps = Omit<ContentProps, "customComponents" | "data" | "apiVersion" | "isSsrAbTest"> & {
|
|
2
|
+
type BuilderEditorProps = Omit<ContentProps, "customComponents" | "data" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps"> & {
|
|
3
3
|
builderContextSignal: Writable<BuilderContextInterface>;
|
|
4
4
|
setBuilderContextSignal?: (signal: any) => any;
|
|
5
5
|
children?: any;
|
|
@@ -10,6 +10,7 @@ import type { Writable } from "svelte/store";
|
|
|
10
10
|
declare const __propDef: {
|
|
11
11
|
props: {
|
|
12
12
|
builderContextSignal: BuilderEditorProps["builderContextSignal"];
|
|
13
|
+
contentWrapper?: BuilderEditorProps["contentWrapper"];
|
|
13
14
|
model?: BuilderEditorProps["model"];
|
|
14
15
|
context?: BuilderEditorProps["context"];
|
|
15
16
|
canTrack?: BuilderEditorProps["canTrack"];
|
|
@@ -19,6 +20,7 @@ declare const __propDef: {
|
|
|
19
20
|
enrich?: BuilderEditorProps["enrich"];
|
|
20
21
|
content?: BuilderEditorProps["content"];
|
|
21
22
|
showContent: BuilderEditorProps["showContent"];
|
|
23
|
+
contentWrapperProps?: BuilderEditorProps["contentWrapperProps"];
|
|
22
24
|
};
|
|
23
25
|
events: {
|
|
24
26
|
[evt: string]: CustomEvent<any>;
|
|
@@ -18,11 +18,15 @@ export let locale = undefined;
|
|
|
18
18
|
export let context = undefined;
|
|
19
19
|
export let apiKey;
|
|
20
20
|
export let apiVersion = undefined;
|
|
21
|
+
export let blocksWrapper = undefined;
|
|
22
|
+
export let blocksWrapperProps = undefined;
|
|
21
23
|
export let model = undefined;
|
|
22
24
|
export let canTrack = undefined;
|
|
23
25
|
export let includeRefs = undefined;
|
|
24
26
|
export let enrich = undefined;
|
|
25
27
|
export let showContent;
|
|
28
|
+
export let contentWrapper = undefined;
|
|
29
|
+
export let contentWrapperProps = undefined;
|
|
26
30
|
export let isSsrAbTest;
|
|
27
31
|
function contentSetState(newRootState) {
|
|
28
32
|
$builderContextSignal.rootState = newRootState;
|
|
@@ -78,6 +82,8 @@ let builderContextSignal = writable({
|
|
|
78
82
|
[info.name]: serializeComponentInfo(info),
|
|
79
83
|
}), {}),
|
|
80
84
|
inheritedStyles: {},
|
|
85
|
+
BlocksWrapper: blocksWrapper || "div",
|
|
86
|
+
BlocksWrapperProps: blocksWrapperProps || {},
|
|
81
87
|
});
|
|
82
88
|
setContext(ComponentsContext.key, {
|
|
83
89
|
registeredComponents: registeredComponents,
|
|
@@ -95,6 +101,8 @@ setContext(ComponentsContext.key, {
|
|
|
95
101
|
{enrich}
|
|
96
102
|
{showContent}
|
|
97
103
|
{builderContextSignal}
|
|
104
|
+
{contentWrapper}
|
|
105
|
+
{contentWrapperProps}
|
|
98
106
|
{...{}}
|
|
99
107
|
>
|
|
100
108
|
{#if isSsrAbTest}
|
|
@@ -9,11 +9,15 @@ declare const __propDef: {
|
|
|
9
9
|
context?: ContentProps["context"];
|
|
10
10
|
apiKey: ContentProps["apiKey"];
|
|
11
11
|
apiVersion?: ContentProps["apiVersion"];
|
|
12
|
+
blocksWrapper?: ContentProps["blocksWrapper"];
|
|
13
|
+
blocksWrapperProps?: ContentProps["blocksWrapperProps"];
|
|
12
14
|
model?: ContentProps["model"];
|
|
13
15
|
canTrack?: ContentProps["canTrack"];
|
|
14
16
|
includeRefs?: ContentProps["includeRefs"];
|
|
15
17
|
enrich?: ContentProps["enrich"];
|
|
16
18
|
showContent: ContentProps["showContent"];
|
|
19
|
+
contentWrapper?: ContentProps["contentWrapper"];
|
|
20
|
+
contentWrapperProps?: ContentProps["contentWrapperProps"];
|
|
17
21
|
isSsrAbTest: ContentProps["isSsrAbTest"];
|
|
18
22
|
};
|
|
19
23
|
events: {
|
|
@@ -20,6 +20,10 @@ export let customComponents = undefined;
|
|
|
20
20
|
export let locale = undefined;
|
|
21
21
|
export let includeRefs = undefined;
|
|
22
22
|
export let enrich = undefined;
|
|
23
|
+
export let blocksWrapper = undefined;
|
|
24
|
+
export let blocksWrapperProps = undefined;
|
|
25
|
+
export let contentWrapper = undefined;
|
|
26
|
+
export let contentWrapperProps = undefined;
|
|
23
27
|
$: updateCookieAndStylesScriptStr = () => {
|
|
24
28
|
return getUpdateCookieAndStylesScript(getVariants(content).map((value) => ({
|
|
25
29
|
id: value.testVariationId,
|
|
@@ -81,6 +85,10 @@ onMount(() => {
|
|
|
81
85
|
{includeRefs}
|
|
82
86
|
{enrich}
|
|
83
87
|
isSsrAbTest={shouldRenderVariants}
|
|
88
|
+
{blocksWrapper}
|
|
89
|
+
{blocksWrapperProps}
|
|
90
|
+
{contentWrapper}
|
|
91
|
+
{contentWrapperProps}
|
|
84
92
|
/>
|
|
85
93
|
{/each}
|
|
86
94
|
{/if}
|
|
@@ -100,4 +108,8 @@ onMount(() => {
|
|
|
100
108
|
{includeRefs}
|
|
101
109
|
{enrich}
|
|
102
110
|
isSsrAbTest={shouldRenderVariants}
|
|
111
|
+
{blocksWrapper}
|
|
112
|
+
{blocksWrapperProps}
|
|
113
|
+
{contentWrapper}
|
|
114
|
+
{contentWrapperProps}
|
|
103
115
|
/>
|
|
@@ -20,6 +20,10 @@ declare const __propDef: {
|
|
|
20
20
|
locale?: VariantsProviderProps["locale"];
|
|
21
21
|
includeRefs?: VariantsProviderProps["includeRefs"];
|
|
22
22
|
enrich?: VariantsProviderProps["enrich"];
|
|
23
|
+
blocksWrapper?: VariantsProviderProps["blocksWrapper"];
|
|
24
|
+
blocksWrapperProps?: VariantsProviderProps["blocksWrapperProps"];
|
|
25
|
+
contentWrapper?: VariantsProviderProps["contentWrapper"];
|
|
26
|
+
contentWrapperProps?: VariantsProviderProps["contentWrapperProps"];
|
|
23
27
|
};
|
|
24
28
|
events: {
|
|
25
29
|
[evt: string]: CustomEvent<any>;
|
|
@@ -17,4 +17,20 @@ export interface ContentVariantsPrps {
|
|
|
17
17
|
/** @deprecated use `enrich` instead **/
|
|
18
18
|
includeRefs?: boolean;
|
|
19
19
|
enrich?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* The element that wraps your content. Defaults to `div` ('ScrollView' in React Native).
|
|
22
|
+
*/
|
|
23
|
+
contentWrapper?: any;
|
|
24
|
+
/**
|
|
25
|
+
* Additonal props to pass to `contentWrapper`. Defaults to `{}`.
|
|
26
|
+
*/
|
|
27
|
+
contentWrapperProps?: any;
|
|
28
|
+
/**
|
|
29
|
+
* The element that wraps your blocks. Defaults to `div` ('ScrollView' in React Native).
|
|
30
|
+
*/
|
|
31
|
+
blocksWrapper?: any;
|
|
32
|
+
/**
|
|
33
|
+
* Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
|
|
34
|
+
*/
|
|
35
|
+
blocksWrapperProps?: any;
|
|
20
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SDK_VERSION = "0.
|
|
1
|
+
export declare const SDK_VERSION = "0.10.0";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const SDK_VERSION = "0.
|
|
1
|
+
export const SDK_VERSION = "0.10.0";
|