shaders 2.5.114 → 2.5.116

package/dist/svelte/utils/generatePresetCode.js

@@ -1362,7 +1362,7 @@ function isPropMapValue(value) {
 function generatePropString(props, componentType, indent = "  ") {
 	return Object.entries(props).sort(([a], [b]) => a.localeCompare(b)).filter(([key, value]) => {
 		if (key === "maskType" && value === "alpha") return false;
-		if (key === "shape" && props.shapeSdfUrl) return false;
+		if ((key === "shape" || key === "shapeType") && props.shapeSdfUrl) return false;
 		if (key === "transform" && typeof value === "object") {
 			if (Object.keys(DEFAULT_TRANSFORM).every((k) => value[k] === DEFAULT_TRANSFORM[k])) return false;
 		}

package/dist/vue/Preview.vue_vue_type_script_setup_true_lang.js

@@ -157,7 +157,9 @@ var Preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		apiBaseUrl: { default: "https://shaders.com" },
 		obfuscationKey: { default: "shaders-preview-key" },
 		watermarkText: { default: "Unlock your Shaders Pro license" },
-		watermarkLink: { default: "https://shaders.com/dashboard?pricing=true" }
+		watermarkLink: { default: "https://shaders.com/dashboard?pricing=true" },
+		configuration: {},
+		version: {}
 	},
 	setup(__props) {
 		const componentMap = {
@@ -288,11 +290,100 @@ var Preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				throw new Error("Failed to decode shader definition: invalid data or incorrect key");
 			}
 		}
+		const RESERVED_IDENTIFIERS = new Set([
+			"break",
+			"case",
+			"catch",
+			"class",
+			"const",
+			"continue",
+			"default",
+			"delete",
+			"do",
+			"else",
+			"export",
+			"extends",
+			"finally",
+			"for",
+			"function",
+			"if",
+			"import",
+			"in",
+			"instanceof",
+			"new",
+			"return",
+			"super",
+			"switch",
+			"this",
+			"throw",
+			"try",
+			"typeof",
+			"var",
+			"void",
+			"while",
+			"with",
+			"yield"
+		]);
+		function slugifyIdentifier(label, fallback) {
+			const cleaned = label.replace(/[^A-Za-z0-9]+/g, " ").trim();
+			if (!cleaned) return fallback;
+			const camel = cleaned.split(/\s+/).map((part, i) => i === 0 ? part.charAt(0).toLowerCase() + part.slice(1) : part.charAt(0).toUpperCase() + part.slice(1)).join("");
+			const safe = /^[A-Za-z_$]/.test(camel) ? camel : `_${camel}`;
+			return RESERVED_IDENTIFIERS.has(safe) ? `_${safe}` : safe;
+		}
+		function buildKeyPropIdentifierMap(keyProps) {
+			const used = new Set(["style"]);
+			const map = /* @__PURE__ */ new Map();
+			if (!keyProps?.length) return map;
+			keyProps.forEach((kp, i) => {
+				if (!kp.targets?.length) return;
+				const base = slugifyIdentifier(kp.label, `keyProp${i}`);
+				let ident = base;
+				let suffix = 1;
+				while (used.has(ident)) {
+					suffix++;
+					ident = `${base}${suffix}`;
+				}
+				used.add(ident);
+				map.set(ident, kp);
+			});
+			return map;
+		}
+		function findInTree(id, list) {
+			for (const c of list) {
+				if (c.id === id) return c;
+				if (c.children?.length) {
+					const hit = findInTree(id, c.children);
+					if (hit) return hit;
+				}
+			}
+			return null;
+		}
+		function applyConfiguration(definition, configuration, keyProps) {
+			if (!configuration || !keyProps?.length) return definition;
+			const entries = Object.entries(configuration);
+			if (entries.length === 0) return definition;
+			const identMap = buildKeyPropIdentifierMap(keyProps);
+			const cloned = JSON.parse(JSON.stringify(definition.components));
+			for (const [ident, value] of entries) {
+				const kp = identMap.get(ident);
+				if (!kp) continue;
+				for (const t of kp.targets ?? []) {
+					const comp = findInTree(t.component_id, cloned);
+					if (comp?.props && t.prop in comp.props) comp.props[t.prop] = value;
+				}
+			}
+			return {
+				...definition,
+				components: cloned
+			};
+		}
 		const props = __props;
 		const fetchedDefinition = ref(null);
+		const fetchedKeyProps = ref(null);
 		const resolvedDefinition = computed(() => {
-			if (fetchedDefinition.value) return fetchedDefinition.value;
-			return null;
+			if (!fetchedDefinition.value) return null;
+			return applyConfiguration(fetchedDefinition.value, props.configuration, fetchedKeyProps.value);
 		});
 		async function fetchAndDecode(url) {
 			try {
@@ -300,7 +391,10 @@ var Preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				if (!response.ok) throw new Error(`Failed to fetch: ${response.status}`);
 				const data = await response.json();
 				const item = data.preset || data.shader;
-				if (item?.definition && typeof item.definition === "string") fetchedDefinition.value = decodePreviewDefinition(item.definition, props.obfuscationKey);
+				if (item?.definition && typeof item.definition === "string") {
+					fetchedDefinition.value = decodePreviewDefinition(item.definition, props.obfuscationKey);
+					fetchedKeyProps.value = Array.isArray(item.key_props) ? item.key_props : null;
+				}
 			} catch (e) {
 				console.error("[Shaders Preview] Failed to fetch preview:", e);
 			}
@@ -308,14 +402,23 @@ var Preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		watch(() => props.shader, (token) => {
 			if (token) {
 				fetchedDefinition.value = null;
+				fetchedKeyProps.value = null;
 				fetchAndDecode(`${props.apiBaseUrl}/api/preview/shader/${token}`);
-			} else if (!props.presetId) fetchedDefinition.value = null;
+			} else if (!props.presetId) {
+				fetchedDefinition.value = null;
+				fetchedKeyProps.value = null;
+			}
 		}, { immediate: true });
-		watch(() => props.presetId, (id) => {
+		watch(() => [props.presetId, props.version], ([id, version]) => {
 			if (id) {
 				fetchedDefinition.value = null;
-				fetchAndDecode(`${props.apiBaseUrl}/api/preview/preset/${id}`);
-			} else if (!props.shader) fetchedDefinition.value = null;
+				fetchedKeyProps.value = null;
+				const versionParam = version ? `?version=${encodeURIComponent(version)}` : "";
+				fetchAndDecode(`${props.apiBaseUrl}/api/preview/preset/${id}${versionParam}`);
+			} else if (!props.shader) {
+				fetchedDefinition.value = null;
+				fetchedKeyProps.value = null;
+			}
 		}, { immediate: true });
 		onMounted(() => {
 			console.warn("[Shaders] Preview component is intended for use with a Shaders license. Visit https://shaders.com for more information.");

package/dist/vue/Shader.vue_vue_type_script_setup_true_lang.js

@@ -60,7 +60,7 @@ var Shader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		const startTelemetryWhenReady = () => {
 			const checkRendering = () => {
 				if (rendererInstance.value.getPerformanceStats().fps > 0) {
-					telemetryCollector = startTelemetry(rendererInstance.value, "2.5.114", props.disableTelemetry, props.isPreview);
+					telemetryCollector = startTelemetry(rendererInstance.value, "2.5.116", props.disableTelemetry, props.isPreview);
 					if (telemetryCollector) telemetryCollector.start();
 					telemetryStartTimeout = null;
 				} else telemetryStartTimeout = setTimeout(checkRendering, 500);

package/dist/vue/utils/generatePresetCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AA0+CD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CA4FlG;AAGD,eAAO,MAAM,mBAAmB,UA8G/B,CAAA"}
+{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAy+CD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CA4FlG;AAGD,eAAO,MAAM,mBAAmB,UA8G/B,CAAA"}

package/dist/vue/utils/generatePresetCode.js

@@ -1360,7 +1360,7 @@ function isPropMapValue(value) {
 function generatePropString(props, componentType, indent = "  ") {
 	return Object.entries(props).sort(([a], [b]) => a.localeCompare(b)).filter(([key, value]) => {
 		if (key === "maskType" && value === "alpha") return false;
-		if (key === "shape" && props.shapeSdfUrl) return false;
+		if ((key === "shape" || key === "shapeType") && props.shapeSdfUrl) return false;
 		if (key === "transform" && typeof value === "object") {
 			if (Object.keys(DEFAULT_TRANSFORM).every((k) => value[k] === DEFAULT_TRANSFORM[k])) return false;
 		}

package/dist/vue/utils/generatePresetCode.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generatePresetCode.template.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.template.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AA2KD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CA4FlG;AAGD,eAAO,MAAM,mBAAmB,OAG/B,CAAA"}
+{"version":3,"file":"generatePresetCode.template.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.template.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AA0KD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CA4FlG;AAGD,eAAO,MAAM,mBAAmB,OAG/B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaders",
-  "version": "2.5.114",
+  "version": "2.5.116",
   "description": "Shader magic for modern frontends",
   "author": "Shader Effects Inc.",
   "homepage": "https://shaders.com/",