@builder.io/sdk-react 0.1.4 → 0.1.6
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/dist/react/blocks/button/button.js +2 -2
- package/dist/react/blocks/button/component-info.js +0 -1
- package/dist/react/blocks/columns/columns.js +4 -4
- package/dist/react/blocks/columns/component-info.js +0 -1
- package/dist/react/blocks/custom-code/component-info.js +0 -1
- package/dist/react/blocks/embed/component-info.js +0 -1
- package/dist/react/blocks/form/component-info.js +0 -1
- package/dist/react/blocks/form/form.js +2 -2
- package/dist/react/blocks/fragment/component-info.js +0 -1
- package/dist/react/blocks/image/component-info.js +0 -1
- package/dist/react/blocks/image/image.js +6 -6
- package/dist/react/blocks/img/component-info.js +0 -1
- package/dist/react/blocks/input/component-info.js +0 -1
- package/dist/react/blocks/raw-text/component-info.js +0 -1
- package/dist/react/blocks/section/component-info.js +0 -1
- package/dist/react/blocks/select/component-info.js +0 -1
- package/dist/react/blocks/submit-button/component-info.js +0 -1
- package/dist/react/blocks/symbol/component-info.js +0 -1
- package/dist/react/blocks/text/component-info.js +0 -1
- package/dist/react/blocks/textarea/component-info.js +0 -1
- package/dist/react/blocks/video/component-info.js +0 -1
- package/dist/react/components/render-block/render-block.js +18 -1
- package/dist/react/components/render-block/render-repeated-block.js +1 -0
- package/dist/react/components/render-blocks.js +2 -2
- package/dist/react/components/render-content/components/render-styles.helpers.js +51 -0
- package/dist/react/components/render-content/components/render-styles.js +12 -54
- package/dist/react/components/render-content/render-content.helpers.js +38 -0
- package/dist/react/components/render-content/render-content.js +65 -62
- package/dist/react/components/render-content/render-content.types.js +1 -0
- package/dist/react/constants/builder-registered-components.js +7 -7
- package/dist/react/context/builder.context.js +2 -0
- package/dist/react/index-helpers/blocks-exports.js +10 -10
- package/dist/react/types/input.js +1 -0
- package/dist/rsc/blocks/button/button.js +2 -2
- package/dist/rsc/blocks/button/component-info.js +0 -1
- package/dist/rsc/blocks/columns/columns.js +4 -4
- package/dist/rsc/blocks/columns/component-info.js +0 -1
- package/dist/rsc/blocks/custom-code/component-info.js +0 -1
- package/dist/rsc/blocks/embed/component-info.js +0 -1
- package/dist/rsc/blocks/form/component-info.js +0 -1
- package/dist/rsc/blocks/form/form.js +2 -2
- package/dist/rsc/blocks/fragment/component-info.js +0 -1
- package/dist/rsc/blocks/image/component-info.js +0 -1
- package/dist/rsc/blocks/image/image.js +6 -6
- package/dist/rsc/blocks/img/component-info.js +0 -1
- package/dist/rsc/blocks/input/component-info.js +0 -1
- package/dist/rsc/blocks/raw-text/component-info.js +0 -1
- package/dist/rsc/blocks/section/component-info.js +0 -1
- package/dist/rsc/blocks/select/component-info.js +0 -1
- package/dist/rsc/blocks/submit-button/component-info.js +0 -1
- package/dist/rsc/blocks/symbol/component-info.js +0 -1
- package/dist/rsc/blocks/text/component-info.js +0 -1
- package/dist/rsc/blocks/textarea/component-info.js +0 -1
- package/dist/rsc/blocks/video/component-info.js +0 -1
- package/dist/rsc/components/render-block/render-block.js +18 -1
- package/dist/rsc/components/render-block/render-repeated-block.js +1 -0
- package/dist/rsc/components/render-blocks.js +2 -2
- package/dist/rsc/components/render-content/builder-editing.js +47 -4
- package/dist/rsc/components/render-content/components/render-styles.helpers.js +51 -0
- package/dist/rsc/components/render-content/components/render-styles.js +11 -54
- package/dist/rsc/components/render-content/render-content.helpers.js +38 -0
- package/dist/rsc/components/render-content/render-content.js +43 -38
- package/dist/rsc/components/render-content/render-content.types.js +1 -0
- package/dist/rsc/constants/builder-registered-components.js +7 -7
- package/dist/rsc/context/builder.context.js +2 -0
- package/dist/rsc/index-helpers/blocks-exports.js +10 -10
- package/dist/rsc/types/input.js +1 -0
- package/package.json +1 -1
- package/packages/react/src/blocks/button/button.jsx +2 -2
- package/packages/react/src/blocks/button/component-info.js +0 -1
- package/packages/react/src/blocks/columns/columns.jsx +4 -4
- package/packages/react/src/blocks/columns/component-info.js +0 -1
- package/packages/react/src/blocks/custom-code/component-info.js +0 -1
- package/packages/react/src/blocks/embed/component-info.js +0 -1
- package/packages/react/src/blocks/form/component-info.js +0 -1
- package/packages/react/src/blocks/form/form.jsx +2 -2
- package/packages/react/src/blocks/fragment/component-info.js +0 -1
- package/packages/react/src/blocks/image/component-info.js +0 -1
- package/packages/react/src/blocks/image/image.jsx +6 -6
- package/packages/react/src/blocks/img/component-info.js +0 -1
- package/packages/react/src/blocks/input/component-info.js +0 -1
- package/packages/react/src/blocks/raw-text/component-info.js +0 -1
- package/packages/react/src/blocks/section/component-info.js +0 -1
- package/packages/react/src/blocks/select/component-info.js +0 -1
- package/packages/react/src/blocks/submit-button/component-info.js +0 -1
- package/packages/react/src/blocks/symbol/component-info.js +0 -1
- package/packages/react/src/blocks/text/component-info.js +0 -1
- package/packages/react/src/blocks/textarea/component-info.js +0 -1
- package/packages/react/src/blocks/video/component-info.js +0 -1
- package/packages/react/src/components/render-block/render-block.jsx +22 -1
- package/packages/react/src/components/render-block/render-repeated-block.jsx +1 -0
- package/packages/react/src/components/render-blocks.jsx +2 -2
- package/packages/react/src/components/render-content/components/render-styles.helpers.js +57 -0
- package/packages/react/src/components/render-content/components/render-styles.jsx +13 -56
- package/packages/react/src/components/render-content/render-content.helpers.js +48 -0
- package/packages/react/src/components/render-content/render-content.jsx +76 -67
- package/packages/{_rsc/src/components/render-block/types.js → react/src/components/render-content/render-content.types.js} +0 -0
- package/packages/react/src/constants/builder-registered-components.js +7 -7
- package/packages/react/src/context/builder.context.js +2 -0
- package/packages/react/src/index-helpers/blocks-exports.js +18 -18
- package/packages/{_rsc/src/context/types.js → react/src/types/input.js} +0 -0
- package/packages/rsc/src/blocks/button/button.jsx +2 -2
- package/packages/rsc/src/blocks/button/component-info.js +0 -1
- package/packages/rsc/src/blocks/columns/columns.jsx +4 -4
- package/packages/rsc/src/blocks/columns/component-info.js +0 -1
- package/packages/rsc/src/blocks/custom-code/component-info.js +0 -1
- package/packages/rsc/src/blocks/embed/component-info.js +0 -1
- package/packages/rsc/src/blocks/form/component-info.js +0 -1
- package/packages/rsc/src/blocks/form/form.jsx +2 -2
- package/packages/rsc/src/blocks/fragment/component-info.js +0 -1
- package/packages/rsc/src/blocks/image/component-info.js +0 -1
- package/packages/rsc/src/blocks/image/image.jsx +6 -6
- package/packages/rsc/src/blocks/img/component-info.js +0 -1
- package/packages/rsc/src/blocks/input/component-info.js +0 -1
- package/packages/rsc/src/blocks/raw-text/component-info.js +0 -1
- package/packages/rsc/src/blocks/section/component-info.js +0 -1
- package/packages/rsc/src/blocks/select/component-info.js +0 -1
- package/packages/rsc/src/blocks/submit-button/component-info.js +0 -1
- package/packages/rsc/src/blocks/symbol/component-info.js +0 -1
- package/packages/rsc/src/blocks/text/component-info.js +0 -1
- package/packages/rsc/src/blocks/textarea/component-info.js +0 -1
- package/packages/rsc/src/blocks/video/component-info.js +0 -1
- package/packages/rsc/src/components/render-block/render-block.jsx +21 -1
- package/packages/rsc/src/components/render-block/render-repeated-block.jsx +1 -0
- package/packages/rsc/src/components/render-blocks.jsx +2 -2
- package/packages/rsc/src/components/render-content/builder-editing.jsx +61 -4
- package/packages/rsc/src/components/render-content/components/render-styles.helpers.js +57 -0
- package/packages/rsc/src/components/render-content/components/render-styles.jsx +10 -56
- package/packages/rsc/src/components/render-content/render-content.helpers.js +48 -0
- package/packages/rsc/src/components/render-content/render-content.jsx +46 -37
- package/packages/{_rsc/src/functions/get-content/types.js → rsc/src/components/render-content/render-content.types.js} +0 -0
- package/packages/rsc/src/constants/builder-registered-components.js +7 -7
- package/packages/rsc/src/context/builder.context.js +2 -0
- package/packages/rsc/src/index-helpers/blocks-exports.js +18 -18
- package/packages/{_rsc/src/types/builder-block.js → rsc/src/types/input.js} +0 -0
- package/packages/_rsc/src/blocks/BaseText.jsx +0 -10
- package/packages/_rsc/src/blocks/button/button.jsx +0 -29
- package/packages/_rsc/src/blocks/button/component-info.js +0 -41
- package/packages/_rsc/src/blocks/columns/columns.jsx +0 -172
- package/packages/_rsc/src/blocks/columns/component-info.js +0 -242
- package/packages/_rsc/src/blocks/custom-code/component-info.js +0 -31
- package/packages/_rsc/src/blocks/custom-code/custom-code.jsx +0 -55
- package/packages/_rsc/src/blocks/embed/component-info.js +0 -44
- package/packages/_rsc/src/blocks/embed/embed.jsx +0 -43
- package/packages/_rsc/src/blocks/embed/helpers.js +0 -9
- package/packages/_rsc/src/blocks/form/component-info.js +0 -262
- package/packages/_rsc/src/blocks/form/form.jsx +0 -259
- package/packages/_rsc/src/blocks/fragment/component-info.js +0 -11
- package/packages/_rsc/src/blocks/fragment/fragment.jsx +0 -7
- package/packages/_rsc/src/blocks/image/component-info.js +0 -151
- package/packages/_rsc/src/blocks/image/image.helpers.js +0 -48
- package/packages/_rsc/src/blocks/image/image.jsx +0 -124
- package/packages/_rsc/src/blocks/img/component-info.js +0 -20
- package/packages/_rsc/src/blocks/img/img.jsx +0 -19
- package/packages/_rsc/src/blocks/input/component-info.js +0 -74
- package/packages/_rsc/src/blocks/input/input.jsx +0 -21
- package/packages/_rsc/src/blocks/raw-text/component-info.js +0 -16
- package/packages/_rsc/src/blocks/raw-text/raw-text.jsx +0 -12
- package/packages/_rsc/src/blocks/section/component-info.js +0 -49
- package/packages/_rsc/src/blocks/section/section.jsx +0 -29
- package/packages/_rsc/src/blocks/select/component-info.js +0 -59
- package/packages/_rsc/src/blocks/select/select.jsx +0 -22
- package/packages/_rsc/src/blocks/submit-button/component-info.js +0 -28
- package/packages/_rsc/src/blocks/submit-button/submit-button.jsx +0 -11
- package/packages/_rsc/src/blocks/symbol/component-info.js +0 -43
- package/packages/_rsc/src/blocks/symbol/symbol.jsx +0 -56
- package/packages/_rsc/src/blocks/text/component-info.js +0 -24
- package/packages/_rsc/src/blocks/text/text.jsx +0 -12
- package/packages/_rsc/src/blocks/textarea/component-info.js +0 -47
- package/packages/_rsc/src/blocks/textarea/textarea.jsx +0 -15
- package/packages/_rsc/src/blocks/util.js +0 -8
- package/packages/_rsc/src/blocks/video/component-info.js +0 -106
- package/packages/_rsc/src/blocks/video/video.jsx +0 -61
- package/packages/_rsc/src/components/render-block/block-styles.jsx +0 -72
- package/packages/_rsc/src/components/render-block/render-block.helpers.js +0 -23
- package/packages/_rsc/src/components/render-block/render-block.jsx +0 -251
- package/packages/_rsc/src/components/render-block/render-component-with-context.jsx +0 -38
- package/packages/_rsc/src/components/render-block/render-component.jsx +0 -37
- package/packages/_rsc/src/components/render-block/render-repeated-block.jsx +0 -36
- package/packages/_rsc/src/components/render-blocks.jsx +0 -90
- package/packages/_rsc/src/components/render-content/builder-editing.jsx +0 -7
- package/packages/_rsc/src/components/render-content/components/render-styles.jsx +0 -70
- package/packages/_rsc/src/components/render-content/index.js +0 -4
- package/packages/_rsc/src/components/render-content/render-content.jsx +0 -259
- package/packages/_rsc/src/components/render-inlined-styles.jsx +0 -33
- package/packages/_rsc/src/constants/builder-registered-components.js +0 -54
- package/packages/_rsc/src/constants/device-sizes.js +0 -48
- package/packages/_rsc/src/constants/target.js +0 -4
- package/packages/_rsc/src/context/builder.context.js +0 -11
- package/packages/_rsc/src/functions/camel-to-kebab-case.js +0 -4
- package/packages/_rsc/src/functions/evaluate.js +0 -6
- package/packages/_rsc/src/functions/event-handler-name.js +0 -7
- package/packages/_rsc/src/functions/extract-text-styles.js +0 -22
- package/packages/_rsc/src/functions/fast-clone.js +0 -4
- package/packages/_rsc/src/functions/get-block-actions-handler.js +0 -11
- package/packages/_rsc/src/functions/get-block-actions.js +0 -18
- package/packages/_rsc/src/functions/get-block-component-options.js +0 -28
- package/packages/_rsc/src/functions/get-block-properties.js +0 -50
- package/packages/_rsc/src/functions/get-block-tag.js +0 -6
- package/packages/_rsc/src/functions/get-builder-search-params/fn.test.js +0 -13
- package/packages/_rsc/src/functions/get-builder-search-params/index.js +0 -38
- package/packages/_rsc/src/functions/get-content/ab-testing.js +0 -99
- package/packages/_rsc/src/functions/get-content/generate-content-url.js +0 -55
- package/packages/_rsc/src/functions/get-content/generate-content-url.test.js +0 -31
- package/packages/_rsc/src/functions/get-content/index.js +0 -65
- package/packages/_rsc/src/functions/get-fetch.js +0 -14
- package/packages/_rsc/src/functions/get-global-this.js +0 -18
- package/packages/_rsc/src/functions/get-processed-block.js +0 -59
- package/packages/_rsc/src/functions/get-processed-block.test.js +0 -32
- package/packages/_rsc/src/functions/get-react-native-block-styles.js +0 -33
- package/packages/_rsc/src/functions/if-target.js +0 -15
- package/packages/_rsc/src/functions/is-browser.js +0 -6
- package/packages/_rsc/src/functions/is-editing.js +0 -7
- package/packages/_rsc/src/functions/is-iframe.js +0 -7
- package/packages/_rsc/src/functions/is-previewing.js +0 -14
- package/packages/_rsc/src/functions/on-change.js +0 -27
- package/packages/_rsc/src/functions/on-change.test.js +0 -19
- package/packages/_rsc/src/functions/register-component.js +0 -68
- package/packages/_rsc/src/functions/register.js +0 -29
- package/packages/_rsc/src/functions/sanitize-react-native-block-styles.js +0 -66
- package/packages/_rsc/src/functions/set-editor-settings.js +0 -15
- package/packages/_rsc/src/functions/set.js +0 -11
- package/packages/_rsc/src/functions/set.test.js +0 -16
- package/packages/_rsc/src/functions/track.js +0 -124
- package/packages/_rsc/src/functions/transform-block-properties.js +0 -6
- package/packages/_rsc/src/functions/transform-block.js +0 -6
- package/packages/_rsc/src/helpers/ab-tests.js +0 -16
- package/packages/_rsc/src/helpers/cookie.js +0 -81
- package/packages/_rsc/src/helpers/css.js +0 -34
- package/packages/_rsc/src/helpers/flatten.js +0 -34
- package/packages/_rsc/src/helpers/localStorage.js +0 -35
- package/packages/_rsc/src/helpers/nullable.js +0 -4
- package/packages/_rsc/src/helpers/sessionId.js +0 -52
- package/packages/_rsc/src/helpers/time.js +0 -5
- package/packages/_rsc/src/helpers/url.js +0 -13
- package/packages/_rsc/src/helpers/url.test.js +0 -21
- package/packages/_rsc/src/helpers/uuid.js +0 -13
- package/packages/_rsc/src/helpers/visitorId.js +0 -34
- package/packages/_rsc/src/index-helpers/blocks-exports.js +0 -22
- package/packages/_rsc/src/index-helpers/top-of-file.js +0 -2
- package/packages/_rsc/src/index.js +0 -14
- package/packages/_rsc/src/scripts/init-editing.js +0 -93
- package/packages/_rsc/src/types/builder-content.js +0 -0
- package/packages/_rsc/src/types/can-track.js +0 -0
- package/packages/_rsc/src/types/components.js +0 -0
- package/packages/_rsc/src/types/deep-partial.js +0 -0
- package/packages/_rsc/src/types/element.js +0 -0
- package/packages/_rsc/src/types/targets.js +0 -0
- package/packages/_rsc/src/types/typescript.js +0 -0
|
@@ -16,48 +16,49 @@ import builderContext from "../../context/builder.context.js";
|
|
|
16
16
|
import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
|
|
17
17
|
import { checkIsDefined } from "../../helpers/nullable.js";
|
|
18
18
|
import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
|
|
19
|
+
import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
|
|
19
20
|
export default function RenderContent(props) {
|
|
20
21
|
const elementRef = useRef(null);
|
|
21
22
|
const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
|
|
22
23
|
const [overrideContent, setOverrideContent] = useState(() => null);
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
...
|
|
24
|
+
const [useContent, setUseContent] = useState(() => getContentInitialValue({
|
|
25
|
+
content: props.content,
|
|
26
|
+
data: props.data,
|
|
27
|
+
}));
|
|
28
|
+
function mergeNewContent(newContent) {
|
|
29
|
+
setUseContent({
|
|
30
|
+
...useContent,
|
|
31
|
+
...newContent,
|
|
30
32
|
data: {
|
|
31
|
-
...
|
|
32
|
-
...
|
|
33
|
-
...overrideContent?.data,
|
|
33
|
+
...useContent?.data,
|
|
34
|
+
...newContent?.data,
|
|
34
35
|
},
|
|
35
36
|
meta: {
|
|
36
|
-
...
|
|
37
|
-
...
|
|
38
|
-
breakpoints:
|
|
39
|
-
overrideContent?.meta?.breakpoints ||
|
|
40
|
-
props.content?.meta?.breakpoints,
|
|
37
|
+
...useContent?.meta,
|
|
38
|
+
...newContent?.meta,
|
|
39
|
+
breakpoints: newContent?.meta?.breakpoints || useContent?.meta?.breakpoints,
|
|
41
40
|
},
|
|
42
|
-
};
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
function setBreakpoints(breakpoints) {
|
|
44
|
+
setUseContent({
|
|
45
|
+
...useContent,
|
|
46
|
+
meta: {
|
|
47
|
+
...useContent?.meta,
|
|
48
|
+
breakpoints,
|
|
49
|
+
},
|
|
50
|
+
});
|
|
43
51
|
}
|
|
44
52
|
const [update, setUpdate] = useState(() => 0);
|
|
45
|
-
const [useBreakpoints, setUseBreakpoints] = useState(() => null);
|
|
46
53
|
const [canTrackToUse, setCanTrackToUse] = useState(() => checkIsDefined(props.canTrack) ? props.canTrack : true);
|
|
47
|
-
const [
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
locale: props.locale,
|
|
55
|
-
}
|
|
56
|
-
: {}),
|
|
57
|
-
...overrideState,
|
|
58
|
-
};
|
|
54
|
+
const [contentState, setContentState] = useState(() => getContextStateInitialValue({
|
|
55
|
+
content: props.content,
|
|
56
|
+
data: props.data,
|
|
57
|
+
locale: props.locale,
|
|
58
|
+
}));
|
|
59
|
+
function setContextState(newState) {
|
|
60
|
+
setContentState(newState);
|
|
59
61
|
}
|
|
60
|
-
const [contextContext, setContextContext] = useState(() => props.context || {});
|
|
61
62
|
const [allRegisteredComponents, setAllRegisteredComponents] = useState(() => [
|
|
62
63
|
...getDefaultRegisteredComponents(),
|
|
63
64
|
// While this `components` object is deprecated, we must maintain support for it.
|
|
@@ -78,10 +79,12 @@ export default function RenderContent(props) {
|
|
|
78
79
|
case "builder.configureSdk": {
|
|
79
80
|
const messageContent = data.data;
|
|
80
81
|
const { breakpoints, contentId } = messageContent;
|
|
81
|
-
if (!contentId || contentId !== useContent?.
|
|
82
|
+
if (!contentId || contentId !== useContent?.id) {
|
|
82
83
|
return;
|
|
83
84
|
}
|
|
84
|
-
|
|
85
|
+
if (breakpoints) {
|
|
86
|
+
setBreakpoints(breakpoints);
|
|
87
|
+
}
|
|
85
88
|
setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
|
|
86
89
|
break;
|
|
87
90
|
}
|
|
@@ -93,7 +96,7 @@ export default function RenderContent(props) {
|
|
|
93
96
|
messageContent.modelName;
|
|
94
97
|
const contentData = messageContent.data;
|
|
95
98
|
if (key === props.model) {
|
|
96
|
-
|
|
99
|
+
mergeNewContent(contentData);
|
|
97
100
|
setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
|
|
98
101
|
}
|
|
99
102
|
break;
|
|
@@ -107,21 +110,21 @@ export default function RenderContent(props) {
|
|
|
107
110
|
}
|
|
108
111
|
function evaluateJsCode() {
|
|
109
112
|
// run any dynamic JS code attached to content
|
|
110
|
-
const jsCode = useContent?.
|
|
113
|
+
const jsCode = useContent?.data?.jsCode;
|
|
111
114
|
if (jsCode) {
|
|
112
115
|
evaluate({
|
|
113
116
|
code: jsCode,
|
|
114
|
-
context:
|
|
115
|
-
state: contentState
|
|
117
|
+
context: props.context || {},
|
|
118
|
+
state: contentState,
|
|
116
119
|
});
|
|
117
120
|
}
|
|
118
121
|
}
|
|
119
122
|
const [httpReqsData, setHttpReqsData] = useState(() => ({}));
|
|
120
123
|
const [clicked, setClicked] = useState(() => false);
|
|
121
124
|
function onClick(event) {
|
|
122
|
-
if (useContent
|
|
123
|
-
const variationId = useContent?.
|
|
124
|
-
const contentId = useContent?.
|
|
125
|
+
if (useContent) {
|
|
126
|
+
const variationId = useContent?.testVariationId;
|
|
127
|
+
const contentId = useContent?.id;
|
|
125
128
|
_track({
|
|
126
129
|
type: "click",
|
|
127
130
|
canTrack: canTrackToUse,
|
|
@@ -139,26 +142,26 @@ export default function RenderContent(props) {
|
|
|
139
142
|
function evalExpression(expression) {
|
|
140
143
|
return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
|
|
141
144
|
code: group,
|
|
142
|
-
context:
|
|
143
|
-
state: contentState
|
|
145
|
+
context: props.context || {},
|
|
146
|
+
state: contentState,
|
|
144
147
|
}));
|
|
145
148
|
}
|
|
146
149
|
function handleRequest({ url, key }) {
|
|
147
150
|
fetch(url)
|
|
148
151
|
.then((response) => response.json())
|
|
149
152
|
.then((json) => {
|
|
150
|
-
const
|
|
151
|
-
...
|
|
153
|
+
const newState = {
|
|
154
|
+
...contentState,
|
|
152
155
|
[key]: json,
|
|
153
156
|
};
|
|
154
|
-
|
|
157
|
+
setContextState(newState);
|
|
155
158
|
})
|
|
156
159
|
.catch((err) => {
|
|
157
160
|
console.log("error fetching dynamic data", url, err);
|
|
158
161
|
});
|
|
159
162
|
}
|
|
160
163
|
function runHttpRequests() {
|
|
161
|
-
const requests = useContent?.
|
|
164
|
+
const requests = useContent?.data?.httpRequests ?? {};
|
|
162
165
|
Object.entries(requests).forEach(([key, url]) => {
|
|
163
166
|
if (url && (!httpReqsData[key] || isEditing())) {
|
|
164
167
|
const evaluatedUrl = evalExpression(url);
|
|
@@ -173,7 +176,7 @@ export default function RenderContent(props) {
|
|
|
173
176
|
if (isEditing()) {
|
|
174
177
|
window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
|
|
175
178
|
detail: {
|
|
176
|
-
state: contentState
|
|
179
|
+
state: contentState,
|
|
177
180
|
ref: {
|
|
178
181
|
name: props.model,
|
|
179
182
|
},
|
|
@@ -182,8 +185,7 @@ export default function RenderContent(props) {
|
|
|
182
185
|
}
|
|
183
186
|
}
|
|
184
187
|
function shouldRenderContentStyles() {
|
|
185
|
-
return Boolean((useContent?.
|
|
186
|
-
useContent?.()?.data?.customFonts?.length) &&
|
|
188
|
+
return Boolean((useContent?.data?.cssCode || useContent?.data?.customFonts?.length) &&
|
|
187
189
|
TARGET !== "reactNative");
|
|
188
190
|
}
|
|
189
191
|
useEffect(() => {
|
|
@@ -213,9 +215,9 @@ export default function RenderContent(props) {
|
|
|
213
215
|
window.addEventListener("message", processMessage);
|
|
214
216
|
window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
|
|
215
217
|
}
|
|
216
|
-
if (useContent
|
|
217
|
-
const variationId = useContent?.
|
|
218
|
-
const contentId = useContent?.
|
|
218
|
+
if (useContent) {
|
|
219
|
+
const variationId = useContent?.testVariationId;
|
|
220
|
+
const contentId = useContent?.id;
|
|
219
221
|
_track({
|
|
220
222
|
type: "impression",
|
|
221
223
|
canTrack: canTrackToUse,
|
|
@@ -245,7 +247,7 @@ export default function RenderContent(props) {
|
|
|
245
247
|
apiKey: props.apiKey,
|
|
246
248
|
}).then((content) => {
|
|
247
249
|
if (content) {
|
|
248
|
-
|
|
250
|
+
mergeNewContent(content);
|
|
249
251
|
}
|
|
250
252
|
});
|
|
251
253
|
}
|
|
@@ -257,13 +259,13 @@ export default function RenderContent(props) {
|
|
|
257
259
|
}, []);
|
|
258
260
|
useEffect(() => {
|
|
259
261
|
evaluateJsCode();
|
|
260
|
-
}, [useContent?.
|
|
262
|
+
}, [useContent?.data?.jsCode, contentState]);
|
|
261
263
|
useEffect(() => {
|
|
262
264
|
runHttpRequests();
|
|
263
|
-
}, [useContent?.
|
|
265
|
+
}, [useContent?.data?.httpRequests]);
|
|
264
266
|
useEffect(() => {
|
|
265
267
|
emitStateUpdate();
|
|
266
|
-
}, [contentState
|
|
268
|
+
}, [contentState]);
|
|
267
269
|
useEffect(() => {
|
|
268
270
|
return () => {
|
|
269
271
|
if (isBrowser()) {
|
|
@@ -273,13 +275,14 @@ export default function RenderContent(props) {
|
|
|
273
275
|
};
|
|
274
276
|
}, []);
|
|
275
277
|
return (React.createElement(builderContext.Provider, { value: {
|
|
276
|
-
content: useContent
|
|
277
|
-
state: contentState
|
|
278
|
-
|
|
278
|
+
content: useContent,
|
|
279
|
+
state: contentState,
|
|
280
|
+
setState: setContextState,
|
|
281
|
+
context: props.context || {},
|
|
279
282
|
apiKey: props.apiKey,
|
|
280
283
|
registeredComponents: allRegisteredComponents,
|
|
281
|
-
} }, useContent
|
|
282
|
-
React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent?.
|
|
283
|
-
shouldRenderContentStyles() ? (React.createElement(RenderContentStyles, { cssCode: useContent?.
|
|
284
|
-
React.createElement(RenderBlocks, { blocks: useContent?.
|
|
284
|
+
} }, useContent ? (React.createElement(React.Fragment, null,
|
|
285
|
+
React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent?.id, "builder-model": props.model },
|
|
286
|
+
shouldRenderContentStyles() ? (React.createElement(RenderContentStyles, { contentId: useContent?.id, cssCode: useContent?.data?.cssCode, customFonts: useContent?.data?.customFonts })) : null,
|
|
287
|
+
React.createElement(RenderBlocks, { blocks: useContent?.data?.blocks, key: forceReRenderCount })))) : null));
|
|
285
288
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
|
@@ -37,16 +37,16 @@ import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.
|
|
|
37
37
|
import { default as customCode } from "../blocks/custom-code/custom-code";
|
|
38
38
|
import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
|
|
39
39
|
const getDefaultRegisteredComponents = () => [
|
|
40
|
+
__spreadValues({ component: Button }, buttonComponentInfo),
|
|
40
41
|
__spreadValues({ component: Columns }, columnsComponentInfo),
|
|
42
|
+
__spreadValues({ component: customCode }, customCodeInfo),
|
|
43
|
+
__spreadValues({ component: embed }, embedComponentInfo),
|
|
44
|
+
__spreadValues({ component: Fragment }, fragmentComponentInfo),
|
|
41
45
|
__spreadValues({ component: Image }, imageComponentInfo),
|
|
42
46
|
__spreadValues({ component: Img }, imgComponentInfo),
|
|
43
|
-
__spreadValues({ component: Text }, textComponentInfo),
|
|
44
|
-
__spreadValues({ component: Video }, videoComponentInfo),
|
|
45
|
-
__spreadValues({ component: Symbol }, symbolComponentInfo),
|
|
46
|
-
__spreadValues({ component: Button }, buttonComponentInfo),
|
|
47
47
|
__spreadValues({ component: Section }, sectionComponentInfo),
|
|
48
|
-
__spreadValues({ component:
|
|
49
|
-
__spreadValues({ component:
|
|
50
|
-
__spreadValues({ component:
|
|
48
|
+
__spreadValues({ component: Symbol }, symbolComponentInfo),
|
|
49
|
+
__spreadValues({ component: Text }, textComponentInfo),
|
|
50
|
+
__spreadValues({ component: Video }, videoComponentInfo)
|
|
51
51
|
];
|
|
52
52
|
export { getDefaultRegisteredComponents };
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { default as default2 } from "../blocks/
|
|
2
|
-
import { default as default3 } from "../blocks/
|
|
3
|
-
import { default as default4 } from "../blocks/
|
|
4
|
-
import { default as default5 } from "../blocks/
|
|
5
|
-
import { default as default6 } from "../blocks
|
|
6
|
-
import { default as default7 } from "../
|
|
1
|
+
import { default as default2 } from "../blocks/button/button";
|
|
2
|
+
import { default as default3 } from "../blocks/columns/columns";
|
|
3
|
+
import { default as default4 } from "../blocks/fragment/fragment";
|
|
4
|
+
import { default as default5 } from "../blocks/image/image";
|
|
5
|
+
import { default as default6 } from "../components/render-blocks";
|
|
6
|
+
import { default as default7 } from "../components/render-content/render-content";
|
|
7
7
|
import { default as default8 } from "../blocks/section/section";
|
|
8
|
-
import { default as default9 } from "../blocks/
|
|
9
|
-
import { default as default10 } from "../
|
|
10
|
-
import { default as default11 } from "../
|
|
11
|
-
export {
|
|
8
|
+
import { default as default9 } from "../blocks/symbol/symbol";
|
|
9
|
+
import { default as default10 } from "../blocks/text/text";
|
|
10
|
+
import { default as default11 } from "../blocks/video/video";
|
|
11
|
+
export { default2 as Button, default3 as Columns, default4 as Fragment, default5 as Image, default6 as RenderBlocks, default7 as RenderContent, default8 as Section, default9 as Symbol, default10 as Text, default11 as Video };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
|
@@ -3,8 +3,8 @@ export default function Button(props) {
|
|
|
3
3
|
const _context = { ...props["_context"] };
|
|
4
4
|
return (React.createElement(React.Fragment, null,
|
|
5
5
|
props.link ? (React.createElement(React.Fragment, null,
|
|
6
|
-
React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: "button-
|
|
7
|
-
React.createElement("style", null, `.button-
|
|
6
|
+
React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: "button-b25d5310", ...props.attributes }, props.text)),
|
|
7
|
+
React.createElement("style", null, `.button-b25d5310 {
|
|
8
8
|
all: unset;
|
|
9
9
|
}`)));
|
|
10
10
|
}
|
|
@@ -108,13 +108,13 @@ export default function Columns(props) {
|
|
|
108
108
|
};
|
|
109
109
|
return (React.createElement(React.Fragment, null,
|
|
110
110
|
React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
|
|
111
|
-
" div-
|
|
111
|
+
" div-ca644030", style: {
|
|
112
112
|
...(TARGET === "reactNative" ? state.reactNativeColumnsStyles : {}),
|
|
113
113
|
...state.columnsCssVars,
|
|
114
114
|
} },
|
|
115
115
|
TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
|
|
116
116
|
React.createElement(RenderInlinedStyles, { styles: state.columnsStyles, _context: _context }))) : null,
|
|
117
|
-
props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-
|
|
117
|
+
props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-ca644030-2", style: {
|
|
118
118
|
width: state.getColumnCssWidth(index),
|
|
119
119
|
marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
|
|
120
120
|
...(TARGET === "reactNative"
|
|
@@ -125,10 +125,10 @@ export default function Columns(props) {
|
|
|
125
125
|
React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
|
|
126
126
|
flexGrow: "1",
|
|
127
127
|
}, _context: _context }))))),
|
|
128
|
-
React.createElement("style", null, `.div-
|
|
128
|
+
React.createElement("style", null, `.div-ca644030 {
|
|
129
129
|
display: flex;
|
|
130
130
|
line-height: normal;
|
|
131
|
-
}.div-
|
|
131
|
+
}.div-ca644030-2 {
|
|
132
132
|
display: flex;
|
|
133
133
|
flex-direction: column;
|
|
134
134
|
align-items: stretch;
|
|
@@ -190,7 +190,7 @@ export default function FormComponent(props) {
|
|
|
190
190
|
React.createElement(BuilderBlocks, { dataPath: "sendingMessage", blocks: props.sendingMessage, _context: _context }))) : null,
|
|
191
191
|
" ",
|
|
192
192
|
state.submissionState === "error" && state.responseData ? (React.createElement(React.Fragment, null,
|
|
193
|
-
React.createElement("pre", { className: "builder-form-error-text pre-
|
|
193
|
+
React.createElement("pre", { className: "builder-form-error-text pre-41e7c77e" },
|
|
194
194
|
" ",
|
|
195
195
|
JSON.stringify(state.responseData, null, 2),
|
|
196
196
|
" "))) : null,
|
|
@@ -199,6 +199,6 @@ export default function FormComponent(props) {
|
|
|
199
199
|
React.createElement(BuilderBlocks, { dataPath: "successMessage", blocks: props.successMessage, _context: _context }))) : null,
|
|
200
200
|
" "),
|
|
201
201
|
" ",
|
|
202
|
-
React.createElement("style", null, `.pre-
|
|
202
|
+
React.createElement("style", null, `.pre-41e7c77e { padding: 10px; color: red; text-align: center; }`),
|
|
203
203
|
" "));
|
|
204
204
|
}
|
|
@@ -2,7 +2,6 @@ import { serializeFn } from "../util.js";
|
|
|
2
2
|
const componentInfo = {
|
|
3
3
|
name: "Image",
|
|
4
4
|
static: true,
|
|
5
|
-
builtIn: true,
|
|
6
5
|
image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
|
|
7
6
|
defaultStyles: {
|
|
8
7
|
position: "relative",
|
|
@@ -54,25 +54,25 @@ export default function Image(props) {
|
|
|
54
54
|
...state.aspectRatioCss,
|
|
55
55
|
}, className: "builder-image" +
|
|
56
56
|
(props.className ? " " + props.className : "") +
|
|
57
|
-
" img-
|
|
57
|
+
" img-5aa89e3a", src: props.image, srcSet: state.srcSetToUse, sizes: props.sizes })),
|
|
58
58
|
props.aspectRatio &&
|
|
59
59
|
!(props.builderBlock?.children?.length && props.fitContent) ? (React.createElement(React.Fragment, null,
|
|
60
|
-
React.createElement("div", { className: "builder-image-sizer div-
|
|
60
|
+
React.createElement("div", { className: "builder-image-sizer div-5aa89e3a", style: {
|
|
61
61
|
paddingTop:
|
|
62
62
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
63
63
|
props.aspectRatio * 100 + "%",
|
|
64
64
|
} }))) : null,
|
|
65
65
|
props.builderBlock?.children?.length && props.fitContent ? (React.createElement(React.Fragment, null, props.children)) : null,
|
|
66
66
|
!props.fitContent && props.children ? (React.createElement(React.Fragment, null,
|
|
67
|
-
React.createElement("div", { className: "div-
|
|
68
|
-
React.createElement("style", null, `.img-
|
|
67
|
+
React.createElement("div", { className: "div-5aa89e3a-2" }, props.children))) : null),
|
|
68
|
+
React.createElement("style", null, `.img-5aa89e3a {
|
|
69
69
|
opacity: 1;
|
|
70
70
|
transition: opacity 0.2s ease-in-out;
|
|
71
|
-
}.div-
|
|
71
|
+
}.div-5aa89e3a {
|
|
72
72
|
width: 100%;
|
|
73
73
|
pointer-events: none;
|
|
74
74
|
font-size: 0;
|
|
75
|
-
}.div-
|
|
75
|
+
}.div-5aa89e3a-2 {
|
|
76
76
|
display: flex;
|
|
77
77
|
flex-direction: column;
|
|
78
78
|
align-items: stretch;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
const componentInfo = {
|
|
2
2
|
name: "Raw:Img",
|
|
3
3
|
hideFromInsertMenu: true,
|
|
4
|
-
builtIn: true,
|
|
5
4
|
image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
|
|
6
5
|
inputs: [
|
|
7
6
|
{
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
const componentInfo = {
|
|
2
2
|
name: "Text",
|
|
3
3
|
static: true,
|
|
4
|
-
builtIn: true,
|
|
5
4
|
image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
|
|
6
5
|
inputs: [
|
|
7
6
|
{
|
|
@@ -31,10 +31,26 @@ export default function RenderBlock(props) {
|
|
|
31
31
|
shouldEvaluateBindings: true,
|
|
32
32
|
});
|
|
33
33
|
},
|
|
34
|
+
get proxyState() {
|
|
35
|
+
if (typeof Proxy === "undefined") {
|
|
36
|
+
console.error("no Proxy available in this environment, cannot proxy state.");
|
|
37
|
+
return props.context.state;
|
|
38
|
+
}
|
|
39
|
+
const useState = new Proxy(props.context.state, {
|
|
40
|
+
set: (obj, prop, value) => {
|
|
41
|
+
// set the value on the state object, so that the event handler instantly gets the update.
|
|
42
|
+
obj[prop] = value;
|
|
43
|
+
// set the value in the context, so that the rest of the app gets the update.
|
|
44
|
+
props.context.setState?.(obj);
|
|
45
|
+
return true;
|
|
46
|
+
},
|
|
47
|
+
});
|
|
48
|
+
return useState;
|
|
49
|
+
},
|
|
34
50
|
get actions() {
|
|
35
51
|
return getBlockActions({
|
|
36
52
|
block: state.useBlock,
|
|
37
|
-
state:
|
|
53
|
+
state: state.proxyState,
|
|
38
54
|
context: props.context.context,
|
|
39
55
|
});
|
|
40
56
|
},
|
|
@@ -108,6 +124,7 @@ export default function RenderBlock(props) {
|
|
|
108
124
|
state: props.context.state,
|
|
109
125
|
content: props.context.content,
|
|
110
126
|
context: props.context.context,
|
|
127
|
+
setState: props.context.setState,
|
|
111
128
|
registeredComponents: props.context.registeredComponents,
|
|
112
129
|
inheritedStyles: getInheritedTextStyles(),
|
|
113
130
|
};
|
|
@@ -6,6 +6,7 @@ export default function RenderRepeatedBlock(props) {
|
|
|
6
6
|
_context.BuilderContext = {
|
|
7
7
|
content: props.repeatContext.content,
|
|
8
8
|
state: props.repeatContext.state,
|
|
9
|
+
setState: props.repeatContext.setState,
|
|
9
10
|
context: props.repeatContext.context,
|
|
10
11
|
apiKey: props.repeatContext.apiKey,
|
|
11
12
|
registeredComponents: props.repeatContext.registeredComponents,
|
|
@@ -34,12 +34,12 @@ export default function RenderBlocks(props) {
|
|
|
34
34
|
};
|
|
35
35
|
const builderContext = _context["BuilderContext"];
|
|
36
36
|
return (React.createElement(React.Fragment, null,
|
|
37
|
-
React.createElement("div", { className: state.className + " div-
|
|
37
|
+
React.createElement("div", { className: state.className + " div-d19f7a9a", "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
|
|
38
38
|
class: state.className,
|
|
39
39
|
}, style: props.styleProp },
|
|
40
40
|
props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(RenderBlock, { key: "render-block-" + block.id, block: block, context: builderContext, _context: _context }))))) : null,
|
|
41
41
|
props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: builderContext, _context: _context }))))) : null),
|
|
42
|
-
React.createElement("style", null, `.div-
|
|
42
|
+
React.createElement("style", null, `.div-d19f7a9a {
|
|
43
43
|
display: flex;
|
|
44
44
|
flex-direction: column;
|
|
45
45
|
align-items: stretch;
|