@amplifyup/sdk 0.1.68 → 0.1.69
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/AmplifyRenderer.js +4 -0
- package/dist/AmplifyRenderer.js.map +1 -1
- package/dist/AmplifyRenderer.mjs +4 -0
- package/dist/AmplifyRenderer.mjs.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/react.d.mts +19 -1
- package/dist/react.d.ts +19 -1
- package/dist/react.js +119 -70
- package/dist/react.js.map +1 -1
- package/dist/react.mjs +65 -20
- package/dist/react.mjs.map +1 -1
- package/package.json +1 -1
package/dist/react.d.mts
CHANGED
|
@@ -168,6 +168,24 @@ declare function Image<T = unknown>(props: {
|
|
|
168
168
|
alt?: string;
|
|
169
169
|
} & Omit<react__default.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'name'>): react_jsx_runtime.JSX.Element | null;
|
|
170
170
|
|
|
171
|
+
/** Tells Slot whether the layout/provider fetch has settled. */
|
|
172
|
+
declare function ComposerLayoutStatusProvider({ ready, children, }: {
|
|
173
|
+
ready: boolean;
|
|
174
|
+
children: ReactNode;
|
|
175
|
+
}): react_jsx_runtime.JSX.Element;
|
|
176
|
+
|
|
177
|
+
/** Composer slot lifecycle. Loading ≠ empty. */
|
|
178
|
+
type SlotState = 'loading' | 'empty' | 'filled';
|
|
179
|
+
declare function resolveSlotState(opts: {
|
|
180
|
+
layoutReady: boolean;
|
|
181
|
+
hasContent: boolean;
|
|
182
|
+
}): SlotState;
|
|
183
|
+
/** Add-component affordance is only for a resolved, empty slot. */
|
|
184
|
+
declare function slotShowsAddComponent(state: SlotState): boolean;
|
|
185
|
+
declare function slotStateFromEl(el: {
|
|
186
|
+
getAttribute: (name: string) => string | null;
|
|
187
|
+
} | null | undefined): SlotState | null;
|
|
188
|
+
|
|
171
189
|
declare function ComposerProvider({ children, }: {
|
|
172
190
|
children: ReactNode;
|
|
173
191
|
}): react_jsx_runtime.JSX.Element;
|
|
@@ -196,4 +214,4 @@ interface AmplifyUpProviderProps {
|
|
|
196
214
|
declare function AmplifyUpProvider({ children, config, pageContext, }: AmplifyUpProviderProps): react_jsx_runtime.JSX.Element;
|
|
197
215
|
declare function useAmplifyUp(): AmplifyUpContextType;
|
|
198
216
|
|
|
199
|
-
export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ComposerProvider, ContentSource, Field, Field$1 as FieldEnvelope, Image, LayoutComponentProps, MaybeComposerProvider, PageConfig, RichText, Slot, useAmplifyUp };
|
|
217
|
+
export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ComposerLayoutStatusProvider, ComposerProvider, ContentSource, Field, Field$1 as FieldEnvelope, Image, LayoutComponentProps, MaybeComposerProvider, PageConfig, RichText, Slot, type SlotState, resolveSlotState, slotShowsAddComponent, slotStateFromEl, useAmplifyUp };
|
package/dist/react.d.ts
CHANGED
|
@@ -168,6 +168,24 @@ declare function Image<T = unknown>(props: {
|
|
|
168
168
|
alt?: string;
|
|
169
169
|
} & Omit<react__default.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'name'>): react_jsx_runtime.JSX.Element | null;
|
|
170
170
|
|
|
171
|
+
/** Tells Slot whether the layout/provider fetch has settled. */
|
|
172
|
+
declare function ComposerLayoutStatusProvider({ ready, children, }: {
|
|
173
|
+
ready: boolean;
|
|
174
|
+
children: ReactNode;
|
|
175
|
+
}): react_jsx_runtime.JSX.Element;
|
|
176
|
+
|
|
177
|
+
/** Composer slot lifecycle. Loading ≠ empty. */
|
|
178
|
+
type SlotState = 'loading' | 'empty' | 'filled';
|
|
179
|
+
declare function resolveSlotState(opts: {
|
|
180
|
+
layoutReady: boolean;
|
|
181
|
+
hasContent: boolean;
|
|
182
|
+
}): SlotState;
|
|
183
|
+
/** Add-component affordance is only for a resolved, empty slot. */
|
|
184
|
+
declare function slotShowsAddComponent(state: SlotState): boolean;
|
|
185
|
+
declare function slotStateFromEl(el: {
|
|
186
|
+
getAttribute: (name: string) => string | null;
|
|
187
|
+
} | null | undefined): SlotState | null;
|
|
188
|
+
|
|
171
189
|
declare function ComposerProvider({ children, }: {
|
|
172
190
|
children: ReactNode;
|
|
173
191
|
}): react_jsx_runtime.JSX.Element;
|
|
@@ -196,4 +214,4 @@ interface AmplifyUpProviderProps {
|
|
|
196
214
|
declare function AmplifyUpProvider({ children, config, pageContext, }: AmplifyUpProviderProps): react_jsx_runtime.JSX.Element;
|
|
197
215
|
declare function useAmplifyUp(): AmplifyUpContextType;
|
|
198
216
|
|
|
199
|
-
export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ComposerProvider, ContentSource, Field, Field$1 as FieldEnvelope, Image, LayoutComponentProps, MaybeComposerProvider, PageConfig, RichText, Slot, useAmplifyUp };
|
|
217
|
+
export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ComposerLayoutStatusProvider, ComposerProvider, ContentSource, Field, Field$1 as FieldEnvelope, Image, LayoutComponentProps, MaybeComposerProvider, PageConfig, RichText, Slot, type SlotState, resolveSlotState, slotShowsAddComponent, slotStateFromEl, useAmplifyUp };
|
package/dist/react.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var React3 = require('react');
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var marked = require('marked');
|
|
7
7
|
|
|
8
8
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var React3__default = /*#__PURE__*/_interopDefault(React3);
|
|
11
11
|
|
|
12
12
|
/* @amplifyup/sdk - https://amplifyup.ai */
|
|
13
13
|
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
@@ -1044,7 +1044,7 @@ function dedupeLayoutProviderFetch(key, fetchFn) {
|
|
|
1044
1044
|
function previewLayoutReady(opts) {
|
|
1045
1045
|
if (opts.hasClientLayout) return true;
|
|
1046
1046
|
if (opts.clientLoading) return false;
|
|
1047
|
-
return
|
|
1047
|
+
return true;
|
|
1048
1048
|
}
|
|
1049
1049
|
|
|
1050
1050
|
// src/edge/normalizeRoute.ts
|
|
@@ -3891,8 +3891,8 @@ var trackContentView = (contentId, contentType, properties) => getSDK().trackCon
|
|
|
3891
3891
|
var refreshEventTracking = () => getSDK().refreshEventTracking();
|
|
3892
3892
|
getSDK();
|
|
3893
3893
|
function useComposerPreviewFlag(force = false) {
|
|
3894
|
-
const [detected, setDetected] =
|
|
3895
|
-
|
|
3894
|
+
const [detected, setDetected] = React3.useState(false);
|
|
3895
|
+
React3.useEffect(() => {
|
|
3896
3896
|
if (!force && isComposerPreview()) setDetected(true);
|
|
3897
3897
|
}, [force]);
|
|
3898
3898
|
return force || detected;
|
|
@@ -3939,19 +3939,19 @@ var ComposerFieldStore = class {
|
|
|
3939
3939
|
for (const fn of set) fn();
|
|
3940
3940
|
}
|
|
3941
3941
|
};
|
|
3942
|
-
var ComposerStoreContext =
|
|
3943
|
-
var ComposerNodeContext =
|
|
3942
|
+
var ComposerStoreContext = React3.createContext(null);
|
|
3943
|
+
var ComposerNodeContext = React3.createContext(void 0);
|
|
3944
3944
|
function applyComposerPatch(store, name, value, ref, layoutNodeId) {
|
|
3945
3945
|
store.set(composerStoreKey(name, ref, layoutNodeId), value);
|
|
3946
3946
|
}
|
|
3947
3947
|
function ComposerProvider({
|
|
3948
3948
|
children
|
|
3949
3949
|
}) {
|
|
3950
|
-
const existing =
|
|
3951
|
-
const storeRef =
|
|
3950
|
+
const existing = React3.useContext(ComposerStoreContext);
|
|
3951
|
+
const storeRef = React3.useRef(null);
|
|
3952
3952
|
if (!storeRef.current) storeRef.current = new ComposerFieldStore();
|
|
3953
3953
|
const store = existing || storeRef.current;
|
|
3954
|
-
|
|
3954
|
+
React3.useEffect(() => {
|
|
3955
3955
|
if (existing) return;
|
|
3956
3956
|
const applyField = (fieldName, value, nodeId, ref) => {
|
|
3957
3957
|
if (!fieldName || typeof fieldName !== "string") return;
|
|
@@ -4015,10 +4015,10 @@ function ComposerProvider({
|
|
|
4015
4015
|
return /* @__PURE__ */ jsxRuntime.jsx(ComposerStoreContext.Provider, { value: store, children });
|
|
4016
4016
|
}
|
|
4017
4017
|
function useComposerFieldValue(name, fallback, ref) {
|
|
4018
|
-
const store =
|
|
4019
|
-
const layoutNodeId =
|
|
4018
|
+
const store = React3.useContext(ComposerStoreContext);
|
|
4019
|
+
const layoutNodeId = React3.useContext(ComposerNodeContext);
|
|
4020
4020
|
const key = composerStoreKey(name, ref, layoutNodeId);
|
|
4021
|
-
const subscribe =
|
|
4021
|
+
const subscribe = React3.useCallback(
|
|
4022
4022
|
(onStoreChange) => {
|
|
4023
4023
|
if (!store || !name) return () => {
|
|
4024
4024
|
};
|
|
@@ -4026,11 +4026,11 @@ function useComposerFieldValue(name, fallback, ref) {
|
|
|
4026
4026
|
},
|
|
4027
4027
|
[store, name, key]
|
|
4028
4028
|
);
|
|
4029
|
-
const getSnapshot =
|
|
4029
|
+
const getSnapshot = React3.useCallback(() => {
|
|
4030
4030
|
if (!store || !name) return void 0;
|
|
4031
4031
|
return store.get(key);
|
|
4032
4032
|
}, [store, name, key]);
|
|
4033
|
-
const overlay =
|
|
4033
|
+
const overlay = React3.useSyncExternalStore(subscribe, getSnapshot, () => void 0);
|
|
4034
4034
|
return overlay !== void 0 ? overlay : fallback;
|
|
4035
4035
|
}
|
|
4036
4036
|
function MaybeComposerProvider({
|
|
@@ -4038,7 +4038,7 @@ function MaybeComposerProvider({
|
|
|
4038
4038
|
layoutNodeId,
|
|
4039
4039
|
children
|
|
4040
4040
|
}) {
|
|
4041
|
-
const content =
|
|
4041
|
+
const content = React3.useMemo(() => children, [children]);
|
|
4042
4042
|
if (!enabled) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: content });
|
|
4043
4043
|
return /* @__PURE__ */ jsxRuntime.jsx(ComposerProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ComposerNodeContext.Provider, { value: layoutNodeId, children }) });
|
|
4044
4044
|
}
|
|
@@ -4058,7 +4058,7 @@ function nodeRenderProps(node) {
|
|
|
4058
4058
|
fields: branded
|
|
4059
4059
|
};
|
|
4060
4060
|
}
|
|
4061
|
-
var ComponentRenderBoundary = class extends
|
|
4061
|
+
var ComponentRenderBoundary = class extends React3.Component {
|
|
4062
4062
|
constructor() {
|
|
4063
4063
|
super(...arguments);
|
|
4064
4064
|
this.state = { error: null };
|
|
@@ -4131,8 +4131,8 @@ function AmplifyRendererInner({
|
|
|
4131
4131
|
const loading = serverPageConfig ? false : clientHook.loading;
|
|
4132
4132
|
const error = serverPageConfig ? null : clientHook.error;
|
|
4133
4133
|
const contentSource = clientHook.source;
|
|
4134
|
-
const [variantCache, setVariantCache] =
|
|
4135
|
-
|
|
4134
|
+
const [variantCache, setVariantCache] = React3.useState({});
|
|
4135
|
+
React3.useEffect(() => {
|
|
4136
4136
|
if (typeof window !== "undefined") {
|
|
4137
4137
|
if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
|
|
4138
4138
|
return;
|
|
@@ -4158,7 +4158,7 @@ function AmplifyRendererInner({
|
|
|
4158
4158
|
});
|
|
4159
4159
|
}
|
|
4160
4160
|
}, [pageConfig]);
|
|
4161
|
-
|
|
4161
|
+
React3.useEffect(() => {
|
|
4162
4162
|
if (!pageConfig?.eventTracking?.length) return;
|
|
4163
4163
|
const sdk = getSDK();
|
|
4164
4164
|
if (!sdk.isInitialized()) return;
|
|
@@ -4176,7 +4176,7 @@ function AmplifyRendererInner({
|
|
|
4176
4176
|
window.clearTimeout(t2);
|
|
4177
4177
|
};
|
|
4178
4178
|
}, [pageConfig?.id, pageConfig?.eventTracking]);
|
|
4179
|
-
|
|
4179
|
+
React3.useEffect(() => {
|
|
4180
4180
|
if (!pageConfig) return;
|
|
4181
4181
|
const t = window.setTimeout(() => {
|
|
4182
4182
|
getSDK().setupComponentViewTracking();
|
|
@@ -4184,7 +4184,7 @@ function AmplifyRendererInner({
|
|
|
4184
4184
|
}, 100);
|
|
4185
4185
|
return () => window.clearTimeout(t);
|
|
4186
4186
|
}, [variantCache, pageConfig?.id]);
|
|
4187
|
-
|
|
4187
|
+
React3.useEffect(() => {
|
|
4188
4188
|
const isVisualEditorMode = () => {
|
|
4189
4189
|
if (typeof window === "undefined") return false;
|
|
4190
4190
|
const urlParams = new URLSearchParams(window.location.search);
|
|
@@ -4278,7 +4278,7 @@ function AmplifyRendererInner({
|
|
|
4278
4278
|
);
|
|
4279
4279
|
}
|
|
4280
4280
|
}, [pageConfig]);
|
|
4281
|
-
|
|
4281
|
+
React3.useEffect(() => {
|
|
4282
4282
|
if (!pageConfig?.layoutTree || !pageConfig.layoutId) return;
|
|
4283
4283
|
const roots = pageConfig.layoutTree;
|
|
4284
4284
|
const fromEdge = contentSource === "edge" || roots.some((n) => n._contentSource === "edge");
|
|
@@ -4419,7 +4419,7 @@ function AmplifyRendererInner({
|
|
|
4419
4419
|
"data-amplifyup-slot": "content",
|
|
4420
4420
|
"data-parent-node-id": node.id,
|
|
4421
4421
|
"data-parent-component-id": "AmplifyZone",
|
|
4422
|
-
children: children.filter(Boolean).map((child) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
4422
|
+
children: children.filter(Boolean).map((child) => /* @__PURE__ */ jsxRuntime.jsx(React3.Fragment, { children: renderNode(child) }, child.id))
|
|
4423
4423
|
}
|
|
4424
4424
|
)
|
|
4425
4425
|
}
|
|
@@ -4452,7 +4452,7 @@ function AmplifyRendererInner({
|
|
|
4452
4452
|
"data-zone-id": slot.zoneId || void 0,
|
|
4453
4453
|
"data-parent-node-id": node.id,
|
|
4454
4454
|
"data-parent-component-id": node.componentId,
|
|
4455
|
-
children: safeChildren.filter(Boolean).map((child) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
4455
|
+
children: safeChildren.filter(Boolean).map((child) => /* @__PURE__ */ jsxRuntime.jsx(React3.Fragment, { children: renderNode(child) }, child.id))
|
|
4456
4456
|
},
|
|
4457
4457
|
slot.slotId
|
|
4458
4458
|
);
|
|
@@ -4498,12 +4498,13 @@ function AmplifyRendererInner({
|
|
|
4498
4498
|
"data-slot-id": "main",
|
|
4499
4499
|
"data-amplifyup-slot": "main",
|
|
4500
4500
|
"data-slot-source": "page",
|
|
4501
|
+
"data-slot-state": layoutTree.length === 0 ? "empty" : "filled",
|
|
4501
4502
|
"data-slot-empty": layoutTree.length === 0 ? "true" : void 0,
|
|
4502
|
-
children: layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
4503
|
+
children: layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(React3.Fragment, { children: renderNode(node) }, node.id))
|
|
4503
4504
|
}
|
|
4504
|
-
) : layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
4505
|
+
) : layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(React3.Fragment, { children: renderNode(node) }, node.id)) }) });
|
|
4505
4506
|
}
|
|
4506
|
-
var AmplifyRenderer =
|
|
4507
|
+
var AmplifyRenderer = React3.memo(AmplifyRendererInner);
|
|
4507
4508
|
function AddComponentIcon({ size = 28 }) {
|
|
4508
4509
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4509
4510
|
"svg",
|
|
@@ -4598,16 +4599,34 @@ function EmptySlotHint({
|
|
|
4598
4599
|
}
|
|
4599
4600
|
);
|
|
4600
4601
|
}
|
|
4601
|
-
|
|
4602
|
+
var ComposerLayoutStatusContext = React3.createContext({
|
|
4603
|
+
ready: true
|
|
4604
|
+
});
|
|
4605
|
+
function ComposerLayoutStatusProvider({
|
|
4606
|
+
ready,
|
|
4607
|
+
children
|
|
4608
|
+
}) {
|
|
4609
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ComposerLayoutStatusContext.Provider, { value: { ready }, children });
|
|
4610
|
+
}
|
|
4611
|
+
function useComposerLayoutStatus() {
|
|
4612
|
+
return React3.useContext(ComposerLayoutStatusContext);
|
|
4613
|
+
}
|
|
4614
|
+
function previewPageSlot(state) {
|
|
4602
4615
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4603
4616
|
"div",
|
|
4604
4617
|
{
|
|
4605
4618
|
"data-slot-id": "main",
|
|
4606
4619
|
"data-amplifyup-slot": "main",
|
|
4607
4620
|
"data-slot-source": "page",
|
|
4608
|
-
"data-slot-
|
|
4609
|
-
|
|
4610
|
-
|
|
4621
|
+
"data-slot-state": state,
|
|
4622
|
+
"data-slot-empty": state === "empty" ? "true" : void 0,
|
|
4623
|
+
style: {
|
|
4624
|
+
minHeight: state === "empty" ? "50vh" : void 0,
|
|
4625
|
+
width: "100%",
|
|
4626
|
+
display: "block",
|
|
4627
|
+
position: "relative"
|
|
4628
|
+
},
|
|
4629
|
+
children: state === "empty" ? /* @__PURE__ */ jsxRuntime.jsx(EmptySlotHint, {}) : null
|
|
4611
4630
|
}
|
|
4612
4631
|
);
|
|
4613
4632
|
}
|
|
@@ -4654,25 +4673,26 @@ function AmplifyPageContent({
|
|
|
4654
4673
|
}
|
|
4655
4674
|
const loading = !hasAmplifyLayout(pageConfig) && client.loading;
|
|
4656
4675
|
const error = hasAmplifyLayout(pageConfig) ? null : pageConfigProp ? null : client.error;
|
|
4657
|
-
const
|
|
4658
|
-
const previewLoading = previewLoadingComponent ??
|
|
4676
|
+
const previewEmpty = previewEmptyComponent ?? previewPageSlot("empty");
|
|
4677
|
+
const previewLoading = previewLoadingComponent ?? previewPageSlot("loading");
|
|
4659
4678
|
if (preview) {
|
|
4660
4679
|
const ready = previewLayoutReady({
|
|
4661
4680
|
clientLoading: client.loading,
|
|
4662
|
-
hasClientLayout: !!clientLayout
|
|
4663
|
-
|
|
4664
|
-
|
|
4665
|
-
|
|
4681
|
+
hasClientLayout: !!clientLayout});
|
|
4682
|
+
if (!ready) {
|
|
4683
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ComposerLayoutStatusProvider, { ready: false, children: previewLoading });
|
|
4684
|
+
}
|
|
4685
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ComposerLayoutStatusProvider, { ready: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4666
4686
|
AmplifyRenderer,
|
|
4667
4687
|
{
|
|
4668
|
-
pageConfig:
|
|
4688
|
+
pageConfig: pageConfig ?? void 0,
|
|
4669
4689
|
renderComponent,
|
|
4670
4690
|
composerPreview: true,
|
|
4671
4691
|
loadingComponent: loadingComponent ?? previewLoading,
|
|
4672
|
-
emptyComponent: emptyComponent ??
|
|
4673
|
-
errorComponent: errorComponent ?? (() =>
|
|
4692
|
+
emptyComponent: emptyComponent ?? previewEmpty,
|
|
4693
|
+
errorComponent: errorComponent ?? (() => previewEmpty)
|
|
4674
4694
|
}
|
|
4675
|
-
);
|
|
4695
|
+
) });
|
|
4676
4696
|
}
|
|
4677
4697
|
if (loading) {
|
|
4678
4698
|
return loadingComponent ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent }) : null;
|
|
@@ -4696,6 +4716,24 @@ function AmplifyPageContent({
|
|
|
4696
4716
|
);
|
|
4697
4717
|
}
|
|
4698
4718
|
|
|
4719
|
+
// src/slot-state.ts
|
|
4720
|
+
function resolveSlotState(opts) {
|
|
4721
|
+
if (!opts.layoutReady) return "loading";
|
|
4722
|
+
return opts.hasContent ? "filled" : "empty";
|
|
4723
|
+
}
|
|
4724
|
+
function slotShowsAddComponent(state) {
|
|
4725
|
+
return state === "empty";
|
|
4726
|
+
}
|
|
4727
|
+
function slotStateFromEl(el) {
|
|
4728
|
+
if (!el) return null;
|
|
4729
|
+
const explicit = el.getAttribute("data-slot-state");
|
|
4730
|
+
if (explicit === "loading" || explicit === "empty" || explicit === "filled") {
|
|
4731
|
+
return explicit;
|
|
4732
|
+
}
|
|
4733
|
+
if (el.getAttribute("data-slot-empty") === "true") return "empty";
|
|
4734
|
+
return null;
|
|
4735
|
+
}
|
|
4736
|
+
|
|
4699
4737
|
// src/composer-edit-mode.ts
|
|
4700
4738
|
function isComposerEditMode() {
|
|
4701
4739
|
if (typeof window === "undefined") return false;
|
|
@@ -4710,7 +4748,7 @@ function subscribeComposerEdit(onStoreChange) {
|
|
|
4710
4748
|
function getComposerEditModeServer() {
|
|
4711
4749
|
return false;
|
|
4712
4750
|
}
|
|
4713
|
-
var ComponentContext =
|
|
4751
|
+
var ComponentContext = React3.createContext(null);
|
|
4714
4752
|
function ComponentContextProvider({
|
|
4715
4753
|
children,
|
|
4716
4754
|
slots,
|
|
@@ -4731,13 +4769,18 @@ function Slot({
|
|
|
4731
4769
|
name,
|
|
4732
4770
|
className
|
|
4733
4771
|
}) {
|
|
4734
|
-
const context =
|
|
4772
|
+
const context = React3.useContext(ComponentContext);
|
|
4735
4773
|
if (!context) {
|
|
4736
4774
|
console.warn(`[AmplifyUp SDK] Slot "${name}" used outside ComponentContextProvider`);
|
|
4737
4775
|
return null;
|
|
4738
4776
|
}
|
|
4739
4777
|
const slotContent = context.slots?.[name];
|
|
4740
|
-
const
|
|
4778
|
+
const { ready: layoutReady } = useComposerLayoutStatus();
|
|
4779
|
+
const slotState = resolveSlotState({
|
|
4780
|
+
layoutReady,
|
|
4781
|
+
hasContent: !!slotContent
|
|
4782
|
+
});
|
|
4783
|
+
const isEmpty = slotState === "empty";
|
|
4741
4784
|
const isEditorMode = typeof window !== "undefined" && // Check for preview mode flag set by proxy
|
|
4742
4785
|
(window.__AMPLIFYUP_PREVIEW_MODE__ === true || // Check URL query params
|
|
4743
4786
|
new URLSearchParams(window.location.search).get("preview") === "true" || new URLSearchParams(window.location.search).get("visualEditor") === "true" || // Check if in iframe from orchestrator (check referrer hostname/port)
|
|
@@ -4753,6 +4796,7 @@ function Slot({
|
|
|
4753
4796
|
`slot:${context.layoutNodeId || ""}:${name}`,
|
|
4754
4797
|
`[Slot:${name}]`,
|
|
4755
4798
|
{
|
|
4799
|
+
slotState,
|
|
4756
4800
|
isEmpty,
|
|
4757
4801
|
isEditorMode,
|
|
4758
4802
|
availableSlotKeys: context.slots ? Object.keys(context.slots) : []
|
|
@@ -4765,6 +4809,7 @@ function Slot({
|
|
|
4765
4809
|
"data-slot-name": name,
|
|
4766
4810
|
"data-slot-id": name,
|
|
4767
4811
|
"data-amplifyup-slot": name,
|
|
4812
|
+
"data-slot-state": slotState,
|
|
4768
4813
|
"data-slot-empty": isEmpty ? "true" : void 0,
|
|
4769
4814
|
"data-parent-node-id": context.layoutNodeId || void 0,
|
|
4770
4815
|
"data-parent-component-id": context.componentId || void 0,
|
|
@@ -4774,7 +4819,7 @@ function Slot({
|
|
|
4774
4819
|
// Only add position relative for overlay positioning in editor mode
|
|
4775
4820
|
position: isEditorMode ? "relative" : void 0
|
|
4776
4821
|
},
|
|
4777
|
-
children: isEmpty ? isEditorMode ? /* @__PURE__ */ jsxRuntime.jsx(EmptySlotHint, { compact: true }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
4822
|
+
children: slotState === "loading" ? null : isEmpty ? isEditorMode ? /* @__PURE__ */ jsxRuntime.jsx(EmptySlotHint, { compact: true }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
4778
4823
|
"div",
|
|
4779
4824
|
{
|
|
4780
4825
|
className: "amplifyup-slot-placeholder",
|
|
@@ -4846,7 +4891,7 @@ function canInlineEditRichText(name, value) {
|
|
|
4846
4891
|
return true;
|
|
4847
4892
|
}
|
|
4848
4893
|
function useComposerEditMode() {
|
|
4849
|
-
return
|
|
4894
|
+
return React3.useSyncExternalStore(
|
|
4850
4895
|
subscribeComposerEdit,
|
|
4851
4896
|
isComposerEditMode,
|
|
4852
4897
|
getComposerEditModeServer
|
|
@@ -4924,14 +4969,14 @@ function ComposerInlineField({
|
|
|
4924
4969
|
fieldRef,
|
|
4925
4970
|
rich = false
|
|
4926
4971
|
}) {
|
|
4927
|
-
const [focused, setFocused] =
|
|
4928
|
-
const elRef =
|
|
4972
|
+
const [focused, setFocused] = React3.useState(false);
|
|
4973
|
+
const elRef = React3.useRef(null);
|
|
4929
4974
|
const storedEmpty = isComposerEmptyText(value);
|
|
4930
4975
|
const text = storedEmpty ? "" : formatFieldValue(value);
|
|
4931
4976
|
const hint = COMPOSER_EMPTY_FIELD_HINT;
|
|
4932
4977
|
const idleDisplay = storedEmpty ? hint : text;
|
|
4933
4978
|
const showHint = storedEmpty && !focused;
|
|
4934
|
-
|
|
4979
|
+
React3.useEffect(() => {
|
|
4935
4980
|
const el = elRef.current;
|
|
4936
4981
|
if (!el) return;
|
|
4937
4982
|
if (document.activeElement === el) return;
|
|
@@ -5049,8 +5094,8 @@ function ComposerInlineHtml({
|
|
|
5049
5094
|
componentId,
|
|
5050
5095
|
fieldRef
|
|
5051
5096
|
}) {
|
|
5052
|
-
const elRef =
|
|
5053
|
-
|
|
5097
|
+
const elRef = React3.useRef(null);
|
|
5098
|
+
React3.useEffect(() => {
|
|
5054
5099
|
const el = elRef.current;
|
|
5055
5100
|
if (!el) return;
|
|
5056
5101
|
if (el.innerHTML !== html) el.innerHTML = html;
|
|
@@ -5068,7 +5113,7 @@ function ComposerInlineHtml({
|
|
|
5068
5113
|
fieldRef
|
|
5069
5114
|
});
|
|
5070
5115
|
};
|
|
5071
|
-
return
|
|
5116
|
+
return React3__default.default.createElement(Tag, {
|
|
5072
5117
|
ref: elRef,
|
|
5073
5118
|
className,
|
|
5074
5119
|
"data-amplifyup-field": name,
|
|
@@ -5167,7 +5212,7 @@ function hasOwnProp(props, key) {
|
|
|
5167
5212
|
}
|
|
5168
5213
|
function Field(props) {
|
|
5169
5214
|
const { field, value, name, className } = props;
|
|
5170
|
-
const context =
|
|
5215
|
+
const context = React3.useContext(ComponentContext);
|
|
5171
5216
|
const composerEdit = useComposerEditMode();
|
|
5172
5217
|
const hasField = isFieldEnvelope(field);
|
|
5173
5218
|
const hasValue = hasOwnProp(props, "value");
|
|
@@ -5221,7 +5266,7 @@ function RichText(props) {
|
|
|
5221
5266
|
as: Tag = "div",
|
|
5222
5267
|
children
|
|
5223
5268
|
} = props;
|
|
5224
|
-
const context =
|
|
5269
|
+
const context = React3.useContext(ComponentContext);
|
|
5225
5270
|
const composerEdit = useComposerEditMode();
|
|
5226
5271
|
const childrenValue = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
|
|
5227
5272
|
const hasField = isFieldEnvelope(field);
|
|
@@ -5344,7 +5389,7 @@ function Image(props) {
|
|
|
5344
5389
|
height: heightProp,
|
|
5345
5390
|
...imgProps
|
|
5346
5391
|
} = props;
|
|
5347
|
-
const context =
|
|
5392
|
+
const context = React3.useContext(ComponentContext);
|
|
5348
5393
|
assertNamedEnvelope("Image", field);
|
|
5349
5394
|
const coerced = coerceImageField(field, value, name);
|
|
5350
5395
|
const boundField = coerced.field;
|
|
@@ -5431,7 +5476,7 @@ if (typeof window !== "undefined") {
|
|
|
5431
5476
|
} catch {
|
|
5432
5477
|
}
|
|
5433
5478
|
}
|
|
5434
|
-
var AmplifyUpContext =
|
|
5479
|
+
var AmplifyUpContext = React3.createContext(null);
|
|
5435
5480
|
function normalizeRoutePath2(route) {
|
|
5436
5481
|
if (!route) return "";
|
|
5437
5482
|
const path = route.split("?")[0] || "/";
|
|
@@ -5443,12 +5488,12 @@ function AmplifyUpProvider({
|
|
|
5443
5488
|
config,
|
|
5444
5489
|
pageContext
|
|
5445
5490
|
}) {
|
|
5446
|
-
const [initialized, setInitialized] =
|
|
5447
|
-
const [pageConfig, setPageConfig] =
|
|
5448
|
-
const [loading, setLoading] =
|
|
5449
|
-
const [error, setError] =
|
|
5450
|
-
const [source, setSource] =
|
|
5451
|
-
const [meta, setMeta] =
|
|
5491
|
+
const [initialized, setInitialized] = React3.useState(false);
|
|
5492
|
+
const [pageConfig, setPageConfig] = React3.useState(null);
|
|
5493
|
+
const [loading, setLoading] = React3.useState(true);
|
|
5494
|
+
const [error, setError] = React3.useState(null);
|
|
5495
|
+
const [source, setSource] = React3.useState(null);
|
|
5496
|
+
const [meta, setMeta] = React3.useState(null);
|
|
5452
5497
|
const getActualRoute = () => {
|
|
5453
5498
|
if (typeof window === "undefined") return "";
|
|
5454
5499
|
const currentPath = window.location.pathname;
|
|
@@ -5465,15 +5510,15 @@ function AmplifyUpProvider({
|
|
|
5465
5510
|
}
|
|
5466
5511
|
return currentPath;
|
|
5467
5512
|
};
|
|
5468
|
-
const loadedRouteRef =
|
|
5513
|
+
const loadedRouteRef = React3.useRef(null);
|
|
5469
5514
|
const nextPathname = usePathname ? usePathname() : null;
|
|
5470
|
-
const [pathname, setPathname] =
|
|
5515
|
+
const [pathname, setPathname] = React3.useState(() => {
|
|
5471
5516
|
if (typeof window !== "undefined") {
|
|
5472
5517
|
return getActualRoute();
|
|
5473
5518
|
}
|
|
5474
5519
|
return "";
|
|
5475
5520
|
});
|
|
5476
|
-
|
|
5521
|
+
React3.useEffect(() => {
|
|
5477
5522
|
if (typeof window !== "undefined") {
|
|
5478
5523
|
const actualRoute = getActualRoute();
|
|
5479
5524
|
if (window.location.pathname === "/api/pages/proxy" || window.location.pathname.startsWith("/api/pages/proxy")) {
|
|
@@ -5500,11 +5545,11 @@ function AmplifyUpProvider({
|
|
|
5500
5545
|
}
|
|
5501
5546
|
}, [nextPathname]);
|
|
5502
5547
|
const pageContextKey = pageContext ? `${pageContext.resourceType}:${pageContext.key}` : "";
|
|
5503
|
-
|
|
5548
|
+
React3.useEffect(() => {
|
|
5504
5549
|
if (!initialized || !pageContext) return;
|
|
5505
5550
|
getSDK().setPageContext(pageContext);
|
|
5506
5551
|
}, [initialized, pageContextKey]);
|
|
5507
|
-
|
|
5552
|
+
React3.useEffect(() => {
|
|
5508
5553
|
let cancelled = false;
|
|
5509
5554
|
const sdk = getSDK();
|
|
5510
5555
|
const run = async () => {
|
|
@@ -5626,7 +5671,7 @@ function AmplifyUpProvider({
|
|
|
5626
5671
|
config.clientPersonalization,
|
|
5627
5672
|
pageContextKey
|
|
5628
5673
|
]);
|
|
5629
|
-
|
|
5674
|
+
React3.useEffect(() => {
|
|
5630
5675
|
const applyLayoutTree = (layoutTree) => {
|
|
5631
5676
|
if (!Array.isArray(layoutTree)) return;
|
|
5632
5677
|
setPageConfig((prev) => {
|
|
@@ -5668,7 +5713,7 @@ function AmplifyUpProvider({
|
|
|
5668
5713
|
);
|
|
5669
5714
|
}
|
|
5670
5715
|
function useAmplifyUp() {
|
|
5671
|
-
const context =
|
|
5716
|
+
const context = React3.useContext(AmplifyUpContext);
|
|
5672
5717
|
if (!context) {
|
|
5673
5718
|
throw new Error("useAmplifyUp must be used within AmplifyUpProvider");
|
|
5674
5719
|
}
|
|
@@ -5679,6 +5724,7 @@ exports.AmplifyPageContent = AmplifyPageContent;
|
|
|
5679
5724
|
exports.AmplifyRenderer = AmplifyRenderer;
|
|
5680
5725
|
exports.AmplifyUpProvider = AmplifyUpProvider;
|
|
5681
5726
|
exports.ComponentContextProvider = ComponentContextProvider;
|
|
5727
|
+
exports.ComposerLayoutStatusProvider = ComposerLayoutStatusProvider;
|
|
5682
5728
|
exports.ComposerProvider = ComposerProvider;
|
|
5683
5729
|
exports.Field = Field;
|
|
5684
5730
|
exports.Image = Image;
|
|
@@ -5699,8 +5745,11 @@ exports.isWorkingContentRequest = isWorkingContentRequest;
|
|
|
5699
5745
|
exports.listOwnerFromSpec = listOwnerFromSpec;
|
|
5700
5746
|
exports.nextPageSpec = nextPageSpec;
|
|
5701
5747
|
exports.queryContent = queryContent;
|
|
5748
|
+
exports.resolveSlotState = resolveSlotState;
|
|
5702
5749
|
exports.searchSpec = searchSpec;
|
|
5703
5750
|
exports.selectVariants = selectVariants;
|
|
5751
|
+
exports.slotShowsAddComponent = slotShowsAddComponent;
|
|
5752
|
+
exports.slotStateFromEl = slotStateFromEl;
|
|
5704
5753
|
exports.toFieldEnvelopes = toFieldEnvelopes;
|
|
5705
5754
|
exports.useAmplifyUp = useAmplifyUp;
|
|
5706
5755
|
//# sourceMappingURL=react.js.map
|