From 7f40de1fe0b4b943b7a94e3ac65b4a2663bff33d Mon Sep 17 00:00:00 2001
From: mulder999 <nospam099-github@yahoo.com>
Date: Tue, 19 Nov 2024 21:15:25 +0100
Subject: [PATCH] Workaround for CSP issue with Svelte5

---
 .prettierrc              |  1 +
 package-lock.json        |  9 +++++++--
 package.json             |  3 ++-
 src/lib/FxReveal.svelte  |  2 +-
 src/lib/SvelteImg.svelte | 23 +++++++++++++++++++++--
 5 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 4549c08..69d2d42 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,5 @@
 {
+  "endOfLine": "auto",
   "useTabs": false,
   "singleQuote": true,
   "trailingComma": "none",
diff --git a/package-lock.json b/package-lock.json
index 4db03f6..2d0213a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,15 @@
 {
   "name": "@zerodevx/svelte-img",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@zerodevx/svelte-img",
-      "version": "2.1.1",
+      "version": "2.2.0",
       "license": "ISC",
       "dependencies": {
+        "@zerodevx/svelte-img": "file:",
         "vite-imagetools": "^6.2.9"
       },
       "devDependencies": {
@@ -1635,6 +1636,10 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@zerodevx/svelte-img": {
+      "resolved": "",
+      "link": true
+    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
diff --git a/package.json b/package.json
index 20b8242..16e2703 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@zerodevx/svelte-img",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "High-performance responsive/progressive images for SvelteKit",
   "author": "Jason Lee <jason@zerodevx.com>",
   "scripts": {
@@ -16,6 +16,7 @@
     "deploy": "npx gh-pages -d build -t -f"
   },
   "dependencies": {
+    "@zerodevx/svelte-img": "file:",
     "vite-imagetools": "^6.2.9"
   },
   "peerDependencies": {
diff --git a/src/lib/FxReveal.svelte b/src/lib/FxReveal.svelte
index 253f4ca..08b47ba 100644
--- a/src/lib/FxReveal.svelte
+++ b/src/lib/FxReveal.svelte
@@ -46,7 +46,7 @@ onMount(() => {
     on:enter={() => (inview = true)}
   >
     <Img {...$$restProps} bind:ref on:load on:load={() => (loaded = true)} on:click src={meta} />
-    <div class="lqip" style:background />
+    <div class="lqip" style:background></div>
   </div>
 {/if}
 
diff --git a/src/lib/SvelteImg.svelte b/src/lib/SvelteImg.svelte
index a9bc172..0c200b3 100644
--- a/src/lib/SvelteImg.svelte
+++ b/src/lib/SvelteImg.svelte
@@ -1,4 +1,5 @@
 <script>
+import { onMount } from 'svelte'
 import Picture from './Picture.svelte'
 import { len, lqipToBackground } from './utils.js'
 
@@ -54,6 +55,20 @@ $: if (len(img)) {
   const { lqip } = img
   background = lqip ? lqipToBackground(lqip) : undefined
 }
+onMount(() => {
+  if (!ref) return
+
+  const restProps = $$restProps
+  Object.entries(restProps).forEach(([key, value]) => {
+    if (key.startsWith('on:')) {
+      // Handle event listeners dynamically (on:click, on:load, etc.)
+      ref.addEventListener(key.slice(3), value)
+    } else {
+      // Apply other attributes such as style, class, etc.
+      ref.setAttribute(key, value)
+    }
+  })
+})
 </script>
 
 <!-- @component
@@ -68,11 +83,15 @@ High-performance responsive/progressive images for SvelteKit.
 <Img {src} alt="cute cat" />
 -->
 
+{#if false}
+  <!-- svelte-ignore a11y-missing-attribute -->
+  <img {...$$restProps} />
+{/if}
+
 {#if len(img)}
   <Picture {sources} {sizes}>
-    <!-- svelte-ignore a11y-missing-attribute a11y-no-noninteractive-element-interactions -->
+    <!-- svelte-ignore a11y-missing-attribute a11y-no-noninteractive-element-interactions a11y-click-events-have-key-events -->
     <img
-      {...$$restProps}
       {loading}
       {decoding}
       width={width || img.w || undefined}