@plitzi/sdk-elements 0.33.1 → 0.34.0

package/dist/Element/helpers/loadComponent.mjs

@@ -1,26 +1,26 @@
-import e from "../../elements/internal/NotFound/NotFound.mjs";
-import { generatePluginModule as t } from "./elementUtils.mjs";
-import n from "../hocs/withElement.mjs";
-import { nestedInject as r } from "../../Component/ComponentHelper.mjs";
-import { get as i } from "@plitzi/plitzi-ui/helpers";
+import { generatePluginModule as e } from "./elementUtils.mjs";
+import { get as t } from "@plitzi/plitzi-ui/helpers";
 //#region src/Element/helpers/loadComponent.ts
-var a = /* @__PURE__ */ new Map(), o = (o, s, c, l = !0, u = !1) => async () => {
-	let d = `${o}::${s}`;
-	if (!a.get(d)) {
-		let e = o.endsWith(".mjs") || o.includes(".esm.") || o.includes(".module."), n = t(o, e, s).finally(() => {
-			a.delete(d);
+var n = /* @__PURE__ */ new Map(), r = (r, i, a = !0, o = !1) => async () => {
+	if (!n.get(r)) {
+		let t = e(r).finally(() => {
+			n.delete(r);
 		});
-		a.set(d, {
-			promise: n,
+		n.set(r, {
+			promise: t,
 			timestamp: Date.now()
 		});
 	}
-	let f = await a.get(d)?.promise;
-	if (!f) return { default: e };
-	let { type: p, pluginSettings: m } = i(f, "default", {}), { version: h, initialItems: g, plugins: _ } = f;
-	if (!p) return { default: e };
-	let v = f.default;
-	return u || (v = n(f.default)), v.version = h, v.origin = "remote", v.type = p, v.initialItems = g, v.pluginSettings = m, v.plugins = r(_, "remote"), l && c(v), { default: v };
+	let s = await n.get(r)?.promise, [{ default: c }, { default: l }, { nestedInject: u }] = await Promise.all([
+		import("../hocs/withElement.mjs"),
+		import("../../elements/internal/NotFound/NotFound.mjs"),
+		import("../../Component/ComponentHelper.mjs")
+	]);
+	if (!s) return { default: l };
+	let { type: d, pluginSettings: f } = t(s, "default", {}), { version: p, initialItems: m, plugins: h } = s;
+	if (!d) return { default: l };
+	let g = s.default;
+	return o || (g = c(s.default)), g.version = p, g.origin = "remote", g.type = d, g.initialItems = m, g.pluginSettings = f, g.plugins = u(h, "remote"), a && i(g), { default: g };
 };
 //#endregion
-export { o as default };
+export { r as default };

package/dist/Element/helpers/pluginSelector.d.ts

@@ -13,7 +13,6 @@ export declare const getRemoteSettings: ({ type, plugins }: {
     plugins: Record<string, ComponentDefinition>;
 }) => {
     url: string;
-    scope: string;
 } | undefined;
 declare const pluginSelector: ({ key, plitziElementLayout, type, internalProps: internalPropsProp, components, plugins }: pluginSelectorProps) => import("react").JSX.Element | undefined;
 export default pluginSelector;

package/dist/Element/helpers/pluginSelector.mjs

@@ -5,11 +5,8 @@ import { jsx as n } from "react/jsx-runtime";
 var r = (e, t) => Object.values(e).find((e) => e.subPlugins.find((e) => e === t)), i = ({ type: e, plugins: n }) => {
 	let i = (e ? n[e] : void 0) ?? r(n, e);
 	if (!i) return;
-	let a = t(i, "assets", []).filter((e) => e.type === "script"), { scope: o } = i;
-	return {
-		url: a.find((e) => e.isMain)?.params.src ?? t(a, "0.params.src", ""),
-		scope: o
-	};
+	let a = t(i, "assets", []).filter((e) => e.type === "script");
+	return { url: a.find((e) => e.isMain)?.params.src ?? t(a, "0.params.src", "") };
 }, a = ({ key: t, plitziElementLayout: r, type: a, internalProps: o, components: s, plugins: c }) => {
 	let l = {
 		...o,
@@ -27,7 +24,6 @@ var r = (e, t) => Object.values(e).find((e) => e.subPlugins.find((e) => e === t)
 	});
 	return f ? /* @__PURE__ */ n(e, {
 		url: f.url,
-		scope: f.scope,
 		internalProps: l
 	}, t) : u;
 };

package/dist/Element/helpers/renderStaticTag.d.ts

@@ -1,7 +1,7 @@
 import { DebugParams } from '../RootElement';
 import { ReactNode, CSSProperties, RefObject, JSX, ReactElement } from 'react';
 export type StaticTagProps = {
-    tag?: keyof JSX.IntrinsicElements;
+    tag?: keyof JSX.IntrinsicElements | '';
     refProp?: RefObject<HTMLElement | null>;
     style?: CSSProperties;
     className: string;
@@ -10,8 +10,12 @@ export type StaticTagProps = {
     serverMarker?: {
         'data-rsc-id': string;
     };
+    /** What an end-to-end test addresses this element by. Last in the spread: nothing may shadow it. */
+    testMarker?: {
+        'data-plitzi-el': string;
+    };
     events?: Record<string, unknown>;
     children?: ReactNode;
 };
-declare const renderStaticTag: ({ tag, refProp, style, className, otherProps, params, serverMarker, events, children }: StaticTagProps) => ReactElement;
+declare const renderStaticTag: ({ tag, refProp, style, className, otherProps, params, serverMarker, testMarker, events, children }: StaticTagProps) => ReactElement;
 export default renderStaticTag;

package/dist/Element/helpers/renderStaticTag.mjs

@@ -1,13 +1,14 @@
 import { createElement as e } from "react";
 //#region src/Element/helpers/renderStaticTag.ts
-var t = ({ tag: t = "div", refProp: n, style: r, className: i, otherProps: a, params: o, serverMarker: s, events: c, children: l }) => e(t, {
+var t = ({ tag: t = "div", refProp: n, style: r, className: i, otherProps: a, params: o, serverMarker: s, testMarker: c, events: l, children: u }) => t === "" ? u : e(t, {
 	ref: n,
 	style: r,
 	className: i,
 	...a,
 	...o,
-	...c,
-	...s
-}, l);
+	...l,
+	...s,
+	...c
+}, u);
 //#endregion
 export { t as default };

package/dist/Element/hocs/withElement.mjs

@@ -3,66 +3,69 @@ import { isVisible as t } from "../helpers/isVisible.mjs";
 import { omitKeys as n } from "../helpers/omitKeys.mjs";
 import r from "../hooks/useElementInternal.mjs";
 import i from "@plitzi/plitzi-ui/ErrorBoundary";
-import { Profiler as a, use as o, useMemo as s, useRef as c } from "react";
-import l from "@plitzi/sdk-event-bridge/hooks/useEventBridge";
-import u from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { useCommonStore as d } from "@plitzi/sdk-shared/store";
-import { diffProps as f, tracingCollector as p } from "@plitzi/sdk-shared/store/tracing";
-import { jsx as m } from "react/jsx-runtime";
+import { Profiler as a, use as o, useId as s, useMemo as c, useRef as l } from "react";
+import u from "@plitzi/sdk-event-bridge/hooks/useEventBridge";
+import d from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { useCommonStore as f } from "@plitzi/sdk-shared/store";
+import { diffProps as p, tracingCollector as m } from "@plitzi/sdk-shared/store/tracing";
+import { jsx as h } from "react/jsx-runtime";
 //#region src/Element/hocs/withElement.tsx
-var h = (h) => {
-	let g = h.displayName || h.name, _ = (g) => {
-		let _ = c(void 0), v = c(void 0), { id: y, rootId: b } = g.internalProps, x = o(e), S = x?.visible ?? !0, C = s(() => ({
-			id: y,
-			rootId: b,
-			visible: S,
+var g = (g) => {
+	let _ = g.displayName || g.name, v = (_) => {
+		let v = l(void 0), y = l(void 0), { id: b, rootId: x } = _.internalProps, S = o(e), C = S?.visible ?? !0, w = `${b}${s()}`, T = S?.traceId ?? w, E = c(() => ({
+			id: b,
+			rootId: x,
+			visible: C,
+			traceId: T,
 			plitziJsxSkipHOC: !0
 		}), [
-			y,
 			b,
-			S
+			x,
+			C,
+			T
 		]);
-		if (g.plitziJsxSkipHOC) return /* @__PURE__ */ m(e, {
-			value: C,
-			children: /* @__PURE__ */ m(h, { ...g })
+		if (_.plitziJsxSkipHOC) return /* @__PURE__ */ h(e, {
+			value: E,
+			children: /* @__PURE__ */ h(g, { ..._ })
 		});
-		let { settings: { previewMode: w, debugMode: T }, root: { baseElementId: E } } = u(), [D] = d(`schema.flat.${y}`);
-		if (!D) throw Error(`Element ${y} not found, Page ${E}`);
-		let { internalProps: O, customProps: k, children: A } = r({
-			element: D,
-			internalProps: g.internalProps,
-			children: g.children,
-			previewMode: w
-		}), { attributes: j, definition: M, style: N, plitziElementLayout: P, elementState: F, setElementState: I } = O, L = s(() => ({ [`${y}_setState`]: I }), [y, I]);
-		l("element", L);
-		let R = D.idRef, z = S && t(F.visibility), B = s(() => ({
-			id: y,
-			idRef: R,
-			rootId: b,
-			visible: z,
-			attributes: j,
-			definition: M,
-			plitziElementLayout: P,
-			style: N,
-			elementState: F,
-			setElementState: I
+		let { settings: { previewMode: D, debugMode: O }, root: { baseElementId: k } } = d(), [A] = f(`schema.flat.${b}`);
+		if (!A) throw Error(`Element ${b} not found, Page ${k}`);
+		let { internalProps: j, customProps: M, children: N } = r({
+			element: A,
+			internalProps: _.internalProps,
+			children: _.children,
+			previewMode: D,
+			parentVisible: C
+		}), { attributes: P, definition: F, style: I, plitziElementLayout: L, elementState: R, setElementState: z } = j, B = c(() => ({ [`${b}_setState`]: z }), [b, z]);
+		u("element", B);
+		let V = C && t(R.visibility), H = c(() => ({
+			id: b,
+			rootId: x,
+			visible: V,
+			traceId: w,
+			attributes: P,
+			definition: F,
+			plitziElementLayout: L,
+			style: I,
+			elementState: R,
+			setElementState: z
 		}), [
-			j,
-			M,
+			P,
 			F,
-			y,
 			R,
-			P,
 			b,
-			N,
+			L,
+			x,
 			I,
-			z
-		]), V = s(() => {
+			z,
+			V,
+			w
+		]), U = c(() => {
 			let e = {
-				...O.attributes,
-				...g.extraProps,
-				...k,
-				...n(g, [
+				...j.attributes,
+				..._.extraProps,
+				...M,
+				...n(_, [
 					"plitziJsxSkipHOC",
 					"internalProps",
 					"className",
@@ -70,34 +73,34 @@ var h = (h) => {
 					"extraProps"
 				])
 			};
-			return A && (e = {
+			return N && (e = {
 				...e,
-				children: A
-			}), /* @__PURE__ */ m(i, { children: /* @__PURE__ */ m(h, {
+				children: N
+			}), /* @__PURE__ */ h(i, { children: /* @__PURE__ */ h(g, {
 				...e,
-				ref: _
+				ref: v
 			}) });
 		}, [
-			O.attributes,
-			g,
-			k,
-			A
-		]), H = /* @__PURE__ */ m(e, {
-			value: B,
-			children: V
+			j.attributes,
+			_,
+			M,
+			N
+		]), W = /* @__PURE__ */ h(e, {
+			value: H,
+			children: U
 		});
-		if (T) {
-			p.linkParent(y, x?.id);
+		if (O) {
+			m.linkParent(w, S?.traceId, b);
 			let e = {
-				attributes: j,
-				definition: M,
-				style: N,
-				elementState: F,
-				plitziElementLayout: P,
-				children: A,
-				...k,
-				...g.extraProps,
-				...n(g, [
+				attributes: P,
+				definition: F,
+				style: I,
+				elementState: R,
+				plitziElementLayout: L,
+				children: N,
+				...M,
+				..._.extraProps,
+				...n(_, [
 					"plitziJsxSkipHOC",
 					"internalProps",
 					"className",
@@ -105,15 +108,15 @@ var h = (h) => {
 					"extraProps"
 				])
 			};
-			return p.recordProps(y, f(v.current, e)), v.current = e, /* @__PURE__ */ m(a, {
-				id: y,
-				onRender: p.onRender,
-				children: H
+			return m.recordProps(w, p(y.current, e)), y.current = e, /* @__PURE__ */ h(a, {
+				id: w,
+				onRender: m.onRender,
+				children: W
 			});
 		}
-		return H;
+		return W;
 	};
-	return _.displayName = `withElement(${g})`, _;
+	return v.displayName = `withElement(${_})`, v;
 };
 //#endregion
-export { h as default };
+export { g as default };

package/dist/Element/hooks/useElementInteractions.mjs

@@ -1,33 +1,44 @@
 import e from "../helpers/getInteractions.mjs";
 import { useCallback as t, useMemo as n } from "react";
-import { set as r } from "@plitzi/plitzi-ui/helpers";
-import { produce as i } from "immer";
+import { get as r, set as i } from "@plitzi/plitzi-ui/helpers";
+import { produce as a } from "immer";
 //#region src/Element/hooks/useElementInteractions.ts
-var a = (e) => {
+var o = (e) => {
 	if (typeof e != "string") return e;
 	let t = e.toLowerCase();
 	return t === "true" || t === "false" || t === "yes" || t === "no" ? t === "true" || t === "yes" : e;
-}, o = ({ attributes: o, definition: s, setElementState: c }) => {
-	let l = t((e) => {
-		if (!e.key || !e.value) return {
+}, s = ({ attributes: s, definition: c, setElementState: l }) => {
+	let u = t((e, t) => {
+		let n, o;
+		return l((s) => (n = s, o = a(s, (n) => i(n, e, t(r(s, e)))), o)), {
+			prevState: n,
+			nextState: o
+		};
+	}, [l]), d = t((e) => {
+		if (!e.key || e.value === void 0) return {
 			prevState: void 0,
 			nextState: void 0
 		};
-		let { key: t } = e, n = a(e.value), o, s;
-		return c((e) => (o = e, s = i(e, (e) => r(e, t, n)), s)), {
-			prevState: o,
-			nextState: s
+		let { key: t } = e, n = o(e.value);
+		return u(t, () => n);
+	}, [u]), f = t((e) => {
+		if (!e.key) return {
+			prevState: void 0,
+			nextState: void 0
 		};
-	}, [c]), u = t((e, t) => {
+		let { key: t } = e;
+		return u(t, (e) => o(e) !== !0);
+	}, [u]), p = t((e, t) => {
 		let n = t?.prevState;
-		!e.revertOnFinish || !n || c(n);
-	}, [c]);
-	return n(() => e(o, s, l, u), [
-		o,
+		e.revertOnFinish && n && l(n);
+	}, [l]);
+	return n(() => e(s, c, d, p, f), [
 		s,
-		l,
-		u
+		c,
+		d,
+		p,
+		f
 	]);
 };
 //#endregion
-export { o as default };
+export { s as default };

package/dist/Element/hooks/useElementInternal.d.ts

@@ -26,8 +26,10 @@ export type UseElementInternalProps = {
     children?: ReactNode;
     internalProps: InternalPropsSTG1;
     previewMode?: boolean;
+    /** Whether any ancestor is hiding this element — `withElement` has it before this element's own state is resolved. */
+    parentVisible?: boolean;
 };
-declare const useElementInternal: ({ element, children, internalProps, previewMode }: UseElementInternalProps) => {
+declare const useElementInternal: ({ element, children, internalProps, previewMode, parentVisible }: UseElementInternalProps) => {
     internalProps: {
         setElementState: <T extends Record<string, unknown> = Record<string, unknown>>(value?: T | ((prev: T) => T)) => boolean;
         rootId: string | undefined;

package/dist/Element/hooks/useElementInternal.mjs

@@ -1,50 +1,61 @@
-import { omitKeys as e } from "../helpers/omitKeys.mjs";
-import t from "./useElementDataSource.mjs";
-import n from "./useElementState.mjs";
-import r from "./useInternalItems.mjs";
-import i from "../helpers/parseStyleSelectors.mjs";
-import { useMemo as a } from "react";
-import { get as o } from "@plitzi/plitzi-ui/helpers";
-import s from "@plitzi/sdk-shared/dataSource/getBindingsDetails";
-import { hasValidToken as c, processTwig as l } from "@plitzi/sdk-shared/helpers/twigWrapper";
+import { isVisible as e } from "../helpers/isVisible.mjs";
+import { omitKeys as t } from "../helpers/omitKeys.mjs";
+import n from "./useElementDataSource.mjs";
+import r from "./useElementState.mjs";
+import i from "./useInternalItems.mjs";
+import a from "../helpers/parseStyleSelectors.mjs";
+import { useMemo as o } from "react";
+import { useCommonStore as s } from "@plitzi/sdk-shared/store";
+import { get as c } from "@plitzi/plitzi-ui/helpers";
+import l from "@plitzi/sdk-shared/dataSource/getBindingsDetails";
+import { hasValidToken as u, processTwig as d } from "@plitzi/sdk-shared/helpers/twigWrapper";
 //#region src/Element/hooks/useElementInternal.ts
-var u = (t, n, r = {}, a = {}) => {
-	let u, { attributes: d, definition: f } = t, { rootId: p, plitziElementLayout: m } = n;
-	if (n.attributes && (d = {
-		...d,
+var f = (e, n, r = {}, i = {}) => {
+	let o, { attributes: s, definition: f } = e, { rootId: p, plitziElementLayout: m } = n;
+	if (n.attributes && (s = {
+		...s,
 		...n.attributes
 	}), Object.keys(r).length > 0) {
-		let e = s(r, {
-			...t,
-			attributes: d
-		}, u);
-		({attributes: d, definition: f, style: u} = e);
+		let t = l(r, {
+			...e,
+			attributes: s
+		}, o);
+		({attributes: s, definition: f, style: o} = t);
 	}
-	let { variables: h } = r;
-	if (h && Object.keys(h).length > 0) {
+	let { queryParams: h = {}, routeParams: g = {}, variables: _ = {}, origin: v = "" } = r, y = {
+		..._,
+		...g,
+		...h,
+		navigation: {
+			routeParams: g,
+			queryParams: h,
+			origin: v
+		}
+	};
+	if (Object.keys(y).length > 0) {
 		let e = {};
-		for (let t of Object.keys(d)) {
-			let n = d[t];
-			e[t] = typeof n == "string" && c(n) ? l(n, h, !0) : n;
+		for (let t of Object.keys(s)) {
+			let n = s[t];
+			e[t] = typeof n == "string" && u(n) ? d(n, y, !0) : n;
 		}
-		d = e;
+		s = e;
 	}
-	return d = {
-		...d,
-		...e(a, ["visibility", "styleSelectors"])
+	return s = {
+		...s,
+		...t(i, ["visibility", "styleSelectors"])
 	}, f = {
 		...f,
 		styleSelectors: {
 			...f.styleSelectors,
 			...f.initialState?.styleSelectors,
-			...a.styleSelectors ?? {}
+			...i.styleSelectors ?? {}
 		}
-	}, f.styleSelectors = i(f), {
+	}, f.styleSelectors = a(f), {
 		...n,
-		rootId: o(m, "rootId", p),
+		rootId: c(m, "rootId", p),
 		attributes: {
-			...d,
-			...e(n, [
+			...s,
+			...t(n, [
 				"id",
 				"rootId",
 				"attributes",
@@ -55,31 +66,43 @@ var u = (t, n, r = {}, a = {}) => {
 		definition: f,
 		elementState: {
 			...f.initialState,
-			...a
+			...i
 		},
-		style: u
+		style: o
 	};
-}, d = ({ element: i, children: o, internalProps: s, previewMode: c = !1 }) => {
-	let { id: l } = s, { state: d, setElementState: f } = n({
-		id: l,
-		bindings: i.definition.bindings,
-		previewMode: c
-	}), p = t({
-		bindings: i.definition.bindings,
+}, p = ({ element: a, children: c, internalProps: l, previewMode: u = !1, parentVisible: d = !0 }) => {
+	let { id: p } = l, { state: m, setElementState: h } = r({
+		id: p,
+		bindings: a.definition.bindings,
+		previewMode: u
+	}), [[g, _, v]] = s([
+		"navigation.routeParams",
+		"navigation.queryParams",
+		"navigation.origin"
+	]), y = n({
+		bindings: a.definition.bindings,
 		sources: ["variables"]
-	}), m = a(() => ({
-		...u(i, s, p, d),
-		setElementState: f
+	}), b = o(() => ({
+		...f(a, l, {
+			...y,
+			routeParams: g,
+			queryParams: _,
+			origin: v
+		}, m),
+		setElementState: h
 	}), [
-		i,
-		s,
-		p,
-		d,
-		f
+		a,
+		l,
+		y,
+		g,
+		_,
+		v,
+		m,
+		h
 	]);
 	return {
-		internalProps: m,
-		customProps: e(m, [
+		internalProps: b,
+		customProps: t(b, [
 			"id",
 			"rootId",
 			"plitziElementLayout",
@@ -89,14 +112,15 @@ var u = (t, n, r = {}, a = {}) => {
 			"elementState",
 			"setElementState"
 		]),
-		children: r({
-			id: l,
-			definition: m.definition,
-			plitziElementLayout: m.plitziElementLayout,
-			children: o,
-			previewMode: c
+		children: i({
+			id: p,
+			definition: b.definition,
+			plitziElementLayout: b.plitziElementLayout,
+			children: c,
+			previewMode: u,
+			visible: d && e(b.elementState.visibility)
 		})
 	};
 };
 //#endregion
-export { d as default, u as getProps };
+export { p as default, f as getProps };

package/dist/Element/hooks/useElementState.mjs

@@ -15,12 +15,13 @@ var c = {}, l = (e, t) => t ? `runtime.elements.${e}.${t}` : `runtime.elements.$
 		_
 	]);
 	return t(() => {
-		if (!(!f || !p)) return () => _(m, void 0);
+		if (f && p) return () => _(m, void 0);
 	}, [
 		f,
 		p,
 		m,
-		_
+		_,
+		u
 	]), {
 		state: g,
 		setElementState: y

package/dist/Element/hooks/useInternalItems.d.ts

@@ -1,10 +1,12 @@
 import { Element, ElementLayout } from '@plitzi/sdk-shared';
 import { ReactNode } from 'react';
-declare const useInternalItems: ({ id, definition, plitziElementLayout, children, previewMode }: {
+declare const useInternalItems: ({ id, definition, plitziElementLayout, children, previewMode, visible }: {
     id: string;
     definition: Element["definition"];
     plitziElementLayout?: ElementLayout;
     children: ReactNode | ReactNode[];
     previewMode?: boolean;
+    /** This element's resolved visibility — its own `visibility` state AND every ancestor's. */
+    visible?: boolean;
 }) => ReactNode;
 export default useInternalItems;