@cwa/nuxt-edge 0.0.0-29696494.72f11a4

package/dist/runtime/api/mercure.js

@@ -0,0 +1,196 @@
+import { consola as logger } from "consola";
+import { storeToRefs } from "pinia";
+import { computed, watch } from "vue";
+import { getPublishedResourceIri } from "../resources/resource-utils.js";
+import { useProcess } from "#cwa/composables/process";
+export default class Mercure {
+  eventSource;
+  lastEventId;
+  mercureMessageQueue = [];
+  fetcher;
+  requestCount;
+  _mercureStore;
+  _resourcesStore;
+  _fetcherStore;
+  constructor(mercureStoreDefinition, resourcesStoreDefinition, fetcherStoreDefinition) {
+    this._mercureStore = mercureStoreDefinition.useStore();
+    this._resourcesStore = resourcesStoreDefinition.useStore();
+    this._fetcherStore = fetcherStoreDefinition.useStore();
+  }
+  setFetcher(fetcher) {
+    this.fetcher = fetcher;
+  }
+  setRequestCount(requestCount) {
+    this.requestCount = requestCount;
+  }
+  setMercureHubFromLinkHeader(linkHeader) {
+    if (this.hub) {
+      return;
+    }
+    const matches = linkHeader.match(/<([^>]+)>;\s+rel="mercure".*/);
+    if (!matches?.[1]) {
+      logger.error("No Mercure rel in link header.");
+      return;
+    }
+    const { hub } = storeToRefs(this.mercureStore);
+    hub.value = matches[1];
+    logger.debug("Mercure hub set", this.hub);
+  }
+  init(forceRestart) {
+    const { isServer } = useProcess();
+    if (isServer) {
+      logger.debug("Mercure can only initialise on the client side");
+      return;
+    }
+    if (!this.hubUrl) {
+      logger.warn("Cannot initialize Mercure. Hub URL is not set.");
+      this.closeMercure();
+      return;
+    }
+    if (!forceRestart && this.eventSource && this.eventSource.readyState === 1 && this.eventSource.url === this.hubUrl) {
+      logger.debug(`Mercure already initialized '${this.hubUrl}'`);
+      return;
+    }
+    this.closeMercure();
+    logger.info(`Initializing Mercure '${this.hubUrl}'`);
+    this.eventSource = new EventSource(this.hubUrl, { withCredentials: true });
+    this.eventSource.onmessage = (event) => this.handleMercureMessage(event);
+  }
+  closeMercure() {
+    if (this.eventSource) {
+      this.eventSource.close();
+      logger.info("Mercure Event Source Closed");
+    } else {
+      logger.warn("No Mercure Event Source exists to close");
+    }
+  }
+  get requestsInProgress() {
+    const { currentResourcesApiStateIsPending } = storeToRefs(this.resourcesStore);
+    return computed(() => {
+      return this.requestCount && this.requestCount?.value > 0 || currentResourcesApiStateIsPending.value;
+    });
+  }
+  handleMercureMessage(event) {
+    const mercureMessage = {
+      event,
+      data: JSON.parse(event.data)
+    };
+    if (!this.isMessageForCurrentResource(mercureMessage)) {
+      return;
+    }
+    this.addMercureMessageToQueue(mercureMessage);
+    if (!this.requestsInProgress.value) {
+      this.processMessageQueue();
+    } else {
+      const unwatch = watch(this.requestsInProgress, (inProgress) => {
+        if (!inProgress) {
+          this.processMessageQueue();
+          unwatch();
+        }
+      });
+    }
+  }
+  isMessageForCurrentResource(mercureMessage) {
+    const currentResources = this.resourcesStore.current.currentIds;
+    const mercureMessageResource = mercureMessage.data;
+    if (!("@id" in mercureMessageResource)) {
+      return false;
+    }
+    if (!currentResources.includes(mercureMessageResource["@id"])) {
+      const publishedIri = getPublishedResourceIri(mercureMessageResource);
+      if (!publishedIri || !currentResources.includes(publishedIri)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  addMercureMessageToQueue(mercureMessage) {
+    this.mercureMessageQueue = [
+      ...this.mercureMessageQueue.filter((existingMessage) => {
+        return existingMessage.data["@id"] !== mercureMessage.data["@id"];
+      }),
+      mercureMessage
+    ];
+  }
+  async processMessageQueue() {
+    const messages = this.mercureMessageQueue;
+    this.mercureMessageQueue = [];
+    const path = this._fetcherStore.primaryFetchPath;
+    const resourceActions = this.collectResourceActions(messages);
+    const fetchedResources = await this.fetch(resourceActions.toFetch);
+    const toSave = [...resourceActions.toSave, ...fetchedResources];
+    for (const resource of toSave) {
+      this.resourcesStore.saveResource({
+        resource,
+        path,
+        isNew: true
+      });
+    }
+  }
+  collectResourceActions(messages) {
+    const toSave = [];
+    const toFetch = [];
+    for (const message of messages) {
+      this.lastEventId = message.event.lastEventId;
+      if (!this.isMessageForCurrentResource(message)) {
+        continue;
+      }
+      const isDelete = Object.keys(message.data).length === 1 && message.data["@id"];
+      if (!isDelete && message.data["@type"] === "ComponentPosition") {
+        toFetch.push(message.data["@id"]);
+        continue;
+      }
+      toSave.push(message.data);
+    }
+    return {
+      toSave,
+      toFetch
+    };
+  }
+  async fetch(paths) {
+    const resources = [];
+    if (paths.length) {
+      if (!this.fetcher) {
+        throw new Error("Mercure cannot fetch resources. Fetcher is not set.");
+      }
+      const fetchPromises = [];
+      for (const path of paths) {
+        const fetchPromise = this.fetcher.fetchResource({
+          path,
+          noSave: true,
+          shallowFetch: true
+        });
+        fetchPromises.push(fetchPromise);
+      }
+      await Promise.all(fetchPromises).then((responses) => {
+        for (const resource of responses) {
+          if (!resource) {
+            continue;
+          }
+          resources.push(resource);
+        }
+      });
+    }
+    return resources;
+  }
+  get hubUrl() {
+    if (!this.hub) {
+      return;
+    }
+    const hub = new URL(this.hub);
+    hub.searchParams.append("topic", "*");
+    if (this.lastEventId) {
+      hub.searchParams.append("Last-Event-ID", this.lastEventId);
+    }
+    return hub.toString();
+  }
+  get hub() {
+    return this.mercureStore.hub;
+  }
+  get mercureStore() {
+    return this._mercureStore;
+  }
+  get resourcesStore() {
+    return this._resourcesStore;
+  }
+}

package/dist/runtime/api/site-config.d.ts

@@ -0,0 +1,36 @@
+import type { SiteConfigStore } from '#cwa/storage/stores/site-config/site-config-store';
+import type CwaFetch from '#cwa/api/fetcher/cwa-fetch';
+import type { SiteConfigParams } from '#cwa/types';
+import type { CwaResource } from '#cwa/resources/resource-utils';
+export default class SiteConfig {
+    private readonly cwaFetch;
+    private readonly storeDefinition;
+    private readonly userConfig;
+    private utils;
+    private readonly _store;
+    private readonly _apiState;
+    constructor(cwaFetch: CwaFetch, storeDefinition: SiteConfigStore, userConfig: Partial<SiteConfigParams>);
+    loadConfig(): Promise<SiteConfigParams>;
+    saveConfig(newConfig: Partial<SiteConfigParams>): {
+        totalConfigsChanged: number;
+    };
+    get totalRequests(): import("vue").ComputedRef<number>;
+    get apiState(): {
+        requests: import("vue").Ref<{
+            then: <TResult1 = CwaResource | undefined, TResult2 = never>(onfulfilled?: ((value: CwaResource | undefined) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined) => Promise<TResult1 | TResult2>;
+            catch: <TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined) => Promise<CwaResource | TResult | undefined>;
+            finally: (onfinally?: (() => void) | null | undefined) => Promise<CwaResource | undefined>;
+            readonly [Symbol.toStringTag]: string;
+        }[], Promise<CwaResource | undefined>[] | {
+            then: <TResult1 = CwaResource | undefined, TResult2 = never>(onfulfilled?: ((value: CwaResource | undefined) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined) => Promise<TResult1 | TResult2>;
+            catch: <TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined) => Promise<CwaResource | TResult | undefined>;
+            finally: (onfinally?: (() => void) | null | undefined) => Promise<CwaResource | undefined>;
+            readonly [Symbol.toStringTag]: string;
+        }[]>;
+        hasError: import("vue").Ref<boolean, boolean>;
+    };
+    get isLoading(): boolean;
+    get savedSiteConfig(): Partial<SiteConfigParams> | undefined;
+    get config(): SiteConfigParams;
+    private get store();
+}

package/dist/runtime/api/site-config.js

@@ -0,0 +1,135 @@
+import { updateSiteConfig } from "#imports";
+import { computed, ref } from "vue";
+import { XMLValidator } from "fast-xml-parser";
+import { consola } from "consola";
+import { useCwaSiteConfig } from "#cwa/composables/useCwaSiteConfig";
+export default class SiteConfig {
+  constructor(cwaFetch, storeDefinition, userConfig) {
+    this.cwaFetch = cwaFetch;
+    this.storeDefinition = storeDefinition;
+    this.userConfig = userConfig;
+    this.utils = useCwaSiteConfig();
+    this._store = this.storeDefinition.useStore();
+  }
+  cwaFetch;
+  storeDefinition;
+  userConfig;
+  utils;
+  _store;
+  _apiState = {
+    requests: ref([]),
+    hasError: ref(false)
+  };
+  async loadConfig() {
+    this.store.$patch({
+      isLoading: true
+    });
+    const response = await this.cwaFetch.fetch("/_/site_config_parameters", {
+      credentials: "omit"
+    });
+    const serverConfig = this.utils.responseToConfig(response, true);
+    const resolvedConfig = this.utils.mergeConfig(this.userConfig, serverConfig);
+    this.store.$patch({
+      isLoading: false,
+      config: resolvedConfig,
+      serverConfig
+    });
+    return resolvedConfig;
+  }
+  saveConfig(newConfig) {
+    const returnData = {
+      totalConfigsChanged: 0
+    };
+    if (newConfig.sitemapXml) {
+      const validationResult = XMLValidator.validate(newConfig.sitemapXml);
+      if (validationResult !== true) {
+        consola.error(validationResult);
+        this.store.$patch({
+          isLoading: false
+        });
+        this._apiState.hasError.value = true;
+        this._apiState.requests.value = [];
+        return returnData;
+      }
+    }
+    if (this.totalRequests.value > 0 || !this.savedSiteConfig) {
+      return returnData;
+    }
+    this._apiState.hasError.value = false;
+    this._apiState.requests.value = [];
+    const changedKeys = [];
+    for (const [newKey, newValue] of Object.entries(newConfig)) {
+      if (this.savedSiteConfig[newKey] === void 0 || newValue !== this.savedSiteConfig[newKey]) {
+        changedKeys.push(newKey);
+      }
+    }
+    returnData.totalConfigsChanged = changedKeys.length;
+    const allRequests = [];
+    for (const changedKey of changedKeys) {
+      const isCreatingConfigKey = this.savedSiteConfig[changedKey] === void 0;
+      const method = isCreatingConfigKey ? "POST" : "PATCH";
+      const path = isCreatingConfigKey ? `/_/site_config_parameters` : `/_/site_config_parameters/${changedKey}`;
+      const value = typeof newConfig[changedKey] === "boolean" ? JSON.stringify(newConfig[changedKey]) : newConfig[changedKey];
+      const body = {
+        key: changedKey,
+        value
+      };
+      const request = this.cwaFetch.fetch(path, {
+        ...this.cwaFetch.getRequestOptions(method),
+        body
+      });
+      allRequests.push(request);
+    }
+    this._apiState.requests.value = allRequests;
+    if (!changedKeys.length) {
+      return returnData;
+    }
+    Promise.all(this._apiState.requests.value).then((responses) => {
+      if (responses.filter((r) => r === void 0).length) {
+        this._apiState.hasError.value = true;
+      }
+      const updatedConfig = {};
+      for (const response of responses) {
+        if (response === void 0) {
+          continue;
+        }
+        const configKey = response.key;
+        updatedConfig[configKey] = this.utils.processApiConfigValue(response.value);
+      }
+      const config = this.utils.mergeConfig(this.config, updatedConfig);
+      this.store.$patch({
+        isLoading: false,
+        config,
+        serverConfig: this.utils.mergeConfig(this.savedSiteConfig || {}, updatedConfig)
+      });
+      this._apiState.requests.value = [];
+      updateSiteConfig(this.utils.resolvedConfigToSiteConfig(config));
+    }).catch((err) => {
+      console.error(err);
+      this._apiState.hasError.value = true;
+      this.store.$patch({
+        isLoading: false
+      });
+      this._apiState.requests.value = [];
+    });
+    return returnData;
+  }
+  get totalRequests() {
+    return computed(() => this._apiState.requests.value.length);
+  }
+  get apiState() {
+    return { ...this._apiState };
+  }
+  get isLoading() {
+    return this.store.isLoading;
+  }
+  get savedSiteConfig() {
+    return this.store.serverConfig;
+  }
+  get config() {
+    return this.store.getConfig;
+  }
+  get store() {
+    return this._store;
+  }
+}

package/dist/runtime/composables/component/html-content.d.ts

@@ -0,0 +1,2 @@
+import type { Ref } from 'vue';
+export declare const useHtmlContent: (container: Ref<null | HTMLElement>) => void;

package/dist/runtime/composables/component/html-content.js

@@ -0,0 +1,74 @@
+import { createApp, h, onBeforeUnmount, onMounted, watch } from "vue";
+import { useRouter } from "vue-router";
+import { CwaLink } from "#components";
+export const useHtmlContent = (container) => {
+  const router = useRouter();
+  let watchStopHandle;
+  function convertAnchor(anchor) {
+    const href = anchor.getAttribute("href");
+    if (!href) {
+      return;
+    }
+    function hrefToUrl(href2) {
+      try {
+        const url = new URL(href2);
+        if (typeof window !== "undefined" && url.hostname === window.location.hostname) {
+          return url.pathname + url.search + url.hash;
+        }
+        return href2;
+      } catch (err) {
+        if (href2.startsWith("/")) return href2;
+        return `//${href2}`;
+      }
+    }
+    const linkProps = {
+      to: hrefToUrl(href),
+      noPrefetch: void 0,
+      prefetch: false,
+      noRel: void 0
+    };
+    for (const attr of anchor.attributes) {
+      if (!["href", "target"].includes(attr.name)) {
+        const anchorAttr = anchor.getAttribute(attr.name);
+        if (anchorAttr) {
+          linkProps[attr.name] = anchorAttr;
+        }
+      }
+    }
+    const innerHtml = anchor.innerHTML;
+    const app = createApp({
+      render() {
+        return h(CwaLink, linkProps, {
+          default: () => h("span", { innerHTML: innerHtml })
+        });
+      }
+    });
+    app.use(router);
+    return app;
+  }
+  function replaceAnchors() {
+    if (typeof container.value?.getElementsByTagName !== "function") {
+      return;
+    }
+    const anchors = container.value.getElementsByTagName("a");
+    Array.from(anchors).forEach((anchor) => {
+      const nuxtLink = convertAnchor(anchor);
+      if (nuxtLink) {
+        const parent = anchor.parentNode;
+        if (parent) {
+          const linkContainer = document.createElement("span");
+          parent.replaceChild(linkContainer, anchor);
+          nuxtLink.mount(linkContainer);
+        }
+      }
+    });
+  }
+  onMounted(() => {
+    watchStopHandle = watch(container, replaceAnchors, {
+      immediate: true
+    });
+  });
+  onBeforeUnmount(() => {
+    watchStopHandle && watchStopHandle();
+  });
+};

package/dist/runtime/composables/cwa-collection-pagination.d.ts

@@ -0,0 +1,13 @@
+export type CwaPaginationProps = {
+    currentPage: number;
+    totalPages: number;
+    maxPagesToDisplay: number;
+};
+export type CwaPaginationEmits = {
+    next: [];
+    previous: [];
+    change: [value: number];
+};
+export declare const useCwaCollectionPagination: (props: CwaPaginationProps) => {
+    pages: import("vue").ComputedRef<number[]>;
+};

package/dist/runtime/composables/cwa-collection-pagination.js

@@ -0,0 +1,34 @@
+import { computed } from "vue";
+export const useCwaCollectionPagination = (props) => {
+  const pages = computed(() => {
+    if (!props.totalPages) {
+      return [];
+    }
+    const allPages = Array.from(Array(props.totalPages), (_, x) => x + 1);
+    const maxPagesToDisplay = props.maxPagesToDisplay || 7;
+    if (allPages.length < maxPagesToDisplay) {
+      return allPages;
+    }
+    const displayPages = [];
+    displayPages.push(props.currentPage);
+    let lowest = props.currentPage;
+    let highest = props.currentPage;
+    let displayCounter = 1;
+    while (displayCounter < maxPagesToDisplay) {
+      displayCounter++;
+      if ((displayCounter % 2 === 0 || highest >= props.totalPages) && lowest > 1) {
+        lowest--;
+        displayPages.unshift(lowest);
+        continue;
+      }
+      if (highest < props.totalPages) {
+        highest++;
+        displayPages.push(highest);
+      }
+    }
+    return displayPages;
+  });
+  return {
+    pages
+  };
+};

package/dist/runtime/composables/cwa-collection-resource.d.ts

@@ -0,0 +1,18 @@
+import type { Ref } from 'vue';
+import type { CwaResourceUtilsOps } from './cwa-resource.js';
+import type { CwaResource } from '#cwa/resources/resource-utils';
+export declare const useCwaCollectionResource: (iri: Ref<string>, ops?: CwaResourceUtilsOps) => {
+    resource: import("vue").ComputedRef<import("../storage/stores/resources/state.js").CwaCurrentResourceInterface | undefined>;
+    collectionItems: import("vue").ComputedRef<CwaResource[] | undefined>;
+    isLoadingCollection: Ref<boolean, boolean>;
+    pageModel: Ref<any, any>;
+    totalPages: Ref<number, number>;
+    goToNextPage: () => void;
+    goToPreviousPage: () => void;
+    changePage: (newPageNumber: number) => void;
+    resolveResourceLink: (resource: CwaResource, property: string) => any;
+    $cwa: import("../cwa.js").default;
+    getResource: () => import("vue").ComputedRef<import("../storage/stores/resources/state.js").CwaCurrentResourceInterface | undefined>;
+    exposeMeta: import("#imports").CwaResourceMeta;
+    getCurrentStyleName: (resource: CwaResource) => string | undefined;
+};

package/dist/runtime/composables/cwa-collection-resource.js

@@ -0,0 +1,105 @@
+import { computed, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useCwaResourceRoute } from "#cwa/composables/useCwaResourceRoute";
+import { useCwa, useCwaResource, useQueryBoundModel } from "#imports";
+export const useCwaCollectionResource = (iri, ops) => {
+  const cwaResource = useCwaResource(iri, ops);
+  const resource = cwaResource.getResource();
+  const isLoadingCollection = ref(false);
+  const fetchedCollectionItems = ref();
+  const loadCounter = ref(0);
+  const $cwa = useCwa();
+  const route = useRoute();
+  const { model: pageModel } = useQueryBoundModel("page", { defaultValue: 1, asNumber: true });
+  const collectionItems = computed(() => {
+    return fetchedCollectionItems.value || resource.value?.data?.collection?.["member"];
+  });
+  const dataResourceIri = computed(() => {
+    return resource.value?.data?.resourceIri;
+  });
+  const totalPages = ref(1);
+  function populateCollectionData(resource2) {
+    if (resource2?.collection?.["member"]) {
+      fetchedCollectionItems.value = resource2?.collection?.["member"];
+      const lastPagePath = resource2?.collection?.["view"]?.["last"];
+      if (!lastPagePath) {
+        totalPages.value = 1;
+      } else {
+        const urlParams = new URLSearchParams(lastPagePath.split("?")[1]);
+        const pageQueryParam = urlParams.get("page");
+        totalPages.value = pageQueryParam ? parseInt(pageQueryParam) || 1 : 1;
+      }
+    }
+  }
+  async function reloadCollection() {
+    if (!dataResourceIri.value) {
+      return;
+    }
+    const currentLoadCounter = ++loadCounter.value;
+    isLoadingCollection.value = true;
+    const { response } = $cwa.fetch({ path: iri.value });
+    const { _data: resource2 } = await response;
+    if (currentLoadCounter === loadCounter.value) {
+      populateCollectionData(resource2);
+      isLoadingCollection.value = false;
+    }
+  }
+  function goToNextPage() {
+    if (pageModel.value >= totalPages.value) {
+      return;
+    }
+    changePage(pageModel.value + 1);
+  }
+  function goToPreviousPage() {
+    if (!pageModel.value || pageModel.value <= 1) {
+      return;
+    }
+    changePage(pageModel.value - 1);
+  }
+  function changePage(newPageNumber) {
+    pageModel.value = newPageNumber;
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: "smooth"
+    });
+  }
+  if (route) {
+    watch(() => route.query, async (newQuery, oldQuery) => {
+      const cleanPaginationFromQuery = (q) => {
+        const cleanQuery = { ...q };
+        delete cleanQuery.perPage;
+        delete cleanQuery.page;
+        return cleanQuery;
+      };
+      const cleanedOld = cleanPaginationFromQuery(oldQuery);
+      const cleanedNew = cleanPaginationFromQuery(newQuery);
+      if (JSON.stringify(cleanedOld) !== JSON.stringify(cleanedNew)) {
+        pageModel.value = 1;
+      }
+      if (JSON.stringify(oldQuery) === JSON.stringify(newQuery)) {
+        return;
+      }
+      await reloadCollection();
+    });
+  }
+  populateCollectionData(resource.value?.data);
+  watch(() => resource.value?.data, (newData) => {
+    if (newData) {
+      populateCollectionData(newData);
+    }
+  });
+  const { getResourceRoute } = useCwaResourceRoute();
+  return {
+    ...cwaResource,
+    resource,
+    collectionItems,
+    isLoadingCollection,
+    pageModel,
+    totalPages,
+    goToNextPage,
+    goToPreviousPage,
+    changePage,
+    resolveResourceLink: getResourceRoute
+  };
+};

package/dist/runtime/composables/cwa-image-resource.d.ts

@@ -0,0 +1,15 @@
+import { type ImageOpsType, type MediaFile } from '#cwa/composables/cwa-image';
+import type { Ref } from 'vue';
+import type { CwaResourceUtilsOps } from './cwa-resource.js';
+export declare const useCwaImageResource: (iri: Ref<string>, imageOps?: Pick<Partial<ImageOpsType>, "imageRef"> & Omit<ImageOpsType, "mediaObjects" | "imageRef">, ops?: CwaResourceUtilsOps) => {
+    contentUrl: import("vue").ComputedRef<string | undefined>;
+    displayMedia: import("vue").ComputedRef<MediaFile | undefined>;
+    handleLoad: () => void;
+    loaded: Ref<boolean, boolean>;
+    resource: import("vue").ComputedRef<import("../storage/stores/resources/state.js").CwaCurrentResourceInterface | undefined>;
+    mediaObjects: import("vue").ComputedRef<Record<string, MediaFile[]>>;
+    $cwa: import("../cwa.js").default;
+    getResource: () => import("vue").ComputedRef<import("../storage/stores/resources/state.js").CwaCurrentResourceInterface | undefined>;
+    exposeMeta: import("./cwa-resource.js").CwaResourceMeta;
+    getCurrentStyleName: (resource: import("../resources/resource-utils.js").CwaResource) => string | undefined;
+};

package/dist/runtime/composables/cwa-image-resource.js

@@ -0,0 +1,26 @@
+import { useCwaImage } from "#cwa/composables/cwa-image";
+import { useTemplateRef, computed } from "vue";
+import { useCwaResource } from "./cwa-resource.js";
+export const useCwaImageResource = (iri, imageOps, ops) => {
+  const cwaResource = useCwaResource(iri, ops);
+  const resource = cwaResource.getResource();
+  const mediaObjects = computed(() => {
+    return resource.value?.data?._metadata.mediaObjects;
+  });
+  const imageRef = imageOps?.imageRef || useTemplateRef("image");
+  const {
+    contentUrl,
+    displayMedia,
+    handleLoad,
+    loaded
+  } = useCwaImage(iri, { ...imageOps, imageRef, mediaObjects });
+  return {
+    ...cwaResource,
+    contentUrl,
+    displayMedia,
+    handleLoad,
+    loaded,
+    resource,
+    mediaObjects
+  };
+};

package/dist/runtime/composables/cwa-image.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLImageElement } from 'happy-dom';
+import { type Ref, type ShallowRef, type ComputedRef } from 'vue';
+export type ImageOpsType = {
+    imagineFilterName?: string;
+    fileProp?: string;
+    imageRef: ShallowRef<HTMLImageElement | null>;
+    mediaObjects: ComputedRef<Record<string, MediaFile[]>>;
+};
+export type MediaFile = {
+    contentUrl: string;
+    fileSize: number;
+    mimeType: string;
+    formattedFileSize: string;
+    imagineFilter?: string;
+    width?: number;
+    height?: number;
+};
+export type CwaImageReturnType = {
+    contentUrl: ComputedRef<string | undefined>;
+    displayMedia: ComputedRef<MediaFile | undefined>;
+    handleLoad: () => void;
+    loaded: Ref<boolean>;
+};
+export declare const useCwaImage: (iri: Ref<string>, ops: ImageOpsType) => CwaImageReturnType;