shaders 2.4.78 → 2.5.80

package/dist/svelte/source/engine/Preview.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 import { onMount } from 'svelte'
+import type { Snippet } from 'svelte'
 
 import Shader from './Shader.svelte'
+import RenderComponent from './PreviewRenderComponent.svelte'
 // <<< SHADERS_PREVIEW_MAP:START >>>
 import AngularBlur from '../components/AngularBlur.svelte'
 import Ascii from '../components/Ascii.svelte'
@@ -258,39 +260,56 @@ function fetchAndDecode(url: string, key: string): Promise<ShaderDefinition | nu
 
 // --- Props ---
 
-export let shader: string | undefined = undefined
-export let presetId: string | undefined = undefined
-export let apiBaseUrl: string = 'https://shaders.com'
-export let obfuscationKey: string = 'shaders-preview-key'
-export let watermarkText: string = 'Unlock your Shaders Pro license'
-export let watermarkLink: string = 'https://shaders.com/dashboard?pricing=true'
-export let style: string | undefined = undefined
+interface Props {
+  shader?: string
+  presetId?: string
+  apiBaseUrl?: string
+  obfuscationKey?: string
+  watermarkText?: string
+  watermarkLink?: string
+  style?: string
+  [key: string]: any
+}
+
+const {
+  shader = undefined,
+  presetId = undefined,
+  apiBaseUrl = 'https://shaders.com',
+  obfuscationKey = 'shaders-preview-key',
+  watermarkText = 'Unlock your Shaders Pro license',
+  watermarkLink = 'https://shaders.com/dashboard?pricing=true',
+  style = undefined,
+  ...restProps
+}: Props = $props()
 
 // --- Decode & Resolve ---
 
-let resolvedDefinition: ShaderDefinition | null = null
-let fetchedDefinition: ShaderDefinition | null = null
-let watermarkHovered = false
+let fetchedDefinition: ShaderDefinition | null = $state(null)
+let watermarkHovered = $state(false)
+
+let resolvedDefinition: ShaderDefinition | null = $derived(fetchedDefinition ?? null)
 
 // Fetch shader by token
-$: if (shader) {
-  fetchedDefinition = null
-  fetchAndDecode(`${apiBaseUrl}/api/preview/shader/${shader}`, obfuscationKey)
-    .then(def => { fetchedDefinition = def })
-} else if (!presetId) {
-  fetchedDefinition = null
-}
+$effect(() => {
+  if (shader) {
+    fetchedDefinition = null
+    fetchAndDecode(`${apiBaseUrl}/api/preview/shader/${shader}`, obfuscationKey)
+      .then(def => { fetchedDefinition = def })
+  } else if (!presetId) {
+    fetchedDefinition = null
+  }
+})
 
 // Fetch preset by ID
-$: if (presetId) {
-  fetchedDefinition = null
-  fetchAndDecode(`${apiBaseUrl}/api/preview/preset/${presetId}`, obfuscationKey)
-    .then(def => { fetchedDefinition = def })
-} else if (!shader) {
-  fetchedDefinition = null
-}
-
-$: resolvedDefinition = fetchedDefinition ?? null
+$effect(() => {
+  if (presetId) {
+    fetchedDefinition = null
+    fetchAndDecode(`${apiBaseUrl}/api/preview/preset/${presetId}`, obfuscationKey)
+      .then(def => { fetchedDefinition = def })
+  } else if (!shader) {
+    fetchedDefinition = null
+  }
+})
 
 // --- Licensing Warning ---
 
@@ -303,15 +322,10 @@ onMount(() => {
 
 </script>
 
-<script lang="ts" context="module">
-// Recursive component for rendering nested shader components
-import { default as RenderComponent } from './PreviewRenderComponent.svelte'
-</script>
-
 {#if resolvedDefinition}
-  <div class="shaders-preview" style="position: relative; width: 100%; height: 100%;{style ? ' ' + style : ''}" {...$$restProps}>
+  <div class="shaders-preview" style="position: relative; width: 100%; height: 100%;{style ? ' ' + style : ''}" {...restProps}>
     <Shader
-colorSpace={resolvedDefinition.colorSpace || 'p3-linear'}
+      colorSpace={resolvedDefinition.colorSpace || 'p3-linear'}
       isPreview={true}
       enablePerformanceTracking={true}
       style="width: 100%; height: 100%;"
@@ -342,8 +356,8 @@ colorSpace={resolvedDefinition.colorSpace || 'p3-linear'}
           text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
           transition: color 0.2s ease;
         "
-        on:mouseenter={() => watermarkHovered = true}
-        on:mouseleave={() => watermarkHovered = false}
+        onmouseenter={() => watermarkHovered = true}
+        onmouseleave={() => watermarkHovered = false}
       >
         {watermarkText}
       </a>

package/dist/svelte/source/engine/PreviewRenderComponent.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
-export let config: any
-export let componentMap: Record<string, any>
-export let structureVersion: number | undefined = undefined
+interface Props {
+  config: any
+  componentMap: Record<string, any>
+  structureVersion?: number
+}
 
-$: Component = componentMap[config.type]
-$: componentProps = config.props ? { ...config.props } : {}
+const { config, componentMap, structureVersion = undefined }: Props = $props()
+
+const Component = $derived(componentMap[config.type])
+const componentProps = $derived(config.props ? { ...config.props } : {})
 </script>
 
 {#if Component}

package/dist/svelte/utils/generatePresetCode.js

@@ -1,2 +1,2 @@
-import { n as generatePresetCode, t as availableComponents } from "../generatePresetCode-Bpe8YcaW.js";
+import { n as generatePresetCode, t as availableComponents } from "../generatePresetCode-BN1puRG_.js";
 export { availableComponents, generatePresetCode };

package/dist/vue/Shader.vue_vue_type_script_setup_true_lang.js

@@ -57,7 +57,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.4.78", props.disableTelemetry, props.isPreview);
+					telemetryCollector = startTelemetry(rendererInstance.value, "2.5.80", 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;AA2rCD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CA4ClG;AAGD,eAAO,MAAM,mBAAmB,UA4F/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;AAotCD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAiFlG;AAGD,eAAO,MAAM,mBAAmB,UA4F/B,CAAA"}

package/dist/vue/utils/generatePresetCode.js

@@ -1082,7 +1082,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 (componentType === "Glass" && key === "shape" && props.shapeType === "svg") return false;
+		if (key === "shape" && props.shapeSdfUrl) return false;
 		if (key === "transform" && typeof value === "object") {
 			if (Object.keys(DEFAULT_TRANSFORM).every((k) => value[k] === DEFAULT_TRANSFORM[k])) return false;
 		}
@@ -1101,23 +1101,38 @@ function generatePropString(props, componentType, indent = "  ") {
 			const nonDefaultKeys = {};
 			for (const k in value) if (value[k] !== DEFAULT_TRANSFORM[k]) nonDefaultKeys[k] = value[k];
 			const keys = Object.keys(nonDefaultKeys).sort();
-			if (keys.length > 1) return `:${kebabKey}="{\n${indent}    ${keys.map((k) => `'${k}':${typeof nonDefaultKeys[k] === "string" ? `'${nonDefaultKeys[k]}'` : nonDefaultKeys[k]}`).join(`,\n${indent}    `)}\n${indent}  }"`;
+			if (keys.length > 1) return `:${kebabKey}="{\n${indent}    ${keys.map((k) => `${k}: ${typeof nonDefaultKeys[k] === "string" ? `'${nonDefaultKeys[k]}'` : nonDefaultKeys[k]}`).join(`,\n${indent}    `)}\n${indent}  }"`;
 			else if (keys.length === 1) {
 				const k = keys[0];
 				const v = nonDefaultKeys[k];
-				return `:${kebabKey}="{'${k}':${typeof v === "string" ? `'${v}'` : v}}"`;
+				return `:${kebabKey}="{ ${k}: ${typeof v === "string" ? `'${v}'` : v} }"`;
 			}
 		}
 		if (isPropMapValue(value)) return `:${kebabKey}="{\n${indent}    ${Object.keys(value).map((k) => {
 			const v = value[k];
 			return `${k}: ${typeof v === "string" ? `'${v}'` : v}`;
 		}).join(`,\n${indent}    `)}\n${indent}  }"`;
-		if (typeof value === "string") return `${kebabKey}="${value}"`;
-		else if (value !== null && typeof value === "object") {
+		if (typeof value === "string") {
+			if (value.startsWith("{") && value.endsWith("}")) try {
+				const parsed = JSON.parse(value);
+				if (typeof parsed === "object" && parsed !== null) {
+					const keys = Object.keys(parsed);
+					if (keys.length === 0) return `:${kebabKey}="{}"`;
+					if (keys.length > 1) return `:${kebabKey}="{\n${indent}    ${keys.map((k) => `${k}: ${typeof parsed[k] === "string" ? `'${parsed[k]}'` : parsed[k]}`).join(`,\n${indent}    `)}\n${indent}  }"`;
+					const [pk] = keys;
+					return `:${kebabKey}="{ ${pk}: ${typeof parsed[pk] === "string" ? `'${parsed[pk]}'` : parsed[pk]} }"`;
+				}
+			} catch {}
+			return `${kebabKey}="${value}"`;
+		} else if (value !== null && typeof value === "object") {
 			const roundedValue = { ...value };
 			if ("x" in roundedValue && typeof roundedValue.x === "number") roundedValue.x = Math.round(roundedValue.x * 100) / 100;
 			if ("y" in roundedValue && typeof roundedValue.y === "number") roundedValue.y = Math.round(roundedValue.y * 100) / 100;
-			return `:${kebabKey}="${JSON.stringify(roundedValue).replace(/"/g, "'")}"`;
+			const keys = Object.keys(roundedValue);
+			if (keys.length === 0) return `:${kebabKey}="{}"`;
+			if (keys.length > 1) return `:${kebabKey}="{\n${indent}    ${keys.map((k) => `${k}: ${typeof roundedValue[k] === "string" ? `'${roundedValue[k]}'` : roundedValue[k]}`).join(`,\n${indent}    `)}\n${indent}  }"`;
+			const [rk] = keys;
+			return `:${kebabKey}="{ ${rk}: ${typeof roundedValue[rk] === "string" ? `'${roundedValue[rk]}'` : roundedValue[rk]} }"`;
 		} else return `:${kebabKey}="${value}"`;
 	}).join("\n" + indent + "  ");
 }
@@ -1139,7 +1154,15 @@ function isIdReferenced(id, allComponents) {
 	});
 }
 function generatePresetCode(preset, colorSpace) {
-	const generateComponentString = (config, indent = "  ") => {
+	const componentTypes = /* @__PURE__ */ new Set();
+	function collectTypes(components) {
+		for (const config of components) {
+			componentTypes.add(config.type);
+			if (config.children) collectTypes(config.children);
+		}
+	}
+	collectTypes(preset.components);
+	const generateComponentString = (config, indent = "    ") => {
 		const propString = config.props ? generatePropString(config.props, config.type, indent) : "";
 		let idString = "";
 		if (config.id) {
@@ -1154,7 +1177,21 @@ function generatePresetCode(preset, colorSpace) {
 		else return `${indent}<${config.type}/>`;
 	};
 	const componentStrings = preset.components.map((config) => generateComponentString(config)).join("\n");
-	return `<Shader${colorSpace && colorSpace !== "p3-linear" ? ` color-space="${colorSpace}"` : ""}>\n${componentStrings}\n</Shader>`;
+	const shaderProps = colorSpace && colorSpace !== "p3-linear" ? ` color-space="${colorSpace}"` : "";
+	const allImports = ["Shader", ...Array.from(componentTypes).sort()];
+	const uniqueImports = [...new Set(allImports)];
+	const imports = uniqueImports.length > 3 ? uniqueImports.join(",\n  ") : uniqueImports.join(", ");
+	return [
+		"<script setup lang=\"ts\">",
+		uniqueImports.length > 3 ? `import {\n  ${imports}\n} from 'shaders/vue'` : `import { ${imports} } from 'shaders/vue'`,
+		"<\/script>",
+		"",
+		"<template>",
+		`  <Shader${shaderProps}>`,
+		componentStrings,
+		"  </Shader>",
+		"</template>"
+	].join("\n");
 }
 const availableComponents = [
 	"AngularBlur",

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;AAkJD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CA4ClG;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;AA2KD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAiFlG;AAGD,eAAO,MAAM,mBAAmB,OAG/B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaders",
-  "version": "2.4.78",
+  "version": "2.5.80",
   "description": "Shader magic for modern frontends",
   "author": "Shader Effects Inc.",
   "homepage": "https://shaders.com/",
@@ -55,6 +55,14 @@
       "types": "./dist/pixi/index.d.ts",
       "import": "./dist/pixi/index.js"
     },
+    "./js": {
+      "types": "./dist/js/index.d.ts",
+      "import": "./dist/js/index.js"
+    },
+    "./js/codegen": {
+      "types": "./dist/js/codegen.d.ts",
+      "import": "./dist/js/codegen.js"
+    },
     "./core": {
       "types": "./dist/core/index.d.ts",
       "import": "./dist/core/index.js",
@@ -570,6 +578,12 @@
       "pixi": [
         "./dist/pixi/index.d.ts"
       ],
+      "js": [
+        "./dist/js/index.d.ts"
+      ],
+      "js/codegen": [
+        "./dist/js/codegen.d.ts"
+      ],
       "core": [
         "./dist/core/index.d.ts"
       ],