@builder.io/sdk-svelte 0.8.0 → 0.9.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/evaluate/node-runtime/safeDynamicRequire.d.ts +0 -10
- package/lib/browser/functions/evaluate/node-runtime/safeDynamicRequire.js +10 -3
- package/lib/browser/functions/get-block-properties.js +5 -9
- 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/evaluate/node-runtime/safeDynamicRequire.d.ts +0 -10
- package/lib/edge/functions/evaluate/node-runtime/safeDynamicRequire.js +10 -3
- package/lib/edge/functions/get-block-properties.js +5 -9
- 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/evaluate/node-runtime/safeDynamicRequire.d.ts +0 -10
- package/lib/node/functions/evaluate/node-runtime/safeDynamicRequire.js +10 -3
- package/lib/node/functions/get-block-properties.js +5 -9
- 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/evaluate/node-runtime/safeDynamicRequire.ts +9 -3
- package/src/functions/get-block-properties.ts +5 -9
- 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.9.0";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const SDK_VERSION = "0.
|
|
1
|
+
export const SDK_VERSION = "0.9.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,11 +1 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Allows us to require node-specific code safely within bundlers.
|
|
3
|
-
*
|
|
4
|
-
* https://github.com/laverdet/isolated-vm/issues/423
|
|
5
|
-
*
|
|
6
|
-
* NOTE: this code should only ever run in `node`, and never in an `edge` runtime.
|
|
7
|
-
* This is guaranteed by the fact that each SDK has separate bundles for each runtime.
|
|
8
|
-
* However, it might still end up running in the `browser` if the `node` bundle is loaded in the
|
|
9
|
-
* browser (which happens in many apps' dev mode, and certain other scenarios like Qwik's prod mode).
|
|
10
|
-
*/
|
|
11
1
|
export declare let safeDynamicRequire: typeof require;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const noop = () =>
|
|
1
|
+
const noop = () => { };
|
|
2
2
|
/**
|
|
3
3
|
* Allows us to require node-specific code safely within bundlers.
|
|
4
4
|
*
|
|
@@ -8,11 +8,18 @@ const noop = () => null;
|
|
|
8
8
|
* This is guaranteed by the fact that each SDK has separate bundles for each runtime.
|
|
9
9
|
* However, it might still end up running in the `browser` if the `node` bundle is loaded in the
|
|
10
10
|
* browser (which happens in many apps' dev mode, and certain other scenarios like Qwik's prod mode).
|
|
11
|
+
* This is why we catch and ignore the error at the very end.
|
|
11
12
|
*/
|
|
13
|
+
import { createRequire } from 'node:module';
|
|
12
14
|
export let safeDynamicRequire = noop;
|
|
13
15
|
try {
|
|
14
|
-
safeDynamicRequire =
|
|
16
|
+
safeDynamicRequire = createRequire(import.meta.url);
|
|
15
17
|
}
|
|
16
18
|
catch (error) {
|
|
17
|
-
|
|
19
|
+
try {
|
|
20
|
+
safeDynamicRequire = eval('require');
|
|
21
|
+
}
|
|
22
|
+
catch (error) {
|
|
23
|
+
/* empty */
|
|
24
|
+
}
|
|
18
25
|
}
|
|
@@ -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.
|
|
@@ -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.9.0";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const SDK_VERSION = "0.
|
|
1
|
+
export const SDK_VERSION = "0.9.0";
|