From 36a36272ed2811c9cd2dc0f8f7561e1559e89f13 Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Sat, 17 Aug 2024 18:09:20 +0200
Subject: [PATCH 1/2] fix(image): optimize getImageSize

---
 build.config.js                               |   1 +
 package-lock.json                             | 135 ++++++++++
 package.json                                  |   2 +
 src/runtime/components/BoosterImage/Base.vue  | 242 ++++++++----------
 .../components/BoosterImage/utils/image.js    |   1 +
 .../components/BoosterPicture/Base.vue        | 169 ++++++------
 .../components/BoosterPicture/Source.vue      |  96 +++----
 src/runtime/utils/description.js              |   7 +-
 src/tmpl/plugin.tmpl.js                       |  51 ++--
 9 files changed, 397 insertions(+), 307 deletions(-)

diff --git a/build.config.js b/build.config.js
index 4b87aef1a0..2d905f89c0 100644
--- a/build.config.js
+++ b/build.config.js
@@ -7,6 +7,7 @@ export default {
     'hash-sum',
     'probe-image-size',
     'vue3-lazy-hydration',
+    'node-cache',
 
     // package
     '@nuxt/image',
diff --git a/package-lock.json b/package-lock.json
index 250bfece3e..918d7b2a2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "htmlparser2": "9.1.0",
         "image-meta": "0.2.1",
         "mime-types": "2.1.35",
+        "node-cache": "^5.1.2",
         "pathe": "1.1.2",
         "sort-css-media-queries": "2.3.0",
         "vue3-lazy-hydration": "1.2.1"
@@ -57,6 +58,7 @@
         "vite-svg-loader": "5.1.0",
         "vitepress": "1.3.2",
         "vitest": "2.0.5",
+        "vue-tsc": "^2.0.29",
         "wicg-inert": "3.1.3"
       }
     },
@@ -7759,6 +7761,35 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-JAYeJvYQQROmVRtSBIczaPjP3DX4QW1fOqW1Ebs0d3Y3EwSNRglz03dSv0Dm61dzd0Yx3WgTW3hndDnTQqgmyg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.0-alpha.18"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-MTeCV9MUwwsH0sNFiZwKtFrrVZUK6p8ioZs3xFzHc2cvDXHWlYN3bChdQtwKX+FY2HG6H3CfAu1pKijolzIQ8g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-sXh5Y8sqGUkgxpMWUGvRXggxYHAVxg0Pa1C42lQZuPDrW6vHJPR0VCK8Sr7WJsAW530HuNQT/ZIskmXtxjybMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.0-alpha.18",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
     "node_modules/@voxpelli/config-array-find-files": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@voxpelli/config-array-find-files/-/config-array-find-files-0.1.2.tgz",
@@ -7941,6 +7972,17 @@
         "@vue/shared": "3.4.35"
       }
     },
+    "node_modules/@vue/compiler-vue2": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
+      "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
     "node_modules/@vue/devtools-api": {
       "version": "7.3.7",
       "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.3.7.tgz",
@@ -8027,6 +8069,31 @@
         "rfdc": "^1.4.1"
       }
     },
+    "node_modules/@vue/language-core": {
+      "version": "2.0.29",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.29.tgz",
+      "integrity": "sha512-o2qz9JPjhdoVj8D2+9bDXbaI4q2uZTHQA/dbyZT4Bj1FR9viZxDJnLcKVHfxdn6wsOzRgpqIzJEEmSSvgMvDTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "~2.4.0-alpha.18",
+        "@vue/compiler-dom": "^3.4.0",
+        "@vue/compiler-vue2": "^2.7.16",
+        "@vue/shared": "^3.4.0",
+        "computeds": "^0.0.1",
+        "minimatch": "^9.0.3",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.35.tgz",
@@ -10073,6 +10140,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/computeds": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
+      "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -10826,6 +10900,13 @@
         }
       }
     },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
@@ -13763,6 +13844,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -16389,6 +16480,13 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "license": "MIT"
     },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "5.0.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
@@ -17020,6 +17118,18 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/node-cache": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/node-cache/-/node-cache-5.1.2.tgz",
+      "integrity": "sha512-t1QzWwnk4sjLWaQAS8CHgOJ+RAfmHpxFWmc36IWTiWHQfs0w5JDMBS1b1ZxQteo0vVVuWJvIUKHDkkeK7vIGCg==",
+      "license": "MIT",
+      "dependencies": {
+        "clone": "2.x"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -18106,6 +18216,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-5.0.0.tgz",
@@ -25143,6 +25260,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-tsc": {
+      "version": "2.0.29",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.29.tgz",
+      "integrity": "sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/typescript": "~2.4.0-alpha.18",
+        "@vue/language-core": "2.0.29",
+        "semver": "^7.5.4"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    },
     "node_modules/vue3-lazy-hydration": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/vue3-lazy-hydration/-/vue3-lazy-hydration-1.2.1.tgz",
diff --git a/package.json b/package.json
index 5187e6a6b3..bf2e1dce02 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "htmlparser2": "9.1.0",
     "image-meta": "0.2.1",
     "mime-types": "2.1.35",
+    "node-cache": "^5.1.2",
     "pathe": "1.1.2",
     "sort-css-media-queries": "2.3.0",
     "vue3-lazy-hydration": "1.2.1"
@@ -99,6 +100,7 @@
     "vite-svg-loader": "5.1.0",
     "vitepress": "1.3.2",
     "vitest": "2.0.5",
+    "vue-tsc": "^2.0.29",
     "wicg-inert": "3.1.3"
   }
 }
diff --git a/src/runtime/components/BoosterImage/Base.vue b/src/runtime/components/BoosterImage/Base.vue
index 752564215c..10786d1cdf 100644
--- a/src/runtime/components/BoosterImage/Base.vue
+++ b/src/runtime/components/BoosterImage/Base.vue
@@ -16,7 +16,7 @@
   />
 </template>
 
-<script>
+<script setup>
 import { crossorigin as validatorCrossorigin } from '../../utils/validators';
 import { getImageStyleDescription } from '#booster/utils/description';
 import { getCrossorigin } from '#booster/utils/browser';
@@ -30,160 +30,130 @@ import {
   computed
 } from '#imports';
 
-export default {
-  inheritAttrs: false,
+defineOptions({
+  inheritAttrs: false
+});
 
-  props: {
-    source: {
-      type: [Source, Object],
-      default: null
-    },
-
-    title: {
-      type: String,
-      required: true
-    },
+const $attrs = useAttrs();
 
-    alt: {
-      type: String,
-      default: null
-    },
-
-    crossorigin: {
-      type: [Boolean, String],
-      default() {
-        return null;
-      },
-      validator: validatorCrossorigin
-    }
+const $props = defineProps({
+  source: {
+    type: [Source, Object],
+    default: null
   },
 
-  emits: ['load'],
-
-  async setup(props) {
-    const $img = useImage();
-    const $booster = useNuxtApp().$booster;
-    const { isCritical } = useBoosterCritical();
-
-    const resolvedCrossorigin = computed(() => {
-      return getCrossorigin(props.crossorigin || $booster.crossorigin);
-    });
-
-    if (props.source) {
-      const source = new Source(props.source);
-      const config = $img.getSizes(source.src, {
-        sizes: source.sizes,
-        modifiers: source.getModifiers(),
-        ...source.getOptions($booster)
-      });
-
-      const meta = ref(null);
-
-      useHead(() => {
-        if (meta.value) {
-          return {
-            style: [
-              meta.value && getImageStyleDescription(meta, meta.value.className)
-            ].filter(Boolean),
-            link: [
-              !(!config || !isCritical.value) &&
-                (import.meta.server || process.env.prerender) &&
-                new Source(source).getPreload(
-                  config.srcset,
-                  config.sizes,
-                  resolvedCrossorigin.value
-                )
-            ].filter(Boolean),
-            noscript: [
-              (import.meta.server || process.env.prerender) && {
-                key: 'img-nojs',
-                children: `<style>img { content-visibility: unset !important; }</style>`
-              }
-            ].filter(Boolean)
-          };
-        }
-        return {};
-      });
-
-      try {
-        meta.value = await source.getMeta(config.src, $booster);
-      } catch (error) {
-        console.error(error);
-      }
-
-      return {
-        isCritical,
-        config,
-        meta,
-        className: meta.value.className,
-        resolvedCrossorigin
-      };
-    }
-    return {
-      isCritical,
-      resolvedCrossorigin
-    };
+  title: {
+    type: String,
+    required: true
   },
 
-  data() {
-    return {
-      className: null,
-      loading: true,
-      config: null,
-      meta: null
-    };
+  alt: {
+    type: String,
+    default: null
   },
 
-  computed: {
-    classNames() {
-      return [{ loading: this.loading }].concat(this.className);
+  crossorigin: {
+    type: [Boolean, String],
+    default() {
+      return null;
     },
+    validator: validatorCrossorigin
+  }
+});
 
-    srcset() {
-      return this.config?.srcset || this.config?.src;
-    },
+const $emit = defineEmits(['load']);
 
-    sizes() {
-      return this.config?.sizes;
-    },
+const $img = useImage();
+const $booster = useNuxtApp().$booster;
+const { isCritical } = useBoosterCritical();
 
-    width() {
-      return this.$attrs.width || this.meta?.width;
-    },
+const loading = ref(true);
+const meta = ref(null);
+const config = ref(null);
+const resolvedSource = ref(null);
+const srcset = ref(null);
+const sizes = ref(null);
 
-    height() {
-      return this.$attrs.height || this.meta?.height;
-    },
+const resolvedCrossorigin = computed(() => {
+  return getCrossorigin($props.crossorigin || $booster.crossorigin);
+});
 
-    loadingMode() {
-      if (this.isCritical) {
-        return 'eager';
-      }
-      return 'lazy';
-    },
+const classNames = computed(() => {
+  return [{ loading: loading.value }].concat(resolvedSource.value?.className);
+});
 
-    decodingMode() {
-      if (!this.source || new Source(this.source).format !== 'svg') {
-        return 'async';
-      }
-      return 'sync';
-    }
-  },
+const width = computed(() => {
+  return $attrs.width || meta.value?.width;
+});
 
-  mounted() {
-    this.loading = !this.$el.complete;
-    if (!this.loading) {
-      this.onLoad({ target: this.$el });
-    }
-  },
+const height = computed(() => {
+  return $attrs.height || meta.value?.height;
+});
+
+const loadingMode = computed(() => {
+  if (isCritical.value) {
+    return 'eager';
+  }
+  return 'lazy';
+});
 
-  methods: {
-    onLoad(e) {
-      this.loading = false;
-      this.$emit('load', e.target);
-    }
+const decodingMode = computed(() => {
+  if (!$props.source || new Source($props.source).format !== 'svg') {
+    return 'async';
   }
+  return 'sync';
+});
+
+const onLoad = e => {
+  loading.value = false;
+  $emit('load', e.target);
 };
+
+if ($props.source) {
+  resolvedSource.value = markRaw(new Source($props.source));
+  config.value = $img.getSizes(resolvedSource.value.src, {
+    sizes: resolvedSource.value.sizes,
+    modifiers: resolvedSource.value.getModifiers(),
+    ...resolvedSource.value.getOptions($booster)
+  });
+
+  srcset.value = config.value.srcset || config.value.src;
+  sizes.value = config.value.sizes;
+
+  const headData = ref({});
+
+  useHead(() => {
+    return headData.value;
+  });
+
+  try {
+    meta.value = markRaw(
+      await resolvedSource.value.getMeta(config.value.src, $booster)
+    );
+  } catch (error) {
+    console.error(error);
+  }
+  headData.value = {
+    style: [
+      meta.value && getImageStyleDescription(resolvedSource.value)
+    ].filter(Boolean),
+    link: [
+      !(!config.value || !isCritical.value) &&
+        (import.meta.server || process.env.prerender) &&
+        resolvedSource.value.getPreload(
+          config.value.srcset,
+          config.value.sizes,
+          resolvedCrossorigin.value
+        )
+    ].filter(Boolean),
+    noscript: [
+      (import.meta.server || process.env.prerender) && {
+        key: 'img-nojs',
+        children: `<style>img { content-visibility: unset !important; }</style>`
+      }
+    ].filter(Boolean)
+  };
+}
 </script>
 
 <style lang="postcss" scoped>
diff --git a/src/runtime/components/BoosterImage/utils/image.js b/src/runtime/components/BoosterImage/utils/image.js
index 1743e3eb2b..9a55270eb9 100644
--- a/src/runtime/components/BoosterImage/utils/image.js
+++ b/src/runtime/components/BoosterImage/utils/image.js
@@ -53,5 +53,6 @@ export async function getMeta(source, compiledSrc, $booster) {
   }
 
   const { width, height } = await $booster.getImageSize(source.src);
+
   return source.modify({ width, height });
 }
diff --git a/src/runtime/components/BoosterPicture/Base.vue b/src/runtime/components/BoosterPicture/Base.vue
index ceb0be4938..7f492ac16d 100644
--- a/src/runtime/components/BoosterPicture/Base.vue
+++ b/src/runtime/components/BoosterPicture/Base.vue
@@ -18,7 +18,7 @@
   </picture>
 </template>
 
-<script>
+<script setup>
 import { getPictureStyleDescription } from '../../utils/description';
 import { crossorigin as validatorCrossorigin } from '../../utils/validators';
 import {
@@ -34,111 +34,92 @@ import PictureSource from '#booster/components/BoosterPicture/Source';
 
 const TARGET_FORMAT_PRIORITY = ['avif', 'webp', 'png', 'jpg', 'gif'];
 
-export default {
-  components: {
-    PictureSource,
-    BaseImage
+const $props = defineProps({
+  sources: {
+    type: [Array, SourceList],
+    required: true
   },
 
-  props: {
-    sources: {
-      type: [Array, SourceList],
-      required: true
-    },
+  formats: {
+    type: Array,
+    default() {
+      return null;
+    }
+  },
 
-    formats: {
-      type: Array,
-      default() {
-        return null;
-      }
-    },
+  title: {
+    type: String,
+    default: null
+  },
 
-    title: {
-      type: String,
-      default: null
-    },
+  alt: {
+    type: String,
+    default: null
+  },
 
-    alt: {
-      type: String,
-      default: null
+  crossorigin: {
+    type: [Boolean, String],
+    default() {
+      return null;
     },
+    validator: validatorCrossorigin
+  },
 
-    crossorigin: {
-      type: [Boolean, String],
-      default() {
-        return null;
-      },
-      validator: validatorCrossorigin
-    },
+  sortSources: {
+    type: Boolean,
+    default: true
+  }
+});
 
-    sortSources: {
-      type: Boolean,
-      default: true
-    }
-  },
+const $emit = defineEmits(['load']);
 
-  emits: ['load'],
-
-  async setup(props) {
-    const { isCritical } = useBoosterCritical();
-    const $img = useImage();
-    const $booster = useNuxtApp().$booster;
-
-    const sourceList = SourceList.create(props.sources, {
-      sort: props.sortSources
-    });
-
-    const metaSources = ref(null);
-
-    useHead(() => {
-      if (metaSources.value && metaSources.value.length) {
-        const classNames = metaSources.value.classNames;
-        return {
-          style: [getPictureStyleDescription(metaSources.value, classNames)]
-        };
-      }
-      return {};
-    });
-    try {
-      metaSources.value = await sourceList.getMeta($img, $booster);
-    } catch (error) {
-      console.error(error);
-    }
-    return {
-      isCritical,
-      resolvedFormats: props.formats || $booster.targetFormats,
-      sourceList,
-      metaSources,
-      classNames: metaSources.value.classNames
-    };
-  },
+const { isCritical } = useBoosterCritical();
+const $img = useImage();
+const $booster = useNuxtApp().$booster;
 
-  computed: {
-    formatSources() {
-      const sortedFormatsByPriority = Array.from(
-        new Set(
-          TARGET_FORMAT_PRIORITY.map(v =>
-            this.resolvedFormats.find(format => format.includes(v))
-          )
-        )
-      ).filter(Boolean);
-      const preloadFormat = TARGET_FORMAT_PRIORITY.find(v =>
-        this.resolvedFormats.find(format => format.includes(v))
-      );
-      return this.sourceList.getFormats(
-        sortedFormatsByPriority,
-        preloadFormat,
-        this.isCritical
-      );
-    }
-  },
+const sourceList = SourceList.create($props.sources, {
+  sort: $props.sortSources
+});
 
-  methods: {
-    onLoad(e) {
-      this.$emit('load', e);
-    }
-  }
+const metaSources = ref(null);
+
+const resolvedFormats = $props.formats || $booster.targetFormats;
+const sortedFormatsByPriority = Array.from(
+  new Set(
+    TARGET_FORMAT_PRIORITY.map(v =>
+      resolvedFormats.find(format => format.includes(v))
+    )
+  )
+).filter(Boolean);
+const preloadFormat = TARGET_FORMAT_PRIORITY.find(v =>
+  resolvedFormats.find(format => format.includes(v))
+);
+
+const formatSources = ref(
+  sourceList.getFormats(sortedFormatsByPriority, preloadFormat, isCritical)
+);
+
+const classNames = computed(() => metaSources.value?.classNames || {});
+
+const onLoad = e => {
+  $emit('load', e);
 };
+
+useHead(() => {
+  if (metaSources.value && metaSources.value.length) {
+    const classNames = metaSources.value.classNames;
+    return {
+      style: [getPictureStyleDescription(metaSources.value, classNames)]
+    };
+  }
+  return {};
+});
+
+try {
+  metaSources.value = await sourceList.getMeta($img, $booster);
+} catch (error) {
+  console.error(error);
+}
 </script>
 
 <style lang="postcss" scoped>
diff --git a/src/runtime/components/BoosterPicture/Source.vue b/src/runtime/components/BoosterPicture/Source.vue
index 02ad36d1c9..54e0b88d41 100644
--- a/src/runtime/components/BoosterPicture/Source.vue
+++ b/src/runtime/components/BoosterPicture/Source.vue
@@ -7,68 +7,54 @@
   />
 </template>
 
-<script>
-import { useNuxtApp, useHead, useImage, computed } from '#imports';
+<script setup>
+import { useNuxtApp, useHead, useImage } from '#imports';
 import { getCrossorigin } from '#booster/utils/browser';
 import Source from '#booster/components/BoosterImage/classes/Source';
 
 const types = new Map([['jpg', 'jpeg']]);
 
-export default {
-  props: {
-    source: {
-      type: Source,
-      required: true
-    },
-
-    crossorigin: {
-      type: [Boolean, String],
-      default() {
-        return null;
-      },
-      validator: val =>
-        ['anonymous', 'use-credentials', '', true, false].includes(val)
-    }
-  },
-
-  setup(props) {
-    const $img = useImage();
-    const $booster = useNuxtApp().$booster;
-    const config = $img.getSizes(props.source.src, {
-      sizes: props.source.sizes,
-      modifiers: props.source.getModifiers(),
-      ...props.source.getOptions($booster)
-    });
-
-    const resolvedCrossorigin = computed(() => {
-      return getCrossorigin(props.crossorigin || $booster.crossorigin);
-    });
-
-    const imageSource = new Source(props.source);
-    useHead({
-      link: [
-        config &&
-          imageSource.preload &&
-          (import.meta.server || process.env.prerender) &&
-          imageSource.getPreload(
-            config.srcset,
-            config.sizes,
-            resolvedCrossorigin
-          )
-      ].filter(Boolean)
-    });
-
-    return { config, resolvedCrossorigin };
+const $props = defineProps({
+  source: {
+    type: Source,
+    required: true
   },
 
-  computed: {
-    srcset() {
-      return this.config.srcset || this.config.src;
+  crossorigin: {
+    type: [Boolean, String],
+    default() {
+      return null;
     },
-
-    type() {
-      return `image/${types.get(this.source.format) || this.source.format}`;
-    }
+    validator: val =>
+      ['anonymous', 'use-credentials', '', true, false].includes(val)
   }
-};
+});
+
+const $img = useImage();
+const $booster = useNuxtApp().$booster;
+const config = $img.getSizes($props.source.src, {
+  sizes: $props.source.sizes,
+  modifiers: $props.source.getModifiers(),
+  ...$props.source.getOptions($booster)
+});
+
+const srcset = ref(config.srcset || config.src);
+const type = ref(
+  `image/${types.get($props.source.format) || $props.source.format}`
+);
+
+const resolvedCrossorigin = ref(
+  getCrossorigin($props.crossorigin || $booster.crossorigin)
+);
+
+const imageSource = new Source($props.source);
+
+useHead({
+  link: [
+    config &&
+      imageSource.preload &&
+      (import.meta.server || process.env.prerender) &&
+      imageSource.getPreload(srcset, config.sizes, resolvedCrossorigin)
+  ].filter(Boolean)
+});
 </script>
diff --git a/src/runtime/utils/description.js b/src/runtime/utils/description.js
index 87b6309f5a..26bff2ec28 100644
--- a/src/runtime/utils/description.js
+++ b/src/runtime/utils/description.js
@@ -1,12 +1,11 @@
 import { minify } from './string';
 import { toHashHex } from '#booster/utils/string';
-import Source from '#booster/components/BoosterImage/classes/Source';
 
-export function getImageStyleDescription(meta, className) {
+export function getImageStyleDescription(source) {
   return {
-    key: className,
+    key: source.className,
     type: 'text/css',
-    children: minify(new Source(meta.value).style)
+    children: minify(source.style)
   };
 }
 
diff --git a/src/tmpl/plugin.tmpl.js b/src/tmpl/plugin.tmpl.js
index d2c1a084a9..e9b2966ea9 100644
--- a/src/tmpl/plugin.tmpl.js
+++ b/src/tmpl/plugin.tmpl.js
@@ -4,7 +4,15 @@ import vFont from '#booster/directives/vFont';
 import { isSupportedBrowser } from '#booster/utils/browser';
 import FontList from '#booster/classes/FontList';
 import { useNuxtApp, useBoosterHead, useRequestHeaders, useRequestURL, useRequestFetch } from '#imports';
-import './fonts.css';
+import './fonts.css';`;
+
+  if (options.mode !== 'client') {
+    code += `
+import NodeCache from 'node-cache';
+`;
+  }
+
+  code += `
 
 export default defineNuxtPlugin({
   name: 'booster-plugin',
@@ -44,7 +52,13 @@ export default defineNuxtPlugin({
   }
 });
 
+`;
 
+  if (options.mode === 'client') {
+    code += `
+const dimensionCache = new Map();`;
+  } else {
+    code += `
 function fetchRetry(url, options, retries = 3, delay = 300) {
   return fetch(url, options).catch(function (error) {
     if (retries <= 0) throw error;
@@ -52,30 +66,36 @@ function fetchRetry(url, options, retries = 3, delay = 300) {
   });
 }
 
-const dimensionCache = {};
-async function getImageSize (src) {
+const dimensionCache = new NodeCache({ stdTTL: 60 * 60 * 24, checkperiod: 60 * 60 * 1, useClones: false });`;
+  }
 
+  code += `
+async function getImageSize (src) {
 `;
 
   if (options.mode === 'client') {
-    code += `  const { width, height } = await new Promise((resolve) => {
-    const img = new global.Image();
-    img.onload = () => resolve({width: img.naturalWidth, height: img.naturalHeight});
-    img.src = src;
-  });
-  return {width, height};`;
+    code += `
+
+  if (!dimensionCache.has(src)) {
+    const { width, height } = await new Promise((resolve) => {
+      const img = new global.Image();
+      img.onload = () => resolve({width: img.naturalWidth, height: img.naturalHeight});
+      img.src = src;
+    });
+    dimensionCache.set(src, { width, height });
+  }
+  return dimensionCache.get(src)`;
   } else {
     code += `
   const isNitroPrerender = 'x-nitro-prerender' in useRequestHeaders()
 
   try {
-    // Nur im Generate!
     let url = src;
     if (isNitroPrerender) {
       url = url.replace(useRequestURL().origin, '');
     }
 
-    if (!isNitroPrerender || !(url in dimensionCache)) {
+    if (!dimensionCache.has(url)) {
       const blob = await useRequestFetch()(url);
       const { imageMeta } = await import('image-meta').then(
         module => module.default || module
@@ -85,15 +105,10 @@ async function getImageSize (src) {
         Buffer.from(await res.arrayBuffer())
       );
       const dimension = await imageMeta(data);
-
-      if (isNitroPrerender) {
-        dimensionCache[url] = dimension;
-      } else {
-        return dimension;
-      }
+      dimensionCache.set(url, dimension);
     }
 
-    return dimensionCache[url];
+    return dimensionCache.get(url);
   } catch (error) {
     console.error('getImageSize: ' + src, error);
     return { width: 0, height: 0 };

From 6a3dcece3c6c5ba41e2544fa68a135a00d018902 Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Sat, 17 Aug 2024 18:11:04 +0200
Subject: [PATCH 2/2] chore(package): remove vue-tsc

---
 package-lock.json | 33 +++++++++++++++++++++++++++------
 package.json      |  1 -
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 918d7b2a2a..87c9a981e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,7 +58,6 @@
         "vite-svg-loader": "5.1.0",
         "vitepress": "1.3.2",
         "vitest": "2.0.5",
-        "vue-tsc": "^2.0.29",
         "wicg-inert": "3.1.3"
       }
     },
@@ -7767,6 +7766,8 @@
       "integrity": "sha512-JAYeJvYQQROmVRtSBIczaPjP3DX4QW1fOqW1Ebs0d3Y3EwSNRglz03dSv0Dm61dzd0Yx3WgTW3hndDnTQqgmyg==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@volar/source-map": "2.4.0-alpha.18"
       }
@@ -7776,7 +7777,9 @@
       "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.18.tgz",
       "integrity": "sha512-MTeCV9MUwwsH0sNFiZwKtFrrVZUK6p8ioZs3xFzHc2cvDXHWlYN3bChdQtwKX+FY2HG6H3CfAu1pKijolzIQ8g==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/@volar/typescript": {
       "version": "2.4.0-alpha.18",
@@ -7784,6 +7787,8 @@
       "integrity": "sha512-sXh5Y8sqGUkgxpMWUGvRXggxYHAVxg0Pa1C42lQZuPDrW6vHJPR0VCK8Sr7WJsAW530HuNQT/ZIskmXtxjybMQ==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@volar/language-core": "2.4.0-alpha.18",
         "path-browserify": "^1.0.1",
@@ -7978,6 +7983,8 @@
       "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "de-indent": "^1.0.2",
         "he": "^1.2.0"
@@ -8075,6 +8082,8 @@
       "integrity": "sha512-o2qz9JPjhdoVj8D2+9bDXbaI4q2uZTHQA/dbyZT4Bj1FR9viZxDJnLcKVHfxdn6wsOzRgpqIzJEEmSSvgMvDTQ==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@volar/language-core": "~2.4.0-alpha.18",
         "@vue/compiler-dom": "^3.4.0",
@@ -10145,7 +10154,9 @@
       "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
       "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/concat-map": {
       "version": "0.0.1",
@@ -10905,7 +10916,9 @@
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
       "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/debounce": {
       "version": "1.2.1",
@@ -13850,6 +13863,8 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "bin": {
         "he": "bin/he"
       }
@@ -16485,7 +16500,9 @@
       "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
       "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/nanoid": {
       "version": "5.0.7",
@@ -18221,7 +18238,9 @@
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
       "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/path-exists": {
       "version": "5.0.0",
@@ -25266,6 +25285,8 @@
       "integrity": "sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@volar/typescript": "~2.4.0-alpha.18",
         "@vue/language-core": "2.0.29",
diff --git a/package.json b/package.json
index bf2e1dce02..8e4e16de49 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,6 @@
     "vite-svg-loader": "5.1.0",
     "vitepress": "1.3.2",
     "vitest": "2.0.5",
-    "vue-tsc": "^2.0.29",
     "wicg-inert": "3.1.3"
   }
 }